@charset "utf-8";

@font-face {
    font-family: 'GmarketSansMedium';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'GmarketSansBold';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@import url(//fonts.googleapis.com/earlyaccess/nanumgothic.css);

/********************************
 공통 스타일
********************************/
.direct_wrap dl, .direct_wrap ul, .direct_wrap p, .direct_wrap label  {margin: 0; padding: 0;}
.direct_wrap ul li {list-style: none;}
.direct_wrap img {width: 100%; max-width: 100%; display: block;}
.direct_wrap {margin: auto; letter-spacing: -0.25px;	font-family: "나눔고딕", "NanumGothic"; max-width: 768px; min-width: 320px;}
.direct_wrap .inner {margin: 0 auto; padding: 0 20px;}
.btn_primary {padding: 13px 30px 12px; height: 43px; border-radius: 6px; background-color: #323949; border: 0; cursor: pointer;}
.btn_primary span {display: inline-block; font-size: 13px; color: #fff; }

.fw600 {font-weight: 600;}
.no_scroll {overflow:hidden;}
.scroll {height:100%; overflow-y:auto; box-sizing:border-box;}
.line_dash {margin: 15px 0; display: block; height: 1px; background: url(/mobile/common/direct/images/line.png) repeat-x;}


/* 닫기 버튼 */
.ui_close {overflow:hidden; display:block; position:absolute; width:24px; height:0; padding:24px 0 0; background-color:#333; z-index:2; border-radius:50%; cursor: pointer;}
.ui_close:before, .ui_close:after {content:'';display:block;position:absolute;left:50%;top:50%;width: 12px;height:2px;margin:-1px 0 0 -6px;background:#fff;-webkit-transition:all 0.3s ease;transition:all 0.3s ease; cursor: pointer;}
.ui_close:before {-ms-transform:rotate(-45deg);-webkit-transform:rotate(-45deg);transform:rotate(-45deg);}
.ui_close:after {-ms-transform:rotate(45deg);-webkit-transform:rotate(45deg);transform:rotate(45deg);}

/* 버튼 컬러 */
.btn_blk {color:#fff; background-color: #323949; border: 0; cursor: pointer;}
.btn_blue {color:#fff; background-color: #05b7d1; border: 0; cursor: pointer;}

/* 다이렉트센터 페이지 Form 스타일 */
input.input_form {padding:0 10px; width: 100%; height:40px;font-size:14px;color:#323949;border:1px solid #bfbfbf;border-radius:6px;box-sizing:border-box;font-family:inherit;}
input.input_form:disabled, input.input_form:disabled, input.input_form:disabled, input.input_form:disabled {background-color:#eeeeee; color:#c9c9ca;}
textarea.input_form {padding:10px 20px; width:100%; height:100px;font-size:16px;color:#323949;border:1px solid #bfbfbf;border-radius:6px;box-sizing:border-box;font-family:inherit; resize:none;}
input.input_form::placeholder,
textarea.input_form::placeholder {color:#c9c9ca;}

select.input_form {padding:0 40px 0 15px !important; width: 100%; height:40px !important; -webkit-appearance:none; -moz-appearance:none; appearance:none; font-size:14px; color:#666; background:url(/mobile/common/direct/images/arrow_select.png) bottom 50% right 15px no-repeat #fff; border:1px solid #bfbfbf;border-radius:6px; box-sizing:border-box; font-family:inherit; font-size: 13px;}
select.input_form::-ms-expand{display:none;/*for IE10,11*/}

.chk_box, .radio_box {position:relative; display:inline-block;}
.chk_box + .chk_box {margin-left:30px;}
.radio_box + .radio_box {margin-left:30px;}
.chk_box input[type="checkbox"], .radio_box input[type="radio"] {padding:0;margin:0;position:relative;border:0;width:0;height:0;overflow:hidden;}
.chk_box input[type="checkbox"] + label, .radio_box input[type="radio"] + label {padding-left:30px; display: inline-block; font-size:12px; color:#323949; font-weight:300; cursor:pointer;}
.chk_box input[type="checkbox"] + label:before, .radio_box input[type="radio"] + label:before {content:"";  display:block; position:absolute; left:0; top:0; background-color: #fff; box-sizing: border-box;}
.chk_box input[type="checkbox"] + label span, .radio_box input[type="radio"] + label span {line-height:22px;}

.chk_box input[type="checkbox"] + label:before {content:"";  display:block; position:absolute; left:0; top:0; width:24px; height:24px; border:1px solid #ccc; border-radius: 6px;}
.chk_box input[type="checkbox"]:checked + label:before {border-color:#00a2bd; background-color: #00a2bd;}
.chk_box input[type="checkbox"]:checked + label:after {
  content: "";
  display: block;
  position: absolute;
  left: 5px;
  top: 6px;
  width: 14px;
  height: 8px;
  border-style: solid;
  border-color: #fff;
  border-width: 0 0 2px 2px;
  transform: rotate( -45deg );
}
.chk_box input[type="checkbox"]:disabled + label:before {opacity:40%;}
.chk_box input[type="checkbox"] + label .text {line-height: 24px;}

.radio_box input[type="radio"] + label:before {border: 1px solid #dee3e6; border-radius: 50%; background-color: #f6f7f7; width:22px; height:22px; box-sizing: border-box;}
.radio_box input[type="radio"]:checked + label:before {background-color: #fff;}
.radio_box input[type="radio"]:checked + label:after {content: ""; position: absolute; left: 6px; top: 6px; display: block; border-radius: 50%; width: 10px; height: 10px;  background-color: #00a2bd;}
.radio_box input[type="radio"]:disabled + label:before {opacity:40%;}

/********************************
 애니메이션 스타일
********************************/
@keyframes toggle-shadow {
  0% {box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);}
  100% {box-shadow: 0px 10px 15px 0px rgba(0, 0, 0, 0.15);}
}
@-webkit-keyframes toggle-shadow {
  0% {-webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);}
  100% {-webkit-box-shadow: 0px 10px 15px 0px rgba(0, 0, 0, 0.15);}
}

@keyframes item-shadow {
  0% {box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); }
  100% {box-shadow: 5px 8px 10px 0px rgba(0, 0, 0, 0.2);}
}
@-webkit-keyframes item-shadow {
  0% {-webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);}
  100% {-webkit-box-shadow: 2.5px 4px 5px 0px rgba(0, 0, 0, 0.2);}
}
@keyframes pop-floating {
	0% {transform: translateY(0%);}
	50% {transform: translateY(8%);}
	100% {transform: translateY(0%);}
}
@-webkit-keyframes pop-floating {
	0% {-webkit-transform: translateY(0%);}
	50% {-webkit-transform: translateY(8%);}
	100% {-webkit-transform: translateY(0%);}
}

/********************************
 페이징
********************************/
.paging {margin: 30px 0; text-align: center;}
.paging .paging_list {font-size: 0;}
.paging .paging_list li {display: inline-block; padding: 0 4px; vertical-align: middle;}
.paging .paging_list li.first,
.paging .paging_list li.last,
.paging .paging_list li.prev,
.paging .paging_list li.next {width: 30px;}
.paging .paging_list li.prev {margin-right: 10px;}
.paging .paging_list li.next {margin-left: 10px;}
.paging .paging_list li a {display: block; width: 24px; height: 24px; line-height: 24px; border-radius: 50%; font-size: 13px; color: #727272; background-color: #fff; text-align: center;}
.paging .paging_list li.active a {color: #fff; background-color: #222;}
.paging .paging_list li.active a span {color:#fff;}

/********************************
 토글 스타일
********************************/
.blk_toggle {border-radius: 0 0 6px 6px; overflow: hidden;}
/* 20220704 추가 */
.info_toggle b {text-decoration-line: underline;}
.blk_toggle > dt {margin-top: 15px; padding: 12px 20px; position: relative; height: 45px; background-color: #323949; border-radius: 6px; box-sizing: border-box; cursor: pointer; overflow: hidden;}
.blk_toggle > dt p {float: left; font-size: 16px; color: #fff; font-weight: 600;}
.blk_toggle > dt span.btn_more {padding:4px 35px 5px 0; float: right; font-size: 11px; color:#fff; font-weight: 600;}
.blk_toggle > dt span.btn_more:after {content: ""; position: absolute; right:20px; top:10px; display: inline-block; width: 15px; height: 15px; border-style: solid; border-color: #fff; border-width: 0 0 2px 2px; transform: rotate(-45deg);}
/* 20220704 수정 */
.blk_toggle > dd {display: none; padding: 20px; font-size: 11px; color: #000; line-height: 22px;}
.blk_toggle > dd .img_area {text-align: center;}
.blk_toggle > dd .img_area img {max-width: 100%;}
.blk_toggle.active {
  animation: toggle-shadow 0.1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  -webkit-animation: toggle-shadow 0.1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
.blk_toggle.active > dt span.btn_more:after {top:20px; transform: rotate(135deg);}
.blk_toggle.active > dd {display: block;}

/********************************
 우측 퀵메뉴
********************************/
.aside_quick {display: none; position: fixed; right: 5px; bottom:125px; width: 65px;z-index: 30;}
.aside_quick.active {display: block;}
.aside_quick .qucik_list ul {display: none;}
.aside_quick .qucik_list.qucik_on ul {display: block;}
.aside_quick .qucik_list ul li.cr {margin-bottom: 15px; width: 65px; height: 65px;}
.aside_quick .qucik_list ul li.box {margin-bottom: 15px; width: 65px;}
.aside_quick .qucik_list ul li.box {margin: 20px 0; width: 65px; border-radius: 45px; background-color: #377be1; box-shadow: 3px 2px 6px 0px rgba(0, 0, 0, 0.35);}
.aside_quick .qucik_list ul li.box li {padding: 0 13px;}
.aside_quick .qucik_list ul li.box li:first-child,
.aside_quick .qucik_list ul li.box li:first-child a {height: 85px;}
.aside_quick .qucik_list ul li.box li:nth-child(2),
.aside_quick .qucik_list ul li.box li:nth-child(2) a {height: 65px;}
.aside_quick .qucik_list ul li.box li + li:before {content: ""; display: block; width:100%; height: 1px; background: url(/mobile/common/direct/images/quick_line.png) repeat-x 0 0;}
.aside_quick .qucik_list ul li.box li a {display: table-cell; width: 100vw; height: 75px; vertical-align: middle; }
.aside_quick .qucik_list ul li.box li a .icon {margin: auto; display: block; width: 22px;}
.aside_quick .qucik_list ul li.box li a .icon img {width: 100%;}
.aside_quick .qucik_list ul li.box li a .text {margin: 0 -10px; display: block; font-size: 12px; line-height: 15px; color: #fff; letter-spacing: -0.08em; font-family: 'GmarketSansMedium' !important;}
.aside_quick .qucik_list ul li.box li a .icon + .text {margin-top: 8px;}

.aside_quick .qucik_list ul li a {position: relative; right: 0; display: block; width: 100%; height: 100%; text-align: center;}

.aside_quick .btn_more {position: relative; margin: 0 auto 10px; display: block; width: 45px; height: 45px; background-color: #fff; border-radius: 12px; border: 1px solid #7a8490; box-shadow: 3px 2px 6px 0px rgba(0, 0, 0, 0.35);}
.aside_quick .btn_more:before {content: ""; position: absolute; display: block; width: 100%; height: 100%; background: url(/mobile/common/direct/images/icon_more.svg) no-repeat center; background-size: 16px;}
.aside_quick .qucik_list.qucik_on .btn_more:before {transform:rotate(45deg);}
.aside_quick .btn_more span {font-size: 0; text-indent: -9999px;}
.aside_quick .btn_top {margin: auto; display: block; width: 40px; height: 40px; border-radius: 50%; background:url(/mobile/common/direct/images/icon_top.svg) no-repeat center #323949; background-size: 20px 15px; box-shadow: 3px 2px 6px 0px rgba(0, 0, 0, 0.35); overflow: hidden;}
.aside_quick .btn_top span {font-size: 0; text-indent: -9999px;}

/********************************
 다이렉트센터 상단 스텝 정보
********************************/
.direct_setp {padding: 20px 20px 5px 20px; background-color: #e9eef2; box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.1); font-size: 0;}
.direct_setp:after {content: ""; display: block; clear: both;}
.direct_setp .step_list {float: left;}
.direct_setp .step_list li {position: relative; display: inline-block;}
.direct_setp .step_list li + li {margin-left: 15px; padding-left: 25px;}
.direct_setp .step_list li + li:before {content: ""; position: absolute; left: 0; bottom: 4px; display: block; width: 9px; height: 16px; background: url(/mobile/common/direct/images/icon_arrow.svg) no-repeat 0 0; background-size: cover;}
.direct_setp .step_list li .step {font-size: 11px; font-weight: 600; color: #888;}
.direct_setp .step_list li p {margin-top: 5px;}
.direct_setp .step_list li p .num {display: inline-block; width: 25px; height: 25px; line-height: 23px; border: 2px solid #ddd; border-radius: 50%; background-color: #fff; font-size: 15px; font-weight: 600; color: #888; text-align: center;}
.direct_setp .step_list li p .text {margin-left: 4px; color: #888; font-size: 12px; font-weight: 600;}

.direct_setp .step_list li.active .step {color: #222;}
.direct_setp .step_list li.active p .num {background-color: #f30790; border-color: #f30790; color: #fff;}
.direct_setp .step_list li.active p .text {color: #222;}
.direct_setp .link_app {float: right; padding: 8px 5px; display: block; width: 48px; height: 48px; border-radius: 10px; border: 1px solid #00b1c9; background-color: #fff; text-align: center;}
.direct_setp .link_app span {font-size: 12px; color: #00b1c9; line-height: 15px; font-weight: 600; }
/********************************
 상품 상단 설명
********************************/
.direct_visual {position: relative; height: 270px;}
.direct_visual:before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  display: block;
  width: 100%;
  height: 100px;
  background: -webkit-linear-gradient(-9deg, #e9eef2 60%, #fff 40%);
  background: -o-linear-gradient(-9deg, #e9eef2 60%, #fff 40%);
  background: linear-gradient(-9deg, #e9eef2 60%, #fff 40%);
  z-index: -1;
}
.direct_visual .product_txt {padding: 35px 0; position: relative; z-index: 1;}
.direct_visual .product_txt .title {font-size: 24px; font-weight: 600; color: #000;}
.direct_visual .product_txt .title span {color: #00b1c9; font-weight: 800;}
.direct_visual .product_txt .copy {margin-top: 10px; font-size: 18px; color: #000;}
.direct_visual .product_txt .copy strong {font-weight: 600;}
.direct_visual .product_txt .copy2 {margin-top: 5px; font-size: 18px; color: #000;}
.direct_visual .product_img {position: absolute; right: 20px; bottom: -40px; display: block; width: 190px;}
.direct_visual .product_img img {width: 100%;}


/********************************
 상품 선택
********************************/
.direct_product {padding: 10px 0 45px 0; background-color: #e9eef2;}
.direct_product .title {font-size: 18px; font-weight: 600; color: #323949;}

/* 셀렉트 영역 스타일 */
.product_sel {
  margin-top: 15px;
  padding: 15px 25px;
  position: relative;
  width: 100%;
  height: 95px;
  border-radius: 15px;
  background-color: #00b2bb;
  box-sizing: border-box;
  cursor: pointer;
}
.product_sel:after {content: ""; position: absolute; right: 25px; top: 30px; display: block; width: 20px; height: 20px; border-style: solid; border-color: #fff; border-width: 0 0 4px 4px; transform: rotate(-45deg);}

.product_sel i {display: inline-block; width: 60px; vertical-align: middle;}
.product_sel i img {width: 60px;}
.product_sel p.p_name { display: inline-block; font-size: 18px; font-weight: 600; margin-left:20px; vertical-align:middle; color: #fff;}

.product_sel .selected_option {color:#fff;}
.product_sel ul{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  border:2px solid #00b2bb;
  border-radius: 15px;
  background-color: #fff;
  z-index: 10;
  cursor: pointer;
  box-sizing: border-box;
  -webkit-animation: item-shadow 0.1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; animation: item-shadow 0.1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
.product_sel ul.hide {display: none;}
.product_sel ul.show {display: block;}
.product_sel ul.show p.p_name {color:#333;}
.product_sel ul li {padding: 15px 25px; height: 95px;}
.product_sel ul li + li {border-top: 1px solid #ced8df;}

/* 셀렉트 영역 스타일23 */
.product_ib {
  margin:0 auto;
  position: relative;
  width: 25em;
  height: 60px;
  border-radius: 7px;
  background-color: #05b7d1;
  box-sizing: border-box;
  cursor: pointer;
}
.product_ib .box{text-align:center; vertical-align:middle; padding: 15px 0px}
.product_ib:after {content: ""; position: absolute; right: 25px; top: 1.5em; display: block; width: 1.3em; height: 1.3em; border-style: solid; border-color: #fff; border-width: 0 0 4px 4px; transform: rotate(-45deg);}

.product_ib p.p_name { display: inline-block; font-size: 18px; font-weight: 600; margin-left:-10%; vertical-align:middle; color: #fff;}

.product_ib .selected_option {color:#fff;}
.product_ib ul{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  border:2px solid #05b7d1;
  border-radius: 7px;
  background-color: #fff;
  z-index: 10;
  cursor: pointer;
  box-sizing: border-box;
  -webkit-animation: item-shadow 0.1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; animation: item-shadow 0.1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

.product_ib ul.hide {display: none;}
.product_ib ul.show {display: block;}
.product_ib ul.show p.p_name {color:#333;}
.product_ib ul li {text-align:cetner; height: 60px; margin:0 auto;}
.product_ib ul li:hover{text-align:cetner; height: 60px; margin:0 auto;background-color: #05b7d1;color:#fff;}
.product_ib ul li + li {border-top: 1px solid #ced8df;}

.product_ib_tooltip{font-size:1.3em;margin-top:0.3em;text-align:center; margin-bottom:3em;}

/* 상품선택 - 상품 서비스 선택 (슬라이드) */
.product_svc {margin-top: 15px; position: relative;}
.product_svc .slide-container {position: relative;}
.product_svc .slide-container .swiper-container {padding:0 70px 0 20px; margin: 0 -20px;}
.product_svc .slide-container .swiper-slide {padding-bottom: 15px;background-color: transparent;}
.product_svc .slide-container .swiper-container:after {content: ""; display: block;}
.product_svc .box { width:100%;position: relative; padding: 10px 20px 15px 20px; border: 2px solid #ccc; border-radius: 15px; background-color:#fff; box-sizing: border-box; overflow: hidden; cursor: pointer;}
.product_svc .box .svc_cont_area {display: table-cell; vertical-align: middle; height: 85px;}
.product_svc .box .svc_cont_area .svc_tag {font-size: 0; text-align: left;}
.product_svc .box .svc_cont_area .svc_tag li {padding: 4px 20px; display: inline-block; height: 23px; border-radius: 15px; box-sizing: border-box;}
.product_svc .box .svc_cont_area .svc_tag li + li {margin-left: 10px;}
.product_svc .box .svc_cont_area .svc_tag li.t_direct {background-color: #fc6d42;}
.product_svc .box .svc_cont_area .svc_tag li.t_recomm {background-color: #0083cd;}
.product_svc .box .svc_cont_area .svc_tag li.t_best {background-color: #9f4ec6;}
.product_svc .box .svc_cont_area .svc_tag li.t_new {background-color: #00b2bb;}
.product_svc .box .svc_cont_area .svc_tag li span {font-size: 11px; color: #fff; font-weight: 600;}
.product_svc .box .svc_cont_area p.text {margin-top: 10px; font-size: 20px; font-weight: 600; color: #000; text-align:left;}
.product_svc .box .svc_option {height: 20px; text-align: left;}
.product_svc .box .svc_option li {position: relative; display: inline-block;}
.product_svc .box .svc_option li span {display: block; width: 30px; height: 30px;}
.product_svc .box .svc_option li + li {padding-left: 15px;}
.product_svc .box .svc_option li + li:before,
.product_svc .box .svc_option li + li:after {content: ""; position: absolute; display: block; background-color: #192a4e;}
.product_svc .box .svc_option li + li:before {left:0px; top:17px; width:10px; height: 2px;}
.product_svc .box .svc_option li + li:after {left:4px; top:13px; width:2px; height: 10px;}

.discount_toggle > dt .btn_more:before, .discount_toggle > dt .btn_more:after {content: ""; position: absolute; display: block; background-color: #192a4e;}

.product_svc .box .btn_more {padding: 0; position: absolute; right: 0; bottom:0; width: 45px; height: 45px; border-radius: 15px 0 0 0; border: 0; background-color: #7a8490; cursor: pointer; box-sizing: border-box;}
.product_svc .box .btn_more:before,
.product_svc .box .btn_more:after {content: ""; position: absolute; display: block; background-color: #fff;}
.product_svc .box .btn_more:before {left:14px; top:22px; width:16px; height: 2px;}
.product_svc .box .btn_more:after {left:21px; top:15px; width:2px; height: 16px;}
.product_svc .box .btn_more .text {font-size: 0; text-indent: -9999px;}
.product_svc .box.active {border-color: #00b1c9;
  -webkit-animation: item-shadow 0.1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  animation: item-shadow 0.1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;

}
.product_svc .box.active .btn_more {background-color: #00b1c9;}

.product_price {padding: 20px; border: 2px solid #00b1c9; background-color: #fff; border-radius: 15px; box-sizing: border-box;
  -webkit-animation: item-shadow 0.1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  animation: item-shadow 0.1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;

}
.product_price:after {content: ""; display: block; clear: both;}
.product_price .price_label {float: left; font-size: 15px; font-weight: 600; line-height: 16px; margin-top:5px;}
.product_price .price_label span {font-size: 11px; font-weight: 400;}
.product_price .payment {float: right; font-size: 24px; color: #e93d6a !important;}
.product_price .payment span {color:#e93d6a;}
.product_price .payment .countdown {font-weight: 800; }
.product_price .payment .won {font-weight:600; }

/********************************
 상품 요금 상세
********************************/
.direct_payment {position: relative; top:-25px;}
.direct_payment dt {position: relative; padding: 20px; height: 60px; background-color: #fff; box-sizing: border-box; font-size: 0; border: 1px solid #ced8df;}
.direct_payment dt .pay_label {font-size: 15px; color: #323949; font-weight: 600;}
.direct_payment dt .pay_label .btn_tip {margin-left: 5px; display: inline-block; width: 15px; height: 15px; vertical-align: middle; cursor: pointer;}
.direct_payment dt .pay_price {margin-right: 25px ;float: right; font-size: 18px; color: #323949; font-weight: 700;}
.direct_payment dt span.btn_more {position: absolute; right:20px; top:20px; display: block; width: 25px; height: 25px; font-size: 0; cursor: pointer;}
.direct_payment dt span.btn_more:after {content: ""; position: absolute; left: 6px; top: 2px; display: block; width: 12px; height: 12px; border-style: solid; border-color: #323949; border-width: 0 0 2px 2px; transform: rotate(-45deg);}
.direct_payment .active > dt span.btn_more:after {top:8px; transform: rotate(135deg);}

/* 20240206 수정 */
.direct_payment .detail_area .detail_title{border-bottom: 1px solid #d8d8d8;padding:10px 0 !important ;margin-bottom: 20px;}

.direct_payment .detail_area .t_label {float: left; font-size: 17px; color: #222; font-weight: 600;}
.direct_payment .detail_area .d_label {float: left; font-size: 15px; color: #222; font-weight: 600;}
.direct_payment .detail_area .d_label span {font-size: 16px;}
.direct_payment .detail_area .btn_tip {display: inline-block; width: 15px; height: 15px; cursor: pointer;}
.direct_payment .detail_area .d_price {position: relative; float: right;}
.direct_payment .detail_area .d_price .cash {font-size: 15px; color: #e93d6a; font-weight: 700;}
.direct_payment .detail_area .d_price .t_cash {font-size: 17px; color: #e93d6a; font-weight: 700;}
.direct_payment .detail_area .d_price .won {font-size: 15px; color: #222;}
.direct_payment .detail_area .d_top:after {content: ""; display: block; clear: both;}
.direct_payment .detail_area .d_btm {margin-top: 8px;}
.direct_payment .detail_area .d_btm select.input_form {width: calc(100% - 43px);}
.direct_payment .detail_area .d_btm p {padding-left: 10px; position: relative; font-size: 12px; color: #333;}
.direct_payment .detail_area .d_btm p:before {content: "*"; position: absolute; left: 0; top:0;}
/* 20240206 수정끝 */ 

/* 총 이용요금 */
.direct_payment .detail_toggle dt {border-radius: 15px 15px 0 0;}
.direct_payment .detail_toggle dd {border-top: 1px solid #ced8df; display: none; padding: 10px 20px; background-color: #f5f5f5;}/* 20240206 수정 */
.direct_payment .detail_toggle.active dd {display: block;}
.direct_payment .detail_toggle .detail_body  {margin: 20px 0 0;padding: 10px 0;font-size: 12px;line-height: 18px;color: #222;border-top: 1px solid #d8d8d8;} /* 20240206 수정 */
.direct_payment .detail_toggle .detail_area > ul > li {position: relative; padding: 6px 0 6px 10px;} /* 20240206 수정 */
.direct_payment .detail_toggle .detail_area > ul > li:after {content: ""; display: block; clear: both;}

.direct_payment .pay_tooltip {display: none; padding: 15px 40px 15px 15px; position: absolute; right: -20px; bottom: 50px; max-width: 300px; border-radius: 10px; border: 1px solid #323949; background-color: #e9eef2; box-sizing: border-box; }
.direct_payment .pay_tooltip:after {content: ""; position: absolute; bottom: -20px; right: 17px; display: block; width: 20px; height: 20px; background: url(/mobile/common/direct/images/arrow_tooltip.png) no-repeat; background-size: 100%;}
.direct_payment .pay_tooltip .item_cont p {font-size: 11px; color: #323949; font-family: 'GmarketSansMedium';}
.direct_payment .pay_tooltip .item_cont p span {font-family: 'GmarketSansBold';}
.direct_payment .pay_tooltip .item_cont p span.red {color: #e93d6a;}
.direct_payment .pay_tooltip .ui_close {right: 10px; top: 10px;}

/* 할인금액 토글 */
.direct_payment .sum_toggle {overflow: hidden;}
.direct_payment .sum_toggle dd {display: none;}
.direct_payment .sum_toggle.active dd {display: block;}
.direct_payment .sum_toggle .sum_area {background-color: #fff;}
.direct_payment .sum_toggle .detail_area {padding: 0 20px; background-color: #f5f5f5;}
.direct_payment .sum_toggle .detail_area > ul > li {padding: 18px 0; border-top: 1px solid #d8d8d8; }
.direct_payment .sum_toggle .detail_area > ul > li:first-child {border-top: 0;}
.direct_payment .sum_toggle .detail_area > ul > li:after {content: ""; display: block; clear: both;}


.direct_payment .benefit_area {border-top: 1px solid #ced8df; padding: 20px; background-color: #e9eef2; border-radius: 0 0 15px 15px;}
.direct_payment .benefit_area .title i {display: inline-block; width: 18px; vertical-align: middle;}
.direct_payment .benefit_area .title span {margin-left: 10px; display: inline-block; font-size: 15px; color: #192a4e; font-weight: 600; vertical-align: middle;}
.direct_payment .benefit_area .box::after {content: ""; display: block; clear: both;}
.direct_payment .benefit_area .box .text {margin-top: 15px; float: left; width: 70%; font-size: 16px; font-weight: 600; color: #222;}
.direct_payment .benefit_area .box .img_area {float: right; width: 30%;}

.direct_payment .evt_area {margin-top: 25px;}


/* 할인금액 토글_240221 추가 */
.dc_card {margin-top:40px !important;}
.dc_card h2 { float:left; color:#000000; font-size:22px; font-weight:bold;}
.dc_card a {margin-left:16px;}
.dc_card span {text-decoration:underline; text-underline-position:from-font;line-height:28px;}

.dc_price {margin-top:40px !important;}
.dc_price h2 { color:#000000; font-size:22px; font-weight:bold; margin-bottom:15px;}
.dc_info {font-size:14px; line-height:24px;font-weight:normal;}

.dc_table  {width:100%; border-collapse:collapse;border-spacing:0; margin:20px 0;}
.dc_table td{border-color:black;border-style:solid;border-width:1px;font-size:14px; overflow:hidden;padding:10px 5px;word-break:keep-all;}
.dc_table th{border-color:black;border-style:solid;border-width:1px;font-size:14px; font-weight:normal;overflow:hidden;padding:10px 5px;word-break:keep-all;}
.dc_table .tit{border-color:inherit;font-size:16px;font-weight:bold;text-align:center;vertical-align:top;color:#323949;}
.dc_table .card{background-color:#f5f5f5;border-color:#656565;font-size:14px;font-weight:bold;text-align:left;vertical-align:top; color:#323949;}
.dc_table .be{border-color:#656565;font-size:14px;text-align:left; color:#323949; font-weight:bold;} 
.dc_table .be span{color:#00BCD4;}
.dc_table .bes{border-color:#656565;font-size:14px;text-align:left; color:#323949; font-weight:bold; line-height:22px;}
.dc_table .bes span{color:#00BCD4;}
.dc_table .bes p{color:#595959; font-weight:normal;font-size:13px;}


/********************************
 추천상품
********************************/
.direct_recomm {padding: 45px 0 60px; margin-top: 35px; background-color: #6c8fe0;}
.direct_recomm .recomm_title {font-size: 21px; color: #fff; font-weight: 600;}
.direct_recomm .recomm_title_m {font-size: 18px; color: #fff; font-weight: 400;}
/*.recomm_list .box {background-color: #fff;}*/


.direct_recomm .recomm_list {margin-top: 25px ;position: relative;}
.direct_recomm .recomm_list .swiper-container {margin: 0 -20px; padding: 20px 120px 30px 20px;}
/*
.direct_recomm .recomm_list .box {padding: 20px; background-color: #fff; height: 205px; border-radius: 15px; box-sizing: border-box; cursor: pointer; width:100%;text-align: left;}
.direct_recomm .recomm_list .box:hover,
.direct_recomm .recomm_list .box.active {
  -webkit-animation: item-shadow 0.1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  animation: item-shadow 0.1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
*/
.direct_recomm .recomm_list .box {cursor: pointer; width:100%;}

.direct_recomm .recomm_list .box .btn_more {padding: 0; position: absolute; right: 0; top: 0; width: 35px; height: 35px; border-radius: 0 15px 0 15px; border: 0; background-color: #00b1c9; cursor: pointer; box-sizing: border-box;}
.direct_recomm .recomm_list .box .btn_more:before,
.direct_recomm .recomm_list .box .btn_more:after {content: ""; position: absolute; display: block; background-color: #fff;}
.direct_recomm .recomm_list .box .btn_more:before {left:10px; top:17px; width:16px; height: 2px;}
.direct_recomm .recomm_list .box .btn_more:after {left:17px; top:10px; width:2px; height: 16px;}
.direct_recomm .recomm_list .box .btn_more .text {font-size: 0;}
.direct_recomm .recomm_list .box .copy {position: relative; font-size: 18px; line-height: 28px; font-weight: 600; z-index: 1; letter-spacing: -0.03em; word-break: keep-all;}
.direct_recomm .recomm_list .box .detail {margin-top: 15px; padding-top: 25px; position: relative; font-size: 14px; line-height: 20px; font-weight: 700; color: #00b1c9; z-index: 1; letter-spacing: -0.05em;  word-break: keep-all;}
.direct_recomm .recomm_list .box .detail:before {content: ""; position: absolute; top: 1px; left:0; display: block; width: 30px; height: 1px; background-color: #323949;}
/*
.direct_recomm .recomm_list .box .img {padding-right: 10px; position: absolute; right: 0; bottom: 20px; z-index: 0; text-align: right;}
.direct_recomm .recomm_list .box .img img {display: inline-block; width: 80%;}
*/
.direct_recomm .recomm_list .box .img { position: relative; right: 0; z-index: 0;}
.direct_recomm .recomm_list .box .img img {display: inline-block; width: 100%;}
.direct_recomm .recomm_list .swiper-slide{border-radius: 30px;}

/********************************
 정보입력
********************************/
.custmer_info {padding: 0 0 60px 0}

.copy_title {margin: 50px 0 60px; text-align: center;}
.copy_title p {font-size: 36px; color: #000; font-weight: 700;}

.info_title {margin-top: 10px; padding: 0 0 15px; font-size: 16px; color: #222; border-bottom: 2px solid #323a47;}
.info_title b {margin-top: 40px; padding: 0 0 15px; font-size: 21px; color: #222; font-weight: 600; }
.info_notice {margin-top: 10px; font-size: 14px; color: #000;}
.info_table {margin-top: 20px;}
.info_table dl {width: 100%; font-size: 0;}
.info_table dl + dl {}
.info_table dl dt {font-size: 13px; color: #000; font-weight: 600; text-align: left;}
.info_table dl dd {padding: 6px 0 20px;}
.info_table dl dd .input_name + .btn_name {margin-top: 10px; width: 100%;}
.info_table dl.info_rrn span {display: inline-block; font-size: 13px; vertical-align: middle;}
.info_table dl.info_rrn span.dash {width:20px; text-align: center;}
.info_table dl.info_rrn span.blind {margin-left: 15px;}

.info_table .info_local .country_area .country_item + .country_item {margin-top: 10px;}
.info_table .info_local .country_area p {margin-top: 15px; font-size: 12px; color: #666;}
.info_table .info_address .post_area {font-size: 0;}
.info_table .info_address .post_area .input_post {width: calc(100% - 120px); vertical-align: middle;}
.info_table .info_address .post_area .btn_post {width: 110px; vertical-align: middle;}
.info_table .info_address .post_area .input_post + .btn_post {margin-left: 10px;}
.info_table .info_address .address_area .post_item {margin-top: 10px; display: block;}
.info_table .info_address .address_area .input_form {width: 100%;}
.info_table .info_date {font-size: 0;}
.info_table .info_date .date_area {font-size: 0;}
.info_table .info_date .date_area .input_cal_wrap {width: 100%; height:43px; border: 1px solid #bfbfbf; border-radius: 6px; overflow: hidden; vertical-align: middle; box-sizing: border-box;}
.info_table .info_date .date_area .input_cal_wrap .input_calender {padding-left: 15px; width: calc(100% - 44px); height: 40px; border: 0; font-size: 12px; box-sizing: border-box; vertical-align: middle;}
.info_table .info_date .date_area .input_cal_wrap .btn_cal {display: inline-block; width: 44px; height: 41px; line-height: 44px; cursor: pointer; text-align: center;}
.info_table .info_date .date_area .input_cal_wrap .btn_cal img {display: inline-block; width: 16px; vertical-align: middle;}
.info_table .info_date .date_area .date_item + .date_item {margin-top: 10px;}
/* 20220704 추가 */
.info_table .info_date .date_area p {margin-top: 15px; font-size: 12px; color: #666;}
.info_table .info_notice {margin-top: 15px; font-size: 12px; color: #666;}

.info_table .chk_email {margin-top: 10px;}
.info_table .chk_email .email_item {display: block; font-size: 0;}
.info_table .chk_email .email_item + .email_item {margin-top:10px;}
.info_table .chk_email .email_item input.input_form {width: 48%;}
.info_table .chk_email .email_item span {display: inline-block; width: 4%; font-size: 12px; text-align: center;}
.info_table .chk_email .email_item select.input_form {width: 100%;}

.info_table .input_name,
.info_table .input_phone,
.info_table .input_country,
.info_table .input_add1,
.info_table .input_add2,
.info_table .input_time
 {width: 100%;}
.info_table .input_rrn1 {width: calc(100% - 190px);}
.info_table .input_rrn2 {width: 40px;}
.info_table .input_country + .input_country {margin-top: 10px;}
.info_table .input_post {width: calc(100% - 110px);}
.info_table .btn_post {padding: 13px 15px 12px; width: 110px;}



/* 납부정보 */
.certi_sel {margin-top: 15px; display: none; font-size: 0;}
.certi_sel.active {display: block;}
.certi_sel .certi_item + .certi_item {margin-top: 10px;}

.certi_sel .certi_item select.input_form {width: 100%;}
.certi_sel.bank .certi_item input.input_form {width: 100%;}
.certi_sel.card .certi_item input.input_form + input.input_form {margin-left: 10px;}
.certi_sel.card .card_num {margin: 10px -5px; font-size: 0;}
.certi_sel.card .card_num .c_num {padding: 0 5px; display: inline-block; width: 25%}
.certi_sel.card .card_num .c_num input.input_form {}
.certi_sel.card .card_line2  {margin: 10px -5px 0 -5px;}
.certi_sel.card .card_line2 .certi_item {margin: 0; padding: 0 5px; display: inline-block; width: 50%;}
.certi_sel .btn_primary {padding: 0; width: 100%;}


/* 약관동의 */
.info_agree{margin-top: 15px;}
.info_agree .all_box {padding: 20px; background-color: #f5f5f5; border-radius: 12px; box-sizing: border-box; overflow: hidden;}
/* 20220704 추가 */
.info_agree .all_box .notice {margin-top: 15px; float: left; font-size: 12px; color: #666;}

.info_agree .all_box .chk_box input[type="checkbox"] + label {padding-left: 40px;}
.info_agree .all_box .chk_box input[type="checkbox"] + label:before {width: 30px; height: 30px;}
.info_agree .all_box .chk_box input[type="checkbox"]:checked + label:after {width: 15px; height: 10px; top: 8px; left:10px;}
.info_agree .all_box .chk_box .text {font-size: 16px; line-height: 30px; color: #222; font-weight: 600;}
.info_agree .agree_box {margin-top:20px;}
/* 20220704 추가 */
.info_agree .agree_box .notice {margin-top: 10px; font-size: 12px; color: #000; }

.info_agree .agree_box dt {position: relative;}
.info_agree .agree_box dt .btn_more {position: absolute; top:0; right:10px; display: block; width:24px; height: 24px; font-size: 0; text-indent: -9999px;}
.info_agree .agree_box dt .btn_more:after {content: ""; position: absolute; left:3px; top:0; display: inline-block; width: 15px; height: 15px; border-style: solid; border-color: #323949; border-width: 0 0 2px 2px; transform: rotate(-45deg);}
.info_agree .agree_box.active dt .btn_more:after {top: 8px; transform: rotate(135deg);}

.info_agree .agree_box dt .agree_title {overflow: hidden;}
.info_agree .agree_box dt .agree_title .chk_box label .text {font-size: 13px; color: #333; font-weight: 600;}

.info_agree .agree_box dd {display: none;}
.info_agree .agree_box.active dd {display: block;}
.info_agree .agree_box dd .agree_cont {margin-top: 15px; padding: 12px 2px 12px 15px; height: 150px; border: 2px solid #cdcdcd; border-radius: 12px; font-size: 11px; color: #666; line-height: 15px; box-sizing: border-box;}
/* 20220706 추가 */
.info_agree .agree_box .agree_cont h3{padding-bottom:10px; font-size: 12px; font-weight: 600;}
.info_agree .agree_box dd .agree_cont .scroll {padding: 0 15px 0 0}
.info_agree .agree_box dd.active .agree_cont {border-color: #07a5bf; }
.alert_chk {margin-top: 15px;}
.alert_chk .chk_email {margin-top: 10px; display: none;}
.alert_chk .chk_email .email_item {display: block; font-size: 0;}
.alert_chk .chk_email .email_item + .email_item {margin-top:10px;}
.alert_chk .chk_email .email_item input.input_form {width: 48%;}
.alert_chk .chk_email .email_item span {display: inline-block; width: 4%; font-size: 12px; text-align: center;}
.alert_chk .chk_email .email_item select.input_form {width: 100%;}
.alert_chk .chk_email.active {display: block;}
/* 안내사항 토글 */
.info_toggle {margin-top:20px ;}


/********************************
 푸터
********************************/
.direct_footer {padding: 30px 0 100px 0; background-color: #eee;}
.direct_footer .ft_logo {width: 220px;}
.direct_footer .ft_info {margin-top: 30px; font-size: 0;}
.direct_footer .ft_info li {margin-right: 20px; position: relative; display: inline-block; font-size: 12px; line-height: 22px; color: #7a8490;}
.direct_footer .ft_info li strong {font-weight: 600;}
.direct_footer .ft_info li span {margin-left: 20px;}

/********************************
 하단 푸터고정
********************************/
.direct_btm {position: fixed; left: 0; bottom: 0; border-top: 1px solid #323949; width: 100%; min-width: 320px; z-index: 1000;}
/* .direct_btm .price_product {padding: 10px 20px; margin: 0; background-color: #323949; border-radius: 10px 10px 0 0; text-align: center;}
.direct_btm .price_product p {margin:0; font-size: 15px; font-weight: 600; color: #fff;} */
.direct_btm .price_area {position: relative;}
.direct_btm .price_area:after {content: ""; display: block; clear: both;}
.direct_btm .price_area .price_pay {padding:0 14px; float: left; width: calc(100% - 80px); overflow: hidden; background-color: #fff; height: 110px;} /* 20240206 수정 */
/* 20240206 추가 */
.direct_btm .price_area .price_pay > li {clear: both;position: relative;padding: 5px 0; list-style: none;}
.direct_btm .price_area .price_pay > li:after {content: ""; display: block; clear: both;}
/* 20240206 추가 */
.direct_btm .price_area .price_pay strong {padding: 14px 0 0; float: left; font-size: 16px; line-height: 1; font-weight: 600; color: #323949;}
.direct_btm .price_area .price_pay strong span {font-size: 11px; font-weight: 400;}
.direct_btm .price_area .price_pay p.payment {padding: 10px 0 5px; float: right; text-align: right;}
.direct_btm .price_area .price_pay p.payment .cash {display: block; font-size: 20px; color: #e93d6a; font-weight: 700;}
.direct_btm .price_area .price_pay p.payment .tag_card {float: right; display: block; width: 50px; height: 17px; font-size: 11px; line-height: 17px; color: #fff; font-weight: 600; background-color: #e93d6a; text-align: center; border-radius: 3px;}

.direct_btm .price_area .price_pay2 {padding:0 14px; float: left; width: calc(100% - 80px); overflow: hidden; background-color: #fff; height: 110px;}
.direct_btm .price_area .price_pay2 > li {clear: both;position: relative;padding: 5px 0; list-style: none;}
.direct_btm .price_area .price_pay2 > li:after {content: ""; display: block; clear: both;}
.direct_btm .price_area .price_pay2 strong {padding: 12px 0 0; float: left; font-size: 16px; line-height: 1.2; font-weight: 600; color: #323949;}
.direct_btm .price_area .price_pay2 strong span {font-size: 11px; font-weight: 400;}
.direct_btm .price_area .price_pay2 p.payment {padding: 10px 0 5px; float: right; text-align: right;}
.direct_btm .price_area .price_pay2 p.payment .cash {display: block; font-size: 20px; color: #e93d6a; font-weight: 700;}
.direct_btm .price_area .price_pay2 p.payment .tag_card {float: right; display: block; width: 50px; height: 17px; font-size: 11px; line-height: 17px; color: #fff; font-weight: 600; background-color: #e93d6a; text-align: center; border-radius: 3px;}

.direct_btm .price_area .btn_step {width: 100px; font-family: inherit;}
.direct_btm .price_area .btn_step span {font-size: 15px; font-weight: 700; color: #fff;}
.direct_btm .price_area .btn_step {float: right; width: 80px; height: 110px; border: 0;} /* 20240206 수정 */
.direct_btm .price_area .btn_step.btn_next {background-color: #00a0e9;}
.direct_btm .price_area .btn_step.btn_join {background-color: #e93d6a;}

/* SNS 공유 */
.direct_share {margin: 30px 0 50px; text-align: center;}
/*.direct_share .share_list li {display: inline-block;  width: 40px; height: 40px; border-radius: 50%;} */
.direct_share .share_list li {display: inline-block;  width: 300px; height: 48px; }
.direct_share .share_list li + li {margin-left: 16px;}
.direct_share .share_tit {margin-top: 25px; font-size: 13px; color: #222;}
.direct_share .share_tit {}

/********************************
 딜친소 배너
********************************/
.friend_share {
    width: 100%;
    padding: 0 20px;
    margin: 30px auto;
    position: relative;
    text-align: center;
}

/********************************
 팝업 공통 스타일
********************************/
.popup_wrap {
  display:none;
  position:fixed;
  left:0;
  top:0;
  width:100%;
  height:100%;
  z-index:1000;
  /* overflow-y:auto; */
  box-sizing:border-box;
	font-family: "나눔고딕", "NanumGothic";
}
.popup {background-color: #fff;}
.popup .pop_close {padding:30px 0 0; position:absolute; top:10px; right:15px; display: block; width:30px; height:30px; overflow: hidden; box-sizing: border-box; cursor: pointer; z-index: 100;}
.popup .pop_close .text {font-size: 0; text-indent: -9999px;}
.popup .pop_close:before, .popup .pop_close:after {content:'';display:block;position:absolute;left:50%;top:50%;width: 18px;height:2px;margin:-1px 0 0 -10px; background:#fff;-webkit-transition:all 0.3s ease;transition:all 0.3s ease; cursor: pointer;}
.popup > .pop_close:before {-ms-transform:rotate(-45deg);-webkit-transform:rotate(-45deg);transform:rotate(-45deg);}
.popup > .pop_close:after {-ms-transform:rotate(45deg);-webkit-transform:rotate(45deg);transform:rotate(45deg);}

.pop_contents .img_area .inner {padding: 0 20px;}
.pop_contents .img_area img {width: 100%; max-width: 100%;}

.pop_footer {padding: 20px 35px 30px 35px; border-radius: 0 0 20px 20px; border: 2px solid #323949; border-top:0; box-sizing: border-box;}
.btn_wrap {text-align: center; font-size: 0;}
.btn_wrap .btn_pop {padding: 10px 0; display: inline-block; width: 100%; height: 40px; border-radius: 20px; box-sizing: border-box; font-family: inherit;}
.btn_wrap .btn_pop span {font-size: 13px; font-weight: 600; vertical-align: middle;  color: #fff;}
.btn_wrap .btn_pop i {margin-left: 10px; display: inline-block; width: 15px; height: 15px; vertical-align: middle; color: #fff; }
.btn_wrap .btn_pop i img {max-width: 100%;}


/********************************
 팝업 스타일
********************************/
.popup_wrap .pop_header {padding: 15px 20px; position: fixed; width: 100%; height: 50px; top:0; background-color:#323949; z-index: 10;}
.popup_wrap .pop_header strong {font-size: 16px; color: #fff; font-weight: 600;}
.popup_wrap .pop_contents {position: fixed; top:50px; width:100%; height: calc(100% - 50px); overflow-y:auto; background-color: #fff;}
.popup_wrap .pop_contents .btn_wrap {margin: 15px auto 20px;}
.popup_wrap .pop_contents .btn_wrap .btn_pop {width: 250px;}


/* 팝업 : 회색박스 공통 스타일 - 정렬좌우 */
.pop_box1 {padding: 20px 20px 25px; display:block; width:100%; border-radius:10px; background-color:#e9eef2; box-sizing:border-box;}
.pop_box1 dl {overflow:hidden;}
.pop_box1 dl + dl {margin-top: 18px;}
.pop_box1 dl dt {font-size:13px; line-height:30px; color:#000; font-weight: 600;}
.pop_box1 dl dd {}

/* 팝업 : 동의 스타일 */
.pop_contents .agree_box {margin-top: 20px;}
.pop_contents .agree_box .chk_box label .text {font-size: 13px; color: #222; font-weight: 600;}

.pop_contents .agree_box .agree_cont {margin-top: 16px; padding: 12px 2px 12px 15px; height: 130px; border: 2px solid #cdcdcd; border-radius: 6px; font-size: 11px; color: #666; line-height: 15px; box-sizing: border-box;}
.pop_contents .agree_box .agree_cont .scroll {padding: 0 15px 0 0;}
.pop_contents .agree_box.active .agree_cont {border-color: #07a5bf; }

/* 팝업 : 뻐른상담신청 */
.popup_consulting .pop_contents {padding: 0 30px;}
.popup_consulting .copy {padding: 20px 0 15px; font-size: 15px; line-height: 20px; color: #323949;}
.popup_consulting .copy strong {position: relative; display: inline-block; color:#e93d6a; font-weight: 800; z-index: 1;}
.popup_consulting .copy strong:before {content: ""; position: absolute; left: 0; top: 7px; display: inline-block; height: 15px; width: 100%; background-color: #fff799; z-index: -1;}

/* 상품 서비스 자세히보기 토글 (할인옵션) */
.discount_toggle {margin: 25px auto; width: calc(100% - 40px); letter-spacing: -0.05em; border: 1px solid #ccc; border-radius: 18px; overflow: hidden;}
.discount_toggle > dt {padding:10px 20px; position: relative; height: 35px;  background-color: #f5f5f5;  cursor: pointer;}
.discount_toggle > dt p {font-size: 13px; color: #323949; font-weight: 600;}
.discount_toggle > dt .btn_more {position: absolute; right: 10px; top: 0; display: block; width: 36px; height: 36px; font-size: 0; text-indent: -9999px;}
.discount_toggle > dt .btn_more:before, .discount_toggle > dt .btn_more:after {content: ""; position: absolute; display: block; background-color: #192a4e;}
.discount_toggle > dt .btn_more:before {left:10px; top:17px; width:16px; height: 2px;}
.discount_toggle > dt .btn_more:after {left:17px; top:10px; width:2px; height: 16px;}
.discount_toggle.active > dt .btn_more:after {display: none;
}
.discount_toggle > dd {padding: 0 10px 25px; display: none; border-top: 1px solid #ccc;}
.discount_toggle.active > dd {display: block;}
.discount_toggle > dd .dis_desc {padding: 20px 0 15px; font-size: 20px; color: #323949; font-family: 'GmarketSansMedium'; text-align: center;}
.discount_toggle > dd .dis_desc span {color: #e93d6a; font-family: 'GmarketSansBold';}

.discount_box {padding: 10px; background-color:#e9eef2; font-family: 'GmarketSansMedium'; border-radius: 15px; }
.discount_box dl.item dt.item_title {padding: 6px 15px 4px; position: relative; height: 30px; border-radius: 15px; background-color:#cdd6de; overflow: hidden;}
.discount_box dl.item dt.item_title strong {margin: 0; font-size: 14px; color: #323949; font-family: 'GmarketSansBold';}
.discount_box dl.item dt.item_title a {padding:6px 0; position: absolute; right: 0; top: 0; display: block; width: 75px; height: 30px; border-radius: 15px; background-color: #fff; box-sizing: border-box; text-align: center; box-shadow: -5px 0px 10px 0px rgba(50, 57, 73, 0.2);}
.discount_box dl.item dt.item_title a span {font-size: 10px; color: #323949; font-family: 'GmarketSansBold';}
.discount_box dl.item dt.item_title a span:after {content: ""; margin-left: 5px; display: inline-block; width: 6px; height: 6px; border-style: solid; border-color: #323949; border-width: 0 0 2px 2px; transform: rotate(-135deg);}
.discount_box dl.item dd.item_cont {padding: 15px; position: relative;  word-break: keep-all;}
.discount_box dl.item dd.item_cont .item_img {position: absolute; right: 0; top: 50px;}
.discount_box dl.item dd.item_cont > ul > li + li {margin-top: 15px;}
.discount_box dl.item dd.item_cont .title {font-size: 12px; line-height: 16px; color: #323949;}
.discount_box dl.item dd.item_cont .text_detail {padding: 0 10px;}
.discount_box dl.item dd.item_cont .text_detail > li {padding-left: 10px; position: relative; font-size: 10px; line-height: 15px; color: #555;}
.discount_box dl.item dd.item_cont .text_detail > li:before {content: "·"; position: absolute; left: 0; top: 0;}
.discount_box dl.item dd.item_cont p.text_etc,
.discount_box dl.item dd.item_cont .text_etc li {padding-left: 12px; position: relative; font-size: 9px; line-height: 14px; color: #7a8490;}
.discount_box dl.item dd.item_cont p.text_etc:before,
.discount_box dl.item dd.item_cont .text_etc li:before {content: "※"; position: absolute; left: 0; top: 0;}

.toggle_title {margin: 35px 0 30px; text-align: center;}
.toggle_title p {font-size: 24px; color: #000; font-weight: 600; line-height: 1.2;}
.toggle_title p span {font-size: 18px; color: #000; font-weight: 400;}
.toggle_title p strong {color: #00afca; font-weight: 700;}


/* 팝업 : 우편번호 검색 */
.popup_post .pop_contents {padding-top: 30px;}
.popup_post .pop_contents .inner {padding: 0 20px;}
.popup_post .search_area .certi_radio {border-bottom: 1px solid #ccc; padding-bottom: 15px;}
.popup_post .search_area .adress_sel {display: none; margin-top: 16px;}
.popup_post .search_area .adress_sel.active {display: block;}
.popup_post .search_area .adress_sel .box:after {content: ""; display: block; clear: both;}
.popup_post .search_area .adress_sel .adress_item + .adress_item {margin-top: 16px;}
.popup_post .search_area .adress_sel .adress_item dt {font-size: 12px; color: #666;}
.popup_post .search_area .adress_sel .adress_item dd {margin-top: 8px; font-size: 13px;}
.popup_post .search_area .adress_sel .adress_item.num_item dd {font-size: 0;}
.popup_post .search_area .adress_sel .adress_item.num_item dd span {display: inline-block; font-size: 13px;  width: calc(50% - 10px);}
.popup_post .search_area .adress_sel .adress_item.num_item dd span.post_dash {width: 20px; text-align: center;}
.popup_post .search_area .adress_sel .adress_item .btn_post_search {padding:13px 10px 12px; width: 100%; vertical-align: bottom;}

.popup_post .search_area .text_etc {margin-top: 5px; font-size: 14px; color: #666; line-height: 20px;}
.popup_post .adress_area {margin-top: 30px;}
.popup_post .adress_area .ad_head {background-color: #e9eef2; border-top: 3px solid #323949; border-bottom: 1px solid #7a8490;}
.popup_post .adress_area .ad_head dl {font-size: 0;}
.popup_post .adress_area .ad_head dl dt {padding: 15px 0; font-size: 13px; font-weight: 600; text-align: center; color: #192a4e;}
.popup_post .adress_area .ad_head .adress_label {display: inline-block; width: calc(100% - 80px);}
.popup_post .adress_area .ad_head .post_label {display: inline-block; width: 80px;}

.popup_post .adress_area .ad_body {padding: 3px 2px 3px 0;height: 340px; border-bottom: 1px solid #dde2e5; box-sizing: border-box;}
.popup_post .adress_area .list_post li {position: relative; padding-left: 10px; cursor: pointer;}
.popup_post .adress_area .list_post li:after {content: ""; display: block; clear: both;}
.popup_post .adress_area .list_post li + li {border-top: 1px solid #dde2e5;}
.popup_post .adress_area .list_post li:after {content: ""; display: block; clear: both;}
.popup_post .adress_area .list_post li .address_area {padding: 10px 0; float: left; width: calc(100% - 80px);}
.popup_post .adress_area .list_post li .address_area dl {overflow: hidden;}
.popup_post .adress_area .list_post li .address_area dl + dl {margin-top: 5px;}
.popup_post .adress_area .list_post li .address_area .ad_title {float: left; background-color:#7a8490; font-size: 12px; color:#fff;  font-weight: 600; width: 40px; height: 15px; line-height: 15px; text-align: center; border-radius: 3px;}
.popup_post .adress_area .list_post li .address_area .ad_info {padding: 0 10px; font-size: 10px; color:#333; box-sizing: border-box; overflow: hidden;}
.popup_post .adress_area .list_post li .ad_num {position: absolute; top:50%; margin-top: -8px; width: 80px; font-size: 12px; font-weight: 600; color: #333; text-align: center;}
.popup_post .adress_area .list_post li .ad_num span {width: 100vw;}
.popup_post .adress_area .list_post li.no_item {padding: 20px 0;display: table; width: 100%; box-sizing: border-box; cursor: inherit;}
.popup_post .adress_area .list_post li.no_item .box {display: table-cell; text-align: center;}
.popup_post .adress_area .list_post li.no_item .box span {display: inline-block;}

.popup_post .pop_footer {padding: 25px 0;}

/********************************
 툴팁 팝업
 ********************************/
.popup_tooltip {display: none; position: absolute; border: 1px solid #323949; min-width: 320px; width: calc(100% - 40px);  border-radius: 10px; background-color: #e9eef2; z-index: 100; left: 50%;
 transform:translateX(-50%);
 -webkit-transform:translateX(-50%);
 -moz-transform:translateX(-50%);
 -ms-transform:translateX(-50%);
 -o-transform:translateX(-50%);
}

.popup_tooltip .ui_close {right: 15px; top:15px;}
.popup_tooltip .tooltip_cont {padding: 40px;}

.popup_tooltip .item_cont {padding: 20px; position: relative; font-family: 'GmarketSansMedium';}
.popup_tooltip .item_cont.font_nanum {font-family: "나눔고딕", "NanumGothic";}

.popup_tooltip .item_cont > li + li  {margin-top: 10px;}
.popup_tooltip .item_cont .title {font-size: 14px; line-height: 24px; color: #323949;}
.popup_tooltip .item_cont .title span.plus {margin: 0 5px; display: inline-block; width: 18px; height: 18px; vertical-align: middle;}
.popup_tooltip .item_cont .text_detail {padding: 0 10px;}
.popup_tooltip .item_cont .text_detail > li {padding-left: 5px; position: relative; font-size: 11px; line-height: 16px; color: #555;}
.popup_tooltip .item_cont .text_detail > li:before {content: "·"; position: absolute; left: 0; top: 0;}
.popup_tooltip .item_cont p.text_etc,
.popup_tooltip .item_cont .text_etc li {font-size: 11px; line-height: 15px; color: #7a8490;}

.popup_tooltip .item_cont .box {margin-top: 15px; padding: 15px; background-color: #fff; border-radius: 10px;}
.popup_tooltip .item_cont .box:after {content: ""; display: block; clear: both;}

.popup_tooltip .item_cont p.text {font-size: 11px; color: #323949; font-weight: 600;}
.popup_tooltip .item_cont p.text:before {content: "*";}
.popup_tooltip .item_cont .text_list {margin-top: 5px;}
.popup_tooltip .item_cont .text_list li {position: relative; padding-left: 10px; font-size: 11px; color: #323949;}
.popup_tooltip .item_cont .text_list li:before {content: "ㆍ"; position: absolute; left: 0; top:0;}
.popup_tooltip .item_cont .text_list li + li {margin-top: 3px;}
.popup_tooltip .item_cont .btn_more {margin-top:5px; float: right; font-size: 11px; font-weight: 600; color: #00a2bd;}
.popup_tooltip .item_cont .btn_more i {display: inline-block; width: 15px; height: 15px; vertical-align: middle;}
.popup_tooltip .item_cont .service_list li {display: table; width: 100%; padding: 15px 0; border-bottom: 1px solid #d8d8d8; }
.popup_tooltip .item_cont .service_list li:after {content: ""; display: block; clear: both;}
.popup_tooltip .item_cont .service_list li > div {display: table-cell; vertical-align: middle;}
.popup_tooltip .item_cont .service_list li .service_logo {width:10%;}
.popup_tooltip .item_cont .service_list li .service_logo img {width:100%; max-width: 60px;}
.popup_tooltip .item_cont .service_list li .service_price {width:25%;}
.popup_tooltip .item_cont .service_list li .service_price p {font-size: 11px; color: #323949; text-align: center; word-break: keep-all;}
.popup_tooltip .item_cont .service_list li .service_price p strong {font-size: 15px; font-family: 'GmarketSansBold';}
.popup_tooltip .item_cont .service_list li .service_tel {width: 65% ; text-align: center;}
.popup_tooltip .item_cont .service_list li .service_tel .tag {padding: 0 5px; display: inline-block; min-width: 95px; height: 18px; background-color: #e93d6a; border-radius: 15px; box-sizing: border-box;}
.popup_tooltip .item_cont .service_list li .service_tel .tag span {font-size: 11px; line-height: 18px; color: #fff; letter-spacing: -0.05em;}
.popup_tooltip .item_cont .service_list li .service_tel p {margin-top: 10px; font-size: 12px; line-height: 16px; color: #323949; letter-spacing: -0.08em; word-break: keep-all;}
.popup_tooltip .item_cont .service_etc {margin-top: 10px;}
.popup_tooltip .item_cont .service_etc li {padding-left: 12px; position: relative; font-size: 11px; letter-spacing: -0.05em; color: #7a8490;}
.popup_tooltip .item_cont .service_etc li:before {content: "※"; position: absolute; left: 0; top: 0;}


/********************************
 이벤트 팝업
 ********************************/
.popup_evt {display:none; position:absolute; z-index:99;}
.popup_evt.active {display:block;}
.popup_evt dt {font-size:0;}

/* 납부요금 계산 버튼 이벤트 배너 */
.popup_evt1 {
  animation-name: pop-floating;
  -webkit-animation-name: pop-floating;
  animation-duration: 1.5s;
  -webkit-animation-duration: 1.5s;
  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
  left:50%;
  margin-left: -160px;
 }
.popup_evt1 .ui_close {right: 10px; top: 30px;}

/* 수신동의 이벤트 배너 */
.popup_evt2 {margin-top: 15px; position: relative; width: 250px;}
.popup_evt2 > dl {display: block; overflow: hidden;}
.popup_evt2 > dl dd:before{content: ''; display: inline-block;width: 0; height: 0; position: absolute; top: -15px; left: 30px; border-right: 10px solid transparent; border-left:10px solid transparent; border-bottom:15px solid #e8edf3;}
.popup_evt2 .ui_close {right: 10px; top:10px;}




/* 스크롤퀵배너 */
.popup_quick_evt {display:none; position:absolute; z-index:99;}
.popup_quick_evt.active {display:block;}
.popup_quick_evt dt {font-size:0;}

.popup_quick {
  animation-name: pop-floating;
  -webkit-animation-name: pop-floating;
  animation-duration: 1.5s;
  -webkit-animation-duration: 1.5s;
  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
  left:78%;
  margin-left: -120px;
  z-index:999;
  top:50%;
 }
/*.popup_quick .quick_close {right:-20px; top: 1px;} 작은 팝업_230109*/
.popup_quick .quick_close {right:-15px; top: -2px;}


.quick_close {overflow:hidden; display:block; position:absolute; width: 54px;height:54px; padding:30px 0 0;  z-index:2;cursor: pointer;}
.quick_close:before, .quick_close:after {content:'';display:block;position:absolute;left:50%;top:50%;background: url("/html/images/front/ko/direct/pop_chicken_close.png"); margin:-1px 0 0 -2px;-webkit-transition:all 0.3s ease;transition:all 0.3s ease; cursor: pointer;}
.quick_close:before {-ms-transform:rotate(-45deg);-webkit-transform:rotate(-45deg);transform:rotate(-45deg);}
.quick_close:after {-ms-transform:rotate(45deg);-webkit-transform:rotate(45deg);transform:rotate(45deg);}


/********************************
 클로즈 메세지 팝업(알림)
 ********************************/
.popup_meg {display:none; position: fixed; left:0; top:0; width:100%; height:100%; overflow-y:auto; z-index:1000;}
.popup_meg .popup {
   position:relative;
   top:50%; left:50%;
   transform:translate(-50%,-50%);
   -webkit-transform:translate(-50%,-50%);
   -moz-transform:translate(-50%,-50%);
   -ms-transform:translate(-50%,-50%);
   -o-transform:translate(-50%,-50%);
   -webkit-overflow-scrolling:touch;
   background-color:#fff;
   box-shadow: 5px 5px 10px rgba(3,32,15,0.2);
   z-index:1000;
   width: 320px;
   letter-spacing: -0.25px;	font-family: "나눔고딕", "NanumGothic";
   box-sizing: border-box;
   border-radius: 20px;
 }

 .popup_meg .pop_header {position:relative; padding:10px 25px; border-radius: 20px 20px 0 0; border: 2px solid #323949; border-bottom: 0;}
 .popup_meg .pop_header strong {font-size:24px; color:#fff; font-weight:600;}
 .popup_meg .pop_contents {border: 2px solid #323949; border-top:0; border-bottom:0; box-sizing: border-box;}

.popup_meg .ui_close {right: 20px; top: 20px;}
.popup_meg .pop_contents .img_area {margin-top: 15px; text-align: center;}

.popup_alert1 .pop_contents {padding: 0 20px;}
.popup_alert1 .pop_contents .text {font-size: 16px; line-height: 20px; color:#323949; letter-spacing: -0.05em; font-weight: 600;}

.popup_alert2 .alert_wrap {margin: 0 auto;}
.popup_alert2 .alert_wrap:after {content: ""; display: block; clear: both;}
.popup_alert2 .alert_wrap .img_area {margin: 0 auto; width: 130px;}
.popup_alert2 .alert_wrap .text_area {margin-top: 10px; text-align: center;}
.popup_alert2 .alert_wrap .text_area .text_point {font-size: 21px; font-weight: 700;  color:#323949;}
.popup_alert2 .alert_wrap .text_area .text_desc {margin: 15px 0 0 0; font-size: 18px; line-height: 24px; color:#323949;}

.popup_alert3 .text {margin: 0 20px; font-size: 16px; line-height: 24px; font-weight: 600; color:#323949;}


/********************************
 신청내역
 ********************************/
.direct_app {margin: 35px 0 50px;}
.direct_app .btn_wrap {text-align: center;}
.direct_app .app_desc {margin: auto; height: 80px;padding: 10px 0; border-radius: 25px; font-size: 15px; line-height: 30px; color: #000; text-align: center; background-color: #f5f5f5;}
.direct_app .app_desc.type2 {padding: 10px 0; height: 70px; line-height: 24px; border-radius: 35px;}
.direct_app .app_desc span {color: #00b1c9; font-weight: 600;}
.direct_app .box {margin-top: 30px;}
.direct_app .box dl {font-size: 0;}
.direct_app .box dl + dl {margin-top: 24px;}
.direct_app .box dl dt {font-size: 13px; font-weight: 600; color: #000;}
.direct_app .box dl dd {margin-top: 5px;}
.direct_app .box dl dd .input_form {width: 100%; font-size: 13px;}
.direct_app .box dl dd .btn_auth {margin-top: 15px; width: 100%;}
.direct_app .box .btn_wrap .btn_app {margin-top: 40px; width: 100%; height: 48px; border-radius: 24px; background-color: #00b1c9; text-align: center; border: 0;}
.direct_app .box .btn_wrap .btn_app span {color: #fff; font-size: 16px; font-weight: 600;}

.direct_app .table_wrap {margin-top: 30px;}
.direct_app .table_wrap .tbl_desc {text-align: right; font-size: 15px; color: #666; margin-top: 10px;}
.direct_app .table_wrap .tbl_app {margin-top: 15px; width: 100%; border-top: 3px solid #323949;}
.direct_app .table_wrap .tbl_app caption {font-size: 0; padding: 0;}
.direct_app .table_wrap .tbl_app th {padding: 10px 0; font-size: 13px; color: #192a4e; font-weight: 600; text-align: center; background-color: #e9eef2; border-bottom: 1px solid #7a8490;}
.direct_app .table_wrap .tbl_app td {padding: 7px 0; font-size: 12px; color: #333; text-align: center; border-bottom: 1px solid #dde2e5;}
.direct_app .btn_link {margin-top: 20px; width: 100%; height: 60px; background-color: #001b6a; border-radius: 12px; border: 0;}
.direct_app .btn_link span {display: inline; font-size: 18px; color: #fff; font-weight: 600; vertical-align: middle;}
.direct_app .btn_link i {margin-left: 7px; display: inline-block; width: 20px; vertical-align: middle;}

.direct_mini span { display: block; width: 80px; height: 40px; }



/* 테이블 스타일 추가_20220706 */
<style>
table{margin:5px 0;}

table tr td {
	border:1px solid #767676;
	padding:2px;
	font-size: 11px;

}
table tr th{
    background-color: #f5f5f5;
	border:1px solid #767676;
	padding:2px;
    text-align: center;
	font-size: 11px;
}

</style>