@charset "utf-8";
/**
 * WD Cascading Style Sheets
 * File Name : content.css
 * Description : content 스타일시트
 * Email : kukuyani@naver.com
 * Date : 2024.07.02
 * Update : 2024.07.02
 * Copyright(c) WD. All Rights Reserved.
*/

/* ************************************** *
 * common style
 * ************************************** */





/* ************************************** *
 * content style
 * ************************************** */
/* 상품 카테고리 선택 */
.category-select dt { display: none; float: left; width: 0%; line-height: 26px; color: #222; font-weight: 700; font-family: "NEXON Lv2 Gothic Bold",sans-serif !important; font-size: 1.8rem;}
.category-select dd { margin-bottom: 15px; float: left; width: 100%; box-sizing: border-box;}
.category-select .crb-search input[type=radio] { display: none;}
.category-select .crb-search input[type=radio]+label { display: inline-block; cursor: pointer; margin-right: 30px; line-height: 26px; color: #666; font-weight: 700; font-family: "NEXON Lv2 Gothic Bold",sans-serif !important; font-size: 1.8rem;}
.category-select .crb-search input[type=radio]:checked+label { color: #74a4fd;}
/* 상품 정렬 선택 */
.sorted-select { width: 100%; padding: 20px 0 10px; margin-bottom: 20px; border-bottom: solid 1px #ccc;}
.sorted-select .crb-search input[type=radio] { display: none;}
.sorted-select .crb-search input[type=radio]+label { display: inline-block; cursor: pointer; margin-right: 20px; color: #999; font-size: 1.5rem;}
.sorted-select .crb-search input[type=radio]:checked+label { color: #74a4fd;}
/* 상품 STEP */
.product-step { text-align: center;}
.product-step h2 { font-weight: 700; font-family: "NEXON Lv2 Gothic Bold",sans-serif !important; font-size: 2.3rem; color: #74a4fd;}
.product-step .step-line { position: relative; width: 250px; height: 8px; margin: 15px auto; background: #e6e6e6; border-radius: 20px; text-indent: -9999px;}
.product-step .step-line span { position: absolute; left: 0; top: 0; height: 8px; background: #74a4fd; border-radius: 20px;}
.product-step .step-line span.step1 { width: 25%;}
.product-step .step-line span.step2 { width: 50%;}
.product-step .step-line span.step3 { width: 75%;}
.product-step .step-line span.step4 { width: 100%;}
/* 통신사 타이틀 */
h3.tit-telecom { width: 100%; padding-bottom: 15px; margin-bottom: 30px; border-bottom: solid 1px #999;}
/* 상품 상세보기 */
.product-view { width: calc(100% - 450px);}
.product-view h3.tit-prod { margin-bottom: 10px; font-weight: 700; font-family: "NEXON Lv2 Gothic Bold",sans-serif !important; font-size: 2.3rem; color: #333; line-height: 38px;}
.product-view h3.tit-prod img { padding-right: 10px;}
.product-view h3.tit-prod span { font-weight: normal; font-size: 1.5rem; color: #4d4d4d;}
.product-view .view-box { padding: 20px 50px; margin-bottom: 40px; border-radius: 20px; border: solid 1px #666; box-sizing: border-box;}
.product-view .view-box > div { align-self: center;}
.product-view .view-box .view-prod01 { flex: 1 1 40%; max-width: 40%;}
.product-view .view-box .view-prod01 p:nth-of-type(1) { padding-bottom: 7px; font-size: 2.8rem; font-weight: 700; font-family: "NEXON Lv2 Gothic Bold",sans-serif !important; color: #1a1a1a;}
.product-view .view-box .view-prod01 p:nth-of-type(2) { font-size: 1.5rem; color: #666;}
.product-view .view-box .view-prod02 { flex: 1 1 30%; max-width: 30%; text-align: right;}
.product-view .view-box .view-prod02 img {}
.product-view .view-box .view-prod02 p { padding-top: 10px; font-size: 1.5rem; color: #333;}
.product-view .view-box .view-prod03 { flex: 1 1 30%; max-width: 30%; text-align: right;}
.product-view .view-box .view-prod03 p { font-size: 2.5rem; font-weight: 700; font-family: "NEXON Lv2 Gothic Bold",sans-serif !important; color: #1a1a1a;}
.product-view .view-box .view-prod03 p span { font-size: 2rem; color: #4d4d4d;}
.product-view .view-box .view-unite { flex: 1 1 50%; max-width: 50%; text-align: center;}
.product-view .view-box .view-unite h4 { margin-bottom: 10px; font-size: 2.2rem; font-weight: 700; font-family: "NEXON Lv2 Gothic Bold",sans-serif !important; color: #1a1a1a;}
.product-view .view-box .view-unite p { display: inline-block; background: #c7ddff; border: solid 1px #74a4fd; border-radius: 10px; padding: 15px 20px; font-size: 1.7rem; color: #4486ee;}
.product-view hr { padding-top: 30px; border-bottom: solid 1px #999 !important ; position: static; width: 100%; visibility: visible;}
.product-view h3.tit-etc { display: inline-block; padding-top: 5px; margin: 70px 0 30px; border-top: solid 8px #999; font-weight: 700; font-family: "NEXON Lv2 Gothic Bold",sans-serif !important; font-size: 2.3rem; color: #1a1a1a; line-height: 1.5em;}
.product-view .step-box { margin-right: -5%; overflow: hidden;}
.product-view .step-box li { position: relative; flex: 1 1 20%; max-width: 20%; margin-right: 5%; background: #ededed; border-radius: 10px; padding: 30px 15px; box-sizing: border-box; text-align: center;}
.product-view .step-box li:before { position: absolute; right: -30px; top: 50%; width: 0; height: 0; border-style: solid; border-width: 30px 0px 30px 30px; border-color: transparent transparent transparent #999; content: ""; transform: translate(0,-50%);}
.product-view .step-box li:last-child:before { border: 0;}
.product-view .step-box li p:nth-of-type(1) { font-weight: 700; font-family: "NEXON Lv2 Gothic Bold",sans-serif !important; margin-bottom: 15px; font-size: 1.1rem; color: #4d4d4d; line-height: 2em;}
.product-view .step-box li p:nth-of-type(1) span { font-size: 2rem; color: #1a1a1a;}
.product-view .step-box li h4 { margin: 20px 0 10px; font-weight: 700; font-family: "NEXON Lv2 Gothic Bold",sans-serif !important; font-size: 2rem; color: #1a1a1a;}
.product-view .step-box li p:nth-of-type(2) { font-size: 1.4rem; color: #4d4d4d; line-height: 1.4em;}
.product-view .tip-box li { padding: 25px 35px; margin-bottom: 10px; border-radius: 20px; border: solid 1px #666; font-size: 1.7rem; color: #333; line-height: 1.5em; box-sizing: border-box;}
.product-view .tip-box li a {font-weight: 700; font-family: "NEXON Lv2 Gothic Bold",sans-serif !important; color: #333;}
.product-view .tip-box li a:hover{font-weight: 700; font-family: "NEXON Lv2 Gothic Bold",sans-serif !important; color: #74a4fd;}
/* 영수증 영역 */
.receipt-box { align-self: flex-start; position: sticky; top: 230px; width: 400px; height: auto; margin-left: 50px; padding: 50px; border-radius: 20px; box-sizing: border-box; box-shadow: 5px 5px 10px rgba(0,0,0,.5); -webkit-box-shadow: 5px 5px 10px rgba(0,0,0,.5); -ms-box-shadow: 5px 5px 10px rgba(0,0,0,.5);}
.receipt-box h3 { font-weight: 700; font-family: "NEXON Lv2 Gothic Bold",sans-serif !important; font-size: 2.4rem; color: #1a1a1a;}
.receipt-box h3 span { padding-left: 5px; font-weight: normal; font-size: 1.4rem; color: #4d4d4d;}
.receipt-box ul { padding-bottom: 10px;}
.receipt-box li { padding: 25px 10px;}
.receipt-box li:nth-of-type(2) { border-top: solid 1px #4d4d4d; background: url('image/dotline.png') repeat-x left bottom;}
.receipt-box li p.total1 { font-size: 2rem; color: #333;}
.receipt-box li p.total1 span { float: right;}
.receipt-box li p.total2 { font-size: 2rem; font-weight: 700; font-family: "NEXON Lv2 Gothic Bold",sans-serif !important; color: #1a1a1a;}
.receipt-box li p.total2 span { float: right; font-size: 2.4rem;}
.receipt-box li p.detail-summury { font-size: 1.4rem; color: #4d4d4d;}
.receipt-box li dl.pay-detail { padding: 15px 0 0 20px;}
.receipt-box li dl.pay-detail dt { background: url('image/bu-list03.png') no-repeat left 7px; padding-left: 15px;}
.receipt-box li dl.pay-detail dt,
.receipt-box li dl.etc-detail dt { float: left; width: 60%; margin-bottom: 7px; font-size: 1.6rem; color: #666; box-sizing: border-box;}
.receipt-box li dl.pay-detail dd,
.receipt-box li dl.etc-detail dd { float: right; width: 40%; margin-bottom: 7px; font-size: 1.6rem; color: #666; text-align: right; box-sizing: border-box;}
.receipt-box li dl.etc-detail { padding-top: 20px;}
.receipt-box li h4 { font-size: 1.7rem; font-weight: 700; font-family: "NEXON Lv2 Gothic Bold",sans-serif !important; color: #1a1a1a;}
/* 신청상품확인 */
.checking-box { padding: 30px; margin-bottom: 50px; border-radius: 10px; border: solid 1px #b3b3b3;}
.checking-box > div { flex: 1 1 50%; max-width: 50%;}
.checking-box h4 { float: left; width: 20%; font-size: 1.7rem; font-weight: 700; font-family: "NEXON Lv2 Gothic Bold",sans-serif !important; color: #1a1a1a;}
.checking-box p { float: left; width: 80%; border-left: solid 1px #74a4fd; padding-left: 20px; font-size: 1.7rem; color: #333; box-sizing: border-box;}
/* 가입자정보 */
.subs-info { width: 80%;}
.subs-info dt { margin-bottom: 10px; font-size: 1.9rem; color: #1a1a1a;}
.subs-info dt span { font-weight: normal; font-size: 1.1rem; color: #4d4d4d;}
.subs-info dd { margin-bottom: 30px;font-size: 1.9rem; color: #4d4d4d;}
.subs-info dd span{ margin-bottom: 30px;font-size: 1.9rem; color: #397dfc;font-weight: 700; font-family: "NEXON Lv2 Gothic Bold",sans-serif !important; }
.subs-info dd input::placeholder { color: #b3b3b3;}
/* 약관동의 */
.terms-check li { position: relative; margin-bottom: 20px; border: solid 1px #74a4fd; box-sizing: border-box;}
.terms-check li a { display: block; padding: 30px 40px; width: 70%;}
.terms-check li a p { position: relative; box-sizing: border-box; font-size: 2.5rem; color: #333; line-height: 1.4em;}
.terms-check li a p span { padding-left: 7px; font-size: 1.7rem;}
.terms-check li .crb-bg { z-index: 10; position: absolute; right: 40px; top: 20px;}
.terms-check li .checkbox-radio { margin-right: 0;}
.terms-check li .terms-detail { display: none; padding: 30px 40px; background: #fafafa; font-size: 1.7rem; color: #555; line-height: 1.6em;}
/* 접수완료창 */
.complete-box { max-width: 900px; width: 100%; padding: 80px 200px; margin: 0 auto; border: solid 1px #b3b3b3; box-sizing: border-box;}
.complete-box h3 { padding-bottom: 50px; font-size: 2.7rem; color: #1a1a1a; line-height: 1.5em;}
.complete-box p { font-size: 1.8rem; color: #1a1a1a; line-height: 1.5em;}
/* 신청내역 */
.ask-box { max-width: 900px; width: 100%; padding: 40px 5%; margin: 0 auto; border-radius: 10px; border: solid 1px #666; box-sizing: border-box;}
.ask-box h3 { margin-bottom: 20px; font-weight: 700; font-family: "NEXON Lv2 Gothic Bold",sans-serif !important; font-size: 2.4rem; color: #1a1a1a; text-align: center;}
.ask-box dt { margin-bottom: 10px; font-size: 1.8rem; color: #1a1a1a; line-height: 1.5em;}
.ask-box dd { margin-bottom: 30px;}
/* ////////////////////////////////////////////////// notebook & tablet & mobile */
@media all and (max-width:1400px) {
    /* 신청상품확인 */
    .checking-box > div { flex: 1 1 100%; max-width: 100%;}
    .checking-box > div:nth-of-type(2) { margin-top: 15px;}
    /* 가입자정보 */
    .subs-info { width: 100%;}
}
/* ////////////////////////////////////////////////// tablet & mobile */
@media all and (max-width:990px) {
    /* 상품 카테고리 선택 */
    .category-select dt { display: block; width: 10%; line-height: 56px;}
    .category-select dd { display: block; width: 40%; padding-right: 5%;}
    /* 상품 상세보기 */
    .product-view { width: 100%;}
    .step2 .product-view,
    .step3 .product-view { order: 2; margin-top: 60px;}
    /* 영수증 영역 */
    .receipt-box { position: static; width: 100%; margin: 60px 0 0 0;}
    .step2 .receipt-box,
    .step3 .receipt-box { order: 1; margin-top: 0;}
    /* 접수완료창 */
    .complete-box { padding: 60px 10%;}
}
/* ////////////////////////////////////////////////// mobile */
@media all and (max-width:640px) {
    /* 상품 카테고리 선택 */
    .category-select dt { width: 20%; line-height: 42px;}
    .category-select dd { width: 80%;}
    /* 상품 STEP */
    .product-step h2 { font-size: 2rem;}
    .product-step .step-line { width: 160px; height: 6px; margin: 10px auto;}
    .product-step .step-line span { height: 6px;}
    /* 통신사 타이틀 */
    .tit-telecom img { height: 50px;}
    /* 상품 상세보기 */
    .product-view .view-box { padding: 20px 30px;}
    .product-view .view-box .view-prod01 { flex: 1 1 60%; max-width: 60%;}
    .product-view .view-box .view-prod02 { flex: 1 1 40%; max-width: 40%;}
    .product-view .view-box .view-prod03 { flex: 1 1 100%; max-width: 100%; margin-top: 15px;}
    .product-view .step-box li { flex: 1 1 45%; max-width: 45%; padding: 20px 10px;}
    .product-view .step-box li:nth-of-type(3),
    .product-view .step-box li:nth-of-type(4) { margin-top: 20px;}
    .product-view .step-box li img { height: 55px;}
    .product-view .tip-box li { padding: 20px 25px;}
    /* 약관동의 */
    .terms-check li { margin-bottom: 12px;}
    .terms-check li a { padding: 22px 30px;}
    .terms-check li a p { font-size: 2.1rem;}
    .terms-check li a p span { font-size: 1.4rem;}
    .terms-check li .crb-bg { right: 25px; top: 8px;}
    .terms-check li .terms-detail { padding: 22px 30px; font-size: 1.5rem;}
    /* 접수완료창 */
    .complete-box { padding: 40px 10%;}
}
/* ////////////////////////////////////////////////// mobile */
@media all and (max-width:420px) {
    /* 상품 상세보기 */
    .product-view h3.tit-prod { font-size: 2rem; line-height: 25px;}
    .product-view h3.tit-prod img { height: 25px; padding-right: 5px;}
    .product-view .view-box { padding: 15px 20px;}
    .product-view .view-box .view-prod01 p:nth-of-type(1) { font-size: 2.2rem;}
    .product-view .view-box .view-prod01 p:nth-of-type(2) { font-size: 1.3rem;}
    .product-view .view-box .view-prod02 img { height: 40px;}
    .product-view .view-box .view-prod02 p { font-size: 1.3rem;}
    /* .product-view .view-box .view-unite { flex: 1 1 100%; max-width: 100%;} */
    .product-view .view-box .view-unite h4 { font-size: 1.8rem;}
    /* .product-view .view-box .view-unite:nth-of-type(2) { padding-top: 15px;} */
    .product-view .view-box .view-unite p { padding: 10px 15px; font-size: 1.4rem;}
    .product-view h3.tit-etc { font-size: 2rem;}
    /* 영수증 영역 */
    .receipt-box { padding: 30px;}
    /* 신청상품확인 */
    .checking-box { padding: 20px 25px;}
    .checking-box h4,
    .checking-box p { font-size: 1.5rem;}
    /* 약관동의 */
    .terms-check li a { padding: 20px;}
    .terms-check li .crb-bg { right: 15px;}
}