/* 폼 공통` */
main{padding-top: 238px;overflow: hidden;background: #f6f6f6;}
.s1{background: #f6f6f6; padding-top: 70px;padding-bottom: 250px;}
._internet .s1{padding-bottom: 320px;}
._cable .s1{padding-bottom: 280px;}
.s1 .cont .wrap{width: 95%;}
.s1 .cont .tit > div{overflow: hidden;}
.s1 .cont .tit strong{font-size: 40px;font-weight: 800;display: block;}
.s1 .cont .tit small{font-size: 18px;font-weight: 600;color: #444444;display: block;padding-top: 15px;line-height: 1.3;}

.s1 .cont .formBx{padding-top: 70px;}
.s1 .cont .formBx .form_item{padding-bottom: 50px;}
.s1 .cont .formBx .form_item:last-child{padding-bottom: 0;}

.s1 .cont .formBx .form_tit h3{font-size: 18px;font-weight: 700;}

/* 옵션박스 공통 */
.s1 .cont .formBx .optionBx{padding-top: 20px;display: flex;align-items: center;justify-content: center;gap: 10px;}
.s1 .cont .formBx .optionBx .option{
    width: 100%;
    border: 1px solid #cccccc;
    border-radius: 9px;
    padding: 20px 0;
    text-align: center;
    font-size: 16px;font-weight: 600;color: #7c7c7c;
    box-sizing: border-box;
}
.s1 .cont .formBx .optionBx._cable .option.n4{min-height: 4em;display: flex;align-items: center;justify-content: center;}
/* ._minimum .s1 .cont .formBx .optionBx .option{min-height: 4.5em;} */
.s1 .cont .formBx .optionBx .option{transition: border .3s, color .3s;
    /* cursor: pointer; */
}
.s1 .cont .formBx .optionBx .option:hover{border: 1px solid #005627;color: #005627;}
.s1 .cont .formBx .optionBx .option.on{border: 1px solid #005627;color: #005627;}

.s1 .cont .formBx .optionBx._call img{height: 1.5em;}
.s1 .cont .formBx .optionBx._call .option.n1 img:first-child{height: 1.6em;}

/* 브랜드 옵션 박스 */
.s1 .cont .formBx .optionBx._brand {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}
.s1 .cont .formBx .optionBx._brand .option-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: calc(100%/ 3 - (10px*2/3));
    margin-bottom: 10px;
    position: relative;
}
.s1 .cont .formBx .optionBx._brand .option {
    width: 100%;
    border: 1px solid #cccccc;
    border-radius: 9px;
    padding:0;
    text-align: center;
    box-sizing: border-box;
    transition: border .3s, color .3s;
    cursor: pointer;
    overflow: hidden;
}
.s1 .cont .formBx .optionBx._brand .option:hover{border: 1px solid #005627;}
.s1 .cont .formBx .optionBx._brand .option:hover + .brand-name span {color: #005627;}
.s1 .cont .formBx .optionBx._brand .option.on {border: 1px solid #005627;}
.s1 .cont .formBx .optionBx .brand-name {
    margin-top: 8px;
    font-size: 16px;
    color: #7c7c7c;
    font-weight: 600;
    text-align: center;
}
.s1 .cont .formBx .optionBx._brand .option.on + .brand-name span {color: #005627;}
.s1 .cont .formBx .optionBx._brand .option img{position: relative;top: 10px;}

/* 렌탈 옵션 박스 */
.s1 .cont .formBx .optionBx._rental{display: flex;flex-wrap: wrap;gap: 10px;}
.s1 .cont .formBx .optionBx._rental .option-wrap{width: calc(100% / 4 - (10px*3/4));}
.s1 .cont .formBx .optionBx._rental .option {
    width: 100%;
    border: 1px solid #cccccc;
    border-radius: 9px;
    padding:0;
    text-align: center;
    box-sizing: border-box;
    transition: border .3s, color .3s;
    cursor: pointer;
    overflow: hidden;
}
.s1 .cont .formBx .optionBx._rental .option:hover{border: 1px solid #005627;}
.s1 .cont .formBx .optionBx._rental .option:hover + .brand-name span {color: #005627;}
.s1 .cont .formBx .optionBx._rental .option.on {border: 1px solid #005627;}

.s1 .cont .formBx .optionBx._rental .option.on + .brand-name span {color: #005627;}
.s1 .cont .formBx .optionBx._rental .option img{}



.s1 .cont .formBx .txtBx{background: #ececec;padding: 30px;box-sizing: border-box;border-radius: 10px;font-family: 'Pretendard';}
.s1 .cont .formBx .txtBx.txtBx2{margin-top: 30px;}
.s1 .cont .formBx .txtBx.txtBx2 p em{margin: 0 3px;}
.s1 .cont .formBx .txtBx.txtBx2 p span._cir{padding-right: 5px;}
.s1 .cont .formBx .txtBx.txtBx2 p span._line{padding: 0 5px;}
.s1 .cont .formBx .txtBx > div{padding-bottom: 20px;}
.s1 .cont .formBx .txtBx > div:last-child{padding-bottom: 0;}
.s1 .cont .formBx .txtBx p{font-size: 18px;font-weight: 500;color: #7c7c7c;line-height: 1.3;}
.s1 .cont .formBx .txtBx p em{display: inline-block;min-width: 35px;}
.s1 .cont .formBx .txtBx p i.xi-star{color: var(--green);}
.s1 .cont .formBx .txtBx p i.xi-star-o{color: #7c7c7c;}


/* internet + 공통  */
@media screen and (max-width: 1680px) {
    .s1 .cont .tit strong{font-size: 36px;}
}
@media screen and (max-width: 1440px) {
    .s1 .cont .tit strong{font-size: 32px;}
}
@media screen and (max-width: 1280px) {
    .s1 .cont .tit strong{font-size: 28px;}
}
@media screen and (max-width: 1024px) {
    main {padding-top: 200px;}
}
@media screen and (max-width: 820px) {
    main {padding-top: 180px;}
    .s1 .cont .tit strong{font-size: 24px;}
    .s1 .cont .tit small {font-size: 16px;}

    .s1 .cont .formBx .txtBx p {font-size: 16px;}
    
}
@media screen and (max-width: 500px) {
    main {padding-top: 160px;}
    .s1 .cont .tit strong{font-size: 22px;}
    .s1 .cont .tit small {font-size: 14px;}
    .s1 .cont .formBx .txtBx p {font-size: 14px;}
    .s1 .cont .formBx .optionBx .option{font-size: 13px;}
    .s1 .cont .formBx .optionBx.speed{flex-wrap: wrap;}
    .s1 .cont .formBx .form_item._usim .optionBx .option span{line-height: 1.3;}
    .s1 .cont .formBx .form_item._usim .optionBx .option{min-height: 6em;display: flex;align-items: center;justify-content: center;}

    .s1 .cont .formBx .optionBx._call .option.n1 img:first-child {height: 1.4em;}
    .s1 .cont .formBx .optionBx._call .option img{height: 1.4em;}
    
}
@media screen and (max-width: 360px) {

    .s1 .cont .formBx .optionBx{flex-wrap: wrap;}
    .s1 .cont .formBx .form_item._usim .optionBx .option{min-height: unset;}
}

/* water_purifier */
@media screen and (max-width: 820px) {
    .s1 .cont .formBx .optionBx._brand .option-wrap {
        width: calc(100% / 2 - (10px * 1 / 2));
    }
}
@media screen and (max-width: 500px) {
    /* .s1 .cont .formBx .optionBx._brand .option-wrap {
        width: 100%;
    } */

    .s1 .cont .formBx .optionBx .brand-name{font-size: 13px;}
}
@media screen and (max-width: 360px) {
    .s1 .cont .formBx .optionBx._brand .option-wrap {
        width: 100%;
    }
}

/* rental */

@media screen and (max-width: 1024px) {
    .s1 .cont .formBx .optionBx._rental .option-wrap{width: calc(100% / 3 - (10px*2/3));}
    .s1 .cont .formBx .optionBx._rental {justify-content: flex-start;}
}
@media screen and (max-width: 820px) {
    .s1 .cont .formBx .optionBx._rental .option-wrap{width: calc(100% / 2 - (10px*1/2));}
}
@media screen and (max-width: 360px) {
    .s1 .cont .formBx .optionBx._rental .option-wrap{width: 100%;}
}

/* 최저 요금제 */


._sub .s2{background: var(--green);box-sizing: border-box;letter-spacing: -0.03em;position: relative;}
._sub .s2 .cont{padding: 25px 0}
._sub .s2.n2 .cont{padding: 50px 0;}
._sub .s2 .cont .row{display: flex;align-items: center;justify-content: space-between;}
._sub .s2 .cont .row.n1 p{font-size: 18px;font-weight: 600;color: #fff;}
._sub .s2 .cont .row.n1 p span{font-size: 14px; color: #bcc0be;font-weight: 500;}

._sub .s2 .cont .row.n2{padding-top: 15px;}
._sub .s2 .cont .row.n2 p{font-size: 18px;font-weight: 600;color: #fff;}
._sub .s2 .cont .row.n2 p:nth-child(2){font-size: 22px;font-weight: 800;color: #fff;text-align: right;}
._sub .s2 .cont .row.n2 p span{font-size: 14px; color: #bcc0be;font-weight: 500;}

._sub .s2.n2 .cont .row p:nth-child(1){font-size: 32px;font-weight: 800;color: #fff;}
._sub .s2.n2 .cont .row p i{font-size: 30px;}
._sub .s2.n2 .cont .row p:nth-child(2){font-size: 16px;color: #bcc0be;}
._sub .s2 .cont .cir{background: #fff;border-radius: 50%;width: 120px;height: 120px;position: absolute;top: 18%;left: 50%;transform: translate(-50%, -50%);  border: 1px solid transparent;
    transition: border-width 0.8s, border-color 0.8s, color 0.8s;
    display: flex;
    align-items: center;
    justify-content: center;
    display: flex;align-items: center;justify-content: center;
}
._sub .s2 .cont .cir img{
    position: absolute;
    top: -10%;
    left: 50%;
    pointer-events: none;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity 0.8s;
}
._sub .s2 .cont .cir span{font-size: 18px;font-weight: 700;color: #7c7c7c;text-align: center;
line-height: 1.3;display: block;}

._sub .s2 .cont .cir:hover {border-width: 1px;border-color: #005627;}
._sub .s2 .cont .cir:hover span{color: #005627;}
._sub .s2 .cont .cir:hover img{opacity: 1;}

._sub .s2 .mob_tit{background: #fff;padding: 20px 0;box-sizing: border-box;display: flex;align-items: center;justify-content: center;gap: 20px;display: none;border: 1px solid #005627;}
._sub .s2 .mob_tit span{font-size: 18px;font-weight: 700;color: var(--green);text-align: center;
line-height: 1.3;display: block;}
._sub .s2 .mob_tit .arrow{display: flex;align-items: center;justify-content: center;}
._sub .s2 .mob_tit .arrow i{margin: 0 -5px; font-size: 18px;
    animation: arrow 2.5s linear infinite forwards;}
._sub .s2 .mob_tit .arrow.n1 i:nth-child(1) {animation-delay: 0.25s;}
._sub .s2 .mob_tit .arrow.n1 i:nth-child(2) {animation-delay: 0.2s;}
._sub .s2 .mob_tit .arrow.n1 i:nth-child(3) {animation-delay: 0.15s;}
._sub .s2 .mob_tit .arrow.n1 i:nth-child(4) {animation-delay: 0.1s;}
._sub .s2 .mob_tit .arrow.n1 i:nth-child(5) {animation-delay: 0s;}

._sub .s2 .mob_tit .arrow.n2 i:nth-child(1) {animation-delay: 0s;}
._sub .s2 .mob_tit .arrow.n2 i:nth-child(2) {animation-delay: 0.1s;}
._sub .s2 .mob_tit .arrow.n2 i:nth-child(3) {animation-delay: 0.15s;}
._sub .s2 .mob_tit .arrow.n2 i:nth-child(4) {animation-delay: 0.2s;}
._sub .s2 .mob_tit .arrow.n2 i:nth-child(5) {animation-delay: 0.25s;}

@keyframes arrow {
    0% {opacity: 0;}
    50% {opacity: 1;}
    100% {opacity: 0;}
}

@media screen and (max-width: 820px) {
    ._sub .s2 .mob_tit{display: flex;}
    ._sub .s2 .cont .cir{display: none;}
    ._sub .s2 .cont .cir span{font-size: 16px;}
    
    ._sub .s2.n2 .cont .row{justify-content: center;gap: 20px;}
    ._sub .s2.n2 .cont .row p:nth-child(1) {font-size: 28px;}
    ._sub .s2.n2 .cont .row p i{font-size: 26px;}

}
@media screen and (max-width: 500px) {
    ._sub .s2 .cont .row{align-items: flex-start;}
    ._sub .s2 .cont .row.n1 p {font-size: 16px;display: flex;gap: 5px;}
    ._sub .s2 .cont .row.n1 p span {font-size: 12px;}

    ._sub .s2 .cont .row.n2 p {font-size: 16px; display: flex;flex-direction: column;gap: 5px;line-height: 1;}
    ._sub .s2 .cont .row.n2 p span {font-size: 12px;}
    ._sub .s2 .cont .row.n2 p:nth-child(2) {font-size: 20px;}

    ._sub .s2.n2 .cont .row{align-items: center;flex-direction: column;}
    ._sub .s2.n2 .cont .row.n1 p{align-items: center;}
}
@media screen and (max-width: 360px) {
    ._sub .s2 .mob_tit span {font-size: 16px;}
}

/* 최대 혜택 */

._maximum .s1 .cont .formBx .form_tit h3{display: flex;gap: 8px;align-items: center;}
._maximum .s1 .cont .formBx .form_tit h3 span{font-size: 16px;color: #7c7c7c;}
._maximum .s2 .cont .row.n2{padding-top: 0;}

@media screen and (max-width: 500px) {
    ._maximum .s1 .cont .formBx .form_tit h3{flex-direction: column;align-items: flex-start;}
    ._maximum .s1 .cont .formBx .form_tit h3 span{font-size: 14px;}
}


/* cable */
._cable .s1 .cont .formBx .form_tit h3{display: flex;gap: 8px;align-items: center;}
._cable .s1 .cont .formBx .form_tit h3 span{font-size: 16px;color: #7c7c7c;}

._cable .s2 .cont .row.n2 p:nth-child(2){font-size: 18px;font-weight: 600;color: #fff;}
._cable .s2 .cont .row.n3{padding-top: 15px;}
._cable .s2 .cont .row.n3 p{font-size: 18px;font-weight: 600;color: #fff;}
._cable .s2 .cont .row.n3 p:nth-child(1){line-height: 1.3;}
._cable .s2 .cont .row.n3 p:nth-child(2){font-size: 22px;font-weight: 800;color: #fff;text-align: right;}
._cable .s2 .cont .row.n3 p span{font-size: 14px; color: #bcc0be;font-weight: 500;}


@media screen and (max-width: 500px) {
    ._cable .s1 .cont .formBx .form_tit h3{flex-direction: column;align-items: flex-start;}
    ._cable .s1 .cont .formBx .form_tit h3 span{font-size: 14px;}

    ._cable .s2 .cont .row.n3 p {font-size: 16px;}
    ._cable .s2 .cont .row.n3 p span {font-size: 12px;}
    ._cable .s2 .cont .row.n3 p:nth-child(2) {font-size: 18px;}
}

/* internet */
._internet .s2 .cont .row.n1 p{font-size: 32px;font-weight: 800;color: #fff;display: flex;align-items: center;gap: 10px;}
._internet .s2 .cont .row.n1 p i{font-size: 30px;}
._internet .s2 .cont .row.n1 p:nth-child(2){font-size: 18px;font-weight: 500;}
._internet .s2 .cont .row.n2 > div{display: flex;align-items: center;gap: 5px;}

@media screen and (max-width: 820px) {
    ._internet .s2 .cont .row.n1 p {font-size: 24px;}
    ._internet .s2 .cont .row.n1 p i{font-size: 20px;}
    ._internet .s2 .cont .row.n1 p:nth-child(2) {font-size: 14px;}
}
@media screen and (max-width: 500px) {
    ._internet .s2 .cont .row.n2 p:nth-child(2) {font-size: 16px;}
    ._internet .s2 .cont .row.n1 p {font-size: 20px;}
    ._internet .s2 .cont .row {align-items: center;}
    /* ._internet .s2 .cont .row.n1 p {font-size: 20px;}
    ._internet .s2 .cont .row.n1 p i{font-size: 18px;} */
    ._internet .s2.n2 .cont .row {
        align-items: center;
        flex-direction: column;
        gap: 10px;
    }
}
@media screen and (max-width: 360px) {
    ._internet .s2 .cont .row.n1 p {font-size: 18px;}
    
}