@charset "utf-8"; 

/* 다이렉트 요금제 개선  : 요금제 선택 무선 (동시주문, 핸드폰모바일 팝업)  */
#selectPaymentPop.layerWrap .layerHeader{padding:25px 40px 20px}
#selectPaymentPop.layerWrap .fix1dep .layerHeader{padding-bottom:0;}
#selectPaymentPop.layerWrap .layerHeader h1, #selectPaymentPop.layerWrap .layerHeader strong{font-size:18px;}
#selectPaymentPop.layerWrap .layerBox{width:600px;box-sizing: border-box;}
#selectPaymentPop.layerWrap .layerBox .layerBody{margin-top:66px;padding-top: 0;}
#selectPaymentPop.layerWrap .layerBox .layerContent{padding:0 40px 30px;position: relative;}
#selectPaymentPop.layerWrap .layerBox .layerFoot {position:relative;padding:0 20px 30px;z-index:1;box-shadow:none;}
#selectPaymentPop.layerWrap .layerBox .btnLayerClose{top:25px;}
#selectPaymentPop.layerWrap .btnLayerItem span{height: 36px;line-height: 34px;font-size: 14px;color:inherit;}
#selectPaymentPop.layerWrap .btnLayerItem , #selectPaymentPop.layerWrap .btnLayerItem02{min-width:100% !important;height:48px;background-color:#fe2e36;border:none;color:#fff;}
#selectPaymentPop .prodTabDepth{top: 0px;transform: translateY(0);z-index: 9999;}
#selectPaymentPop .tabFix .prodTabDepth{position: fixed;left:0;top:66px;transform:translateY(0);transition:transform 0.2s;background-color:#fff;z-index: 10;right:17px;padding: 0 40px;box-shadow: -2px 5px 5px rgb(0 0 0 / 10%);}
#selectPaymentPop .fix1dep .prodPayTab{max-height:0;}
#selectPaymentPop .prodPayTab{max-height:50px;transition:all 0.3s;}
#selectPaymentPop .prodPopBanner{display:none !important;margin:24px 0 0;border-radius:30px;box-shadow:3px 3px 6px rgba(0,0,0,0.2)}


/* 요고 요금제팝업 개선 */
/***********************************
CSS 동일 사용페이지 : [수정 : 4개파일 / 확인할 부분 : 5곳] 입니다.
1. (oneMinuteProducts.list.common_diy.js) | https://shop.kt.com:444/unify/mobile.do?&category=mobile : 핸드폰 > 요금제 변경
2. (lineCombOrderProducts.list.common_diy.js) | https://shop.kt.com/lineCombOrder/lineCombList.do : 동시주문(핸드폰+인터넷+TV) > 핸드폰선택 > 변경
3. (directSelectPopup_diy.js) | https://shop.kt.com:444/direct/select.do?befIntmUsimUseYn=Y&isSaparDirectPage=U_USE_Y : 요고 > 요금제변경 
4. https://shop.kt.com/direct/checkimei.do > console창 layerOpen('#regi-phone'); 
5. (/js/mobile/smart/supports/supportAmt.list.js) https://shop.kt.com/m/smart/supportAmtList.do > 공시지원금 > 요금제변경 

-적용안됨 ollehshop_web/unify/pc/js/mobile/order/prod_list/prod_list.js  > function planpopScComm > 기본 html 세팅 파일 (무선, 동시주문, 다이렉트 통합)
***********************************/
#selectPaymentPop .plan-direct{padding-top:25px;}
.plan-direct .switch-box{position:relative;}
.plan-direct .switch{appearance:none;position:relative;border-radius:100px}
.plan-direct .switch:focus-visible{outline:0.5px #aaa dashed}
.plan-direct .switch-type-txt{display:inline-block;vertical-align:middle;margin-left:4px;width:24px;height:24px;}
.plan-direct .switch-type-txt .switch{position:absolute;appearance:none;}
.plan-direct .switch-type-txt .switch +.lb, .plan-direct .switch-type-txt .switch + .lb .txt{position:absolute;left:0;width:100%;height:100%;text-align:center;font-size:1px;box-sizing: border-box;color:transparent;}
.plan-direct .switch-type-txt .switch +.lb{background:#fff url(/unify/pc/images/direct/directOnline_checkbox.png) 0 0 no-repeat;}
.plan-direct .switch-type-txt .switch +.lb .txt, .plan-direct .switch-type-txt .switch:checked+.lb .txt.yes{display:block;}
.plan-direct .switch-type-txt .switch +.lb .txt.yes, .plan-direct .switch-type-txt .switch:checked +.lb .txt.no{display:none;}
.plan-direct .switch-type-txt .switch:checked +.lb{background-position:0 -24px;}
.plan-direct .switch-type-big{text-align:center;}
.plan-direct .switch-type-big .switch{width:71px;height:32px;z-index:1}
.plan-direct .switch-type-big .switch:after{content:"";position:absolute;border-radius:100px;width:100%;height:100%;background:#0f807b;}
.plan-direct .switch-type-big .switch:before{content:"";position:absolute;left:0;border-radius:100px;background-color:#fff;transition:transform .2s linear;z-index:1;transform:translateX(4px);top:4px;width:24px;height:24px;}
.plan-direct .switch-type-big .switch:checked:before{background-color:#fff;transform:translateX(43px);}
.plan-direct .switch-type-big .switch:disabled{cursor:not-allowed;background-color:#d3d3d3}
.plan-direct .switch-type-big .switch:disabled:before{opacity:.5}
.plan-direct .switch-type-big .switch +.lb{position:absolute;display:flex;left:0;top:0;width:100%;height:100%;gap:20px;justify-content:space-around;align-items:center;outline:none}
.plan-direct .switch-type-big .switch +.lb .txt{flex:1;display:inline-flex;justify-content:center;align-items:center;height:100%;font-size:20px;line-height:31px;letter-spacing:-0.5px;transition:color 0.3s}
.plan-direct .switch-type-big .switch +.lb .txt, .plan-direct .switch-type-big .switch:checked+.lb .txt.data{font-weight:normal;color:#C7C7C7;}
.plan-direct .switch-type-big .switch +.lb .txt.data, .plan-direct .switch-type-big .switch:checked +.lb .txt.month{font-weight:bold;color:#000;}
/* 2023년 3월중: 삭제 */
.plan-direct .data-add-type:before{content:'+';display:inline-block;padding:0 3px;font-size:28px;letter-spacing: -0.7px;color: #000;font-weight:bold;vertical-align:middle;}
.plan-direct .data-add-type .txt-add{display:inline-block;box-sizing:border-box;width:58px;height:29px;margin-left:4px;font-size:16px;line-height:1.7;color:#fff;background-color:#FE2E36;border-radius: 8px;text-align:center;font-weight:300}
.plan-direct .data-add-type .txt-gb{display:inline-block;vertical-align:middle;font-size:28px;letter-spacing: -0.7px;color: #FE2E36;font-weight:bold;}
/* ///2023년 3월중: 삭제 */
/* /* 2023년 3월중 추가
.plan-direct .set-txt{display:inline-flex;}
.plan-direct .set-txt [class^=data-] .stxt{display:block;font-size:14px;text-align:center;padding-left:22px;}
.plan-direct .set-txt [class^=data-] .txt-gb{display:inline-block;vertical-align:middle;font-size:28px;letter-spacing: -0.7px;color: #FE2E36;font-weight:bold;}
.plan-direct .set-txt [class^=data-] .txt-gb:before{content:'+';display:inline-block;padding:0 3px;font-size:28px;letter-spacing: -0.7px;color: #000;font-weight:bold;}
.plan-direct .set-txt [class^=data-]:first-child .stxt{padding-left:0;}
.plan-direct .set-txt [class^=data-]:first-child .txt-gb:before{display:none;}
.plan-direct .set-txt .data-dft-type .stxt,
.plan-direct .set-txt .data-dft-type .txt-gb{color:#000;}
.plan-direct .set-txt .data-y-type .stxt,
.plan-direct .set-txt .data-y-type .txt-gb{color:#0f807b;}
.plan-direct .set-txt .data-add-type .stxt,
.plan-direct .set-txt .data-add-type .txt-gb{color:#FE2E36;}*/
.plan-direct .plan-info-notice{margin-top:38px;}
.plan-direct .plan-info-notice .btn-txt {position: relative;display: block;padding:16px 32px;font-size: 16px;color: #808080;border:1px solid #d9d9d9;border-radius:10px;}
.plan-direct .plan-info-notice .btn-txt.on{color:#000;font-weight:bold;border-color:#000}
.plan-direct .plan-info-notice .btn-txt:after {content: '';position: absolute;right:32px;top: 50%;display: inline-block;width: 16px;height: 16px;background: url(/images/pc/popup/icon_plan_notice.png) 0 0 no-repeat;margin-left: 4px;transform: rotate(90deg) translateX(-50%);margin: 0;transform-origin: 50% 50%;}
.plan-direct .plan-info-notice .btn-txt.on:after{transform:rotate(-90deg) translateX(50%);}
.plan-direct .plan-info-notice .cont{display:none;background-color:#f8f8f8;border-radius:0 0 8px 8px;padding:16px;}
.plan-direct .plan-info-notice .txt-desc > ul > li {position:relative;margin-bottom:16px;padding-left:10px;font-size:14px;line-height: 18px;color:#808080;}
.plan-direct .plan-info-notice .txt-desc > ul > li:before{content:'';position:absolute;left:0;top:12px;width:2px;height:2px;background-color: #808080;}
.plan-direct .plan-info-notice .txt-desc > ul > li:last-child {margin-bottom:0}
.plan-direct .plan-info-notice .btn-notice{display:flex;align-items:center;justify-content:center;margin-top:16px;font-size:14px;letter-spacing:-0.3px;color:#808080;}
.plan-direct .plan-info-notice .btn-notice:after{content:'';display:inline-block;width:16px;height:16px;background: url(/images/pc/popup/icon_plan_notice.png) 0 50% no-repeat;margin-left:4px;vertical-align: middle;margin-top: 2px;}
.plan-settings .switch-box{margin-bottom:30px;}
.plan-settings .set-area{position:relative;width: 100%;}
.plan-settings .set-txt{display:flex;align-items:center;justify-content:center;margin-bottom:30px;min-height:41px;}
.plan-settings .txt-plan{text-align:center;font-weight:bold;color:#000;font-size:28px;line-height:34px;letter-spacing:-0.3px;}
.plan-settings .set-ctrl{position:absolute;left:0;top:0;width:100%;height:40px;}
.plan-settings .set-ctrl .btn-ctrl{overflow:hidden;position:absolute;width:44px;height:100%;background: 50% 50% no-repeat;font-size:1px;color:transparent;}
.plan-settings .set-ctrl .btn-ctrl.up{right:0;background-image:url(/images/pc/popup/btn_ctrl_up.png);}
.plan-settings .set-ctrl .btn-ctrl.down{left:0;background-image:url(/images/pc/popup/btn_ctrl_down.png);}
.plan-settings .range-input {appearance:none;position:relative;width:100%;cursor:pointer;outline:none;border-radius:15px;height:12px;z-index:1;}
.plan-settings .range-input::-webkit-slider-thumb{appearance:none;height:40px;width:24px;background-color:#fff;border-radius:16px;box-shadow:0px 4px 16px #0f807b80;transition:.2s ease-in-out;}
.plan-settings .range-input:focus{outline:1px dotted #ccc}
.plan-settings .set-range{padding:0 14px;}
.plan-settings .slider-ticks{display:flex;justify-content:space-between;align-items:flex-end;margin-top:3px;line-height:1.3;}
.plan-settings .slider-ticks .txt {position:relative;padding-top:24px;display:flex;justify-content:center;flex-direction:column;font-size:14px;letter-spacing:-0.3px;color:#333;white-space:nowrap;text-align:center;}
.plan-settings .slider-ticks .txt.center{position:absolute;left:0;width:100%;text-align:center;}
.plan-settings .slider-ticks .txt.center:before{content:'';position:absolute;left:50%;top:0;display:block;width:1px;height:8px;background-color:#ccc;}
.plan-settings .slider-ticks .del{position:absolute;left:0;top:6px;width:100%;height:40px;color:#797676;}
.plan-settings .slider-ticks .del:before{content:'';display:block;width: 32px;height:20px;position: absolute;top:12px;right:-36px;background:url(/images/pc/popup/plan_data_x2.png) 100% 0 no-repeat;}
.plan-settings .slider-ticks .center .del:before{right:auto;left:50%;margin-left:20px;}
.plan-settings .tootip-wrap{position:absolute;width:100%;bottom:18px;}
.plan-settings .before{position:absolute;content:'';bottom:-1px;left:0;display:block;width:16px;height:9px;margin:0 -6px -1px;border-bottom:1px solid #fff;box-sizing:border-box;background:url(https://dev.shop.kt.com/images/pc/popup/tooltip_arr.png) 50% 0 / 16px auto no-repeat;z-index:5;}
.plan-settings .start + .before{margin-left:-10px;}
.plan-settings .end + .before{margin-left:-4px;}
.plan-settings .slider-tootip{opacity:0;visibility:hidden;position:absolute;top:0;transition:opacity 0.3s;}
.plan-settings .slider-tootip.on{opacity:1;visibility:visible;}
.plan-settings .slider-tootip.start{left:0;right:auto;}
.plan-settings .slider-tootip.center, .plan-settings .slider-tootip.end{left:auto;right:0;}
.plan-settings .slider-tootip .txt-desc{min-width:170px;top:0;display:block;padding:9px 12px;border:1px solid #0f807b;background-color:#fff;border-radius:10px;text-align:left;}
.plan-settings .promotion-info{margin-top:8px;text-align:center;}
.plan-settings .promotion-info .txt-desc{font-size:14px;line-height:30px;color:#808080;letter-spacing: -0.35px;}
.plan-settings .plan-info{padding:32px;margin-top:24px;border:2px solid #0f807b;background:#FFF;border-radius:20px;}
.plan-settings .plan-name{display:block;text-align:center;color:#000;font-size:24px;line-height:30px;border-bottom:1px solid #ddd;padding-bottom:17px;margin-bottom:17px;font-weight:bold;}
.plan-settings .total-txt{display:flex;justify-content:space-between;align-items:center;margin-top:8px;line-height:30px;letter-spacing:-0.4px;}
.plan-settings .plan-name + .total-txt{margin-top:0;}
.plan-settings .total-txt .tit-txt{flex:none;font-size:18px;color:#000;}
.plan-settings .total-txt .txt-right{display:inline-flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;}
.plan-settings .total-txt .txt-right .txt{font-size:16px;color:#808080;line-height:30px;margin-left:6px;padding-left:16px;background:url(/images/pc/popup/btn_ctrl_up.png) 0 50% / 12px auto no-repeat;}
.plan-settings .total-txt .txt-right .area:first-child .txt{margin-left:0;padding-left:0;background:none;}
.plan-settings .total-txt .txt-right .area.add .txt,
.plan-settings .total-txt .txt-right .area.add .num{color:#FE2E36;}
.plan-settings .total-txt .txt-right .num{font-size:20px;color:#0f807b;font-weight:bold;line-height:30px;}
.plan-settings .plan-detail{margin-top:18px;padding-top:24px;border-top: 1px solid #D9D9D9;}
.plan-settings .plan-detail .ico{position:relative;padding-left:28px;margin-bottom:8px;vertical-align:top;letter-spacing:-0.3px;font-size:16px;}
.plan-settings .plan-detail .ico:last-child{margin-bottom:0;}
.plan-settings .plan-detail .ico-share, .plan-settings .plan-detail .ico-smart{display:inline-block;width:50%;margin-right:-30px;}
.plan-settings .plan-detail .ico:before{position:absolute;content:'';left:0;display:block;width:24px;height:24px;background: 0 0 no-repeat;}
.plan-settings .plan-detail .ico-share:before{background-image:url(/images/pc/popup/icon_plan_share.png);}
.plan-settings .plan-detail .ico-smart:before{background-image:url(/images/pc/popup/icon_plan_smart.png);}
.plan-settings .plan-detail .ico-data:before{background-image:url(/images/pc/popup/icon_plan_data.png);}
.plan-settings .plan-detail .ico-tel:before{background-image:url(/images/pc/popup/icon_plan_tel.png);}
.select-youth{padding: 20px 32px;margin-bottom:28px;text-align:center;background-color:#f8f8f8;border-radius:20px;box-sizing: border-box;}
.select-youth .txt-desc{display:inline;letter-spacing:-0.7px;line-height: 1.5;flex: 1;}
.select-youth .txt-desc .bold{display:block;color:#000;font-size:18px;margin-bottom:4px;}
.select-youth .txt-desc .stxt{color:#0F807B;font-size:15px;font-weight:500;}
.plan-benefit{margin-top:32px;}
.plan-benefit .icon-tip {display:inline-block;width:22px;height:22px;background:url('/unify/pc/images/internet/btn_tootip01.png') no-repeat center;background-size:100%;vertical-align:middle;font-size:1px;color:transparent;overflow:hidden;}
.plan-benefit .benefit-area .tit{margin-bottom:24px;font-size:18px;line-height:36px;letter-spacing:-0.3px;color:#000;}
.plan-benefit .benefit-area:first-child .tit{margin-top:0;}
.plan-benefit .list-benefit{display:flex;flex-wrap:wrap;margin:-14px -5px 32px;}
.plan-benefit .list-benefit > li{position:relative;display:flex;flex-direction:column;width:33%;margin-bottom:40px;padding:0 5px;box-sizing:border-box;text-align:center;}
.plan-benefit .list-benefit .area{flex:auto;border:1px solid blue;}
.plan-benefit .list-benefit .txt{display:inline-flex;flex:1;justify-content:center;align-items:center;border:1px solid #D9D9D9;border-radius:16px;padding:10px 4px;font-size:14px;line-height:1.4;color:#808080;min-height:48px;}
.plan-benefit .list-benefit .on .txt{border-color:#0f807b;color:#0f807b;font-weight:bold;}
.plan-benefit .list-benefit .txt:disabled{background:#ededed;border:1px solid #e1e1e1;color:#bbb;}
.plan-benefit .list-benefit .bnft{display:flex;gap:5px;justify-content: center;position:absolute;top:100%;left:0;width:100%;margin-top:5px;line-height:1;text-align:center;}
.plan-benefit .list-benefit .tooltipHelp{width:16px;height:16px;}
.plan-benefit .list-benefit .btn-modify{position:relative;color:#808080;line-height:1.3}
.plan-benefit .list-benefit .btn-modify:after{content:'';position:absolute;left:0;bottom:0;width:100%;height:1px;background-color:#808080;}
.plan-benefit .list-benefit .tooltipHelp{opacity:0.5}