@charset "utf-8";


.main_transparency { width: 100%; height: 100%; position: fixed; top: 0; left: 0; background-color: rgba(0,0,0,0.03); z-index: 120; }
.main_logo { display: block; width: 30%; margin: 0 auto; padding-top: 5%; position: relative; z-index: 150; }
.main_contents { position: fixed; top: 0; left: 0; z-index: 100; width: 100%; height: 100%; text-align: center; overflow: auto; }
.main_contents:before { display:inline-block; width: 0; height: 100%; position: relative; vertical-align: middle; overflow:hidden; content: ""; font-size:0; }
.main_img { display: inline-block; width: 58%; margin-top: -35px; position: relative; vertical-align: middle; }
.mycoupon_btn { width: 40px; padding: 5px; position: absolute; top: 15px; right: 15px; z-index: 200; }
.main_text { width: 100%; margin-top: 5%; text-align: center; color: #8B8B8B; font-size: 0.950rem; line-height: 1.2; position: relative; z-index: 150; }
.main_btn_group { width: 100%; position: absolute; bottom: 140px; left: 0; font-size: 0; z-index: 200; }
.main_btn_inner { width: 80%; margin: 0 auto; }
.main_btn { display: inline-block; width: 48%; padding: 10px 0; border: 1px solid rgba(0,0,0,0.8); background-color: #f7f7f7; border-radius: 5px; }
.main_left_btn { margin-right: 4%; }
.main_btn > p { text-align: center; font-size: 0.90rem; }
.mycoupon_bar { display: table; width: 100%; height: 60px; position: fixed; bottom: 0; left: 0; background-color: #FFF; z-index: 120; }
.mycoupon_bar_inner { display: table-cell; vertical-align: middle; text-align: center; }
.mycoupon_bar_inner > p { display: inline-block; padding-right: 25px; vertical-align: middle; color: #202020;
			background-image: url(../images/icon_tag.png); background-repeat: no-repeat; background-size: contain; background-position: right center; }

.banner_wrap {
	width: 100%; position: fixed; left: 0; bottom: 0; z-index: 200;
	/* 18.03.22 수정 */
 }

/* voucher */
.box_banner {
	display: table;
	width: 100%;position: relative; z-index: 100;background-repeat: no-repeat;background-size: cover; background-position: center center;
	/* 18.03.22 수정 */
	height:89px;box-sizing: border-box;border:3px solid #000000;

}
/* 18.03.22 수정 */
.banner_left {
	float: left;
	width: 50%;
	background-image: url(../images/banner-type-1-left.jpg);
}
.banner_right {
	float: left;
	width: 50%;
	background-image: url(../images/banner-type-1-right.jpg);
}

.banner_inner_text {
	/* 18.03.22 수정 */
	height:100%;
	position:relative;
	left:14%;
	display:table-cell;
	vertical-align: middle;
}
.banner_right > .banner_inner_text {
	left:37%;
}

.banner_inner_text > p {
	line-height: 15px;
	font-size: 12px;
	text-align: left;
}

.banner_inner_text > p > span {
	display: block; color: #FFF700;
}
.banner_inner_text > p > .event_type {
	display: block; color: #fff;
}

.banner_type_2 {
	background-image: url(../images/banner-type-2.jpg);
}
.banner_type_3 {
	background-image: url(../images/banner-type-3.jpg);
}
 .banner_type_3 .banner_inner_text {
 	left:49%;
 }

.tab_container {
	width: 100%;
	 height: 100%;
	/*padding-top: 180px; position: absolute; top: 0; left: 0; */
	overflow: hidden;
}
.tab_area { width: 100%; height: 60px; z-index: 100; font-size: 0; }
.tab_area:after { content: ""; display: block; clear: both; }
.left_tab, .right_tab { display: table; width: 50%; height: 100%; position: relative; line-height: 60px; text-align: center; float: left; background-color: #FFF; }
.left_tab.on > span, .right_tab.on > span { color: #E30101; font-weight: bold;}
.left_tab > span, .right_tab > span { display: table-cell; vertical-align: middle; font-size: 0.950rem; color: #B2B2B2; }
/* .left_tab { font-weight: bold; } */
.left_tab:after { content: ""; display: block; width: 1px; height: 22px; background-color: #DEDEDE; position: absolute; top: 50%; right: 0; margin-top: -11px; }
.tab_list { width: 100%; height: 100%; padding-bottom: 70px; overflow-y: auto; background-color: #EFEFEF; }
.none_registered { display: none; width: 100%; position: absolute; top: 30px; left: 0; }
.none_registered.on { display: block; }
.none_registered > img { display: block; width: 70%; margin: 0 auto; }
.coupon_content { display: none; width: 100%; position: relative; }
.coupon_content.on { display: block; }
.coupon_list { padding: 20px; margin-top: 10px; font-size: 0; background-color: #FFF; position: relative; min-height: 100px; width: 100%; display: table}
.coupon_list:last-child { margin-bottom: 80px; }
.cpn_book_inner { background-color: #EFEFEF;}
.cpn_book_inner .coupon_list:last-child { margin-bottom: 0; }
.coupon_list_inner { padding: 20px 0; }
.coupon_list_inner.off { opacity: 0.6; }
.coupon_list > .mark { display: none; width: 60px; height: 60px; position: absolute; top: 50%; right: 15px; margin-top: -30px; }
.coupon_list > .mark.active { display: block; }
.coupon_img, .coupon_desc { display: inline-block; vertical-align: middle; }
.coupon_img { width: 82px; height: 82px; position: absolute; top: 50%; left: 20px; margin-top: -41px;
			background-image: url(../images/img_cpnDetailType1.png); background-repeat: no-repeat;
			background-size: cover; background-position: center center; }
/*.coupon_img > img { width: 100%; }*/
.coupon_desc { width: 100%; padding-left: 100px; display: table-cell}
.cpn_desc_name { font-size: 1rem; color: #000; }
.cpn_desc_price { font-size: 0.975rem; color: #E30101; padding: 10px 0 5px 0; }
.cpn_desc_expiration_date { font-size: 0.975rem; color: #847A76; }
.cpn_desc_expiration_date > span { display: block; line-height: 1.3; }
.cpn_discount_type { display: none; }
.discount_label { display: none; position: absolute; top: 0; right: 0; }
.discount_label > img { display: block; width: 70%; margin: 0 auto; }
.discount_label > p { width: 100%; position: absolute; top: 25px; left: 0; text-align: center; font-size: 1rem; font-weight: bold; color: #000; }
.discount_label.on { display: block; }
.cpn_desc_price.on .cpn_discount_type { display: inline-block; }
.cpn_desc_price.on { color: #95989A; }
.cpn_desc_price.on .cpn_price { font-size: 0.90rem; text-decoration: line-through; }
.cpn_discount_price { font-size: 1.2rem; color: #E30101; }
.fix_area { position: fixed; right: 5%; bottom: 2%; z-index: 200; }
.fix_area > .icon_label { width: 110px; margin-right: -15px; }
.fix_area > .icon_coupon { width: 75px; padding: 5px; }
.fix_area > img { vertical-align: middle; }

/* voucher Detail */
.detail_img { width: 100%; position: relative; }
.detail_img > img { width: 100%; max-height: 166px; overflow: hidden; }
.detail_info { padding: 10px 20px; margin-bottom: 10px; position: relative; background-color: #FFF; }
.detail_info > .cpn_desc_name { padding: 10px 0 15px 0; }
.detail_desc { background-color: #FFF; padding: 20px 20px 80px 20px; }

.detail_desc { background-color: #FFF; padding: 20px 20px 80px 20px; }

.cpn_price_area { margin-top: 15px; border-top: 1px solid #95989A; }
.cpn_price_area > .cpn_desc_price { text-align: right; }
.detail_desc_text { padding: 10px 0 20px 0; }
.detail_desc_text > strong { display: block; font-size: 0.950rem; padding-bottom: 10px; }
.detail_desc_text > small { display: block; font-size: 0.875rem; }
.common_btn_bar { display: none; }
.common_btn_bar.show { display: block; }
.common_btn_bar_inner { display: table; width: 100%; height: 60px; position: fixed; bottom: 0; left: 0; font-size: 0; border: 5px solid #202020; background-color: #FFF700; }
.common_btn_bar_inner > .left_btn, .common_btn_bar_inner > .right_btn { display: table-cell; position: relative; vertical-align: middle; text-align: center; width: 50%; }
.common_btn_bar_inner > .left_btn:after { content: ""; width: 1px; height: 20px; background-color: #95989A; position: absolute; top: 50%; right: 0; margin-top: -10px; }
.common_btn_bar_inner > .left_btn > span, .common_btn_bar_inner > .right_btn > span { display: block; font-size: 1rem; font-weight: bold; color: #000; }
.common_btn_bar_inner > .one_btn { width: 100%; display: table-cell; vertical-align: middle; text-align: center; }
.common_btn_bar_inner > .one_btn > span { display: block; font-size: 1rem; font-weight: bold; color: #000; }
.success_btn {opacity: 0.7;}

/* voucher Purchase */
.container_contents_inner { padding: 0 20px 30px 20px; background-color: #EFEFEF; }
.content_title { display: block; margin: 5% 0; }
.content_group { padding-top: 30px; }
.content_group > .cpn_price_area { width: 100%; margin: 0 auto; padding: 8px 0; border-top: none; border-bottom: 1px solid #95989A; }
.content_group > .detail_img { width: 80%; margin: 0 auto; }

/* selec box */
.select_box_wrap { margin: 0 auto; float: left; position: relative; }
.select_box_wrap:after { content: ""; display: block; clear: both; }
.select_box_wrap_inner { position: relative; }
.selected_box { display: table; position: relative; width: 70px; height: 40px; border: 1px solid #B2B2B2; }
.selected_box_inner { display: table-cell; vertical-align: middle; text-align: center; }
.selected_val { display: inline-block; color: #E30101; }
.select_icon { display: inline-block; width: 12px; height: 12px; vertical-align: middle;
			background-image: url(../images/icon_selecboxArrow.png); background-repeat: no-repeat; background-size: 200%; background-position: left;}
.hide_selecbox { width: 70px; height: 40px; position: absolute; top: 0; right: 0; opacity: 0; background-color: #EFEFEF; outline: 0; text-align: center; }
.hide_selecbox > option { font-size: 1rem; }
.name { margin-bottom: 15px; }
.name, .email_addr { width: 100%; padding: 10px; border: 1px solid #B2B2B2; background-color: #FFF; }
.text_content { width: 100%; padding: 30px 20px 80px 20px; background-color: #FFF; }
.text_content > p { vertical-align: middle; text-align: center; font-size: 0.875rem; color: #847A76; }
.text_content > p > span { display: inline-block; color: #E30101; text-decoration: underline; }
.text_content > small { display: block; padding-top: 30px; font-size: 0.80rem; color: #847A76; }

/* voucher Success , voucher Failed  */
.payment_result_wrap { width: 100%; height: 100%; background-color: #202020; position: absolute; top: 0; left: 0; }
.payment_result_wrap > img { width: 100%; }
.payment_result { width: 100%; padding: 30px 5px; position: absolute; bottom: 60px; left: 0; background-color: #202020; }
.payment_result > strong { display: block; font-size: 1.3rem; font-weight: bold; color: #FFF700; text-align: center; line-height: 2; }
.payment_result > small { display: block; font-size: 0.850rem; font-weight: normal; color: #DBDBDB; text-align: center; line-height: 1.2; }

/* voucher Mycoupon detail */
.stamp_area { padding: 10px 0; position: relative; background-color: #EFEFEF; }
.stamp_area.active .before_stamp { display: none; }
.stamp_area.active .after_stamp { display: block; }
.before_stamp { padding: 10px 0; text-align: center; font-size: 0; }
.before_stamp > p > img { width: 15%; margin-right: 5px; vertical-align: middle; }
.before_stamp > p { width: 100%; display: inline-block; vertical-align: middle; color: #202020; font-size: 1rem; }
.after_stamp { display: none; padding: 20px; background-color: #FFF; }
.after_stamp > p { line-height: 1.3; color: #847A76; }
.coupon_detail_desc { padding-bottom: 20px; }

/* voucher Number */

.background_img_type {
	/* 08.03.22 수정 */
	background-repeat: no-repeat; background-size: cover; background-position: center center;
	background-image: url(../images/background_img_3.jpg);
}
.event_title { display: block; color: #FFF700; font-size: 1.7rem; text-align: center; line-height: 1.3; }
.event_subtitle {
	color: #FFF700;
	text-align: center;
	font-size: 15px;
}
.event_img {
	display: block; margin: 10% auto 2%;
	/* 18.03.22 수정 */
	width: 54%;
}
.benefits_area { width: 70%; margin: 5% auto; }

.benefits_area > p {
	padding: 10px 0 20px 0; color: #FFF;
	/* 18.03.22 수정 */
}

.benefits_area li { width: 100%; font-size: 0; }
.benefits_area li span {
	display: inline-block; color: #FFF; vertical-align: top;
	/* 18.03.22 수정 */
}
.benefit_num { width: 8%; }
.benefit_content { width: 92%; }
.input_num_area { width: 70%; margin: 5% auto; border: 4px solid #202020; font-size: 0; }
.input_num_area input[type="number"] { display: inline-block; width: 70%; height: 40px; padding-left: 5px; vertical-align: middle; font-size: 0.950rem; background-color: #FFF; border-right: 4px solid #202020; }
.input_num_area .submit_btn { display: inline-block; width: 30%; height: 40px; vertical-align: middle; background-color: #FFF700; }
.input_num_area .submit_btn > p { text-align: center; line-height: 40px; color: #000; font-size: 0.950rem; font-weight: bold; }
.foot_logo_area { width: 100%; position: absolute; bottom: 0; }
.foot_logo { display: block; width: 45%; margin: 0 auto; text-align: center; padding-bottom: 10px; }

/* voucher 2 */
.slide_group { width: 100%; opacity: 0; }
.slide_group:focus { outline: none; }
.slied_inner_img { width: 100%; }
.slide_desc { padding: 30px; }
.slide_desc > strong { display: block; font-size: 1rem; color: #000; }
.slide_desc > small { display: block; font-size: 0.875rem; color: #847A76; line-height: 1.3; }
.slide_desc > small:before { content: ""; display: block; width: 25px; height: 1px; margin: 5% 0; background-color: #202020; }
.slick-track:focus, .slick-slide:focus { outline: none; }

.detail_desc_tpye { padding-left: 0; padding-right: 0; background-color: #EFEFEF; padding-top: 10px; }
.detail_desc_text_type { padding: 20px; background-color: #FFF; }


/* 10.03.22 추가 */
.event_popup {
	position:fixed;
	top:0;left:0;
	width:100%;height:100%;
	z-index: 1000;
}
.event_popup .bg_shadow {
	width:100%;height:100%;
	background-color: rgba(0,0,0,.6);
    display: flex;
    align-items: center;
    justify-content: center;
}

.event_popup .modal_box {
	width:85%;
	background-color:#fff;
    display: flex;
	flex-direction: column;
	align-items: center;
}

.event_popup .title {
	font-weight: bold;
	font-size: 22px;
	padding:16px 0 9px;
}

.event_popup .event_img {
	width:84%;min-height:238px;
	margin-bottom:50px;
}

.event_popup .btn_modal {
	width:100%;height:60px;line-height: 60px;
	text-align: center;
	font-size: 1rem;font-weight: bold;
	background-color: #FFF700;
	box-sizing: border-box;
	border:5px solid #202020;
}


@media only screen and (min-width: 320px) {
	/* 18.03.22 수정 */
 .box_banner { height:89px; }
 .banner_right  p {font-size:10px;}
 .banner_type_2 p {font-size: 18px;line-height: 24px;}
 .banner_type_3 p {font-size: 14px;line-height: 19px;}
 .event_subtitle {font-size: 15px;}
 .benefits_area p, .benefits_area span {font-size:12px;line-height: 16px;}
}
@media only screen and (min-width: 360px) {
 .main_img { width: 60%; }
 	/* 18.03.22 수정 */
 .box_banner { height:100px; }
 .banner_inner_text  p { font-size: 13px; line-height: 17px;}
 .banner_type_2 p {font-size: 20px;line-height: 27px;}
 .banner_type_3 p {font-size: 16px;line-height: 21px;}
 .event_subtitle {font-size: 16px;}
}
@media only screen and (min-width: 375px) {
 .main_img { width: 65%; }
 	/* 18.03.22 수정 */
 .box_banner { height:104px; }
 .banner_right  p {font-size:12px;}
 .banner_type_2 p {font-size: 21px;line-height: 28px;}
 .banner_type_3 p {font-size: 17px;line-height: 22px;}
 .benefits_area p, .benefits_area span {font-size:13px;line-height: 17px;}

}
@media only screen and (min-width: 414px) {
 .main_logo { padding-top: 10%; }
 	/* 18.03.22 수정 */
 .box_banner { height:115px; }
 .banner_inner_text > p { font-size: 14px; line-height:19px;}
 .banner_right  p {font-size:13px;}
 .banner_type_2 p {font-size: 23px;line-height: 31px;}
 .banner_type_3 p {font-size: 18px;line-height: 24px;}
 .event_subtitle {font-size: 17px;}
 .benefits_area p, .benefits_area span {font-size:13px;line-height: 18px;}
}