/*---------------------------------------------------------------------------------------------------------------------- [ REGONE ] A. Default B. Layout C. Login D. Main E. Sub F. Self G. Components H. etc I. Media Query ----------------------------------------------------------------------------------------------------------------------*/ :root { --n-primary: #C40E18; /* REGONE main color */ --n-primary-hover: #a41018; --n-primary-dark: #4a0509; --n-primary-light: #ffc5c8; --n-lightGreen: rgba(36, 150, 181, 0.04); --n-lightPink: #FFF6FB; --n-lightPurple: #f3f4fb; --n-lightBlue: #f9fafc; --n-gray-100: #f8fafc; --n-gray-200: #f1f5f9; --n-gray-300: #e2e8f0; --n-gray-400: #cbd5e1; --n-gray-500: #94a3b8; --n-gray-600: #64748b; --n-gray-700: #475569; --n-gray-800: #334155; --n-gray-900: #1e293b; --n-filter-primary: invert(16%) sepia(60%) saturate(5269%) hue-rotate(347deg) brightness(85%) contrast(105%); --n-filter-gray4: invert(95%) sepia(1%) saturate(5323%) hue-rotate(183deg) brightness(88%) contrast(101%); --n-filter-gray5: invert(77%) sepia(10%) saturate(634%) hue-rotate(175deg) brightness(85%) contrast(80%); --n-filter-gray6: invert(45%) sepia(50%) saturate(218%) hue-rotate(176deg) brightness(87%) contrast(84%); --n-filter-gray7: invert(30%) sepia(12%) saturate(1001%) hue-rotate(176deg) brightness(98%) contrast(88%); --n-filter-gray8: invert(23%) sepia(22%) saturate(731%) hue-rotate(175deg) brightness(94%) contrast(91%); --n-primary-shadow: rgba(196, 14, 24, 0.3); } /*********************************************************************************************************************** A. Default ***********************************************************************************************************************/ html, body {height: 100%; } html {font-size: 62.5%;} body {font-family: "Pretendard", -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif; box-sizing: border-box; display: flex; flex-direction: column; justify-content: space-between;} a {text-decoration: none;} a:not([href]):hover {cursor: pointer;} button {border: none; border-radius: .5rem;} button:disabled, button:disabled:hover {background-color: var(--n-gray-300); color: var(--n-gray-500);} input[type="text"], input[type="password"], input[type="number"],input[type="date"], input[type="email"], textarea, select.form-select {width: 100%; height: 4.8rem; padding: 0 1rem; font-size: 1.4rem; color: var(--n-gray-700); border: 1px solid var(--n-gray-300); border-radius: 1rem;} input:focus, textarea:focus, select.form-select:focus, .form-control:focus {border-color: var(--n-gray-900); box-shadow: none; outline: 0;} input[type="text"]::placeholder, input[type="password"]::placeholder,input[type="number"]::placeholder, input[type="date"]::placeholder, input[type="email"]::placeholder, textarea::placeholder {color: var(--n-gray-400)} input[type="checkbox"] {position: relative; top: 0.15rem; width: 1.5rem; height: 1.5rem; border: 1px solid var(--n-gray-300); border-radius: .5rem;} input[type="radio"] {position: relative; top: 0.2rem; width: 1.5rem; height: 1.5rem; border: 1px solid var(--n-gray-300); border-radius: .5rem;} input:read-only, input:disabled, select:disabled, .form-control:disabled, .form-select:disabled {background-color: var(--n-gray-200); color: var(--n-gray-500); pointer-events: none;} input[type="radio"]:disabled + label, input[type="checkbox"]:disabled + label {color: var(--n-gray-500);} input[type="checkbox"]:read-only, input[type="radio"]:read-only {background-color: #fff; pointer-events: inherit;} input:checked:read-only {background-color: #0d6efd !important; pointer-events: inherit;} input:-webkit-autofill, input:-webkit-autofill:hover {transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out; -webkit-transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out; background-color: #fff !important; box-shadow: inset 0 0 0 1000px white; -webkit-box-shadow: 0 0 0 1000px white inset;} input:-webkit-autofill:focus, input:-webkit-autofill:active {transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out; -webkit-transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out; background-color: #fff !important; box-shadow: inset 0 0 0 1000px white, 0 0 0 0.25rem rgba(13, 110, 253, 0.25); -webkit-box-shadow: 0 0 0 1000px white inset, 0 0 0 0.25rem rgba(13, 110, 253, 0.25);} input:-internal-autofill-selected {background-color: #fff} input:-webkit-autofill:read-only {background-color: var(--n-gray-200) !important; box-shadow: inset 0 0 0 1000px var(--n-gray-200); -webkit-box-shadow: 0 0 0 1000px var(--n-gray-200) inset; pointer-events: none;} ul {list-style: none; padding: 0; margin: 0;} h1, h2, h3, h4, h5, p, span {margin: 0;} hr {border-color: var(--n-gray-500);} pre {font-family: "Pretendard"; white-space: pre-wrap; font-size:1em; margin-bottom: 0;} /*********************************************************************************************************************** B. Layout ***********************************************************************************************************************/ /* -- container */ .container {min-width: 320px; margin: 0 auto; padding: 0 2rem;} .container_filter {min-width: 320px; padding: 0 2rem; margin-bottom: 1.6rem; overflow: hidden;} /*------------------------------------------- -- header -------------------------------------------*/ .header {border-bottom: 1px solid var(--n-gray-300);} .header_wrap {background-color: #fff;} .header_top {padding-top: 1rem; background-color: #fff; display: none;} .header .header_content, .header_popup .header_content {height: 5.6rem;} .header .logo, .header .icons_item, .header_popup .logo, .header_popup .icons_item {display: inline-block;} .header .logo img {max-height: 20px;} .header_content .icons_item {padding: 0; margin: 0; margin-left: 2rem; background-color: transparent;} .header_content .icons_item_btn {height: 3rem; padding: 0 1.5rem; margin-left: 1rem; font-size: 1.2rem; vertical-align: middle;} .header_content .icons_item img {width: 2.4rem; height: auto;} .header_popup .head {font-size: 2rem; font-weight: 700; color: var(--n-gray-900);} .header_content .moblie_wrap {display: flex; height: 100%; align-items: center; justify-content: space-between;} .header_content .pc_wrap {display: none; align-items: center; justify-content: space-between;} /*------------------------------------------- -- sub header(셀프개통 단계) -------------------------------------------*/ .sub_header {display: flex; flex-direction: column-reverse; gap: 1rem; top: 5.6rem; padding-top: 1.6rem; padding-bottom: 1rem; margin-bottom: 4rem; text-align: center; background-color: #fff;} .body_wrap_agent .sub_header {top: 0;} .sub_header_step {display: flex; justify-content: center;} .sub_header_step li {position: relative; display: inline-block; font-weight: 500; color: var(--n-gray-900); line-height: 1.5; } .sub_header_step li + li {padding-left: 1.4rem; margin-left: 1.4rem;} .sub_header_step li + li::before {content: ''; position: absolute; top: 50%; left: -20%; transform: translateY(-50%); display: block; width: 1.4rem; height: 1.4rem; background: url(../svg/caret-right-bold.svg) no-repeat center/100%; filter: var(--n-filter-gray4);} .sub_header_step li img {width: 2rem; height: 2rem; filter: var(--n-filter-gray5);} .sub_header_step li img.on {filter: var(--n-filter-primary);} /*------------------------------------------- -- fullmenu (모바일 전체메뉴) -------------------------------------------*/ .full_menu_wrap {position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #fff; overflow: auto; z-index: 9999; display: none;} .full_menu_header {background-color: var(--n-gray-200);} .full_menu_header .icons {display: flex; justify-content: end; align-items: center; justify-content: end; height: 100%;} .full_menu_body {height: 100%; padding-top: 56px;} /* fullmenu - top */ .full_menu_sign {padding: 3.2rem 0 2.4rem 0; background-color: var(--n-gray-200);} .full_menu_sign .pc_wrap {display: none;} .full_menu_sign .title {font-size: 1.5rem; color: var(--n-gray-800); margin-bottom: 1rem;} .full_menu_sign .login {margin-bottom: 2rem;} .full_menu_sign .btn_login {position: relative; font-size: 1.8rem; font-weight: 700; color: var(--n-gray-900);} .full_menu_sign .btn_login::after {content: ""; background: url(../svg/caret-right-bold.svg) no-repeat center center/100%; position: absolute; top: 50%; transform: translateY(-50%); display: inline-block; width: 1.5rem; height: 1.5rem;} .full_menu_sign .logout {display: flex; align-items: center; margin-bottom: 2rem;} .full_menu_sign .logout span {font-weight: 500;} .full_menu_sign .logout a {margin-left: .8rem;} .menu_service_card {display: inline-block; width: 100%; padding: 2rem; margin-bottom: 1rem; background-color: var(--n-primary); border-radius: 5px;} .menu_service_card a {font-size: 1.8rem; font-weight: 700; color: #fff;} .menu_service_card a:hover {color: #fff;} .menu_service_card img {width: 2rem; filter: invert(100%) sepia(0%) saturate(7484%) hue-rotate(184deg) brightness(101%) contrast(107%);} .menu_service_card li + li {padding-top: 1rem;} .menu_service_card p, .menu_service_card .service_link {font-size: 1.4rem; color: #fff;} .menu_service_card .service_link::after {background: url(../svg/chevron-right.svg) no-repeat center/100%; content: ""; display: inline-block; width: .8rem; height: .8rem; margin-left: .4rem; filter: invert(100%) sepia(9%) saturate(0%) hue-rotate(331deg) brightness(105%) contrast(101%);} /* fullmenu - submenu(tab) */ .full_menu_body .submenu_list {flex-wrap: wrap; overflow: hidden;} .full_menu_body .sub_tab_list {border-bottom: 0;} .full_menu_body .sub_tab_list li {margin-right: 0;} .full_menu_body .sub_tab_list li + li {margin-left: 1.6rem;} .full_menu_body .sub_tab_link {display: inline-block; width: 100%; padding: 0; border-radius: 0; font-size: 1.2rem; background-color: transparent; color: var(--n-gray-500);} .full_menu_body .sub_tab_link:hover {color: var(--n-gray-500);} /* fullmenu - body */ .full_menu_content {padding: 2.4rem 0 4rem 0;} .full_menu_body .menu_list li {padding: 2rem 0 ;} .full_menu_body .menu_list li + li {border-top: 1px solid var(--n-gray-200);} .full_menu_body .menu_list li:last-child {border-bottom: 0;} .full_menu_body .menu_list li a {font-size: 1.6rem; font-weight: 700; color: var(--n-gray-900);} .full_menu_body .menu_list li .sub_list {margin-top: 1rem; list-style: none;} .full_menu_body .menu_list li .sub_list li {padding: .8rem 0; border-bottom: none;} .full_menu_body .menu_list li .sub_list li + li {border-top: 0;} .full_menu_body .menu_list li .sub_list li a {font-size: 1.6rem; font-weight: 400; color: var(--n-gray-700);} .full_menu_body .menu_list li a:hover, .full_menu_content .sub_list li a:hover {color: var(--n-primary);} .full_menu_body .menu_list li a:not([href]):hover, .full_menu_content .sub_list li a:not([href]):hover {color: Inherit} /*------------------------------------------- -- body -------------------------------------------*/ .body_wrap, .body_wrap_popup, .body_wrap_popup_t2 {height: auto; padding-top: calc(56px + 32px);} .body_wrap_popup_t2 {padding-bottom: 80px;} .body_wrap_agent {padding-top: 40px;} /*------------------------------------------- -- nav -------------------------------------------*/ .gnb_wrap {line-height: 9rem; display: none;} .gnb li {position: relative; font-size: 1.6rem; font-weight: 700; text-align: right;} .gnb li + li {margin-left: 3.2rem;} .gnb li a {display: inline; color: var(--n-gray-800);} .gnb li a:hover, .gnb li.on a {color: var(--n-primary);} .gnb li:first-child a:hover {border-bottom: 0;} /* snb */ .snb {position: absolute; top: 100%; left: 50%; transform: translateX(-50%); display: flex; align-items: center; justify-content: center; gap: 3.2rem; width: auto; padding: 2.4rem 0; visibility: hidden; opacity: 0; transition: all .3s;} .snb::before {content: ''; position: absolute; top: 0; left: -100vw; width: 200vw; height: 72px; border-top: 1px solid var(--n-gray-300); background-color: #fff; z-index: -1; transition: 0.5s; box-shadow: rgba(71,85, 105, 0.08) 0px 10px 20px;} .snb li{margin-left: 0; text-align: center; line-height: 1.5;} .snb li + li {margin-left: 0;} .snb li a{display: inline-block; font-size: 1.5rem; font-weight: 400; color: var(--n-gray-700); white-space: nowrap;} .gnb li.on .snb li a {color: var(--n-gray-700);} .snb li a:hover{color: var(--n-primary);} .gnb li a:not([href]):hover, .snb li a:not([href]):hover {color: Inherit} .gnb > li:hover > .snb {visibility: visible; opacity: 1;} /* submenu (top util) */ .submenu {height: 2.5rem; align-items: center; justify-content: right; text-align: right;} .submenu a {font-size: 1.5rem; font-weight: 300; color: var(--n-gray-800); text-decoration: none; line-height: 2.5rem;} .submenu a + a {margin-left: 2.4rem;} /* util (gnb right) */ .util_wrap .util_list {display: flex;} .util_wrap .util_list li {font-size: 1.4rem; font-weight: 400; text-align: right;} .util_wrap .util_list li + li {margin-left: 2.4rem;} .util_wrap .util_list li a {display: inline; color: var(--n-gray-900);} .util_wrap .util_list li .sign {font-weight: 700; color: var(--n-primary);} /*------------------------------------------- -- footer -------------------------------------------*/ footer {background-color: #F6F7FB; margin-top: 4rem;} .footer_top {position: relative; padding: 4rem 0 3.2rem 0; text-align: center;} footer .logo {height: 3.5rem;} footer .policy_list {gap: 1.6rem 2rem; justify-content: center; margin-top: 2.4rem; font-size: 1.2rem; font-weight: 700;} footer .policy_list li a {color: var(--n-gray-700);} footer .policy_list li a.indv {color: var(--n-primary);} .footer_bottom {padding: 3.2rem 0 6rem 0; border-top: 1px solid var(--n-gray-300);} footer .company_info {display: flex; flex-wrap: wrap; font-size: 1.2rem; color: var(--n-gray-500); gap: 1rem 1.6rem;} footer .company_info li:first-child {width: 100%;} footer .copyright {margin-top: 3.2rem; font-size: 1.2rem; font-weight: 500; color: var(--n-gray-500);} /*------------------------------------------- -- preview bottom -------------------------------------------*/ .preview_wrap {width: 100%; background: #fff; background-color: var(--n-primary-light);} .preview_header {padding: 2.4rem 0;} .preview_header .head {font-size: 1.6rem; font-weight: 700; color: var(--n-gray-900);} .preview_header .n_btn_icon {width: 1.8rem; height: 1.8rem;} .preview_header .n_btn_icon.open {background: url(../svg/caret-up-bold.svg) no-repeat center center; background-size: contain;} .preview_header .n_btn_icon.close {background: url(../svg/caret-down-bold.svg) no-repeat center center; background-size: contain;} .preview_body {padding-bottom: 4rem;} .preview_body .price_info {width: calc(100% - 1.5rem); padding: 2rem; margin: 0 auto; border-radius: 1rem; background-color: #fff;} .preview_body .price_info .badge_wrap {margin-bottom: 0;} .preview_body .price_info .title {font-size: 1.6rem; font-weight: 700; margin-top: .5rem; word-break: break-all;} .preview_body .price_info .title:nth-of-type(3) {margin-top: 1rem; font-size: 2rem;} .preview_body .price_info .ref {font-size: 1.2rem; font-weight: 400; color: var(--n-gray-500);} .preview_body .order_list {padding: 2rem; margin-top: 1rem; border-radius: 1rem; background-color: rgba(255, 255, 255, .65);} .preview_body .order_list .title {color: var(--n-gray-600);} .preview_body .order_list .text {font-weight: 500;} .preview_body .order_list li {border-bottom: 0;} .preview_body .order_list li + li {padding-top: 1rem;} /* preview bottom - product */ .product_bottom_preview {padding-top: 2rem; margin-bottom: -4rem;} .product_bottom_preview .preview_wrap {max-width: 1080px; width: 100%; background: #fff; border-radius: 2rem 2rem 0 0; box-shadow: 0px -2px 16px rgba(0,0,0,.2);} .product_bottom_preview .preview_header .content {display: flex; flex-direction: column;} .product_bottom_preview .preview_header .head {margin-bottom: 1rem; font-size: 1.4rem; font-weight: 700; color: var(--n-gray-900);} .product_bottom_preview .preview_header .head span {font-size: 1.8rem;} .product_bottom_preview .preview_header .n_btn_icon {width: 1.8rem; height: 1.8rem; transform: translateY(-50%);} .product_bottom_preview .preview_header .n_btn_icon.open {background: url(../svg/chevron-up-solid.svg) no-repeat center center; background-size: contain; filter: invert(29%) sepia(21%) saturate(0%) hue-rotate(213deg) brightness(102%) contrast(99%);} .product_bottom_preview .preview_header .n_btn_icon.close {background: url(../svg/chevron-down-solid.svg) no-repeat center center; background-size: contain; filter: invert(29%) sepia(21%) saturate(0%) hue-rotate(213deg) brightness(102%) contrast(99%);} .product_bottom_preview .preview_body {padding: 0 0 4rem 0;} .product_bottom_preview .preview_body .order_list {margin-top: 0; padding-top: 0; border-top: none; } .product_bottom_preview .preview_body .order_list + .order_list {margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid #e6e6e6;} .product_bottom_preview .preview_body .order_list li {display: flex;} .product_bottom_preview .preview_body .order_list li:first-child {font-weight: 700; color: var(--n-gray-900);} .product_bottom_preview .preview_body .order_list .title {font-weight: 400;} .product_bottom_preview .preview_body .order_list li + li {padding-top: 1rem;} /*------------------------------------------- -- board -------------------------------------------*/ .board {font-size: 1.4rem; color: var(--n-gray-800);} .board .board_content {padding: 2rem; padding-bottom: 0; line-height: 1.5; overflow-x: auto;} .board .board_content img, .board_content img {max-width: 100%; height: auto;} .modal-body .board .board_content {padding: 0;} .modal_board {} .modal_board .board_content {padding-bottom: 3rem;} .modal_board .title {padding-bottom: 0; font-size: 1.6rem; font-weight: 700; color: var(--n-gray-900);} .modal_board .content {margin-top: 1rem; font-size: 1.4rem; color: var(--n-gray-700); line-height: 1.65; word-break: keep-all;} /* .modal_board .content {margin-top: 1rem; font-size: 1.4rem; color: var(--n-gray-800); line-height: 1.65; word-break: keep-all;} */ /*------------------------------------------- -- popup (main layer popup) -------------------------------------------*/ .ui-dialog { z-index: 1040 !important ; filter: drop-shadow(0 3px 8px rgba(0,0,0,.15));} .ui-dialog-titlebar {background-color: #fff; padding: 1.6rem 2rem; border-radius: 2rem 2rem 0 0;} .ui-dialog-titlebar span {color: var(--n-gray-900); font-size: 1.5rem;} .ui-dialog-titlebar button {display: none;} .main_pop_layer .pop_content {padding: 0; overflow: auto; background-color: #fff;} .main_pop_layer .pop_content img {width: 100%; height: auto;} .main_pop_layer .pop_footer {display: flex; align-items: center; padding: 1.6rem 2rem; border-radius: 0 0 2rem 2rem; background-color: var(--n-gray-900);} .main_pop_layer .pop_footer label {color: #fff;} .main_pop_layer .pop_footer .n_btn_icon {background: url(../svg/x-lg.svg) no-repeat center center; width: 16px; height: 16px; background-size: contain; filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(340deg) brightness(103%) contrast(104%); font-size: 0;} /*------------------------------------------- -- flex -------------------------------------------*/ .flex_row {display: flex; flex-wrap: wrap; margin: 0 -.4rem; gap: .8rem 0;} .flex_row > * {padding: 0 .4rem;} .flex_between {display: flex; justify-content: space-between; align-items: center;} /*********************************************************************************************************************** C. Login ***********************************************************************************************************************/ .login_wrap {max-width: 480px; padding: 4rem 0;} .login_either_wrap {max-width: 960px;} .login_wrap h1 {margin-bottom: 5.6rem;} .login_wrap .form_wrap {padding-bottom: 0;} .login_wrap .login_form {padding: 2rem; border-radius: 1rem; border: 1px solid var(--n-gray-300);} /*********************************************************************************************************************** D. Main ***********************************************************************************************************************/ .main_content {padding-top: 5.6rem;} .main_title_area {position: relative;} .main_title_area .btn_link_ico {position: absolute; top: 50%; right: 0; transform: translateY(-50%);} .sec_title {margin-bottom: 2rem; font-size: 2.6rem; font-weight: 700; color: var(--n-gray-900);} .main_btn_wrap {width: 100%; margin-top: 1.6rem; text-align: center;} .main_btn_wrap .btn_link_ico {padding: .8rem 1.6rem; border-color: #e6e6e6;} /*------------------------------------------- -- main banner(carousel) -------------------------------------------*/ .main_banner {overflow: hidden;} .main_banner img {width: 100%; height: auto; position: relative; left: 50%; transform: translateX(-50%);} .main_banner .swiper-container {position: relative; height: 100%;} .main_banner .swiper-slide {overflow: hidden;} .main_banner .swiper-pagination {bottom: 44px; padding: 0 2rem; text-align: left;} .main_banner .swiper-pagination-bullet {width: 5px; height: 5px; margin: 0 2.5px; border: 1px solid #000; background-color: unset; opacity: .5;} .main_banner .swiper-pagination-bullet-active {background-color: #000; opacity: 1;} .main_banner .swiper-pagination-bullet.white {border-color: #fff;} .main_banner .swiper-pagination-bullet-active.white {background-color: #fff;} .carousel_tablet, .carousel_pc, .for_tablet, .for_pc {display: none;} /*------------------------------------------- -- main service area -------------------------------------------*/ .main_service_area {padding-bottom: 3rem; background-color: #F6F7FB;} .main_service_area .service_group { position: relative; display: flex; flex-wrap: wrap; gap: 2rem 0; padding: 2rem; margin-top: -1.6rem; border-radius: 1rem; background-color: rgba(255, 255, 255, .9); z-index: 1; box-shadow: 0px 8px 10px 0px rgba(55, 57, 92, 0.05); backdrop-filter: blur(2.5px); -webkit-backdrop-filter: blur(2.5px); } .main_service_area .service_group li {width: 33.33333%;} .main_service_area .service_link {display: flex; flex-direction: column; align-items: center; gap: .8rem; font-size: 1.2rem; font-weight: 500; color: var(--n-gray-800);} .main_service_area .service_link img {width: auto; height: 2.4rem;} /*------------------------------------------- -- main product list -------------------------------------------*/ .main_product_list {padding: 3rem 0; background-color: #F6F7FB; overflow: hidden;} /* rate card */ .rate_card_list {display: flex; align-items: stretch; gap: 1.6rem 0;} .rate_card_item {width: 100%;} .rate_card {display: flex; flex-wrap: wrap; width: 100%; height: 100%; padding: 2rem; border: 1px solid var(--n-gray-300); border-radius: 1rem; background-color: #fff; box-shadow: 0px 4px 20px 0px rgba(105, 117, 177, 0.08);} .rate_card_title {width: 100%; font-size: 2.2rem; font-weight: 700; color: var(--n-gray-900);} .rate_card_title p {text-overflow: ellipsis; overflow: hidden; word-break: break-all; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;} .rate_card_title .title_label {display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2rem; font-size: 1.6rem; text-overflow: unset; overflow: unset;} .rate_card_title .title_label span {display: inline-block; padding: 4px 8px; border-radius: .3rem; font-size: 1.1rem; font-weight: 500; -webkit-line-clamp: 1; line-height: normal;} .rate_card .rate_btn {width: 100%; padding: 1.6rem; margin-top: 1.6rem; font-size: 1.4rem; font-weight: 500; text-align: center; line-height: 1;} .rate_card .rate_btn:hover {background-color: var(--n-primary); color: #fff;} .rate_card_price {width: 100%; margin-top: 3.6rem; font-size: 1.6rem;} .rate_card_price .origin {font-size: 1.2rem; font-weight: 400; color: var(--n-gray-500);} .rate_card_price .discount {font-size: 2.6rem; font-weight: 700; color: var(--n-gray-900);} .rate_card_price .discount span {margin-left: .8rem; font-size: 1.4rem; font-weight: 400;} .rate_card_info {width: 100%; margin-top: .8rem;} .rate_card_info li {position: relative; display: flex; align-items: center; width: 100%; padding: 1.6rem 0; font-size: 1.4rem; color: var(--n-gray-700);} .rate_card_info li + li {border-top: 1px dashed var(--n-gray-300);} .rate_card_info li::before {content: ""; display: inline-block; width: 2rem; height: 2rem; margin-right: 1rem; filter: var(--n-filter-gray6);} .rate_card_info li.ico_data::before {background: url(../svg/network.svg)no-repeat center/100%;} .rate_card_info li.ico_voice::before {background: url(../svg/phone.svg)no-repeat center/100%;} .rate_card_info li.ico_mms::before {background: url(../svg/message.svg)no-repeat center/100%;} /* phone card */ .phone_card_list {display: flex; flex-wrap: wrap; align-items: stretch; gap: 1.6rem 0;} .phone_card_item {width: 100%;} .phone_card {display: flex; width: 100%; height: 100%; padding: 2rem; border-radius: 1rem; border: 1px solid #e0e0e0;} .phone_card_img {width: 10rem; min-width: 10rem;} .phone_card_img img {width: 100%; height: 100%; object-fit: cover;} .phone_card_info {padding-left: 1rem; font-size: 1.1rem; color: var(--n-gray-800);} .phone_card_title {display: flex; align-items: center; margin-bottom: 1rem; font-size: 1.4rem; font-weight: 500; color: var(--n-gray-900);} .phone_card_title p:not(.title_label) {text-overflow: ellipsis; overflow: hidden; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;} .phone_card_title .title_label {margin-right: .8rem; font-size: 1.6rem; -webkit-line-clamp: 1;} .phone_card_title .title_label span {display: inline-block; padding: 2px 6px; border-radius: 10rem; font-size: 1.1rem; font-weight: 500; -webkit-line-clamp: 1;} .phone_card_title .title_label span + span {margin-left: .4rem} .phone_card_price {display: flex; flex-direction: column; margin-top: 1.6rem; font-size: 1.4rem; font-weight: 700; color: var(--n-primary);} .phone_card_price .ref {font-size: 1rem; font-weight: 400; color: var(--n-gray-700);} /*------------------------------------------- -- main event area -------------------------------------------*/ .main_event_area {padding: 3rem 0; background-color: #F6F7FB; overflow: hidden;} .main_event_area .thumb_card_img.event {padding-top: 100%; border-radius: 1rem; border-bottom: 0;} /* .main_event_area .thumb_card_img.event {width: 100%; height: calc(100vw - 350px); min-height: 90px; max-height: 130px; border-radius: 0;} */ /* .main_event_area .thumb_card_img.event img {width: 100%; height: 100%; object-fit: cover;} */ .event_banner {position: relative; display: inline-block; width: 100%; height: 0; padding-top: calc(780 / 1000 * 100%); border-radius: 1rem; overflow: hidden;} .event_banner img {position: absolute; top: 50%; left: 50%; width: auto; height: 100%; transform: translate(-50%,-50%);} /*------------------------------------------- -- main review area -------------------------------------------*/ .main_review_area {padding: 6rem 0; background: linear-gradient(180deg, #516395 0%, #614385 100%); overflow: hidden;} .main_review_area .sec_title {color: #fff; margin-bottom: 4rem;} .review_card {display: block; width: 100%; border-radius: 1rem; border: 1px solid var(--n-gray-300); background-color: #fff;} .review_card_content {width: 100%; padding: 2.4rem;} .review_content_info {display: flex; flex-direction: column; align-items: center; gap: 2.4rem; margin-bottom: 3.2rem;} .review_content_info img {width: 2.4rem; height: 2.4rem; filter: var(--n-filter-gray4);} .review_content_info .grade {display: flex; align-items: center; gap: 0 .4rem;} .review_content_info .grade_icon {background: url(../svg/star-fill.svg) no-repeat center/100%; content: ""; display: inline-block; width: 1.8rem; height: 1.8rem; filter: var(--n-filter-gray4);} .review_content_info .grade_icon.active {filter: var(--n-filter-primary);} .review_content_text {width: 100%; margin-bottom: 1rem; text-align: center;} .review_content_text .title {width: 100%; margin-bottom: 1.6rem; font-size: 1.8rem; font-weight: 700; color: var(--n-gray-900); text-overflow: ellipsis; white-space: nowrap; overflow: hidden;} .review_content_text .desc {display: -webkit-box; width: 100%; height: 63px; margin-bottom: 3.2rem; font-size: 1.4rem; color: var(--n-gray-800); text-overflow: ellipsis; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3;} .review_content_text .info {font-size: 1.3rem; color: var(--n-gray-500);} .main_review_area .data_none {color: #fff;} /*------------------------------------------- -- main keyword area -------------------------------------------*/ .main_keyword_area {padding: 6rem 0 0 0;} .main_keyword_area .sec_title {text-align: center;} .keyword_box {width: 100%; padding: 2rem; border-radius: 1rem; background: #E2EEFA;} .keyword_list li {display: flex; align-items: center; gap: 1rem;} .keyword_list li + li {padding-top: 1.6rem; margin-top: 1.6rem; border-top: 1px dashed rgba(48, 136, 219, 0.3);} .keyword_list li .img_wrap {position: relative; width: 4.8rem; height: 4.8rem; border-radius: 100%; background-color: #fff;} .keyword_list li .img_wrap::before {content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: inline-block; width: 2.4rem; height: 2.4rem;} .keyword_list li:nth-child(1) .img_wrap::before {background: url(../svg/bx-support.svg) center/100% no-repeat; filter: invert(12%) sepia(87%) saturate(4488%) hue-rotate(349deg) brightness(97%) contrast(101%);} .keyword_list li:nth-child(2) .img_wrap::before {background: url(../svg/bxs-bar-chart-alt-2.svg) center/100% no-repeat; filter: invert(12%) sepia(54%) saturate(3824%) hue-rotate(226deg) brightness(102%) contrast(102%);} .keyword_list li:nth-child(3) .img_wrap::before {background: url(../svg/bxs-zap.svg) center/100% no-repeat; filter: invert(48%) sepia(33%) saturate(2492%) hue-rotate(1deg) brightness(92%) contrast(104%);} .keyword_list li .content {font-size: 1.6rem; font-weight: 500; color: var(--n-gray-700);} .keyword_list li .no {display: inline-block; width: 100%; font-size: 1.4rem; font-weight: 700;} .keyword_list li:nth-child(1) .no {color: #C40E18;} .keyword_list li:nth-child(2) .no {color: #172A88;} .keyword_list li:nth-child(3) .no {color: #ED6C00;} /*------------------------------------------- -- main cs area -------------------------------------------*/ .main_cs_area {padding: 2.4rem 0 4rem 0; margin-bottom: -4rem;} /* notice box */ .notice_box {width: 100%; padding: 2rem; margin-top: 1.6rem; border-radius: 1rem; border: 1px solid var(--n-gray-300);} .notice_content {display: flex; justify-content: space-between; align-items: center; font-size: 1.4rem; color: var(--n-gray-800);} .notice_title {display: flex; gap: 1.6rem; align-items: center; min-width: 0;} .notice_title span {flex-shrink: 0; font-weight: 600;} .notice_title .notice_link {color: var(--n-gray-800);} .notice_content .btn_link_ico {flex-shrink: 0; font-size: 0; width: 1.6rem; height: 1.6rem;} .notice_content .btn_link_ico::after {background: url(../svg/caret-right-bold.svg) no-repeat center/100%; width: 100%; height: 100%; margin-left: 0; filter: var(--n-filter-gray6);} /* call cs box */ .call_cs_box {width: 100%; display: inline-block; padding: 2rem; border-radius: 1rem; border: 1px solid var(--n-gray-300);} .call_cs_content {display: flex; flex-direction: column; width: 100%; gap: 2rem;} .call_cs_content .title {font-size: 2rem; font-weight: 700; color: var(--n-gray-900);} .call_cs_content .cs_desc {display: flex; flex-direction: column;} .call_cs_content .num_list {display: flex; flex-direction: column; gap: .5rem; font-size: 1.2rem; font-weight: 700; color: var(--n-gray-600);} .call_cs_content .num_list li {display: flex; align-items: center;} .call_cs_content .num_list span {margin-right: .8rem; font-size: 2.6rem; color: var(--n-primary);} .call_cs_content .desc_list {display: flex; flex-direction: column; margin-top: 1rem; font-size: 1.2rem; color: var(--n-gray-700);} .call_cs_content .desc_list li {position: relative;} /*------------------------------------------- -- main swiper area(plugin style) -------------------------------------------*/ .main_swiper_area {width: 100%;} .main_swiper_area .swiper-container {position: relative; width: 100%; margin: 0 auto; padding-bottom: 2rem; overflow: hidden;} .main_swiper_area .swiper-slide {position: relative; text-align: center; font-size: 20px;} .main_swiper_area .swiper-pagination {bottom: 0;} .main_swiper_area .swiper-pagination-bullet {width: .8rem; height: .8rem; border-radius: 10px; background-color: var(--n-main-light); opacity: 100%; margin: 0 1rem;} .main_swiper_area .swiper-pagination-bullet-active {width: 2.5rem; background-color: var(--n-primary);} .main_swiper_area .swiper-button-next, .main_swiper_area .swiper-button-prev {width: 2.4rem; height: 2.4rem; color: var(--n-gray-700);} .main_swiper_area .swiper-button-next:after, .main_swiper_area .swiper-button-prev:after {font-size: 2.4rem;} .main_swiper_area .swiper-button-prev, .main_swiper_area .swiper-rtl .swiper-button-next {left: 2rem;} .main_swiper_area .swiper-button-next, .main_swiper_area .swiper-rtl .swiper-button-prev {right: 2rem;} .main_swiper_area .swiper-pagination-bullet:only-child {display: inline-block !important; } .main_swiper_area .swiper-pagination-progressbar {bottom: 0; top: unset; left: 50%; transform: translateX(-50%); width: 30%; height: 3px; background-color: rgba(30, 41, 59, .1); border-radius: 10rem;} .main_swiper_area .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {background-color: var(--n-gray-900); border-radius: 10rem;} /* rate swiper */ .main_product_list .main_swiper_area {position: relative; padding: 0 2rem;} .main_product_list .swiper-container {overflow: visible;} .main_product_list .swiper-slide {width: 100%; height: auto; margin: 0; text-align: left;} /* event swiper */ .main_event_area .main_swiper_area {position: relative; padding: 0 2rem;} .main_event_area .swiper-container {overflow: visible;} .main_event_area .swiper-slide {width: 100%; margin-right: 10px;} .main_event_area .swiper-slide:last-child {margin-right: 0;} .main_event_area .main_swiper_area .swiper-button-next, .main_event_area .main_swiper_area .swiper-button-prev {display: none;} /* review swiper */ .main_review_area .main_swiper_area {width: calc(100% - 4rem); padding: 0 2rem; margin: 0 auto;} .main_review_area .main_swiper_area .swiper-container {padding-bottom: 4rem; overflow: visible;} .main_review_area .main_swiper_area .swiper-slide {width: 91%; opacity: .9; transition: all .5s; margin-right: 0;} .main_review_area .main_swiper_area .swiper-slide-active {opacity: 1; transform: scale(1.1); box-shadow: 0px 4px 10px 0px rgba(105, 117, 177, 0.08); z-index: 1;} .main_review_area .main_swiper_area .swiper-pagination-progressbar {background-color: rgba(255, 255, 255, .5);} .main_review_area .main_swiper_area .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {background-color: #fff;} /*********************************************************************************************************************** E. Sub ***********************************************************************************************************************/ /* -- common */ .page_title {padding: .5rem 0; margin-bottom: 3.2rem; font-weight: 700;} .data_none, .event_none {display: flex; justify-content: center; align-items: center; width: 100%; min-height: 20vh; text-align: center;} .alert_wrap {padding: 2.4rem 0 3.2rem 0; text-align: center;} .alert_wrap > * {font-size: 1.4rem; color: var(--n-gray-900); line-height: 1.75;} .alert_img { width: 100%; padding: 1rem 0; text-align: center;} .alert_img span {background: url(../svg/exclamation-circle-fill.svg) no-repeat center/100%; display: inline-block; width: 3.2rem; height: 3.2rem;} /* document */ .doc_wrap {position: relative; padding-bottom: 20px;} .doc_head {text-align: center; margin-bottom: 32px; padding-top: 40px;} .doc_head h2 {font-size: 16pt; margin-bottom: 0;} .doc_head_logo {position: absolute; top: 0; right: 0; height: 20px;} .doc_info {padding-top: 16px; line-height: 1.75;} .doc_content {font-size: 9.25pt; word-break: keep-all;} .doc_content + .doc_content {margin-top: 24px;} .doc_content .title {padding-bottom: 5px; font-size: 11pt; font-weight: 500; color: #000;} .doc_content .table_board.type2 {font-size: 9.25pt;} .doc_content .table_board.type2 th {width: 20%; min-width: 70px; font-size: 1.3rem;} .doc_content .table_board.type2 th, .doc_content .table_board.type2 td {padding: 6.5px;} .doc_content .flex_row {margin: 0 -12px;} .doc_content .flex_row > * {padding: 0 12px;} .doc_content .price_list {font-size: 9.25pt;} .doc_content .price_list + .price_list{border-left: 1px solid var(--n-gray-300);} .doc_content .price_list li + li {padding-top: 5px;} .doc_content .price_list li.depth {padding-top: 2px; font-size: 8.25pt;} .doc_content .doc_price_area.total {background-color: var(--n-lightBlue);} .doc_content .doc_price_area.total .price_list {font-size: 11pt;} .doc_notice {font-size: 7.5pt; padding-top: 5px; color: var(--n-gray-600);} .doc_notice .box {padding: 10px;} .doc_notice .box .title {padding-bottom: 5px; font-size: 7.5pt; font-weight: 600; color: var(--n-gray-600);} .doc_notice .list li {letter-spacing: -.25px;} .doc_notice .list li + li {margin-top: 5px;} .doc_seal {padding-top: 20px; line-height: 1.75; text-align: center; color: var(--n-gray-800);} .doc_seal p {font-size: 9.25pt; font-weight: 500;} .doc_seal .seal {position: relative; margin-top: 20px; font-size: 11.5pt; color: #000;} .doc_seal .seal img { -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -o-user-select: none; user-select: none; -webkit-user-drag: none; -khtml-user-drag: none; -moz-user-drag: none; -o-user-drag: none; user-drag: none; position: absolute; top: 50%; transform: translateY(-50%); width: 45px; height: auto; margin-left: 5px; } /*------------------------------------------- -- accordion style -------------------------------------------*/ .acc_wrap .acc_item {width: 100%; border-bottom: 1px solid var(--n-gray-300);} .acc_wrap .acc_header {font-size: 1.4rem; font-weight: 700; color: var(--n-gray-900);} .acc_wrap .acc_header .acc_header_link {position: relative; display: flex; flex-direction: column; width: 100%; padding: 2rem 2.6rem 2rem 0; background-color: transparent; text-align: left;} .acc_wrap .acc_header .acc_header_link::after {background: url(../svg/caret-down-bold.svg) no-repeat center/100%; content: ""; position: absolute; top: 50%; transform: translateY(-50%); right: 0; display: inline-block; width: 1.8rem; height: 1.8rem; filter: var(--n-filter-gray5);} .acc_wrap .acc_header.active .acc_header_link::after {background: url(../svg/caret-up-bold.svg) no-repeat center/100%; content: "";} .acc_wrap .acc_content {display: none; padding-bottom: 2rem; word-break: break-all;} .acc_wrap .acc_content_inner {} /* type2 */ .acc_wrap.type2 .acc_header {display: flex; justify-content: space-between; align-items: center; padding: 1rem 0; font-weight: 400;} .acc_wrap.type2 .acc_header .acc_header_link {flex-shrink: 1; position: relative; padding: 0; background-color: transparent; background: url(../svg/caret-down-bold.svg) no-repeat center/100%; width: 1.2rem; height: 1.2rem; filter: var(--n-filter-gray5);} .acc_wrap.type2 .acc_header.active .acc_header_link {background: url(../svg/caret-up-bold.svg) no-repeat center/100%;} .acc_wrap.type2 .acc_header .acc_header_link::after, .acc_wrap.type2 .acc_header.active .acc_header_link::after {display: none;} .acc_wrap.type2 .acc_content {padding: 0 1rem; padding-bottom: 2rem;} /*------------------------------------------- -- board list -------------------------------------------*/ /* default */ .list_title {display: flex; justify-content: space-between; width: 100%; margin-bottom: 1.6rem;} .list_title button {padding: .5rem 2rem; font-size: 1.4rem; border-radius: 10rem;} .board_list {margin-top: 1.6rem; border-top: 1px solid var(--n-gray-900);} .board_list li {padding: 2rem 1.6rem; border-bottom: 1px solid #e6e6e6;} .board_list li .title, .board_list li .title a {position: relative; margin: .5rem 0; font-size: 1.6rem; font-weight: 500; color: var(--n-gray-900);} .board_list li .title.ico {padding-right: 2rem;} .board_list li .title.ico::after {background: url(../svg/chevron-right.svg) no-repeat center/100%; content: ""; position: absolute; top: 50%; transform: translateY(-50%); right: 0; display: inline-block; width: 1.4rem; height: 1.4rem;} .board_list li .detail_list {display: flex; flex-wrap: wrap;} .board_list li .detail_list li {position: relative; padding: 0; border-bottom: 0; font-size: 1.3rem; color: var(--n-gray-600);} .board_list li .detail_list li + li {padding-left: 1rem; margin-left: 1rem;} .board_list li .detail_list li + li::before {content: ''; position: absolute; top: 50%; left: 0; transform: translateY(-50%); display: block; width: 1px; height: 50%; background-color: var(--n-gray-600);} .board_list li .detail_list li span {font-weight: 500;} .board_list li.tb {display: flex; flex-direction: column;} /*------------------------------------------- -- card list -------------------------------------------*/ .card_list_wrap {padding-top: 1.6rem;} .card_list_item {display: flex; flex-direction: column; margin-bottom: 1rem; font-size: 1.4rem; overflow: hidden;} .card_list_item.no_list {width: 100% !important; flex: 1 !important;} .no_list {padding: 5rem 1.6rem !important;} .card_link {padding: 2rem; border-radius: 1rem; font-size: 1.4rem; border: 1px solid var(--n-gray-300);} .card_link.type2 {background-color: transparent; border: 1px solid #e6e6e6;} /* .card_link {border: 1px solid #e6e6e6; background-color: transparent;} */ .card_link .title {font-size: 1.8rem; font-weight: 700;} .service_desc {display: flex; flex-direction: column; align-items: baseline;} .service_desc .badge {display: inline;} .addType.badge_pps {background-color: #e7718f; } /* 선불 */ .addType.badge_post {background-color: #936ee5; } /* 후불 */ .addType.badge_all {background-color: var(--n-gray-900);} /* 선후불 */ .service_desc .title_wrap { flex: 1; min-width: 0; width: 100%;} .service_desc .title {padding-right: 1rem; color: var(--n-gray-900);} .service_desc .price {margin-left: auto; font-size: 2rem; font-weight: 700; color: var(--n-primary); text-align: right;} .service_desc .price .ref {font-size: 1.3rem; font-weight: 400; color: var(--n-gray-500);} /*------------------------------------------- -- price list(요금 소계) -------------------------------------------*/ .price_list {font-size: 1.4rem; font-weight: 500; color: var(--n-gray-900);} .price_list li {display: flex; justify-content: space-between; align-items: center;} .price_list li + li {padding-top: 1.6rem;} .price_list li.depth {padding-top: .5rem; font-size: 1.3rem; font-weight: 400; color: var(--n-gray-600);} .price_list li.total {color: var(--n-primary);} .price_list li .title, .price_list li .text {font-weight: inherit; font-size: inherit; color: inherit; padding-bottom: 0;} /*------------------------------------------- -- thumb card -------------------------------------------*/ .thumb_card_link {display: inline-block; width: 100%; margin-bottom: 2rem; border: 1px solid var(--n-gray-300); border-radius: 1rem;} .thumb_card_img {width: 100%; height: 200px; margin-bottom: 1rem; border-radius: 1rem; overflow: hidden;} /* .thumb_card_img.event {max-width: 340px;} */ .thumb_card_img.event {position: relative; width: 100%; height: auto; padding-top: 92.5%; margin-bottom: 0; border-bottom: 1px solid var(--n-gray-300); border-radius: 1rem 1rem 0 0; overflow: hidden;} .thumb_card_img.event_end img {opacity: .45;} .thumb_card_img img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; object-fit: cover;} .thumb_card_desc {padding: 1.6rem; font-size: 1.3rem;} .thumb_card_desc .title {margin-bottom: .5rem; font-size: 1.6rem; font-weight: 500; color: var(--n-gray-900); text-overflow: ellipsis; overflow: hidden; word-break: break-all; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;} .thumb_card_desc .date {color: var(--n-gray-500);} /*------------------------------------------- -- tab -------------------------------------------*/ .tab_box {margin-bottom: 2.4rem; word-break: keep-all;} .tab_box_list {display: flex; flex-wrap: wrap; gap: 5px; width: 100%;} .tab_box_list li {flex: 1; display: inline-block;} .tab_box_link {position: relative; display: block; width: 100%; height: 100%; padding: 1rem .5rem; font-size: 1.3rem; border: 1px solid var(--n-gray-300); border-radius: 1rem; background-color: transparent; color: var(--n-gray-700); text-align: center;} .tab_box_link:hover {color: var(--n-gray-700);} .tab_box_link.on, .tab_box_link.active {background-color: var(--n-primary); color: #fff; border: 1px solid var(--n-primary);} .tab_box_list_t2 {display: flex; flex-wrap: wrap; gap: 5px 0; margin: 0 -2.5px;} .tab_box_list_t2 li {flex: 0 0 auto; display: inline-block; padding: 0 2.5px;} .tab_box_list_t3 {display: flex; width: 100%;} .tab_box_list_t3 li {display: inline-block; margin-right: 1rem;} .tab_box_list_t3 .tab_box_link {display: inline-block; padding: 1.2rem 1.6rem; border-radius: 1rem; border: 0; font-size: 1.6rem; background-color: transparent; color: var(--n-gray-700);} .tab_box_list_t3 .tab_box_link:hover {background-color: var(--n-gray-200);} .tab_box_list_t3 .tab_box_link.on {background-color: var(--n-primary); color: #fff;} .tab_box_oval {margin-bottom: 1.6rem;} .tab_box_oval .tab_list {position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; width: 100%; margin: 0 auto; text-align: center;} .tab_box_oval .tab_link {display:inline-block; height: 3.5rem; line-height: 3.5rem; padding: 0 1.2rem; font-size: 1.2rem; font-weight: 500; border-radius: 10rem; background-color: #FAFAFA; color: #BFBFBF; } .tab_box_oval .tab_link.on {background-color: var(--n-primary); color: #fff;} .sub_tab {padding-top: 2.4rem;} .sub_tab_list {display: flex; width: 100%;} .sub_tab_list li {margin-right: 1rem;} .sub_tab_link {display:inline-block; padding: .5rem 1.6rem; font-size: 1.4rem; color: var(--n-gray-500); border-radius: .5rem; border: 1px solid var(--n-gray-200); background-color: var(--n-gray-200);} .sub_tab_link:hover {color: var(--n-gray-500);} .sub_tab_link.on {border-color: var(--n-primary); font-weight: 500; background-color: transparent; color: var(--n-primary);} .tab_line_wrap {margin-bottom: 2.4rem; overflow: visible;} .tab_line_list {position: relative; display: flex; flex-wrap: wrap; width: 100%; padding-top: 1.75rem; margin: 0 auto; text-align: center; background: #fff; border-bottom: 1px solid #e6e6e6;} .tab_line_list li {flex: 1 1 auto;} .tab_line_link {display:inline-block; width: 100%; padding: 1rem .5rem; border-radius: 0; font-size: 1.4em; background-color: transparent; color: var(--n-gray-500);} .tab_line_link:hover {color: var(--n-gray-500);} .tab_line_link.on {border-bottom: 2px solid var(--n-primary); font-weight: 700; color: var(--n-primary);} .tab_line_list_t2 {position: relative; display: flex; flex-wrap: wrap; gap: .8rem 1.6rem; width: 100%; padding-bottom: 2rem; border-bottom: 1px solid #efefef;} .tab_line_list_t2 .tab_line_link {display: inline; padding: 0; font-size: 1.5rem; color: var(--n-gray-700);} .tab_line_list_t2 .tab_line_link:hover {color: var(--n-gray-700);} .tab_line_list_t2 .tab_line_link.on {border-bottom: 1px solid var(--n-gray-900); font-weight: 700; color: var(--n-gray-900);} .tab_content {width: 100%; margin-top: 4rem;} .tab_content img {width: 100%;} .tab_content .review_list {border-top: none} .tab_login {margin-bottom: 2.4rem;} .tab_login_list {position: relative; display: flex; flex-wrap: wrap; width: 100%; margin: 0 auto; border-radius: 1rem; background-color: var(--n-gray-200); text-align: center;} .tab_login_list li {flex: 1 1 auto;} .tab_login_link {display:inline-block; width: 100%; padding: 1.2rem 1rem; border-radius: 1rem; font-size: 1.4rem; background-color: transparent; color: var(--n-gray-500);} .tab_login_link:hover {color: var(--n-gray-500);} .tab_login_link.on {border: 1px solid var(--n-primary); font-weight: 500; color: var(--n-primary); background-color: #fff;} /*------------------------------------------- -- search -------------------------------------------*/ .search_wrap {padding: 1rem 0;} /*------------------------------------------- -- product layout(휴대폰) -------------------------------------------*/ /* phone list */ .card_list.phone_list {display: flex; flex-wrap: wrap;} .card_list.phone_list .card_list_item {flex: 0 0 auto; width: 100%; border-radius: 1rem;} .card_list.phone_list .card_rate_link {display: flex;} .card_list.phone_list .img_wrap {width: 45%; min-width: 45%; max-height: 16rem;} .card_list.phone_list .img_wrap img {width: 100%; height: 100%; object-fit: contain;} .card_list.phone_list .content_group {justify-content: center; flex-direction: column; margin-left: 1rem;} .card_list.phone_list .badge {font-size: 1.1rem;} .card_list.phone_list .title {margin-bottom: 1rem; font-size: 1.6rem; font-weight: 700; color: var(--n-gray-900); text-overflow: ellipsis; overflow: hidden; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;} .card_list.phone_list .title::after {content: ""; width: 0; height: 0;} .card_list.phone_list .detail {width: 100%; font-size: 1.3rem; color: var(--n-gray-600);} .card_list.phone_list .price {margin-top: 0.8rem; font-size: 2.2rem; font-weight: 700; color: var(--n-primary);} .card_list.phone_list .price .ref {font-size: 1.3rem; font-weight: 400; color: #BF2673;} /* product banner */ .product_banner_area {width: auto; overflow: hidden; padding-bottom: 3rem;} .product_banner_area .swiper-container {position: relative; width: 100%; margin: 0 auto;} .product_banner_area .swiper-pagination {bottom: 2rem;} .product_banner_area .swiper-pagination-bullet {width: .6rem; height: .6rem; background-color: #000; opacity: 20%; margin: 0 .8rem;} .product_banner_area .swiper-pagination-bullet-active {background-color: var(--n-gray-800); opacity: 100%;} .product_banner_area .thumb_card_img {height: calc(100vw - 30vw); max-height: 360px; margin-bottom: 0; border-radius: 1rem; background-color: #eaeaea;} .product_banner_area .thumb_card_img img {object-fit: cover; width: 100%; height: 100%;} /* product select */ .product_select {display: flex; justify-content: space-between; align-items: end; padding-top: 3rem;} .product_select p {display: block; font-size: 1.4rem; font-weight: 300; color: var(--n-gray-700);} .product_select select {position: relative; width: 10rem; height: 35px; padding: 0 2.27rem 0 1.2rem; color: var(--n-gray-800); background-position: right 8% center;} /* product search */ .product_search_acc .acc_item {width: 100%; height: 100%; padding: 2rem; border: 1px solid var(--n-primary); border-radius: 1rem; background-color: transparent;} .product_search_acc .acc_header .acc_header_link {position: relative; font-size: 1.6rem; font-weight: 700; color: var(--n-primary);} .product_search_acc .acc_header .acc_header_link::after {background: url(../svg/chevron-down.svg) no-repeat center/100%; content: ""; position: absolute; top: 50%; transform: translateY(-50%); right: 0; display: inline-block; width: 1.6rem; height: 1.6rem; filter: var(--n-filter-primary);} .product_search_acc .acc_header.active .acc_header_link::after {background: url(../svg/chevron-up.svg) no-repeat center/100%; content: ""; position: absolute; top: 50%; transform: translateY(-50%); right: 0; display: inline-block; width: 1.6rem; height: 1.6rem; filter: var(--n-filter-primary);} .product_search_acc .acc_content {padding-top: 0; margin-top: 3.2rem;} .items_search {padding: 0 1rem;} .items_search .items {display: flex; flex-direction: column; align-items: start; gap: .5rem; padding-bottom: 1.5rem; margin-bottom: 1.5rem; border-bottom: 1px solid #e6e6e6;} .items_search .items .title {font-size: 1.4rem; font-weight: 500; color: var(--n-gray-800);} .items_search .items .input_group {margin-right: 1rem;} .items_search .select_btn, .items_search .btn-check + .select_btn:hover {border: 1px solid #efefef; border-radius: 100px; background-color: #efefef; color: var(--n-gray-700);} .items_search .btn-check:checked + .select_btn:hover {border: 1px solid var(--n-primary); background-color: #fff; color: var(--n-primary);} .items_search .btn_wrap {padding-top: 1rem; margin-top: 0; text-align: center;} /* product detail view */ .product_title {font-weight: 700;} .product_title_desc { margin-top: .5rem; font-size: 1.2rem; font-weight: 400; color: var(--n-gray-700);} .product_info_wrap {margin-bottom: 3rem;} .product_tab {margin: 0 -2rem;} /* photo - swiper */ .product_photo_thumbs {display: none; margin-top: 2rem;} .product_photo_thumbs .swiper-wrapper {justify-content: center;} .product_photo_thumbs .box_outline {width: 9rem; height: 9rem; padding: .5rem; cursor: pointer;} .product_photo_thumbs .box_outline img {width: 100%; height: 100%; object-fit: contain;} .product_photo_thumbs .box_outline.active {border: 1px solid var(--n-primary);} .product_photo {padding-bottom: 2rem;} .product_photo .swiper-horizontal>.swiper-pagination-bullets, .product_photo .swiper-pagination-bullets.swiper-pagination-horizontal, .product_photo .swiper-pagination-custom, .swiper-pagination-fraction {bottom: 0;} .product_photo .swiper-slide {text-align: center; height: 25rem;} .product_photo .swiper-slide img {width: 80%; height: 100%; object-fit: contain;} .product_photo .swiper-pagination-bullet {width: .8rem; height: .8rem; background-color: #000; opacity: 20%; margin: 0 .8rem;} .product_photo .swiper-pagination-bullet-active {background-color: var(--n-gray-800); opacity: 100%;} .product_photo .swiper-button-next, .product_photo .swiper-button-prev {width: 2.4rem; height: 2.4rem; color: var(--n-gray-700);} .product_photo .swiper-button-next:after, .product_photo .swiper-button-prev:after {font-size: 2.4rem;} .product_photo .swiper-button-prev, .product_photo .swiper-rtl .swiper-button-next {left: 2rem;} .product_photo .swiper-button-next, .product_photo .swiper-rtl .swiper-button-prev {right: 2rem;} .product_photo_thumbs .swiper-wrapper .swiper-slide:last-child {margin-right: 0 !important;} .product_color_select {display: flex; gap: 0 .5rem;} .product_color_select li {position: relative; width: 3.6rem; height: 3.6rem; border-radius: 50%;} .product_color_select input[type="radio"] + label {display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 2.4rem; height: 2.4rem; border-radius: 50%; border: 1px solid #efefef; cursor: pointer;} .product_color_select input[type="radio"]:checked + label::before {content: ""; display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 3.6rem; height: 3.6rem; border: 1px solid #000; border-radius: 50%; } .product_color_select input[type="radio"] + label span {display: none;} .product_rate_select {margin-bottom: 4rem;} .rate_select_box {padding: 2rem 2.4rem; border-radius: .5rem; border: 1px solid var(--n-primary);} .rate_select_box .title {padding: 0; font-size: 1.6rem; font-weight: 700; color: var(--n-gray-900); text-overflow: ellipsis; overflow: hidden; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;} .rate_select_box .content_group {display: flex; flex-direction: column;} .rate_select_box .desc {flex: 1 1 auto; width: 100%; font-size: 1.2rem; color: var(--n-gray-600);} .rate_select_box .desc li {display: inline-block; padding-right: 2rem;} .rate_select_box .desc li:not(:last-child)::after {content: '|'; position: absolute; display: inline-block; margin: 0 0.8rem; color: var(--n-gray-300);} .rate_select_box .price {flex: none; font-size: 1.8rem; font-weight: 700; text-align: right; color: var(--n-primary);} .rate_select_box .price .ref {display: block; font-size: 1.3rem; font-weight: 400; color: #BF2673;} /*------------------------------------------- -- rate layout(요금제) -------------------------------------------*/ .rate_list_wrap {padding-top: 1.6rem;} .product_select + .rate_list_wrap {padding-top: 1rem;} .card_list .badge_wrap {display: flex; flex-wrap: wrap; gap: 1rem;} /* rate list */ .card_list.rate_list {display: flex; flex-wrap: wrap; margin: 0 -12px 0 -12px;} .card_list.rate_list .card_list_item {width: 100%; padding: 0 12px 0 12px;} .card_list.rate_list .card_rate_link {padding: 2rem; border-radius: 1rem; border: 1px solid var(--n-gray-300);} .card_list.rate_list .title {position: relative; font-size: 1.8rem; font-weight: 600; color: var(--n-gray-900);} .card_list.rate_list .content_group {flex-direction: column-reverse; gap: 2rem; margin-top: 2rem;} .card_list.rate_list .detail {width: 100%; font-size: 1.4rem; color: var(--n-gray-700);} .card_list.rate_list .desc li {position: relative; display: inline-block; padding-left: 2rem; margin-right: 1rem;} .card_list.rate_list .desc li:first-child {width: 100%;} .card_list.rate_list .desc li::before {content: ""; position: absolute; top: 50%; left: 0; transform: translateY(-50%); display: inline-block; width: 1.5rem; height: 1.5rem; margin-right: .5rem; filter: var(--n-filter-gray5);} .card_list.rate_list .desc li.ico_data::before {background: url(../svg/network.svg)no-repeat center/100%;} .card_list.rate_list .desc li.ico_voice::before {background: url(../svg/phone.svg)no-repeat center/100%;} .card_list.rate_list .desc li.ico_mms::before {background: url(../svg/message.svg)no-repeat center/100%;} .card_list.rate_list .detail .ref {padding-top: 1rem; font-size: 1.2rem; font-weight: 400; color: var(--n-gray-500);} .card_list.rate_list .price {font-size: 2.2rem; font-weight: 700; color: var(--n-primary);} .card_list.rate_list .price .ref {font-size: 1.2rem; font-weight: 400; color: var(--n-gray-500);} /* rate detail view */ .rate_info_wrap {margin-bottom: 2rem;} .rate_info .header_sub {display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem;} .rate_info .header_sub .badge {padding: 4px 8px; font-size: 1.1rem; font-weight: 500; border-radius: .3rem;} /* .rate_info .header_sub .badge + .badge {margin-left: .5rem;} */ .rate_info .telco {line-height: 1; padding: 4px 8px; border: 1px solid var(--n-gray-600); border-radius: .3rem; font-size: 1.1rem; color: var(--n-gray-600);} .rate_info .header {margin-bottom: 1.6rem; border-bottom: 0; font-size: 2.2rem;} .rate_info .content {display: flex; flex-direction: column; padding: 2rem; border-radius: 1rem; border: 1px solid var(--n-gray-300);} .rate_info .content .detail {padding-bottom: 2rem; margin-bottom: 2rem; border-bottom: 1px solid #dfe4f2; font-size: 1.4rem; color: var(--n-gray-700);} .rate_info .detail .desc {margin-bottom: 1rem; text-align: center;} .rate_info .detail .desc li {position: relative; display: inline-block;} .rate_info .detail .desc li:first-child {width: 100%; margin-bottom: 1rem; font-size: 1.8rem; font-weight: 500;} .rate_info .detail .desc li:last-child {padding-left: 1rem; margin-left: 1rem;} .rate_info .detail .desc li:last-child::before {content: ''; position: absolute; top: 50%; left: 0; transform: translateY(-50%); display: block; width: 1px; height: 10px; background-color: var(--n-gray-300);} .rate_info .detail .desc .icon {width: 1.8rem; height: 1.8rem; margin-right: .5rem; transform: translateY(-1px); filter: var(--n-filter-gray5);} .rate_info .detail .ref {font-size: 1.2rem; font-weight: 400; color: var(--n-gray-500); text-align: center;} .rate_info .price {position: relative; display: flex; flex-direction: column; align-items: center; flex-shrink: 0;} .rate_info .price p {font-size: 2.6rem; font-weight: 700; color: var(--n-primary);} .rate_info .price .vat {font-size: 1.2rem; font-weight: 400; color: var(--n-gray-600);} .rate_info .price .ref {font-size: 1.4rem; font-weight: 400; color: var(--n-gray-500);} .rate_info .price .ref_stop {padding: 2rem 0 1rem 0; font-size: 1.8rem; font-weight: 500; text-align: center; color: var(--n-gray-900);} .rate_info .price button {font-size: 1.6rem; margin-top: 1rem;} .rate_caption {margin-top: 1.6rem; padding: 2rem; border-radius: 1rem; background-color: var(--n-gray-200);} .rate_caption_list {padding-left: 1rem; font-size: 1.2rem; color: var(--n-gray-600);} .rate_caption_list li {list-style: "\00B7 "; padding-left: .5rem;} .rate_caption_list li:not(:last-child) {margin-bottom: .5rem;} .rate_detail {margin-top: 4rem;} .rate_detail.type2 {padding: 2rem; margin-top: 0; border-radius: 1rem; background-color: var(--n-gray-100);} .rate_detail_depth {margin-bottom: 3.2rem;} .rate_detail_depth .title {margin-bottom: 1rem; font-size: 1.8rem; font-weight: 700; color: var(--n-gray-900); } .rate_detail_depth .desc_list {padding-left: 2rem; font-size: 1.3rem; color: var(--n-gray-700);} .rate_detail_depth .desc {font-size: 1.4rem; color: var(--n-gray-700); line-height: 1.8; overflow-x: auto;} .rate_detail_depth p.desc_list>* {font-size: 1.3rem !important;} .rate_detail_depth img {width: 100%; height: auto;} .rate_detail_depth .desc_list li {list-style: "\00B7 "; padding-left: .5rem; margin-bottom: 0.5rem;} .rate_detail_depth .desc_list_depth {padding: .5rem 0 0 1rem; font-size: 1.2rem;} .rate_detail_depth .desc_list_depth li {list-style: "- ";} /* .modal_board .rate_detail .content {padding: 0; border: 0;} */ /*------------------------------------------- -- event(이벤트) -------------------------------------------*/ /* 이벤트 종료 뱃지 */ .event_end .event_badge {position: absolute; top: 2rem; right: 2rem; z-index: 1;} .event_end .event_badge .badge {padding: .8rem 2rem; border-radius: 2rem; font-size: 1.4rem; background-color: var(--n-gray-800);} .event_board {border-bottom: 1px solid #e6e6e6; font-size: 1.5rem; color: var(--n-gray-800);} .event_board .board_head {padding: 1rem 0; border-bottom: 1px solid #e6e6e6;} .event_board .board_head .title {font-size: 1.8rem; font-weight: 500; color: var(--n-gray-900);} .event_board .board_content {padding: 2.4rem 0; overflow-x: auto;} .event_board .board_content img {max-width: 100%;} /* event table */ /* .table_list {width: 100%; border-top: 1px solid var(--n-primary); border-bottom: 1px solid var(--n-primary); font-size: 1.4rem;} .table_list th, .table_list tr {border-bottom: 1px solid #e6e6e6;} .table_list th {padding: 1.6rem 0; font-size: 1.6rem; font-weight: 500; color: var(--n-gray-900); text-align: center;} .table_list td {padding: 1.6rem 0; font-size: 1.6rem; color: var(--n-gray-600); text-align: center;} .table_list td .link {color: var(--n-gray-800);} .table_list td .link:hover {color: var(--n-gray-800);} .table_list tr:last-child {border-bottom: none;} .table_board td { padding: 2rem 0; padding-left: 1rem;} */ /*------------------------------------------- -- review(리뷰) -------------------------------------------*/ /* review list */ .review_list {border-top: 1px solid var(--n-gray-600);} .review_list_item {display: flex; flex-direction: column; padding: 2rem 0; border-bottom: 1px solid var(--n-gray-300); font-size: 1.4rem;} .review_list_header {display: flex; align-items: flex-start; flex-direction: column-reverse; width: 100%; gap: 1.6rem; margin-bottom: .5rem;} .review_list_header .title {width: 100%; font-size: 1.6rem; font-weight: 700; color: var(--n-gray-900); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} .review_list_header .review_info {display: flex; flex-direction: row-reverse; justify-content: flex-end; align-items: center; flex-shrink: 0; gap: 1rem; width: 100%; font-size: 1.4rem; color: var(--n-gray-500);} .review_list_header .grade {display: flex; align-items: center; gap: 0 .4rem;} .review_list_header .grade_icon {background: url(../svg/star-fill.svg) no-repeat center/100%; content: ""; display: inline-block; width: 1.2rem; height: 1.2rem; filter: var(--n-filter-gray4);} .review_list_header .grade_icon.active {filter: var(--n-filter-primary);} .review_list_content .desc {margin-bottom: 1rem; font-size: 1.4rem; color: var(--n-gray-700); line-height: 1.15;} .review_list_content .img_wrap {position: relative; width: 20rem; height: 15rem; border-radius: 1rem; background-color: var(--n-gray-100); text-align: center; overflow: hidden;} .review_list_content .img_wrap img {position:absolute; top:50%; left: 0; transform:translateY(-50%); width: 100%; height: auto;} /* review write */ .grade_btn_wrap {display: flex; align-items: center; gap: 0 .4rem;} .grade_btn_wrap .grade_btn {background: url(../svg/star-fill.svg) no-repeat center/100%; content: ""; display: inline-block; width: 2.4rem; height: 2.4rem; filter: var(--n-filter-gray4);} .grade_btn_wrap .grade_btn.active {filter: var(--n-filter-primary);} .review_photo_wrap {position: relative; width: calc(100vw * .35); height: calc(100vw * .35); max-width: 250px; max-height: 250px; border-radius: .5rem; border: 1px solid #e6e6e6; overflow: hidden;} .review_photo_wrap label {width: 100%; height: 100%; background: url(../svg/plus-lg.svg) no-repeat center/30%; filter: var(--n-filter-gray4);} .review_photo_wrap img {position:absolute; top:50%; transform:translateY(-50%); width: 100%; height: auto;} .btn_photo_remove {position: absolute; top: 1rem; right: 1rem; width: 2.5rem; height: 2.5rem; border-radius: 10rem; background-color: #000; opacity: 50%;} .btn_photo_remove:hover {opacity: 70%;} .btn_photo_remove::before {background: url(../svg/x-lg.svg) no-repeat center/100%; content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: inline-block; width: 12px; height: 12px; filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(188deg) brightness(100%) contrast(100%);} /*------------------------------------------- -- qna(자주묻는질문) -------------------------------------------*/ /* qna tab */ .qna_tab_wrap {padding-top: 2.4rem;} .qna_tab {display: flex; flex-wrap: wrap; gap: .5rem 1rem;} .qna_tab_link {padding: .5rem 1.6rem; font-size: 1.4rem; border: 1px solid var(--n-gray-200); border-radius: .5rem; color: var(--n-gray-500); background-color: var(--n-gray-200);} .qna_tab_link.on {font-weight: 500; border: 1px solid var(--n-primary); color: var(--n-primary); background-color: transparent;} /* qna accordion */ .qna_acc_wrap {margin-top: 1.6rem; border-top: 1px solid var(--n-gray-600);} .qna_acc_wrap .acc_item {width: 100%; border-bottom: 1px solid var(--n-gray-300);} .qna_acc_wrap .acc_header {font-size: 1.4rem; font-weight: 500; text-align: left; color: var(--n-gray-600);} .qna_acc_wrap .acc_header_link {position: relative; display: flex; align-items: center; width: 100%; padding: 2rem 2.6rem 2rem 0; background-color: transparent; font-weight: 500; text-align: left;} /* .qna_acc_wrap .acc_header.active .acc_header_link {color: var(--n-primary); font-weight: 700;} */ .qna_acc_wrap .acc_header .acc_header_link::after {background: url(../svg/caret-down-bold.svg) no-repeat center/100%; content: ""; position: absolute; top: 50%; transform: translateY(-50%); right: 0; display: inline-block; width: 1.8rem; height: 1.8rem; filter: var(--n-filter-gray5);} .qna_acc_wrap .acc_header.active .acc_header_link::after {background: url(../svg/caret-up-bold.svg) no-repeat center/100%; content: "";} .qna_acc_wrap .acc_content {display: none; padding: 0 1.6rem 2rem 1.6rem; word-break: break-all;} .qna_acc_wrap .acc_content_inner {display: flex; font-size: 1.4rem; color: var(--n-gray-700);} .qna_acc_wrap .q_mark {flex-shrink: 0; display: inline-block; margin-right: 1rem; color: var(--n-gray-900); text-align: center; font-weight: 700;} /* .qna_acc_wrap .q_mark {flex-basis: 2.4rem; flex-shrink: 0; display: inline-block; width: 2.4rem; height: 2.4rem; line-height: 2.4rem; margin-right: 1rem; border-radius: 100px; border: 1px solid var(--n-primary); color: var(--n-primary); text-align: center;} */ .qna_acc_wrap .acc_content .q_mark {background-color: var(--n-gray-700); } /* 부가서비스 항목*/ .qna_acc_wrap .addType {flex-shrink: 0; display: inline-block; width:4.5rem; height: auto; line-height: 2; margin-right: .5rem; border-radius: 100px; background-color: var(--n-primary); color: #fff; text-align: center; font-size: 1.2rem;} .qna_acc_wrap .pt_1 {background-color: #e7718f; } /* 유료*/ .qna_acc_wrap .pt_2 {background-color: #565455; } /* 무료 */ .qna_acc_wrap .st_pps {background-color: #7ab3bd; } /* 선불 */ .qna_acc_wrap .st_post {background-color: #6ea2e5; } /* 후불 */ .qna_acc_wrap .st_all {background-color: #936ee5; } /* 선/후불 */ /*------------------------------------------- -- notice(공지사항) -------------------------------------------*/ .notice_wrap {padding-top: 3.6rem;} /* notice list */ .notice_list {border-top: 1px solid var(--n-gray-600);} .notice_list_item {position: relative; display: flex; flex-direction: column; padding: 2rem 0; border-bottom: 1px solid var(--n-gray-300); font-size: 1.6rem;} .notice_list_item .title {margin-bottom: .5rem; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} .notice_list_item .date, .notice_list_item .event_date {font-size: 1.4rem; color: var(--n-gray-500);} .notice_list_link {color: var(--n-gray-900);} .notice_list_link:hover {color: var(--n-gray-900);} .notice_list_item .no {display: none;} .notice_list_item .event_date {display: flex; flex-direction: column;} /* notice detail view */ .notice_board {border-bottom: 1px solid #e6e6e6; font-size: 1.5rem; color: var(--n-gray-800);} .notice_board .board_head {padding: 1rem 0; border-bottom: 1px solid #e6e6e6;} .notice_board .board_head .title {font-size: 1.8rem;} .board_head .title {margin-bottom: .5rem; font-weight: 500; color: var(--n-gray-900);} .board_head .date {font-size: 1.3rem; color: var(--n-gray-500);} .notice_board .board_content { padding: 2.4rem 1rem 4rem 1rem; overflow-x: auto; word-break: break-all;} .notice_board .board_content img {max-width: 100%;} .board_page {border-top: 1px solid var(--n-gray-900); font-size: 1.4rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} .board_page .page_item {display: flex; align-items: center; padding: 1rem 1.6rem; border-top: 1px solid #e6e6e6;} .board_page .page_item:first-child {border-top: 0;} .board_page .page_link {padding-left: 1rem; font-weight: 500; color: var(--n-gray-900);} .board_page .page_link:hover {color: var(--n-gray-900); background-color: transparent;} /* 접수내역리스트 */ .notice_list_item.order_item {display: block; padding: 1.6rem 1rem; padding-right: 0;} .notice_list_item.order_item::after {display: none;} .notice_list_item.order_item .inner_flex {display: flex; flex-direction: column; justify-content: space-between;} .notice_list_item.order_item .title {position: relative; margin-bottom: 1rem; font-weight: 500;} .notice_list_item.order_item .title_status {font-size: 1.3rem; font-weight: 700; color: var(--n-gray-600);} .notice_list_item.order_item .text {display: flex; flex-wrap: wrap; flex-direction: column; font-size: 1.2rem; color: var(--n-gray-600);} .notice_list_item.order_item .btn_group {display: flex; flex-direction: row; justify-content: center; gap: 1rem; min-width: 9rem; padding: 0; padding-top: 1rem; margin-top: 1rem; border-top: 1px dashed #efefef;} .notice_list_item.order_item .btn_group > * {width: 100%; max-width: none; padding-left: .5rem; padding-right: .5rem;} /* .notice_list_item.order_item .btn_group > * + * {margin-left: 1rem;} */ .notice_list_item.order_item .btn_group > .n_btn_xs {height: 3rem; line-height: 3rem; font-size: 1.2rem;} /*------------------------------------------- -- store list(매장안내) -------------------------------------------*/ .store_list {border-top: 1px solid var(--n-primary);} .store_list_item {display: flex; flex-direction: column; padding: 2rem 1.6rem; border-bottom: 1px solid #e6e6e6; font-size: 1.4rem;} .store_list_item .title {margin-bottom: .5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} .store_list_item .date {font-size: 1.3rem; color: var(--n-gray-500);} /* map */ .store_map {width: 100%; height: 15rem;} .store_map iframe {width: 100%; height: 100%;} /* desc */ .store_desc {padding-top: 1rem;} .store_desc .title {margin-bottom: 0; color: var(--n-gray-900); font-weight: 700;} .store_desc .ref {margin-top: .5rem; color: var(--n-gray-600);} /* old */ /* .store_link {color: var(--n-gray-800);} .store_link:hover {color: var(--n-gray-800);} .store_link .title {margin-bottom: 0; color: var(--n-gray-900); font-weight: 700;} .store_link .ref {margin-top: .5rem; color: var(--n-gray-600);} .store_card_link {display: block; padding: 1.6rem; font-size: 1.4rem; background-color: #fff; color: var(--n-gray-800); border: 1px solid #e6e6e6; border-radius: 10px; margin-bottom: 1rem; cursor: default;} .store_card_link:hover {color: var(--n-gray-800);} .store_card_link .title {margin-bottom: 0; color: var(--n-gray-900); font-weight: 700;} .store_card_link .ref {margin-top: .5rem; font-size: 1.3rem; color: var(--n-gray-700);} */ /*------------------------------------------- -- online cs(1:1문의) -------------------------------------------*/ /* agree box */ .agree_group {margin-top: 2rem;} .agree_box {padding: 2rem; border-radius: 1rem; background-color: var(--n-gray-100); font-size: 1.4rem;} .agree_check {margin: 1rem;} /* pagination */ .pagination {align-items: center; justify-content: center; margin-top: 2rem;} .page_icon { display: inline-block; vertical-align: middle; width: 1.6rem; height: 1.6rem; filter: var(--n-filter-gray6);} .page_first {background: url(../svg/double_arrow_left.svg) no-repeat center/100%;} .page_last {background: url(../svg/double_arrow_right.svg) no-repeat center/100%;} .page_prev {background: url(../svg/chevron_left.svg) no-repeat center/100%; margin: 0 .5rem;} .page_next {background: url(../svg/chevron_right.svg) no-repeat center/100%; margin: 0 .5rem;} .page_link {width: 2.4rem; height: 2.4rem; line-height: 2.4rem; margin: 0 .25rem; border-radius: .5rem; font-size: 1.4rem; color: var(--n-gray-500); text-align: center;} .page_link:hover {background-color: var(--n-gray-200); color: var(--n-gray-500);} .page_link.on {color: #fff; background-color: var(--n-primary);} /*img upload*/ .cs_photo_wrap {position: relative; width: calc(100vw * .35); height: calc(100vw * .35); max-width: 250px; max-height: 250px; border-radius: 1rem; border: 1px solid var(--n-gray-300); overflow: hidden;} .cs_photo_wrap label {width: 100%; height: 100%; background: url(../svg/plus-lg.svg) no-repeat center/30%; filter: var(--n-filter-gray4);} .cs_photo_wrap img {position:absolute; top:50%; transform:translateY(-50%); width: 100%; height: auto;} /*------------------------------------------- -- form download -------------------------------------------*/ .download_wrap .service_desc .title {padding-right: 0;} .download_wrap .card_link .btn_wrap {margin-top: 1.6rem;} /*------------------------------------------- -- apply change(가입정보변경) -------------------------------------------*/ .applychg_tab {} .applychg_tab .tab_box_link.check_self::before {content: ''; position: absolute; top: .4rem; right: .4rem; display: block; width: 1rem; height: 1rem; background: url(../svg/asterisk.svg) no-repeat center/100%; filter: var(--n-filter-gray5);} .applychg_tab .tab_box_link.on::before {filter: invert(99%) sepia(72%) saturate(26%) hue-rotate(127deg) brightness(106%) contrast(100%);} /*------------------------------------------- -- contact -------------------------------------------*/ /* company */ .company_img_wrap {background: url(../img/img-about-company.png)no-repeat center/cover; width: 100%; height: 15rem; margin-top: -32px;} /*------------------------------------------- -- prepaid -------------------------------------------*/ .charge_wrap .guide_area {font-size: 1.4rem; color: var(--n-gray-800); word-break: keep-all;} .charge_wrap .guide_area .guide_top {margin-bottom: 4rem;} .charge_wrap .guide_area h4 {margin-bottom: 1rem;} .charge_wrap .guide_area .guide_cardlist > * {display: flex; flex-direction: column; margin-bottom: 1.6rem;} .charge_wrap .guide_area .guide_cardlist .box {height: 100%;} .charge_wrap .input_flex button, #smsAuth .input_flex button {min-width: 10rem;} /*------------------------------------------- -- mypage -------------------------------------------*/ /* join info */ .my_info.joinInfo .header {margin-bottom: 4.8rem; padding: 2rem; border-radius: 1rem; border-bottom: 0; background-color: var(--n-gray-100);} .my_info.joinInfo .header_top {display: flex; flex-direction: column; justify-content: space-between; height: unset; padding-top: 0; margin-bottom: 1.6rem; border-bottom: 0; font-size: 1.6rem; background-color: transparent;} .my_info.joinInfo .header_top .name {font-size: 1.8rem;} .my_info.joinInfo .header_top .apply_no {display: flex; justify-content: space-between; padding-top: 1rem; margin-top: 1rem; border-top: 1px solid var(--n-gray-300);} .my_info.joinInfo .header_top .apply_no b {color: var(--n-primary);} .my_info.joinInfo .header_bottom {padding: 1rem; border-radius: 1rem; font-size: 1.3rem; background-color: #fff;} .my_info.joinInfo .header_bottom ul {display: flex; flex-direction: column;} .my_info.joinInfo .header_bottom ul li {display: flex; width: 100%; justify-content: space-between; padding: .5rem;} .my_info.joinInfo .header_bottom ul li span {position: relative; padding-right: 1rem; font-weight: 500;} .my_info.joinInfo .order_box {height: 100%; padding: 1.5rem; border-radius: 1rem; border: 1px solid var(--n-gray-300);} .my_info.joinInfo .content_box {display: flex; flex-direction: column; padding: 0 .8rem; margin-bottom: 3.2rem;} .my_info.joinInfo .content_box .title_wrap {margin-bottom: 1.2rem;} .my_info.joinInfo .content_box .title_wrap h2 {margin-bottom: 0; line-height: 1.75;} .my_info.joinInfo .content_box .title_wrap.type2 {display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;} .my_info.joinInfo .content_box .title_wrap.type3 {display: flex; flex-direction: column; justify-content: space-between;} .my_info.joinInfo .content_box .title_wrap .ref {font-size: 1.2rem; font-weight: 400; color: var(--n-gray-500);} .my_info.joinInfo .content_box .title_wrap .amount_refresh {display: flex; justify-content: end; align-items: center; gap: .8rem; width: 100%; font-size: 1.2rem; font-weight: 400; color: var(--n-gray-500);} .my_info.joinInfo .content_box .title_wrap .amount_refresh button {height: 3rem;} .my_info.joinInfo .content_box ul {position: relative; flex-grow: 1; height: 100%; padding: 0;} .my_info.joinInfo .content_box .order_list {padding-top: .5rem; border-bottom: 1px solid #e6e6e6;} .my_info.joinInfo .content_box .order_list li {padding: 1rem; border-bottom: 0;} .my_info.joinInfo .content_box ul li.data_none {height: 100%; min-height: unset;} .my_info.joinInfo .content_box ul li.btn_wrap {padding: 1rem; margin-top: auto; border-bottom: 0;} .my_info.joinInfo .content_box ul .title, .my_info.joinInfo .content_box ul .text {font-size: 1.3rem;} .my_info.joinInfo .content_box ul .rateplan {font-size: 1.6rem; font-weight: 700; color: var(--n-primary);} .my_info.joinInfo .content_box ul .form_notice {margin-top: 0;} .my_info.joinInfo .content_box ul .list_dot {height: unset;} .my_info.joinInfo .content_box ul .list_dot li {padding: 0; padding-left: 1rem; border-bottom: 0;} .my_info.joinInfo .content_box .btn_group {border-radius: .5rem; background-color: rgba(196 14 24 / 8%); word-break: keep-all;} .my_info.joinInfo .content_box .btn_group .btn_item {position: relative;} .my_info.joinInfo .content_box .btn_group .btn_item:not(:first-child)::before {content: ''; display: block; width: 1px; height: 50%; background-color: var(--n-primary-light); position: absolute; top: 50%; transform: translateY(-50%);} .my_info.joinInfo .content_box .btn_group .btn {display: flex; align-items: center; justify-content: center; width: 100%; min-height: 3.5rem; padding: .5rem 1rem; border: 0; font-size: 1.3rem; font-weight: 500; background-color: transparent; color: var(--n-primary);} .my_info.joinInfo .content_box .box_guide .text {padding: 0; margin: 0; font-size: 1.4rem; color: var(--n-gray-700);} .my_info.joinInfo .content_box .amount_info {font-size: 1.4rem; color: var(--n-gray-800);} .my_info.joinInfo .content_box .amount_info .acc {margin-top: .8rem; font-size: 1.8rem; font-weight: 700; color: var(--n-primary);} .my_info.joinInfo .content_box .amount_info .ref {font-size: 1.2rem; font-weight: 400; color: var(--n-gray-400);} .my_info.joinInfo .charge_area {flex-direction: column;} .my_info.joinInfo .charge_area .total_info {display: flex; flex-direction: column; justify-content: center; width: 100%; padding-bottom: 1.2rem; margin-bottom: 1.2rem; border-bottom: 1px solid #e6e6e6; font-size: 1.6rem; color: var(--n-gray-900); text-align: center;} .my_info.joinInfo .charge_area .total_info .amount {font-size: 2.8rem; color: var(--n-primary);} .my_info.joinInfo .charge_area .total_info .period {margin-top: .5rem; font-size: 1.3rem; color: var(--n-gray-400);} .my_info.joinInfo .charge_area .charge_info {width: 100%; margin-top: 1.2rem;} /* pay history */ .select_month_area {margin-bottom: 2.4rem; text-align: center;} .select_month_area .select_box {width: 120px;} .select_month_area .period {padding-top: 1rem; font-size: 1.3rem; color: var(--n-gray-500);} /*********************************************************************************************************************** F. Self ***********************************************************************************************************************/ .self_wrap .login_wrap {max-width: 720px;} .self_wrap .form_wrap h2 {color: var(--n-gray-900);} .self_wrap .form_wrap h2.type_flex {display: flex; flex-wrap: wrap; justify-content: space-between;} .self_wrap .form_group {margin-bottom: 1.6rem;} /* .self_wrap .order_list_wrap .form_wrap h2 {padding-bottom: 0; margin-bottom: 1rem; border-bottom: 0;} */ #hopeNumList, #hopeNumListArea {margin: 1rem 0;} #hopeNumListArea button {max-width: 340px;} #areaTerms {padding: 1rem 0; border-top: 1px solid var(--n-gray-300); border-bottom: 1px solid var(--n-gray-300);} #areaTerms > div {padding: .5rem 0;} #areaTerms .btn_underline, #personAgree .btn_underline, #harmAgree .btn_underline {min-width: 30px;} #inisisAuth .modal-body {height: 65vh;} #inisisAuth .acc_group {padding: 1rem; border: 1px solid #e6e6e6; border-radius: 1rem;} #inisisAuth .acc_content {font-size: 1.4rem;} #inisisAuth .step {flex-direction: row;} #inisisAuth .step_item + .step_item::before {top: 50%; left: -2.5rem; transform: translateY(-50%); background: url(../svg/chevron-right.svg) center / 100% no-repeat; } #inisisAuth .step_item .img_wrap {width: 6rem; height: 6rem;} #inisisAuth .step_item .img_wrap img {width: 3rem; height: 3rem;} .self_copy_wrap {padding: 2rem 0 4rem 0;} .self_copy {font-size: 1rem; color: var(--n-gray-400); text-align: center;} .self_wrap .box_guide .text {padding: .8rem 0; font-size: 1.4rem; color: var(--n-gray-800);} /*------------------------------------------- -- step1 -------------------------------------------*/ /* self call (가입 가능시간 안내) */ .self_call {font-size: 1.4rem; color: var(--n-gray-800);} .self_call .title {margin-bottom: .5rem; font-weight: 700;} .self_call .content {padding-left: 1.2rem; margin-bottom: 1.6rem; list-style: "- ";} .self_call .content li {word-break: keep-all;} .self_call .ref {font-size: 1.1rem; color: var(--n-gray-500);} /* self info (셀프개통 안내) */ .self_info .box {padding-bottom: 2.4rem;} .self_info .title {margin-bottom: 1rem; font-size: 1.6rem; font-weight: 700; color: var(--n-gray-900);} .self_info .content {font-size: 1.4rem; color: var(--n-gray-700); word-break: keep-all; border: 0; padding: 0;} .self_info .ref {padding-top: 1rem; font-size: 1.2rem; color: var(--n-gray-500);} /* 유심/esim 안내 버튼(임시) */ .self_wrap .guide_btn {text-align: right;} .self_wrap .guide_btn button {height: 3rem; padding: 0 1rem; font-size: 1.4rem;} .step1-activeInfo button {font-size: 1.4rem; max-width: unset;} .step1-usimInfo {padding: 2rem; margin-top: 0 !important; border-radius: 1rem; background-color: var(--n-gray-100);} #selfInfoTabContent .step1-usimInfo {padding: 0;} .step1-usimInfo .advice_item .img_wrap img {width: auto; height: 4.8rem;} .step1-authInfo {padding: 2rem; border-radius: 1rem; background-color: var(--n-gray-100);} .step1-usimInfo .advice_item .box {padding: 1rem; background-color: #fff; border: 1px solid var(--n-gray-300);} /*------------------------------------------- -- price select(요금제 선택 - step_price) -------------------------------------------*/ /* price filter */ .price_filter, .price_filter_popup {top: 5.6rem; padding: 1rem 0; margin-top: -10px; overflow-x: visible; background-color: #fff;} .price_filter button, .price_filter_popup button {padding: .5rem 1.6rem; font-size: 1.4rem; color: var(--n-gray-500); background-color: var(--n-gray-200); border: 1px solid var(--n-gray-200); border-radius: .5rem;} .price_filter button:hover, .price_filter_popup button:hover {color: var(--n-gray-500);} .price_filter button.on, .price_filter_popup button.on {color: var(--n-primary); background-color: transparent; border-color: var(--n-primary); font-weight: 500;} .price_filter_popup .swiper {padding-right: 2rem;} .self_wrap .price_sticky_wrap {top: 5.6rem; background-color: #fff;} .body_wrap_agent.self_wrap .price_sticky_wrap {top: 0;} .self_wrap .price_sticky_wrap .sub_header {position: relative; top: 0; padding-bottom: 3.2rem; margin-bottom: 0;} .self_wrap .price_sticky_wrap .price_filter {top: 0;} /* price list */ .card_price_list {border: none; border-radius: 1rem;} .card_price_list + .card_price_list {margin-top: 1.6rem;} .card_price_list label {padding: 2.4rem; border-radius: 1rem;} .card_price_list input[type="radio"] {display: none;} .card_price_list input[type="radio"]:checked + label {border: 1px solid var(--n-primary);} .card_price_list .head {font-size: 1.6rem; font-weight: 600;} .card_price_list .content_group {flex-direction: column; margin-top: 1.6rem;} .card_price_list .detail {width: 100%; font-size: 1.4rem; color: var(--n-gray-700);} .card_price_list .text li {position: relative; display: inline-block;} .card_price_list .text li:not(:first-child) {padding-left: 1rem; margin-left: .5rem;} .card_price_list .text li:not(:first-child)::before {content: ''; position: absolute; top: 50%; left: 0; transform: translateY(-50%); display: block; width: 1px; height: 14px; background-color: var(--n-gray-300);} .card_price_list .detail .ref {padding-top: .5rem; font-size: 1.3rem; font-weight: 400; color: var(--n-gray-500);} .card_price_list .price {font-size: 2.2rem; font-weight: 700; text-align: right; color: var(--n-primary);} .card_price_list .price .ref {font-size: 1.3rem; font-weight: 400; color: var(--n-gray-500);} /*------------------------------------------- -- order list(가입정보 확인 - step_6) -------------------------------------------*/ .order_list_wrap h1 {margin-bottom: 3.2rem;} /* .order_list_wrap h2 {margin-bottom: 1rem;} */ .order_list_wrap .order_list {padding: 1rem 0; border-top: 1px solid var(--n-gray-300); border-bottom: 1px solid var(--n-gray-300);} /* .order_box */ .order_box {padding: 1.5rem; border-radius: 1rem; border: 1px solid #e6e6e6;} .order_list_wrap .order_list.type_flex, .order_box.type_flex {display: flex; flex-direction: column;} .order_list_wrap .order_list li {padding: 1rem; line-height: 1.75; word-break: keep-all;} .order_list_wrap .order_list .text {text-align: right; word-break: break-all;} .order_list li + li {padding-top: 1.6rem;} .order_list .title {font-size: 1.4rem; color: var(--n-gray-600);} .order_list .text {font-size: 1.4rem; color: var(--n-gray-900); word-break: break-all;} .order_list .text_flex {display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: end; gap: .5rem;} .order_list .box_guide {margin-top: 1rem;} .order_list .box_guide .row + .row {padding-top: 1rem;} /*------------------------------------------- -- applyComplArea(접수완료 - step_7) -------------------------------------------*/ .applyComplArea {} .applyComplArea .img_wrap {margin-bottom: 1.6rem;} .applyComplArea .img_wrap img {width: 6rem; filter: var(--n-filter-primary);} .applyComplArea h2 {margin-bottom: 2rem; font-size: 1.8rem; font-weight: 500;} .applyComplArea .box_guide {} .applyComplArea .box_guide .text_group_ref {font-size: 1.3rem;} /*********************************************************************************************************************** G. Components ***********************************************************************************************************************/ /*------------------------------------------- -- form -------------------------------------------*/ .form_wrap + .form_wrap {margin-top: 4rem;} .form_group {margin-bottom: 2rem;} .form_group:last-child {margin-bottom: 0;} .input_group {position: relative;} .input_group input[type="email"] {padding-right: 7rem;} .form_notice {width: 100%; margin-top: 1rem; font-size: 1.3rem; color: var(--n-gray-800);} .input_flex {display: flex; align-items: center; gap: .8rem;} .input_flex input {flex: 1;} .input_flex button {height: 4.8rem; padding: 0 1rem;} /* label */ .n_form_label {font-size: 1.5rem; font-weight: 500; padding-top: .5rem; padding-bottom: .5rem; margin: 0; color: var(--n-gray-600);} .n_check_label {font-size: 1.4rem; padding-left: 1rem; color: var(--n-gray-800);} /* checkbox - terms */ .form_check_icon {padding-left: 0; margin-bottom: 0;} .form_check_icon .n_check_label {position: relative; padding-left: 2.8rem;} .form_check_icon input[type="checkbox"] + label span {position: absolute; top: 50%; left: 0; display: inline-block; width: 25px; height: 25px; vertical-align: top; cursor: pointer; transform: translateY(-50%); background: url(../svg/check_small.svg) no-repeat center center; background-size: 100%; background-position: 0 0; filter: var(--n-filter-gray4);} .form_check_icon input[type="checkbox"]:checked + label span {filter: invert(11%) sepia(0%) saturate(11%) hue-rotate(192deg) brightness(91%) contrast(92%);} /*------------------------------------------- -- list -------------------------------------------*/ .list li {position: relative;} .list li + li {margin-top: .8rem;} .list li.ref {margin-top: .25rem; padding-left: 1rem;} .list_dash li {position: relative; padding-left: 1rem;} .list_dash li:before {content: ""; position: absolute; top: 10px; left: 0; display: block; width: 5px; height: 1px; background-color: var(--n-gray-800);} .list_dash li.ref:before {display: none;} .list_dot li {position: relative; padding-left: 1rem;} .list_dot li + li {margin-top: .8rem;} .list_dot li.ref {margin-top: .25rem;} .list_dot li:before {content: ""; position: absolute; top: 8px; left: 0; display: block; width: 3px; height: 3px; border-radius: 100%; background-color: var(--n-gray-800);} .list_dot li.ref:before {display: none;} .list_ico li {position: relative; display: flex; gap: .3rem; padding-left: 0;} .list_ico li:before {content: ""; display: none;} .list_ico li + li {margin-top: .8rem;} .list_ico li.ref {margin-top: .25rem;} .list_ico li.ref ul li+li {margin-top: .25rem;} .select_list_area {} .select_list {gap: 1.6rem 0;} .select_list li {position: relative; text-align: center;} .select_list li a {display: inline-block; width: 100%; height: 100%; font-size: 1.2rem; color: var(--n-gray-800);} .select_list li a.on {font-weight: 500; color: var(--n-gray-900);} .select_list li a.on .img_wrap {border: 2px solid var(--n-primary); box-shadow: var(--n-primary-shadow) 0px 0px 0px 3px;} .select_list li a .img_wrap {width: 5rem; height: 5rem; margin: 0 auto; border: 1px solid #e6e6e6; border-radius: 1rem; overflow: hidden;} .select_list li a .img_wrap img {width: 100%; height: 100%; object-fit: cover;} .select_list li a span {display: inline-block; margin-top: .5rem;} /*------------------------------------------- -- table -------------------------------------------*/ .table_board {display: block; width: 100%; font-size: 1.4rem;} .table_board tbody {display: inline-block; width: 100%;} .table_board tr {display: grid; grid-template-columns: auto; align-items: start; width: 100%; border-bottom: 1px solid var(--n-gray-300);} .table_board th {width: 100%; height: 100%; padding-top: 2.4rem; font-size: 1.6rem; font-weight: 500; color: var(--n-gray-900);} .table_board td {width: 100%; padding: 1rem 0 2.4rem 0;} .table_board .form_group {margin-bottom: 1rem;} .table_board.type2 {display: table; width: 100%; border-top: 2px solid var(--n-primary); font-size: 1.4rem;} .table_board.type2 tbody {display: table-row-group;} .table_board.type2 tr {display: table-row; border-bottom: 1px solid var(--n-gray-300);} .table_board.type2 th {width: auto; min-width: unset; padding: 1rem; border: 1px solid var(--n-gray-300); background-color: var(--n-gray-100); color: var(--n-gray-900); text-align: center;} .table_board.type2 th:first-child {border-left: 0;} .table_board.type2 th.be_0 {border-right: 0;} .table_board.type2 td {width: auto; padding: 1.6rem 1rem; color: var(--n-gray-700); line-height: 1.5} .table_board.type2 td ~ td {border-left: 1px solid var(--n-gray-300);} /* gray */ .table_board.table_board_gray {border-top: 1px solid var(--n-gray-300); border-bottom: 1px solid var(--n-gray-300);} .table_board.table_board_gray th {background-color: var(--n-gray-100);} /* align */ .table_board td.td_left {padding-left: 2rem;} /*------------------------------------------- -- box -------------------------------------------*/ .box {border-radius: 1rem;} .box_title {font-size: 1.4rem; font-weight: 500; color: var(--n-gray-900); margin-bottom: 1rem;} .box_outline {padding: 2rem; border: 1px solid var(--n-gray-300);} .box_outline_title {padding-top: .8rem; font-size: 1.4rem; color: var(--n-gray-900);} .box_outline_text {padding-top: .8rem; font-size: 1.1rem; color: var(--n-gray-500);} .box_outline_icon img {width: 4.8rem;} .box_form {padding: 1rem 0;} .box_form .inner {display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 1.6rem;} .box_form .inner .img_wrap {width: 100%; max-width: 340px; margin: 0 auto;} .box_form .inner .img_wrap + div {width: 100%;} .box_form .inner .flex-fill {width: 100%;} .box_form img {width: 100%; height: auto;} .box_form .title {padding-bottom: 1.6rem; font-size: 1.4rem; font-weight: 700; color: var(--n-primary);} .box_guide + .form_wrap {margin-top: 3.2rem;} .box_form .btn_group {background-color: transparent;} .box_cardlist {overflow-y: auto; padding-top: 1.6rem; border-radius: 0; background-color: var(--n-gray-200);} .box_cardlist .inner {padding-bottom: 10.4rem;} .box_list {padding: 2rem; background-color: var(--n-gray-100);} .box_list .form-check {padding: .8rem 1.5rem; padding-right: 0;} .box_guide {padding: 2rem; background-color: var(--n-gray-100);} .box_guide > .title {padding-bottom: 1rem; font-size: 1.4rem; font-weight: 700; color: var(--n-gray-900);} .box_guide > .text {padding: .8rem 0; font-size: 1.4rem; color: var(--n-gray-700);} .box_guide .img_box {width: 180px; height: 230px; border: 1px solid var(--n-gray-300); border-radius: 5px 5px 0 0;} .img_box#imgKeypad { background: no-repeat center/100% url(../img/IMEI_guide01.jpeg);} .img_box#imgPhoneInfo { background: no-repeat bottom/100% url(../img/IMEI_guide02.jpeg);} .box_guide .text_group_title {font-size: 1.5rem; font-weight: 700; margin-bottom: 1.6rem;} .box_guide .text_group_ref {font-size: 1.4rem;} .box_green {height: 100%; padding: 1.6rem; background-color: rgba(36, 150, 181, .04);} .box_green .title {font-size: 1.4rem; font-weight: 700;} .box_light {height: 100%; padding: 1.6rem; background-color: var(--n-lightBlue);} .box_light .title {font-size: 1.4rem; font-weight: 700;} /*------------------------------------------- -- button -------------------------------------------*/ button {border-radius: .8rem;} /* disabled */ button:disabled, .btn:disabled, a:disabled, button.disabled, .btn.disabled, a.disabled {pointer-events: none; opacity: .45;} .btn-check[disabled] + .select_btn, .btn-check[disabled] + .select_btn_t2, .btn-check:checked[disabled] + .select_btn, .btn-check:checked[disabled] + .select_btn_t2, .select_btn.disabled, .select_btn_t2.disabled, .btn-check:checked + .select_btn.disabled, .btn-check:checked + .select_btn_t2.disabled {pointer-events: none; border-color: var(--n-gray-300); background-color: var(--n-gray-200); color: var(--n-gray-500); opacity: 1;} /* .n_btn_outline_gray.disabled {border-color: var(--n-gray-300); color: var(--n-gray-700);} */ /* btn wrap */ .btn_wrap {margin-top: 4rem;} .btn_group {padding: 1rem 0; background-color: #fff;} .btn_group.type_flex {display: flex; padding: 0;} .btn_group.type_flex > * {flex: 1;} .fixed-bottom {z-index: 1029;} .fixed-bottom .btn_group {border-top: 1px solid var(--n-gray-300);} /* button color */ .n_btn_primary {background-color: var(--n-primary); color: #fff;} .n_btn_primary:hover {background-color: var(--n-primary-hover); color: #fff;} .n_btn_light {background-color: var(--n-primary-light); color: var(--n-primary);} .n_btn_light:hover {background-color: var(--n-primary-light); color: var(--n-primary);} .n_btn_lightgray {background-color: var(--n-gray-200); color: var(--n-gray-600);} .n_btn_lightgray:hover {background-color: #eaeaea; color: var(--n-gray-700);} .n_btn_darkgray {background-color: var(--n-gray-700); color: #fff;} .n_btn_darkgray:hover {background-color: var(--n-gray-600); color: #fff;} .n_btn_dark {background-color: var(--n-gray-900); color: #fff;} .n_btn_dark:hover {background-color: var(--n-gray-800); color: #fff;} .n_btn_outline_primary {background-color: transparent; border: 1px solid var(--n-primary); color: var(--n-primary);} .n_btn_outline_primary:hover {color: var(--n-primary);} .n_btn_outline_gray {background-color: transparent; border: 1px solid var(--n-gray-300); color: var(--n-gray-600);} .n_btn_outline_gray:hover {color: var(--n-gray-600);} .n_btn_outline_dark {background-color: transparent; border: 1px solid var(--n-gray-900); color: var(--n-gray-900);} .n_btn_outline_dark:hover {color: var(--n-gray-900);} .n_btn_info {background-color: var(--n-gray-200); color: var(--n-gray-700);} .n_btn_info:hover {background-color: var(--n-gray-300); color: var(--n-gray-700); border: none;} .btn_underline {height: auto; padding: 0; font-size: 1.3rem; color: var(--n-gray-500); text-decoration: underline; vertical-align: middle; background-color: transparent;} .btn_underline:hover {color: var(--n-gray-500);} .btn_text_primary {position: absolute; top: 50%; transform: translateY(-50%); right: 10px; font-size: 1.4rem; font-weight: 500; background-color: transparent; color: var(--n-primary);} .btn_down {position: relative; height: 3rem; padding: 0 1rem 0 3rem; font-size: 1.4rem; background-color: transparent; border: 1px solid var(--n-gray-300); border-radius: 1rem; color: var(--n-gray-600);} a.btn_down {display: inline-block; line-height: 3rem;} .btn_down::before {content: ''; background: url(../svg/download.svg) no-repeat center/100%; position: absolute; top: 50%; left: 1rem; transform: translateY(-50%); display: inline-block; width: 1.5rem; height: 1.5rem; filter: invert(45%) sepia(8%) saturate(80%) hue-rotate(21deg) brightness(96%) contrast(87%);} .btn_down:hover {color: var(--n-gray-600);} /* button company */ .n_btn_img#thePay {background: url(../img/thePay_white.png) no-repeat center center; background-size: contain; background-color: #061E4F;} .btn_kakao {display: inline-block; padding: 1rem 1.6rem; font-size: 1.4rem; font-weight: 700; background-color: #FAE700; border-radius: 1rem; color: #452120;} .btn_kakao:hover {color: #452120;} /* button size */ .n_btn_lg {width: 100%; height: 5.6rem; font-size: 1.6rem; font-weight: 500; border-radius: 1rem; text-align: center;} a.n_btn_lg {display: inline-block; line-height: 5.6rem;} .n_btn_lg.w340 {max-width: 340px;} .n_btn_lg.w260 {max-width: 260px;} .n_btn_m {width: 100%; height: 4.8rem; max-width: 340px; font-size: 1.6rem; font-weight: 500; border-radius: 1rem; text-align: center;} a.n_btn_m {display: inline-block; line-height: 4.8rem;} .n_btn_s {width: 100%; height: 4.8rem; font-size: 1.5rem; border-radius: 1rem; text-align: center;} a.n_btn_s {display: inline-block; line-height: 4.8rem;} .n_btn_xs {max-width: 120px; height: 3.5rem; padding: 0 1rem; font-size: 1.4rem; border-radius: 1rem; text-align: center;} a.n_btn_xs {display: inline-block; line-height: 3.5rem;} .n_btn_auto {height: 3rem; padding: 0 1rem; font-size: 1.3rem; border-radius: 1rem; text-align: center;} a.n_btn_auto {display: inline-block; line-height: 3rem;} .oval {border-radius: 100px;} /* btn style */ .btn_link_ico {position: relative; display: inline-block; padding: 0; font-size: 1.4rem; font-weight: 500; color: var(--n-gray-900); background-color: transparent; vertical-align: middle;} .btn_link_ico::after {background: url(../svg/chevron-right.svg) no-repeat center/100%; content: ""; display: inline-block; width: 1.2rem; height: 1.2rem; margin-left: .4rem;} .btn_link_ico:hover {color: var(--n-gray-900);} /* icon */ .icon_help {width: 14px; height: 14px; padding: 0; margin-left: .4rem; background: url(../svg/question-circle-fill.svg) no-repeat center center; background-size: 100%; background-position: 0 0; filter: var(--n-filter-gray4);} /* select button */ input[type="radio"].btn-check, input[type="checkbox"].btn-check {display: none;} .select_btn, .select_btn_t2 {display: flex; align-items: center; width: 100%; height: 100%; padding: 1.2rem 1rem; font-size: 1.4rem; color: var(--n-gray-500); border: 1px solid var(--n-gray-300); border-radius: .8rem; word-break: keep-all;} .select_btn {justify-content: center;} .select_btn_t2 {justify-content: space-between;} .select_btn_lg {padding: 2rem 1rem;} .btn-check + .select_btn:hover, .btn-check + .select_btn_t2:hover {color: var(--n-gray-500); border: 1px solid var(--n-gray-300);} .btn-check:checked + .select_btn, .btn-check:checked + .select_btn_t2, .select_btn.on {font-weight: 500; color: var(--n-primary); border: 1px solid var(--n-primary); background-color: transparent;} /* selector */ select.select_box::-ms-expand {display: none;} .select_box { position: relative; width: auto; padding: 1rem 2.4rem 1rem 1rem; font-size: 1.4rem; font-weight: 500; border: 1px solid #e6e6e6; border-radius: 1rem; color: var(--n-gray-900); background: url(../svg/chevron-down.svg) no-repeat; background-position: 90% 50%; background-size: 10px; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .select_box + .select_box {margin-left: .5rem;} .select_box::after {background: url(../svg/chevron-down.svg) no-repeat center/100%; content: ""; position: absolute; top: 50%; transform: translateY(-50%); right: 1rem; display: inline-block; width: 1rem; height: 1rem; filter: invert(25%) sepia(98%) saturate(9%) hue-rotate(329deg) brightness(100%) contrast(95%);} /*------------------------------------------- -- badge -------------------------------------------*/ .badge_wrap {display: flex; flex-wrap: wrap; gap: .5rem; width: 100%; margin-bottom: 1rem; border-radius: .3rem; overflow: hidden;} .badge_wrap .badge {padding: 4px 8px; font-size: 1.2rem; font-weight: 500; border-radius: 0.3rem;} /* .badge_wrap .badge + .badge {margin-left: .5rem;} */ .badge_primary {background-color: var(--n-primary); border: 1px solid var(--n-primary); color: #fff;} .badge_light {background-color: var(--n-primary-light); border: 1px solid var(--n-primary-light); color: var(--n-primary);} .badge_red {background-color: #ff6a44; border: 1px solid #ff6a44; color: #fff;} .badge_purple {background-color: #bd80fb; border: 1px solid #bd80fb; color: #fff;} .badge_green {background-color: #77df38; border: 1px solid #77df38; color: #fff;} .badge_yellow {background-color: #fed26a; border: 1px solid #fed26a; color: #fff;} .badge_blue {background-color: #87bdf2; border: 1px solid #87bdf2; color: #fff;} /* .badge_red {background-color: #fee9eb; border: 1px solid #fee9eb; color: #f44f5d;} .badge_purple {background-color: #f4e1f8; border: 1px solid #f4e1f8; color: #AB0EC4;} .badge_green {background-color: #e1f8e7; border: 1px solid #e1f8e7; color: #0EC43C;} .badge_yellow {background-color: #fdf4d9; border: 1px solid #fdf4d9; color: #ffb720;} .badge_blue {background-color: #e1f0f8; border: 1px solid #e1f0f8; color: #0E83C4;} */ .badge_dark {background-color: var(--n-gray-900); color: #fff;} .badge_primary-line {background-color: transparent; border: 1px solid var(--n-primary); color: var(--n-primary);} .badge_black-line {background-color: transparent; border: 1px solid var(--n-gray-900); color: var(--n-gray-900);} .badge_red-line {background-color: transparent; border: 1px solid #ff6a44; color: #ff6a44;} .badge_purple-line {background-color: transparent; border: 1px solid #bd80fb; color: #bd80fb;} .badge_green-line {background-color: transparent; border: 1px solid #77df38; color: #77df38;} .badge_yellow-line {background-color: transparent; border: 1px solid #fed26a; color: #fed26a;} .badge_blue-line {background-color: transparent; border: 1px solid #87bdf2; color: #87bdf2;} /*------------------------------------------- -- text -------------------------------------------*/ h1 {font-size: 2.6rem; font-weight: 700; color: var(--n-gray-900);} h2 {font-size: 2rem; font-weight: 700; color: var(--n-gray-900); margin-bottom: 1.2rem;} .breadcrumb {font-size: 1.1rem; color: var(--n-gray-500); margin-bottom: 0;} .text_lg_size {font-size: 1.6rem;} .text_default_size {font-size: 1.4rem;} .text_md_size {font-size: 1.3rem;} .text_sm_size {font-size: 1.1rem;} .text_default_color {color: var(--n-gray-800);} .text_dark_color {color: var(--n-gray-900);} .text_light_color {color: var(--n-gray-500);} .text_primary_color {color: var(--n-primary);} .text_bold {font-weight: 700;} .text_semibold {font-weight: 500;} .text_light {font-weight: 400;} .text_info {margin-top: .5rem; font-size: 1.3rem;} .ellipsis {overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} /*------------------------------------------- -- step -------------------------------------------*/ .step {display: flex; flex-direction: column; justify-content: space-between; gap: 4rem;} .step_item {position: relative; display: flex; flex-direction: column; align-items: center; flex: 1; text-align: center;} .step_item + .step_item::before {content: ""; position: absolute; top: -3rem; left: 50%; transform: translateX(-50%); display: block; width: 1.2rem; height: 1.2rem; background: url(../svg/chevron-down.svg) center/100% no-repeat; filter: var(--n-filter-gray5);} .step_item .img_wrap {position: relative; width: 10rem; height: 10rem; background-color: var(--n-gray-100); border-radius: 2rem; } .step_item .img_wrap img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 6rem; height: 6rem;} .step_item .title {margin-top: 1rem; font-size: 1.4rem;} /*------------------------------------------- -- advice -------------------------------------------*/ .advice {display: flex; flex-direction: column; gap: 3rem;} .advice_item {display: flex; gap: 1.6rem; font-size: 1.4rem; color: var(--n-gray-700); line-height: 1.65; word-break: keep-all;} .advice_item .img_wrap {position: relative; flex-basis: 4.8rem; min-width: 4.8rem; height: 4.8rem;} .advice_item .img_wrap img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 4.8rem; height: 4.8rem;} .advice_item .title {font-size: 1.4rem; font-weight: 500; color: var(--n-gray-900);} .advice.type2 .advice_item {flex-direction: column; gap: 1.2rem;} .advice.type2 .advice_item .img_wrap {flex-basis: auto; width: 4rem; height: 4rem;} /*------------------------------------------- -- space -------------------------------------------*/ .pt16 {padding-top: 1.6rem;} .pt24 {padding-top: 2.4rem;} .pb16 {padding-bottom: 1.6rem;} .pb24 {padding-bottom: 2.4rem;} .pb_fixbtn {padding-bottom: 8rem;} /*------------------------------------------- -- modal -------------------------------------------*/ .modal-content {border-radius: 1rem;} .modal-header {padding: 2rem 2rem 0 2rem; border: 0;} .modal-footer {padding: 0 2rem 2rem 2rem; border: 0;} .modal-body {padding: 2rem 2rem; border: 0;} .modal-body .inner {max-height: 70vh; overflow-y: auto;} .modal-title {font-size: 1.8rem; font-weight: 500; color: var(--n-gray-900);} .modal_text {list-style: "\00B7 "; padding-left: 2rem;} .modal_text li {font-size: 1.4rem; color: var(--n-gray-800);} .modal_text li + li {padding-top: 1rem;} .modal_text_depth {padding: 1rem 0 0 1rem;} .modal_text_depth li + li {padding-top: .8rem;} .table_terms {min-width: 600px; vertical-align: middle; font-size: 1.1rem;} .modal .table-responsive {padding-bottom: 1.25rem;} /*------------------------------------------- -- swiper -------------------------------------------*/ .swiper {position: relative;} /* overflow: visible; */ .swiper .swiper-wrapper, .swiper-slide {width: auto;} .filter input[type="text"], .filter input[type="date"], .filter select.form-select {height: auto; padding: .5rem .8rem; font-size: 1.4rem;} .filter input[type="date"]::before {content: attr(data-placeholder); width: 100%; color: var(--n-gray-400);} .filter input[type="date"]:focus::before, .filter input[type="date"]:valid::before {display: none;} .viewlist_wrap {width: 100%; white-space: nowrap; font-size: 1.4rem;} .viewlist_wrap thead td {padding: .8rem .5rem; color: var(--n-gray-900);} .viewlist_wrap tbody td {padding: .8rem .5rem; color: var(--n-gray-800);} /*********************************************************************************************************************** H. etc ***********************************************************************************************************************/ /* bg space */ .bg_space10 {width: 100%; height: 1rem; background-color: var(--n-gray-100); font-size: 0;} /*responsive */ .for_tablet, .for_pc {display: none;} /* error */ .error_wrap {max-width: 550px; padding: 5rem 0; word-break: keep-all; text-align: center;} .error_wrap img {width: 40%; min-width: 140px;} .error_wrap h1 {margin-bottom: 2.2rem; font-size: 2.2rem;} .error_wrap p {font-size: 1.6rem; color: var(--n-gray-800);} /* scroll */ .scroll_y {overflow-y: scroll;} .scroll_y::-webkit-scrollbar {width: 5px;} .scroll_y::-webkit-scrollbar-thumb {height: 40%; border-radius: 10px; background: rgba(0,0,0,.5);} /* loading */ .loading img {width: 8rem; height: 8rem;} /*********************************************************************************************************************** I. Media Query ***********************************************************************************************************************/ @media screen and (min-width: 576px) { /*------------------------------------------- -- mobile (576px~) -------------------------------------------*/ /*** B. Layout ***/ /* -- container*/ .container {max-width: none;} /*** E. Sub ***/ /* -- product layout */ .product_banner_area {margin: 0;} .product_tab {margin: 0;} .product_photo .swiper-slide {height: 30rem;} } @media screen and (min-width: 768px) { /*------------------------------------------- -- tablet (768px~) -------------------------------------------*/ /*** B. Layout ***/ /* -- container*/ .container { max-width: none; } /*** D. Main ***/ /* -- main banner */ .carousel_mobile, .for_mobile {display: none;} .carousel_tablet, .for_tablet {display: inline-block;} /* -- main service area */ .main_service_area .service_group {justify-content: center; gap: 0 4.8rem;} .main_service_area .service_group li {width: auto;} /* -- main swiper area */ .main_product_list .swiper-slide {width: 40%;} /* -- main event area */ .main_event_area .swiper-slide {width: 40%;} .main_event_area .thumb_card_img.event {padding-top: 40%;} /* -- main cs area */ .call_cs_content .num_list {flex-direction: row; gap: 2rem;} /** E. Sub ***/ /* -- thumb card */ .thumb_list_item {width: 50%;} /* -- product layout */ .product_banner_area .thumb_card_img {max-height: 280px; height: calc(100vw - 60vw);} .card_list.phone_list {display: flex; gap: 0 1.6rem;} .card_list.phone_list .card_list_item {flex: 0 0 auto; width: calc(50% - 0.8rem);} /* -- store list */ .store_list_item {flex-direction: row; align-items: center; padding: 2rem 1.6rem;} .store_desc {padding-top: 0; padding-left: 2rem;} } @media screen and (min-width: 992px) { /*------------------------------------------- -- desktop (992px~) -------------------------------------------*/ /*** A. Default ***/ input[type="text"], input[type="password"], input[type="number"], input[type="date"], input[type="email"], textarea, select.form-select {width: 100%; height: 4.8rem; padding: 0 1.6rem; font-size: 1.6rem;} /*** B. Layout ***/ /* -- container*/ .container, .container-lg, .container-md, .container-sm { max-width: 960px; } /* -- header */ .header .header_content {height: 9rem; align-items: center;} .header .logo img {max-height: 30px; padding-right: 1.6rem;} .header_top {display: block;} .header_content .icons_item_btn {height: 3.5rem; padding: 0 2rem; margin-left: 1rem; font-size: 1.6rem;} .header_content .moblie_wrap {display: none;} .header_content .pc_wrap {display: flex;} /* -- sub header */ .sub_header {top: 9rem; gap: 1.6rem; padding-top: 2rem; padding-bottom: 1.6rem; margin-bottom: 6rem;} .body_wrap_agent .sub_header {top: 0;} .sub_header_step li img {width: 2.4rem; height: 2.4rem;} .sub_header_step li + li {padding-left: 1.6rem; margin-left: 1.6rem;} .sub_header_step li + li::before {left: -16%;} /* -- fullmenu */ /* .full_menu_body {padding-top: 81px;} .full_menu_sign .pc_wrap {display: block;} .full_menu_sign .mob_wrap {display: none;} .full_menu_content {padding: 3.6rem 0;} .full_menu_content .submenu_list {margin-bottom: 4rem;} .full_menu_content .sub_tab_list li {flex: none;} .full_menu_content .sub_tab_link {padding: 1rem 1.6rem; font-size: 1.4rem;} .full_menu_content .menu_list {display: flex; flex-wrap: wrap; gap: 6rem 0; margin: 0 -1.8rem 0 -1.8rem;} .full_menu_content .menu_list li {width: 33.33333%; padding: 0 1.8rem 0 1.8rem;} .full_menu_content .menu_list li a {display: inline-block; width: 100%; font-size: 2rem; border-bottom: 2px solid var(--n-gray-900); text-decoration: none;} .full_menu_content .menu_list li a:hover {border-color: var(--n-primary);} .full_menu_content .menu_list li .sub_list li {width: 100%; padding: .8rem 0;} .full_menu_content .menu_list li .sub_list li a {font-size: 1.6rem; border-bottom: 0; text-decoration: none;} */ /* -- body */ .body_wrap {padding-top: calc(90px + 56px);} .body_wrap_agent {padding-top: 80px;} /* -- nav */ .gnb_wrap {display: block;} /* -- footer */ footer {margin-top: 8rem;} .footer_top {display: flex; justify-content: space-between; align-items: center; padding: 6rem 0 4rem 0;} footer .logo {height: 4.8rem;} footer .policy_list {margin-top: 0; gap: 0 4rem; font-size: 1.4rem;} .footer_bottom {padding: 4rem 0 10rem 0;} footer .company_info {width: 85%; font-size: 1.4rem; gap: 1rem 2.4rem;} footer .company_info li:first-child {width: auto;} footer .copyright {margin-top: 4rem; font-size: 1.4rem;} /* -- preview bottom */ .preview_header {max-width: 960px; padding: 3rem 0; margin: 0 auto;} .preview_header .head {font-size: 2rem;} .preview_header .n_btn_icon {width: 2.4rem; height: 2.4rem;} .preview_body {max-width: 960px; padding: 0 0 6rem 0; margin: 0 auto;} .preview_body .price_info {width: 50%; margin-left: 1rem;} .preview_body .price_info .title {font-size: 1.6rem;} .preview_body .order_list {margin-top: 0; margin-left: 1.6rem;} .product_bottom_preview {padding-top: 4rem; margin-bottom: -8rem;} .product_bottom_preview .preview_header .content {flex-direction: row;} .product_bottom_preview .preview_header .preview_btn {min-width: 280px;} .product_bottom_preview .preview_header .head {font-size: 1.6rem; margin-bottom: 0;} .product_bottom_preview .preview_header .head span {font-size: 2rem;} .product_bottom_preview .preview_body {padding: 0 0 6rem 0;} .product_bottom_preview .preview_body .order_list {margin-left: 0; padding: 0 2rem;} .product_bottom_preview .preview_body .order_list + .order_list {margin-top: 0; margin-left: 0; padding-top: 0; border-top: none; border-left: 1px solid #e6e6e6;} /* -- flex */ .flex_row {margin: 0 -1.2rem;} .flex_row > * {padding: 0 1.2rem;} /*** C. login ***/ /* .login_form {padding: 0 5rem;} */ .login_wrap .login_form {padding: 3.2rem; border-radius: 2rem;} /*** D. Main ***/ .main_content {padding-top: 9rem;} .sec_title {font-size: 3.6rem; margin-bottom: 4rem;} /* -- main banner */ .main_banner {height: 360px;} .main_banner img {width: auto; height: 100%;} .main_banner .swiper-pagination {bottom: 104px; left: 50%; transform: translateX(-50%); max-width: 960px;} .main_banner .swiper-pagination-bullet {width: 8px; height: 8px; margin: 0 5px;} .carousel_mobile, .carousel_tablet, .for_mobile, .for_tablet {display: none;} .carousel_pc, .for_pc {display: inline-block;} .none_pc {display: none;} /* -- main service area */ .main_service_area {} .main_service_area .service_group {padding: 4.8rem 0; margin-top: -4rem; border-radius: 2rem; backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);} .main_service_area .service_link {gap: 1rem; font-size: 1.6rem;} .main_service_area .service_link img {height: 3.2rem;} /* -- main product list */ .main_product_list {padding: 8rem 0;} .rate_card {padding: 2.4rem; border-radius: 2rem;} .rate_card_title {font-size: 2.6rem;} .rate_card_title .title_label {margin-bottom: 2.4rem;} .rate_card_title .title_label span {font-size: 1.2rem; border-radius: .5rem;} /* .rate_card_title .title_label span + span {margin-left: .4rem} */ .rate_card_price {margin-top: 4rem;} .rate_card_price .discount {font-size: 3.2rem;} .rate_card_price .discount span {font-size: 1.6rem;} .rate_card_price .origin {font-size: 1.3rem;} .rate_card_bottom .rate_btn {margin-top: 2.4rem; font-size: 1.6rem;} .rate_card_info {margin-top: .4rem;} .rate_card_info li {padding: 2rem 0; font-size: 1.6rem;} .rate_info_ico::before {width: 2.4rem; height: 2.4rem;} .phone_card_list {margin: 0 -12px 0 -12px;} .phone_card_item {width: 33.33333%; padding: 0 12px 0 12px} .phone_card {flex-direction: column; padding: 3.2rem; border-radius: 2rem;} .phone_card_img {width: 100%; max-width: 250px; height: auto; max-height: 250px; margin: 0 auto;} .phone_card_info {padding-left: 0; padding-top: 2rem; font-size: 1.6rem;} .phone_card_title {font-size: 2rem;} .phone_card_title .title_label {margin-right: .8rem;} .phone_card_price {flex-direction: row; align-items: center; margin-top: 3.2rem; font-size: 1.8rem;} .phone_card_price .ref {padding-left: .5rem; font-size: 1.2rem;} /* -- main event area */ .main_event_area {padding: 8rem 0;} .main_event_area .swiper-slide {width: 30%;} .main_event_area .thumb_card_img.event {padding-top: 30%; border-radius: 2rem;} /* -- main review area */ .main_review_area {padding: 10rem 0;} .main_review_area .sec_title {margin-bottom: 3rem;} .review_card {border-radius: 2rem;} .review_card_content {padding: 3.2rem;} .review_content_info {gap: 4rem; margin-bottom: 4.8rem;} .review_content_info img {width: 3.6rem; height: 3.6rem;} .review_content_info .grade_icon {width: 2.4rem; height: 2.4rem;} .review_content_text {margin-bottom: 1.6rem;} .review_content_text .title {margin-bottom: 2.4rem; font-size: 2.4rem;} .review_content_text .desc {height: 81px; margin-bottom: 2.6rem; font-size: 1.8rem;} .review_content_text .info {font-size: 1.6rem;} .review_more_mobile {display: none;} .review_more_pc {display: block;} /* -- main keyword area */ .main_keyword_area {padding: 10rem 0 0 0;} .keyword_box {padding: 6rem 2rem; border-radius: 2rem;} .keyword_list {display: flex;} .keyword_list li {position: relative; flex-direction: column; justify-content: center; gap: 2.4rem; width: 33.33333%; padding-top: 5.6rem;} .keyword_list li + li {padding-top: 5.6rem; margin-top: 0; border-top: 0; border-left: 1px dashed rgba(48, 136, 219, 0.3);} .keyword_list li .img_wrap {width: 8rem; height: 8rem;} .keyword_list li .img_wrap::before {width: 3.6rem; height: 3.6rem;} .keyword_list li .content {font-size: 2rem; text-align: center;} .keyword_list li .no {position: absolute; top: 0; left: 50%; transform: translateX(-50%); font-size: 1.8rem;} /* -- main cs area */ .main_cs_area {padding: 4rem 0 8rem 0; margin-bottom: -8rem;} .notice_box {padding: 3rem 4rem; margin-top: 2.4rem; border-radius: 2rem;} .notice_content {font-size: 1.8rem;} .notice_title {gap: 4rem;} .notice_content .btn_link_ico {width: 2rem; height: 2rem;} .call_cs_box {padding: 4rem; border-radius: 2rem;} .call_cs_content {flex-direction: row; justify-content: space-between; gap: 0;} .call_cs_content .title {font-size: 2.6rem;} .call_cs_content .num_list {flex-direction: row; gap: 2.4rem; font-size: 1.6rem;} .call_cs_content .num_list span {font-size: 3.2rem;} .call_cs_content .desc_list {flex-direction: row; margin-top: 0; font-size: 1.4rem;} .call_cs_content .desc_list li:not(:first-child) {padding-left: 1rem; margin-left: 1rem;} .call_cs_content .desc_list li:not(:first-child)::before {content: ''; position: absolute; top: 50%; left: 0; transform: translateY(-50%); display: inline-block; width: 1px; height: 10px; background-color: var(--n-gray-500);} /* -- main swiper area */ .main_swiper_area {max-width: 960px; margin: 0 auto; padding: 0 2rem;} .main_swiper_area .swiper-container {padding-bottom: 3.6rem;} .main_swiper_area .swiper-slide {position: relative; margin:0; text-align: center; font-size: 20px;} .main_swiper_area .swiper-pagination-bullet {width: 1rem; height: 1rem; margin: 0 1rem;} .main_swiper_area .swiper-pagination-bullet-active {width: 3.5rem;} .main_swiper_area .swiper-button-next, .main_swiper_area .swiper-button-prev {width: auto; height: 2.4rem;} .main_swiper_area .swiper-button-next:after, .main_swiper_area .swiper-button-prev:after {font-size: 2.4rem;} .main_swiper_area .swiper-button-prev, .main_swiper_area .swiper-rtl .swiper-button-next {left: 0;} .main_swiper_area .swiper-button-next, .main_swiper_area .swiper-rtl .swiper-button-prev {right: 0;} .main_swiper_area .swiper-pagination-progressbar {width: 15%;} .main_product_list .main_swiper_area .swiper-container {padding-bottom: 0; overflow: hidden;} .main_product_list .main_swiper_area .swiper-slide {text-align: left;} .main_product_list .swiper-pagination {display: none;} .main_event_area .swiper-slide {margin-right: 24px; opacity: .5; transition: all .5s;} .main_event_area .swiper-slide-active, .main_event_area .swiper-slide-active + .swiper-slide, .main_event_area .swiper-slide-active + .swiper-slide + .swiper-slide {opacity: 1;} .main_event_area .main_swiper_area .swiper-button-next, .main_event_area .main_swiper_area .swiper-button-prev {display: flex; width: 5.6rem; height: 5.6rem; border: 1px solid var(--n-gray-300); border-radius: 10rem; transform: translateY(-32px);} .main_event_area .main_swiper_area .swiper-button-next {right: -2.8rem; background: url(../svg/caret-right.svg) no-repeat center/32px #fff;} .main_event_area .main_swiper_area .swiper-button-prev {left: -2.8rem; background: url(../svg/caret-left.svg) no-repeat center/32px #fff;} .main_event_area .main_swiper_area .swiper-button-next::after, .main_event_area .main_swiper_area .swiper-button-prev::after {display: none;} .main_review_area .main_swiper_area {width: 100%;} .main_review_area .main_swiper_area .swiper-container {padding-top: 3rem; padding-bottom: 6rem; overflow: hidden;} .main_review_area .main_swiper_area .swiper-slide {width: 33.33333%;} /*** E. Sub ***/ /* -- common */ .page_title {padding: 1rem 0; margin-bottom: 4rem;} .alert_wrap > * {font-size: 1.6rem;} .alert_img {padding: 1.6rem 0 1rem 0;} .alert_img span {width: 3.6rem; height: 3.6rem;} /* document */ .doc_wrap {} .doc_head {margin-bottom: 48px; padding-top: 50px;} .doc_head h2 {font-size: 20pt; margin-bottom: 0;} .doc_head_logo {height: 25px;} .doc_content {font-size: 11pt;} .doc_content + .doc_content {margin-top: 40px;} .doc_content .title {padding-bottom: 10px; font-size: 13pt;} .doc_content .table_board.type2 {font-size: 11pt;} .doc_content .table_board.type2 th, .doc_content .table_board.type2 td {padding: 10px; font-size: 1.4rem;} .doc_content .flex_row {margin: 0 -20px;} .doc_content .flex_row > * {padding: 0 20px;} .doc_content .price_list {font-size: 11pt;} .doc_content .price_list li + li {padding-top: 10px;} .doc_content .price_list li.depth {font-size: 10.5pt;} .doc_content .doc_price_area.total .price_list {font-size: 13pt;} .doc_notice {font-size: 9.75pt; padding-top: 8px;} .doc_notice .box {padding: 14px ;} .doc_notice .box .title {font-size: 9.75pt;} .doc_seal {padding-top: 24px;} .doc_seal p {font-size: 11pt;} .doc_seal .seal {margin-top: 24px; font-size: 16pt;} .doc_seal .seal img {width: 55px;} /* -- accordion style */ .acc_wrap .acc_header {font-size: 1.6rem;} .acc_wrap .acc_header .acc_header_link::after {right: 2.4rem; width: 1.5rem; height: 1.5rem;} .acc_wrap .acc_header.active .acc_header_link::after {right: 2.4rem; width: 1.5rem; height: 1.5rem;} /* type2 */ .acc_wrap.type2 .acc_header .acc_header_link {width: 1.5rem; height: 1.5rem;} /* -- board list */ .list_title button {font-size: 1.6rem;} .board_list {margin-top: 2.4rem;} .board_list li {padding: 2rem 2.4rem;} .board_list li .title, .board_list li .title a {font-size: 1.8rem;} .board_list li .title.ico {padding-right: 2rem;} .board_list li .title.ico::after {width: 1.6rem; height: 1.6rem;} .board_list li .detail_list li {font-size: 1.5rem;} .board_list li .detail_list li + li {padding-left: 1.2rem; margin-left: 1.2rem;} .board_list li.tb {flex-direction: row; align-items: center;} /* -- card list */ .card_list_wrap {padding-top: 2.4rem;} .card_list_item {font-size: 1.6rem;} .card_link {padding: 2.4rem; border-radius: 2rem; font-size: 1.6rem;} /* -- price list */ .price_list {font-size: 1.6rem;} .price_list li.depth {font-size: 1.4rem;} .price_list li.total {margin-top: 1.6rem; border-top: 1px solid #e6e6e6;} /* -- thumb card */ .thumb_list_item {width: 33.33333333%;} .thumb_card_link {margin-bottom: 2.4rem; border-radius: 2rem;} .thumb_card_img {height: 200px; margin-bottom: 1rem; border-radius: 2rem;} .thumb_card_img.event {border-radius: 2rem 2rem 0 0;} .thumb_card_desc {padding: 2rem; font-size: 1.4rem;} .thumb_card_desc .title {margin-bottom: .5rem; font-size: 1.8rem;} /* -- tab */ .tab_box {margin-bottom: 3.2rem} .tab_box_link {padding: 2rem 0; font-size: 1.6rem;} /* .tab_box_list_t2 {gap: 10px 0;} */ .tab_box_list_t3 {} .tab_box_list_t3 li {margin-right: 1.6rem;} .tab_box_list_t3 .tab_box_link {font-size: 1.8rem;} .tab_box_oval {margin-bottom: 4rem;} .tab_box_oval .tab_list {gap: 1.6rem;} .tab_box_oval .tab_link {height: 4.5rem; line-height: 4.5rem; padding: 0 1.6rem; font-size: 1.6rem;} .sub_tab_list li {margin-right: 1rem;} .sub_tab_link {font-size: 1.6rem;} .tab_line_list_t2 {gap: 1rem 2.4rem; padding-bottom: 3.2rem;} .tab_line_list_t2 .tab_line_link {font-size: 1.8rem;} .tab_login {} .tab_login_list {} .tab_login_link {font-size: 1.6rem;} /* -- search */ .search_wrap {padding: 2rem 0;} /* -- product layout */ .card_list.phone_list .card_list_item {padding: 2.4rem 2rem; border-radius: 2rem;} .card_list.phone_list .img_wrap {width: 40%; min-width: 40%; max-height: 20rem;} .card_list.phone_list .content_group {margin-left: 2rem;} .card_list.phone_list .badge {font-size: 1.2rem;} .card_list.phone_list .title {font-size: 1.8rem;} .card_list.phone_list .price {margin-top: 0; font-size: 2.4rem;} .card_list.phone_list .detail {margin-bottom: 1rem; font-size: 1.4rem;} .product_select {padding-top: 4rem;} .product_select p {font-size: 1.6rem;} .product_select select {max-width: 8rem; min-width: 14.5rem; height: 45px; padding: 0 2.27rem 0 1.6rem; background-position: right 8% center;} .product_banner_area {padding-bottom: 5rem;} .product_banner_area .thumb_card_img {max-height: 380px; border-radius: 2rem;} .product_banner_area .swiper-pagination-bullet {width: .8rem; height: .8rem;} .product_search_acc .acc_item {padding: 2.4rem; border-radius: 1rem;} .product_search_acc .acc_header .acc_header_link {font-size: 2rem;} .product_search_acc .acc_header .acc_header_link::after { width: 2rem; height: 2rem;} .product_search_acc .acc_header.active .acc_header_link::after { width: 2rem; height: 2rem;} .product_search_acc .acc_content {margin-top: 3.2rem;} .items_search {padding: 0 2rem;} .items_search .items {flex-direction: row; align-items: center; gap: .5rem; padding-bottom: 2rem; margin-bottom: 2rem;} .items_search .items .title {min-width: 12rem; font-size: 1.6rem;} .items_search .items .input_group {margin-top: 0;} .items_search .btn_wrap { padding-top: 1rem;} .product_title_desc {font-size: 1.4rem; margin-top: 1rem;} .product_title .badge {font-size: 1.5rem;} .product_info_wrap {display: flex; flex-direction: row; margin-bottom: 6rem;} .product_img {width: 50%;} .product_detail {flex: 1 1 auto; padding-left: 4rem;} .product_photo_thumbs {display: block;} .product_photo .swiper-slide {height: 35rem;} .product_photo .swiper-slide img {width: 100%;} .product_color_select {gap: 0 1rem;} .product_color_select li {width: 4rem; height: 4rem;} .product_color_select input[type="radio"] + label {width: 3rem; height: 3rem;} .product_color_select input[type="radio"]:checked + label::before {width: 4rem; height: 4rem;} .product_rate_select {margin-bottom: 6rem;} .rate_select_box {padding: 2rem 2.4rem; border-radius: 1rem;} .rate_select_box .title {font-size: 1.6rem; -webkit-line-clamp: 1;} .rate_select_box .desc {font-size: 1.4rem;} .rate_select_box .price {font-size: 1.8rem;} /* -- rate layout */ .rate_list_wrap {padding-top: 2.4rem;} .product_select + .rate_list_wrap {padding-top: 1.6rem;} .card_list.rate_list .card_list_item {margin-bottom: 2.4rem;} .card_list.rate_list .card_rate_link {padding: 2.4rem;} .card_list.rate_list .content_group {flex-direction: row; margin-top: 2rem;} .card_list.rate_list .title {font-size: 2.2rem;} .card_list.rate_list .detail {margin-bottom: 0; font-size: 1.6rem;} .card_list.rate_list .desc li {padding-left: 2.4rem; margin-right: 1.6rem;} .card_list.rate_list .desc li:first-child {width: auto;} .card_list.rate_list .desc li::before {width: 2rem; height: 2rem;} .card_list.rate_list .detail .ref {font-size: 1.4rem;} .card_list.rate_list .price {flex-shrink: 0; font-size: 2.6rem; text-align: right;} .card_list.rate_list .price .ref {font-size: 1.4rem;} .rate_info_wrap {padding-top: 2rem; margin-bottom: 3.6rem;} .rate_info .header_sub .badge {font-size: 1.2rem; border-radius: .5rem;} .rate_info .telco {font-size: 1.2rem; border-radius: .5rem;} .rate_info .header {margin-bottom: 2rem; font-size: 2.6rem;} .rate_info .content {padding: 4rem; flex-direction: row; justify-content: space-between; border-radius: 2rem;} .rate_info .content .detail {padding-bottom: 0; margin-bottom: 0; border-bottom: 0; font-size: 1.6rem;} .rate_info .detail .desc {margin-bottom: 1.6rem; text-align: start;} .rate_info .detail .desc li:first-child {font-size: 2rem;} .rate_info .detail .desc li:last-child {padding-left: 1.6rem; margin-left: 1.6rem;} .rate_info .detail .desc .icon {width: 2rem; height: 2rem;} .rate_info .detail .ref {font-size: 1.4rem; text-align: start;} .rate_info .price {flex-direction: column; align-items: end; padding-bottom: 0;} .rate_info .price p {font-size: 2.6rem; text-align: right;} .rate_info .price .vat {font-size: 1.6rem; font-weight: 400;} .rate_info .price .ref {font-size: 1.4rem;} .rate_info .price button {max-width: 240px;} .rate_caption {margin-top: 2rem; padding: 2rem 4rem;} .rate_caption_list {display: flex; font-size: 1.4rem;} .rate_caption_list li {margin-bottom: 0;} .rate_caption_list li:not(:last-child) {margin-bottom: 0; padding-right: 4rem;} .rate_detail {margin-top: 6rem;} .rate_detail.type2 {padding: 2.4rem; border-radius: 2rem;} .rate_detail_depth {margin-bottom: 4rem;} .rate_detail_depth .title {margin-bottom: 1rem; font-size: 2rem;} .rate_detail_depth .desc {font-size: 1.6rem;} .rate_detail_depth .desc_list {padding-left: 3rem; font-size: 1.6rem;} .rate_detail_depth .desc_list li {margin-bottom: 1rem;} .rate_detail_depth .desc_list_depth {padding: 1rem 0 0 2rem; font-size: 1.3rem;} /* -- event */ .event_board {font-size: 1.6rem;} .event_board .board_head {padding: 2rem 0;} .event_board .board_head .title {font-size: 2rem;} .event_board .board_content {padding: 4rem 2rem;} /* .thumb_card_img.event {max-height: 190px;} */ /* -- review */ .review_list_item {padding: 2.4rem 0;} .review_list_header {gap: 2.4rem; margin-bottom: 1rem;} .review_list_header .title {font-size: 2.2rem;} .review_list_header .review_info {gap: 2rem; font-size: 1.5rem;} .review_list_header .grade {gap: 0 .6rem;} .review_list_header .grade_icon {width: 1.4rem; height: 1.4rem;} .review_list_content {display: flex; gap: 1.6rem;} .review_list_content .desc {width: 100%; margin-bottom: 0; font-size: 1.6rem;} .review_list_content .img_wrap {width: 30%; height: 180px;} .grade_btn_wrap {gap: 0 .6rem;} .grade_btn_wrap .grade_btn {width: 3.2rem; height: 3.2rem;} /* -- qna */ .qna_tab_wrap {padding-top: 5.6rem;} .qna_tab {display: flex;} .qna_tab_link {font-size: 1.6rem;} .qna_acc_wrap {margin-top: 2.4rem;} .qna_acc_wrap .acc_header {font-size: 1.6rem;} .qna_acc_wrap .acc_header_link {padding: 2.4rem 4rem 2.4rem 0;} .qna_acc_wrap .acc_header .acc_header_link::after {transform: translateY(-50%); right: 0; width: 2rem; height: 2rem;} .qna_acc_wrap .acc_header.active .acc_header_link::after {right: 0;} .qna_acc_wrap .acc_content {padding: 0 2.4rem 2.4rem 2.4rem;} .qna_acc_wrap .acc_content_inner {font-size: 1.6rem;} /* 부가서비스 항목*/ .qna_acc_wrap .addType {width:6rem; line-height: 2; margin-right: .8rem; font-size: 1.3rem;} /* -- notice */ .notice_wrap {padding-top: 5.6rem;} .notice_list_item {flex-direction: row; align-items: center; padding: 2.4rem 0; font-size: 1.8rem;} .notice_list_item .title {margin-bottom: 0; flex: 1;} .notice_list_item .date, .notice_list_item .event_date {font-size: 1.5rem;} .notice_list_item .no {display: block; padding-right: 2rem; color: var(--n-gray-600);} .notice_list_item .event_date {flex-direction: row; gap: 1.6rem;} .notice_board {font-size: 1.6rem;} .notice_board .board_head {padding: 2rem 0;} .notice_board .board_head .title {font-size: 2rem;} .board_head .date {font-size: 1.5rem;} .notice_board .board_content { padding: 4rem 2rem 6rem 2rem;} .board_page {font-size: 1.6rem;} .board_page .page_item {padding: 1.6rem 2.4rem;} .board_page .page_link {padding-left: 1.6rem;} /* 접수내역 리스트 */ .notice_list_item.order_item {padding: 2rem 1.6rem; padding-right: 0; font-size: 1.5rem;} .notice_list_item.order_item .title_status {font-size: 1.4rem;} .notice_list_item.order_item .text {flex-direction: row; gap: 1.6rem; font-size: 1.3rem;} .notice_list_item.order_item .btn_group {justify-content: flex-start;} .notice_list_item.order_item .btn_group > * {width: auto; max-width: 120px; min-width: 100px; } .notice_list_item.order_item .btn_group > .n_btn_xs {height: 3.5rem; font-size: 1.3rem;} .notice_list_item.order_item .btn_group > a.n_btn_xs {line-height: 3.5rem;} /* -- store list */ .store_list_item {padding: 2rem 2.4rem; font-size: 1.6rem;} .store_list_item .title {margin-bottom: 0; padding-right: 2rem; flex: 1;} .store_list_item .date {font-size: 1.4rem;} .store_map {height: 20rem; margin-bottom: 0;} .store_list {margin-top: 0;} .store_desc .ref {margin-top: .8rem;} /* .store_link .ref {margin-top: .8rem;} .store_card_link {padding: 2.4rem; min-height: 148px; font-size: 1.6rem; margin-bottom: 1.6rem;} .store_card_link .ref {font-size: 1.4rem;} */ /* -- online cs */ .agree_group {margin-top: 3.2rem;} .agree_box {font-size: 1.6rem; padding: 2.4rem; border-radius: 2rem;} /* -- form download */ .download_wrap .card_link .btn_wrap {margin-top: 1.6rem;} /* -- pagination */ .pagination {margin-top: 3.6rem;} .page_icon {width: 1.6rem; height: 1.6rem;} .page_prev {margin: 0 1rem;} .page_next {margin: 0 1rem;} .page_link {height: 2.8rem; line-height: 2.8rem; margin: 0 .5rem; font-size: 1.6rem;} /* -- apply change */ .applychg_tab .tab_box_link.check_self::before {content: ''; top: .8rem; right: .8rem; width: 1.2rem; height: 1.2rem;} /* -- contact */ .company_img_wrap {height: 25rem; margin-top: -56px;} /* -- prepaid */ .charge_wrap .guide_area {font-size: 1.6rem;} .charge_wrap .guide_area .guide_cardlist > * {margin-bottom: 2.4rem;} .charge_wrap .input_flex button, #smsAuth .input_flex button {min-width: 13rem;} /* -- mypage */ .my_info.joinInfo .header {padding: 3.2rem; border-radius: 2rem;} .my_info.joinInfo .header_top {flex-direction: row; align-items: center; margin-bottom: 2rem; font-size: 2rem;} .my_info.joinInfo .header_top .name {font-size: 2.4rem; color: var(--n-gray-900);} .my_info.joinInfo .header_top .apply_no {display: block; padding-top: 0; margin-top: 0; border-top: 0;} .my_info.joinInfo .header_bottom {padding: 2rem; font-size: 1.6rem;} .my_info.joinInfo .header_bottom ul {flex-direction: row;} .my_info.joinInfo .header_bottom ul li {display: list-item; width: 33.33333%; border-bottom: 0; border-right: 1px solid var(--n-gray-300); text-align: center;} .my_info.joinInfo .content_box ul li.btn_wrap {margin-top: auto;} .my_info.joinInfo .header_bottom ul li:last-child {border-right: 0;} .my_info.joinInfo .order_box {padding: 2.4rem;} .my_info.joinInfo .content_box {padding: 0 1.2rem; margin-bottom: 4.8rem;} .my_info.joinInfo .content_box .title_wrap {margin-bottom: 1.5rem;} .my_info.joinInfo .content_box .title_wrap h2 {margin-bottom: 0;} .my_info.joinInfo .content_box .title_wrap.type3 {flex-direction: row;} .my_info.joinInfo .content_box .title_wrap .ref {font-size: 1.4rem;} .my_info.joinInfo .content_box .title_wrap .amount_refresh {width: auto; font-size: 1.4rem;} .my_info.joinInfo .content_box .order_list li {padding: 1rem 1.6rem;} .my_info.joinInfo .content_box ul .title, .my_info.joinInfo .content_box ul .text {font-size: 1.5rem;} /* .my_info.joinInfo .content_box ul .rateplan {font-size: 2rem;} */ .my_info.joinInfo .content_box ul .btn_group .btn {min-height: 4rem; font-size: 1.4rem;} .my_info.joinInfo .content_box .box_guide .text {font-size: 1.6rem;} .my_info.joinInfo .content_box .amount_info {font-size: 1.6rem;} .my_info.joinInfo .content_box .amount_info .acc {font-size: 2rem;} .my_info.joinInfo .content_box .amount_info .ref {font-size: 1.3rem;} .my_info.joinInfo .charge_area {flex-direction: row;} .my_info.joinInfo .charge_area .total_info {height: 100%; padding-bottom: 0; margin-bottom: 0; padding-right: 1.2rem; margin-right: 1.2rem; border-bottom: 0; border-right: 1px solid #e6e6e6; font-size: 1.8rem;} .my_info.joinInfo .charge_area .total_info .amount {font-size: 3.2rem;} .my_info.joinInfo .charge_area .total_info .period {margin-top: 1rem; font-size: 1.4rem;} .my_info.joinInfo .charge_area .charge_info {margin-top: 0;} /*** F. Self ***/ .self_wrap .form_wrap {max-width: 960px; margin: 0 auto;} /* .self_wrap .order_list_wrap .form_wrap h2 {padding-bottom: 0; margin-bottom: 1.6rem;} */ .self_form_inner {padding: 0 2rem;} .self_wrap .form_group {margin-bottom: 2rem;} /* .self_wrap .form_group + .form_group {margin-top: 2rem;} */ .self_wrap .form_group .n_form_label {padding-top: 1rem; padding-bottom: 1rem;} /* .self_wrap .form_group .n_form_label + * */ .self_wrap .moveJoinArea .form_group .flex-fill {flex: 1 !important;} .self_wrap .form_group .n_form_label.w_auto {width: auto;} #areaTerms {} #areaTerms > div {padding: .8rem;} .form_wrap.newJoinArea, .form_wrap.moveJoinArea {width: 100%;} #hopeNumList, #hopeNumListArea {margin: 2rem 0;} #hopeNumList .n_form_label, #hopeNumListArea .n_form_label {width: 100%;} #esimPop .form_wrap {width: 100%; max-width: none;} #esimPop .form_group {flex-direction: column; align-items: start;} #esimPop .form_group .n_form_label + * {flex: none;} #esimPop .form_group input {width: 100%;} #inisisAuth .acc_group {padding: 1rem 1.6rem;} #inisisAuth .step_item .title {font-size: 1.4rem;} #inisisAuth .step_item .img_wrap img {width: 3rem; height: 3rem;} .self_copy_wrap {padding: 3rem 0 5rem 0;} .self_copy {font-size: 1.15rem;} .self_wrap .box_guide .text {padding: 1rem 0; font-size: 1.6rem;} /* -- step1 */ /* self call (가입 가능시간 안내) */ .self_call {font-size: 1.6rem;} .self_call .content {padding-left: 1.4rem;} .self_call .ref {font-size: 1.3rem;} /* 유심/esim 안내 버튼(임시) */ .self_wrap .guide_btn button {height: 3.5rem; font-size: 1.6rem;} .step1-activeInfo button {font-size: 1.6rem;} .step1-usimInfo, .step1-authInfo {padding: 2.4rem; border-radius: 2rem;} .step1-usimInfo .advice_item .img_wrap img {height: 5.6rem;} .step1-usimInfo .advice_item .flex_row {margin: 0 -.4rem;} .step1-usimInfo .advice_item .flex_row > * {padding: 0 .4rem;} .step1-usimInfo .advice_item .box {padding: 1.2rem;} /* -- price select */ .price_filter {top: 12.1rem; padding: 2rem 0;} .price_filter .swiper {width: 95%; max-width: 1040px; margin: 0 auto;} .price_filter button, .price_filter_popup button {font-size: 1.6rem;} .self_wrap .price_sticky_wrap {top: 9rem;} .body_wrap_agent.self_wrap .price_sticky_wrap {top: 0;} .card_price_list {border-radius: 2rem;} .card_price_list + .card_price_list {margin-top: 2.4rem;} .card_price_list label {padding: 3.2rem; border-radius: 2rem; font-size: 1.6rem;} .card_price_list .head {margin-bottom: 0; font-size: 1.8rem;} .card_price_list .content_group {flex-direction: row; margin-top: 2rem;} .card_price_list .detail {margin-bottom: 0; font-size: 1.6rem;} .card_price_list .detail .ref {font-size: 1.4rem;} .card_price_list .price {flex-shrink: 0; font-size: 2.4rem;} .card_price_list .price .ref {font-size: 1.4rem;} /* -- order list */ .order_list_wrap h1 {margin-bottom: 5.6rem;} /* .order_list_wrap h2 {margin-bottom: 1.6rem;} */ .order_box {padding: 2.4rem;} .order_list li + li {padding-top: 2.4rem;} .order_list .title {font-size: 1.6rem;} .order_list .text {font-size: 1.6rem;} .order_list .text_flex {align-items: center; gap: 1rem;} .order_list .text button {height: 3.5rem; line-height: 3.5rem;} /* -- applyComplArea */ .applyComplArea {} .applyComplArea .img_wrap {margin-bottom: 2.4rem;} .applyComplArea .img_wrap img {width: 8rem;} .applyComplArea h2 {margin-bottom: 3.2rem; font-size: 2.2rem;} .applyComplArea .box_guide {} .applyComplArea .box_guide .text_group_ref {font-size: 1.5rem;} /*** G. Components ***/ /* -- form */ .form_wrap + .form_wrap {margin-top: 6.4rem;} .form_group {margin-bottom: 3.2rem;} .input_group input[type="email"] {padding-right: 8rem;} .input_flex button {height: 4.8rem; padding: 0 2rem;} .form_notice {margin-top: 1.5rem; font-size: 1.4rem;} .n_form_label {font-size: 1.6rem;} .n_check_label {font-size: 1.6rem;} .form_check_icon .n_check_label {padding-left: 3rem;} .form_check_icon input[type="checkbox"] + label span {width: 30px; height: 30px;} /* -- list */ .list li + li {margin-top: 1rem;} .list_dot li + li {margin-top: 1rem;} .list_ico li + li {margin-top: 1rem;} .select_list li {font-size: 1.4rem;} .select_list li a {font-size: 1.3rem;} .select_list li a .img_wrap {width: 6rem; height: 6rem;} .select_list li a span {margin-top: .8rem;} /* -- table */ .table_board {font-size: 1.6rem;} .table_board tr {grid-template-columns: 240px 1fr;} .table_board th {padding-top: 2.8rem; font-size: 1.8rem;} .table_board td { padding: 2.4rem 0; line-height: 1.85;} .table_board .form_group {margin-bottom: 1.6rem;} /* -- box */ .box {border-radius: 2rem;} .box_title {font-size: 1.6rem;} .box_outline {padding: 2.4rem;} .box_outline_title {padding-top: 1rem; font-size: 1.6rem;} .box_outline_text {padding-top: 1rem; font-size: 1.4rem;} .box_outline_icon img {width: 5.6rem;} .box_form {padding: 2.4rem 2rem;} .box_form .inner {justify-content: center; gap: 2.4rem; width: 100%; padding: 0 4rem;} .box_form .inner .img_wrap {width: 50%; max-width: unset;} .box_form .inner .img_wrap + div {width: 50%;} .box_form img {width: 100%;} .box_form .title {padding-bottom: 1.6rem; font-size: 1.4rem; font-weight: 700; color: var(--n-primary);} .box_guide + .form_wrap {margin-top: 3.2rem;} .box_form .btn_group {background-color: transparent;} .self_wrap .box_form .form_group + .form_group {margin-top: 0;} .box_cardlist {padding-top: 2.4rem;} .box_cardlist .inner {width: 95%; max-width: 1040px; padding-bottom: 15rem; margin: 0 auto;} .box_list {padding: 2.4rem;} .box_list .form-check {padding: 1rem 1.5rem;} .box_guide > .title {padding-bottom: 1.6rem; font-size: 1.6rem;} .box_guide > .text {padding: 1rem 0; font-size: 1.6rem;} .box_guide .text_group_title {font-size: 2rem; margin-bottom: 2rem;} .box_guide .text_group_ref {font-size: 1.6rem;} .box_green {padding: 2.4rem;} .box_green .title {font-size: 1.8rem;} .box_light {padding: 2.4rem;} .box_light .title {font-size: 1.8rem;} /* -- button */ button {padding: 0 1rem; border-radius: 1rem;} .btn_wrap {margin-top: 6rem;} .btn_group {padding: 2rem 0;} /* .n_btn_lg {height: 6rem;} a.n_btn_lg {line-height: 6rem;} .n_btn_m {height: 5.6rem;} a.n_btn_m {line-height: 5.6rem;} .n_btn_s {height: 4.8rem;} a.n_btn_s {line-height: 4.8rem;} */ .n_btn_xs {height: 4rem; padding: 0 1.6rem;} a.n_btn_xs {line-height: 4rem;} .n_btn_auto {font-size: 1.4rem; height: 3.5rem;} a.n_btn_auto {line-height: 3.5rem;} .n_btn_lg.w340 {max-width: 340px;} .n_btn_lg.w260 {max-width: 260px;} .btn_underline {height: auto; font-size: 1.5rem;} .btn_text_primary {right: 16px; font-size: 1.6rem;} .btn_kakao {padding: 1.6rem 2.4rem; font-size: 1.6rem;} .btn_link_ico {font-size: 1.6rem;} .btn_link_ico::after {width: 1.4rem; height: 1.4rem;} .select_btn, .select_btn_t2 {font-size: 1.6rem; border-radius: 1rem;} .btn_down {height: 3.5rem; font-size: 1.6rem;} a.btn_down {line-height: 3.5rem;} .body_wrap_popup .fixed-bottom .btn_group, .body_wrap_popup_t2 .fixed-bottom .btn_group {padding: 1rem 0;} .body_wrap_popup .fixed-bottom .n_btn_lg, .body_wrap_popup_t2 .fixed-bottom .n_btn_lg {height: 6rem;} .body_wrap_popup .fixed-bottom a.n_btn_lg, .body_wrap_popup_t2 .fixed-bottom a.n_btn_lg {line-height: 6rem;} /* -- board */ .board {font-size: 1.6rem;} .modal_board {} .modal_board .board_content {padding-bottom: 4rem;} .modal_board .title {padding-bottom: 0; font-size: 1.8rem;} .modal_board .content {margin-top: 1.5rem; font-size: 1.6rem;} /* -- space */ .pb_fixbtn {padding-bottom: 11rem;} /* -- modal */ .modal-content {border-radius: 2rem;} .modal-title {font-size: 2.2rem;} .modal_text li {font-size: 1.6rem;} /* -- text */ h1 {font-size: 3.2rem;} h2 {font-size: 2.4rem; margin-bottom: 1.6rem;} .breadcrumb {font-size: 1.6rem;} .text_lg_size {font-size: 1.8rem;} .text_default_size {font-size: 1.6rem;} .text_md_size {font-size: 1.5rem;} .text_sm_size {font-size: 1.3rem;} .text_info {font-size: 1.5rem;} /* -- step */ .step {flex-direction: row;} .step_item + .step_item::before {top: 50%; left: -3rem; transform: translateY(-50%); width: 1.4rem; height: 1.4rem; background: url(../svg/chevron-right.svg) center/100% no-repeat;} .step_item .img_wrap img {width: 5rem; height: 5rem;} .step_item .title {font-size: 1.6rem;} /* -- advice */ .advice {gap: 4rem;} .advice_item {gap: 2.4rem; font-size: 1.6rem;} .advice_item .img_wrap {flex-basis: 5.6rem; min-width: 5.6rem; height: 5.6rem;} .advice_item .img_wrap img {width: 5.6rem; height: 5.6rem;} .advice_item .title {font-size: 1.6rem;} .advice_item .desc {margin-top: .5rem;} /* -- swiper */ .filter input[type="text"], .filter input[type="date"], .filter select.form-select {height: auto; padding: .5rem .8rem; font-size: 1.4rem;} } @media screen and (min-width: 1200px) { /*------------------------------------------- -- large desktop (1200px~) -------------------------------------------*/ /*** B. Layout ***/ /* -- container*/ .container { max-width: 1140px; } /*** D. Main ***/ /* -- main banner */ .main_banner {height: 400px;} .main_banner .swiper-pagination {max-width: 1064px;} /* -- main swiper area */ .main_swiper_area {max-width: 1140px;} .main_swiper_area .swiper-button-next, .main_swiper_area .swiper-button-prev {width: auto; height: 3rem;} .main_swiper_area .swiper-button-next:after, .main_swiper_area .swiper-button-prev:after {font-size: 3rem;} /* -- main evnet area */ /* .main_event_area .thumb_card_img.event {max-height: 300px;} */ /* -- main cs area */ .call_cs_content {align-items: center;} .call_cs_content .cs_desc {flex-direction: row; align-items: center; gap: 2.4rem;} /*** E. Sub ***/ /** -- event */ /* .thumb_card_img.event {max-height : 220px;} */ } @media screen and (min-width: 1440px) { /*------------------------------------------- -- xLarge desktop (1440px~) -------------------------------------------*/ /*** B. Layout ***/ /* -- container*/ .container { max-width: 1200px; } /*** D. Main ***/ /* -- main swiper area */ .main_swiper_area { max-width: 1200px; padding: 0; } } /*********************************************************************************************************************** J. Print ***********************************************************************************************************************/ @media print { @page { margin: 0; size: A4; } /* -- print default */ * { box-sizing: border-box; -moz-box-sizing: border-box; } html, body { width: 210mm; height: 297mm; background: #fff; } body { width: 100%; height: 100%; background: #fff; color: #000; font-size: 8pt; line-height: 150%; margin: 0; padding: 0; font-family: "Noto Sans KR", "Pretendard", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif } hr { color: #ccc; background-color: #ccc; } h1, h2, h3, h4, h5, h6, code, pre { color: #000; text-transform: none; /* because sometimes I set all-caps */ } h1 { font-size: 11pt; margin-top: 1em; } h2 { font-size: 10pt; } h3 { font-size: 9pt; } h4, h5, h6 { font-size: 8pt; } code, pre { font-size: 8pt; background-color: transparent; /* just in case the user configured browser to print backgrounds */ } a { text-decoration: underline; color: #000; } /* -- print document */ header, .fixed-bottom, .noPrintArea {display: none;} .onlyPrintArea {display: block;} .body_wrap_popup, .body_wrap_popup_t2 {padding: 0;} .container {max-width: unset; padding: 0;} .doc_wrap { width: 210mm; min-height: 297mm; padding: 20mm; /* margin: 10mm auto; */ } .doc_head {padding-top: 0;} .doc_head_logo {height: 20px; top: 40px; right: 20mm;} .doc_content .price_list li.depth {color: var(--n-gray-800);} .doc_notice {color: var(--n-gray-500); line-height: 150%;} .doc_notice > * {font-weight: 300;} .doc_notice .box .title {padding-bottom: 2px; font-weight: 500; color: var(--n-gray-500);} .doc_notice .list li + li {margin-top: 0;} /* #confirmDoc {padding: 60px;} #confirmDoc .doc_head_logo {top: 60px; right: 60px;} */ #confirmDoc .doc_info {padding-top: 40px;} #confirmDoc .doc_content:last-child {padding-bottom: 40px;} #confirmDoc .doc_content .table_board.type2 th, #confirmDoc .doc_content .table_board.type2 td {padding: 20px;} #confirmDoc .doc_notice {padding-top: 24px; font-size: 9.25pt;} #confirmDoc .doc_notice .box .title {font-size: 9.25pt;} #confirmDoc .doc_seal {padding-top: 80px;} #confirmDoc .doc_seal .seal {margin-top: 40px;} }