@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');

* {margin: 0;padding: 0;box-sizing: border-box;}
html {font-size: 10px; scroll-behavior: smooth;}
body {
    font-family: 'Noto Sans KR', sans-serif;
}




@media (max-width: 1540px) {
    h2 {
        font-size: 125px;
        line-height: 110px;
    }
    .text_area .back svg{
        transform: scale(0.8);
    }
}



@media (max-width: 1340px) {
    h2 {
        font-size: 110px;
        line-height: 100px;
    }
    #visual h2 {font-size: 110px;}
    .text_area .back svg{
        transform: scale(0.7);
    }
}

@media (max-width: 1240px) {    
    h2 {
        font-size: 100px;
        line-height: 90px;
    }
    #visual h2 {
        font-size: 120px;
        line-height: 110px;
    }
    #visual h2 br {display: block;}
    .text_area .back svg {
        transform: scale(0.6);
    }
    
    footer p span {
        margin-left: 10px!important;
        margin-right: 10px !important;
        display: none !important;
    }
    footer p br {
        display: block !important;
    }
    
}


@media (max-width: 1080px) {
    #visual .drawsvg {transform: scale(1.2);}
    #visual svg#left {top: -95px;}
    #visual svg#right {
        top: 95px;
        transform: translateX(-55%) rotate(-9deg);
    }

    #text_2 .back {
        left: 35%;
    }
}


@media (max-width: 1024px) {  
    #visual .drawsvg {transform: scale(1.5);}
    #visual svg#left {top: -160px; left: 67%;}
    #visual svg#right {
        top: 0px;
        transform: translateX(-55%) rotate(-20deg);
    }
    h2 {
        font-size: 80px;
        line-height: 70px;
    }
    h2 span {margin-left: 15px;}
    #visual h2 {
        font-size: 120px;
        line-height: 110px;
    }
    .text_area .back svg {
        transform: scale(0.5);
    }
}

 

@media (max-width: 770px) {
    header {
        height: 6rem;
    }
    header nav {
        padding: 0rem 2rem;
    }
    header .btn .box {
        width: 28px;
        height: 3px;
    }
    header .btn.on .box {
        height: 4px;
    }
    header .btn .box:nth-of-type(1) {transform: translateY(-10px);}
    header .btn .box:nth-of-type(2) {transform: translateY(-2px);}
    header .btn .box:nth-of-type(3) {transform: translateY(6px);}
    header nav h1 {
        width: 80px;
        height: 40px;
    }
    header nav .gnb ul {
        width: 100%;
        margin: 0 auto;
        align-items: center;
        padding-left: 0;
    }

    h2 {
        font-size: 80px;
        line-height: 70px;
        text-align: center;
    }



    #visual svg#left {top: -190px; left: 77%;}
    #visual svg#right {
        top: 50px;
        transform: translateX(-65%) rotate(-20deg);
    }

    #text_1 .item,
    #text_3 .item,
    #text_1 .item .desc,
    #text_2 .item .desc,
    #text_3 .item .desc {
        align-items: center;
        justify-content: center;
        margin: 0;
    }
    #text_2 h2 br {
        display: block;
    }
    #text_1 .back {left: -5%;}
    #text_1 .back svg {transform: scale(1);}
    #text_2 .back {left: 95%;}
    #text_2 .back svg {transform: scale(0.9);}
    #text_3 .back {left: -18%;}
    #text_3 .back svg {transform: scale(1);}

    #text_1.active svg, #text_2.active svg {opacity: 0.4;}

    #text_3.active svg, body.fp-viewing-4 #text_3 svg  {opacity: 0.2;}


    footer {
        padding: 0 10px;
    }
    footer .inn {
        width: calc(100% - 40px);
        margin: 30px auto;
    }
    footer p {
        flex-direction: column !important;
        line-height: 24px;
    }
    footer p span {
        display: none;
    }
    footer p br {
        display: block !important;
    }
}

@media (max-width: 640px) {
    header nav .gnb li a {
        width: 360px;
        height: 80px;
        margin: 0 auto;
        font-size: 40px;
        line-height: 80px;
        border-radius: 30px;
    }    
    #contact_btn {display: none;}


    
    #visual .drawsvg {transform: scale(1.8);}
    #visual svg#left {
        top: -220px; left: 80%;
        opacity: 0.5;
    }
    #visual svg#right {
        top: -35px;
        transform: translateX(-68%) rotate(-12deg);
        opacity: 0.5;
    }
    #visual h2 {
        font-size: 100px;
    }




    h2 {
        font-size: 60px;
        line-height: 65px;
    }
    #text_1 .back {left: -10%;}
    #text_2 .back {left: 100%;}
    #text_3 .back {left: -25%;}
    #text_1 .back svg {transform: scale(0.9);}
    #text_2 .back svg {transform: scale(0.8);}
    #text_3 .back svg {transform: scale(0.9);}
}




@media (max-width: 480px) {
    header nav .gnb li a {
        width: 300px;
    }
    h2 {
        font-size: 45px;
        line-height: 45px;
    }


    
    #visual .drawsvg {transform: scale(2.5);}
    #visual svg#left {
        top: -280px; left: 90%;
        opacity: 0.2;
    }
    #visual svg#right {
        top: -200px;
        transform: translateX(-75%) rotate(-12deg);
        opacity: 0.2;
    }
    #visual h2 {
        font-size: 70px;
        line-height: 75px;
    }






    #text_1 .back {left: -30%;}
    #text_2 .back {left: 105%;}
    #text_3 .back {left: -30%; top: 70%;}
    #text_2 .back svg {transform: scale(0.7);}
    #text_3 .back svg {transform: scale(0.7);}



    footer .footer_logo .logo img {
        margin-right: 18px;
    }
    footer .sns a {
        display: block;
        margin-top: 10px;
        margin-right: 18px;
        width: 34px !important;
        height: 34px !important;
    }





    footer p {
        margin-top: 10px;
        font-size: 1rem !important;
        line-height: 1.6rem;
    }
}




@media (max-width: 420px) {
    #text_1 .back {left: -44%;}
    #text_2 .back {left: 108%;}
    #text_3 .back {left: -39%;}
}





@media (max-width: 360px) {
    #visual svg#left {
        top: -280px;
    }
    #visual svg#right {
        top: -220px;
    }


    
    #text_1 .back {left: -53%;}
    #text_2 .back {left: 120%;}
    #text_3 .back {left: -50%;}



    footer .sns a {
        margin-top: 10px;
    }
}




/* mobile height */



@media (max-height: 480px) {
    #contact_btn {display: none;}


    #visual .drawsvg {transform: scale(1.5);}
    #visual svg#left {
        top: -280px; left: 77%;
        opacity: 0.2;
    }
    #visual svg#right {
        top: -200px;
        transform: translateX(-55%) rotate(-12deg);
        opacity: 0.2;
    }
    #visual h2 {
        font-size: 70px;
        line-height: 75px;
    }



    h2 {
        font-size: 70px;
        line-height: 70px;
    }
    #text_1 .item .desc,
    #text_3 .item .desc {
        align-items: flex-start;
        margin-left: 20px;
    }
    #text_2 h2 br {display: none;}
    #text_2 .item .desc {
        align-items: flex-end;
        margin-right: 20px;
    }

    #text_1.active svg, #text_2.active svg {opacity: 1;}
    #text_3.active svg, body.fp-viewing-4 #text_3 svg {opacity: 1;}

    #text_1 .back {left: 45%;}
    #text_2 .back {left: 35%;}
    #text_3 .back {left: 50%;}
    #text_1 .back svg {transform: scale(0.5);}
    #text_2 .back svg {transform: scale(0.4);}
    #text_3 .back svg {transform: scale(0.5);}
}