@charset "utf-8";

/* .yogoWrap{background: url(https://image.shop.kt.com/upload/editor/display/pc_yogoEvent_bg.jpg) 50% 0 no-repeat #000;} */
.yogoWrap .simulater{position:relative;padding:70px 0;}
/* .yogoWrap .simulater .inner .btn_link{position: absolute;left: 170px;top: 58px;width: 205px;height: 30px;}
.yogoWrap .simulater:before{content: "";width:238px;height:216px;position: absolute;left: 50%;top: 750px;margin-left: -670px;background: url(https://image.shop.kt.com/upload/editor/display/pc_simulate_obj1.png) 0 0 no-repeat;z-index: 1;}
.yogoWrap .simulater:after{content: "";width:225px;height:188px;position: absolute;left: 50%;top: 260px;margin-left: 370px;background: url(https://image.shop.kt.com/upload/editor/display/pc_simulate_obj2.png) 0 0 no-repeat;z-index: 1;} */
.yogoWrap .info_tit{margin:0 auto;width:1000px;position: relative;}

.yogoWrap .box-wrap{margin:50px auto 0;max-width:1000px;display: flex;flex-wrap: wrap;justify-content: space-between;}
.yogoWrap .box-area{padding:35px;position: relative;width:50%;height:500px;background:#f5f5f5;box-sizing: border-box;border-radius: 30px;}
.yogoWrap .box-area:first-of-type{z-index: 1;}
.yogoWrap .box-area.box-gray{background: #ebebeb;}
.yogoWrap .box-area.box-gray:before{content: "";position:absolute;left:-30px;top:0;width:60px;height:100%;background: #ebebeb;}

.yogoWrap .rangewrap{}
.yogoWrap .yhead{position: relative;}
.yogoWrap .yhead .tit{display:block;height:65px;font-size:30px;color:#000;text-align: center;}
.yogoWrap .yhead .tit span{display: block;margin-top:5px;font-size: 20px;color:#0f807b;line-height: 1;}

.yogoWrap .switch{position: absolute;right:60px;top:48px;}
.yogoWrap .switch input{appearance: none; position: relative;}
.yogoWrap .switch label{position:absolute;left:0;top:0;width:24px;height:24px;background: url(/unify/pc/images/direct/directOnline_checkbox.png) 0 0 no-repeat;cursor: pointer;}
.yogoWrap .switch input:checked+label{background-position: 0 -24px;}

.yogoWrap .tab-menu{margin-top:25px;padding:24px 20px 30px;border-top:1px solid #ccc;border-bottom:1px solid #ccc;text-align:center;}
.yogoWrap .tab-menu:after{content:"";display:block;clear:both;}
.yogoWrap .tab-menu a{display:inline-block;font-size:20px;color:#000;vertical-align: middle;}
.yogoWrap .tab-menu .tgl {position: relative;display: inline-block;height: 30px;width: 75px;margin: 0 10px;border-radius: 15px;background-color: #0f807b;vertical-align: middle;cursor: pointer;}
.yogoWrap .tab-menu .tgl:after {content: "";position: absolute;top: 4px;left: 50%;width: 22px;height: 22px;border-radius: 11px;background-color: #fff;transform: translateX(50%);transition: all .4s;}
.yogoWrap .tab-menu .tgl.left:after {transform: translateX(-150%);}

.yogoWrap .tab-area{position: relative;width:420px;margin:20px auto;}
.yogoWrap .tab-area>button {width: 38px;height: 38px;border-radius: 100%;position:absolute;top:2px;background: white;font-size: 34px;border: 3px solid #0f807b;cursor: pointer;}
.yogoWrap .tab-area>button.minus{left:20px;}
.yogoWrap .tab-area>button.plus{right:20px;}
.yogoWrap .tab-area>button:before{content:"";position: absolute;left:50%;top:50%;width:16px;height:2px;background: #000;transform: translate(-50%, -50%);}
.yogoWrap .tab-area>button.plus:after{content:"";position: absolute;left:50%;top:50%;width:2px;height:16px;background: #000;transform: translate(-50%, -50%);}

.yogoWrap .range{margin:20px auto;position: relative;width: 414px;}
.yogoWrap .range:before{content:"";position: absolute;left: 20px;right: 20px;top: 10px;height: 36px;background:#e4e4e4;}
.yogoWrap .range input[type=range] {position: absolute;top:5px;left: 20px;right: 20px;height: 50px;-webkit-appearance: none;background: transparent;cursor: pointer;z-index: 1;}
.yogoWrap .range input[type="range"]::-webkit-slider-thumb {height: 30px;width: 30px;-webkit-appearance: none;}

.yogoWrap .rangebar {padding: 10px 20px;height: 36px;}
.yogoWrap .rangebar span {display: block;height: 100%;background: linear-gradient(to right, rgb(105 241 250),  rgb(13 217 211));transform: skewX(-17deg);}
.yogoWrap .rangebg {position: absolute;top: 0;width: 100%;height: 62px;background: url(/unify/pc/images/direct/directOnline_rangeBg.png) 0 0 no-repeat;z-index: 1;}
/*.yogoWrap .rangebg {position: absolute;top: 0;width: 100%;height: 62px;background: url(/unify/pc/images/direct/directOnline_rangeBg_14.png) 0 0 no-repeat;z-index: 1;}*/

.yogoWrap .rangedata{margin:5px 10px;padding-top:10px;display: flex;justify-content: space-between;align-items: flex-start;position:relative;}
.yogoWrap .rangedata:before{content:"";position: absolute;left:50%;top:0;width:1px;height:10px;background-color: #ccc;}
.yogoWrap .rangedata .datatxt{font-size: 16px;font-weight: bold;color:#333;width:45px;text-align: center;}
.yogoWrap .rangedata .datatxt em{display:none;margin-top:-3px;position:relative;font-size: 16px;font-weight: bold;color:#333;}
.yogoWrap .rangedata .datatxt em:before{content:"";position:absolute;right:-33px;top:-7px;width: 34px;height: 22px;background: url(/unify/pc/images/direct/directOnline_icoTwice.png) 0 0 no-repeat;}
.yogoWrap .rangedata .datatxt.twice{font-size: 13px;font-weight: normal;color:#767676;}
.yogoWrap .rangedata .datatxt.twice em{display: block;}
.yogoWrap .rangedata .datatxt.unlimit{font-size: 16px;color:#333;}

.yogoWrap .print{height:40px;text-align: center;}
.yogoWrap .print *{font-size: 32px;color: #000;line-height: 1.2;}
.yogoWrap .print .add{padding-right: 45px;background:url(/unify/pc/images/direct/directOnline_badge.png) right 15px no-repeat;background-size: 39px 19px;color:#fe2e36;}

.yogoWrap .ratewrap{position: relative;}
.yogoWrap .ratewrap .yhead{text-align: center;}
.yogoWrap .ratewrap .tit{display: inline-block;height:65px;position: relative;top: 5px;color:#000;}
.yogoWrap .tblstyle {padding:15px 20px;}
/* .yogoWrap .tblstyle table{table-layout: auto;} */
.yogoWrap .tblstyle table th{padding:7px 0;font-size:18px;font-weight:normal;color:#555;text-align:left;vertical-align: top;}
.yogoWrap .tblstyle table th i{display:block;width:30px;height:30px;background:url(/unify/pc/images/direct/directOnline_tbltitle.png) 0 0 no-repeat #fff;border-radius: 50%;}
.yogoWrap .tblstyle table th i.title01{background-position: -1px 2px;}
.yogoWrap .tblstyle table th i.title02{background-position: -1px -40px;}
.yogoWrap .tblstyle table th i.title03{background-position: -1px -82px;}
.yogoWrap .tblstyle table th i.title04{background-position: -1px -124px;}
.yogoWrap .tblstyle table td{padding:7px 0;font-size:18px;color:#000;vertical-align: middle;}
.yogoWrap .tblstyle table td .asterisk{margin-top:3px;font-size:15px;color:#fe2e36;}
.yogoWrap .tblstyle table td .asterisk em{color:#fe2e36;}
.yogoWrap .tblstyle table td .mark{background: linear-gradient(to top, #b8faf8 40%, transparent 40%);color:#000;}
.yogoWrap .tblstyle table td .unlimited{font-size: 15px;margin-left: 10px;color:#666;}

.yogoWrap .data_wrap{display:flex;justify-content: flex-start;align-items: baseline;flex-wrap: wrap;margin-top: 25px;padding:20px;border-top: 1px solid #ccc;border-bottom: 1px solid #ccc;}
.yogoWrap .data_wrap dt{margin-right:10px;font-size: 20px;width:55px;}
.yogoWrap .data_wrap dd{font-size: 24px;width: calc(100% - 65px);}
.yogoWrap .data_wrap .asterisk {margin-top: 3px;font-size: 15px;font-weight: bold;color: #fe2e36;}
.yogoWrap .data_wrap .asterisk em {color: #fe2e36;}
.yogoWrap .data_wrap .mark {color: #000;font-weight: bold;}
.yogoWrap .data_wrap .unlimited {font-size: 15px;margin-left: 5px;color: #666;}

.yogoWrap .total_wrap{position: absolute;right:45px;bottom:35px;}
.yogoWrap .total_wrap p{color:#000;font-size: 20px;font-weight: bold;}
.yogoWrap .total_wrap p em{color:#000;font-size: 30px;font-weight: bold;}

.yogoWrap .find-area{margin-top:40px;width:100%;height: inherit;box-shadow: 10px 10px 5px rgba(0,0,0,0.1);text-align: center;}
.yogoWrap .find-area .inner{width: 100%;}
.yogoWrap .find-area .inner+.inner{border-left:1px solid #ddd;}
.yogoWrap .find-area .inner strong{display:inline-block;margin-bottom:20px;font-size:30px;color:#000;}
.yogoWrap .find-area .inner .yogo{color:#0f807b}
/* .yogoWrap .find-area .inner p{margin-top:10px;font-size: 18px;color: #000;}
.yogoWrap .find-area .inner p>em{color:#00b4ae} */
.yogoWrap .find-area .inner a{display: inline-block;margin:0 5px;padding:10px;position:relative;width:202px;background: #000;font-size:20px;color:#fff;border-radius: 12px;box-sizing:border-box;}
/* .yogoWrap .find-area .inner a:after{content: "";position: absolute;top: 50%;right: 15px;width: 9px;height: 9px;background: transparent;border-right: 3px solid #fff;border-bottom: 3px solid #fff;transform: translateY(-40%) rotate(-45deg);} */
.yogoWrap .find-area .inner a.btn_link{background: #000;}
.yogoWrap .find-area #btnWrap2.inner a{background: #adadad;}
.yogoWrap .output{display: none;}

.yogoWrap .event-bnr{position:absolute;left:50px;right:50px;bottom:40px;}
.yogoWrap .event-bnr p{padding: 5px 10px;color: #000;font-size: 15px;background: #e0f4ff;text-align: center;}
/* .yogoWrap .event-bnr p:before{content:'*';display: inline-block;margin-right:5px;position: relative;top: 2px;}
.yogoWrap .evt-bnr01 p>span{color:#fff;border-bottom: 1px solid #fe2e36;}
.yogoWrap .evt-bnr01 p>em{color:#ffe88b;} */
.yogoWrap .info_txt{margin-top:30px;color:#808080;text-align: center;}
.yogoWrap .info_txt+.info_txt{margin-top:5px;}
.yogoWrap .info_txt mark{background-color:#b0ffd1;padding:0 4px;}

/* 요고뭉치 */
.yogoWrap .mit-area{margin-top:50px;padding:30px 40px;width: 100%;height: inherit;background:linear-gradient(107deg, #DFFFFC, #EBF0FF, #FFECF1);}
/* .mit-area:before{content:"";position:absolute;top:-4px;left:0;width: 100%;height: 8px;background:url(/unify/pc/images/direct/mit_bg_line.png) 0 0 no-repeat;z-index: 1;} */
.mit-area .yhead{text-align: center;}
.mit-area .mit_logo{display:inline-block;width:107px;height:46px;background: url(/unify/m/images/direct/m_mit_logo.png) center top no-repeat;background-size: 100% auto;vertical-align: middle;}
.mit-area .mit_txt{display:inline-block;margin-left: 10px;font-size: 24px;color:#000;vertical-align: middle;}
.mit-area .mit_txt span{background: linear-gradient(to top, #7DFFFF 40%, transparent 40%);color:#000;}
.mit-area .mit_txt span br{display: none;}
.mit-area .mit_detail{position: absolute;left: 50%;bottom:-26px;transform: translateX(-50%);width:52px;height:52px;background: url(/unify/m/images/direct/m_ico_open.png) 0 0 no-repeat;background-size: 100% auto;}
.mit-area .mit_detail.on{background-image: url(/unify/m/images/direct/m_ico_close.png);}
.mit-area .tog_btn{width: 100%;height:80px;line-height:80px;padding-left:100px;position:relative;font-size: 18px;border:1px solid #819CDB;border-radius:16px;box-shadow: 0px 3px 6px rgba(0, 0, 0, .16);text-align: center;color: #000;}
.mit-area .tog_btn:before{content:"";position: absolute;left:242px;top:50%;width:72px;height:54px;background-size:100% auto !important;transform: translateY(-50%);}
.mit-area .tog_btn span{color:#0F807B;}
.mit-area .tog_cont{display:none;position:relative;padding:0 30px 30px;background-color: #fff;box-shadow: 0px 3px 6px rgba(0, 0, 0, .16);border: 1px solid #000;border-top:0;border-radius: 0 0 16px 16px;}
.mit-area .tog_cont .flex{display: flex;flex-wrap: wrap;justify-content: space-between;align-items: flex-start;}
.mit-area .tog_btn.active{background: #fff;border-radius: 16px 16px 0 0;border-bottom: 0;border-color:#000;box-shadow: none;z-index: 1;}
.mit-area .tog_btn.active+.tog_cont{display:block;}
.mit-area .tog_btn.active:before{margin-top:-1px;}

[class*="mit_cate"]{display: none;margin-top: 20px;}
.mit_cate01 .tog_btn{background: linear-gradient(109deg, #FFEEFE, #D1FFFC);}
.mit_cate01 .tog_btn:before{background: url(/unify/m/images/direct/m_ico_mit.png) no-repeat;}
.mit_cate02{margin-bottom:20px;}
.mit_cate02 .tog_btn{background: linear-gradient(102deg, #D5FDFC, #E3DEFF);}
.mit_cate02 .tog_btn:before{background: url(/unify/m/images/direct/m_ico_mi.png) no-repeat;}

.caseWrap{position:relative;padding:20px 30px;width: 49%;border:1px solid #D9D9D9;border-radius:10px;box-sizing: border-box;}
.caseWrap .case{height:240px;}
.caseWrap .case_name{display:block;padding:10px 0 10px 45px;background: url(/unify/m/images/direct/m_ico_circle_internet.png) 0 50% no-repeat;background-size:36px auto;font-size:16px;color:#000;}
.caseWrap .btn_change{position: absolute;right: 30px;top: 25px;padding:5px 20px;color: #fff;font-size: 14px;background-color: #000;border-radius: 5px;}

.case_list{margin-top:10px;padding:10px;border-top:1px solid #D9D9D9;display: flex;align-items: flex-start;flex-wrap: wrap;justify-content: flex-start;}
.case_list>li{margin:0 50px 15px 0;}
.case_list>li:last-of-type{margin:0;}
.case_list .tit{font-size:16px;color:#808080;}
.case_list .txt{margin-left: 15px;font-size:16px;font-weight:bold;color:#000;}
.case_list .ico{padding-left:45px;background: url(/unify/m/images/direct/m_ico_wifi.png) 0 50% no-repeat;background-size:30px auto;}

.option_list>li{position: relative;margin-top: 5px;}
.option_list input[type="radio"]{width:18px;height:18px;position:absolute;left: 0;top: 5px;appearance: none;}
.option_list input[type="radio"] + label{display: inline-block;padding: 2px 0 0 25px;background: url(/images/mobile/common/ico_shop_radio_basic_b.png) 0 5px no-repeat;background-size:18px auto;font-size: 16px;color:#000;vertical-align: top;}
.option_list input[type="radio"]:checked + label{background-position:0 -33px;}
.option_list label{font-size:16px;}
.option_list label span{font-size:12px;font-weight:normal;color:#808080;}
.option_noti{margin-top:15px;font-size:13px;color:#808080;}

.totalWrap{margin-top: 20px;position: relative;display: flex;justify-content: center;align-items: flex-start;flex-wrap: wrap;}
.totalWrap .payment{position: relative;}
.totalWrap .payment:before{content:"";position:absolute;left: 50%;top: 25px;width:16px;height:4px;background-color: #CBCBCB;border-radius: 20px;}
.totalWrap .payment>div{display: inline-block;margin: 0 30px;text-align: center;}
.totalWrap .payment .tit{display:block;font-size:16px;color:#808080;}
.totalWrap .payment .txt{display:block;margin-top: 5px;font-size:20px;font-weight:bold;color:#000;}
.totalWrap .payment .red{color:#FE2E36;}
.totalWrap .total{margin-right: 100px;position:relative;color: #000;text-align: right;}
.totalWrap .total>span{display:block;margin-right: 25px;font-size: 16px;}
.totalWrap .total>strong{font-size: 23px;color: #000;}
.totalWrap .total>strong>em{font-size:27px;color: #000;}
.totalWrap .total p.infoTxt{margin-top: 10px;font-size: 13px;color:#808080;width:200px;}
.totalWrap .total:before{content:"";position:absolute;left: 10px;top: 22px;width:16px;height:4px;background-color: #CBCBCB;border-radius: 20px;}
.totalWrap .total:after{content:"";position:absolute;left: 10px;top: 28px;width:16px;height:4px;background-color: #CBCBCB;border-radius: 20px;}

#mitTvCase,#itTvCase{}
#mitTvCase .case_name,#itTvCase .case_name{background-image: url(/unify/m/images/direct/m_ico_circle_tv.png);}
#mitTvCase:before,#itTvCase:before{content:"";position:absolute;top:50%;left:-29px;width:39px;height:39px;background:url(/unify/pc/images/direct/ico_plus.png) 0 0 no-repeat;transform: translateY(-50%);}

.mobileUsed{margin-bottom:15px;padding:5px;width: 100%;height: inherit;text-align: center;}
.mobileUsed .case_name{background-image: url(/unify/m/images/direct/m_ico_circle_mobile.png);background-position:41.5% 50%;color:#FE2E36;}

.noCase{height:240px;position:relative;}
.noCase .txt{width:100%;padding-top:70px;background:url(/unify/m/images/direct/m_ico_tv.png) 50% 0 no-repeat;background-size: 60px auto;font-size:16px;color:#000;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);text-align: center;}
.noCase .txt>span{color: #0F807B;}

.btn_regi{position: absolute;right: 30px;bottom: 50px;}
.btn_regi a{display: inline-block;width:195px;height: 56px;line-height: 56px;text-align: center;border-radius: 8px;background-color: #01A69F;font-size: 20px;color:#fff;}

.layerWrap.mitLayer .btnLayerItem{background-color: #01A69F;border:0;}
.layerWrap.mitLayer .btnLayerItem span{color:#fff;}
.layerWrap.mitLayer .option_list>li{margin-top:0;padding: 30px 0;border-bottom:1px solid #D9D9D9;}
.layerWrap.mitLayer .option_list>li>div{display: inline-block;margin-top: 4px;}
.layerWrap.mitLayer .case_list{margin: 0;padding: 0;border: 0;}
.layerWrap.mitLayer .case_list>li{margin-bottom:0;}
.layerWrap.mitLayer .case_list>li:first-of-type{width: 120px;}
.layerWrap.mitLayer .option_noti{font-size: 16px;}
.layerWrap.mitLayer .option_list input[type="radio"]{top:34px;}
.layerWrap.mitLayer .option_list input[type="radio"] + label{display: inline-block;width: 200px;}