@charset "UTF-8";

/********* common_layout *********/
html, body {height: 100%;}
body {line-height: 1.3; color: #111; font-family: 'Pretendard GOV', 'sans-serif'; font-size: 16px; -webkit-text-size-adjust: none; /*text-size-adjust: none;*/}
.container {position: relative; z-index: 1; width: 1280px; margin: 0 auto;}

/* 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 **********/
.wrapper {position: relative; min-height: 100%;}
/* .header {position: relative; z-index: 9000; min-width: 1280px; padding-top: 53px; background-color: #fff; border-bottom: 1px solid #cbcccb; box-shadow: 0 4px 5px rgba(0,0,0,0.17);} */
.head_logo {position: absolute; left: 0;}
.head_logo a {position: relative; display: flex;}
.head_logo a img {width: 169px;}
.gnb_header .container {z-index: 2; padding-left: 200px;}
.gnb {display: flex; height: 95px; text-align: center; }
.gnb > li {position: relative; flex: 1;}
.gnb > li:last-child {padding-right: 40px;}
.gnb > li > a {display: block; position: relative; height: 90px; line-height: 88px; font-size: 21px; font-weight: 500;}
.gnb > li > a::after {content: ''; display: block; position: absolute; left: 50%; bottom: 3px; margin-left: -10px; border-top: 11px solid #652c87; border-left: 10px solid transparent; border-right: 10px solid transparent; opacity: 0; transition: all 0.3s;}
.gnb > li:hover > a {color: #652c87;}
.gnb > li:hover > a::after {bottom: 0; opacity: 1;}
.gnb_depth2 {display: none; position: absolute; left: 0; top: 95px; overflow: hidden; width: calc(100% - 1px); border-top: 1px solid #cbcccb; border-right: 1px solid #cbcccb;}
.gnb_depth2 > li:first-child {padding-top: 15px;}
.gnb_depth2 > li:last-child {padding-bottom: 15px;}
.gnb_depth2 > li > a {display: block; padding: 12px 20px; font-weight: 500;}
.gnb_depth2 > li:hover > a, .gnb_depth2 > li > a:focus {background-color: #f7f7f7;}
.gnb > li.fanfan > a {color: #652c87; font-weight: 700;}
.gnb > li.close {flex-grow: 0; flex-basis: 60px; border-right-width: 0;}
.gnb > li.close .gnb_depth2 {border-right-width: 0;}
.gnb > li.close .gnb_depth2 > li:first-child {padding-top: 0;}
.gnb_close_btn {width: 60px; padding-top: 45px; background: url('../images/common/head_gnb_close_ico.png') center 12px/26px no-repeat; font-size: 14px; text-align: center;}
.gnb_open_btn {position: absolute; right: 0; top: 0; width: 60px; height: 90px; border-left: 1px solid #cbcccb; border-right: 1px solid #cbcccb;}
.gnb_open_btn .bar {display: block; position: absolute; left: 50%; top: 50%; width: 32px; height: 3px; margin-left: -16px; background-color: #64358c;}
.gnb_open_btn .bar.top {margin-top: -14px;}
.gnb_open_btn .bar.mid {margin-top: -2px;}
.gnb_open_btn .bar.btm {margin-top: 10px;}
.gnb_bg {display: none; position: absolute; left: 0; top: 149px; z-index: 1; width: 100%; min-width: 1280px; height: 500px; background-color: #e5e5e5;}
.gnb_bg::after {content: ''; display: block; position: absolute; left: 0; bottom: 0; z-index: 2; width: 100%; height: 4px; background-color: #00a69c;}
.gnb_bg .container {display: block; width: 1083px; height: 100%; right: -99px; background-color: #fff; border-left: 1px solid #cbcccb; border-right: 1px solid #cbcccb;}
.gnb_dim {display: none; position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 8998; background-color: rgba(0,0,0,0.8);}


/********** util_header **********/
.util_header {position: absolute; left: 0; top: 0; width: 100%; background-color: #eee; border-top: 7px solid #7346a9; border-bottom: 1px solid #bfbfbf;}
.util_header .container {padding-right: 5px;}
.head_fam_list {float: left;}
.head_fam_list li {position: relative; float: left; z-index: 1; border-right: 1px solid #bfbfbf;}
.head_fam_list li:first-child {border-left: 1px solid #bfbfbf;}
.head_fam_list li a {display: block; width: 127px; height: 45px; line-height: 45px; text-align: center; transition: all 0.3s;}
.head_fam_list li a .ico {display: inline-block; padding-left: 22px; background: url('../images/common/head_hub_ico.png') 0 center no-repeat;}
.head_fam_list li.hub {border-right-width: 0;}
.head_fam_list li.hub a {background-color: #7346a9; color: #fff; font-weight: 400;}
.head_fam_list li.active a {background-color: #fff;}
.head_fam_list li.active a::after {content: ''; display: block; position: absolute; left: 0; bottom: -1px; width: 100%; height: 1px; background-color: #fff;}
.head_fam_list li:not(.hub) a:hover {background-color: #fff;}
.head_util_menu {float: right; margin-top: 13px;}
.head_util_menu li {position: relative; float: left; margin-right: 34px;}
.head_util_menu li::after {content: ''; display: block; position: absolute; right: -18px; top: 50%; width: 2px; height: 18px; margin-top: -9px; background-color: #979797;}
.head_util_menu li:last-child {margin-right: 0;}
.head_util_menu li:last-child::after {display: none;}
.head_util_menu li a:hover, .head_util_menu li a:focus {text-decoration: underline;}
.contents_container {padding-bottom: 150px;}
#fullpage > .contents_container {padding-bottom: 0;}

/********** footer **********/
.footer {position: absolute; left: 0; bottom: 0; width: 100%; min-width: 1280px; background-color: #404040;}
.footer .container {height: 210px; padding: 35px 0;}
.footer .logo_box {float: left; width: 200px; padding-left: 15px; text-align: right;}
.footer .logo_box img:nth-child(2) {margin-top: 17px;}
.footer .con_box {position: relative; float: right; width: calc(100% - 235px); padding-left: 30px; border-left: 1px solid rgba(255,255,255,0.17);}
.foot_util_menu {overflow: hidden; margin-bottom: 20px;}
.foot_util_menu li {position: relative; float: left; margin-right: 22px;}
.foot_util_menu li::after {content: ''; display: block; position: absolute; right: -12px; top: 50%; width: 2px; height: 13px; margin-top: -5px; background-color: #fff;}
.foot_util_menu li:last-child {margin-right: 0;}
.foot_util_menu li:last-child::after {display: none;}
.foot_util_menu li a {color: #fff; font-weight: 300;}
.foot_util_menu li a:hover, .foot_util_menu li a:focus {text-decoration: underline;}
.foot_util_menu li.em a {color: #0bbbef;}
.footer .info_list {overflow: hidden; margin-bottom: 15px;}
.footer .info_list dt {float: left; margin-right: 10px; color: #FFF;}
.footer .info_list dd {float: left; margin-right: 15px; color: #b5b5b5;}
.footer .info_list .em {margin-top: 10px; color: #fff; font-size: 18px;}
.footer .info_list dt.em { clear: both;}
.footer .copyright {color: #b5b5b5; font-size: 14px; font-weight: 300;}
.foot_fam_list_box {position: absolute; right: 0; top: -8px;}
.foot_fam_list_btn {position: relative; z-index: 1; width: 205px; height: 38px; padding-left: 15px; background-color: #626262; border: 1px solid #959595; color: #fff; font-size: 15px; font-weight: 300; text-align: left;}
.foot_fam_list_btn::after {content: ''; display: block; position: absolute; right: 13px; top: 50%; width: 24px; height: 9px; margin-top: -4px; background: url('../images/common/foot_fam_arr_ico.png') center no-repeat;}
.foot_fam_list_btn.active::after {transform: rotate(180deg);}
.foot_fam_list {display: none; position: absolute; left: 0; bottom: 38px; overflow: auto; width: 100%; max-height: 250px; padding: 6px 0; background-color: #626262; box-shadow: 0px 0px 5px #000;}
.foot_fam_list li a {display: block; padding: 8px 15px; color: #fff; font-size: 14px; font-weight: 300;}
.foot_fam_list li a:hover, .foot_fam_list li a:focus {background-color: #555;}
.foot_sns_list {position: absolute; right: 0; top: 95px; font-size: 0;}
.foot_sns_list li {display: inline-block; margin-right: 10px; vertical-align: middle;}
.foot_sns_list li:last-child {margin-right: 0;}

/* common_layer 임시 */
.common_layer_dim {display: none; position: fixed; left: 130px; top: 65px; right: 0; bottom: 0; z-index: 9000; background-color: rgba(255,255,255,0.5); font-size: 0; text-align: center;}
.common_layer_dim:after {content: ''; display: inline-block; height: 100%; vertical-align: middle;}
.common_layer_pop {display: inline-block; position: relative; width: 980px; padding: 20px 23px 30px; background-color: #fff; border: 1px solid #707070; font-size: 16px; text-align: left; vertical-align: middle;}
.common_layer_tit {margin-bottom: 35px; color: #64358C; font-size: 21px; font-weight: 700;}
.common_layer_pop .bd_con_box {padding: 15px; border: 1px solid #707070;}
.common_layer_pop .btn_box {margin-top: 30px; text-align: right;}
.common_layer_close {position: absolute; right: 10px; top: 17px; width: 30px; height: 30px; background: url('../images/common/layer_close.png') center no-repeat; font-size: 0;}

.common_layer_btn {min-width: 120px; height: 40px; line-height: 40px; margin-left: 15px; background-color: #555; border-radius: 8px; color: #fff; font-weight: 300;}
.common_layer_btn:first-child {margin-left: 0;}
.common_layer_btn.confirm {background-color: #64358C;}
.common_layer_btn.cancel {background-color: #91908E;}

.sub_tit1 {margin-bottom: 15px; font-size: 18px; font-weight: 700;}

/* popup */
.popupwrap {position:relative;}
.popupwrap h1.h1 {width:100%; height:50px; background:#7346a9; position:relative;}
.popupwrap h1.h1 span {margin:15px 0 0 20px; color:#fff; font-size:18px; line-height:50px;font-weight: bold;}
.popupwrap h1.h1 a.close {display:block; width:20px; height:20px; position:absolute; right:16px; top:16px;}
.popupwrap h1.h1 a.close img{width:100%}
.popupwrap .searchbox {margin:0 10px 10px 10px;}
.popupwrap .listtype01 li {margin-left:10px;}
.popupwrap .bigtext {margin:20px 0; font-size:28px; color:#3455b4; text-align:center; line-height:35px;}
.popupwrap .stext {font-size:16px; color:#666; text-align:center; line-height:21px;}
.popupwrap .paging {padding:0;}
.popupwrap .txtbox {display:block; height: 700px; padding: 7px 15px; text-align: center; overflow:scroll; overflow-x:hidden;}
.layer_pop {position: fixed; left:50%; top:50%; background:#fff; border:1px solid #7346a9; z-index:9000;}
.layer_pop img{max-width:100%; max-height: none;}
.only_today {position:absolute;left:10px; bottom:5px;}
.only_today input {margin-right:5px;}
.only_today2 {position:absolute; left:15px; bottom:16px; cursor: pointer;}
.only_today2 input {margin-right:5px;}
.popupwrap .btnarea {position:relative; width:100%; height: 50px; padding: 10px 0;}

/* popup button */
.popupwrap .btntype.closebtn,
.popupwrap .btntype.closebtn a,
.popupwrap .btntype.closebtn button,
.popupwrap .btntype.closebtn input {background:url(//image.fanfanseller.kr/online/common/front/img/subimages/btn_background04.gif) no-repeat; color:#fff;}
.popupwrap .btntype.closebtn {height:27px; padding:0; vertical-align:middle; margin-right:2px; background-position:left top!important; left:45%;}
.popupwrap .btntype.closebtn a,
.popupwrap .btntype.closebtn button,
.popupwrap .btntype.closebtn input{height:27px; padding:0 20px 0 15px; font-size:14px; line-height:24px; background-position:right top!important;}
.popupwrap .btntype.closebtn *:hover,
.popupwrap .btntype.closebtn *:active,
.popupwrap .btntype.closebtn a:focus{ color:#fff; font-weight:bold; text-decoration:underline !important;}

.popupwrap .btntype,
.popupwrap .btntype a,
.popupwrap .btntype button,
.popupwrap .btntype input { position:relative; margin:0; display:-moz-inline-stack; display:inline-block; text-decoration:none !important; border:0; font-size:14px; font-family:inherit;  font-weight:bold;white-space:nowrap; background:url(//image.fanfanseller.kr/online/common/front/img/subimages/btn_background02.gif) no-repeat; overflow:visible; color:#fff; }
.popupwrap .btntype { height:37px; padding:0; vertical-align:middle; margin-right:2px; background-position:left top!important;}
.popupwrap .btntype a,
.popupwrap .btntype button,
.popupwrap .btntype input{ left:6px; vertical-align:top; cursor:pointer;}
.popupwrap .btntype a,
.popupwrap .btntype button,
.popupwrap .btntype input { height:37px; padding:0 26px 0 15px; font-size:14px; line-height:24px; background-position:right top!important;}
.popupwrap .btntype a:hover,
.popupwrap .btntype a:active,
.popupwrap .btntype a:focus{ color:#fff;  font-weight:bold;text-decoration:underline !important;}