@charset "utf-8";

@font-face {
    src: url("../font/Noto_Serif_KR/NotoSerifKR-Regular.otf");
    font-family: "Noto Serif KR";
}

@font-face {
    src: url("../font/Noto_Sans_KR/NotoSansKR-Light.otf");
    font-family: "Noto Sans KR";
}

* { box-sizing: border-box; list-style: none; }
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background-color: #f7f7f7; }
::-webkit-scrollbar-thumb { background-color: #e0e0e0; border-radius: 5px; }
*::selection { background-color: #e9e9e9; color: #FFF; }
html { scroll-behavior: smooth; }
a { text-decoration: none; color: #383838; }
body { margin: 0px; font-family: 'Noto Sans KR'; color: #383838;}
main { overflow: hidden; position: relative; }
ul { margin: 0px; padding: 0px; }
li { margin: 0px; padding: 0px; }

/*header-desktop start*/

#header { padding: 0px; width: 1280px; height: 85px; position: fixed; z-index: 999; top: 30px; left: 50%; right: 0px; text-align: center; background: #FFF; transform: translateX(-50%); transition: .3s; }

#header.on { top: 0px; }
#header .header-in { position: relative; width: 100%; font-size: 13px; }

#header > .header-in > ul { margin: 0px; padding: 0px; display: flex; }
#header > .header-in > ul > li { position: relative; display: inline-block; margin: 0px; padding: 32.5px 0px 0px; width: 12%; height: 85px; }
#header > .header-in > ul > li::after { content: ""; position: absolute; width: 2px; height: 2px; background: #383838; top: 41.5px; right: 0px; }
#header > .header-in > ul > li:nth-child(8)::after,
#header > .header-in > ul > li:nth-child(4)::after,
#header > .header-in > ul > li:nth-child(5)::after { display: none; }

#header > .header-in > ul > li:nth-child(5) { width: 15%; }
#header > .header-in > ul > li:nth-child(5) > a >  img { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); }
#header > .header-in > ul > li:nth-child(9) { width: 160px; background: #383838; }
#header > .header-in > ul > li:nth-child(9) > a { color: #FFF; }

#header > .header-in > ul > li.on > a { color: #171717; }
#header > .header-in > ul > li > a { color: #383838; font-weight: 300; font-size: 13px; }
#header > .header-in > ul > li > a > .iconify { font-size: 10px; margin-right: 3px;}

#header > .header-in > ul > li > .depth2 { visibility: hidden; margin: 0; padding: 20px 0px; position: absolute; top: 55px; left: -5px; width: 150px; background: #e9e9e9; text-align: center; opacity: 0; transition: .3s; }
#header > .header-in > ul > li > .depth2::after { content: ""; position: absolute; width: 10px; height: 10px; background: #e9e9e9; top: -5px; left: 70px; transform: rotate(45deg);}
#header > .header-in > ul > li:hover > .depth2 { visibility: visible; display: block; height: auto; opacity: 1; top: 85px;  }

#header > .header-in > ul > li > ul > li { text-shadow: none; }
#header > .header-in > ul > li > ul > li:hover { background: #fff; }
#header > .header-in > ul > li > ul > li > a { display: block; width: 150px; font-family: 'Noto Sans KR'; font-size: 12px; font-weight: 100; line-height: 36px; color: #383838; }

/*header end*/
/*header-mobile start*/

#header-mobile { display: none; }

@media (max-width: 1280px) {  
    
#header { display: none; }
#header2 { display: none; }

#header-mobile { position: fixed; top:0; z-index: 1000; width: 100%; height: 78px; background: #FFF; display: block; border-bottom: 1px solid #d0d0d0; }
#header-mobile.on { top: -100%; }
#header-mobile > a:nth-of-type(1) > img { position: absolute; top:10px; left: 20px; z-index: 100; }
#header-mobile > a:nth-of-type(2) { position: absolute; top: 24px; right: 75px; font-size: 18px; text-align: center; }
#header-mobile > a:nth-of-type(2) > p { margin: 0px; font-size: 10px; }
#header-mobile > a:nth-of-type(3) { position: absolute; top: 24px; right: 112px; font-size: 18px; text-align: center; }
#header-mobile > a:nth-of-type(3) > p { margin: 0px; font-size: 10px; }
    
#header-mobile .header-in { position: fixed; top:78px; z-index: 999; width: 100%; background: #545354; }
#header-mobile .header-mobile-in ul, #header-mobile .header-mobile-in li { margin: 0; padding: 0; font-size: 12px; }
#header-mobile .header-mobile-in a { color: #FFF; font-weight: 300; }

#header-mobile .header-mobile-in { margin: 0px auto; width: 100%; height: 0px; overflow: hidden; transition-timing-function: ease-in-out; transition: .4; }
#header-mobile .header-mobile-in.on { height: auto; }

#header-mobile .header-mobile-in ul { font-weight:500; background: #383838; }
#header-mobile .header-mobile-in ul li a { padding-left: 25px; }
#header-mobile .header-mobile-in ul li a:hover { opacity: .75; }
    
#header-mobile .header-mobile-in > ul { margin-top: 78px; margin-bottom: 0px; padding: 0px 5px;  }
#header-mobile .header-mobile-in > ul > li { position: relative; line-height: 40px; cursor: pointer; }
#header-mobile .header-mobile-in > ul > li > img { position: absolute; top: 15px; right: 25px; cursor: pointer; }
#header-mobile .header-mobile-in > ul > li > img.arrow_toggle {  transform: rotate(180deg); }

#header-mobile.on .header-mobile-in > ul > li > img { top: -80px; }
#header-mobile .header-mobile-in > ul > li { border-top: 1px solid #4a4a4a; }
#header-mobile .header-mobile-in > ul > li:nth-child(1) { border: none; display: block; font-weight: 200; width: 100%; }
#header-mobile .header-mobile-in > ul > li:nth-child(1) > a { display: block; font-weight: 200; width: 100%; }
#header-mobile .header-mobile-in > ul > li:nth-child(2) > a { display: block; font-weight: 200; width: 100%; }
#header-mobile .header-mobile-in > ul > li:nth-child(6) > a { display: block; font-weight: 200; width: 100%; }
#header-mobile .header-mobile-in > ul > li:nth-child(7) > a { display: block; font-weight: 200; width: 100%; }
    
#header-mobile .header-mobile-in > ul > li > ul > li { border-top: 1px solid #4a4a4a; }
#header-mobile .header-mobile-in > ul > li > ul > li > a { display: block; padding-left: 30px; font-weight: 200; width: 100%; }
#header-mobile .header-mobile-in ul li .depth2 { overflow: hidden; transition: none; display: none; background: #383838; }



    input[id="hamburger"] { display: none; }

 
    input[id="hamburger"] + label {
        display: block;
        width: 30px;
        height: 20px;
        position: absolute;
        right: 25px;
        top: 27.5px;
        cursor: pointer;
    }
    
    input[id="hamburger"] + label span {
        display: block;
        position: absolute;
        width: 100%;
        height: 2px;
        border-radius: 10px;
        transition: all 0.35s;
        background: #121f38;
    }

    
    input[id="hamburger"] + label span:nth-child(1) {top: 1px; }
    input[id="hamburger"] + label span:nth-child(2) {top: 46.8%;}
    input[id="hamburger"] + label span:nth-child(3) {bottom: 1px;}
    
    input[id="hamburger"]:checked + label {z-index: 100;}

    input[id="hamburger"]:checked + label span:nth-child(1) {top: 50%;}
    input[id="hamburger"]:checked + label span:nth-child(3) {bottom: 50%;}
    
    .hamburger_toggle1 {top: 50%; transform: translateY(-50%) rotate(45deg);}
    .hamburger_toggle2 {opacity: 0;}
    .hamburger_toggle3 {bottom: 50%; transform: translateY(50%) rotate(-45deg);}
    
}

.calender { position: absolute; z-index: 101; top: 27px; right: 60px;}

/*header-mobile end*/
/*top start*/

.top { position: fixed; z-index: 999; right: -50px; bottom: 30px; width: 40px; height: 40px;background: #383838; transition: .4s; }
.top.on { right: 30px; }
.top div { position: relative; width: 100%; height: 100%; }
.top div h3 { position: absolute; left: 50%; bottom: -14px; transform: rotate(90deg) scaleY(1.4) translateY(8.5%); color: #fff; font-weight: 300; }

.top:hover { background: #fff; }
.top:hover div h3 { color: #383838; }


/*top end*/
/*footer start*/

#footer { background: #383838; clear: both; }
#footer .footer-in { margin: 0px auto; padding: 120px 0px 100px; width: 1280px; text-align: center; clear: both; overflow: hidden; }

#footer ul li { color: #858585; font-size: 12px; }
#footer ul li span { color: #d1d1d1; }
#footer ul li a { color: #d1d1d1; }

#footer .footer-in .left { float: left; text-align: left; }
#footer .footer-in .left ul { padding: 30px 0px 0px; }
#footer .left ul li:nth-child(1) { font-size: 14px; margin-bottom: 15px; } 

#footer .footer-in .right { float: right; text-align: right; }
#footer .footer-in .right ul { padding-top: 120px; }

@media (max-width: 1280px) {
    
    #footer .footer-in { padding: 120px 20px 100px; width: 100%; }
    
}

@media (max-width: 688px) {
    
    #footer .footer-in { padding: 100px 20px 80px; }
    #footer .footer-in .left { float: none; }
    #footer .footer-in .right { float: none; }
    #footer .footer-in .right ul { padding-top: 30px; text-align: left; }
}


@media (max-width: 720px) {
    
    .top { bottom: 10px; }
    .top.on { right: 10px; bottom: 10px; }
    
}


@media (max-width: 420px) {
    
    #header-mobile > a > div { position: absolute; top: 24px; left: 25px; z-index: 100; width: 130px; height: 32px;  background: url(../img/logo-black.png); background-size: 100% 100%; }
    
}