@charset "utf-8";

* { box-sizing: border-box; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;}

html, body {margin: 0; padding: 0; width: 100%; height: 100%; font-family: 'Noto Sans KR', sans-serif; color: #333333; font-weight: 400; font-size: 10px;
    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; line-height: normal; }


body.off {height: 100vh; overflow: hidden;}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

a {outline: none !important;}

input[type="password"]::-ms-reveal {
    display: none;
}

input.password {
    font-family: 'pass', 'Noto Sans KR', sans-serif;
    font-size: 1.8rem;
}

input.password::-webkit-input-placeholder {
    transform: scale(1);
    transform-origin: 0 100%;
}

input.password::-moz-placeholder {
    font-size: 1.4rem;
    opacity: 1;
}

input.password:-ms-input-placeholder {
    font-size: 1.4rem;
    font-family: 'pass', 'Noto Sans KR', sans-serif;
}

button:disabled {background: #e5e5e5 !important; color: #c8c8c8 !important;}

.mgt20 {margin-top: 20px !important;}

.mgt00 {margin-top: 0 !important;}

.mgl00 {margin-left: 0 !important;}

.pdt00 {padding-top: 0 !important;}

.ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* 말줄임 적용 */
}

/* IE의 경우 */
input::-ms-clear,
input::-ms-reveal {display: none;}

/* 크롬의 경우 */
input::-webkit-search-decoration,
input::-webkit-search-cancel-button,
input::-webkit-search-results-button,
input::-webkit-search-results-decoration {display: none;}

body.off {width: 100%; height: 100vh; overflow: hidden;}

.t_en {font-family: 'Montserrat', sans-serif !important;}


header {width: 100%; position: fixed; top: 0; left: 0; text-align: center; background: #f5f5f5; z-index: 10;}

header .top_header {width: 100%; position: relative; height: 4.5rem; display: table;}

header .top_header > h1 {font-size: 1.5rem; text-align: center; display: table-cell; width: 100%; vertical-align: middle; font-weight: 700;}

header .top_header button.btn_close {display: inline-block; position: absolute; right: 1.5rem; top: 1.5rem; width: 1.5rem; height: 1.5rem; background: url(../images/btn_close.png) no-repeat; background-size: 100%;}

header .gnb {width: 100%;}

header .gnb > ul {width: 100%; display: table; border-bottom: 1px solid #d5d5d5;}

header .gnb > ul > li {width: 50%; display: table-cell; text-align: center;}

header .gnb > ul > li > a {display: inline-block; line-height: 49px; border-bottom: 2px solid #f5f5f5; font-size: 1.5rem; color: rgba(51, 51, 51, 0.5); font-weight: 700; padding: 0 1rem;}

header .gnb > ul > li.active > a {border-bottom: 2px solid #23b9ba; color: rgba(51, 51, 51, 1);}

header.sub_header {width: 100%; height: auto !important; position: fixed;}

header.sub_header .top_header {height: 5.4rem;}

header.sub_header .top_header > h1 {font-size: 1.5rem; text-align: center; display: table-cell; width: 100%; vertical-align: middle; font-weight: 700;}

header.sub_header .top_header > button.btn_prev {width: 1rem; height: 1.8rem; display: inline-block; position: absolute; left: 1.5rem; top: 1.8rem; background: url(../images/btn_prev.png) no-repeat; background-size: 1rem; }


#container {width: 100%; padding-top: 9.7rem; min-height: calc(100vh - 19rem); background: #f5f5f5;}
#container h2.notice-box {padding: 10px 0 17px; text-align: center; font-weight: 700; font-size: 0.9rem; color: #888; background: #f5f5f5;}

.list_type_block {width: 100%; background: #f5f5f5;}

.list_type_block > h2 {padding: 16px 0; text-align: center; font-weight: 700; font-size: 1.3rem; color: #555555; background: #fff;}

.list_type_block > ul {width: 100%; padding: 0.4rem 1rem 1.5rem; font-size: 0;}

.list_type_block > ul > li {display: inline-block; width: calc(50% - 0.3rem); vertical-align: top; margin-top: 0.6rem; }

.list_type_block > ul > li:nth-child(2n) {margin-left: 0.6rem;}

.list_type_block > ul > li .img_area {width: 100%; background: #fff; position: relative;}

.list_type_block > ul > li .img_area > img {width: 100%;}

.list_type_block > ul > li .img_area > span {display: none;}

.list_type_block > ul > li.sold_out .img_area > span {width: 100%;background: rgba(0, 0, 0, 0.5);height: 100%;position: absolute;z-index: 5;left: 0;top: 0;display: flex;align-items: center;}

.list_type_block > ul > li.sold_out .img_area > span > i {display: table-cell; vertical-align: middle; width: 100%; text-align: center; color: #fff; font-size: 1.5rem;}

.list_type_block > ul > li .p_info_area {border-top: 1px solid #f0f0f0; width: 100%; background: #fff; padding: 1.5rem 1rem;}

.list_type_block > ul > li .p_info_area > h3 {font-size: 1.3rem; font-weight: 700; text-align: left;}

.list_type_block > ul > li .p_info_area > p {font-size: 1.2rem; line-height: 1.7rem; padding-top: 0.4rem; height: 3.8rem; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}

.list_type_block > ul > li .p_info_area .sele_text {width: 100%; padding-top: 1.2rem; font-size: 0;}

.list_type_block > ul > li .p_info_area .sele_text > span {display: inline-block; margin-left: 0.3rem;}

.list_type_block > ul > li .p_info_area .sele_text > span:first-child {font-size: 1.1rem; font-weight: 700; color: #f15921; margin-left: 0;}

.list_type_block > ul > li .p_info_area .sele_text > span > b {font-size: 1.1rem; color: #888888; display: inline-block; text-decoration: line-through;}

.list_type_block > ul > li .p_info_area .sele_text > span > i {font-size: 0.75rem; color: #888888; display: inline-block;}

.list_type_block > ul > li .p_info_area .price_text {padding-top: 0.5rem; font-size: 0;}

.list_type_block > ul > li .p_info_area .price_text > b {font-size: 1.7rem; font-weight: 800; color: #f15921;}

.list_type_block > ul > li .p_info_area .price_text > i {font-size: 1.2rem; color: #f15921; padding-left: 0.5rem;}


.list_type_card {width: 100%; background: #f5f5f5;}

.list_type_card > h2 {padding: 16px 0; text-align: center; font-weight: 700; font-size: 1.3rem; color: #555555; background: #fff;}

.list_type_card > ul {width: 100%; padding: 1rem; font-size: 0;}

.list_type_card > ul > li {display: table; width: 100%; margin-top: 0.6rem; background: #fff;}

.list_type_card > ul > li:first-child {margin-top: 0;}

.list_type_card > ul > li .img_area {width: 37%; display: table-cell; vertical-align: middle; position: relative;}

.list_type_card > ul > li .img_area > img {width: 100%;}

.list_type_card > ul > li .img_area > span {display: none;}

.list_type_card > ul > li.sold_out .img_area > span {width: 100%; background: rgba(0, 0, 0, 0.5); height: 100%; position: absolute; z-index: 5; left: 0; top: 0; display: table;}

.list_type_card > ul > li.sold_out .img_area > span > i {display: table-cell; vertical-align: middle; width: 100%; text-align: center; color: #fff; font-size: 1.5rem;}

.list_type_card > ul > li .p_info_area {width: 63%; display: table-cell; vertical-align: middle; padding: 0 1.5rem 0 1rem;}

.list_type_card > ul > li .p_info_area > h3 {font-size: 1.3rem; font-weight: 700;}

.list_type_card > ul > li .p_info_area > p {font-size: 1.2rem; line-height: 1.7rem; padding-top: 0.4rem; height: 3.8rem; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}

.list_none {width: 100%; background: #f5f5f5;}

.list_none > h2 {padding: 16px 0; text-align: center; font-weight: 700; font-size: 1.3rem; color: #555555; background: #fff;}

.list_none .none_text {width: 100%; padding: 5rem 0; text-align: center;}

.list_none .none_text > h3 {font-size: 1.8rem;}

.list_none .none_text > p {font-size: 1.35rem; padding-top: 1.4rem;}

.list_none .none_img {padding: 1rem;}

.list_none .none_img > img {width: 100%;}


#container.sub_container {width: 100%; padding-top: 5.4rem; min-height: 100vh;}

#container.coupon_box {width: 100%; padding-top: 13.7rem; background: #f5f5f5;}

#container.coupon_box .coopon_info_box {padding: 12px;}

#container.coupon_box .coopon_info_box > p {
    font-size: 12px;
    color: #888888;
    padding-bottom: 10px;
    padding-left: 16px;
    text-indent: -16px;
}

.product_detail {padding: 3.6rem 1.5rem 19rem;}

.product_detail > h3 {font-size: 2rem; font-weight: 300;}

.product_detail > h4 {padding-top: 3rem; font-size: 1.4rem; font-weight: 700;}

.product_detail .p_img {width: 100%; position: relative; margin-top: 2.5rem;}

.product_detail .p_img > img {width: 100%;}

.product_detail .p_img > span {width: 5.2rem; height: 5.2rem; border-radius: 2.6rem; background: #26b7bc; position: absolute; left: 0; top: 0; }

.product_detail .p_img > span > b {font-size: 1.7rem; font-weight: 700; line-height: 1; display: block; text-align: center; color: #fff; padding-top: 1rem;}

.product_detail .p_img > span > i {font-size: 1.3rem; line-height: 1; display: block; text-align: center; color: #fff;}

.product_detail .p_price_ar {padding-top: 1.5rem; font-size: 0;}

.product_detail .p_price_ar > span {display: inline-block; font-size: 2.5rem; color: #f15921; padding-left: 0.8rem; vertical-align: baseline;}

.product_detail .p_price_ar > span:first-child {padding-left: 0;}

.product_detail .p_price_ar > span > b {font-size: 3.5rem; font-weight: 800; color: #f15921; vertical-align: baseline;}

.product_detail .p_price_ar > span > em {font-size: 1.3rem; color: #888888; text-decoration: line-through; vertical-align: baseline;}

.product_detail .p_price_ar > span > i {font-size: 0.9rem; vertical-align: baseline; color: #888888; }

.product_detail > p {font-size: 1.4rem; padding-top: 1.2rem;}

.product_detail > p > b {color: #f15921; font-weight: 700;}

.product_detail .product_info {padding-top: 2rem;}

.product_detail .product_info > ul {width: 100%; border-top: 1px solid #f4f4f4;}

.product_detail .product_info > ul > li {width: 100%; padding-top: 2rem;}

.product_detail .product_info > ul > li > h5 {font-size: 1.3rem;}

.product_detail .product_info > ul > li > p {font-size: 1.3rem; color: #666666; padding-top: 0.4rem;}


.btn_area_03 {width: 100%; position: fixed; bottom: 0;}

.btn_area_03 div.purchase_quantity {display: none; padding: 5px 15px 0; background: #fff;}

.btn_area_03 div.purchase_quantity .purchase_quantity_ar {width: 100%; display: table;}

.btn_area_03 div.purchase_quantity .purchase_quantity_ar > input {border: 1px solid #ededed; font-size: 1.6rem;}

.btn_area_03 div.purchase_quantity .purchase_quantity_ar .num {height: 50px; text-align: center; display: table-cell;}

.btn_area_03 div.purchase_quantity .purchase_quantity_ar .btn_min {display: table-cell; width: 40px; text-align: left; vertical-align: middle;}

.btn_area_03 div.purchase_quantity .purchase_quantity_ar .btn_plus {display: table-cell; width: 40px; text-align: right; vertical-align: middle;}

.btn_area_03 div.purchase_quantity .purchase_quantity_ar .btn_min img, .btn_area_03 div.purchase_quantity .purchase_quantity_ar .btn_plus img {width: 30px;}

.btn_area_03 div.purchase_quantity .extended_price {text-align: center; padding: 10px 0; font-size: 14px;}

.btn_area_03 div.purchase_quantity .extended_price strong {font-family: 'Montserrat', sans-serif; font-weight: 900; font-size: 22px;}

.btn_area_03 a {width: 100%; height: 23px; display: inline-block; background: url(../images/btna_up.png) top center no-repeat; font-size: 0;}

.btn_area_03 a.on {background: url(../images/btna_down.png) top center no-repeat;}

.btn_area_03 .btn_box01 {width: 100%; display: table; padding-top: 5px; background: #fff;}

.btn_area_03 .btn_box01 > button {width: 50%; display: table-cell; font-size: 14px; font-weight: 700; color: #FFF; height: 50px;}

.btn_area_03 .btn_box01 > button.grey_btn {background: #888888;}

.btn_area_03 .btn_box01 > button.green_btn {background: #23b8bc;}

.btn_area_03 .btn_box01 > button.green_Fbtn {background: #23b8bc; width: 100%;}


/*구매하기 purchase*/
.purchase_area {padding: 0 10px;}

.purchase_area .complete {padding: 0 10px; padding: 70px 0 100px; background: url(../images/icon_complete.png) center 125px no-repeat; background-size: 55px; font-size: 22px; text-align: center;}

.purchase_area .fail {padding: 0 10px; padding: 164px 0 100px; background: url(../images/icon_fail.png) center 100px no-repeat; background-size: 55px; font-size: 22px; text-align: center;}

.purchase_area .fail h6 {padding: 10px; font-weight: 700; font-size: 16px; color: #333;}

.purchase_area .fail p {padding: 10px; font-size: 14px; color: #333; }

.purchase_area .inspection {padding: 0 10px; padding: 70px 0 0px; font-size: 22px; text-align: center;}

.purchase_area .inspection img {width: 55px; margin: 10px 0;}

.purchase_area .inspection p {padding: 10px; font-size: 14px; color: #333; }

.purchase_area .inspection p.inspect_tit {padding: 10px 0 0;}

.purchase_area h2 {font-size: 16px; padding-top: 40px; font-weight: 700; color: #333333; text-align: center; padding-bottom: 60px; background: url(../images/icon_present.png) center 75px no-repeat; background-size: 40px;}

.purchase_area .purchase_product {width: 100%;display: table; /*background-color: #fff; */padding: 20px 15px; background: #fff; border: 1px solid #dddddd;}

.purchase_area .purchase_product .purchase_product_img {display: table-cell;position: relative;vertical-align: middle;width: 35%;padding-right: 20px}

.purchase_area .purchase_product .purchase_product_img div {position: absolute;top: 0;color: #fff;font-size: 11px;text-align: center}

.purchase_area .purchase_product .purchase_product_img div p {display: inline-block;width: 30px;height: 15px;}

.purchase_area .purchase_product .purchase_product_img div p:first-child {background-color: #ef4843;}

.purchase_area .purchase_product .purchase_product_img div p + p {background-color: #777;margin-left: -2px}

.purchase_area .purchase_product .purchase_product_img img {width: 100%;}

.purchase_area .purchase_product .purchase_product_title {display: table-cell;vertical-align: top;}

.purchase_area .purchase_product .purchase_product_title p:first-child {font-size: 14px; color: #333333; overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;line-height: 1.3;}

.purchase_area .purchase_product .purchase_product_title p:nth-child(2) {font-size: 14px;color: #333333; padding-top: 10px; font-weight: 700;}

.purchase_area .purchase_price {width: 100%; padding: 30px 10px 20px; border-bottom: 1px solid #dddddd;}

.purchase_area .purchase_price .half_group {width: 100%; display: table; font-size: 14px; color: #333333;}

.purchase_area .purchase_price .half_group .left_group {width: 50%; display: table-cell; text-align: left; }

.purchase_area .purchase_price .half_group .right_group {width: 50%; display: table-cell; text-align: right}

.purchase_area .purchase_price .half_group .right_group ul li {padding-bottom: 5px;}

.purchase_area .purchase_price .half_group .right_group > span {font-size: 14px;}

.purchase_area .purchase_price .half_group .right_group > span > strong {font-size: 18px; font-family: 'Montserrat', sans-serif; color: #333333;font-weight: 900; padding-right: 5px;}

.purchase_area .purchase_price .half_group .right_group > strong {font-size: 16px; font-family: 'Montserrat', sans-serif; color: #333333;font-weight: 900;}

.purchase_area .purchase_price .half_group .right_group .purchase_quantity_ar {width: 100%;}

.purchase_area .purchase_price .half_group .right_group .purchase_quantity_ar .num { font-family: 'Montserrat', sans-serif; height: 30px; width: 20px; border: none; background: none; text-align: right; display: inline-block; vertical-align: middle; font-size: 16px; color: #333333; padding: 0; font-weight: 900;}

.purchase_area .purchase_price .half_group .right_group .purchase_quantity_ar .btn_min {display: inline-block; width: 25px; vertical-align: middle; padding-right: 5px;}

.purchase_area .purchase_price .half_group .right_group .purchase_quantity_ar .btn_plus {display: inline-block; width: 25px; vertical-align: middle;}

.purchase_area .purchase_price .half_group .right_group .purchase_quantity_ar .btn_min img, .purchase_area .purchase_price .half_group .right_group .purchase_quantity_ar .btn_plus img { width: 20px;}

/*20181232 수정 */
.purchase_area .purchase_price .point_group {width: 100%; display: table;font-size: 14px; color: #333333; padding-top: 15px;}

.purchase_area .purchase_price .point_group .point_inquiry_ar {width: 100%; padding-bottom: 5px; height: 30px; display: table;}

/* 20190221 수정 */
.purchase_area .purchase_price .point_group .point_inquiry_ar .point_title {display: table-cell; padding-right: 5px; vertical-align: middle;}

/* 20190221 수정 */
.purchase_area .purchase_price .point_group .point_inquiry_ar .tool_tip {display: table-cell; padding-right: 5px; width: 15px; }

/* 20190221 수정 */
.purchase_area .purchase_price .point_group .point_inquiry_ar .tool_tip .tip {width: 15px; height: 15px; background: url(../images/tip.png) no-repeat; background-size: 15px;}

.purchase_area .purchase_price .point_group .point_inquiry_ar .tip_box { position: absolute; width: calc(100% - 20px); padding: 10px 25px 10px 10px; background: #fff; border: 1px solid #f15921; left: 10px; margin-top: -80px; display: none;}

.purchase_area .purchase_price .point_group .point_inquiry_ar .tip_box.on {display: block;}

.purchase_area .purchase_price .point_group .point_inquiry_ar .tip_box > ul > li {line-height: 18px; font-size: 12px; color: #3f3f3f; padding-left: 10px; text-indent: -10px; padding-top: 5px;}

.purchase_area .purchase_price .point_group .point_inquiry_ar .tip_box > ul > li:first-child {padding-top: 0;}

.purchase_area .purchase_price .point_group .point_inquiry_ar .tip_box .btn_x {position: absolute; width: 12px; height: 12px; background: url(../images/icon_x.png) no-repeat; background-size: 12px; right: 8px; top: 8px}

.purchase_area .purchase_price .point_group .point_inquiry_ar .inquiry_ar {display: table-cell; width: 80%; text-align: right;}

/* 20190221 수정 */
.purchase_area .purchase_price .point_group .point_inquiry_ar .inquiry_ar > span {color: #f15921; font-weight: bold; vertical-align: middle;}

.purchase_area .purchase_price .point_group .point_inquiry_ar .point_inquiry {width: 40px; padding: 11px 0 14px; font-size: 12px; color: #fff; background: #434343; border-radius: 20px; line-height: 0; }

.purchase_area .purchase_price .point_group .point_use {width: 100%; display: table;}

.purchase_area .purchase_price .point_group .point_use .use_point {display: table-cell; padding-right: 8px; }

.purchase_area .purchase_price .point_group .point_use .use_point .point_inner {width: 100%; border: 1px solid #dddddd; border-radius: 2px; background: #fff; }

.purchase_area .purchase_price .point_group .point_use .use_point .point_inner > input {width: calc(100%); border: 0; background: none; text-align: right; padding: 0 15px 0 5px; height: 25px;}

.purchase_area .purchase_price .point_group .point_use .use_point .point_inner > input:disabled {background: #eaeaea; color: #f6f5f5; }

.purchase_area .purchase_price .point_group .point_use .use_point .point_inner > span { font-size: 14px; vertical-align: middle; position: absolute; margin-left: -14px; padding-top: 3px; }

.purchase_area .purchase_price .point_group .point_use .use_btn_ar {display: table-cell; width: 60px; }

.purchase_area .purchase_price .point_group .point_use .use_btn_ar .allpoint_use {width: 60px; padding: 11px 0 14px; font-size: 12px; color: #fff; background: #434343; border-radius: 20px; line-height: 0; }

.purchase_area .purchase_price .point_group .point_use .use_btn_ar .allpoint_use:disabled {background: #626262; }

/*//20181232 수정 */

.payment_area {width: 100%; background: #f5f5f5; padding: 0 1rem;}

.payment_area > h3 {font-size: 1.7rem; font-weight: 700; padding-top: 4rem; padding-bottom: 4.8rem; background: url(../images/icon_payment.png) center bottom no-repeat; background-size: 4rem; text-align: center;}

.payment_product {width: 100%; margin-top: 0.8rem; border: 0.1rem solid #dddddd; background: #fff; padding: 1.3rem; font-size: 0;}

.payment_product .p_img {display: inline-block; width: 11rem; vertical-align: top;}

.payment_product .p_img > img {width: 100%;}

.payment_product .p_info {display: inline-block; width: calc(100% - 11rem); vertical-align: top; padding: 1.2rem;}

.payment_product .p_info > h5 {font-size: 1.2rem; font-weight: 400; line-height: 1.7rem;}

.payment_product .p_info > p {font-size: 1.1rem; font-weight: 700;padding-top: 1.5rem;}

.num_price {width: 100%; padding: 3.2rem 0 2.5rem; border-bottom: 0.1rem solid #dddddd;}

.num_price > ul {width: 100%; padding: 0 0.5rem;}

.num_price > ul > li {width: 100%; display: table; padding-top: 0.4rem;}

.num_price > ul > li > span {display: table-cell; vertical-align: middle; text-align: right; font-size: 1.5rem;}

.num_price > ul > li > span:first-child {text-align: left;}

.num_price > ul > li > span > button {width: 2.1rem;}

.num_price > ul > li > span > button.b_up {margin-left: 1rem;}

.num_price > ul > li > span > button > img {width: 100%;}

.num_price > ul > li > span > b {position: relative; font-weight: 700;}

.num_price > ul > li > span > b > input {width: 4rem; height: 2.1rem; padding-right: 2.3rem; vertical-align: middle; font-size: 1.5rem; font-weight: 700; text-align: right; background: none;}

.num_price > ul > li > span > b > i {position: absolute; font-size: 1.5rem; right: 0; bottom: -0.2rem;}

.num_price > ul > li:first-child {padding-top: 0;}

.payment_option {width: 100%; padding: 2.5rem 0 2.5rem; border-bottom: 0.1rem solid #dddddd;}

.payment_option > h4 {font-size: 1.5rem; font-weight: 700; padding: 0 0.5rem;}

.payment_option > ul.point_ar {width: 100%; padding: 2rem 0.5rem 1rem;}

.payment_option > ul.point_ar > li {width: 100%; display: table;}

.payment_option > ul.point_ar > li > span {display: table-cell; font-size: 1.5rem; vertical-align: middle; text-align: right;}

.payment_option > ul.point_ar > li > span:first-child {text-align: left;}

.payment_option > ul.point_ar > li > span > button {width: 4.3rem; height: 2rem; background: #434343; border-radius: 1rem; font-size: 1rem; font-weight: 700; color: #fff; line-height: 1; margin-left: 1rem;}

.payment_option .point_info {width: calc(100% - 1rem); margin: 0 auto; background: #e3eeee; padding: 1.5rem; border-radius: 0.8rem;}

.payment_option .point_info > a {font-size: 1.5rem; font-weight: 700; color: #26b7bc;}

.payment_option .point_info > p {font-size: 1.1rem; color: #666666; margin-top: 0.4rem;}

.payment_option {width: 100%; padding: 2.5rem 0 2.5rem; border-bottom: 0.1rem solid #dddddd;}

.payment_option > ul.use_ar {width: 100%; padding: 2rem 0.5rem 1rem;}

.payment_option > ul.use_ar > li {width: 100%; display: table;}

.payment_option > ul.use_ar > li > span {display: table-cell; font-size: 1.5rem; vertical-align: middle; text-align: right;}

.payment_option > ul.use_ar > li > span:first-child {text-align: left;}

.payment_option > ul.use_ar > li > span > button {width: 4.3rem; height: 2rem; background: #434343; border-radius: 1rem; font-size: 1rem; font-weight: 700; color: #fff; line-height: 1; margin-left: 1rem;}

.payment_option > ul.use_ar > li > span > em {display: inline-block; position: relative; vertical-align: middle;}

.payment_option > ul.use_ar > li > span > em > input {display: inline-block; padding: 0 1.7rem; width: 16rem; height: 2.5rem; vertical-align: middle; text-align: right; color: #888888; border-radius: 0.4rem; border: 1px solid #dddddd;}

.payment_option > ul.use_ar > li > span > em > input:disabled {background: #eeeeee;}

.payment_option > ul.use_ar > li > span > em > i {font-size: 1.5rem; position: absolute; right: 0.5rem; color: #888888; bottom: 0.3rem;}

.payment_un {padding: 2.5rem 0.5rem; border-bottom: 0.1rem solid #dddddd; width: 100%;}

.payment_un .payment_last {width: 100%; display: table;}

.payment_un .payment_last > span {display: table-cell; text-align: right; font-size: 2.8rem; }

.payment_un .payment_last > span:first-child {text-align: left;}

.payment_un .payment_last > span > h5 {color: #333; text-align: left;}

.payment_un .payment_last > span > b {font-weight: 700; color: #f15921;}

.payment_un .payment_last > span > i {font-weight: 400; color: #f15921;}

.payment_un .noti_text {width: 100%; padding-top: 24px;}

.payment_un .noti_text > p {font-size: 11px; line-height: 20px; color: #666666;}

.payment_agree {width: 100%; padding: 2.5rem 0.5rem 1.5rem; position: relative;}

.payment_agree > p {padding-bottom: 1rem;}

.payment_agree .open_btn {display: inline-block; padding-right: 1.7rem; background: url(../images/icon_down.png) right 50% no-repeat; background-size: 12px; font-size: 12px; color: #5fc1c7; font-weight: 700; position: absolute; margin-top: -2.5rem; right: 1.5rem; content: '자세히보기' }

.payment_agree .open_btn.on {background: url(../images/icon_up.png) right 50% no-repeat; background-size: 1.2rem; text-indent: -9999999999px;}

.payment_agree .open_btn.on::after {text-indent: 0;float: left;content: '접기';}

.checkbox-wrap {cursor: pointer;vertical-align: middle; font-size: 1.4rem; color: #101010;}

.checkbox-wrap .check-icon {display: inline-block;width: auto; background: url(../images/chack_off.png) center left no-repeat; vertical-align: middle; transition-duration: .3s;background-size: 1.8rem; padding-left: 2rem;}

.checkbox-wrap input[type=checkbox] {display: none;}

.checkbox-wrap input[type=checkbox]:checked + .check-icon {background-image: url(../images/chack_on.png);}

.text_box1 {width: 100%; margin: 0 auto; padding: 2rem 1.5rem; border: 1px solid #dddddd; font-size: 1.4rem; background: #FFF; height: 20rem; display: none;}

.text_box1 .text_content {width: 100%; height: 15.8rem; overflow-y: auto; }

.text_box1 .text_content > h3 {font-size: 1.2rem; font-weight: 700; color: #333333; }

.text_box1 .text_content > h4 {font-size: 1.2rem; font-weight: normal; color: #333333; padding-bottom: 0.5rem; padding-top: 1.5rem;}

.text_box1 .text_content > p {font-size: 1.2rem; font-weight: normal; color: #333333; padding-bottom: 0.5rem; word-break: break-all;}

.text_box1 .text_content > p.nom {font-size: 1.2rem; font-weight: normal; color: #333333; padding-bottom: 0.5rem; text-indent: -1.3rem; margin-left: 1.3rem; word-break: break-all;}

.text_box1 .text_content > p.nom1 {font-size: 1.2rem; font-weight: normal; color: #333333; padding-bottom: 0.5rem; text-indent: -1.5rem; margin-left: 1.6rem; word-break: break-all;}

.text_box1 .text_content > p.nom2 {font-size: 1.2rem; font-weight: normal; color: #333333; padding-bottom: 0.5rem; text-indent: -1.9rem; margin-left: 2.8rem; word-break: break-all;}

.text_box1 .text_content > p.nom3 {font-size: 1.2rem; font-weight: normal; color: #333333; padding-bottom: 0.5rem; text-indent: -0.8rem; margin-left: 1.8rem; word-break: break-all;}

.btn_full > button {width: 100%; font-size: 1.4rem; font-weight: 700; color: #FFF; height: 5rem; background: #23b8bc;}


.send_area {width: 100%; padding: 4rem 0.5rem 0;}

.send_area > h4 {font-size: 1.5rem; font-weight: 700;}

.send_area > ul {padding-top: 2rem; width: 100%;}

.send_area > ul > li {width: 100%; margin-top: 1rem; position: relative; }

.send_area > ul > li:first-child {margin-top: 0;}

.send_area > ul > li > input {width: 100%; height: 5rem; padding: 0 3rem 0 1rem; border: 1px solid #dddddd; background: #fff; font-size: 1.4rem;}

.send_area > ul > li > input::placeholder {color: #999999}

.send_area > ul > li > button {width: 2.2rem; height: 2.2rem; position: absolute; right: 0.5rem; top: 50%; margin-top: -1.1rem;}

.send_area > ul > li > button > img {width: 100%;}


.message_area {width: 100%; padding: 4rem 0.5rem 0;}

.message_area > h4 {font-size: 1.5rem; font-weight: 700;}

.message_area .t_area {width: 100%; padding-top: 2rem;}

.message_area .t_area > textarea {width: 100%; height: 20rem; font-size: 1.4rem; border: 1px solid #dddddd; padding: 2rem 1rem;}


.comp_area {width: 100%; background: #f5f5f5; padding: 0 1rem; min-height: calc(100vh - 5.4rem);}

.comp_area > h3 {font-size: 1.7rem; font-weight: 700; padding-top: 5rem; padding-bottom: 7.5rem; background: url(../images/icon_comp.png) center bottom no-repeat; background-size: 5.5rem; text-align: center;}

.comp_product {width: 100%; margin-top: 3rem; border: 0.1rem solid #dddddd; background: #fff; padding: 1.3rem; font-size: 0;}

.comp_product .p_img {display: inline-block; width: 11rem; vertical-align: top;}

.comp_product .p_img > img {width: 100%;}

.comp_product .p_info {display: inline-block; width: calc(100% - 11rem); vertical-align: top; padding: 1.2rem;}

.comp_product .p_info > h5 {font-size: 1.2rem; font-weight: 400; line-height: 1.7rem;}

.comp_product .p_info > p {font-size: 1.1rem; font-weight: 700;padding-top: 1.5rem;}

.payment_info {width: 100%; padding-top: 3rem; padding-bottom: 6rem;}

.payment_info > ul {width: 100%;}

.payment_info > ul > li {padding: 2rem 0.5rem 2rem; border-top: 1px solid #eaeaea; display: table; width: 100%; }

.payment_info > ul > li > span {display: table-cell; text-align: right; font-size: 1.5rem; vertical-align: middle;}

.payment_info > ul > li > span:first-child {text-align: left;}

.payment_info > ul > li > span > b {font-weight: 800; vertical-align: middle;}

.payment_info > ul > li > span > i {vertical-align: middle;}

.payment_info > ul > li.sum > span {display: table-cell; text-align: right; font-size: 2.5rem; }

.payment_info > ul > li.sum > span:first-child {text-align: left;}

.payment_info > ul > li.sum > span > b {font-weight: 800; color: #f15921; vertical-align: middle;}

.payment_info > ul > li.sum > span > i {color: #f15921; vertical-align: middle;}

.btn_double {width: 100%; font-size: 0; }

.btn_double.p_fixed {position: fixed; bottom: 0;}

.btn_double > button {width: 50%; font-size: 1.4rem; font-weight: 700; color: #FFF; height: 5rem; background: #23b8bc; vertical-align: middle;}

.btn_double > button:first-child {background: #888888;}

.sub_menu {width: 100%; background: #e9e9e9 !important; padding: 0.6rem 0; height: 4rem !important; display: table; border-bottom: 0 !important;}

.sub_menu > li {display: table-cell; width: 50%; border-left: 1px solid #d2d2d2;}

.sub_menu > li:first-child {border-left: none;}

.sub_menu > li > a {height: auto; line-height: 2.6rem !important; border: none !important; font-size: 1.4rem !important; color: rgba(51, 51, 51, 0.5) !important; font-weight: 400 !important;}

.sub_menu > li.active > a { color: #23b9ba !important;}


#footer {background: #f5f5f5; width: 100%; padding-top: 10px;}

#footer.bottom {position: absolute; left: 0; bottom: 0;}

#footer .foot_link {padding: 10px 0; background: #888888;}

#footer .foot_link > ul {width: 100%; display: table;}

#footer .foot_link > ul > li {display: table-cell; border-left: 1px solid #fff; text-align: center; line-height: 1; width: 33.3%;}

#footer .foot_link > ul > li:first-child {border-left: none;}

#footer .foot_link > ul > li:nth-child(2) > a {font-weight: 700;}

#footer .foot_link > ul > li > span {font-size: 1rem; color: #FFF; cursor: pointer;}

#footer .foot_link > ul > li > span.btn_company_info {display: inline-block;}

#footer .foot_link > ul > li > span.btn_company_info.on {display: inline-block;}

#footer .foot_link > ul > li > span > em {color: #c70000;}

#footer .foot_info {padding: 1.6rem 1.5rem; font-size: 0.9rem; color: #888888;}

#footer .foot_info p {padding-bottom: 2px; color: #888888;}

#footer .foot_info p.tit { padding-bottom: 5px;}

#footer .foot_info p.tit > em {display: inline-block; padding-left: 10px; color: #888888;}

#footer .foot_info > strong {padding-top: 7px; display: block; font-weight: normal; color: #888888}

#footer .foot_info > div {padding-top: 10px; display: block; font-weight: normal; color: #888888}


.coupon_box {width: 100%;}

.coupon_box .list_top {padding: 3rem 1rem 0;}

.coupon_box .list_top > p {padding-top: 1rem; font-size: 1rem; padding-left: 1.3rem; text-indent: -1.3rem; line-height: 1.5; color: #333;}

.coupon_box .list_top > p:first-child {padding-top: 0;}

.coupon_box .list_top .coupon_sort {width: 100%; padding: 2.8rem 0.5rem 0; display: table;}

.coupon_box .list_top .coupon_sort > span {display: table-cell; text-align: right; vertical-align: middle; font-size: 1.3rem;}

.coupon_box .list_top .coupon_sort > span > b {color: #f15921; font-weight: 700;}

.coupon_box .list_top .coupon_sort > span:first-child {text-align: left;}

.coupon_box .list_top .coupon_sort > span .nice-select {display: inline-block; float: none; width: 10rem; font-size: 1.2rem; border-radius: 0; border: 1px solid #e5e5e5;}

.coupon_box .list_top .coupon_sort > span .nice-select .list {width: 100%;}

.coupon_list {width: 100%; background: #f5f5f5;}

.coupon_list > ul {width: 100%; padding: 1rem; font-size: 0;}

.coupon_list > ul > li {display: table; width: 100%; margin-top: 0.6rem; background: #fff; padding: 1.2rem; position: relative;}

.coupon_list > ul > li:first-child {margin-top: 0;}

.coupon_list > ul > li .img_area {width: 11.6rem; display: table-cell; vertical-align: middle; position: relative;}

.coupon_list > ul > li .img_area > img {width: 100%;}

.coupon_list > ul > li .p_info_area {width: calc(100% - 11.6rem); display: table-cell; vertical-align: middle; padding: 1rem 1.5rem 0 1rem;}

.coupon_list > ul > li .p_info_area > h3 {font-size: 1.3rem; font-weight: 700; padding-bottom: 1rem;}

.coupon_list > ul > li .p_info_area > p {font-size: 1.2rem; line-height: 1.7rem; height: 3.8rem; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}

.coupon_list > ul > li .p_info_area > p.date {padding-top: 0.8rem; border-top: 1px solid #f6f6f6; font-size: 1.2rem; color: #a6a6a6;}

.coupon_list > ul > li .coupon_extension {width: 40px; height: 40px; background: #f5f5f5; border: 2px solid #23b8bc; color: #23b8bc; border-radius: 40px; position: absolute; font-size: 9px; line-height: 1.2; font-weight: 700; bottom: 10px; right: 10px; vertical-align: middle; z-index: 9; -webkit-transform-style: preserve-3d; -webkit-transform: translateZ(-10px);}

.coupon_view {width: 100%; border-top: 1px solid #dddddd; padding: 0 1rem; background: #fff;}

.coupon_view .coupon_box { padding: 3.5rem 0.5rem 0; border: 1px solid #dddddd; margin-top: 1rem;}

.coupon_view .coupon_box .brand_name {padding: 0.5rem 0 1rem; font-size: 1.4rem; color: #333333; font-weight: 700; text-align: center;}

.coupon_view .coupon_box .product_name { word-break: break-all; font-size: 1.8rem; color: #333333; height: 5.4rem; overflow: hidden; font-weight: 400; padding: 0 1rem 0; text-align: center;}

.coupon_view .coupon_box .barcode_area {padding: 2rem; text-align: center;}

.coupon_view .coupon_box .barcode_area > img {width: 100%;}

.coupon_view .coupon_box .product_img_ar {padding: 10.2rem 0; text-align: center;}

.coupon_view .coupon_box .product_img_ar img {width: 100%;}

.coupon_view .coupon_box > ul { padding: 0 1rem;}

.coupon_view .coupon_box > ul > li {width: 100%; padding: 1.5rem 0; display: table; border-top: 1px solid #dddddd;}

.coupon_view .coupon_box > ul > li.dp_bl {display: block;}

.coupon_view .coupon_box > ul > li.dp_bl .title_t {font-size: 1.4rem; color: #333333; text-align: left; display: table-cell; padding-bottom: 1rem;}

.coupon_view .coupon_box > ul > li.dp_bl > p {color: #666666; font-size: 1.4rem;}

.coupon_view .coupon_box > ul > li:first-child {width: 100%; padding: 3rem 0 1rem; display: table;}

.coupon_view .coupon_box > ul > li:last-child {border-bottom: none;}

.coupon_view .coupon_box > ul > li .title_l {font-size: 1.4rem; color: #333333; width: 30%; text-align: left; display: table-cell;}

.coupon_view .coupon_box > ul > li .datas {font-size: 1.4rem; color: #666666; width: 70%; text-align: right; display: table-cell;}

.coupon_view .coupon_box > ul .btn_area_4 {padding-bottom: 2rem;}

.coupon_view .coupon_box > ul .btn_area_4 button {height: 5rem; color: #fff; background: #23b8bc; border-radius: 0.8rem; font-size: 1.4rem; width: 100%; font-weight: 700;}

.coupon_notify_area {background-color: #fff;padding: 2rem 0.5rem; border-top: 1px solid #e8e8e8;}

.coupon_notify_area .coupon_notify_info {font-size: 1.2rem; padding: 0;}

.coupon_notify_area .coupon_notify_info h3 {color: #525252;padding-bottom: 0rem;}

.coupon_notify_area .coupon_notify_info p {color: #888;padding-bottom: 2rem;}


.coupon_list2 {width: 100%; background: #f5f5f5;}

.coupon_list2 > ul {width: 100%; padding: 1.3rem 1rem; font-size: 0;}

.coupon_list2 > ul > li { margin-top: 2.5rem; }

.coupon_list2 > ul > li > p.date {font-size: 1.2rem; color: #a6a6a6;}

.coupon_list2 > ul > li:first-child {margin-top: 0;}

.coupon_list2 > ul > li .coupon_payment_box {margin-top: 1.4rem; width: 100%; background: #fff; padding: 1.2rem; position: relative; font-size: 0;}

.coupon_list2 > ul > li .coupon_payment_box .paymemt-Info {padding-bottom: 1.2rem; border-bottom: 1px solid #dddddd; margin-bottom: 1.2rem;}

.coupon_list2 > ul > li .coupon_payment_box .paymemt-Info > p {font-size: 1rem; color: #333; line-height: 1.7rem;}

.coupon_list2 > ul > li .coupon_payment_box .img_area {width: 11.6rem; display: inline-block; vertical-align: middle; position: relative;}

.coupon_list2 > ul > li .coupon_payment_box .img_area > img {width: 100%;}

.coupon_list2 > ul > li .coupon_payment_box .p_info_area {width: calc(100% - 11.6rem); display: inline-block; vertical-align: middle; padding: 0rem 1.5rem 0 1rem;}

.coupon_list2 > ul > li .coupon_payment_box .p_info_area > p {font-size: 1.2rem; line-height: 1.7rem; height: 3.8rem; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}

.coupon_list2 > ul > li .coupon_payment_box .p_info_area > span {font-size: 1.2rem; line-height: 1.7rem; display: block; padding-top: 1.4rem; font-weight: 700; color: #333;}

.coupon_list2 > ul > li .coupon_payment_box .p_info_area .payment_info {padding: 1rem 0 0; border-top: 1px solid #efefef; margin-top: 1rem;}

.coupon_list2 > ul > li .coupon_payment_box .p_info_area .payment_info > p {font-size: 1rem; line-height: 1.7rem; color: #a6a6a6; font-weight: 400;}

.coupon_list2 > ul > li .coupon_payment_box .btn_cancel {padding-top: 1.2rem;}

.coupon_list2 > ul > li .coupon_payment_box .btn_cancel > button {width: 100%; border: 1px solid #23b9ba; border-radius: 0.8rem; height: 4.5rem; font-size: 1.4rem; color: #23b9ba;}

.coupon_list2 > ul > li .send_info_box {display: table; margin-top: 0.5rem; width: 100%; background: #fff; padding: 0.3rem 0.8rem; position: relative;}

.coupon_list2 > ul > li .send_info_box > h5 {display: table-cell; width: 8rem; font-size: 1rem; text-align: center; vertical-align: middle; color: #333;}

.coupon_list2 > ul > li .send_info_box > ul {display: table-cell; padding: 1rem 0 1rem 1.5rem; border-left: 1px solid #efefef;}

.coupon_list2 > ul > li .send_info_box > ul > li {width: 100%; display: table; padding-top: 0.4rem;}

.coupon_list2 > ul > li .send_info_box > ul > li:first-child {margin-top: 0;}

.coupon_list2 > ul > li .send_info_box > ul > li > span {display: table-cell; text-align: right; font-size: 1rem;}

.coupon_list2 > ul > li .send_info_box > ul > li > span:first-child {text-align: left;}

.coupon_list2 > ul > li .send_info_box > ul > li > span > button {width: 5rem; height: 2rem; font-size: 1rem; color: #fff; border-radius: 1rem; background: #333; line-height: 1;}

.pop_wrapper {position: fixed;top: 0;background: rgba(0, 0, 0, 0.5); width: 100%; height: 100vh; z-index: 99999; margin: 0 auto; padding: 0 3rem; display: table;}

.pop_wrapper > section {width: 100%; display: table-cell; vertical-align: middle;}

.sub_header { width: 100%; height: 45px; text-align: center; background: #f5f5f5; line-height: 43px; font-size: 14px; font-weight: 700; color: #333; padding: 0 10px; position: relative;}

.sub_header > p.header_close {background: url(../images/icon_close.png) 0 50% no-repeat; width: 11px; height: 100%; background-size: 100%; z-index: 500; font-size: 0; position: absolute; right: 1rem; top: 0rem;}

.sub_container { width: 100%; padding: 0px 0px 0; background: #fff;}

.sub_container .info_area {width: 100%; }

.sub_container .info_area .info_title {padding: 20px 10px 20px; width: 100%; display: table; height: 40px; }

.sub_container .info_area .info_title > h4 {font-size: 14px; font-weight: 700; color: #2e2e2e; display: table-cell; vertical-align: middle; line-height: 38px; height: 40px;}

.sub_container .info_area .info_title > h4 > em {color: #f15921; font-weight: 700;}

.sub_container .info_area .info_select {padding: 20px 10px 20px;vertical-align: middle; width: 100%; text-align: right;}

.sub_container .info_area .info_select .nice-select {display: inline-block; float: none; width: 20rem; font-size: 1.2rem; border-radius: 0; border: 1px solid #e5e5e5;}

.sub_container .info_area .info_select .nice-select .list {width: 100%;}

.sub_container .info_area .info_text_box {width: 100%; padding: 10px 10px; font-size: 14px; color: #888888; height: 430px; overflow-y: scroll; }

.sub_container .info_area .info_text_box h4 {font-size: 14px; color: #333; font-weight: 700; padding-bottom: 10px;}

.sub_container .info_area .info_text_box h5 {font-size: 14px; color: #333; padding-bottom: 5px; padding-top: 10px;}

.sub_container .info_area .info_text_box > p {font-size: 13px; font-weight: normal; color: #333333; padding-bottom: 5px; word-break: break-all;}

.sub_container .info_area .info_text_box > p.nom {font-size: 12px; font-weight: normal; color: #333333; padding-bottom: 5px; text-indent: -13px; margin-left: 13px; word-break: break-all;}

.sub_container .info_area .info_text_box > p.nom1 {font-size: 12px; font-weight: normal; color: #333333; padding-bottom: 5px; text-indent: -15px; margin-left: 16px; word-break: break-all;}

.sub_container .info_area .info_text_box > p.nom2 {font-size: 12px; font-weight: normal; color: #333333; padding-bottom: 5px; text-indent: -19px; margin-left: 28px; word-break: break-all;}

.sub_container .info_area .info_text_box > p.nom3 {font-size: 12px; font-weight: normal; color: #333333; padding-bottom: 5px; text-indent: -8px; margin-left: 18px; word-break: break-all;}

.sub_container .info_area .info_text_box > p.nom4 {font-size: 12px; font-weight: normal; color: #333333; padding-bottom: 5px; margin-left: 25px; word-break: break-all;}

.error_area {width: 100%; height: calc(100vh - 5.4rem); background: #f5f5f5;}

.inspection {padding: 0 10px; padding: 70px 0 0px; font-size: 22px; text-align: center;}

.inspection img {width: 55px; margin: 10px 0;}

.inspection p {padding: 10px; font-size: 14px; color: #333; }

.inspection p.inspect_tit {padding: 10px 0 0;}

.btn_bottom_area {width: 100%; position: absolute; bottom: 0;}

.btn_bottom_area > button {width: 100%; font-size: 14px; font-weight: 700; color: #FFF; height: 50px;}

.btn_bottom_area > button.grey_btn {background: #888888;}

.btn_bottom_area > button.green_btn {background: #23b8bc;}

.popup { width: 100%; height: 100vh; padding: 0 2rem; background: rgba(0, 0, 0, 0.3); text-align: center; z-index: 9999; display: none; position: fixed; top: 0;}

.popup.active {display: table;}

.popup > section {display: table-cell; width: 100%; vertical-align: middle;}

.popup .pop_header {display: block; width: 100%; padding: 18px 14px; text-align: left; border-bottom: 1px solid #ccc; background: #fff;}

.popup .pop_header h3 {font-family: 'NanumGothic', sans-serif; font-size: 16px; font-weight: normal; color: #111111;}

.popup .pop_content {display: table; width: 100%;min-height: 130px; text-align: left; background: #fff; }

.popup .pop_content .txt_box {display: table-cell; width: 100%; padding: 30px 14px; vertical-align: middle;}

.popup .pop_content p {font-family: 'NanumGothic', sans-serif; font-size: 14px; color: #666666;}

.popup .pop_content p.center {text-align: center;}

.popup .pop_content .info_box {padding-top: 10px;}

.popup .pop_content .info_box p {font-size: 12px; vertical-align: middle;}

.tc_orang {color: #f15921;}

.tac {text-align: center;}

.popup .pop_footer .btn_wrap {width: 100%; font-size: 0;}

.popup .pop_footer .btn_wrap > button {
    font-family: 'NanumGothic', sans-serif;
    width: 100%; height: 60px; background-color: #1c9296;
    font-size: 16px; color: #fff;
}

.popup .pop_footer .btn_wrap > button.cancel_btn {width: 50%; background: #888888; }

.popup .pop_footer .btn_wrap > button.submit_btn {width: 50%;}


.top_banner {width: 100%; background: #f5f5f5; padding-bottom: 7px;}

.top_banner > a {width: 100%;}

.top_banner > a > img {width: 100%;}


.btm_pop {
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    display: none;
    z-index: 200;
}

.btm_pop.on {
    display: block;
}

.btm_pop.on .dim {
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.3);
    animation: fadein 1s;
    -moz-animation: fadein 1s; /* Firefox */
    -webkit-animation: fadein 1s; /* Safari and Chrome */
    -o-animation: fadein 1s; /* Opera */
}

.btm_pop.on .btm_text {
    width: 100%;
    background: #fff;
    border-top-left-radius: 0.8rem;
    border-top-right-radius: 0.8rem;
    overflow: hidden;
    padding: 2.2rem 2rem;
    position: absolute;
    z-index: 201;
    bottom: 0;
    animation: fadeInUp 0.5s;
}

.btm_pop.on .btm_text .top_h {
    width: 100%;
    position: relative;
    height: 2rem;
}

.btm_pop.on .btm_text .top_h > h5 {
    line-height: 2rem;
    font-size: 1.5rem;
    letter-spacing: -0.06rem;
    font-weight: 500;
}

.btm_pop.on .btm_text .top_h > button {
    width: 2rem;
    height: 2rem;
    background: url(../images/icon_close.svg) no-repeat;
    background-size: 2rem;
    position: absolute;
    right: 0;
    top: 0;
}

.btm_pop.on .btm_text .btm_content {
    width: 100%;
    padding-top: 3.4rem;
}

.btm_pop.on .btm_text .btm_content > p {
    font-size: 1.5rem;
    line-height: 2.4rem;
    letter-spacing: -0.06rem;
    color: #4c5459;
}

.btm_pop.on .btm_text .btm_content > button {
    width: 45%;
    margin-top: 4rem;
    margin-left: 1rem;
    background: #1490ef;
    border-radius: 0.6rem;
    height: 5.6rem;
    font-size: 1.5rem;
    letter-spacing: -0.06rem;
    color: #fff;
    border: 0;
}

.btm_pop.on .btm_text .btm_content > button.left {
    background: white;
    color: #1490ef;
    border: 2px solid #1490ef;
}

.none_data > p {
    font-size: 1.5rem;
    height: 4rem;
    text-align: center;
    padding: 2rem 2rem 4rem 2rem;
    background: white;
}