﻿@charset "UTF-8";

/********* common_layout *********/
html, body {height:100%;}
body {line-height:1.6; color:#333; font-family: 'Noto Sans KR', sans-serif !important; font-size:18px;}
.wrapper {position:relative; z-index:1; min-height:100%;}
.container {position:relative; z-index:1; max-width:1280px; margin:0 auto;}

.trs {-webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s;}

/* skip navi */
.skip_navi {position:absolute; z-index:999999; width:100%; left:0; top:0; text-align:center;}
.skip_navi a {display:block; position:absolute; left:0; top:-9999px; z-index:1; width:100%; height:40px; line-height:40px; background-color:#333; color:#fff; font-size:20px; font-weight:700;}
.skip_navi a:hover, .skip_navi a:focus {top:0;}

/* header */
.header {position: absolute; width: 100%; z-index:9999; padding-top:45px;  border-bottom:1px solid rgba(255,255,255,0.2);}
.gnb_header {top:-100px; transition:all 0.3s; -moz-transition:all 0.3s; -webkit-transition:all 0.3s;}
.head_logo {position:absolute; left:10px; top:50%; z-index:1; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%);
-ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); margin-top: -32px; z-index: 2;}
.head_logo a {display: block;}
.gnb_header > .container {position: relative;  z-index: 2;}


/*gnb*/
.gnb {float:right; }
.gnb > li {position:relative; z-index:10; float:left; }
.gnb > li:first-child {margin-left:0;}
.gnb > li > a {display:table-cell; height: 65px; padding: 0 60px; line-height: 1; font-size:1.056em; font-weight:500; text-align:left; color: #fff; font-family: 's-core-dream'; vertical-align: middle;}
.gnb > li > a:after {content:""; display:block; position:absolute; left:0; bottom:0; z-index:1; width:0; height:3px; background-color:#2e51ad; transition:all 0.3s; -moz-transition:all 0.3s; -webkit-transition:all 0.3s;}
.gnb > li > a:before {content: ''; position: absolute; left: 50%; bottom: -6px; display: none; height: 0; border-top: 6px solid #2e51ad; border-left: 6px solid rgba(0,0,0,0); border-right: 6px solid rgba(0,0,0,0); -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%) ; -ms-transform: translateX(-50%) ; -o-transform: translateX(-50%) ; transform: translateX(-50%) ;}


.gnb > li:hover > a:after, .gnb > li:focus > a:after {width:100%;}
.gnb > li:hover > a:before, .gnb > li:focus > a:before {display: inline-block;}

.gnb > li:last-child {margin-right: 0;}

.sub_gnb {display:none; position:absolute; left:0; top:65px; z-index:10; width:100%; min-height: 510px; padding: 30px 0; overflow: hidden;}
.sub_gnb:after {content: ''; position: absolute; right: 0; top: 30px;  width: 1px; height: calc(100% - 60px); background-color: #e5e5e5;}

.sub_gnb li a {display:block;  padding: 5px 13px; transition:all 0.3s; -moz-transition:all 0.3s; -webkit-transition:all 0.3s; color: #000; text-align: left; font-size: 0.944em; word-break:keep-all;}
.sub_gnb li a span {display: inline-block;	line-height: 1.2; padding: 0 0 4px; }
.sub_gnb li a:hover span { color: #024a9e; font-weight: 500; text-decoration: underline;
text-underline-position: under;}

.gnb > li:last-child .sub_gnb:after {display: none;	}



.gnb > li:nth-child(1) {}
.gnb > li:nth-child(2) > a {padding: 0 30px;}
.gnb > li:nth-child(3) > a {padding: 0 20px;}
.gnb > li:nth-child(4) { }
.gnb > li:nth-child(4) > a {width: 130px; padding:  0 0 0 15px; text-align: right;}

.sub2_gnb {display: none;}



/* util_header */
.util_header {position:absolute; top:0; z-index:1; width:100%; padding: 11px 0 0; text-align: right; z-index: 1;}
.util_header .container {}
.util_header .sitemap_btn {position: relative; display: inline-block; position: relative; padding-left: 30px; padding-right: 10px; margin-right: 8px; color: #fff; font-size: 0.833em; }
.util_header .sitemap_btn i {position: absolute; top: 50%; left: 0; color: #fff; font-size: 1.667em; -webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);}

.util_header .language_btn_wrap {display: inline-block; vertical-align: middle;}
.util_header .language_btn_wrap .language_btn {float: left; display: block; width: 45px; height: 25px; line-height: 23px; margin: 0; border: 1px solid #d2d2d2; background-color: #fff; color: #1b1b1b; font-size: 0.722em; text-align: center;}
.util_header .language_btn_wrap .language_btn.on {border-color: #303192; background-color: #303192; color: #fff;}


.gnb_header .link_box {position: absolute; right: 0; top: 50%; margin-top: -13px;}
.gnb_header .link_box .logo {display: inline-block; margin-right: 25px; vertical-align: middle;}
.gnb_header .link_box .logo:last-child {margin-right: 0;}

/* sitemap (10/10) */

.sitemap_wrap {display: none; position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 9999; overflow: auto; padding: 110px 0; background-image: url('/images/common/sitemap_bg.png'); -webkit-background-size: cover;
background-size: cover; background-repeat: no-repeat; background-position: center center; background-color: #fff; overflow: hidden;}

.sitemap_wrap .sitemap_logo {position:absolute; left:45px; top:33px;}

.sitemap_wrap .sitemap_close {position: absolute; top: 44px; right: 43px; -webkit-transition: all 0.1s; -moz-transition: all 0.1s; -ms-transition: all 0.1s; -o-transition: all 0.1s; transition: all 0.1s; color: #000; font-size: 40px;}
.sitemap_wrap .sitemap_close:hover {transform:rotate(180deg);}

.sitemap_wrap .sitemap_box {position: absolute; left: 50%; top: 50%; width: 100%; max-width: 1280px; padding: 0 0px; -webkit-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%); transform: translate(-50%,-50%);}


.sitemap_wrap .sitemap {display: block; width: 100%; max-width: ;}
.sitemap_wrap .sitemap > li {float: left; width: 100%; margin-bottom: 35px;}



.sitemap_wrap .sitemap > li > a {display: block; margin: 0 0 15px 0; color: #171717; font-size: 1.667em; font-weight: 700;}
.sitemap_wrap .sitemap > li > a > br {display: none;}

.sitemap_wrap .sitemap_sub_gnb {padding: 0 40px 0 0;}
.sitemap_wrap .sitemap_sub_gnb > li {position: relative; float: left; width: 50%; padding-left: 15px; margin-bottom: 15px;}
.sitemap_wrap .sitemap_sub_gnb > li:before {content: ''; position: absolute; left: 0; top: 14px; width: 3px; height: 3px; border-radius:50%;  background-color: #009be5; }
.sitemap_wrap .sitemap_sub_gnb > li:last-child {margin-bottom: 0;}
.sitemap_wrap .sitemap_sub_gnb > li > a {position: relative; display: inline-block; font-size: 1.111em; word-break:keep-all;}
.sitemap_wrap .sitemap_sub_gnb > li > a:after {content: ''; position: absolute; display: none;	 left: -5px; bottom: -2px; width: calc(100% + 10px); height: 11px; background-color: #7fd6ff; z-index: -1;}
.sitemap_wrap .sitemap_sub2_gnb {margin-top: 8px;}
.sitemap_wrap .sitemap_sub2_gnb > li {margin-bottom: 5px;}
.sitemap_wrap .sitemap_sub2_gnb > li:last-child {margin-bottom: 0;}
.sitemap_wrap .sitemap_sub2_gnb > li > a {display: block; color: #777; margin-left: 13px; padding-left: 10px; background: url('/images/user/bull/bull_bar.jpg') no-repeat 0 9px;}

.sitemap_wrap .sitemap > li:hover > a {color: #009be5;}
.sitemap_wrap .sitemap > li:hover .sitemap_sub_gnb > li > a:hover {font-weight: 700;}
.sitemap_wrap .sitemap > li:hover .sitemap_sub_gnb > li > a:hover:after {display: block;	}


.sitemap_wrap .sitemap > li:nth-child(2) .sitemap_sub_gnb > li {width: 25%;}

/* .sitemap {display: none;} */



.header:hover {background-color: #fff;}
.header:hover .head_logo {}
.header:hover .head_logo a {background-image: url('/en/images/common/en_head_logo_on.png'); background-repeat: no-repeat;	}
.header:hover .head_logo img {opacity: 0;}

.header:hover .util_header {background-color: #ffffff;}
.header:hover .util_header .sitemap_btn {color: rgba(27,27,27,0.7); }
.header:hover .util_header .sitemap_btn i {color: #000; }

.header:hover .gnb > li > a {color: #000;}

.header.scrolled {padding-top:110px; }
.header.scrolled .gnb_header {position:fixed; top:0; z-index:1; width:100%; box-shadow:0 2px 5px #555; background-color: #fff;}
.header.scrolled .gnb_header.on {box-shadow:none}
.header.scrolled .gnb > li > a {height: 110px; line-height: ; color: #000;}

.header.scrolled .head_logo {margin-top: 0;}
.header.scrolled .head_logo a {background-image: url('/en/images/common/en_head_logo_on.png'); background-repeat: no-repeat;	}
.header.scrolled .head_logo img {opacity: 0;}

.header.scrolled .sub_gnb {top: 111px;}









.gnb_bg {display: none; position: absolute; left: 0; top: 110px; width: 100%; min-height: 510px; padding-top: 35px; -webkit-box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.14); -moz-box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.14); box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.14);background-color: #fff; border-top: 1px solid #dedede;}
.gnb_bg.scrolled {position: fixed; top: 110px;}
.gnb_bg .container {height: 470px;}
.gnb_bg .left {position: absolute; bottom: 70px; display: block; width: 369px; height: 229px;}

.gnb_bg .gnb_bg_left_img {display: none;}
.gnb_bg .gnb_bg_left_img.on {display: block;}


.language_btn_wrap_mo {display: block; margin: 20px auto; vertical-align: middle; overflow: hidden; text-align: center;}
.language_btn_wrap_mo .language_btn {display: inline-block; width: 60px; height: 40px; line-height: 38px; margin: 0; border: 1px solid #d2d2d2; background-color: #fff; color: #1b1b1b; font-size: 1em; text-align: center;}
.language_btn_wrap_mo .language_btn.on {border-color: #303192; background-color: #303192; color: #fff;}






/* m_gnb */
.m_gnb_btn {display:none; position:absolute; right:20px; top:50%; z-index:1; width:24px; height:24px; margin-top:-12px;}
.m_gnb_btn span {display:block; position:absolute; left:0; top:0; z-index:1; width:100%; height:4px; border-radius:2px; background-color:#fff; }
.m_gnb_btn span.mid {top:50%; margin-top:-2px;}
.m_gnb_btn span.btm {top:auto; bottom:0;}

.m_gnb_wrap {display:none; position:fixed; right:-480px; top:0; z-index:9999; overflow-y: auto; width: 100%; max-width: 480px; max-height:800px; height:100%; background-color:#fff;}
.m_gnb_wrap .service_btn {max-width: 300px; margin: 50px auto 0; text-align: center;}
.m_gnb_wrap .service_btn > li {display: inline-block; width: 45%; height: 37px; line-height: 37px; margin: 2px 0; text-align: center;}
.m_gnb_wrap .service_btn > li a {display: block; color: #fff;}
.m_gnb_wrap .service_btn > li .login {background-color: #38adf2;}
.m_gnb_wrap .service_btn > li .join {background-color: #04549e;}
.m_gnb_top {height:70px; padding: 0 20px; border-bottom:1px solid #e5e5e5;}
.m_logo {display: inline-block; vertical-align: middle;}
.m_logo img {max-height:40px;}
.m_gnb > li > a {display:block; position:relative; z-index:1; padding: 10px 0 10px 20px; border-bottom:1px solid #e5e5e5; color:#000; font-size:22px;}
.m_gnb > li > a br {display: none;}
.m_gnb > li > a.on {background-color:#2e51ad; color:#fff;}
.m_sub_gnb {display:none; padding: 0 10%; background-color:#fff; border-bottom: 1px solid #e5e5e5;}
.m_sub_gnb > li > a {display:block; width:100%; padding: 5px 0;  border-top:1px solid #efede9; color:#000; font-size:16px;}
.m_sub_gnb > li:first-child > a {border-top:0 none;}
.m_sub2_gnb {padding:5px 5%; border-top: 1px solid #efede9;}
.m_sub2_gnb li a {display:block; padding:5px 0; color:#5a5340;}
.m_sub2_gnb li a:before {content:"-"; margin-right:5px; vertical-align:top;}
.m_gnb_close {display:block; position:absolute; top:20px; right:15px; z-index:1; width:30px; height:30px; line-height: 30px; color:#000; font-size:25px; text-align: center;}
.m_gnb_bg {display:none; position:fixed; left:0; top:0; z-index:9998; width:100%; height:100%; background-color:#000; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0;}




.contents {padding-bottom:30px;}


/* footer */
.footer {position:absolute; bottom:0; z-index:1; width: 100%; background-color: #ffffff; border-top: 1px solid #e5e5e5;}
.footer .foot_top {}
.footer .foot_top .container {border-bottom: 1px solid rgba(229,229,229,0.5);}


.footer .foot_top .foot_link {float: left; padding: 23px 0;}
.footer .foot_top .foot_link a {display: inline-block; position: relative; float: left; color: #828282;  font-size: 0.833em; font-family: 's-core-dream';}
.footer .foot_top .foot_link a:after {content:''; position: relative; right: 0; top: 2px; display: inline-block;  width: 1px; height: 15px; margin: 0 15px; background-color: #d2d2d2;}
.footer .foot_top .foot_link a:last-child:after {display: none;}
.footer .foot_top .foot_link a:first-child {color: #0089ce; font-weight: 500;}


.footer .foot_top .site_list_box {position: relative; float: right; padding: 15px 0;}
.footer .foot_top .site_list_box .site_btn {display: inline-block; width: 230px; height: 40px; text-align: left; padding-left: 20px; border: 1px solid #566575; color: #000; background: url('/images/common/site_btn.png') no-repeat right 26px center; font-weight: 350;}
.footer .foot_top .site_list_box .site_btn.on {background-image: url('/images/common/site_btn_on.png');}
.footer .foot_top .site_list_box .site_list {display: none; position: absolute; left: 0; bottom: 55px; width: 100%; background-color: #2c3f52; max-height: 160px; overflow-y: auto;}
.footer .foot_top .site_list_box .site_list > li {border-bottom: 1px dashed #566575;}
.footer .foot_top .site_list_box .site_list > li a {display: block; padding: 10px; padding-left: 30px; color: #fff;}


.footer .foot_btm .site_list_box {position: absolute; right: 65px; top: 50%; padding: 15px 0; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);}
.footer .foot_btm .site_list_box .site_btn {display: inline-block; width: 230px; height: 60px; text-align: left; padding-left: 20px; border: 1px solid #566575; color: #000; background: url('/images/common/site_btn.png') no-repeat right 26px center; font-weight: 350;}
.footer .foot_btm .site_list_box .site_btn.on {background-image: url('/images/common/site_btn_on.png');}
.footer .foot_btm .site_list_box .site_list {display: none; position: absolute; left: 0; bottom: 75px; width: 100%; background-color: #2c3f52; max-height: 160px; overflow-y: auto;}
.footer .foot_btm .site_list_box .site_list > li {border-bottom: 1px dashed #566575;}
.footer .foot_btm .site_list_box .site_list > li a {display: block; padding: 10px; padding-left: 30px; color: #fff;}






.footer .foot_btm .container {padding: 45px 300px 35px 255px; }

.footer .foot_btm .foot_logo {position: absolute; left: 5px; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%);
-ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);}

.footer .foot_btm .text {color: #828282; font-size: 0.778em; font-family: 's-core-dream';}

.footer .foot_btm .text span {position: relative; padding:0 15px; }
.footer .foot_btm .text span:after {content: ''; position: absolute; right: 0; top: 50%; width: 1px; height: 13px; background-color: #939393; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);}

.footer .foot_btm .text span:first-child {padding-left: 0;}
.footer .foot_btm .text span:last-child {padding-right: 0px;}
.footer .foot_btm .text span:last-child:after {display: none;}

.footer .foot_btm .copyright {line-height: 1.6em; color: #828282; font-size: 0.778em; font-weight: 350; -ms-word-break: keep-all; word-break: keep-all; font-family: 's-core-dream';}


.quick_box {position: fixed; left:50%; bottom: 43px; z-index: 2; margin-left: 580px;}
.q_share_box {display: none; position: relative; z-index: 1; margin-bottom: 5px;}

.quick_box button, .quick_box a {display: block; width: 60px; height: 60px; line-height: 60px; background-color: #e8e8e8;
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorStr=#80ffffff,endColorStr=#80ffffff)"; 
border: 1px solid #ccc; font-size: 25px; text-align: center; outline: none;}


.quick_box button:hover, .quick_box button:focus, .quick_box a:hover, .quick_box a:focus {border-color: #303192; background-color: #303192; color: #fff;}


.q_share_menu {display: none; position: absolute; left: 0; bottom: 35px; z-index: 1;}
.q_share_menu li {margin-bottom: 5px;}
.q_share_menu li:last-child {margin-bottom: 0;}
.quick_box .top_btn {}