﻿/* PC 전용 CSS */
@media (max-width: 1024px){
 .plan .sale { padding: 0.5rem; } 

 .plan .sale > li { width: 100%; margin-bottom: 20px; margin-right: 0; height: auto; float: none; } 

 .bn_list { display: flex; flex-direction: column; } 

 .bn_list li { height: auto; width: 100%; } 

 .bn_list li:nth-child(1) { background: #ff6262; } 

 .bn_list li:nth-child(1) .img_box { background: #ff8181; transition: 0.3s ease; } 

 .bn_list li:nth-child(1) .img_box .box { transition: 0.3s ease; background: #ff8181 url(//blob.wifidosirak.com/wm-d01/dosirakmobile/images/intro/main/nemo01.png) no-repeat center center; } 

 .bn_list li:nth-child(2) { background: #fcbb42; } 

 .bn_list li:nth-child(2) .img_box { background: #fdc968; transition: 0.3s ease; } 

 .bn_list li:nth-child(2) .img_box .box { transition: 0.3s ease; background: #fdc968 url(//blob.wifidosirak.com/wm-d01/dosirakmobile/images/intro/main/nemo02.png) no-repeat center center; } 

 .bn_list li:nth-child(3) { background: #8cc152; } 

 .bn_list li:nth-child(3) .img_box { background: #a3cd75; transition: 0.3s ease; } 

 .bn_list li:nth-child(3) .img_box .box { transition: 0.3s ease; background: #a3cd75 url(//blob.wifidosirak.com/wm-d01/dosirakmobile/images/intro/main/nemo03.png) no-repeat center center; } 

 .bn_list li .num { color: #fff; } 

 .bn_list li .tit { color: #fff; } 

 .bn_list li .tit small { color: #fff; } 

 .bn_list li .tit small span { color: #fff; } 

 .bn_list li .hide_p { color: #fff; display: block; } 

 .receiveSwiper { padding: 0 5px; } 
 }

@media (max-width: 992px) {
 select { font-size: 16px; } 

 .inner { padding: 0.5rem; } 

 .subTitAr { margin-bottom: 25px; } 

 .carousel { height: 78vw; } 

 .w-50 { width: 100% !important}

 .popContainer.center { top: 0; left: 0; transform: none; max-height: 100vh; } 

 .popContainer.inputContainer.center { top: auto; left: 0; bottom: env(safe-area-inset-bottom); transform: none; } 

 .popContTit + .popBody { max-height: calc(100vh - 80px); overflow-y: auto; } 

 .welecome_text p { font-weight: 400; font-size: 20px; } 

 .tab { border-radius: 0; } 

 .tab a { border-radius: 0; } 

 .form-switch { padding-left: 0; } 

 .form-check-large .form-check-input { margin-left: 0; } 

 .info { padding-bottom: 0; padding-top: 60px; } 

 .info .left { width: 100%; float: none; } 

 .info .left h2 { font-size: 26px; margin-bottom: 20px; } 

 .info .right { width: 100%; float: none; } 

 .info .right strong { font-size: 16px; } 

 .info .right em { font-size: 15px; line-height: 22px; } 

 .plan { margin-top: 60px; } 

 .btnCom { width: 30% !important; padding: 10px 0; font-size: 16px; height: auto; } 

 .btnCom:nth-of-type(n+2) { margin-left: 3%; width: 60% !important; } 
 .btn-post { width: 100%; }

 .btn_gp { width: 100%; margin-top: 15px; } 

 .btn_gp a { width: 100%; margin-right: 0; margin-bottom: 10px; height: 50px; line-height: 50px; font-size: 18px; } 

 .receiveSwiper a { padding: 0; } 

 .receive_contents .left { width: 100%; float: none; margin-bottom: 10px; } 

 .receive_contents .right { width: 100%; float: none; padding-left: 15px; } 

 .pay .box { height: 17rem; padding: 20px; } 

 .csAr .csCon > div { width: 100%; float: none; margin: 0; margin-bottom: 20px; } 

 .csAr .csCon > div:nth-of-type(n+2) { margin-left: 0; } 

 .csAr .csCon h1 { margin-bottom: 20px; padding-bottom: 10px; } 

 .csAr .csCon .txtCall { font-size: 16px; } 

 .csAr .csCon > div .kakaoBtn { top: 30px; text-align: center; } 

 .csAr .csCon > div .kakaoBtn img { max-width: 54%; } 

 .loginTab-content { width: 95%}

 .cs .searchAr { width: 100%; } 

 .cs .searchAr .searchWrap { width: 100%; display: inline-flex; } 

 .noticeTitle { width: 60%; } 

 .noticeRegist { margin-left: 2%; color: #666}

 .inquery-ctg { min-width: 45%; } 

 .flexWp ul li { width: 100%; float: none; } 

 .flexWp ul li:nth-of-type(even) { margin-left: 0; } 

 .flexWp input { width: 100%; } 

 .flexWp .emailWp { width: 100%; } 

 .flexWp .item-button { width: 100%; margin-top: 1rem; } 

 .inquery .attachmentAr .attachmentTxt { font-size: 14px; } 

 .inquery-list-title { width: 40%; } 

 .inquery-list-regist { margin-left: 2%; font-size: 13px; color: #666}

 .inquery-list-condition { margin-left: 9%; display: inline-block; width: 55px; height: 34px; line-height: 34px; text-align: center; font-size: 13px; color: #fff; border-radius: 5px; background-color: #c2c2c2; box-sizing: border-box; } 

 .answer { display: block; width: 100%; min-height: 200px; max-height: 400px; border: 1px solid #c2c2c2; border-radius: 5px; padding: 20px; font-weight: 400; font-size: 1.125rem; background-color: #fff; overflow-y: auto; box-sizing: border-box; /* 패딩과 보더를 포함하여 width를 100%로 계산 */}

 .rate-condition-li { display: block; width: 100%; padding: 15px; } 

 .rate-condition-li:nth-of-type(n+2) { margin-left: 0; margin-top: 10px; } 

 .listTop > .left { width: 65%; } 

 .listTop > .left .listNote { font-size: 12px; height: 32px; line-height: 32px; } 

 .listTop > .right { width: 35%; text-align: center; } 

 .listTop > .right select { height: 30px; line-height: 30px; width: 100%; padding: 0 10px; font-size: 12px; } 

 .chargeListDetail .listTitle { font-size: 16px; font-weight: 500; } 

 .chargeListDetail .listCharge { width: 100%; font-size: 16px; } 

 .chargeListDetail .joinBtn { margin-top: 5px; } 

 .step { padding: 10px 10px 20px; } 

 .step .subject { display: block; width: 100%; float: none; margin-bottom: 0; } 

 .step .subject .subjectTit { font-size: 16px; margin-bottom: 0; } 

 .step .subject .subjectLine { display: none; } 

 .step .content { display: block; width: 100%; margin-top: 5px; } 

 .step .content .contentTit { font-size: 16px; } 

 .step .content .contentText { font-size: 16px; } 

 .step .content .contentBtn { font-size: 16px; } 

 .step .content .noteTxt { font-size: 14px; margin-left: 0px; } 

 .step .content .contentText img.imgCenter { display: block; width: 100%; margin: auto; padding: 15px; } 

 .step .content .contentText .usimImg li { width: 100%; float: none; } 

 .step .content .contentText .usimImg li img { width: 100%; } 

 .step .content .contentText .usimImg li:nth-of-type(n+2) { margin-left: 0; margin-top: 10px; } 

 .step .content .contentText .usimImg .imgTit { font-size: 16px; } 

 .step .content .contentText .usimImg .imgTxt { font-size: 16px; } 

 .step .content .contentText .usimImg.chk li { width: 100%; float: none; } 

 .step .content .contentText .usimImg.chk li:nth-of-type(n+2) { width: 100%; } 

 .mypageWp { padding: 1rem; } 

 .mypageWp .row .myinfoTit { font-size: 16px; } 

 .mypageWp .row .myinfoTxt { font-size: 16px; } 

 .mypageWp .row .joinSelect { width: 63%; font-size: 14px; height: 34px; line-height: 34px; } 

 .mypageWp .row .joinSearch { width: 35%; font-size: 14px; height: 34px; } 

 .mypageWp .row .prodTit { font-size: 16px; } 

 .mypageWp .row .prodTxt { font-size: 14px; } 

 .active_infor { padding: 1.5rem 1.5rem 0px 1.5rem; } 

 .active_infor li .activeTit { width: 30%; font-size: 14px; } 

 .active_infor li .activeContent { width: 60%; font-size: 14px; } 

 .radiusPop .popContainer { border-bottom-right-radius: unset; border-bottom-left-radius: unset; } 

 .pwdCheck-content { width: 100%}

 .member_infor li { padding: 10px}

 .member_infor li .activeTit { width: 35%; font-size: 14px; } 

 .member_infor li .activeContent { width: 63%; font-size: 14px; } 


 .subStepWrap .stepAr { padding: 25px 10px; background: url(//blob.wifidosirak.com/wm-d01/dosirakmobile/images/step_line_MO.png) no-repeat center center; } 

 .subStepWrap .stepAr li .stepNum { width: 100px; padding: 5px; font-size: 12px; border-radius: 20px; } 

 .subStepWrap .stepAr li .stepNum b { display: block; } 

 
 .memberJoin .memberSite { padding: 0; } 

 .memberJoin .memberSite img { width: 32%; margin-bottom:5px}
 .memberJoin-step1 .card { padding: 30px; } 

 .btn-duplicate { margin-top:10px; margin-left:0; width:100%; } 

 .reserv_step1 input + label em:nth-child(2) { font-size: 14px; } 

 .reserv_step1 input + label { align-items: flex-start; /* 필요시 라벨 안 요소들이 상단 정렬되도록 설정 */}


 .plan_content .planTitle { font-size: 1.1rem; font-weight: bold; } 

 .plan_content .card-body div:nth-child(1) { width: 65%; float: left; height: 57px; } 

 .plan_content .card-body div:nth-child(2) { width: 35%; float: right; text-align: right; height: 57px; } 

 .plan_content .planText { font-size: 0.9rem; } 

 .plan_content .btn-plan { font-size: 1rem; width: 100%; height: 100%; } 


 .priceFloat .priceFloatAr, .priceFloat.top .priceFloatAr { width: 100%; } 

 .priceFloat .priceFloatAr .lt { width: 45%; font-size: 15px; padding: 10px; } 

 .priceFloat .priceFloatAr .lt.wide { width: 80%; } 

 .priceFloat .priceFloatAr .rt { width: 55%; padding: 10px; } 

 .priceFloat .priceFloatAr .rt.narrow { width: 20%; } 

 .priceFloat .priceFloatAr .floatTit { margin-right: 0; } 

 .priceFloat .priceFloatAr .floatPrice { display: block; } 

 .priceFloat .priceFloatAr .floatPriceBtn { width: 90px; padding: 10px 0; font-size: 16px; } 

 .priceFloat .priceFloatAr .arrowPrice { width: 42px; height: 42px; margin-left: 10px; } 

 .priceFloat .priceFloatAr .arrowPrice:before, .priceFloat .priceFloatAr .arrowPrice:after { top: 20px; } 

 .priceFloat .priceFloatAr .arrowPrice:before { right: 18px; } 

 .priceFloat .priceFloatAr .arrowPrice:after { right: 8px; } 

 .priceFloat .pricefDetail .priceDetailAr { width: 100%; padding: 10px; } 

 .priceFloat .pricefDetail .priceDetailAr li { width: 50%; } 

 .priceFloat .pricefDetail .priceDetailAr li:first-child, .priceFloat .pricefDetail .priceDetailAr li:nth-of-type(2) { padding: 0; } 

 .priceFloat .pricefDetail .priceDetailAr li:nth-of-type(3) { width: 100%; padding-left: 0; display: block; } 

 .priceFloat .pricefDetail .priceDetailAr .priceMain { display: inline-block; height: 16px; line-height: 16px; } 

 .priceFloat .pricefDetail .priceDetailAr .priceMain:first-child { border-bottom: none; } 

 .priceFloat .pricefDetail .priceDetailAr .priceMain .priceName, .priceFloat .pricefDetail .priceDetailAr .priceMain .priceAmount { font-size: 12px; } 

 .priceFloat .pricefDetail .priceDetailAr .priceMain .priceName.etc { width: 65%; } 

 .priceFloat .pricefDetail .priceDetailAr .priceMain .priceAmount.etc { width: 35%; } 

 .priceFloat .pricefDetail .priceDetailAr .question { margin-top: 0; } 

 .priceFloat .pricefDetail .priceDetailAr .question img { width: 90%; } 

 .priceFloat .pricefDetail .priceDetailAr .priceAds { margin-top: 10px; padding: 20px; } 

 .priceFloat .pricefDetail .priceDetailAr .priceAds .adsTit { font-size: 16px; } 

 .reserv .reserv_step1 .plan_accordion .checkAr { background: url(//blob.wifidosirak.com/wm-d01/dosirakmobile/images/admCheck_off.png) no-repeat 0px center; } 

 .reserv .reserv_step1 .plan_accordion input:checked + label.checkAr { background: url(//blob.wifidosirak.com/wm-d01/dosirakmobile/images/admCheck_on.png) no-repeat 0px center; } 

 .reserv .reserv_step1 .plan_accordion .lt { width: 100%; padding:0px; padding-left:25px } 

 .reserv .reserv_step1 .plan_accordion .rt { width: 50%; } 

 .reserv .reserv_step1 .plan_accordion em { display: block; font-weight: bold; position: relative}

 .reserv .reserv_step1 .plan_accordion .lt em.mgl-50 { margin-left: 25px; } 
 .reserv .reserv_step1 .plan_accordion .rt em.mgl-50 { margin-left: 1rem; } 

 .reserv .reserv_step1 .plan_accordion .lt em:nth-child(1) { font-size: 12px; color: #333; } 
 .reserv .reserv_step1 .plan_accordion .lt em:nth-child(2) { font-size: 12px; } 
 .reserv .reserv_step1 .plan_accordion .rt em:nth-child(1) { font-weight:400; font-size: 11px; color: #333; } 

 .reserv .reserv_step1 .plan_accordion em:nth-child(2) { font-size: 16px; color: #6d6d6d; } 

 .reserv .reserv_step1 .plan_accordion .accordion-body { font-size:14px; }

 .reserv .reserv_step1 .card .lt em:nth-child(1) { font-size: 16px; color: #333; } 
 .reserv .reserv_step1 .card .lt em:nth-child(2) { font-size: 14px; }


 .reserv .reserv_step1 .usim_content .checkAr { display: flex; align-items: center; }
 .reserv .reserv_step1 .usim_content .lt em:nth-child(1) { font-size: 16px; color: #333; } 
 .reserv .reserv_step1 .usim_content .lt em:nth-child(2) { font-size: 15px; }
 .reserv .reserv_step1 .usim_content .rt { width: 50%; display: flex; align-items: center; padding: 20px 15px; text-align: right; }
 .reserv .reserv_step1 .usim_content .rt em.mgl-50 { margin-left: 1rem; }
 .reserv .reserv_step1 .usim_content .rt em:nth-child(1) { font-weight: bolder; font-size: 18px; color: #3a68b2; line-height: normal; }

 .btnWp .btn { width:50%;}
 .fake-input {width:100%;}
 .flexWp .input {width:100%; }
 .ml30, .ml10 { margin-left: 0; margin-top: 1rem; }
 .reserv select, .reserv input {width:100%}
 .reserv .id-card-photo { width: 100%; margin-right: 1rem; max-width:330px; }
 .reserv .input-cert, .reserv .input-address { width:100%; }
 .reserv .input-cert-prev {width:45%;}
 .reserv .input-cert-prev::placeholder{font-size:12px;}
 .reserv .input-cert-next { width:48%; }
 .reserv .input-cert-next::placeholder{font-size:12px;}
 .reserv .input-cert-hyphen { font-size:18px; padding:0 5px;}

 .reserv .idDate, .reserv .idDate2 {
     margin-left: 30px;
     margin-bottom: 0px;
     margin-top: 1rem;
 }

 .reserv .idDate:before, .reserv .idDate2:before {
     margin-left: -25px;
 }
    .reserv .select-drive-prev { width:100%; margin-top:1rem; }
    .reserv .select-drive-next { width:100%; margin-top:1rem;}
    .reserv .bb-callout p {font-size:14px;}

    .reserv .right { float: left; margin-left: 0; }


    .subStepWrap .reserv.stepAr {
        padding :0;
        padding-bottom: 25px;
        margin-bottom:0;
    }

        .subStepWrap .reserv.stepAr li {
            width: 24%;
            margin:0;
        
        }

            .subStepWrap .reserv.stepAr li .stepNum {
                font-size: 1rem;
            }
                .subStepWrap .reserv.stepAr li .stepNum b {
                    font-size: 0.78rem;
                }

                .subStepWrap .reserv.stepAr li .stepNum.on {
                    background-color: #3a68b2;
                }

    .select-prev-provider,
    .select-prev-company,
    .select-prev-bill {
        margin-top:1rem;
        margin-left:0;
    }

    .daum-post {
        min-width: 100%;
        max-width: 100%;
        min-height: 470px;
    }
    .alert { display: flex; align-items: center; }

    .alert .bi { padding-left: 0.5rem !important; }

    .reserv .paymentTab li {
        width: 33%;
    }

    .order_result li .confirmTit {
        width: 40%;
    }

    .order_result li .confirmTxt {
        width: 60%;
        padding-left:1rem;
    }
    .imgBarcode {
        width: 100%;
    }


    .orderList thead th, .orderList tbody td {
        font-size: 14px;
        padding: 5px 0;
        height: 50px;
        min-width:65px;
    }

    .orderList table .btn-wifi {
        width: 50px;
        height: 24px;
        line-height: 24px;
        font-size: 11px;
        padding:0;
    }

    .orderList .pc-con{
        display:none;
    }

    .chargeList .chargingInquiryList li > div {
        width: 40%;
    }

        .chargeList .chargingInquiryList li > div:last-child {
            width: 60%;
        }

    .chargeList .chargingInquiryList .listDate{

    }
    .WifiTitle{
        width:57%;
        font-size:19px;
    }
    .WifiAmount {
        margin-left: 0%;
        font-size: 18px;
    }
    .input-text {
        width: 100%;
    }
    .extend .flexWp ul {
        width: 100%;
    }
    .extend .reserv_step1 input + label.checkAr {
        background: url(//blob.wifidosirak.com/wm-d01/dosirakmobile/images/admCheck_off.png) no-repeat 4px center;
    }
    .extend .reserv_step1 input + label em.mgl-50 {
        margin-left: 25px;
    }
   
}
