@charset "utf-8";

/* Common layout */
#body_wrap { position:relative; width:100%; min-width:320px; overflow:hidden;}
#wrapper { width:100%; min-width:320px; min-height:300px; box-shadow:0 0 20px #000;}
#aside_wrap { position:absolute; right:-275px; top:0; width:275px; background:#b5b5b5; z-index:110;}
.aside_box { background:#ececed;}
.l_mask { position:absolute; left:0; top:0; width:100%; z-index:100; cursor:pointer; background:rgba(0,0,0,.7)}

/* Header */
.head_wrap { position:relative; height:50px; line-height:50px; background: #fff; overflow: hidden; border-bottom: 3px solid #b5b5b5;}
.head_wrap h1 { display:inline-block; padding-left: 10px;}
.head_wrap h1 a { vertical-align: middle;}
.head_wrap h1 a img { height: 40px;}
.head_wrap > a { position:absolute; top:0; display:block; width:50px; height:50px; border-left: 1px solid #b5b5b5;}
.btn_menu { right:0; background:url(../images/btn/btn_menu.png) no-repeat center center;}
.btn_search { right:50px; background:url(../images/btn/btn_search.png) no-repeat center center;}

#search_wrap { position: absolute; left: 0; top: 0; width: 100%; background: #282828; overflow:hidden; height: 50px;}
.search_box { position:relative; padding: 0 70px 0 15px;}
.search_box input { padding: 17px 0 15px; font-size: 17px; color: #fff; background: transparent; border: 0;}
.search_box input::-webkit-input-placeholder { color: #fff;}
.search_box input:-moz-placeholder { color: #fff;}
.search_box input::-moz-placeholder { color: #fff;}

.btn_search_txt { position:absolute; right:35px; top:8px; display:block; width:30px; height:30px; background:url(../images/btn/btn_search_txt.png) no-repeat 0 0;}
.btn_search_close { position:absolute; right:5px; top:8px; display:block; width:30px; height:30px; background:url(../images/btn/btn_search_close.png) no-repeat 0 0;}

.category { position:relative; border-top:1px solid #aaa;}
.category li a { display:block; height:40px; line-height:42px; background:#fff; border-bottom:4px solid #fff; color:#585858; text-align:center;}
.category li a.tap { border-bottom:4px solid #ccc;}
.category li a.on { border-bottom:4px solid #1f977f;}

/* Footer */
#footer { position:relative;}
#footer > div { position:relative; border-top:1px solid #ddd; background:#fff;}
#footer > div > div { position:relative; padding:15px 0; border-bottom:1px solid #ddd; text-align:center;}
#footer > div > div > a { display:inline-block;}
#footer > div > div > a.tap { background:#f4f4f4;}
#footer > div > p { font-size:11px; color:#aaa; text-align:center; line-height:1; padding-top:13px;}
#footer > div > p * { display: block; font-weight: normal;}
#footer > div > h6 { text-align:center; padding-bottom:10px;}

.ver_btn { text-align: center; font-size: 0; padding: 12px 0; border-top: 7px solid #f0f0f0; border-bottom: 1px solid #ddd;}
.ver_btn > li { display: inline-block; margin: 0 4px;}
.ver_btn > li > a { display: block; font-size: 15px; border: 1px solid #999; border-radius: 2px; color: #888; height: 25px; line-height: 26px; padding: 0 15px; background: #fff;}

/*
.foot_nav { padding: 7px 3px 4px; background: #ddd;}
.foot_nav li { margin-bottom: 2px;}
.foot_nav li a { display: table; width: 100%; padding: 0 1px; box-sizing: border-box;}
.foot_nav li a span { display: table-cell; height: 35px; font-size: 13px; vertical-align: middle; text-align: center; color: #777; background: #fff; border-radius: 18px; border: 1px solid #bbb;}
.foot_nav li a.tap span { background: #ccc;}
.foot_nav li a span b { display: block; font-weight: normal; font-size: 10px;}
*/

/* aside */
.search_top { position:relative; background: #fff; height:50px; padding-right:50px; overflow:hidden; border-bottom: 3px solid #b5b5b5;}
.search_top h1 { display:inline-block; margin-top: 8px; margin-left: 8px;}
.search_top h1 img { height: 33px;}
.btn_close { position:absolute; right:10px; top:10px; display:block; width:30px; height:30px; background: url(../images/btn/btn_close.png) no-repeat center center;}

#gnb { position:relative; border-bottom:3px solid #e4e4e4;}
#gnb > li { border-top:1px solid #e4e4e4;}
#gnb > li:first-child { border-top:0;}
#gnb > li > a { position:relative; display:block; padding:13px 45px 11px 15px; color:#222; background:#fff; font-weight: bold; font-size: 16px; transition: background-color .3s ease}
#gnb > li > a > span { position:absolute; right:17px; top:50%; margin-top:-7px; display:block; width:15px; height:15px; background:url(../images/btn/btn_collap.png) no-repeat 0 -15px;}
#gnb > li.active > a { background-color: #e0e0e0;}
#gnb > li.active > a > span { background-position:0 0;}
#gnb > li.solo > a > span { background-position:0 -30px;}
#gnb > li > ul { display:none; padding-left: 23px; background: #f9f9f9 url(../images/bg/bg_paper.png) repeat 0 0; border-top: 1px solid #e1e1e1; background-size: 150px 152px;}
#gnb > li > ul > li { border-top: 1px solid #e1e1e1;}
#gnb > li > ul > li:first-child { border-top: 0;}
#gnb > li > ul > li > a { display:block; padding: 11px 0; color:#666; font-size: 15px; font-weight: bold;}
#gnb > li > ul > li > a.tap { color:#000;}

.btn_pcview { position:relative; display:block; width:108px; height:28px; line-height:28px; color:#4c4c4c; background:#fff; margin:0 auto 10px; font-size:14px; text-align:center; border:1px solid #ddd; font-weight: 100;}

.aside_bot { position:relative; padding:20px 10px 0; background: #f6f6f6;}
.aside_bot > p { color:#aaa; font-size:10px; text-align:center; padding:5px 0 10px;}
.aside_bot > p * { font-weight: normal;}
.aside_bot .ver_btn { padding-top: 0; border: 0;}

.user_wrap { background: #282828; padding: 15px; border-bottom: 3px solid #b5b5b5;}
.ver_btn.white { padding: 0; background: none; border: 0;}
.ver_btn.white > li > a { background: none; border-color: #fff; color: #fff;}
.user_info:after { content: ""; display: block; clear: both;}
.user_info > span { float: left; display: block; font-size: 15px; color: #fff; padding: 3px 0;}
.user_info > a { float: right; display: block; font-size: 15px; color: #fff; padding: 3px 0; padding-left: 25px; background: url(../images/btn/btn_logout.png) no-repeat 0 center;}

.desk_nav { background: #222; padding: 13px 0 15px; border-top: 3px solid #b5b5b5;}
.desk_nav h3 { color: #fff; text-align: center; margin-bottom: 10px;}
.desk_nav ul { text-align: center; font-size: 0;}
.desk_nav ul > li { display: inline-block; margin: 0 4px;}
.desk_nav ul > li > a { display: block; font-size: 15px; border: 1px solid #fff; border-radius: 2px; color: #fff; height: 25px; line-height: 26px; padding: 0 15px; font-weight: bold;}

/* Content */
#container { position:relative; margin: 0 auto; overflow: hidden; clear:both; max-width: 960px;}
#container.col02 { padding: 0; max-width: 960px;}
.con_primary { position:relative;}
.con_secondary { position:relative;}
.con_primary > div, .con_secondary > div { padding:10px 5px;}

/* 광고 배너 */
.banner_wrap { position:relative; overflow:hidden;}
.banner_wrap a { display:block; text-align:center;}
.banner_wrap a.tap { opacity:.9;}
.banner_wrap img { max-width:320px;}

/* Content */
.con_box { position:relative; border-top:1px solid #ddd;}

.tit_box { position:relative; font-weight:normal; line-height:1; padding:15px 15px 10px; background: #fff;}
.tit_box span { color: #000; font-size: 18px; display: inline-block; padding-bottom: 1px; border-bottom: 1px solid #000;}

.btn_share { position: relative;}
.btn_share:after { content: ""; display: block; clear: both;}
.btn_share li { float: left; margin-right: 5px; margin-top: 5px;}
.btn_share li > a { display: block; width: 50px; height: 50px; background: url(../images/btn/btn_share.png) no-repeat 0 0; text-indent: -9999px; overflow: hidden;}
.btn_share li.bs01 > a { background-position: 0 0;}
.btn_share li.bs02 > a { background-position: -55px 0;}
.btn_share li.bs03 > a { background-position: -110px 0;}
.btn_share li.bs04 > a { background-position: 0 -55px;}
.btn_share li.bs05 > a { background-position: -55px -55px;}
.btn_share li.bs06 > a { background-position: -110px -55px;}
.btn_share li.bs07 > a { background-position: 0 -110px;}
.btn_share li.bs08 > a { background-position: -55px -110px;}
.btn_share li.bs09 > a { background-position: -110px -110px;}
.btn_share li > a.tap { opacity: 0.8;}

.share_url_wrap { position: relative; padding-top: 15px;}
.share_url_wrap p { font-size: 12px; text-align: center;}
.share_url_wrap a { position:relative; display:block; padding: 7px 10px 5px; border:1px solid #eaeaea; word-break:break-all; font-size: 13px; line-height: 1;}
.share_url_wrap a.tap { background-color: #eaeaea;}

/* login */
.login_tit { position: relative; background: #fff; text-align: center; margin: 0 -5px;}
.login_tit h1 { padding: 55px 0 25px;}

/* 회원가입 폼 */
.mjf_wrap { position: relative; max-width: 400px; margin: 10px auto; padding: 20px; background: #fff; border-bottom: 2px solid #dedede;}
.mjf_wrap:after { content: ""; display: block; clear: both;}

.mjf_wrap .tit_all { position: relative; font-size: 26px; margin-bottom: 10px;}
.mjf_wrap input[type=text], .mjf_wrap input[type=password], .mjf_wrap input[type=email], .mjf_wrap input[type=tel] { border: 1px solid #cdcdcd; box-sizing: border-box; height: 36px;}
.mjf_wrap input[type=text]:read-only, .mjf_wrap input[type=password]:read-only, .mjf_wrap input[type=email]:read-only, .mjf_wrap input[type=tel]:read-only { background: #ececec !important;}

.mj_form .form_box { position: relative; border-top: 2px solid #222; border-bottom: 2px solid #222; padding: 10px 0; margin-bottom: 15px;}
.mj_form .form_box:after { content: ""; display: block; clear: both;}
.mj_form > p { position: absolute; right: 20px; top: 30px; color: #222; font-size: 12px;}
.mj_form > p b { font-size: 17px; vertical-align: middle; color: #d4253e;}

.mj_form .form_box dl { position: relative; padding: 8px 0;}
.mj_form .form_box dl:after { content: ""; display: block; clear: both;}
.mj_form .form_box dl:first-child { border-top: 0;}
.mj_form .form_box dl dt { font-size: 16px; margin-bottom: 5px;}
.mj_form .form_box dl dt span, .mj_form .form_box dl dt label { color: #222; font-weight: bold; font-size: 16px;}
.mj_form .form_box dl dd { position: relative;}
.mj_form .form_box dl dd .chk_wrap { position: relative; display: block; top: 8px;}

.mj_form .i_label { left: 7px; top: 11px; color:#bbb; line-height: 1; font-size: 14px;}
.mj_form .require:after { content:"*"; font-size: 17px; color: #d4253e; margin-left: 5px;}

.mj_form .flex_wrap { position: relative; padding-right: 80px;}
.mj_form .flex_wrap > a { position: absolute; right: 0; top: 0;}

.mj_form .wid02 { width: 100%;}
.mj_form .wid03 { width: 64px;}
.mj_form .icon_bar { display: inline-block; width: 15px; vertical-align: middle; text-align: center;}

.mj_form .column02:after { content: ""; display: block; clear: both;}
.mj_form .column02 > dl { float: left; width: 50%;}
.mj_form .column02 > dl dd { width: 224px;}

.mj_form input { vertical-align: middle;}
.mj_form .btn_gray { display: inline-block; padding: 10px 0 10px; height: 14px; line-height: 1; background: #808080; color: #fff; vertical-align: middle; border: 1px solid #6c6c6c; font-weight: bold; text-align: center;}
.mj_form .btn_gray:hover { background: #6c6c6c;}

.mj_form .btn_blue { display: inline-block; padding: 13px 35px 19px; height: 45px; line-height: 1; color: #fff; vertical-align: middle; margin-left: 5px; font-size: 18px; transition: .3s all; font-weight: bold; background: #444;}

.mj_form .btn_bic { padding: 14px 35px 17px; font-size: 17px !important; line-height: 1; font-weight: bold; border-radius: 0; border: 0;}

.mj_form .alert_txt * { margin-left: 10px; font-size: 13px !important; color: #d4253e !important;}

.mj_form .mb_list li { position: relative; margin-top: 5px;}
.mj_form .mb_list li:first-child { margin-top: 0;}

.mj_form .float_list { position: relative;}
.mj_form .float_list:after { content: ""; display: block; clear: both;}
.mj_form .float_list li { position: relative; float: left;}
.mj_form .float_list li:before { content: "-"; text-align: center; float: left; display:block; width: 15px; height: 38px; line-height: 38px;}
.mj_form .float_list li:first-child:before { display: none;}
.mj_form .float_list.no_bu li { margin-right: 8px;}
.mj_form .float_list.no_bu li:before { display: none;}

.mj_form .btn_center { position: relative; text-align: center; padding: 10px 0;}

.mj_form .form_box dl .slt { width: 173px;}

.mj_form .rdo_list { padding-top: 9px;}
.mj_form .rdo_list:after { content: ""; display: block; clear: both;}
.mj_form .rdo_list li { float: left; position: relative;  margin-right: 10px;}

.mj_form .f_list { padding-bottom: 3px;}
.mj_form .f_list:after { content: ""; display: block; clear: both;}
.mj_form .f_list > li { float: left; margin-right: 10px;}

/* 회원가입 동의 */
.join_agree .terms_wrap { border-bottom: 1px solid #dedede; margin-bottom: 8px; height: 120px; margin: 0; background: #fff;}
.join_agree .terms_wrap > h3 { height: 35px; line-height: 34px; background: #f0f0f0; font-size: 16px; padding: 0 10px; font-weight: bold;}
.join_agree .terms_wrap .terms_box { height: 65px; overflow-y: scroll;}
.join_agree .terms_wrap iframe { width: 100%; height: 65px;}

.join_agree .terms_agree { position: relative; padding: 10px 0 20px;}

.chk_agree_all { border-top: 2px solid #333; padding-top: 10px;}
.chk_agree_all .chk { font-weight: bold; color: #222;}

.join_agree .box_gray { position: relative; background: #f0f0f0; border: 1px solid #dedede; padding: 15px;}
.join_agree .box_gray p { font-size: 15px; margin-bottom: 15px; color: #333;}
.join_agree .box_gray .p_color { color: #f76a1d;}

.join_agree .user_confirm li { position: relative; margin-bottom: 7px;}
.join_agree .user_confirm li .i_label { left: 10px; top: 12px; font-size: 16px; color:#808080; height: 16px; line-height: 1;}

.join_agree .btn_confirm { width: 100%; padding: 13px 0 13px; color:#fff; font-size: 18px; transition: .3s all ease; font-weight: bold; margin-top: 5px; background: #444;}

/* 아이디 비번찾기 */
.find_wrap .login_form { position: relative; background: #fff; margin-bottom: 20px; padding: 20px 10px; border: 2px solid #dedede;}
.find_wrap .login_form h3 { font-size: 22px; margin-bottom: 5px; vertical-align: bottom; margin-left: 3px;}
.find_wrap .login_form p { font-size: 14px; color: #848484; font-weight: bold; vertical-align: bottom; margin-left: 5px; color: #808080;}

.find_wrap .login_form .login_input { border-top: 1px solid #dedede; margin-top: 15px; padding: 7px 0;}
.find_wrap .login_form .login_input dl { position: relative; margin: 10px 0; padding-left: 65px;}
.find_wrap .login_form .login_input dl dt { position: absolute; left: 5px; top: 7px; font-size: 15px; color: #808080; line-height: 1;}

.find_wrap .login_form .btn_confirm { width: 100%; padding: 13px 0 13px; color:#fff; font-size: 18px; transition: .3s all ease; font-weight: bold; margin-top: 5px; background: #444;}

.m_mr4_001 .btn_submit { background: #333740 !important; border: 0 !important;}

/* mypage */
.my_wrap { position: relative; padding: 25px 15px;}
.my_wrap .page_tit { position:relative; font-size: 26px; font-weight: bold; padding-bottom: 7px; line-height: 1.2; border-bottom: 2px solid #333; color: #000; margin-bottom: 20px;}

.my_pay_wrap { padding-bottom: 30px;}

.my_pay_wrap table th, .my_pay_wrap table td { border: 1px solid #ddd; padding: 10px; font-size: 15px; text-align: center;}
.my_pay_wrap table th { background: #f0f0f0;}
.my_pay_wrap .my_pay_top table { position: relative; border: 2px solid #999; box-shadow: 2px 2px 0 rgba(0,0,0,.1); margin-bottom: 30px;}
.my_pay_wrap .my_pay_top th { height: 45px; width: 70px;}
.my_pay_wrap .my_pay_top td { font-weight: bold;}
.my_pay_wrap .my_pay_top .art_tit { display: block;}
.my_pay_wrap .my_pay_util { font-family: 'BinggraeMelona', sans-serif; letter-spacing: 0;}
.my_pay_wrap .my_pay_util > div { text-align: right; font-weight: normal;}

.my_pay_wrap .ip { display: block; font-family: 'BinggraeMelona', sans-serif; letter-spacing: 0; padding: 2px 7px 3px;; border-radius: 5px; color: #fff;}
.my_pay_wrap .ip.ip01 {border: 1px solid #1dacd1; background: #2abfe5;}
.my_pay_wrap .ip.ip02 {border: 1px solid #203277; background: #223999;}

.my_wrap { position: relative;}

.my_wrap .list_thumb { position:relative; background:#fff;}
.my_wrap .list_thumb > li { position:relative; border-bottom:1px solid #ddd;}
.my_wrap .list_thumb > li:first-child { border-top:0;}
.my_wrap .list_thumb > li > a { position:relative; display:block; padding:15px 0; padding-left:92px; min-height:55px;}
.my_wrap .list_thumb > li > a.tap { color:#666;}
.my_wrap .list_thumb > li > a > h3 { font-weight:400; line-height:1.2; overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; margin-bottom:4px;}
.my_wrap .list_thumb > li > a .thumbs { border: 1px solid #efefef;}

.my_wrap .thumbs { position:absolute; left:0; top:15px; display:block; width:80px; height:55px; overflow:hidden;}
.my_wrap .thumbs img { width:80px;}
.my_wrap .ac_info { line-height: 1;}
.my_wrap .ac_info:after { content:""; display:block; clear:both;}
.my_wrap .ac_info > li { position: relative; display: inline; font-size:13px; color:#808080; line-height: 1;}
.my_wrap .ac_info > li:after { content: "·"; margin: 0 0 0 4px; line-height: 1;}
.my_wrap .ac_info > li:last-child:after { display: none;}
.my_wrap .ac_info > li > span { line-height: inherit;}

/* 결제하기 */
.pay_wrap .ip { position: absolute; right: 15px; top: 25px; display: block; font-family: 'BinggraeMelona', sans-serif; letter-spacing: 0; padding: 4px 8px 5px;; border-radius: 5px; color: #fff; font-size: 15px;}
.pay_wrap .ip.ip01 {border: 1px solid #1dacd1; background: #2abfe5;}
.pay_wrap .ip.ip02 {border: 1px solid #203277; background: #223999;}

.pay_terms .terms_wrap { margin-left: 0; margin-right: 0;}
.pay_terms .terms_agree { padding-left: 0; padding-right: 0;}
.pay_terms .chk { color: #222;}
.pay_terms .chk { font-weight: bold;}

.pay_imp_txt { color: #ef5050; font-size: 15px;}
.pay_imp_txt > span { position: relative; top: -1px; display: inline-block; width: 23px; height: 23px; line-height: 23px; border: 2px solid #ef5050; border-radius: 50%; vertical-align: middle; font-size: 16px; font-weight: 400; font-family: 'BinggraeMelona', sans-serif; margin-right: 10px;}

.my_pay_wrap .my_pay_util .price { position: relative; color: #0237bf; display: inline-block;}
.my_pay_wrap .my_pay_util .price:after { position: absolute; left: 0; bottom: 0; content: ""; display: block; width: 100%; height: 12px; background: #ffefa4; z-index: 1;}
.my_pay_wrap .my_pay_util .price span { position: relative; font-size: 24px; letter-spacing: 0; z-index: 2;}

.pay_summary { border: 5px solid #71b0ee; padding: 15px; margin-bottom: 15px; border-radius: 12px; background: url(/data/images/star/bg_pay.png) no-repeat right 5px; background-size: 65px 60px;}
.pay_summary dt { border-bottom: 1px solid #aaa; padding-bottom: 15px; align-items: flex-end;}
.pay_summary dt h4 { font-size: 18px; color: #000; font-family: 'BinggraeMelona', sans-serif; letter-spacing: 0;}
.pay_summary dt h4 b { font-size: 14px; color: #666; font-weight: normal; letter-spacing: 0;}
.pay_summary dt p { font-size: 14px; color: #ef5050; margin-top: 5px;}

.pay_btn_wrap { text-align: center; margin: 15px 0 40px;}
.pay_btn_wrap > * { display: inline-block; padding: 12px 0 14px; background: #999; box-sizing: border-box; border: 1px solid #ddd; font-size: 16px; width: 46%; margin: 0 3px; color: #fff; border-radius: 5px; transition: all .3s ease; font-family: 'BinggraeMelona', sans-serif; letter-spacing: 0;}
.pay_btn_wrap button { background: #223999;}
.pay_btn_wrap > *:hover { box-shadow: 0 2px 10px rgba(0,0,0,.3); transform: translateY(-2px);}

.chk_btn_s { margin: 0 -5px 5px;}
.chk_btn_s:after { content: ""; display: block; clear: both;}
.chk_btn_s li { float: left;}
.chk_btn_s.cbs04 li { width: 25%;}
.chk_btn_s.cbs02 li { width: 50%;}
.chk_btn_s li a { position: relative; display: block; padding: 10px 0; text-align: center; font-weight: bold; font-size: 17px; color: #7c7c7c; border: 3px solid #ced2da; margin: 0 0 0 -3px; z-index: 1; transition: all .3s ease; background: #fff; font-family: 'BinggraeMelona', sans-serif; letter-spacing: 0; border-radius: 10px; margin: 5px;}
.chk_btn_s li a span { display: block; font-size: 14px; letter-spacing: 0; margin-top: 3px;}
.chk_btn_s li a:hover { color: #222; background: #f7f7f7;}
.chk_btn_s li a.active { border-color: #223999; background: #223999; color: #fff; z-index: 2; box-shadow: none;}

.my_wrap .terms_box table { border-top: 2px solid #333; margin: 13px 0; font-size: 14px;}
.my_wrap .terms_box table th,.terms_box table td { padding: 5px 10px; text-align: left; border-bottom: 1px solid #dedede; border-left: 1px solid #dedede;}
.my_wrap .terms_box table th:first-child,.terms_ct table td:first-child { border-left: 0;}
.my_wrap .terms_box table th { background: #f0f0f0;}

.my_wrap .terms_wrap > div { height: 100px;}

.mobile_ad { display: flex; justify-content: center;}