@charset "utf-8";

@font-face {
    font-family: 'GangwonEdu_OTFBoldA';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2201-2@1.0/GangwonEdu_OTFBoldA.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

* { box-sizing: border-box; list-style: none; }
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background-color: #fafaf6; }
::-webkit-scrollbar-thumb { background-color: #ede8e0; border-radius: 5px; }
*::selection { color: #FFF; background: #296a8a;}
html { scroll-behavior: smooth; }
a { text-decoration: none; color: #545354; }
body { margin: 0px; font-family: 'Noto Sans KR'; color: #545354;}
main { overflow: hidden; position: relative; }

.mbr { display: none; }

.scroll_down { position: absolute; bottom: 120px; left: 50%; transform: translate(-50%,-50%); opacity: 1; z-index:999; }
.scroll_down span{ display: block; width: 20px; height: 20px; border-bottom: 1px solid #fff; border-right: 1px solid #fff; transform: rotate(45deg); margin: -10px; filter:drop-shadow(0,0,0,.3); animation: down_arrow 3s infinite;}
.scroll_down span:nth-child(2){animation-delay: -0.125s !important;}
.scroll_down span:nth-child(3){animation-delay: -0.25s !important;}
@keyframes down_arrow{
    0%{ opacity: 0;}
    25%{ opacity: 0; transform: rotate(45deg) translate(-12px,-12px);}
    35%{ border-bottom: 1px solid #fcfcfc; border-right: 1px solid #fcfcfc;}
    50%{ opacity: 1; border-bottom: 1px solid #fff; border-right: 1px solid #fff;}
    65%{ border-bottom: 1px solid #fcfcfc; border-right: 1px solid #fcfcfc;}
    75%{ opacity: 0; transform: rotate(45deg) translate(12px,12px);}
    100%{ opacity: 0;}
}


.top { position: fixed; z-index: 999; right: -50px; bottom: 30px; width: 40px; height: 40px;  transition: .4s; border: 1px solid #296a8a;}
.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%); font-weight: 300;  color: #296a8a;}

.top:hover { background: #296a8a; }
.top:hover div h3 { color: #FFF; }

/*header-desktop start*/
#header .header-in ul, #header .header-in li { font-size: 14px; }
#header a { transition: 0.4s; cursor: pointer; }
#header a:hover { color: #296a8a;}

#header {width: 350px; height: 100%; min-height: 880px; position: fixed; z-index: 999; top: 0px; left: 0; bottom: 0; text-align: center; background: url(../img/map.png), #f9f7f1; background-repeat: no-repeat; overflow: hidden;   background: #fff; box-shadow: 10px 0 30px 0px rgba(0, 0, 0, 0.02);}

#header > .header-in { position: relative; width: 100%; height: 100%; }
#header > .header-in > a { position: absolute; top: 12%; left: 50%; transform: translateX(-50%); }
#header > .header-in > a img{ width: 120px;}
#header > .header-in > .menu { height: auto; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -65%); }

#header > .header-in > .menu, #header > .header-in > .menu > li  { margin: 0; padding: 0; }

#header > .header-in > .menu > li { position: relative; line-height: 36px; font-weight: 400; }
#header > .header-in > .menu > .on > a { color: #296a8a;}
#header > .header-in > .menu > li > .depth2 { padding: 4px 0px; margin: 0; overflow: hidden; transition: none; display: none; }
#header > .header-in > .menu > li > .depth2 > li { line-height: 32px;}
#header > .header-in > .menu > li:nth-child(3) > .depth2 > li {float:left;width:50%;}
#header > .header-in > .menu > li > .depth2 > li > a { font-size: 12.5px; font-weight: 300; }

#header > .header-in > .contact { position: absolute; bottom: 60px; width: 100%; margin: 0; padding: 0; }
#header > .header-in > .contact > li { font-size: 12px; line-height: 20px; font-weight: 300; }

#header > .header-in > .contact > li:nth-child(1) > a { display: inline-block; font-size: 20px; margin-bottom: 10px; }
#header > .header-in > .contact > li:nth-child(1) > a:nth-child(1) { margin-right: 15px; }
#header > .header-in > .contact > li:nth-child(1) > a:nth-child(3) { margin-left: 15px; }

#header > .header-in > .contact > li:nth-child(1) > a > span { transition: none !important;  }
#header > .header-in > .contact > li:nth-child(1) > a > p { margin: 3px 0px 0px 0px; font-size: 12px; }

#header > .header-in > .contact > li:nth-child(2) { letter-spacing: .9; margin-top: 5px;  margin-bottom: 10px;}
#header > .header-in > .contact > li:nth-child(2){ font-family: 'Josefin Sans'; font-size: 24px; line-height: 30px; }

#header > .header-in > .contact > li:nth-child(n+4) > span { font-weight: 400; }



/*footer start*/

#footer { margin-top: 120px;  text-align: center; clear: both; padding: 50px 0; background: #f7f8f8; }

#footer .footer-in { position: relative; }

#footer .footer-in .f-logo { margin-top: 100px; margin-bottom: 25px; margin: 0px auto 25px; width:120px; display: block;}
#footer .footer-in .f-logo img { width: 100%; }

#footer .footer-in ul, #footer .footer-in li { margin: 0; padding: 0; font-size: 14px;}
#footer .footer-in ul li{ line-height: 24px; font-family: 'Noto Sans KR'; }
#footer .footer-in ul li:nth-child(2) img { width: 20px; margin-left: 8px; vertical-align: middle; display: inline-block;}
#footer .footer-in :nth-child(3) li:nth-child(3) { font-family: 'Josefin Sans', sans-serif;  }
#footer .footer-in ul li:nth-child(4) { transition: 0.8s;}
#footer .footer-in ul li:nth-child(4) a:hover { color:#ff5a53; }
#footer .footer-in .m-info{ display:none; }
/*header-mobile start*/


#header-mobile { display: none; }

@media (max-width: 1028px) {  

    #header { display: none; }

    #header-mobile { position: fixed; top:0; z-index: 1000; width: 100%; height: 80px; background: #FFF; display: block; box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.05); }
    #header-mobile.on { top: -100%; }
    #header-mobile > a:nth-of-type(1) > img { position: absolute; top: 15px; left: 20px; z-index: 100; width: 65px; }
    #header-mobile > a:nth-of-type(2) { position: absolute; top: 23px; right: 70px; font-size: 30px; }


    #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: 13px; font-weight: 400; }
    #header-mobile .header-mobile-in a { color: #4d4d4d; }

    #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: #fff; }
    #header-mobile .header-mobile-in ul li a { padding: 0 7%; width: 100%; display: block; }
    #header-mobile .header-mobile-in ul li .m-toggle { position: relative; }
    #header-mobile .header-mobile-in ul li .m-toggle::after { content: ''; position: absolute; right: 7%; top: 50%; transform: translateY(-50%); background: url('../img/toggle.png') no-repeat center/cover; width: 10px; height: 10px; transition: .3s;}
    #header-mobile .header-mobile-in ul li .m-toggle.on::after { transform: translateY(-50%) rotate(180deg); }

    #header-mobile .header-mobile-in > ul { margin-top: 78px; padding: 20px 0px; border-top: 1px solid #ededed;}
    #header-mobile .header-mobile-in > ul > li { position: relative; line-height: 36px; }
    #header-mobile .header-mobile-in > ul > li > img { position: absolute; top: 15px; right: 7%; cursor: pointer; }

    #header-mobile.on .header-mobile-in > ul > li > img { top: -80px; }

    #header-mobile .header-mobile-in > ul > li > ul > li > a { padding-left: 8%; font-size: 12px; font-weight: 300; }
    #header-mobile .header-mobile-in ul li .depth2 { overflow: hidden; transition: none; display: none; background: #f7f8f8; }
    
    #header-mobile .header-mobile-in ul li:nth-child(3) .depth2 li{width:100%;float:left;}
    #header-mobile .header-mobile-in ul li:nth-child(3) .depth2 li a{padding-left:8%;}



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


    input[id="hamburger"] + label {
        display: block;
        width: 28px;
        height: 21px;
        position: absolute;
        right: 20px;
        top: 28px;
        cursor: pointer;
    }

    input[id="hamburger"] + label span {
        display: block;
        position: absolute;
        width: 28px;
        height: 2px;
        border-radius: 10px;
        transition: all 0.35s;
        background: #545354;
    }


    input[id="hamburger"] + label span:nth-child(1) {top: 2px; }
    input[id="hamburger"] + label span:nth-child(2) {top: 46%;}
    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);}


    #footer .footer-in ul li { font-size: 12px; color: #818181;}
    #footer .footer-in .m-info{ display:block; }
    #footer .footer-in .m-info li:nth-child(1){ font-size: 24px; margin-bottom: 20px; color: #777777;}
    #footer .footer-in .m-info li img{ width: 24px; margin: 0px; vertical-align: middle;}

}


@media (max-width: 680px) {
    
    #footer { margin-top: 60px; }
    .mbr { display: block; }
    
}

@media (max-width: 520px) { 
    
    #main .sec1_slider .swiper-slide .catchphrase img { width: 180px; }
    #main .sec1_slider .swiper-slide .catchphrase p { line-height: 0px; }
    
    .scroll_down { display: none; }
}

@media (max-width: 380px) {
    
    #header-mobile > a:nth-of-type(1) > img { left: 20px; }
    #header-mobile > a:nth-of-type(2) { right: 65px; }
    
        input[id="hamburger"] + label {
            right: 20px;
        }
    
}