.d_clear{clear:both} /*pc*/ @media all and (min-width:1200px) { body.scroll #header .bg{opacity:1;transition:.5s; } .d_container{margin:0 auto; max-width:1600px;} body.pc{min-width:1200px} /* body.scroll #header .bg{background:#414141;opacity:1;transition:.5s}*/ body.scroll #hs1{display:none;} #header{position:fixed;z-index:999;width:100%; max-width:2000px; margin:0 auto; background:hsla(0,0%,0%,0.80);} #header .bg{position:absolute;left:0;top:0;width:100%;height:100%; transition:0.5s; opacity:0; background:#ffffff} body.lnb_over #header .bg{border-bottom:1px solid #dcdcdc; opacity:1; } body.lnb_over #header .bg{transition:0.5s} #hs1{position:relative; overflow:hidden; display:none} body.lnb_over #hs1{background:#2f3438 } #hs1 .d_container{position:relative; border:1px solid #dcdcdc; border-color:rgba(255,255,255,0.3); border-width:0 0 0 1px;} #d_gnb{overflow:hidden;} #d_gnb li{display:block; float:left; font-size:0.9em; font-weight:500; color:#ccc; position:relative;} #d_gnb li.d2 span{display:inline-block; margin-right:20px;} #d_gnb li.d2 span img{width:18px; margin-right:10px;} #d_gnb li.d3{padding-right:20px;} #d_gnb li.d4{margin-left:0; padding-left:0; border-left:0;} #d_gnb li.d4 a{background:#5a84c3; padding:10px 20px; color:#ffffff; } #d_gnb li.d4 a:before{font-family: 'FontAwesome'; font-size:11px; display:inline-block; content:"\f2bb"; color:#ffffff; padding-right:10px} /*#d_gnb li span:before{font-family:'FontAwesome'; color:#ccc; font-size:18px; content:'\f0ac'; padding-right:10px;}*/ #d_gnb li a{display:block;height:100%;text-align:center; color:#ccc; font-size:14px; border-right:1px solid #dcdcdc; border-color:rgba(255,255,255,0.3); } #d_gnb li a{position:relative; display:block; padding:13px 25px} #d_gnb li:first-child a{padding-left:50px;} #d_gnb li.d1:before{font-family: 'FontAwesome'; font-size:14px; display:inline-block; content:"\f011"; position:absolute; left:20px; top:13px} #hs2{/*background:#fff;*/ position:relative; width:100%} #hs2 h1{float:left; width:20%; max-width:270px; padding:15px 0 0 15px; position:relative; z-index:2} #hs2 h1 span{position:absolute; right:0; font-size:13px; font-weight:600; line-height:55px} #hs2 h1 a {display:block; padding:0; text-indent:-999999px} #hs2 h1 a{width:100%; height:57px; background:url(../img/logo.png) no-repeat center left; background-size:100% !important} body.scroll #hs2 h1 a, body.lnb_over #hs2 h1 a{background:url(../img/logo_b.png) no-repeat center center !important; background-size:100% !important} #hs2 h1 a img {width:100%; max-width:196px; vertical-align:middle} #d_lnb_bg{position:absolute;left:0;top:89px; width:100%; background:#ffffff; height:0;overflow:visible !important; z-index:0;} body.lnb_over #d_lnb_bg{background:#ffffff; border-bottom:1px solid #dcdcdc; border-top:1px solid #dcdcdc;} #d_lnb_bg .shadow{position:absolute;left:0;width:100%;height:15px;bottom:-15px;display:none} #d_lnb_bg > .d_container{overflow:hidden;height:100%} #d_lnb_bg .thumb{padding:40px 40px} body.lnb_over #d_lnb_bg{min-height:200px} body.lnb_over #d_lnb_bg .shadow{display:block} body.lnb_over #header{background:#ffffff; } /*body.lnb_over #d_lnb_bg{height:190px !important}*/ body.scroll #header{background:#ffffff} #d_lnb_btn{display:none} #d_lnb{width:75%; float:right; height:90px;} #d_lnb ul{position:relative;} #d_lnb li{position:relative;float:left;} #d_lnb li {/*width:170px;*/ width:19%;} #d_lnb li > a{display:block;font-size:17px; color:#ffffff; font-weight:700; line-height:90px;/*width:160px;*/ text-align:center; padding-left:0px; text-transform:uppercase} #d_lnb li > a:after {content:''; display:inline-block; width:0; height:4px; background:#5a84c3; position:absolute; left:50%; bottom:0; transition:0.2s; } #d_lnb li:hover > a:after {width:50%; left:25%;} body.scroll #d_lnb li > a, body.lnb_over #d_lnb li > a{color:#323232} #d_lnb li.d2, #d_lnb li.d3, #d_lnb li.d4{position:relative;} body.lnb_over #d_lnb li.d2:before, body.lnb_over #d_lnb li.d3:before, body.lnb_over #d_lnb li.d4:before, body.scroll #d_lnb li.d2:before, body.scroll #d_lnb li.d3:before, body.scroll #d_lnb li.d4:before{background:#dcdcdc} #d_lnb li > a:hover, #d_lnb li.on > a{font-weight:600; transition:.3s; color:#5a84c3 !important; position:relative; } #d_lnb li.on .sub{;} #d_lnb li .sub{position:absolute;width:100%; height:0; overflow:hidden;} #d_lnb li .sub dl{text-align:left;border-left:1px solid #f0f0f0;padding:20px 0;height: 205px;} #d_lnb li.tail{float:right; text-align:right; width:24%; padding-right:15px} #d_lnb li.tail a.lnb_contact{text-align:right; padding-right:15px; margin-right:10px; position:relative; display:inline-block; font-size:13px} /*#d_lnb li.tail a.lnb_contact:after{content:''; position:absolute; width:1px; height:10px; background:#ffffff; top:0; bottom:0; right:0; margin:auto}*/ body.scroll #d_lnb li.tail a.lnb_contact:after, body.lnb_over #d_lnb li.tail a.lnb_contact:after{background:#dcdcdc} #d_lnb li.tail a span{border-bottom:1px solid #36c2f1} #d_lnb li .sub dd a{display:block;padding:5px 0;font-size:15px;color:#323232; line-height:20px; ;text-align:center;} #d_lnb li .sub dd a:hover{color:#5a84c3; font-weight:600;} #d_lnb li .sub dd a[target='_blank']:after {font-family: 'FontAwesome'; font-size:11px; display:inline-block; content:"\f08e"; margin: 0 0 2px 5px; vertical-align: middle;} #d_lnb_mask{display:none} .tail .lag{display:inline-block; color:#ffffff; position:relative; min-width:70px; line-height:50px; height:50px; vertical-align:top; border-bottom:2px solid #2797ff; margin-top:20px} .tail .lag li{float:none !important; width:100% !important} .tail .dropbtn {background:none; width:100%; text-align:left; border:none; display:inline-block; height:auto; position:relative; color:#ffffff; font-size:13px; font-weight:700; line-height:30px;} .tail .dropbtn:after{font-family:'FontAwesome'; content:'\f078'; position:absolute; right:10px; color:#ffffff; font-size:8px; line-height:30px;} body.lnb_over #d_lnb li.tail .dropbtn, body.scroll #d_lnb li.tail .dropbtn{color:#5a84c3} body.lnb_over #d_lnb li.tail .dropbtn:after, body.scroll #d_lnb li.tail .dropbtn:after{color:#5a84c3 !Important} .tail .dropmenu {display: none; width:100%; position: absolute; z-index: 5; border-width:0 1px 1px 1px; margin-top:-1px; border:0px;} .tail .dropmenu a {display:block; color:inherit; font-size:14px !important; line-height:30px !Important; } .tail .dropmenu.show {display:block;} .tail .dropmenu ul{background:#5a84c3; } .tail .dropmenu ul li{padding:5px 0px; font-size:0.9em; cursor: pointer; color:#ffffff; text-align:left; line-height:32px;} .tail .dropmenu ul li:hover a{color:#ffffff !important} body.scroll #d_lnb li.tail .dropmenu ul li a, body.lnb_over #d_lnb li.tail .dropmenu ul li a{color:#ffffff !important} #d_lnb li.tail {float:right; width:auto; max-width:240px; font-size:0; line-height:100px;} #d_lnb li.tail a.sitemap {background:#5a84c3; display:inline-block; width:100px; height:90px; padding:40px 32px 0;} #d_lnb li.tail a.sitemap span {display:block; width:36px; height:2px; margin:0 0 5px; background:#fff;} #d_lnb li.tail a.sitemap span.short {width:20px; margin:0 0 5px 5px;} } @media all and (min-width:1800px) { } /*mobile*/ @media all and (max-width:1199px) { #header{position:fixed;z-index:9999;width:100%;height:65px; top:0; /*box-shadow:1px 1px 1px 0 #777*/} #header .bg{position:absolute;left:0;top:0;width:100%;height:100%;opacity:1;transition:.5s} #hs2 h1 span{display:none} body.mo{} body.lnb_on{overflow:hidden} body.lnb_on #d_lnb_mask{position:fixed;left:0;top:0;width:100%;height:100%;z-index:990; background:rgba(0,0,0,0.4)} #d_gnb{position:fixed;left:-100%;top:0;height:50px;width:80%; max-width:250px; z-index:991;text-align:center; background:#30447f} #d_gnb img {width:70%; padding:5px;} #d_gnb ul{ background:#393939; overflow:hidden;} #d_gnb li{font-size:0.9em; line-height:50px; position:relative; width:50%; float:left; font-weight:600} #d_gnb li a{color:#ffffff; display:block;} #d_gnb li:last-child a{border-right:0} #d_gnb ul{background:#5a84c3} #d_gnb li.d2{background:#969696} #d_gnb .close{position:absolute;right:-50px;top:0px;width:50px;height:50px;cursor:pointer; background:#2d2d2d;} #d_gnb .close span{display:inline-block; position:absolute; top:55%; right:5px;} #d_gnb .close span:before, #d_gnb .close span:after{content:''; display:inline-block; width:34px; height:2px; background:#ffffff; position:absolute; right:5px;} #d_gnb .close span:after{top:-11px} #d_gnb .close span:before { -webkit-transform: translateX(4px) translateY(-5px) rotate(45deg); -moz-transform: translateX(4px) translateY(-5px) rotate(45deg); -ms-transform: translateX(4px) translateY(-5px) rotate(45deg); -o-transform: translateX(4px) translateY(-5px) rotate(45deg); transform: translateX(4px) translateY(-5px) rotate(45deg); } #d_gnb .close span:after { -webkit-transform: translateX(4px) translateY(6px) rotate(-45deg); -moz-transform: translateX(4px) translateY(6px) rotate(-45deg); -ms-transform: translateX(4px) translateY(6px) rotate(-45deg); -o-transform: translateX(4px) translateY(6px) rotate(-45deg); transform: translateX(4px) translateY(6px) rotate(-45deg); } #hs2{position:relative;padding:13px 0 13px; background:hsla(0,0%,0%,0.80);} body.scroll #hs2{background:#ffffff} #hs2 h1{text-align:center; display:block; padding:0; } #hs2 h1 a{margin:0 auto; display:block; text-indent:-999999px; width:160px; height:46px; background:url(../img/logo.png) no-repeat center center; background-size:100% !important} body.scroll #hs2 h1 a, body.lnb_over #hs2 h1 a{background:url(../img/logo_b.png) no-repeat center center !important; background-size:100% !important} #hs2 h1 a img {max-width:142px; margin-left:30px} #d_lnb_bg{display:none} #d_lnb_btn{position:absolute;right:3%;top:23px;cursor:pointer;} #d_lnb{position:fixed;left:-100%;top:50px;width:80%; max-width:250px; height:100%;overflow:auto;background:#ffffff;z-index:991} #d_lnb h2{position:relative;text-align:center;color:#333;padding:20px 0;border-bottom:1px solid #c8c8c8} #d_lnb h2 .close{position:absolute;right:10px;top:10px;cursor:pointer} #d_lnb h2 .close img {max-width:65px;} #d_lnb ul{height:100%;overflow:auto; text-align:left; background:#5a84c3;} #d_lnb li > a{ display:block;padding:15px 30px; font-size:15px; font-weight:600; color:#ffffff; position:relative;} #d_lnb li.tail{position:absolute; top:20px; left:0px; display:none} #d_lnb li > a:before{content:''; position:absolute; top:0; bottom:0; right:0px; margin:auto; background:#ffffff; width:6px; height:6px; border-radius:500px; margin-right:20px; } #d_lnb li.on > a{background:#282f39; color:#ffffff; font-weight:600; position:relative;} #d_lnb li.on > a:after{content:''; position:absolute; top:0; bottom:0; right:0px; margin:auto; margin-right:20px; transition:0.5s; width:6px; height:6px; border-radius:500px; background:#ffffff} #d_lnb li.on > a:before{display:none } #d_lnb li.tail a:before, #d_lnb li.tail a:after{display:none;} #d_lnb li.tail a{color:#36c2f1} #d_lnb li.tail a span{border-bottom:1px solid #36c2f1} #d_lnb li .sub{background:#282f39;display:none; transition:0.3s;} #d_lnb li.on .sub{display:block;height:auto !important; padding:0px 0px 10px} #d_lnb li .sub dl{position:relative;} #d_lnb li .sub dd a{display:block;padding:8px 30px; font-size:14px; color:#ffffff} #d_lnb li .sub dd a:hover{font-weight:500} .icon-bar {display: block; margin-top: 4px; width: 30px;height: 3px; background: #ffffff;} #d_lnb li.lag{display:none} body.scroll .icon-bar {background: #5a84c3;} }