@charset "UTF-8";

@media screen and (max-width:1280px){
    /* ============== main ==============  */
    /* main-slide */ 
    .main-slide .main-swiper {
        width: calc(100% + 330px);
        margin-left: -330px;
    }

}

/* 태블릿 */

@media screen and (max-width:1024px){
    /* ============== variables ==============  */
    :root{
        /* padding */
        --main-p: 3.125rem;
        --sub-p: 3.125rem;

    }
    /* ============== common ==============  */

    main {
        margin-top: 5.625rem;
    }

    .pc { display: none !important;}
    .mo { display: block !important;}


    /* header */
    #header .header-inner {
        height: 5.625rem;
    }

    #header .header-inner h1 .logo {
        width: 15.5rem;
        height: 2.688rem; 
    }


    /* ============== main ==============  */
    .main .btn {
        width: 100%;
    }
    /* main-visual */
    .main .main-visual,
    .main-slide {
        height: calc(100vh - 5.625rem);
    }

    .main .main-visual .main-visual-box .visual-tit {
        word-break: keep-all;
    }

    /* main-slide */ 
    .main-slide{
        min-height: calc(100vh - 5.625rem);
        height: 100%;
        padding: 6.25rem 0;
    }

    .main-slide .container {
        display: block;
        padding: 0 var(--main-p);
        max-width: calc(var(--container) + (var(--main-p) * 2));
        width: 100%;
    }

    .main-slide .main-swiper {
        max-width: 100%;
        width: 100%;
        margin-left: 0;
        overflow: hidden;
    }

    .main-slide .main-swiper .swiper-slide {
        display: block;
    }

    .main-slide .main-swiper-bg {
        max-width: 100%;
        min-height: 40.625rem;
        height: 40.625rem;
        margin-bottom: 2.375rem;
        margin-right: 0;
        border-radius: 1.25rem;
    }

    .main-slide .main-swiper-info > div:first-child {
        order: 1;
    }

    .main-slide .main-swiper-info > div > p:first-child {
        display: none;
    }
    
    .main-slide .main-swiper-info .main-swiper-txt {
        display: -webkit-box;
        margin-bottom: 2.375rem;
        line-height: 1.56;
        overflow: hidden;
        word-break: keep-all;
        text-overflow: ellipsis;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    .main-slide .main-swiper-info .main-swiper-txt.no-ellipsis {
        display: block;
        height: 50px;
    }

    .main-slide .main-swiper-info .main-swiper-txt p b br {
        display: block;
    }

    .main-slide .main-swiper-info .swiper-btn-box {
        margin-bottom: 2.625rem;
        order: 0;
    }

    .main-slide .main-swiper-info .swiper-btn-box .swiper-button-prev,
    .main-slide .main-swiper-info .swiper-btn-box .swiper-button-next {
        min-width: initial;
        width: 62px;
        height: 62px;
    }

    /* main-service */
    .main-service {
        padding: 5.625rem 0;
    }

    .main-service .main-service-list {
        display: block;
        margin: 0;
    }
    
    .main-service .main-service-list li {
        padding: 0 1.563rem;
        width: 100%;
    }

    .main-service .main-service-list li + li {
        margin-top: 2.5rem;
    }

    .main-service .main-service-list .main-service-box {
        padding: 5.75rem 3.125rem 3rem;
        border-radius: 1.25rem;
    }

    /* main-cs */
    .main-cs {
        padding: 5.25rem 0 6.5rem;
        background-image: url('../images/bg-main-cs-m.png');
    }

    .main-cs .container {
        padding-left: 7.813rem;
        padding-right: 7.813rem;
    }

}

/* 모바일 */

@media screen and (max-width: 767px) {
    /* ============== common ==============  */
    html {
        font-size: 2.0860vw;
    }

    .btn {
        height: 5rem;
        border-radius: 0.625rem;
        font-size: var(--font-size-32);
    }

    /* footer */
    #footer {
        padding-top: 3.125rem;
        padding-bottom: 3.75rem;
    }

    #footer .footer-address {
        display: block;
        margin-top: 3rem;
        margin-bottom: 3rem;
        font-size: var(--font-size-30);
        line-height: 1.4;
    }

    #footer .copy {
        font-size: var(--font-size-28);
    }

    /* ============== main ==============  */
    /* main-visual */
    .swiper-pagination {
        display: none;
    }

    .main .main-visual .main-visual-box h3 {
        font-size: var(--font-size-52);
    }

    .main .main-visual .main-visual-box .visual-tit {
        padding: 0 1rem;
        font-size: var(--font-size-32);
    }
    .main .main-visual .main-visual-box .visual-tit br {
        display: block;
    }

    .main .main-visual .scroll-btn {
        left: calc(50% - 3.125rem);
        bottom: 2.625rem;
        width: 6.25rem;
        height: 9.188rem;
        padding: 2.188rem 0;
        border-radius: 3.125rem;
        font-size: var(--font-size-20);
    }

    .main .main-visual .scroll-btn::after {
        width: 1.563rem;
        height: 2.313rem;
    }

    /* main-slide */

    .main-slide .main-swiper-info h3 {
        margin-bottom: 1.875rem;
        font-size: var(--font-size-54);
    }

    .main-slide .main-swiper-info .main-swiper-txt {
        font-size: var(--font-size-32);
    }

    .main-slide .main-swiper-info .main-swiper-txt.no-ellipsis {
        height: 6.25rem;
    }
    
    .main-slide .main-swiper-info .main-swiper-txt br {
        display: none;
    }

    .main-slide .main-swiper-info .swiper-btn-box .swiper-button-prev,
    .main-slide .main-swiper-info .swiper-btn-box .swiper-button-next {
        min-width: initial;
        width: 5rem;
        height: 5rem;
    }
    
    .main-slide .main-swiper-info .swiper-btn-box .swiper-button-next {
        margin-left: 1.625rem;
    }

    /* main-service */

    .main-service .main-service-list .main-service-box::before {
        height: 5rem;
        margin-bottom: 2.5rem;
    }

    .main-service .main-service-list li:nth-child(1) .main-service-box::before {
        width: 6.25rem;
    }

    .main-service .main-service-list li:nth-child(2) .main-service-box::before {
        width: 6.438rem;
    }

    .main-service .main-service-list li:nth-child(3) .main-service-box::before {
        width: 4.938rem;
        height: 5.938rem;
    }

    .main-service .main-service-list .main-service-box h3 {
        font-size: var(--font-size-44);
    }

    .main-service .main-service-list .main-service-box p {
        margin: 2rem 0 3.688rem;
        font-size: var(--font-size-32);
        line-height: 1.2;
        letter-spacing: 0;
    }

    /* main-cs */

    .main-cs h2 {
        margin-bottom: 3.563rem;
        font-size: var(--font-size-60);
    }

    .main-cs h2::before {
        width: 5.063rem;
        height: 5.063rem;
    }

    .main-cs h2 span {
        margin: 1.75rem 0 0.75rem;
        font-size: var(--font-size-24);
    }
    
    .main-cs .main-cs-phone-box {
        font-size: var(--font-size-80);
    }

    .main-cs .main-cs-txt {
        margin: 1.625rem auto 2.5rem;
        max-width: 25.688rem;
        font-size: var(--font-size-26);
        line-height: 3.75rem;
    }

    .main-cs p {
        font-size: var(--font-size-32);
        line-height: 1.3;
        letter-spacing: -0.01em;
    }

    .main-cs p br {
        display: block;
    }

    .main-cs .btn {
        margin-top: 3.125rem;
    }


}