@charset "utf-8";

/*
 * date : 2024.09.24
 * 사용영역 : 구버전 모바일 페이지 재사용
 *
 */

/****************************************
# common
**************************************/
/* style */
.m-br {display:block;}

.blind {position:absolute; left:-9999px; width:1px; height:1px; margin:-1px; font-size:0; line-height:0; clip:rect(0 0 0 0);}
.visib-hidden {visibility:hidden;}
.d-block {display:block !important;}

/* 정렬 */
.d-flex {display:flex;}
.d-flex-wrap {flex-wrap:wrap;}
.d-flex-center {justify-content: center; align-items:center;}
.d-flex-align-center {align-items:center;}
.tal {text-align:left !important;}
.tac {text-align:center !important;}
.tar {text-align:right !important;}

/* margin */
.mgt0 {margin-top:0 !important;}
.mgt3 {margin-top:3px !important;}
.mgt5 {margin-top:5px !important;}
.mgt10 {margin-top:10px !important;}
.mgt15 {margin-top:15px !important;}
.mgt20 {margin-top:20px !important;;}
.mgt25 {margin-top:25px !important;}
.mgt30 {margin-top:30px !important;}
.mgt35 {margin-top:45px !important;;}
.mgt40 {margin-top:40px !important;}
.mgt45 {margin-top:45px !important;}
.mgt50 {margin-top:50px !important;}
.mgt60 {margin-top:60px !important;}
.mgt70 {margin-top:70px !important;;}
.mgt80 {margin-top:80px !important;;}
.mgt-3 {margin-top:-3px !important;}
.mgt-5 {margin-top:-5px !important;}
.mgt-10 {margin-top:-10px !important;}
.mgt-15 {margin-top:-15px !important;}
.mgt-20 {margin-top:-20px !important;}
.mgt-25 {margin-top:-25px !important;}
.mgt-30 {margin-top:-30px !important;}

.mgr0 {margin-right:0 !important;}
.mgr3 {margin-right:3px !important;}
.mgr5 {margin-right:5px !important;}
.mgr10 {margin-right:10px !important;}
.mgr15 {margin-right:15px !important;}
.mgr20 {margin-right:20px !important;}
.mgr25 {margin-right:25px !important;}
.mgr30 {margin-right:30px !important;}
.mgr35 {margin-right:35px !important;}
.mgr40 {margin-right:40px !important;}
.mgr45 {margin-right:45px !important;}
.mgr50 {margin-right:50px !important;}
.mgr60 {margin-right:60px !important;}
.mgr70 {margin-right:70px !important;}
.mgr-3 {margin-right:-3px !important;}
.mgr-5 {margin-right:-5px !important;}
.mgr-10 {margin-right:-10px !important;}
.mgr-15 {margin-right:-15px !important;}
.mgr-20 {margin-right:-20px !important;}
.mgr-25 {margin-right:-25px !important;}
.mgr-30 {margin-right:-30px !important;}

.mgb0 {margin-bottom:0 !important;}
.mgb3 {margin-bottom:3px !important;}
.mgb5 {margin-bottom:5px !important;}
.mgb10 {margin-bottom:10px !important;}
.mgb15 {margin-bottom:15px !important;}
.mgb20 {margin-bottom:20px !important;}
.mgb25 {margin-bottom:25px !important;}
.mgb30 {margin-bottom:30px !important;}
.mgb35 {margin-bottom:35px !important;}
.mgb40 {margin-bottom:40px !important;}
.mgb45 {margin-bottom:45px !important;}
.mgb50 {margin-bottom:50px !important;}
.mgb60 {margin-bottom:60px !important;}
.mgb70 {margin-bottom:70px !important;}
.mgb80 {margin-bottom:80px !important;}
.mgb-3 {margin-bottom:-3px !important;}
.mgb-5 {margin-bottom:-5px !important;}
.mgb-10 {margin-bottom:-10px !important;}
.mgb-15 {margin-bottom:-15px !important;}
.mgb-20 {margin-bottom:-20px !important;}
.mgb-25 {margin-bottom:-25px !important;}
.mgb-30 {margin-bottom:-30px !important;}

.mgl0 {margin-left:0 !important;}
.mgl3 {margin-left:3px !important;}
.mgl5 {margin-left:5px !important;}
.mgl10 {margin-left:10px !important;}
.mgl15 {margin-left:15px !important;}
.mgl20 {margin-left:20px !important;}
.mgl25 {margin-left:25px !important;}
.mgl30 {margin-left:30px !important;}
.mgl35 {margin-left:35px !important;}
.mgl40 {margin-left:40px !important;}
.mgl45 {margin-left:45px !important;}
.mgl50 {margin-left:50px !important;}
.mgl60 {margin-left:60px !important;}
.mgl70 {margin-left:70px !important;}
.mgl-3 {margin-left:-3px !important;}
.mgl-5 {margin-left:-5px !important;}
.mgl-10 {margin-left:-10px !important;}
.mgl-15 {margin-left:-15px !important;}
.mgl-20 {margin-left:-20px !important;}
.mgl-25 {margin-left:-25px !important;}
.mgl-30 {margin-left:-30px !important;}


/* padding */
.pd0  {padding:0px !important;}
.pdt0 {padding-top:0px !important;}
.pdt5 {padding-top:5px !important;}
.pdt10 {padding-top:10px !important;}
.pdt15 {padding-top:15px !important;}
.pdt20 {padding-top:20px !important;}
.pdt25 {padding-top:25px !important;}
.pdt30 {padding-top:30px !important;}
.pdt35 {padding-top:35px !important;}
.pdt40 {padding-top:40px !important;}

.pdr0 {padding-right:0px !important;}
.pdr5 {padding-right:5px !important;}
.pdr10 {padding-right:10px !important;}
.pdr15 {padding-right:15px !important;}
.pdr20 {padding-right:20px !important;}
.pdr25 {padding-right:25px !important;}
.pdr30 {padding-right:30px !important;}
.pdr35 {padding-right:35px !important;}
.pdr40 {padding-right:40px !important;}

.pdb0 {padding-bottom:0px !important;}
.pdb5 {padding-bottom:5px !important;}
.pdb10 {padding-bottom:10px !important;}
.pdb15 {padding-bottom:15px !important;}
.pdb20 {padding-bottom:20px !important;}
.pdb25 {padding-bottom:25px !important;}
.pdb30 {padding-bottom:30px !important;}
.pdb35 {padding-bottom:35px !important;}
.pdb40 {padding-bottom:40px !important;}
.pdb50 {padding-bottom:50px !important;}
.pdb60 {padding-bottom:60px !important;}
.pdb100 {padding-bottom:100px !important;}
.pdb120 {padding-bottom:120px !important;}

.pdl0 {padding-left:0px !important;}
.pdl5 {padding-left:5px !important;}
.pdl10 {padding-left:10px !important;}
.pdl15 {padding-left:15px !important;}
.pdl20 {padding-left:20px !important;}
.pdl25 {padding-left:25px !important;}
.pdl30 {padding-left:30px !important;}
.pdl35 {padding-left:35px !important;}
.pdl40 {padding-left:40px !important;}

/*form*/
input[type=text], input[type=email], input[type=tel], input[type=password ], input[type=search], input[type=date], input[type=number] { width:100%; height:46px; border:1px solid #d1d1d3; text-align:left; font-size:15px; color:#000; background-color:#fff; -webkit-appearance:none; box-sizing:border-box; -webkit-box-sizing:border-box;  -ms-box-sizing:border-box; }
input[type=text]:read-only,
input[type=email]:read-only,
input[type=tel]:read-only,
input[type=password ]:read-only, 
input[type=search]:read-only, 
input[type=date]:read-only, 
input[type=number]:read-only{color:#999; background-color:#f4f4f4; -webkit-appearance:none; box-sizing:border-box; -webkit-box-sizing:border-box;  -ms-box-sizing:border-box; }
input[type="number"] { -moz-appearance: textfield; } /* Firefox에서 input number 화살표 없애기 */

.radio_wrap {margin-top: 15px;}
.radio_wrap label + label {margin-left: 20px;}
.radio_wrap label > input[type="radio"] { display:inline-block; position:relative; width:18px !important; height:18px !important; padding:10px; vertical-align:-5px; background:url(../img/icon/btn_radiobox.png) no-repeat 0 0; background-size:18px 38px; border:0; appearance:none; -webkit-appearance:none; -moz-appearance:none; -ms-appearance:none; -o-appearance:none; }
.radio_wrap label > input[type="radio"]:checked { background:url(../img/icon/btn_radiobox.png) no-repeat 0px -18px; background-size:18px 38px; }

input[type="radio"] + label {display: flex; flex-wrap: wrap; align-items: center; width: 100%; min-height: 46px; padding:10px 10px 10px 35px; font-size:15px; font-weight:500; word-break:keep-all; border: 1px solid #ddd; border-radius: 6px;}
input[type="radio"] + label::before {content: ""; display: inline-block; position: absolute; left: 13px; top: 50%; width:15px; height:15px; vertical-align: middle; transform: translateY(-50%); background:url(../img/icon/chk_radio.png) no-repeat; background-size: contain;}
input[type="radio"]:checked + label {border-color:var(--color-main); font-weight: 500; background-color: var(--color-main-bg);}
input[type="radio"]:checked + label > span {display: inline-block; font-weight: 400;}
input[type="radio"]:checked + label::before {background:url(../img/icon/chk_radio_active.png) no-repeat; background-size: contain;}

.wid_col2 {display: flex; flex-wrap: wrap; width: 100%; margin: 0 -6px;}
.wid_col2 > p {display: flex; width: 50%; padding: 6px;}

select {display:block; color: #000; background:#fff url('../img/icon/select-btn-arrow.png') no-repeat right 20px center; background-size:10px 6px; appearance:none; -webkit-appearance:none; -moz-appearance:none; -ms-appearance:none; -o-appearance:none}
select::-ms-expand { display:none; } /* 화살표 없애기 for IE10, 11*/


.fileBox {display: flex;}
.fileBox input[type='file'] {display: block; width: 0; height: 0; overflow: hidden;}
.fileBox label {width: 80px; background: #333; border-radius: 6px; color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size:14px; font-weight:500; padding: 11px;}
.fileBox .upload-name {padding: 0 5px 0 10px; margin-left: 5px; display: flex; width: 100%; border: 1px solid #e7e7e7; border-radius: 6px; color: #999; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; box-sizing: border-box; align-items:center; font-size:14px;}

/* color */
.cl_prmy {color:var(--color-main) !important;}

/* 로딩바 */
#ajaxBusy {display:none; position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; background-color: rgba(0, 0, 0, .65); }
#ajaxBusy img {position: fixed; left: 50%; top: 50%; width: 80px; transform: translate(-50%, -50%);}


/****************************************
# 공통 레이아웃
****************************************/
.join_wrapper {max-width:620px; margin: 0 auto; padding-top: 30px; padding-bottom: 60px; background-color:var(--color-gray-brighter2); border-left: 1px solid var(--color-gray-brighter); border-right: 1px solid var(--color-gray-brighter)}
.join_wrapper_step01 {height: 100%;}
.join_wrapper_step03 {height: 100vh; padding-top: 0; background-color: var(--color-white);}

.sync {float:right; margin-right:0;}
.sync > input {float:left; margin-right:4px;}


/****************************************
# header
****************************************/
#header {position: relative;}
#header .sub_header { position:relative; width:100%; padding: 0 20px;}
#header .sub_header h1 { display:inline-block; font-size:18px; font-weight:600; text-align:center; letter-spacing:-0.5px; }



/****************************************
# content
****************************************/
/* 모바일 온라인 가입절차 */
.reg_wrap { position:relative; width:300px; margin:60px auto 30px; white-space:nowrap; }
.reg_wrap .bg { position:absolute; top:27px; left:30px; width:calc(100% - 70px); height:1px; position:absolute; top:27px; left:40px; border-bottom:1px solid #e2e2e2; background:#e6e6e6; z-index:-1; }
.reg_wrap span.step { display:inline-block; text-align:center; width:25%; color:#797979; font-size:14px; }
.reg_wrap span.step > span { display:table-cell; text-align:center; vertical-align:middle; width:100px; height:50px;  padding-top:8px; }
.reg_wrap span.step span.circle { display:block; width:20px; height:20px; margin:3px auto 8px; padding:5px 3px 0 3px; font-size:13px; background:#fff; border:1px solid #999; border-radius:50%; }
.reg_wrap span.step.active {color:#da2d50; font-weight:bold;}
.reg_wrap span.step.active span.circle { padding:10px 8px 6px; color:#fff; background:#da2d50; border:1px solid #da2d50; font-size:15px; line-height:1.2; font-weight:bold; box-shadow:0 3px 5px 0 #dedede; box-shadow:0 3px 5px 0 #dedede; -webkit-box-shadow:0 3px 5px 0 #dedede; -ms-box-shadow:0 3px 5px 0 #dedede; }

.reg_wrap.wid-col5 span.step { width:19.3%; }


 /* 고객정보 입력 */
.user_title { margin-bottom:16px; padding:0 20px; font-size:18px; line-height:20px; font-weight:700; color:#222; }
.user_title > span { padding-left:3px; font-weight:400; font-size:13px; }
.user_info { margin:10px 20px 20px; padding:10px 16px 20px; background-color: #fff; border-radius: 6px;}
.user_info + .user_title {margin-top: 40px;}
.user_info dl { margin:15px 0; width:100%; }
.user_info dl:nth-of-type(1) {margin-top:5px;}
.user_info dl:after {  content:''; display:block; clear:both; }
.user_info dl dt { padding:5px 0 10px; font-size:14px; color:#666; }
.user_info dl dd { float:left; position:relative; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; }
.user_info label { font-size:15px; }

/* 결제금액 */
.user_info .base_price {display: flex; margin:5px 0 0 0;}
.user_info .base_price dt {padding: 0;}
.user_info .base_price dd {margin-left: auto; font-weight:500;}
.user_info + .total_price {margin:0 20px 40px 20px; padding:15px 20px; text-align: right; background-color: #f9e4ed; border-radius:0 0 6px 6px;}
.user_info + .total_price dt {padding: 0; font-weight:500; font-size: 18px;}
.user_info + .total_price dd {margin-left: auto; margin-top: 3px; font-weight:800; font-size: 20px;}

.user_info .item { position:relative; }
.user_info .item .label > span { font-size:16px; font-weight:500; color:#000; }
.user_info .item .label > span+span { padding-left:3px; font-weight:300; font-size:14px; }
.user_info .item .ipRdo2 { float: left; display:inline-block; width:50% !important; }
.user_info .item .dash { display:inline-block; width:5px; height:10px; position:absolute; right:-8px; top:19px; background:url(../img/icon/ico_dash.jpg) no-repeat 0 0; background-size:contain; text-indent:-9999px; }
.user_info .item .at { display:inline-block; width:10px; height:10px; position:absolute; right:-3px; top:8px; }
.user_info .item .cd_txt { position:relative; left:10px; font-size:17px; }

.user_info .item.lb_ipBox { margin-bottom:0px !important; }
.user_info .item.lb_ipBox dd { width:100%; margin-bottom:5px; }
.user_info .item.lb_ipBox dd label { float:left; width:20%; padding-top:10px; }
.user_info .item.lb_ipBox dd input { float:right; width:80%; }
.user_info .item.ipBox dd { width:80%; }
.user_info .item.ipBox1 dd { width:calc(100%); }
.user_info .item.ipBox2 dd { width:calc(100%/2); padding-left:10px; }
.user_info .item.ipBox3 dd { width:calc(100%/3); padding-left:10px; }
.user_info .item.ipBox4 dd { width:calc(100%/4); padding-left:10px; }
.user_info .item.slBox2 dd.sl1 { width:32%; }
.user_info .item.slBox2 dd.sl2 { width:40%; margin-left:10px; }
.user_info .item.ipBoxShort dd input { width:85px; }
.user_info .item.add_ipBox dd.zip { width:calc(100%/2); padding-left:10px; }
.user_info .item.add_ipBox dd.zip:after { content:''; display:block; clear:both; }
.user_info .item.rdoBox1_2 {display: flex; flex-wrap: wrap; position:relative; }
.user_info .item.rdoBox1_2 .label {width: 100%;}
.user_info .item.rdoBox1_2 .rdo { width:100%;}
.user_info .item.rdoBox1_2 .rdo + .rdo {padding-top: 12px;}

.input_btn {display: flex; flex-wrap: wrap; width: 100%;}
.input_btn .input {width: calc(100% - 90px - 12px);}
.input_btn .btn {width: 90px !important; margin-left: 12px;}

/* 현재 통신사 선택 */
.in_use {width: auto; margin-top: -6px; margin-bottom: -10px;}

/* 모델명/카드번호 */
.card_num {display: flex;}
.card_num .card_front {width: 220px;}
.card_num .card_back {width: 100%; margin-left: 8px;}

 /* 고객정보  */
.user_info .info:first-child { margin-top:14px; }
.user_info .info { margin:14px 0 15px; }
.user_info .info .tit { float:left; font-size:14px; font-weight:bold; color:#da2d50; }
.user_info .info .cont { padding-bottom:5px; text-align:right; font-size:16px; }

/* bg */
.user_box { padding:10px; background-color:#eff0f5; }
.bg_img {width: 100%; margin: 0 auto; text-align: center;}

 /* 유의사항 */
.guide_area {margin-top: 6px;}
.guide_area.bg{background-color:#f6f6f6; padding:15px 20px; border-radius: 6px;}
.guide_area .title {margin-bottom: 5px; font-size: 15px; border-radius: 3px;}
.guide_area ul li {position:relative; font-weight:400; font-size:15px; color:#666; line-height:1.5; word-break:keep-all;}
.guide_area ul li > ul {margin-top:4px}
.guide_area .num_list {counter-reset: num 0;}
.guide_area .num_list li {padding-left:23px;}
.guide_area .num_list li:before {content:counter(num)"."; counter-increment:num 1; position:absolute; left:0; top:0;}
.guide_area .desc_list > li {padding-left:12px !important;}
.guide_area .desc_list > li::before {content:""; position:absolute; left:0; top:8px; width:6px; height:1px; background:var(--color-black);}
.guide_area .dot_list > li {padding-left:12px !important;}
.guide_area .dot_list > li::before {content:""; position:absolute; left:0; top:9px; width:3px; height:3px; background:var(--color-black); border-radius: 50%;}

.user_info .msg { margin-top:10px; }
.user_info .msg.bg { margin-top:8px; padding:10px; background-color:#e9e9e9; color:#222; }
.user_info .msg > p { margin-bottom:5px; font-weight:400; font-size:15px; color:#666; }
.user_info .msg > p:last-child {margin-bottom: 0;}
.user_info .msg > p.succ,
.user_info .msg > p.nice_succ,
.user_info .msg > p.usim_succ {color: var(--color-blue2);}
.user_info .msg > p.fail,
.user_info .msg > p.nice_fail,
.user_info .msg > p.usim_fail {color:var(--color-main)}
.user_info .msg > strong{ font-weight:300; font-size:15px; color:#666; }
.user_info .msg .msg_list_style{ font-weight:300; font-size:14px; color:#666; line-height: 1.5; padding-left:20px; margin-top:3px;}
.user_info .msg .msg_list_style li{border:none; margin-bottom:3px;}
.user_info .msg .msg_list_style ul{padding-left:15px;}

/* 버튼 */
.btns { position:relative; text-align:center; }
.btns .btn {cursor: pointer; display:flex; align-items: center; justify-content: center; width:100%; height:60px; line-height:inherit; }
.btns .round {border-radius:25px;}
.btns .btn + .btn {margin-top:5px;}
.btns .btn.btn1 { background:#da2d50; color:#fff; font-size:16px; }
.btns .btn.btn2 { background:#222; color:#fff; font-size:16px; height:42px; padding: 0; line-height: inherit; border-radius: 6px;}
.btns .btn.btn2.red {background:#da2d50;}
.btns .btn.btn2-line { border:1px solid #000; color:#000; font-size:16px; height:42px; padding: 0; line-height: inherit;}
.mbtns { position:relative; margin:30px 0; text-align:center; }
.mbtns a { display:block; }
.mbtns .btn.mbtn { width:210px; background:#fff; color:#222; font-size:16px; height:46px; border:1px solid #ccc; text-align:center; border-radius:3px; -webkit-border-radius:3px; -ms-border-radius:3px; }

#btn_store {margin:0 0 10px 0; width:100%; height:50px !important; font-weight:600; font-size:15px; color:#000; border:4px solid #ccc; background-color:#f2f2f2;}
.btn_apply {position:relative; display:inline-block; margin-top:6px; padding:6px 30px 5px 25px; font-weight:300; font-size:14px; border:1px solid #ddd; border-radius:15px;}
.btn_apply:after {content:""; display:block; position:absolute; right:15px; top:12px; width:5px; height:5px; border-bottom:1px solid #000; border-right:1px solid #000; transform: rotate(-45deg);}

.btn-benefit {margin-top:20px;}
.btn-benefit a {margin:0 4px;}
.btn-benefit a+a {margin-top:4px;}
.btn-benefit a .btn.btn2 {height:auto; padding:8px 25px; line-height:1.4}

.btn_box3 {position:relative; text-align:center; font-size:0;}
.btn_box3 button {width:100%; height:50px; font-size:16px; font-weight:500; border-radius:3px; letter-spacing: 0;}
.btn_box3 button:nth-of-type(1) {background-color:#292929; color:#fff;}
.btn_box3 button:nth-of-type(2) {border:1px solid #000; color:#000;}
.btn_box3 button:nth-of-type(3) {color:#797979; text-decoration:underline; width:auto !important; height:auto !important; margin-top: 20px;}

.btn_fixed {position: fixed; left: 50%; bottom: 0; width: 100%; max-width: 620px; transform: translateX(-50%); z-index: 99;}

.btn_flex {display: flex; gap: 6px;}
.btn_flex button {height: 54px !important;}



/* step02 : 비활성화 처리 */
.user_info .card-fields { display:none; }
.user_info .license_fields { display:none; }

/* 신분증정보 */
.jumin_fields dt.label.num1:after { content:'1'; display:inline-block; width:20px; height:20px; line-height:20px; background-color:#D92D50; text-align:center; border-radius:50%; color:#fff; }
.foreign_fields dt.label.num1:after { content:'1'; display:inline-block; width:20px; height:20px; line-height:20px; background-color:#D92D50; text-align:center; border-radius:50%; color:#fff; }


/****************************************
# 팝업
****************************************/
.modal-content .user_info {margin: 0; padding: 0;}

/* 번호이동 인증방법 */
#tran_auth_pop .tran_fields > .tit { position:relative; margin-top:16px; padding-bottom:5px; padding-left:8px; color:#555; z-index:10; }
#tran_auth_pop .tran_fields > .tit:before { content:''; display:inline-block; position:absolute; left:0; top:50%; width:4px; height:4px; margin-top:-2px; background-color:#797979; border-radius:50%; }
#tran_auth_pop .tran_fields > .exple { float:inherit; }
#tran_auth_pop .tran_fields img { width:100%; }
#tran_auth_pop .tran_fields1 > .chk_serial { margin-top:25px; }
#tran_auth_pop .tran_fields1 > .chk_serial:after { content:''; display:block; clear:both; }
#tran_auth_pop .tran_fields1 > .chk_serial li { display:inline-block; position:relative; width:auto !important; margin-bottom:16px; border-bottom:0 !important; }
#tran_auth_pop .tran_fields1 > .chk_serial li:last-child { margin-bottom:0; }
#tran_auth_pop .tran_fields1 > .chk_serial li > p { padding-bottom:10px; }
#tran_auth_pop .tran_fields1 > .chk_serial li > p > span { display:inline-block; width:22px; height:22px; margin-right:5px; line-height:20px; background-color:#D92D50; text-align:center; border-radius:50%; color:#fff; }

/* ocr진행방법 */
.ocr-prog-box .title {padding:5px 0 25px; font-weight:700; font-size:20px; line-height:1.4; color:#d5151c; text-align:center; word-break: keep-all;}
.ocr-prog-box .prog-list li {padding:20px; border: 1px solid #dcdcdc;}
.ocr-prog-box .prog-list li+li {margin-top:20px;}
.ocr-prog-box .prog-list li .step {font-size:16px; font-weight:500; color:#d5151c;}
.ocr-prog-box .prog-list li .step > .text {color:#000;}
.ocr-prog-box .prog-list li .img-step {margin:10px auto;}
.ocr-prog-box .prog-list img { width:100%; }

/* 진행 방법 */
.step-list {display: flex; flex-wrap: wrap;}
.step-list li {width: calc(50% - 4px); margin-bottom: 8px; padding:20px 10px; background-color: var(--color-gray-brighter2); border-radius: 12px;}
.step-list li:nth-child(2n) {margin-left: 8px;}
.step-list li .step-text {display: flex; justify-content: center; flex-wrap: wrap;}
.step-list li .step-text .number {display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; font-size: 13px; background-color: var(--color-black); border-radius: 50%; color: var(--color-white);}
.step-list li .step-text .text {width: 100%; margin-top: 6px; text-align: center; font-size: 15px;}
.step-list li .step-img {margin-top: 20px;}


/* 신청완료 */
.complete {display: flex; flex-direction: column; justify-content: center; width:100%; height:100%; padding: 0 20px;}
.complete .icon {max-width: 120px; margin: 0 auto 20px;}
.complete .top {text-align: center; margin-bottom: 20px;}
.complete .top .title {font-weight: 700; font-size: 20px;}
.complete .top .desc {margin-top: 6px; font-weight: 300; font-size:16px; color: var(--font-color2);}
.complete .info_box {margin-top: 20px; padding: 20px; border: 1px solid var(--color-gray-light); border-radius: 6px;}
.complete .info_box dl {display: flex; font-size: 15px;}
.complete .info_box dl + dl {margin-top: 10px;}
.complete .info_box dl dt {color: var(--font-color2);}
.complete .info_box dl dd {color: var(--font-color1); margin-left: auto; text-align: right;}

/* 샘플 */
.user_info .exple { display:inline-block; margin-top:0px; }
.user_info .exple > img { display:inline-block; width:100%; text-align:center; }


/* 약관동의 */
body.noScroll { overflow:hidden; }
.agree_wrap { position:relative; }
.agree_wrap .all_agree { border:2px solid #ccc; margin-bottom:10px; padding:15px 15px; font-size:17px; font-weight:500; }
.agree_wrap .all_agree.active { border:2px solid #da2d50; color:#da2d50; }
.agree_wrap .agree_box { width:100%; margin-bottom:16px; border:1px solid #aaa; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; }
.agree_wrap .agree_box .tit { padding:10px 8px; font-size:17px; line-height:1.5; font-weight:bold; color:#fff; background-color:#aaa; }
.agree_wrap .agree_box .cont { padding:10px 8px; font-size:15px; line-height:1.5; color:#222; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; }
.agree_wrap .agree_box .cont .confirm { position:relative; margin-right:5px; }
.agree_wrap .agree_box .cont .confirm:after { content:''; display:block; clear:both; }
.agree_wrap .agree_box .cont .iframe { overflow-y:auto; width:100%; height:150px; margin-bottom:5px; border:1px solid #e2e2e2; -webkit-overflow-scrolling: touch; }
.agree_wrap .agree_box .cont .iframe .inner { display:block; width:100%; height:100%; border:none; font-size:14px; }
.agree_wrap .agree_box.active { width:100%; margin-bottom:16px; border:1px solid #da2d50; }
.agree_wrap .agree_box.active .tit { color:#fff; background-color:#da2d50; }
.agree_wrap .agree_box.active { width:100%; margin-bottom:16px; border:1px solid #da2d50; }
.agree_wrap .agree_box.active .tit { color:#fff; background-color:#da2d50; }

/* 약관동의 개선안 */
.terms_wrap {margin: 25px 20px;}
.terms_wrap .all_agree {border:1px solid #e2e2e2; margin-bottom:10px; padding:15px 15px; font-size:17px; font-weight:500; border-radius:3px; background-color: var(--color-white);}
.terms_wrap .all_agree.active {border:1px solid #da2d50; color:#da2d50; }
.terms_wrap .all_agree.active + .terms-list {border-color:#da2d50}
.terms_wrap .terms-list {border:1px solid #e2e2e2; border-radius:3px; background-color: var(--color-white);}
.terms_wrap .terms-list li {position:relative; padding:16px 15px 0;}
.terms_wrap .terms-list li:after {content:""; display:block; clear:both;}
.terms_wrap .terms-list li:last-child {padding-bottom:16px;}
.terms_wrap .terms-list li > h2 {float:left; width:78%; padding-right: 15px; font-size:15px; font-weight:300; line-height:1.4; color:#555;}
.terms_wrap .terms-list li > p {float:right; width:22%;}
.terms_wrap .terms-list li > p .open_dialog {position:absolute; right:20px; top:50%; margin-top:-5px; font-size:13px; font-weight:300; color:#707070;}
.terms_wrap .terms-list li > p .open_dialog:after {content:""; position:absolute; bottom:0; right:0; width:100%; height:1px; background-color:#707070;}

/* 약관동의 레이어팝업 */
.agree_layerpop { display:none; overflow:auto; position:fixed; top:0; left:0; right:0; bottom:0; width:100%; height:auto; background:#fff; z-index:99999; }
.agree_layerpop .pop_header { position:relative; width:100%; padding:18px 16px; background-color:#f5f6f6; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; }
.agree_layerpop .pop_header .pop_tit { padding-right:30px; font-size:17px; line-height:1.5; }
.agree_layerpop .pop_header .pop_close { position:absolute; top:18px; right:18px; width:18px; height:18px; text-indent:-9999px; background:url('../img/icon/btn_pop_close.png') no-repeat center center; }
.agree_layerpop .pop_content { position:relative; width:100%;  padding:20px; line-height:1.5; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; }
.agree_layerpop .pop_bottom { position:fixed; bottom: 0; width:100%; padding-top: 120px;}
.agree_layerpop .pop_bottom .pop_close { width:100%; height:54px; line-height:1.5; background-color:#222; color:#fff; font-size:16px; }

#prepayPopup1 {background:rgba(0,0,0,.5)}
#prepayPopup1 > .popup {position:absolute; left:50%; top:45%; width:90%; height:50%; max-width:380px; background:#fff;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}
#prepayPopup1 > .popup .pop_content {width:100%; height:100%; overflow-y:scroll;}
#prepayPopup1 > .popup .btns {display:flex; width:100%; height:54px;}
#prepayPopup1 > .popup .btns .chk-agree {width:50%; padding:15px 0px; background:#fff;}
#prepayPopup1 > .popup .btns .btn {width:50%;}


/* msg 레이어팝업 */
.alert-box.no-line {padding:1px 0; border:0;}
.alert-box .tit-header {}
.alert-box .tit-header .alert-tit {font-weight:500; font-size:16px; line-height:1.6;}
.alert-box .alert-tit {font-weight:600; font-size:18px; line-height:1.4;}
.alert-box .alert-desc {margin-top:10px; font-weight:400; font-size:15px; word-break: keep-all; color:#666;}
.alert-box .em-desc {font-weight:300; font-size:15px; font-weight:400; }
.alert-box .em-desc + .em-desc {margin-top:10px;}
.alert-box.bg-point {position:relative; width: 100%; display:inline-block; padding:20px; font-size:15px; background:#fff5e7; border-radius: 12px; color:#D92D50;}
.alert-box .btns {padding:20px 0 50px;}
.alert-box .before-dash {position:relative; padding-left:10px;}
.alert-box .before-dash::before {content:"-"; position:absolute; left:0;}
.alert-box .alert-guide {overflow: hidden; margin-top:20px; border:1px solid #ff9696; border-radius: 10px;}
.alert-box .alert-guide .bg-title {display:block; margin-bottom:10px; padding:10px; font-size:15px; font-weight:600; background:#FEF2F2; color:#D92D50;}
.alert-box .alert-guide > .top_txt {margin: 20px 10px 5px; padding-bottom: 10px; font-size: 15px; color: #666; border-bottom: 1px solid #ddd;}
.alert-box .alert-guide > ul {padding:10px;}
.alert-box .alert-guide > ul li {position:relative; margin-bottom:5px; padding-left:20px; font-size:15px; color:#444; line-height:1.5;}
.alert-box .alert-guide > ul li > span {position:absolute; left:0; display:inline-block; width:20px;}
.alert-box .info-list {position:relative; border:1px solid #e2e2e2; border-radius:10px; padding:20px;}
.alert-box .info-list .title {padding-bottom:16px; font-weight:600;}
.alert-box .info-list dl {display:flex; flex-wrap:wrap;}
.alert-box .info-list dl + dl {margin-top:12px;}
.alert-box .info-list dl dt {width:100%; display:inline-block; font-size:14px; color:#898989;}
.alert-box .info-list dl dd {width:100%; flex:1 auto; display:inline-block; font-size:16px; font-weight:600; margin-top:3px;}
.alert-box .info-list dl.label-ing {display:inline-block;}
.alert-box .info-list dl.label-ing dt {display:none;}
.alert-box .info-list dl.label-ing dd {display:inline-block; width:auto;}
.alert-box .info-list dl.label-ing dd p {width:auto; padding:5px 8px; font-size:13px; font-weight:300; color:#fff; border-radius:3px; background:#898989;}
.alert-box .info-list dl.label-ing .self {background-color:#779b77;}

/* 약관 순서도 */
.terms_box { position:relative; padding-bottom: 60px;}
.terms_box iframe {width:-webkit-fill-available; height:-webkit-fill-available;}
.terms_box .article { position:relative; font-size:14px; margin-bottom:10px; }
.terms_box .article h2 { margin-top:15px; font-size:15px; font-weight:600; }
.terms_box .article h2.tit:first-child { margin-top:0; }
.terms_box .article h3 { margin-top:15px; font-size:15px; font-weight:600; }
.terms_box .article h3:first-child { margin-top:0; }

/* 툴팁 */
.request-text {font-weight:600; font-size:15px;}
.tooltip {position:relative; margin-top:16px; padding:15px; background-color: #eff0f5; border-radius:8px;}
.tooltip::after {content:""; display: block; position: absolute; bottom:100%; left:10%; border-left:10px solid transparent; border-right:10px solid transparent; border-bottom:10px solid #eff0f5;}



/****************************************
** tab
****************************************/
.mtabs { position:relative; width:100%; padding:16px 20px 8px; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; }

.mtabs > .tab_list { position:relative; width:100%; }
.mtabs > .tab_list:after { content:''; display:block; clear:both; }
.mtabs > .tab_list li { float:left; display:table; position:relative; vertical-align:middle; border-bottom:2px solid #e2e2e2; border-width:1px 1px 1px 0; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; }
.mtabs > .tab_list li a {  display:table-cell; width:100%; height:64px; padding-bottom: 6px; font-size:17px; vertical-align:middle; text-align:center; color:#666; background-color:#fff; }
.mtabs > .tab_list li a > strong { font-size:17px; }
.mtabs > .tab_list li a > strong > span { font-size:15px; }
.mtabs > .tab_list li.active { border-bottom:2px solid #da2d50; }
.mtabs > .tab_list li.active a { color:#e6141b; }

.mtabs > .tab-col1 li { width:50%; }
.mtabs > .tab-col2 li { width:50%; }
.mtabs > .tab-col3 li { width:33.3333333%; }
.mtabs > .tab-col4 li { width:25%; }


/* 단기유심 전용 가상계좌 입금 */
.bank_num_box { display: block; width: 100%; margin-top: 15px; padding: 15px; background: #FBFBFB; border: 1px solid #EAEAEA; border-radius: 10px; box-sizing: border-box; text-align: center;}
.bank_num_box .text { margin: 0; color: #222; }
.bank_num_box .bank { color: #666; font-size: 18px; /* font-weight: 500; */ margin-right: 8px; }
.bank_num_box .num { color: #222; font-size: 20px; font-weight: 700; letter-spacing: 0.5px; }
.bank_num_box .name { display: block; margin-top: 5px; font-size: 15px; color: #777; }

/****************************************
# 결제수단 선택
****************************************/
/* 모바일다이렉트샵 온라인가입 결제수단 선택 */
#credits .tab_credit { padding:3px 0 5px; }
#credits dl dd {width:100%; padding-left:0;}
#credits ul {}
#credits ul li {display:inline-block; width:100%;}
#credits ul li + li {margin-top: 8px;}
#credits ul li .bx_crdt {cursor: pointer; display:block; position:relative; min-height: 45px; padding: 17px 20px; color:#666; font-weight:600; border:1px solid #e2e2e2; background-color:#f2f2f2; border-radius: 3px;}
#credits ul li .bx_crdt span { display:inline-block; padding-left: 40px; color:#666; font-weight:400; font-size: 15px;}
#credits ul li .bx_crdt span:before { content:''; display:inline-block; position: absolute; left: 10px; top: 50%; width:50px; height:45px; margin:0 auto; background:url('https://www.ksimcard.co.kr/assets/img/icon/ico_credit.png') no-repeat; background-size:150px 200px; transform: translateY(-50%);}
#credits [data-icon="crdt_idx_01"] input[type='radio'] + span:before { background-position:0 -50px; }
#credits [data-icon="crdt_idx_02"] input[type='radio'] + span:before { background-position:-100px -50px; }
#credits [data-icon="crdt_idx_03"] input[type='radio'] + span:before { background-position:-50px -50px; }
#credits [data-icon="crdt_idx_04"] input[type='radio'] + span:before { background-position:-100px -50px; }
#credits [data-icon="crdt_idx_01"] input[type='radio']:checked + span:before { background-position:0 -100px; }
#credits [data-icon="crdt_idx_02"] input[type='radio']:checked + span:before { background-position:-100px -100px; }
#credits [data-icon="crdt_idx_03"] input[type='radio']:checked + span:before { background-position:-50px -100px; }
#credits [data-icon="crdt_idx_04"] input[type='radio']:checked + span:before { background-position:-100px -100px; }

/* #credits ul li .bx_crdt input[type='radio'] { overflow:hidden; position:absolute; width:0; height:0; margin:0; padding:0; text-indent:-9999px; z-index:-1; } */
#credits ul li .bx_crdt input[type='radio']:checked + span { font-weight:400; color:#D92D50; }
#credits ul li .bx_crdt input[type='radio']:checked + span:after { content:''; display:block; position:absolute; top:-1px; left:-1px; width:100%; height:100%; border:1px solid #D92D50; border-radius: 3px;}


/****************************************
** tab
****************************************/
.tabs2 { position:relative; width:100%; }

.tabs2 .tab_list { position:relative; width:100%; }
.tabs2 .tab_list:after { content:''; display:block; clear:both; }
.tabs2 .tab_list li { display:table; float:left; position:relative; height:46px; border:1px solid #dcdcdc; border-width:1px 1px 1px 0; box-sizing: border-box;}
.tabs2 .tab_list li a { display:table-cell; width:100%; height:100%; vertical-align:middle; font-size:15px; text-align:center; line-height:1.3; color:#666; background-color:#fff; }
.tabs2 .tab_list li:first-child { border-left:1px solid #e2e2e2; }
.tabs2 .tab_list li.active { border-width:1px; border-color:#e6141b; }
.tabs2 .tab_list li.active a { color:#e6141b; font-weight:500; }

.tabs2 .tab-col1 li { width:50%; }
.tabs2 .tab-col2 li { width:50%; }
.tabs2 .tab-col3 li { width:32%; }
.tabs2 .tab-col4 li { width:25%; }



/****************************************
** 에러페이지
****************************************/
.error_wrap {height: 100vh; transform: translateY(-50px);}
.error_wrap .error_inner {height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align:center; padding: 10px 20px;}
.error_inner .title{font-size:20px; font-weight:800; color:var(--color-main); word-break: keep-all;}
.error_inner .icon{margin-bottom:20px; max-width: 200px;}
.error_inner strong{font-size:18px; color:#000; font-weight:700; margin:25px 0 10px; display:block;}
.error_inner p{font-size:16px; color:#666; line-height:1.4; word-break: keep-all;}
.error_inner .btn-group {width: 100%; max-width: 620px; margin: 40px auto 0;}

@media (min-width: 770px) {
	.error_inner .title{font-size:26px;}
	.error_inner .icon{margin-bottom:30px; max-width: 240px;}
	.error_inner strong{font-size:22px; margin:35px 0 10px;}
	.error_inner p{font-size:18px;}
	.error_inner .btn_box{padding-top:70px; justify-content: space-between;}
	.error_inner .btn_box button{margin:0; font-size:18px; width:calc(100%/2 - 5px);}
}