.text-center {text-align: center; margin-bottom:70px} .lead { font-size:16px; color:#000; font-weight:300; word-break:keep-all} /* ::selection {background-color:#ff3414;color:#fff;} */ /* .content_wrap .txtCon { padding-top:100px;} */ /*추진방향*/ .hidden {font-size: 0 !important;width:0 !important;height:0 !important;color: transparent !important;line-height: 0 !important} /* Skip */ #skip {position:absolute; left:0; top:0; width:100%; margin:0 auto; z-index:999;} #skip a{display:block; position:absolute; left:0; padding:10px 20px; height:30px; line-height:30px; color:#fff; background:#000; box-sizing:content-box;} #skip a:link, #skip a:visited, #skip a:active{top:-10000px;} #skip a:hover, #skip a:focus{top:0;} /* Slidemap */ #mobile_gnb {display: none;} body.fixed, html.fixed {position:fixed;top:0;left:0;} #sitemap {border:0; background-color:#07348c; width:100%; max-width:1200px; padding:80px} #sitemap h2{ font-size:36px; color:#fff; text-align:center; padding:0 0 20px 0; width:100%; border-bottom:1px solid rgba(255, 255, 255, .3)} #sitemap .depth1>li{float:left; width:20%; margin-top:5px} #sitemap .depth1 > li:nth-child(5n+5) {margin-right:0px;} #sitemap .depth1 > li:nth-child(5n+1) {clear:both;} #sitemap .depth1>li>a{font-size:20px;display:block;text-align:left;color:#fff;margin-bottom:20px} #sitemap .depth2>li>a{font-size:16px;display:block;line-height:2.1;color:#fff;opacity:.9} #sitemap .depth2 > li > a:hover { color:#F4E913} #sitemap .depth3>li>a{font-size:14px;display:block;line-height:2.1;padding-left:15px;color:#fff;opacity:.7} #sitemap .mfp-close{position:absolute;right:0;top:-50px;z-index:1;width:30px;height:30px;border:0;font-size:16px;color:#fff} #sitemap .mfp-close:after {background: url(../img/w_btn_close.png) no-repeat center center;} #sitemap .arrow i { display:none} @media screen and (max-width:1200px) { #sitemap { max-width:800px} #sitemap .depth1>li { width:50%; margin-top:4%} } @media screen and (max-width: 960px) { #sitemap { display:none} } #login-box, #login-box2 { text-align: center; margin: 20px 0 60px 0 } #login-box a, #login-box2 a, #login-box3 a { display: inline-block; padding: 0 10px; text-align: center; color: #fff; font-size: 12px; } /* header */ #main #header.on {top:120px;} #header { position:fixed; left:0; top:0; z-index:900; width:100%; height:auto; background: #fff; box-sizing:border-box; transition:all 0.4s ease; -webkit-transition:all 0.4s ease;} .sub #header .inner{max-width: 100%; margin: 0 auto;} #header h1.logo {position:absolute; left:0; z-index:990; width:187px; height:70px; top: auto;} /* .sub #header h1.logo {margin-left:-750px;} */ #header h1.logo a {display:block; height:100%; text-decoration:none; overflow:hidden; text-indent:-9999px;} #header h1.logo a:after {content:""; display:block; width:100%; height:100%; position:absolute; left:0; top:0; background:url(../img/logo.png) no-repeat center 50%;} #header #gnb {width:100%; height:70px; position:relative; z-index:50; overflow:hidden; box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.08);} #header #gnb:after {content:""; display:block; width:100%; height:70px; background:#fff; position:absolute; left:0; top:0;} #header #gnb .blind {display:none; width:100%; height:auto; position:fixed; left:0; top:0; background:rgba(0,0,0,0.6);} #header #gnb .blind:after {content:""; display:block; width:100%; height:70px; position:absolute; left:0; top:0;} #header #gnb #blind {width:100%; height:0; background:#fff; box-shadow: 0 3px 15px 0 rgba(0, 0, 0, 0.08) inset; position:absolute; left:0; top:70px; z-index:1; box-sizing:border-box; display:none;} #header #gnb #blind:after {content:""; display:none; width:2000px; height:100%; background:#fff; position:absolute; left:50%; top:0; margin-left:-2420px;} #header #gnb ul {width:auto; position:relative; z-index:20; box-sizing:border-box; max-width:950px; padding:0; margin:0 auto;} #header #gnb ul:after {content:""; display:block; clear:both;} #header #gnb > ul > li {float:left; display:inline-block; width:19.666666%; box-sizing:border-box; height:100%; position:relative; text-align: center;} /* #header #gnb > ul > li {float:left; display:inline-block; padding: 0 2vw; box-sizing:border-box; height:100%; position:relative;} */ #header #gnb > ul > li:after{visibility:hidden; opacity:0; display:block; position:absolute; top:0; left:0; width:100%; height:2px; background-color:#494e61; transition-property:visibility, opacity;} #header #gnb > ul > li > a {display:block; height:70px; box-sizing:border-box; font-size:21px; line-height:31px; text-align:center; text-decoration:none; color:#222;} #header #gnb > ul > li > a span {display:inline-block; vertical-align:top; height:100%; padding:20px 0; box-sizing:border-box; line-height:31px; font-size:17px; letter-spacing: -1px;} #header #gnb > ul > li > a.on, #header #gnb > ul > li:hover > a, #header #gnb > ul > li:active > a {color:#3d66c4; font-size:17px; } #header #gnb > ul > li > ul{ position: relative; padding:14px 30px 20px 30px; box-sizing: border-box; width:100%; opacity:0; -webkit-opacity:0; background:transparent; border-top:1px solid transparent; border-right:1px solid #ddd; transition:background 0.3s ease; -webkit-transition:background 0.3s ease; } #header #gnb ul li ul.on{background: #ecf3fb; border-top-color: #b1c9e5;} #header #gnb ul li ul:after{content: ""; position: absolute; top: 0; right: -1px; display: block; width: 1px; height: 100%; background:rgba(0, 0, 0, 0.08);} #header #gnb ul li ul.on:after{background:transparent;} #header #gnb ul li:last-child ul:after{right:0;} #header #gnb ul li:first-child ul:before{content: ""; position: absolute; top: 0; left:0; display: block; width: 1px; height: 100%; background:rgba(0, 0, 0, 0.08);} #header #gnb ul li:first-child ul.on:before{display:none;} #header #gnb ul li ul li {width:auto; height:auto; margin-bottom:0; float:none;} #header #gnb ul li ul li:first-child {margin-top:0;} #header #gnb ul li ul li a {font-size:15px; line-height:20px; text-align:left; width: 100%; height:auto; color:#323232; padding:6px 0; display:inline-block; vertical-align:top; position:relative;} #header #gnb ul li ul li a span {font-weight:400; margin:0; padding:0; width: 100%; height:auto; font-size: 15px; line-height:23px;letter-spacing: -1px;} #header #gnb ul li ul li a span:hover{text-decoration: underline; color: #3d66c4;} #header #gnb ul li ul li a.on:after, #header #gnb ul li ul li a:hover:after, #header #gnb ul li ul li a:active:after {color:#3d66c4;} #header #gnb ul li ul li ul{display: none; padding-left:10px;} /* none 이면 하위 보이지 않는다. */ #header .search_box_wrap {position:absolute; right:50%; margin-right:-700px; top: 21px; z-index:71;} #header.global_on .search_box_wrap {top:56px;} .sub #header .search_box_wrap {margin-right: -690px;} #header .search_box_wrap:after {content:""; display:block; clear:both;} #header .search_box_wrap > div.lang_btn,#header .search_box_wrap > a.search_btn_open,#header .search_box_wrap > a.allmenu_btn_open{display:block; text-decoration:none; font-size:13px; float:left; color:#222; width:21px; height:30px; margin-left:9px; position:relative;} #header .search_box_wrap .lang_btn{position: relative; width: 88px !important; padding: 4px 0; text-align: center; box-sizing: border-box; line-height: normal;} #header .search_box_wrap .lang_btn:after{content: ""; position: absolute; display: block; width: 0px; height: 15px; top: 50%; margin-top: -7.5px; right: 50%; margin-right: -0.5px; background: #ebebeb; box-sizing: border-box;} #header .search_box_wrap .lang_btn >.kor{display: inline-block; position: absolute; left: 0%; font-size: 11px; width: 50%; text-decoration: none; color: #222; margin-top: 1px} #header .search_box_wrap .lang_btn >.eng{display: inline-block; position: absolute; right: 0%;width: 100%; font-size:16px; color: #989898; text-decoration: none;} #header .search_box_wrap a.search_btn_open {width: 23px; height: 23px; margin-top: 4px; background:url(../img/main_search.png) no-repeat center 50%; text-indent:-9999px;} #header .search_box_wrap a.search_btn_open.on {background:#3d66c4 url(../img/search_btn_close.png) no-repeat center 50%;} #header .search_box_wrap a.allmenu_btn_open {background:url(../img/main_allmenu.png) no-repeat center 50%;text-indent:-9999px;} #header .search_form {position:absolute; left:0; top:70px; width:100%; height:auto; box-sizing:border-box; padding:64.5px 0; background-color:#000; z-index:997; display:none;} #header.global_on .search_form{top: 105px;} #header .search_form .form {width: 100%; max-width:750px; height:50px; margin:0 auto; position:relative; box-sizing:border-box; padding-right:35px; border-bottom:2px solid rgba(255, 255, 255,0.7); vertical-align: middle;} #header .search_form .form input::placeholder{color:rgba(255, 255, 255,0.7); } #header .search_form .form input[type="text"] { width:98%; height:48px; border:0; padding:0 5px; line-height:48px; background:none; color: rgba(255, 255, 255,0.7);font-size: 20px; font-weight: 300;} #header .search_form .form input[type="submit"] {display:block; width:35px; height:48px; position:absolute; right:0; top:0; border:0; background:url(../img/search_detail_submit.png) no-repeat center 55%; overflow:hidden; text-indent:-9999px;} #header .search_form .btn_close {position:absolute; right:50%; margin-right: -670px; top:-102px; width:21px; height:30px; background:#fff url(../img/search_detail_close.png) no-repeat center 50%; overflow:hidden; text-indent:-9999px;} .sub #header .search_form .btn_close{right: 50%; margin-right: -620px; top: -101px;} #header .search_form .btn_close:after{position: absolute; content: ""; display: none; width: 1px; height: 20px; background:rgba(14, 48, 109, 0.06); top: 50%; margin-top: -10px; right: 0;} #header .blind_search {position:fixed; left:0; top:0; width:100%; height:100%; background:rgba(20,20,20,0.7); z-index:995; display:none;} #header #gnb:after {opacity:0; -webkit-opacity:0;} #header #gnb ul li a {color:#222;} #header #gnb ul li ul li a { color:#5a5a5a;} #header .search_box_wrap >a:after {background:url(../img/popup_arrow.png) no-repeat center 50%;} #header.active #gnb:after {opacity:1; -webkit-opacity:1;} #header.active #gnb ul li a {color:#222;} #header.active #gnb ul li a.on, #header.active #gnb ul li a:hover, #header.active #gnb ul li a:active {color:#3d66c4;} /** Visual **/ #sub_bg_wrap {width:100%; height:380px; background-size:cover !important; position:relative; margin-top: 70px;} /* #sub_bg_wrap:after{content:""; display:block; width:100%; height:100%; position:absolute; left:0; top:0; z-index:1; background:url(../img/sub_visual_cover.png) repeat center 50%; opacity:0.8; -webkit-opacity:0.8; filter:alpha(opacity=10);} */ #sub_bg_wrap.gnb001 {background:url(../img/sub_visual01.jpg) no-repeat center top;} #sub_bg_wrap.gnb002 {background:url(../img/sub_visual02.jpg) no-repeat center top;} #sub_bg_wrap.gnb003 {background:url(../img/sub_visual03.jpg) no-repeat center top;} #sub_bg_wrap.gnb004 {background:url(../img/sub_visual04.jpg) no-repeat center top;} #sub_bg_wrap.gnb005 {background:url(../img/sub_visual05.jpg) no-repeat center top;} #sub_bg_wrap.gnb006 {background:url(../img/sub_visual06.jpg) no-repeat center top;} #sub_bg_wrap.gnb007 {background:url(../img/sub_visual07.jpg) no-repeat center top;} #sub_bg_wrap.gnb008 {background:url(../img/sub_visual08.jpg) no-repeat center top;} #sub_bg_wrap .gnb_con {margin:0; position:absolute; left:50%; top:50%;color:#fff; z-index:10; transform: translate(-50%,-50%); text-align: center; width: 100%;} #sub_bg_wrap p strong {display:block; font-size:40px; line-height:42px; margin:0 0 12px 0; font-weight: 500; letter-spacing:-2px; font-weight: bolder;} #sub_bg_wrap p span {display:block; font-size:20px; line-height:24px; color:#fff; opacity:0.8} .gnb_nav{height: 50px; width: 100%; background-color: #f0f0f0; border-bottom: 1px solid #cacaca; margin-bottom: 5em;} /** Container **/ #container {width:100%; height:auto; margin:0; float:none;} #container .inner {width:100%; max-width:1520px; margin:0 auto; padding:0; position:relative; display: flex; justify-content: center;} #container .inner.inner_box_title{justify-content: flex-start;} #container .inner_y{max-width: 1200px; width: 100%; margin: 0 auto;} #aside {width:100%;} #aside .h2 {font-size:30px; line-height:34px; padding:0 0 15px 0; margin:0 0 30px 0; color:#1a1a1a; letter-spacing:-1.5px; font-weight:500} #aside .lnb {width:100%; height:50px; padding: 15px 0; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center;} #aside .lnb li{padding: 0 10px;} #aside .lnb li a {display:block; font-size:16px; font-weight:400; color:#686868; letter-spacing:-0.02em; text-decoration:none; position:relative; box-sizing: border-box; width:100%; transition:all 0.5s; word-break: keep-all;} #aside .lnb li a > i {position: absolute; right:15px;} #aside .lnb li a.on {color:#000; border-bottom: 2px solid #769d91; padding-bottom: 14px;} #aside .lnb li ul {display:none; padding:0; border:0; transition:all 0.5s;} #aside .lnb li.on > ul {display:block; height:auto;} #aside .lnb li ul li {border:0;} #aside .lnb li ul li a {font-size:15px; line-height:25px; padding:5px 20px; display:inline-block; vertical-align:top; color:#444; font-weight:normal;} #aside .lnb li ul li a b {display:none;} #aside .lnb li ul li a:hover, #lnb .lnb li ul li a:active {text-decoration:underline;} #aside .lnb li ul li a.on {background-color:#555;} #aside .lnb li ul li ul {padding:0 0 5px 0; border:0;} #aside .lnb li ul li ul li {} #aside .lnb li ul li ul li a {font-size:14px; line-height:18px; padding:3px 15px 3px 25px; color:#666; background:url(../img/lnb_depth3_bul.png) no-repeat 15px 12px;} #aside .lnb li ul li ul li a.on, #lnb .lnb li ul li ul li a:hover, #lnb .lnb li ul li ul li a:active {color:#0064cc; background:url(../img/lnb_depth3_bul_on.png) no-repeat 15px 12px;} #container #contents {position: relative;width:auto; padding:150px 0 0 0; min-height:600px; float:none;} /* .path {position:absolute; left:0; top:0; width:auto; z-index:5;} */ .path span {display:inline-block; vertical-align:top; height:47px; line-height:47px; padding:0 20px; font-weight:normal; font-size: 1.4em;} .path span.home {text-indent:-9999px; overflow:hidden; width:47px; margin-right: 20px; background:url(../img/path_home_ico.png) no-repeat center 50%;} .path i {display:inline-block; margin-top:18px} #container #contents h1.h1 {color:#222; font-size:33px; line-height:38px; margin:0 0 40px 0; font-weight: bold;} #container #contents .sns_btn {position:absolute; right:0; top:0; width:auto; z-index:10; border-left:1px solid #ddd;} #container #contents .sns_btn a {display:block; float:left; width:48px; height:47px; border-right:1px solid #ddd; padding:0 !important;} #container #contents .sns_btn a:hover, #container #contents .nsnBtn a:active {background:#ddd;} #container #contents .sns_btn a img {margin:15px auto 0 auto; display:block;} #container #contents .sub-header { padding-bottom:30px;} #container #contents .sub-header .sub_title { font-size:28px; font-weight:bold; float:left} #container #contents .sub-header .sub_sentence { font-size:18px; font-weight:400; color:#555; float:left; padding:10px 0 0 20px} @media screen and (max-width: 1600px){ .top_btn {right:3%; bottom:34px;} } @media screen and (max-width: 1450px){ .bannerzone .control a.btn_left{left: 1% !important; margin-left: 0;} .bannerzone .control a.btn_right{right: 1% !important; margin-right:0;} .bannerzone .today_check{right: 1.5%; margin-right: 0;} } @media screen and (max-width: 1440px){ /* Header */ #header h1.logo{left:25px; margin-left:0;} .sub #header h1.logo{left:50%;} #header .search_box_wrap {right:25px; margin-right: 0;} .sub #header .search_box_wrap {right:50%;} #header .search_form .btn_close {right:56px; margin-right: 0;} #header #gnb #blind { background: #fff url(../img/blind_bg.png) no-repeat left top -35px; background-size: 205px;} /** Container **/ #container .inner {max-width:94%; margin:0 3%;} } @media screen and (max-width: 1400px){ /** Visual **/ /** Container **/ #container .inner {max-width:94%; margin:0 3%;} } @media screen and (max-width: 1370px){ .sub #header h1.logo{left:25px; margin-left:0;} .sub #header .search_box_wrap{margin-right:-630px;} .sub #header .search_form .btn_close{margin-right: -600px;} } @media screen and (max-width: 1310px){ .sub #header .search_box_wrap{right:25px; margin-right:0;} .sub #header .search_form .btn_close{right:3%; margin-right: 20px;} } @media screen and (max-width: 1290px){ #header #gnb >ul {max-width: 70%; margin: 0 auto;} #header #gnb >ul >li >a{font-size: 19px;} #header #gnb ul li ul{padding: 14px 20px 20px 20px;} #header #gnb ul li ul li a span{font-size: 15px;} } @media screen and (max-width: 1110px){ .sub #header .search_form .btn_close{right:3%; margin-right: 23px;} } @media screen and (max-width: 1024px){ /* Slidemap */ #mobile_gnb { opacity:0; overflow:hidden; position:fixed; z-index:800; display:block; width:100%; height:100%; padding-top:57px; right:-100%; box-sizing:border-box; transition:all 0.5s ease; -webkit-transition:all 0.5s ease; } body.fixed #mobile_gnb{opacity:1; right:0;} #mobile_gnb:after {content:""; display:block; clear:both;} #mobile_gnb .inner {position:relative; width:100%; height:100%; float:right; margin-right:-460px; margin:0; background:#fff; box-sizing:border-box;} #mobile_gnb .inner .binds {overflow:auto; max-width:1200px; margin:0 auto; height:100%; padding: 0 20px; box-sizing: border-box;} #mobile_gnb .inner .binds ul.nav {position:relative; z-index:10;} #mobile_gnb .inner .binds ul.nav >li {border-bottom:1px solid #cbcbcb; width:auto; float:none; padding:0; box-sizing: border-box;} #mobile_gnb .inner .binds ul.nav li:last-child{border-bottom: none;} #mobile_gnb .inner .binds ul.nav li a {display:block; font-size:18px; line-height:24px; padding:21px 20px 21px 34px; position:relative; color: #222;} #mobile_gnb .inner .binds ul.nav > li > a:after {content:""; display:block; position:absolute; right:20px; top:50%; margin-top:-9px; width:18px; height:18px; background:url(../img/mob_gnb_bul.png) no-repeat center 50%;} #mobile_gnb .inner .binds ul.nav li a:hover{color:#3d66c4; text-decoration: none;} #mobile_gnb .inner .binds ul.nav li a.on {color:#3d66c4;} #mobile_gnb .inner .binds ul.nav > li > a.on:after {background:url(../img/mob_gnb_bul_on.png) no-repeat center 50%;} #mobile_gnb .inner .binds ul.nav li > a > span {position: relative; line-height:24px; font-size: 19px; font-weight: 500} .sub #mobile_gnb .inner .binds ul.nav > li > a > span{font-weight: 400; letter-spacing:-1px} #mobile_gnb .inner .binds ul.nav li ul {display:none; background:#ecf3fb; border-top:1px solid #b1c9e5; margin-top:0; padding:20px 20px 25px 34px;} #mobile_gnb .inner .binds ul.nav li> ul> li {margin-top:0; padding: 0;} #mobile_gnb .inner .binds ul.nav li ul li:first-child {border-top:0;} #mobile_gnb .inner .binds ul.nav li ul li:last-child {border-bottom:0;} #mobile_gnb .inner .binds ul.nav li ul li a {position: relative; padding:11px 0 11px 15px; font-size:16px; line-height:21px; text-decoration:none !important; color: #000;} #mobile_gnb .inner .binds ul.nav >li> ul> li > a:after {content:""; display:block; position:absolute; right:20px; top:50%; margin-top:-9px; width:18px; height:18px; background:url(../img/mob_gnb_bul.png) no-repeat center 50%;} #mobile_gnb .inner .binds ul.nav >li> ul> li > a.on:after {background:url(../img/mob_gnb_bul_on.png) no-repeat center 50%;} #mobile_gnb .inner .binds ul.nav >li> ul> li >a:before{content: ""; display: block; position: absolute; width: 3px; height: 3px; background: #222; left: 5px; top: 20.5px; border-radius: 50%;} #mobile_gnb .inner .binds ul.nav >li> ul> li >a:hover,#mobile_gnb .inner .binds ul.nav >li> ul> li >a:active{color:#3d66c4; } #mobile_gnb .inner .binds ul.nav >li> ul> li >a.on:before,#mobile_gnb .inner .binds ul.nav >li> ul> li >a:hover:before{background: #3d66c4;} #mobile_gnb .inner .binds ul.nav li ul li a span{font-size: 17px;} #mobile_gnb .inner .binds ul.nav li ul li a[target=_blank] {background:none; padding-right:0;} #mobile_gnb .inner .binds ul.nav li ul li a:after {display:none;} #mobile_gnb .inner .binds ul.nav li ul li a.arrow:after {display:block; right:2px; width:10px; height:10px; margin-top:-7px;} #mobile_gnb .inner .binds ul.nav li ul li a span {font-weight:400; line-height:21px;} #mobile_gnb .inner .binds ul.nav li ul li ul{padding:11px 27px; width: 50%; margin-left:0; border:0; background: #fff;} #mobile_gnb .inner .binds ul.nav li ul li ul li ul{padding:0;} #mobile_gnb .inner .binds ul.nav li ul li ul li ul li a:before{display: none;} #mobile_gnb .inner .binds ul.nav li ul li ul li ul li a:hover,#mobile_gnb .inner .binds ul.nav li ul li ul li ul li a:active{color:#3d66c4; } #mobile_gnb .inner .binds ul.nav li ul li ul li {position: relative; border:0;} #mobile_gnb .inner .binds ul.nav li ul li ul li a:hover, #mobile_gnb .inner .binds ul.nav li ul li ul li a:active{color:#3d66c4;} #mobile_gnb .inner .binds ul.nav li ul li ul li a:before {content: ""; position: absolute; top: 13px; left: -10px; width: 5px; height: 2px; background: #666;} #mobile_gnb .inner .binds ul.nav li ul li ul li:hover a:before, #mobile_gnb .inner .binds ul.nav li ul li ul li:active a:before{background:#3d66c4; } #mobile_gnb .inner .binds ul.nav li ul li ul li a {padding:3px 0; color: #666;} #mobile_gnb .inner .binds ul.nav li ul li ul li a:after {display:block; width:3px; height:3px; right:auto; left:0; top:9px; margin:0; background:#666;} #mobile_gnb .inner .binds ul.nav li ul li ul li a span{font-size: 15px; line-height: 22px;} #mobile_gnb .inner .binds ul.nav li ul li ul li ul{display: none; } #mobile_gnb .inner .binds ul.nav li ul li ul li ul li a span{font-size: 14px; line-height: 22px;} #mobile_gnb .inner .binds .side_link{position: relative; margin:30px 0 80px; padding:0 20px 50px 20px;} #mobile_gnb .inner .binds .side_link div.lang_btn{position: absolute; padding: 12px 0; right: 0; border: 1px solid #ccc; box-sizing: border-box;} #mobile_gnb .inner .binds .side_link div.lang_btn a{display: inline-block; width: 165px; padding: 0 11px; text-align: center; font-size: 14px; box-sizing: border-box; color: #989898; } #mobile_gnb .inner .binds .side_link div.lang_btn a.kor{position: relative; color: #222;} #mobile_gnb .inner .binds .side_link div.lang_btn a.kor:after{content: ""; display: block; position: absolute; width: 0px; height: 100%; background: #ebebeb; top: 0; right: -2px;} /* Header */ #header {position:fixed; left:auto; top:auto; height: 57px;} .fixed #header {position:fixed; left:auto; top:auto; height: 57px;} #main #header.on {top:0;} #main #header.global_on {top:0; height: 90px;} body.fixed #header{box-shadow:0 3px 15px 0 rgba(0, 0, 0, 0.08);} #header h1.logo {width: 67px; height:57px; bottom:0; left: 4%;} #header h1.logo a {background:none;} #header h1.logo a:after {background: url(../img/logo.png) no-repeat center 50%; background-size: contain;} #header .inner{height: 57px;} #header #gnb {display:none;} #header .search_box_wrap {bottom:14px; top: auto; right: 3%; margin-right: 0;} #header.global_on .search_box_wrap{top: auto;} .sub #header h1.logo{left: 4%;} .sub #header .search_box_wrap{right: 4%;} #header .search_box_wrap a.search_btn_open, #header .search_box_wrap a.allmenu_btn_open {position:relative; right:auto; top:auto; margin-left: 28px;} #header .search_box_wrap a.allmenu_btn_open:before{content: "";position: absolute; display: block; top: 50%; left: -14px; margin-top:-8px; width: 1px; height: 16px; background: rgba(14, 48, 109, 0.15);} #header .search_box_wrap a.search_btn_open {margin-right:0;margin-left:0;} #header .search_box_wrap a.allmenu_btn_open.on {background:url(../img/search_close.png) no-repeat center 50%;} #header .search_box_wrap > div.lang_btn{display: none;} #header .search_form {padding:51.5px 0; top: 57px;} #header.global_on .search_form{top: 91px;} #header .search_form .form {max-width: 535px; height: 47px;} #header .search_form .btn_close:after{display: none;} #header .search_box_wrap a.search_btn_open {background: url(../img/main_searh_t.png) no-repeat center center;} #header .search_box_wrap a.search_btn_open.on{background: #3d66c4 url(../img/search_btn_close_t.png) no-repeat center 50%;} #header .search_form .form input[type="text"]{line-height: 45px; height: 45px;} #header .search_form .btn_close {width: 30px; right: 3%; margin-right: 45px; top: -85px;} .sub #header .search_form .btn_close {top:-84px; right:4%; margin-right: 45px;} #mobile_gnb .inner {padding:40px 0 0 0;} /** Visual **/ #sub_bg_wrap p strong {font-size:32px; line-height:38px; margin:0 0 8px 0;} #sub_bg_wrap p span {font-size:17px; line-height:22px;} /** Container **/ #main_container {padding-top:0 !important;} /* .group{margin-bottom: 5em;} */ #container {background:none;} /* #container .inner {padding:0 0 50px 0;} */ #container #contents {padding:35px 0 0 0; min-height:10px;} #container #contents .path {display:none;} #container #contents .sns_btn {border:0; top:-48px;} #container #contents .sns_btn a {width:38px; height:38px; border-radius:50%; background:#fff; opacity:0.9; -webkit-opacity:0.9; filter:alpha(opacity=90); overflow:hidden; margin-left:5px; position:relative; border:0; box-shadow:0 0 4px #8a8a8a; -webkit-box-shadow:0 0 4px #8a8a8a;} #container #contents .sns_btn a:first-child {margin-left:0;} #container #contents .sns_btn a:hover, #container #contents .nsnBtn a:active {background:#fff;} #container #contents .sns_btn a img {position:absolute; left:50%; top:50%; margin:-9px 0 0 -9px;} #container #contents h1.h1 {font-size:31px; line-height:36px; margin:0 0 30px 0;} .content_area .tit{margin-bottom: 3em !important;} .content_area .colum{height: auto !important;} .content_area .colum .left{height: 100vw !important;} } @media screen and (max-width: 840px){ /** header **/ #header .search_form {padding:41.5px 0;} /** Visual **/ #sub_bg_wrap p strong {font-size:30px; line-height:36px; margin:0 0 7px 0;} #sub_bg_wrap p span {font-size:16px; line-height:21px;} /** Container **/ #container #contents h1.h1 {font-size:29px; line-height:34px; margin:0 0 25px 0;} .f_logo{display: none;} .footer_in{padding: 38px 20px !important;} .foot_menu .inner{margin-left: 0 !important;} } @media screen and (max-width: 640px){ /* Header */ #mobile_gnb{padding-top: 50px;} #mobile_gnb .inner .binds ul.nav li a {font-size:17px; line-height:22px;padding: 18px 20px 18px 28px;} #mobile_gnb .inner .binds ul.nav li a span {line-height:22px;} #mobile_gnb .inner .binds ul.nav li ul {padding: 15px 20px 18px 28px;} #mobile_gnb .inner .binds ul.nav li ul li a {font-size:15px; line-height:20px; padding: 9px 0 9px 15px;} #mobile_gnb .inner .binds ul.nav li ul li a span {line-height:20px;} #mobile_gnb .inner .binds ul.nav li ul li ul{width: calc(100% - 58px);} #mobile_gnb .inner .btn_close {top: -32px; right: 12px;} #header{height: 50px;} #header h1.logo{width: 63px; height: 50px;} #header .search_box_wrap {bottom:50%; right:4%; transform: translateY(50%);} #header .search_box_wrap a {margin-left:8px;} #header .search_box_wrap a {margin-left:8px;} #header .search_form {padding:34px 0; top: 50px;} #header .search_form .form {max-width:70%; height: 42px;} #header .search_form .form input[type="text"]{width: 95%; font-size: 15px; line-height: 40px; height: 40px;} #header .search_form .form input[type="submit"]{width: 18px; height: 19px; top: 12px; right: 7px; background-size: contain;} #header .search_form .btn_close {top: -78px; margin-right: 42px;} #header.global_on .search_form .btn_close {top: -80px; margin-right: 42px;} .sub #header .search_form .btn_close{top: -78px; right: 3.5%; margin-right: 40px;} #main #header h1.logo a {background:none !important;} #mobile_gnb .inner .binds ul.nav >li> ul> li >a:before{top: 18.5px;} .subbody #header .search_box_wrap a.allmenu_btn_open,#header .search_box_wrap a.allmenu_btn_open{margin-left: 20px;} .subbody #header .search_box_wrap a.allmenu_btn_open:before,#header .search_box_wrap a.allmenu_btn_open:before{left: -10px;} /** Visual **/ #sub_bg_wrap p strong {font-size:27px; line-height:32px; margin:0 0 5px 0;} #sub_bg_wrap p span {font-size:15px; line-height:19px;} /** Container **/ #container #contents .sns_btn {top:-44px;} #container #contents .sns_btn a {width:34px; height:34px;} #container #contents .sns_btn a:hover, #container #contents .nsnBtn a:active {background:#fff;} #container #contents .sns_btn a img {position:absolute; left:50%; top:50%; margin:-9px 0 0 -9px;} #container #contents h1.h1 {font-size:27px; line-height:32px; margin:0 0 20px 0;} } @media screen and (max-width: 640px) and (min-width:581px){ #mobile_gnb .inner .btn_close {top: -34px;} } @media screen and (max-width: 600px){ .js_slide.type_03 .control a.btn_left, .js_slide.type_03 .control a.btn_right{display:block !important;} } @media screen and (max-width: 540px){ /** header **/ #header .search_form{padding:45.5px 0;} /** Visual **/ #sub_bg_wrap p strong {font-size:25px; line-height:30px;} #sub_bg_wrap p span {font-size:14px; line-height:18px;} /** Container **/ #container #contents .sns_btn {right:auto; left:0;} #container #contents .sns_btn a {width:30px; height:30px;} #container #contents h1.h1 {font-size:25px; line-height:30px; margin:0 0 15px 0;} } @media screen and (max-width: 480px){ /** header **/ #header .search_form{padding:40.5px 0;} /** Visual **/ /* #sub_bg_wrap p {padding:17px 3% 57px 3%;} */ #sub_bg_wrap p strong {font-size:23px; line-height:28px; margin:0 0 3px 0; letter-spacing:-1px;} #sub_bg_wrap p span {font-size:13px; letter-spacing:-0.5px;} /** Container **/ #container #contents h1.h1 {font-size:23px; line-height:28px;} /** Satis **/ #satis_wrap ul li {float:none; width:auto;} } @media screen and (max-width: 400px){ /* Header */ #mobile_gnb .inner .binds .side_link ul li {width:57%;} #mobile_gnb .inner .binds .side_link ul li:first-child {width:43%;} #mobile_gnb .inner .binds .side_link ul li a {text-align:center;} #mobile_gnb .inner .binds .side_link ul li a:after {display:none;} /* Visual */ .sub #visual {height:150px; padding:37px 0 46px 0 !important;} } @media screen and (max-width: 380px){ /** header **/ #header .search_form{padding:38px 0;} /** Visual **/ #sub_bg_wrap p strong {font-size:21px; line-height:27px; margin:0 0 3px 0;} /** Container **/ #container #contents h1.h1 {font-size:21px; line-height:26px;} } @media screen and (max-width: 360px){ #mobile_gnb .inner .btn_close {right: 9px;} } /*푸터*/ #footer{ width:100%; height:auto; background:#30343b; clear:both} .foot_menu{width:100%; max-width: 1550px; padding:20px 20px; background:#30343b; border-bottom:1px solid rgba(255,255,255,0.07); } .foot_menu .inner { max-width:1200px !important; margin:0 auto; display: block !important;} .foot_menu .fm{ float:left} .foot_menu .fm li{ display:inline-block; line-height:2em; margin-right:12px; padding-right:12px; border-right:1px solid rgba(255,255,255,0.07); } .foot_menu .fm li a{ font-size:1.08em; color:rgba(255,255,255,0.9);} .foot_menu .fm li a.point{color:#32c0eb;} .foot_menu .fm li:last-child{border-right:0;} /* .foot_menu .sns{ float:right} */ .foot_menu .sns li{ display:inline-block; margin-left:10px} .foot_menu .sns li:first-child {margin-left:0;} .foot_menu .sns li a { color:#777} .foot_menu .sns li a:hover { color:#fff} .foot_menu .menu { margin-top:20px; } .foot_menu #phone { display:inline-block; color:#fff; font-size:12px; text-align:center; padding: 0px 20px; background-color:#6C6} .foot_menu #kakao{ display:inline-block; color:#000; font-size:12px; text-align:center; padding: 0px 20px; background-color:#ffeb33} .footer_in{ max-width:1550px; height:auto; padding:38px 0; margin:0 auto; box-sizing:border-box; position: relative;} .footer_in address .add_name{ font-size:16px; line-height:1.8; padding-bottom:10px; color:#fff; font-weight:bold; } .footer_in address p{ overflow:hidden; font-size:13px; color:rgba(255,255,255,0.4);} .footer_in address p strong{ font-weight: 500; color:rgba(255,255,255,0.5);} .footer_in address p span{display:inline-block;margin-right:10px; line-height:1.8em;} .footer_in address p.addr{margin-top:18px;} .footer_in address p.copylight{ font-size:13px; color:#999; margin-top:18px;} .footer_in address{float:left; width:65%; font-style:normal} .footer_in .customer{float:right; color:rgba(255,255,255,0.5); margin-left:20px; padding-left:30px; border-left:1px solid rgba(255,255,255,0.05); font-size:13px;} .footer_in .customer .main_tel{font-size:15px; font-weight:300; color:#fff; margin-bottom:20px; margin-top:20px;} .footer_in .customer .main_tel span{font-size:20px; font-weight:bold; color:#32c0eb; display:block; margin-top:10px;} .f_logo{float: left; margin-right: 50px;} @media screen and (max-width: 640px) { .footer_in address { width:100%} .footer_in .customer { width:100%; border-left:0; margin-left:0; padding-left:0} .foot_menu .sns { float:left;} /* .foot_menu .fm { margin-bottom:20px} */ } /*푸터*/ .tl_pop_con{background:#fff;} .tl_pop_con h2.f_pop_tit{width:100%;height:80px;line-height:80px;background:#076aa3;font-size:20px;color:#fff;} .tl_pop_con h2.f_pop_tit img {display:inline-block;margin-left:50px;margin-right:5px;margin-top:-10px;width:120px;} .tl_pop_con h2.f_pop_tit span {display:inline-block; padding-left:50px;} .f_pop_wrap {line-height:23px;text-align:justify;word-break:break-all;font-size:15px;overflow-y:auto;} .f_pop_wrap strong {color:#00a19a;font-weight:normal;} .f_pop_wrap p { color:#333; padding:40px 50px; line-height:1.6;} .mfp-close:after { content: ''; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: url("../img/w_btn_close.png") no-repeat center center; -webkit-transition: -webkit-transform 300ms; transition: -webkit-transform 300ms; transition: transform 300ms; transition: transform 300ms, -webkit-transform 300ms; border-radius: 50%; } .mfp-close { width: 40px; height: 40px; text-indent: -999px;opacity: 1; overflow: hidden; background-color:transparent; border:0; } button.mfp-close:hover:after { -webkit-transform: rotate(270deg); -ms-transform: rotate(270deg); transform: rotate(270deg); }