/*mobile 탑메뉴*/ /* 공통 */ @media all and (max-width:1199px) { .ver_pc{display:none !important;} .ver_mobile {display:block !important;} .conSearch{padding:30px 0; border-bottom:0;} .conSearch form{max-width:80%; position:relative; margin: 0 auto;} .conSearch input{border:none; background:none; border-bottom:2px solid #ff209e; line-height:24px; font-size:0.85em; width:100%; padding:0.750em 0; } .conSearch button{border:none; background:none; position:absolute; right:0;} .conSearch button:before{content:'\f002'; font-family:'FontAwesome'; color:#ff209e; font-size:20px;} #header{/*background:#212020;*/position:fixed;z-index:99;width:100%; min-width:320px; top:0;} #header .bg{position:absolute;left:0;top:0;width:100%;height:100%;background:url('../images/common/trans_bg.png');opacity:0;transition:.5s} #header .lnb_btn{position:absolute;z-index:2;right:5%;top:20px; cursor:pointer;width:35px;height:35px;} #header .lnb_btn a{display:block; position:relative; width:100%; height:100%;} #header .lnb_btn span { /* line in the center */ position: absolute; top: 50%; margin-top:-1.5px; right: 0px; -webkit-transition: background 0.3s 0.3s; -moz-transition: background 0.3s 0.3s; transition: background 0.3s 0.3s; } #header .lnb_btn span::before, #header .lnb_btn span::after { /* other 2 lines */ content: ''; right: 0; /* Force Hardware Acceleration in WebKit */ -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform-origin: 0% 50%; -moz-transform-origin: 0% 50%; -ms-transform-origin: 0% 50%; -o-transform-origin: 0% 50%; transform-origin: 0% 50%; -webkit-transition: -webkit-transform 0.3s 0.3s; -moz-transition: -moz-transform 0.3s 0.3s; transition: transform 0.3s 0.3s; } #header .lnb_btn span::before { /* menu icon top line */ top: -8px; width:30px; } #header .lnb_btn span::after { /* menu icon bottom line */ top: 8px; width:30px; } #header .lnb_btn span, #header .lnb_btn span::before, #header .lnb_btn span::after { /* hide line in the center */ background:#ffffff; width:100%; height:3px; position:absolute; display:block; border-radius:5px } body.lnb_on #header .lnb_btn 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); } body.lnb_on #header .lnb_btn span::after { -webkit-transform: translateX(4px) translateY(3px) rotate(-45deg); -moz-transform: translateX(4px) translateY(3px) rotate(-45deg); -ms-transform: translateX(4px) translateY(3px) rotate(-45deg); -o-transform: translateX(4px) translateY(3px) rotate(-45deg); transform: translateX(4px) translateY(3px) rotate(-45deg); } body.lnb_on #header .lnb_btn span{background:#ffffff} body.scroll #header .lnb_btn span, body.scroll #header .lnb_btn span:before, body.scroll #header .lnb_btn span:after{background:#14306c} #header .ic_call{position:absolute; z-index:2; left:10px; top:10px; width:30px; height:30px; text-align:center; } #header .ic_call img{width:95%;} body.lnb_on #header .bg{opacity:1;transition:0.5s} body.lnb_on #header .lnb_btn span{background:none} body.lnb_on #header .lnb_btn span:before, body.lnb_on #header .lnb_btn span:after{background:#323232;} body.lnb_on{overflow:hidden} #hs1{position:relative;z-index:1;} #hs1 .con1{display:none} #hs1 .con1 b{font-weight:600} #hs1 .con2{} body.scroll #hs1 .con2{background:#ffffff} #hs1 .con2 h1{ padding-left:5%; padding-top:10px; padding-bottom:10px; font-size:22px} #hs1 .con2 h1 a{display:block; background:url(../img/logo_w.png) no-repeat center center; width:110px; height:50px; background-size:100% !important; text-indent:-999999px} body.scroll #hs1 .con2 h1 a{background-image:url(../img/logo.png)} #hs1 .con2 h1 a span{display:none} #d_lnb{position:fixed;right:-100%;width:100%;height:100%;overflow:auto;background:#ffffff; z-index:991; top:0; border-top:3px solid #303fb1} #d_lnb:before{content:''; display:block; background:url(../img/logo.png) no-repeat center center; width:100px; height:50px; background-size:100% !important; text-indent:-999999px; position:absolute; left:5%; top:10px} body.scroll #d_lnb{top:0px;} #d_lnb ul{background:#fff; padding:100px 5% 20px;} #d_lnb li{ margin:0 auto; text-transform:uppercase; letter-spacing:0} #d_lnb li.mm > a{position:relative; transition:.3s} #d_lnb li.mm > a i{display:inline-block; width:14px; height:2px; position:absolute; right:10px; top:0; bottom:0; margin:auto; border-radius:3px; background:#e6e6e6; transition:0.3s} #d_lnb li.mm.on > a i{transition:0.3s; transform:rotate(180deg); background:#14306c} #d_lnb li.mm.on > a i:before{background:#14306c} #d_lnb li.mm > a i:before{content:''; width:2px; height:14px; position:absolute; left:0; right:0; top:0; bottom:0; margin:auto; border-radius:3px; background:#e6e6e6} /* #d_lnb li.mm a i{position:relative; transition:.3s; display:block; position:absolute; width:20px; height:20px; right:0; top:0; bottom:0; margin:auto} #d_lnb li.mm a i:after, #d_lnb li.mm a i:before{content:''; width:100%; height:2px; position:absolute; background:#f0f0f0; left:0; right:0; top:0; bottom:0; margin:auto} #d_lnb li.mm a i:before{width:2px; height:100%;} #d_lnb li.mm.on a i:after, #d_lnb li.mm.on a i:before{background:#0dbfd3; transform: rotate(180deg); transition:.3s} */ #d_lnb li > a{display:block;padding:18px 0px;font-size:1.2em;font-weight:700;color:#000000; text-indent:5%} #d_lnb li.on > a{color:#14306c; font-weight:800; font-size:1.4em; text-indent:0;} #d_lnb li .sub{ display:none; border-left:3px solid #0dbfd3; background:#f8f8f8; border-radius:0 30px 0 0} #d_lnb li.on .sub{display:block} #d_lnb li .sub dd{} #d_lnb li .sub dd a{display:block; line-height:40px;color:#000000;font-size:0.95em; padding-left:20px; font-weight:600; vertical-align:middle; position:relative} /*#d_lnb li .sub dd a:before{content:''; width:5px; height:5px; background:#c8c8c8; display:inline-block; position:absolute; top:0; bottom:0; margin:auto; left:0;}*/ #d_lnb li .sub dd a:hover{} #d_lnb li.ic_venture{display:none} #d_lnb .log{padding:30px 5%; margin:0 auto; text-transform:uppercase} #d_lnb .log .d1{display:flex; flex-wrap:wrap;} #d_lnb .log .d1 a{display:block;background:#6e7a8b; line-height:50px; width:50%; text-align:center;color:#fff; font-weight:600; margin-bottom:15px; position:relative;} #d_lnb .log .d2{padding-bottom:30px;line-height:1.3; font-weight:600; font-size:1.2em} #d_lnb .d1 a:first-child{border:2px solid #14306c; color:#14306c; background:none} #d_lnb li.lag{display:none;} #d_lnb .log .d1 a.ic_venture{line-height:50px; background:#ffe600; background:#14306c; border:0; } #d_lnb .log .d1 a.ic_venture:before{content:''; width:22px; height:22px; display:inline-block; vertical-align:middle; margin-right:10px; background:url(../img/ic_venture.png) no-repeat center center; background-size:100% !important} /*컨텐츠*/ .content_wrap { background:#efefef; padding:65px 0 45px 0;} #d_lnb li.last, #d_lnb li.sitebar{display:none;} } @media all and (min-width:1200px) { /* 공통 */ .ver_pc{display:block !important;} .ver_mobile {display:none !important;} /*pc 탑메뉴*/ .gnb{width:100%; background:#f8f8f8; } .gnb .inner{width:100%; max-width:1600px;} .gnb .inner ul{display:inline-block; width:50%;} .gnb .inner ul li{display:inline-block; vertical-align:middle;} .gnb .inner ul li a{font-size:15px; font-weight:500; line-height:50px; padding:0 25px; display:block; position:relative} .gnb .inner ul.left li:first-child a{background:#ffffff} .gnb .inner ul.right{float:right; text-align:right;} .gnb .inner ul.right li a:before{content:''; display:block; position:absolute; left:0; top:0; bottom:0; margin:auto; width:1px; height:15px; background:#e6e6e6; } .gnb .inner ul.right li:last-child a{background:#0dbfd3; color:#ffffff; padding-left:45px;} .gnb .inner ul.right li:last-child a:before{width:18px; height:18px; left:20px; background:url(../img/ic_pc.png) no-repeat center center; background-size:100% !important;} .d_container{max-width:2000px; width:100%;margin:0 auto; } body.pc{width:100%; margin: 0 auto;} body.scroll #header .bg{opacity:1;transition:.5s; background:#ffffff} body.scroll #d_lnb li > a{color:#323232; line-height:80px; transition:.3s} body.scroll #d_lnb li.ic_venture a{margin-top:17px; background:#14306c; color:#ffffff; border:0px} #header{position:fixed;z-index:99;width:100%; top:0; left:0; right:0; min-width:320px; max-width:2000px; margin:auto} #header .bg{position:absolute;left:0;top:0;width:100%;height:100%; opacity:0;transition:.5s} #header .lnb_btn{display:none} #d_lnb li{position:relative;float:left;text-align:center; border-bottom:none; width:calc(20% - 33px)} #d_lnb li.ic_venture{width:165px;} #d_lnb li > a{display:block; line-height:95px; text-indent:0; padding:0; font-size:1.15em; font-weight:700; text-transform:uppercase; position:relative; color:#ffffff; letter-spacing:0} #d_lnb li > a:before{content:''; position:absolute; z-index:10; bottom:0; left:50%; width:0; height:3px; background:#0dbfd3; transition:all 0.2s cubic-bezier(0.7, 0, 0.3, 1)} #d_lnb li:hover > a:before{width:60px; margin-left:-30px;} #d_lnb li > ul > li {color:#333 !important;} .dropdown-menu>li>a {color:#333 !important;} #d_lnb li.ic_venture > a {font-size:15px; color:#ffffff; font-weight:600; transition:.3s} #d_lnb li.ic_venture > a:hover{background:#14306c; box-shadow: 0px 0px 20px -5px rgba(0,0,0,0.3); border:0px; transition:.3s; transform:translateY(-5px);} #d_lnb li.ic_venture > a {display:inline-block; line-height:45px !important; border:1px solid #ffffff; border-radius:500px; padding:0 30px 0 55px; margin-top:25px; border-radius:500px; } #d_lnb li.ic_venture > a:before{content:''; width:22px; height:22px; position:absolute; left:20px; top:0; bottom:0; margin:auto; right:auto; background:url(../img/ic_venture.png) no-repeat center center; background-size:100% !important} /*#d_lnb li.ic_venture > a:after{content:''; width:22px; height:22px; position:absolute; right:10px; top:0; bottom:0; margin:auto; left:auto; background:url(../img/ic_blank.png) no-repeat center center; background-size:100% !important}*/ #d_lnb li.ic_venture:hover > a:before{width:30px; margin-left:0;} #d_lnb li.ic_venture:hover > a:before{width:22px; height:22px} #d_lnb li.nosub > a{background:none} #d_lnb li.on .sub{display:block !important} #d_lnb li .sub{position:absolute; z-index:5; width:180px; background:#f8f8f8; display:none;top:92px;padding:0; opacity:0; overflow:hidden; left:50%; margin-left:-90px; /*webkit-box-shadow: 0px 0px 20px -5px rgba(0,0,0,0.3); -moz-box-shadow: 0px 0px 20px -5px rgba(0,0,0,0.3); box-shadow: 0px 0px 20px -5px rgba(0,0,0,0.3);*/} body.scroll #d_lnb li .sub{top:80px;} /*#d_lnb li .sub:before{content:''; width:30px; height:3px;background:#0dbfd3; left:50%; margin-left:-15px; top:0; z-index:10; position:absolute}*/ #d_lnb li .sub dl{padding:15px 10px 10px; text-align:center; } #d_lnb li .sub dd{/*border-top:1px solid #e6e6e6*/} #d_lnb li .sub dd:first-child{border-top:none} #d_lnb li .sub dd a{display:block; color:#161616; line-height:35px; font-size:0.95em; font-weight:600; text-transform:uppercase; letter-spacing:0} #d_lnb li .sub dd a:hover{font-weight:700} #d_lnb li.last{width:23%; font-size:0px;} #d_lnb li.last a{display:inline-block; vertical-align:middle; font-size:13px; padding-left:35px; position:relative; background-size:20px !important;} #d_lnb li.last a.ic_login{background:url(../img/ic_gnb01.png) no-repeat left center;} #d_lnb li.last a.ic_member{background:url(../img/ic_gnb02.png) no-repeat left center;} #d_lnb li.last a:last-child{margin-left:20px;} /*#d_lnb li.last a:last-child:before{display:block; content:''; height:10px; width:1px; background:#dcdcdc; position:absolute; left:0;bottom:0; top:0; margin:auto}*/ #d_lnb li.last:hover{color:inherit; font-weight:normal} #d_lnb li.last:hover a{color:inherit; font-weight:normal} #d_lnb li.sitebar{width:5%;} #d_lnb li.sitebar a{padding:0; padding-top:25px; line-height:100%; } #d_lnb li.sitebar a img{width:30px;} #d_lnb .log{display:none} #d_lnb li.login_btn{background:#454545; margin-left:15px !important; margin-right:20px !important} #d_lnb li.login_btn a{color:#ffffff; line-height:50px; font-size:0.9em; font-weight:600} #d_lnb li.login_btn a:before{content:'\f2bd'; font-family:'FontAwesome'; color:#ffffff; font-size:16px; margin-right:10px;} body.scroll #d_lnb li.lag{display:none;} body.scroll #hs1 .con1{display:none} #hs1 .con1{display:block;font-size:0.9em;font-weight:normal; background:#f0f0f0; padding:10px 0px; overflow:hidden;} #hs1 .con1 p {margin-bottom:0; float:left;} #hs1 .con1 p span{ letter-spacing:1px;} body.scroll #hs1 .con1 p {display:none !important;} #hs1 .con1 .gnb{overflow:hidden; float:right;} #hs1 .con1 .gnb li{float:left; margin-left:15px; padding-left:15px; position:relative;} #hs1 .con1 .gnb li:before{content:''; background:#c8c8c8; position:absolute; width:1px; height:12px; top:0; bottom:0; left:0; margin:auto;} #hs1 .con2{position:relative; max-width:1600px; margin:0 auto; border-bottom:0;} #hs1 .con2 h1{float:none;text-align:left; padding:20px 10px 0px 20px; float:left; width:220px;} #hs1 .con2 h1 a{display:block; background:url(../img/logo_w.png) no-repeat center center; width:195px; height:88px; background-size:100% !important; text-indent:-999999px} #hs1 .con2 h1 a span{display:inline-block; color:#000000; padding-left:15px; margin-left:15px; border-left:1px solid #e6e6e6; vertical-align:middle; font-weight:500} #hs1 .con2 #d_lnb{position:relative; float:right; width:calc(100% - 220px); background:none; height:140px; overflow:visible; text-align:center; padding-right:20px; right:0 !important} #hs1 .con2 #d_lnb ul{width:100%; display:block; float:left;; background:none; /*padding-right:150px*/; padding:0; padding-left:20%} #hs1 .con2 #d_lnb ul li.fl{float:right; margin:10px 0px; padding:0;} body.scroll #hs1 .con2 h1 a{background-image:url(../img/logo.png); transition:.3s; width:130px; height:59px} body.scroll #hs1 .con2 h1{padding-top:10px; transition:.3s} .ic_phone{background:url(../images/common/ic_phone.png) no-repeat left center; padding-left:20px;} .ic_mail{background:url(../images/common/ic_mail.png) no-repeat left center; padding-left:25px; margin-left:20px;} .d_clear{clear:both} } @media all and (min-width:1400px) { #hs1 .con2 #d_lnb ul{padding-left:35%} }