@charset "utf-8";

/* layout */
html, body { height:100%;}
body {font-family:'S-CoreDream','Noto Sans KR', 'Noto Sans Korean', sans-serif; color:#212121; letter-spacing:-.05em; -webkit-text-size-adjust:none; -webkit-font-smoothing:antialiased; overflow-x: hidden;}
#wrap {	position:relative; width:100%; min-width:320px;height:100%; font-size:1.8rem;}
@media all and (max-width:768px){
    #wrap{font-size: 1.6rem;}
}
@media all and (max-width:568px){
    #wrap{font-size: 1.5rem;}
}
@media all and (max-width:380px){
    #wrap{font-size: 1.4rem;}
}
.inner {width:1600px;	position:relative;	margin-left:auto;	margin-right:auto;}
@media all and (max-width:1630px){
    .inner{width: 95%;}
}


#header{position: absolute; left: 0; top: 0; z-index: 200; padding:0 40px; width: 100%; height: 120px; display: flex; justify-content: space-between; align-items: center;background: rgba(0, 0, 0, 0.2); }
#header .menu{display: flex; justify-content: space-between; width: 100%; max-width: 800px;}
#header .menu li a{font-size: 1.9rem; font-weight: 600; color: #fff; }
#header .home{font-size: 1.4rem; font-weight: 600; display: inline-block; padding:14px 20px; border:1px solid rgba(255, 255, 255, .3); border-radius: 35px; color: #fff;}
#header .home::before{content:""; display: inline-block; vertical-align: top; margin-right:5px; width: 18px; height: 18px; background:url('../images/home.png')no-repeat;}
#header .m_menu{display: none; margin:7px 0 0 10px;}
#header .m_menu .menu-open{cursor: pointer;}
#header .m_menu .menu-open span{color: #fff; font-size: 3rem;}
#header .m_menu .menu-open.on span{color: #212121;}
#header .m_menu .nav{display: block; z-index: 1000; position: fixed; right: -100%; top: 0%; transition: all .35s ease-in-out; width: 50%; height: 100%;background-color: #0e4f8d; }
#header .m_menu .nav ul{margin-top:10px; padding: 10px;}
#header .m_menu .nav ul li a{display:block; padding: 20px; border-bottom: 1px dotted #c5c5c5; font-size: 1.6rem; color: #fff;}
#header .m_menu .menu-close{cursor: pointer; position: absolute; right: 15px; top: 45px; font-size: 3rem; color: #fff;}
#header .m_menu.on .nav{right:0;}
#header .m_menu .m_home{display: block; padding: 10px 30px; font-size: 1.5rem; color: #fff;}
#header .m_menu .m_logo{margin-top: 35px; padding-left: 30px;}
#header .m_menu .m_logo img{max-width: 50%;}

#header.sub{background:#0164de;}

@media all and (max-width:1400px){
    #header .menu{max-width: 600px;}
}
@media all and (max-width:1280px){
    #header .menu{max-width: 500px;}
}
@media all and (max-width:1024px){
    #header{justify-content: flex-start;}
    #header #logo{margin-right: auto;}
    #header #logo img{max-width: 200px;}
    #header .menu{display: none;}
    #header .home{display: none;}
    #header .m_menu{display: block;}
}
@media all and (max-width:568px){
    #header{padding: 0 15px;}
    #header .home{display: none;}
    #header #logo img{max-width: 140px;}
    #header .m_menu .nav{width: 60%;}
}

#siteLink{position: relative; z-index:5; background-color: #00408f; }
#siteLink .inner{display: flex; justify-content: flex-end;}
#siteLink .btsite{position: relative; width: 28rem; height: 7rem; padding:20px 0;}
#siteLink .btsite ul{display: none;}
#siteLink .btsite button{position: relative; width: 100%; padding: 0 30px; text-align: left; color: rgba(255, 255, 255, .7); line-height: 20px; font-weight: 500; font-size: 1.5rem; font-family: 's-coreDream';}
#siteLink .btsite button:after{content: ''; position: absolute; right: 30px; top: 40%; width: 9px; height: 9px; border-top: 2px solid #fff; border-right: 2px solid #fff; transform: rotate(-45deg);}

#siteLink .select_list{position: absolute; left: 0; bottom: 7rem; width: 100%; z-index: 990;}
#siteLink .select_list li a{display: block; padding: 1.5rem 3rem; background-color: #fff;}
#siteLink .select_list li{border: 1px solid #c5c5c5;}
#siteLink .select_list li + li{border-top: none;}
@media all and (max-width:1600px){
    #siteLink:before{width: 25%; height: 12vw; background-size:contain; bottom: 0;}
}
@media all and (max-width:840px){
    #siteLink:before{display: none;}
}
@media all and (max-width:568px){
    #siteLink .btsite{width: 50%;}
    #siteLink .btsite button{padding:0 30px 0 5px ;}
}

.br-b{display: none;}
#footer{padding:30px 0 50px;}
#footer .inner{display: flex;}
#footer .inner .sns{margin-left: auto; overflow: hidden; padding-left: 3%; width: 21%;}
#footer .sns ul{display: inline-flex; flex-wrap: wrap; float:right; padding-top: 20px; width: 100%;}
#footer .sns ul li{margin: 1% 2%;}
#footer .b-info{padding:20px 0 0 75px;}
#footer .b-info ul li{font-size: 1.4rem; color: #9ca4ac; font-weight: 500;}
#footer .b-info ul li + li{margin-top: 14px;}
#footer .b-info ul li h4{color: #3b434f;}
#footer .b-info ul li.copy{font-size: 1.2rem;}

#footer .d-by{color: #c2c7cb;}
@media all and (max-width:1280px){
    #footer .b-info{padding: 20px 0 0 5%;}
}
@media all and (max-width:1024px){
    #footer .inner{flex-direction: column;}
    #footer .b-logo{text-align: center; padding-left: 4%;}
    #footer .b-logo img{max-width: 20%;}
    #footer .b-info{padding-left: 0;}
    #footer .b-info ul li{text-align: center;}
    #footer .inner .sns{margin-left: 0; padding-left: 0; width: 100%;}
    #footer .sns ul{float: none; justify-content: center;}
    #footer .sns ul li{margin: 0 1%;}
}
@media all and (max-width:568px){
    .br-b{display: block;}
}