body {
}

.container{
    overflow-x: hidden;
}


*{
    font-size:1rem;
    transition:all 0.3s ease;
    font-family:Pretendard;
    font-family:'Pretendard-regular';
}
/*헤더*/
header{
    width:100%;
    padding:0 10%;
    height:18vh;
    position:fixed;
    top:0;
    left:0;
    display:flex;
    justify-content:space-between;
    align-items:center;
    z-index: 3;
    transition:all 0.3s linear;
}
header.scroll{
    background: rgb(0 0 0 / 31%);
    height: 11vh;
    transition: all 0.3s linear;
}
header.scroll>img {
    width: 190px;
    margin-top: 0;
}

.mobile_header{
    display:none;
}

header>.logo_div{
    width: 17%;
    height:100%;
    display: flex;
    align-items: center;
}

header>.logo_div img{
    width:76%;
}

header>.logo_div img:hover{
    cursor:pointer;
}

.head_menu {
    display:flex;
    justify-content:space-between;
    width:50%;
}

.head_menu li{
    color:#fff;
    font-size: 1.1rem;
    font-family: 'Pretendard-ExtraLight';
}

.head_menu li:hover{
    cursor:pointer;
}
.lang{
    width:17%;
}

.lang input{
    display:none;
}


.lang label{
    color:#fff;
    margin:0 3px;
    opacity:0.7;
    border-bottom:2px solid transparent;
}

.lang label:hover{
    cursor:pointer;
}

.lang input:checked + label{
    border-bottom:2px solid #fff;
    opacity:1;
}
.sub_main {
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}


/*모바일 언어선택*/

.mo_lang {
    width: 100%;
    padding: 6% 7%;    
    position: relative;
}

.mo_lang label{
    font-size: 1.9rem;
    font-weight:bold;
}

.mo_lang input{
    display:none;
}

.mo_lang label{
    color:#000;
    margin:0 3px;
    opacity:0.7;
     border-bottom:2px solid transparent;
}

.mo_lang input:checked + label{
    border-bottom:2px solid #000;
    opacity:1;
}



.mo_lang label:hover{
    cursor:pointer;
}



/*푸터*/

footer{
    height:auto;
    width:100%;
    color:#fff;
    background: #000;
}

.footer_center{
    width:1200px;
    margin:auto;
    height:100%;
    padding: 5rem 0;
    display:flex;
    flex-direction:column;
    align-items:flex-start;

}

.footer_center>img{
    margin-bottom:1rem;
    width: 15rem;
}

.footer_center ul{
    display:block;
}
.footer_center ul li{
    float:left;
    line-height:2.5rem;
    font-family:'pretendard-regular'
}

.footer_center ul li:not(:first-child){
       margin-left:1rem;
}
.footer_center>img{
    width:11rem;
}


@media(max-width:1200px){


    *{
        font-size:.8rem;
        transition:all 0.3s ease;
    }
    .footer_center{
        width:calc(100% - 30px);
    }
    .footer_center ul li{
        font-size:1.2rem;
    }


    header{
        display:none;
    }
    .mobile_header{
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        min-height: 55px;
        padding: 14px;
        z-index: 3;
    }
    .mobile_header>img{
        width:11rem;
    }
#page{
    width:60px;
    height:60px;
    position: fixed;
    top: 0;
    right: 0;
}

#toggle {
    position: absolute;
    top: 41px;
    right: 30px;
    width: 30px;
    height: 21px;
    cursor: pointer;
    z-index: 1000;
    }

    #toggle div.bar,
    #toggle div.bar:before,
    #toggle div.bar:after {
        width: 100%;
        height: 3px;
        background: #fff;
    }

    #toggle div.bar {
        position: relative;
        transform: translateY(9px);
        transition: all 0.3s 0.3s ease;
    }

    #toggle div.bar:before {
        content: " ";
        position: absolute;
        bottom: 9px;
        transition: bottom 0.3s 0.3s ease, transform 0.3s ease;
    }

     #toggle div.bar:after {
        content: " ";
        position: absolute;
        top: 9px;
        transition: top 0.3s 0.3s ease, transform 0.3s ease;
    }

    /* Animation */

    #toggle div.bar.animate {
        background: rgba(255, 255, 255, 0);
    }

    #toggle div.bar.animate:after {
        top: 0;
        transform: rotate(45deg);
        transition: top 0.3s ease, transform 0.3s 0.3s ease;
        background:#000;
    }

    #toggle div.bar.animate:before {
        bottom: 0;
        transform: rotate(-45deg);
        transition: bottom 0.3s ease, transform 0.3s 0.3s ease;
        background:#000;
    }


    #overlay {
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        max-height: 0;
        overflow: hidden;
        transition: all 0.3s ease, max-height 0s 0.6s ease;
        z-index: 100;
        opacity: 1;
        background: #fff;
    }

    #overlay nav {
        position: absolute;
        bottom: 50px;
        top: 50px;
        left: 50px;
        right: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #overlay nav ul,
    #overlay nav ul li {
        margin: 0;
        padding: 0;
        display: block;
        position: static;
    }



     #overlay nav ul li {
        margin-bottom: 10px;
        opacity: 0;
        transition: all 0.9s 0s ease;
        margin-left: 60px;
     }

     #overlay nav ul li a {
       position: relative;
       height: 50px;
       display: inline-block;
       color: #ffffff;
       transition: all 0.6s 0s ease;
     }

     #overlay nav ul li a:after {
       content: " ";
       position: absolute;
       left: 0;
       bottom: 0;
       width: 0;
       opacity: 0;
       height: 1px;
       background: white;
       transition: all 0.6s 0s ease;
     }

     #overlay nav ul li a:hover:after {
       width: 100%;
       opacity: 1;
     }

     #overlay nav ul li a:hover {
       color: #888888;
     }

     #page.overlay #overlay nav ul li:nth-child(1) {
       transition: all 0.5s 0.3s ease;
     }
     #page.overlay #overlay nav ul li:nth-child(2) {
       transition: all 0.5s 0.4s ease;
     }
     #page.overlay #overlay nav ul li:nth-child(3) {
       transition: all 0.5s 0.5s ease;
     }
     #page.overlay #overlay nav ul li:nth-child(4) {
       transition: all 0.5s 0.6s ease;
     }
     #page.overlay #overlay nav ul li:nth-child(5) {
       transition: all 0.5s 0.7s ease;
     }
      #page.overlay .mo_lang {
       transition: all 0.5s 0.8s ease;
     }


     #overlay nav ul li a {
        text-transform: normal;
        font-size: 35px;
        font-family: 'Pretendard-Bold';
        color: #000;        white-space: nowrap;
        text-decoration: none;
     }

    #page.overlay #overlay {
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        max-height: 1200px;
        opacity: 1;
        z-index: 100;
        transition: all 0.3s ease;
    }

    #page.overlay #overlay nav ul li {

      margin-left: 0;
      opacity: 1;
    }
}


@media(max-width:1200px){
    #overlay nav {
        justify-content: flex-start;
    }
  }

@media(max-width:768px) {
    * {
        font-size: .7rem;
        transition: all 0.3s ease;
    }
}

@media(max-width:700px) {

     .mobile_header>img{
         width:11rem;
     }
    #toggle {
        position: absolute;
        top: 23px;
        right: 13px;
        transform: scale(.8);
    }

}

@media(max-width:700px){

      *{
        font-size:.7rem;transition:all 0.3s ease;
    }
}