/*---------------------------------------------------------------------------------------------------------------------- [ WIDE ] A. Default B. Layout C. Login D. Main E. Sub F. Self G. Components H. etc I. Media Query ----------------------------------------------------------------------------------------------------------------------*/ :root { /* color */ --n-primary: #3D62AC; /* JOYTEL main color */ --n-primary-hover: #395494; --n-primary-dark: #222E49; --n-primary-light: #E2ECF7; --n-primary-shadow: rgba(61, 98, 172, 0.3); --n-secondary: #5E92D3; --n-border: var(--n-gray-200); --n-lightGreen: rgba(36, 150, 181, 0.04); --n-lightPink: #FFF6FB; --n-lightPurple: #f3f4fb; --n-lightBlue: #f9fafc; /* color :: gray */ /* --n-gray-50: #F8FAFC; */ --n-gray-50: #F7F9FB; --n-gray-100: #F1F5F9; --n-gray-200: #E2E8F0; /* border color */ --n-gray-300: #CBD5E1; --n-gray-400: #94A3B8; /* disabled */ --n-gray-500: #64748B; /* light */ --n-gray-600: #475569; --n-gray-700: #334155; /* normal */ --n-gray-800: #1E293B; --n-gray-900: #0F172A; /* dark */ /* color :: filter */ --n-filter-primary: brightness(0) saturate(100%) invert(33%) sepia(85%) saturate(1028%) hue-rotate(197deg) brightness(80%) contrast(75%); --n-filter-gray4: brightness(0) saturate(100%) invert(65%) sepia(17%) saturate(348%) hue-rotate(176deg) brightness(96%) contrast(88%); --n-filter-gray5: brightness(0) saturate(100%) invert(52%) sepia(4%) saturate(2238%) hue-rotate(176deg) brightness(83%) contrast(84%); --n-filter-gray6: brightness(0) saturate(100%) invert(33%) sepia(7%) saturate(1699%) hue-rotate(176deg) brightness(93%) contrast(89%); --n-filter-gray7: brightness(0) saturate(100%) invert(24%) sepia(10%) saturate(1421%) hue-rotate(176deg) brightness(95%) contrast(95%); --n-filter-gray9: brightness(0) saturate(100%) invert(8%) sepia(28%) saturate(1291%) hue-rotate(185deg) brightness(97%) contrast(98%); --n-filter-white: brightness(0) saturate(100%) invert(100%) sepia(1%) saturate(0%) hue-rotate(20deg) brightness(105%) contrast(101%); --n-filter-disabled: brightness(0) saturate(100%) invert(95%) sepia(1%) saturate(4783%) hue-rotate(182deg) brightness(94%) contrast(87%); --n-filter-yellow: brightness(0) saturate(100%) invert(78%) sepia(21%) saturate(2247%) hue-rotate(331deg) brightness(118%) contrast(101%); --n-filter-red: brightness(0) saturate(100%) invert(45%) sepia(24%) saturate(3820%) hue-rotate(337deg) brightness(110%) contrast(101%);; /* border-radius */ --border-radius-s: 1.2rem; --border-radius-d: 1.6rem; --border-radius-lg: 2rem; } /*********************************************************************************************************************** A. Default ***********************************************************************************************************************/ * {line-height: 150%; letter-spacing: -.08px;} 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: .4rem;} button:disabled, button:disabled:hover {background-color: var(--n-gray-400);} .n_btn_outline_primary:disabled, .n_btn_outline_primary:disabled:hover, .n_btn_outline_gray:disabled, .n_btn_outline_gray:disabled:hover, .n_btn_outline_dark:disabled, .n_btn_outline_dark:disabled:hover {background-color: #fff;} /* input custom */ input[type="text"], input[type="password"], input[type="number"],input[type="date"], input[type="email"], textarea, select.form-select, .form-control {width: 100%; padding: 1.6rem 2rem; font-size: 1.5rem; color: var(--n-gray-700); border: 1px solid var(--n-border); border-radius: var(--border-radius-s); line-height: 125%;} textarea {height: auto; line-height: 150%;} select.form-select {padding-right: 4rem;} input:focus, textarea:focus, select.form-select:focus, .form-control:focus {border-color: var(--n-primary); box-shadow: none; outline: 0;} .form-select {line-height: normal; background-position: right 1.4rem center;} input[type="text"]::placeholder, input[type="password"]::placeholder,input[type="number"]::placeholder, input[type="date"]::placeholder, input[type="email"]::placeholder, textarea::placeholder, .form-control::placeholder {color: var(--n-gray-400)} input[readonly], textarea[radonly] {color: var(--n-gray-700); background-color: var(--n-gray-200); pointer-events: none;} input:disabled, select:disabled, .form-control:disabled, .form-select:disabled {color: var(--n-gray-500); background-color: var(--n-gray-200); pointer-events: none;} input[type="radio"]:disabled + label, input[type="checkbox"]:disabled + label {color: var(--n-gray-500);} 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 var(--n-primary-shadow); -webkit-box-shadow: 0 0 0 1000px white inset, 0 0 0 0.25rem var(--n-primary-shadow);} 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-300); -webkit-box-shadow: 0 0 0 1000px var(--n-gray-200) inset; pointer-events: none;} /* checkbox, radio custom */ input[type="checkbox"], input[type="radio"] {position: relative; top: 2px; width: 2rem; height: 2rem; margin-right: .25rem; border: 1px solid var(--n-border); border-radius: .4rem; vertical-align: top; appearance: none; -moz-appearance: none; -webkit-appearance: none; background-repeat: no-repeat; background-position: center; background-size: contain;} input[type="radio"] {border-radius: 999px;} input:checked[type="checkbox"] {border-color: var(--n-primary); background-color: var(--n-primary); background-image: url(../svg/checkbox-check.svg)} input:checked[type="radio"] {border-color: var(--n-primary); background-color: var(--n-primary); background-image: url(../svg/radio-check.svg);} 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 Variable; white-space: pre-wrap;} /*********************************************************************************************************************** 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_wrap {background-color: #fff; border-bottom: 1px solid var(--n-gray-200);} .header_content {padding: 1.4rem 0;} .header_popup .header_content {height: 6rem;} .header .logo img {max-height: 3.2rem;} .header .logo, .header .icons_item, .header_popup .logo, .header_popup .icons_item {display: inline-block;} .header_content .icons_item {padding: 0; margin: 0; margin-left: 1.6rem; background-color: transparent;} .header_content .icons_item img {width: 2.4rem; height: auto; filter: var(--n-filter-gray5);} /* .header_content .icons_item_btn {height: 3rem; padding: 0 1.5rem; margin-left: 1rem; font-size: 1.2rem; vertical-align: middle;} */ .header_content .btn_login {padding: .8rem 1rem; border-radius: .8rem; font-size: 1.5rem;} /* pc - 상단 유틸 */ .header_top {padding-top: 2rem; background-color: #fff; display: none;} .header_top .brand_list {display: flex; justify-content: end;} .header_top .brand_list li + li a {margin-left: 1rem; padding-left: 1rem; border-left: 1px solid var(--n-gray-200);} .header_top .brand_list img {height: 1.2rem;} /* 모바일, pc - 가림처리 */ .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;} /* 팝업 헤더 */ .header_popup .head {font-size: 1.8rem; font-weight: 600; color: var(--n-gray-900);} /*------------------------------------------- -- sub header(셀프개통 단계) -------------------------------------------*/ .sub_header {display: flex; flex-direction: row-reverse; justify-content: space-between; align-items: center; gap: 1.2rem; top: 6rem; width: 100%; padding: 1.6rem 0; margin: 0 auto; margin-bottom: 2.4rem; text-align: center; background-color: #fff;} .body_wrap_agent .sub_header {top: 0;} .sub_header .title_wrap {display: flex; justify-content: end; align-items: center;} .sub_header .title {display: none; font-size: 1.6rem; font-weight: 600; color: var(--n-gray-500);} .sub_header .title_wrap .label {display: flex; align-items: center; gap: .4rem; font-size: 1.6rem; font-weight: 600; color: var(--n-gray-500);} .sub_header .title_wrap .label span {font-weight: 500; color: var(--n-primary);} .sub_header_step {counter-reset: section; display: flex; align-items: center; gap: .6rem;} .sub_header_step li {counter-increment: section; position: relative; display: inline-flex; justify-content: center; align-items: center; width: .6rem; height: .6rem; border-radius: 999px; background-color: var(--n-primary);} .sub_header_step li.on {width: 2rem; height: 2rem; } .sub_header_step li.on::after {content: counter(section); font-size: 1.4rem; font-weight: 500; color: #fff;} .sub_header_step li.on ~ li {background-color: var(--n-gray-300);} /*------------------------------------------- -- fullmenu new (모바일 전체메뉴) -------------------------------------------*/ /* fullmenu - header */ .full_menu_modal .sign {display: inline-flex; align-items: center; gap: .8rem;} .full_menu_modal .sign .title {font-size: 1.8rem; font-weight: 600; color: var(--n-gray-900); text-decoration: underline;} .full_menu_modal .sign .btn_sign {font-size: 1.4rem; font-weight: 400; color: var(--n-gray-500);} /* fullmenu - body */ .full_menu_modal .modal-body {padding: 0;} .full_menu_modal .menu_list {} .full_menu_modal .menu_list > li {padding: 0 2rem; border-bottom: 1px solid var(--n-gray-200);} .full_menu_modal .menu_list .title {position: relative; display: inline-block; width: 100%; padding: 2rem 0; font-size: 1.5rem; font-weight: 600; color: var(--n-gray-900);} .full_menu_modal .sub_list {padding-bottom: 1.2rem;} .full_menu_modal .sub_list > li {} .full_menu_modal .sub_list > li > a {display: inline-block; padding: .8rem 0; font-size: 1.4rem; color: var(--n-gray-700);} /*------------------------------------------- -- 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: #fff;} .full_menu_header .icons {display: flex; justify-content: end; align-items: center; justify-content: end; height: 100%;} .full_menu_body {height: 100%; padding-top: 5rem;} /* fullmenu - top */ .full_menu_sign {padding: 2rem 0; border-bottom: 10px solid var(--n-cgray-100);} .full_menu_sign .title {font-size: 1.8rem; font-weight: 700; color: var(--n-gray-900); margin-bottom: 1.2rem;} .full_menu_sign .btn_sign {position: relative;} /* fullmenu - submenu(tab) */ .full_menu_body .submenu_list {gap: 0; margin-top: 1.6rem; 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 .sub_tab_link {display: inline-block; width: 100%; padding: 0; border: 0; border-radius: 0; font-size: 1.4rem; background-color: transparent; color: var(--n-cgray-700);} .full_menu_body .sub_tab_list .sub_tab_link:hover {color: var(--n-cgray-700); background-color: transparent;} /* fullmenu - body */ .full_menu_content {padding: 3.2rem 0 6rem 0;} .full_menu_body .menu_list li + li {margin-top: 4rem;} .full_menu_body .menu_list li a {position: relative; font-size: 1.9rem; font-weight: 600; color: var(--n-gray-900);} .full_menu_body .menu_list li .sub_list {display: flex; flex-wrap: wrap; gap: 1.6rem 0; margin-top: 1.6rem; list-style: none;} .full_menu_body .menu_list li .sub_list li {width: 50%;} .full_menu_body .menu_list li .sub_list li + li {margin-top: 0;} .full_menu_body .menu_list li .sub_list li a {font-size: 1.5rem; font-weight: 400; color: var(--n-gray-600);} /*------------------------------------------- -- body -------------------------------------------*/ .body_wrap, .body_wrap_popup, .body_wrap_popup_t2 {height: auto; padding-top: calc(6rem + 4rem);} .body_wrap_popup_t2 {padding-bottom: 8.6rem;} .body_wrap_agent {padding-top: 4rem;} .sub_wrap {max-width: 588px; margin: 0 auto;} /*------------------------------------------- -- nav -------------------------------------------*/ /* pc */ .gnb_wrap {display: none;} .gnb {gap: 0 4rem; margin-right: 1.2rem;} .gnb li {position: relative; padding: 2.4rem 0; font-size: 1.7rem; font-weight: 600; line-height: normal; cursor: pointer;} .gnb li > a {display: inline; color: var(--n-gray-500); transition: all .3s;} .gnb li > a:hover {color: var(--n-gray-900);} .gnb li.on a {color: var(--n-gray-900);} /* snb */ .snb {position: absolute; top: 80%; left: 50%; transform: translateX(-50%); padding: 1.6rem 2.4rem; border-radius: 1.2rem; background-color: #fff; visibility: hidden; opacity: 0; box-shadow: 0 2px 12px 0 rgba(149, 157, 165, .2);} .snb li {padding: 1.2rem 0;} .snb li a {display: inline-block; width: 100%; font-size: 1.5rem; font-weight: 400; color: var(--n-gray-700); text-align: left; white-space: nowrap;} .snb li a:hover {color: var(--n-secondary);} .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 {display: flex; align-items: center; justify-content: right; margin-left: auto; text-align: right;} .submenu a {padding: .4rem 1.6rem; border-radius: 999px; font-size: 1.5rem; line-height: 160%;} .submenu a + a {margin-left: 1.2rem;} /*------------------------------------------- -- footer -------------------------------------------*/ footer {background-color: #fff; margin-top: 4rem; padding: 3.2rem 0 4rem 0; border-top: 1px solid var(--n-gray-100);} .main_content + footer {margin-top: 0;} .footer_top {position: relative;} footer .logo {width: 12rem; filter: var(--n-filter-gray4);} footer .family_info {display: inline-flex; flex-direction: column-reverse; gap: 2rem; width: 100%;} footer .family {position: relative; width: 100%;} footer .family .family_btn {position: relative; display: block; width: 100%; padding: 1.2rem 2rem; padding-right: 4rem; border: 1px solid var(--n-border); border-radius: var(--border-radius-s); font-size: 1.5rem; color: var(--n-gray-700); background-color: transparent; line-height: 125%; text-align: left;} footer .family .family_btn::after {content: ''; position: absolute; top: 50%; right: 2rem; transform: translateY(-50%); width: 1.6rem; height: 1.6rem; background-image: url(../svg/chevron-down.svg); background-repeat: no-repeat; background-position: center; background-size: 100%;} footer .family .family_btn.on::after {background-image: url(../svg/chevron-up.svg);} footer .family ul {position: absolute; bottom: 0; display: none; width: 100%; padding: .8rem 0; border: 1px solid var(--n-border); border-radius: var(--border-radius-s); background-color: #fff; opacity: 0; transition: all .3s;} footer .family ul li a {display: block; width: 100%; padding: .8rem 2rem; font-size: 1.4rem; color: var(--n-gray-700);} footer .family ul li a:hover {color: var(--n-gray-900); text-decoration: underline;} footer .family .family_btn.on + ul {display: block; bottom: 5.2rem; opacity: 1; z-index: 999;} footer .company_info {display: flex; flex-wrap: wrap; gap: .4rem 0; margin-top: 1.6rem; font-size: 1.2rem; color: var(--n-gray-500);} footer .company_info li {position: relative; display: inline-flex; flex-wrap: wrap; gap: .4rem 0; width: 100%;} footer .company_info li span {position: relative; display: inline-block; width: 100%;} footer .company_info li span + span::before {content: ''; position: absolute; top: 50%; left: 0; transform: translateY(-50%); display: none; width: 1px; height: 1rem; background-color: var(--n-gray-300);} footer .company_info li span.col {flex: unset; width: auto;} footer .company_info li span.col + .col {margin-left: 1rem; padding-left: 1rem;} footer .company_info li span.col + .col::before {display: block;} footer .company_info .copyright {margin-top: .8rem;} .footer_bottom {margin-top: 2.4rem;} footer .policy_list {gap: 1.6rem 2rem; font-size: 1.4rem;} footer .policy_list li a {color: var(--n-gray-700); font-weight: 500;} footer .policy_list li a.indv {color: var(--n-gray-900); font-weight: 700;} /*------------------------------------------- -- preview bottom -------------------------------------------*/ .preview_wrap {width: 100%; margin: 0 auto; border-radius: var(--border-radius-d) var(--border-radius-d) 0 0; background-color: #fff; box-shadow: 0 -2px 24px 0 rgba(149, 157, 165, .48);} .preview_wrap .container {display: flex; flex-direction: column-reverse; max-width: 737px;} .preview_header {display: inline-flex; align-items: center; padding: 2rem 0;} .preview_header .head_info {flex: 1;} .preview_header .head_info .head {font-size: 2rem; font-weight: 600; color: var(--n-gray-900);} .preview_header .head_info .ref {font-size: 1.3rem; color: var(--n-gray-500);} .preview_header .n_btn_icon {width: 2.4rem; height: 2.4rem; background-color: transparent; background-position: center center; background-size: 100%; background-repeat: no-repeat; filter: var(--n-filter-gray4);} .preview_header .n_btn_icon.open {background-image: url(../svg/chevron-up.svg);} .preview_header .n_btn_icon.close {background-image: url(../svg/chevron-down.svg);} .preview_body {padding-top: 2rem;} .preview_body .price_info {padding: 2rem; border: 1px solid var(--n-gray-200); border-radius: var(--border-radius-s);} .preview_body .price_info .title {margin-top: .8rem; font-size: 1.5rem; font-weight: 500; color: var(--n-gray-500);} .preview_body .price_info .info {margin-top: 1.2rem; text-align: end;} .preview_body .price_info .info .price {font-size: 2rem; font-weight: 700; color: var(--n-primary);} .preview_body .price_info .info .ref {font-size: 1.3rem; color: var(--n-gray-500);} .preview_body .order_info {padding: 2rem; margin-top: 1.2rem; border-radius: var(--border-radius-s); background-color: var(--n-gray-50);} /* 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.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.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 var(--n-gray-300);} .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, .board pre {font-size: 1.5rem; color: var(--n-gray-700);} .board .board_head {padding-bottom: 2rem; border-bottom: 1px solid var(--n-gray-200);} .board .board_head .title {font-size: 2rem; font-weight: 600; color: var(--n-gray-900);} .board .board_head .date {margin-top: .4rem; font-size: 1.3rem; color: var(--n-gray-500);} .board .board_content {padding: 2rem 0; line-height: 150%; overflow-x: auto;} .board .board_content img {max-width: 100%; height: auto; margin: 0 auto;} .board_page {font-size: 1.5rem; color: var(--n-gray-500); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} .board_page .page_item {display: flex; align-items: center; padding: 2rem; border-radius: var(--border-radius-s); background-color: var(--n-gray-50);} .board_page .page_item + .page_item {margin-top: .8rem;} .board_page .page_link {display: inline; padding: 0; padding-left: 1.2rem; margin: 0; font-size: 1.5rem; font-weight: 600; color: var(--n-gray-700);} .board_page .page_link:hover {color: var(--n-gray-700); text-decoration: underline;} .tab_board {} .tab_board .board_content {padding-bottom: 3rem;} .tab_board .title {font-size: 1.6rem; font-weight: 600; color: var(--n-gray-900);} .tab_board .content {margin-top: 2.4rem; font-size: 1.4rem; color: var(--n-gray-700); line-height: 1.65; word-break: keep-all;} .modal-body .board .board_content {padding: 0;} .modal_board {} .modal_board .board_content {padding-bottom: 3rem;} .modal_board .title {font-size: 1.6rem; font-weight: 600; 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 > p {line-height: 150%;} /*------------------------------------------- -- popup (main layer popup) -------------------------------------------*/ /** new **/ .main_pop_layer {width: calc(100% - 4rem); max-width: 504px; height: 100%; margin: 0 auto;} .main_pop_layer .modal-content {border: 0; background-color: transparent;} .main_pop_layer .pop_container {position: relative; height: 0; padding-top: 100%;} .main_pop_layer .pop_container > * {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%;} .main_pop_layer .pop_content {max-height: 504px; padding: 0; border-radius: 1.6rem 1.6rem 0 0; background-color: #fff; overflow: hidden;} .main_pop_layer .pop_content .pop_editor {overflow: auto;} .main_pop_layer .pop_content .pop_editor img {width: 100%; height: auto;} .main_pop_layer .pop_footer {display: flex; align-items: center; padding: 0; border-radius: 0 0 1.6rem 1.6rem; background-color: #fff;} .main_pop_layer .pop_footer .pop_close {flex: 1; padding: 2rem; margin: 0; font-size: 1.4rem; font-weight: 500; background-color: transparent; line-height: 125%;} .main_pop_layer .pop_footer .pop_close.v2 {font-weight: 400; color: var(--n-gray-500);} .main_pop_layer .swiper-pagination {bottom: 2rem !important; left: 50%; transform: translateX(-50%); width: auto;} /** new **/ /*------------------------------------------- -- flex -------------------------------------------*/ .flex_row {display: flex; flex-wrap: wrap; margin: 0 -.8rem; gap: 1.6rem 0;} .flex_row > * {padding: 0 .8rem;} .flex_row.small {margin: 0 -.4rem; gap: .8rem 0;} .flex_row.small > * {padding: 0 .4rem;} .self_wrap .form_wrap .row {margin: 0 -.4rem;} .self_wrap .form_wrap .row>* {padding: 0 .4rem;} .form_group .row {margin: 0 -.6rem;} .form_group .row>* {padding: 0 .6rem;} .flex_between {display: flex; justify-content: space-between; align-items: center;} /*********************************************************************************************************************** C. Login ***********************************************************************************************************************/ .login_wrap {width: 100%; padding: 5rem 0;} .login_either_wrap {max-width: 960px;} .login_wrap h1 {margin-bottom: 3.2rem;} .login_wrap .form_wrap {padding-bottom: 0;} .login_box input:not([type="hidden"]) + input {margin-top: 1.2rem;} .login_box .btn_wrap {margin-top: 3.2rem;} .login_bottom {padding-top: 3.2rem; margin-top: 3.2rem; border-top: 1px solid var(--n-gray-200);} /*********************************************************************************************************************** D. Main ***********************************************************************************************************************/ .main_content {display: flex; flex-direction: column; padding-top: 6rem;} .main_content section {overflow: hidden;} .main_title_area {position: relative; display: flex; flex-wrap: wrap; align-items: center; margin-bottom: 1.6rem;} .sec_title {flex: 1; margin-bottom: 0; font-size: 2rem; font-weight: 700; color: var(--n-gray-900); word-break: keep-all;} .main_title_area .btn_link_ico, .main_title_area .btn_link_ico:hover {color: var(--n-gray-500);} .main_title_area .btn_link_ico::after {filter: var(--n-filter-gray5);} .main_btn_wrap {width: 100%; margin-top: 2.4rem; text-align: center;} .main_btn_wrap .link_all {position: relative; display: inline-block; padding: 1rem; padding-right: calc(1rem + 1.6rem); font-size: 1.4rem; font-weight: 500; color: var(--n-cgray-500);} .main_btn_wrap .link_all::after {content: ""; position: absolute; top: 50%; right: 1rem; transform: translateY(-50%); display: block; width: 1.6rem; height: 1.6rem; background: url(../svg/chevron-right.svg) no-repeat center/100%; filter: var(--n-filter-gray5);} /*------------------------------------------- -- main top area -------------------------------------------*/ /* -- main banner (배너) */ .carousel_tablet, .carousel_pc, .for_tablet, .for_pc {display: none;} .main_banner {position: relative; display: flex; flex-direction: column;} .main_banner img {position: relative; left: 50%; transform: translateX(-50%); width: 100%; height: auto;} .main_banner .swiper_controller {display: none;} /*------------------------------------------- -- main service area -------------------------------------------*/ .main_service_area {padding: 3.2rem 0;} .main_service_area .inner {display: flex; flex-direction: column; gap: 2.4rem;} .main_service_area .usage_box {display: inline-flex; flex-wrap: wrap; padding: 2rem; border-radius: 1.6rem; box-shadow: 0 4px 12px 0 rgba(61, 98, 172, 0.2);} .main_service_area .usage_item_large, .main_service_area .usage_item_small {width: 100%;} .main_service_area .usage_item_large .title {margin-bottom: .8rem; font-size: 1.6rem; font-weight: 700; color: var(--n-gray-900); text-align: center;} .main_service_area .usage_box .usage_info {width: 100%;} .main_service_area .usage_box .usage_info .title {margin-bottom: .8rem; font-size: 1.6rem; font-weight: 700; color: var(--n-gray-900); text-align: center;} .main_service_area .usage_box .usage_info .desc {padding: 1.2rem; border-radius: .8rem; font-size: 1.4rem; color: var(--n-gray-700); background-color: var(--n-gray-100);} .main_service_area .usage_box .usage_info .desc .marquee {width: 100%; overflow: hidden;} .main_service_area .usage_box .usage_list {display: flex; align-items: center; width: 100%; margin-top: 2rem;} .main_service_area .usage_box .usage_list li {flex: 0 0 auto; width: 33.33333%; font-size: 1.3rem; text-align: center; color: var(--n-gray-500);} .main_service_area .usage_box .usage_list li span {display: inline-block; margin-top: .8rem; font-size: 1.6rem; font-weight: 700; color: var(--n-gray-900);} .main_service_area .usage_box .usage_list li + li {border-left: 1px solid var(--n-gray-200);} .main_service_area .service_group {display: flex; flex-wrap: wrap;} .main_service_area .service_group li {position: relative; width: 25%;} .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-900); text-align: center; word-break: keep-all;} .main_service_area .service_link .img_wrap {display: inline-flex; justify-content: center; align-items: center; width: 5.6rem; height: 5.6rem; border-radius: 1.2rem; background-color: var(--n-gray-100);} .main_service_area .service_link img {width: 3.6rem; height: auto;} .main_service_area .service_group .tooltip {position: absolute; top: -32px; left: 50%; transform: translateX(-50%); width: fit-content; padding: .4rem .6rem; border-radius: .8rem; font-size: 1.1rem; font-weight: 400; color: #fff; background-color: var(--n-gray-500); white-space: nowrap;} .main_service_area .service_group .tooltip::after {content: ''; position: absolute; bottom: -5px; left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-bottom-width: 0; border-top-color: var(--n-gray-500);} /*------------------------------------------- -- main product list -------------------------------------------*/ .main_product_list {padding: 5rem 0; background-color: #E2ECF7;} .main_product_list .tab_box_oval {margin-bottom: 1.2rem;} .main_product_list .tab_box_oval .tab_list {gap: 0;} .main_product_list .tab_box_oval .tab_link {color: var(--n-gray-500); background-color: var(--n-gray-300);} .main_product_list .tab_box_oval .tab_link:hover {color: var(--n-gray-600);} .main_product_list .tab_box_oval .tab_link.on {background-color: var(--n-gray-600); color: #fff;} /** rate list */ .rate_card_list {} .rate_card_item {width: 100%;} .rate_card {display: flex; flex-wrap: wrap; gap: 1.6rem; width: 100%; height: 100%; padding: 2.4rem; border-radius: var(--border-radius-d); background-color: #fff; box-shadow: 0 4px 12px 0 rgba(61, 98, 172, 0.30); transition: all .3s;} .rate_card:hover {box-shadow: 0 4px 12px 0 rgba(61, 98, 172, 0.6);} /* rate card :: title */ .rate_card_title {width: 100%; font-size: 1.4rem; font-weight: 500; color: var(--n-gray-700); line-height: normal; word-break: keep-all;} .rate_card_title .title_label {margin-bottom: .8rem;} .rate_card_title p {text-overflow: ellipsis; overflow: hidden; word-break: keep-all; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;} /* rate card :: info */ .rate_card_info {display: flex; flex-wrap: wrap; gap: .4rem 0; width: 100%; margin-top: auto;} .rate_card_info li {position: relative; display: flex; align-items: center; gap: .4rem; font-size: 1.4rem; color: var(--n-gray-700); line-height: 125%;} .rate_card_info li span {font-weight: 600;} .rate_card_info li span.ref {font-size: 1.4rem; font-weight: 400; color: var(--n-gray-500);} .rate_card_info li:first-child {align-items: baseline; width: 100%; font-size: 2rem; font-weight: 700; color: var(--n-gray-900);} .rate_card_info li:last-child {margin-left: 1rem; padding-left: 1rem;} .rate_card_info li:last-child::before {content: ''; position: absolute; left: 0; display: block; width: 1px; height: 1rem; background-color: var(--n-gray-300);} /* rate card :: price */ .rate_card_bottom {width: 100%; margin-top: auto;} .rate_card_bottom .rate_origin {font-size: 1.3rem; color: var(--n-gray-300); text-decoration: line-through; line-height: 125%;} .rate_card_bottom .rate_price {display: flex; align-items: baseline; gap: .8rem;} .rate_card_bottom .rate_price .discount {font-size: 2.4rem; font-weight: 700; color: var(--n-primary);} .rate_card_bottom .rate_price .discount span {font-size: 1.8rem; font-weight: 500;} .rate_card_bottom .rate_price .ref {font-size: 1.3rem; font-weight: 500; color: var(--n-gray-900);} /* rate card :: benefit */ .rate_card_bottom .rate_benefit {padding-top: 1.2rem; margin-top: 1.2rem; border-top: 1px solid var(--n-gray-200); font-size: 1.4rem; color: var(--n-gray-700);} .rate_card_bottom .rate_benefit li + li {margin-top: .8rem;} /** phone list */ .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: 5rem 0 2rem 0; overflow: hidden;} .main_event_area .thumb_card_img.event {width: 100%; padding-top: 60.5%; margin-bottom: 0; border-radius: var(--border-radius-s); border-bottom: 0;} .main_event_area .thumb_card_link {margin-bottom: 0; border-radius: 0;} .main_event_area .thumb_card_desc {padding: 0 .4rem; margin-top: 1.6rem;} /*------------------------------------------- -- main review area -------------------------------------------*/ .main_review_area {padding: 2rem 0 5rem 0;} .review_card {display: block; width: 100%; padding: 2.4rem; border-radius: var(--border-radius-d); background-color: #fff; box-shadow: 0 2px 12px 0 rgba(149, 157, 165, 0.20); overflow: hidden;} .review_card .grade {display: flex;} .review_card .grade_icon {display: inline-block; width: 1.6rem; height: 1.6rem; filter: var(--n-filter-disabled); background: url(../svg/star-fill.svg) no-repeat center/100%;} .review_card .grade_icon.active {filter: var(--n-filter-yellow);} .review_card_content {padding: 0; margin-top: 2rem;} .review_content_text { min-height: 6.4rem; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; font-size: 1.4rem; color: var(--n-gray-700); line-height: 150%; } .review_card_info {display: flex; align-items: center; gap: .8rem; font-size: 1.2rem; color: var(--n-gray-700);} .review_card_info .info {flex: 1; display: inline-flex; justify-content: space-between;} .review_card_info span {color: var(--n-gray-500);} /*------------------------------------------- -- main benefit area -------------------------------------------*/ .main_benefit_area {padding: 5rem 0; background-color: #CBDFF2;} .main_benefit_area .sec_header {margin-bottom: 3.2rem; text-align: center;} .main_benefit_area .sec_header span {font-size: 1.8rem; font-weight: 600; color: var(--n-primary);} .main_benefit_area .sec_header .sec_title {margin-top: 1.2rem; font-size: 2.4rem; line-height: 137.5%;} .benefit_card_list {display: flex; flex-wrap: wrap; gap: 1.6rem;} .benefit_card_list li {width: 100%;} .benefit_card {display: inline-flex; flex-direction: row; align-items: center; gap: 2.4rem; width: 100%; padding: 2.4rem; border-radius: var(--border-radius-d); background-color: #fff;} .benefit_card .title {flex: 1; font-size: 1.6rem; font-weight: 600; color: var(--n-gray-900);} .benefit_card .title p {margin-top: .4rem; font-size: 1.4rem; font-weight: 500; color: var(--n-gray-500);} .benefit_card .title p.ref {font-size: 1.3rem; font-weight: 400; color: var(--n-gray-300);} .benefit_card img {width: 6rem; height: auto;} /*------------------------------------------- -- main cs area -------------------------------------------*/ .main_cs_area {padding: 5rem 0;} .main_cs_group {} /* notice box */ .notice_box .notice_list {display: flex; flex-direction: column; gap: 1.2rem;} .notice_box .notice_list li {display: inline-flex; align-items: center; gap: .8rem; padding: 2rem 2.4rem; border-radius: var(--border-radius-d); background-color: var(--n-gray-50);} .notice_box .notice_list li img {width: 2rem; filter: var(--n-filter-red);} .notice_box .notice_list li a {flex: 1; font-size: 1.4rem; font-weight: 600; color: var(--n-gray-900); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; word-break: break-all;} .notice_box .notice_list li .date {flex-shrink: 0; font-size: 1.3rem; font-weight: 400; color: var(--n-gray-500);} /* call cs box */ .call_cs_box {margin-top: 4rem;} .call_cs_box .call_cs_content {padding: 2.4rem; border: 1px solid var(--n-gray-300); border-radius: var(--border-radius-d);} .call_cs_box .call_cs_content li {display: inline-flex; justify-content: space-between; width: 100%;} .call_cs_box .call_cs_content li + li {margin-top: 1.2rem;} .call_cs_box .call_cs_content li:not(:last-child) {font-size: 1.4rem; color: var(--n-gray-700);} .call_cs_box .call_cs_content li .title {width: 25%; font-weight: 500;} .call_cs_box .call_cs_content li .desc {flex: 1; word-break: keep-all;} .call_cs_box .call_cs_content .cs_all {font-size: 1.6rem; font-weight: 600; color: var(--n-gray-900);} .call_cs_box .call_cs_content .cs_num {color: #FF623F;} .call_cs_box .call_cs_content .cs_desc {width: 100%; padding: 2rem; border-radius: var(--border-radius-s); font-size: 1.4rem; font-weight: 500; color: var(--n-gray-700); background-color: var(--n-gray-50); text-align: center; } .call_cs_box .call_cs_content .cs_desc p {margin-top: .4rem; font-size: 1.3rem; font-weight: 400; color: var(--n-gray-500); word-break: keep-all;} .call_cs_box .call_cs_content .cs_channel {position: relative; padding-left: 3.6rem; color: var(--n-gray-700); text-decoration: underline;} .call_cs_box .call_cs_content .cs_channel::before {content: ''; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 2.8rem; height: 2.8rem; border-radius: .6rem; background-position: center; background-size: 100%; background-repeat: no-repeat;} .call_cs_box .call_cs_content .cs_channel.kakao::before {background-image: url(../img/icon-kakaotalk.png);} /*------------------------------------------- -- main swiper area(plugin style) -------------------------------------------*/ /* common */ .swiper-pagination {bottom: 0; line-height: normal;} .swiper-pagination-bullet {width: .6rem; height: .6rem; margin: 0 .3rem; background-color: var(--n-gray-900); opacity: .3;} .swiper-pagination-bullet-active {width: 2rem; border-radius: 10rem; opacity: 1;} .swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal {bottom: 0;} .swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {margin: 0 .3rem;} .swiper-pagination-fraction {font-size: 1.4rem; color: rgba(0,0,0,.4);} .swiper-pagination-current {font-weight: 600; color: var(--n-gray-900);} .swiper-button-prev, .swiper-button-next {position: static; width: 3.6rem; height: 3.6rem; margin-top: unset; border-radius: 50%; background-repeat: no-repeat; background-position: center; background-color: rgba(0, 0, 0, .3); z-index: 11;} .swiper-button-prev::after, .swiper-button-next::after {display: block; width: 2.4rem; height: 2.4rem; filter: var(--n-filter-white); font-size: 0;} .swiper-button-prev::after {background-image: url(../svg/chevron-left.svg);} .swiper-button-next::after {background-image: url(../svg/chevron-right.svg);} /* .swiper-button-prev {background-image: url(../svg/chevron-left.svg);} .swiper-button-next {background-image: url(../svg/chevron-right.svg);} */ /* default */ .main_swiper_area {position: relative; max-width: none; padding: 0 2rem;} .main_swiper_area .swiper-container {position: relative; width: 100%; margin: 0 auto; overflow: hidden;} /* padding: 0 2rem; */ .main_swiper_area .swiper-slide {position: relative;} /** custom **/ /* main banner swiper */ .main_banner .swiper-container {overflow: hidden;} .main_banner .swiper-slide {position: relative; width: 100%; height: auto; overflow: hidden;} .main_banner .swiper-pagination {bottom: 2rem;} /* rate swiper */ .main_product_list .swiper-container {position: relative;} .main_product_list .swiper-slide {height: unset;} /* event swiper */ .main_event_area .swiper-container {overflow: unset;} .main_event_area .swiper-pagination {display: none;} /* review swiper */ .main_review_area .swiper-container {overflow: unset;} /*********************************************************************************************************************** E. Sub ***********************************************************************************************************************/ /* -- common */ .page_title {margin-bottom: 2.4rem; 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-image: url(../svg/exclamation-circle-fill.svg); background-repeat: no-repeat; background-position: center; background-size: 100%; display: inline-block; width: 3.2rem; height: 3.2rem; } .alert_img span.success {background-image: url(../svg/check2-circle.svg); filter: var(--n-filter-primary);} .alert_img span.fail {background-image: url(../svg/x-circle.svg); filter: var(--n-filter-red);} .alert_img span.success, .alert_img span.fail {width: 5.6rem; height: 5.6rem;} /* agent logo */ .agent_logo {margin-bottom: 3.2rem;} .agent_logo img {height: 2.4rem;} /* 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: 35px;} .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.4rem;} .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; margin-bottom: 5px; font-size: 7.5pt;} .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); font-size: 9.25pt; font-weight: 500;} .doc_seal p {font-size: 11.5pt;} .doc_seal .seal {position: relative; margin-top: 20px; font-size: 11.5pt; color: #000;} .doc_seal .seal img { /* display: none; */ -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: 50px; height: auto; margin-left: 5px; } /*------------------------------------------- -- accordion style -------------------------------------------*/ .acc_wrap .acc_item {width: 100%; padding: 1.6rem 0; border-bottom: 1px solid var(--n-gray-200);} .acc_wrap .acc_header {font-size: 1.5rem; font-weight: 700; color: var(--n-gray-700);} .acc_wrap .acc_header .acc_header_link {position: relative; display: flex; flex-direction: column; width: 100%; padding: 0; padding-right: 3.2rem; border-radius: 0; background-color: transparent; text-align: left; line-height: 137.5%;} .acc_wrap .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: .8rem; display: inline-block; width: 1.6rem; height: 1.6rem; filter: var(--n-filter-gray4);} .acc_wrap .acc_header.active .acc_header_link::after {background: url(../svg/chevron-up.svg) no-repeat center/100%;} .acc_wrap .acc_content {display: none; padding-top: 1rem; word-break: break-all;} .acc_wrap .acc_content_inner, .acc_wrap .acc_content_inner > pre {margin-bottom: 0; font-size: 1.5rem; color: var(--n-gray-500); word-break: keep-all;} /* type2 */ .acc_wrap.type2 .acc_header {display: flex; justify-content: space-between; align-items: center; font-weight: 400;} .acc_wrap.type2 .acc_header .acc_header_link {flex-shrink: 1; position: relative; padding: 0; background-color: transparent; background: url(../svg/chevron-down.svg) no-repeat center/100%; width: 1.8rem; height: 1.8rem; filter: var(--n-filter-gray4);} .acc_wrap.type2 .acc_header.active .acc_header_link {background: url(../svg/chevron-up.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;} /*------------------------------------------- -- 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.2rem; border-top: 1px solid var(--n-gray-200);} .board_list li {padding: 2rem 0; border-bottom: 1px solid var(--n-gray-200);} .board_list li .title_group {display: flex; flex-wrap: nowrap; align-items: center;} .board_list li .title {position: relative; flex: 1; font-size: 1.4rem; font-weight: 600; color: var(--n-gray-700);} .board_list li .title a {color: var(--n-gray-700);} .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;} /* size */ .board_list.size_sm li {padding: 1.6rem 0;} /* etc */ .board_list li.tb {display: flex; flex-direction: column;} /*------------------------------------------- -- card list -------------------------------------------*/ .card_list_wrap {padding-top: 1.6rem;} .card_list {display: flex; flex-wrap: wrap; margin: 0 -.8rem;} .card_list_item {display: flex; flex-direction: column; padding: 0 .8rem; margin-bottom: 1.2rem; font-size: 1.5rem;} .card_list_item.no_list {width: 100% !important; flex: 1 !important;} .no_list {padding: 5rem 1.6rem !important;} /* card */ .card_link {width: 100%; height: 100%; padding: 2rem; border: 1px solid transparent; border-radius: var(--border-radius-d); background-color: #fff; box-shadow: 0 2px 12px 0 rgba(149, 157, 165, .24); transition: all .3s;} .card_link:hover {box-shadow: 0 2px 12px 0 rgba(149, 157, 165, .56);} .card_link.type2 {background-color: var(--n-gray-50); border: 0; box-shadow: none;} .card_link.type2:hover {box-shadow: none;} /* .card_link {border: 1px solid var(--n-gray-300); background-color: transparent;} */ .card_link .title {font-size: 1.5rem; font-weight: 500; color: var(--n-gray-700);} .card_link img.icon {width: 3.6rem; height: 3.6rem; margin-bottom: .8rem;} .card_list.rate_list .service_desc {display: flex; flex-direction: column;} .card_list.rate_list .service_desc .price {flex-direction: column; align-items: end; gap: 0; font-size: 2rem;} .card_list.rate_list .service_desc .price .ref {font-size: 1.2rem;} .addType.badge_pps {background-color: #dbeafe; color: #2b7fff;} /* 선불 */ .addType.badge_post {background-color: #ffe2e2; color: #fb2c36;} /* 후불 */ .addType.badge_all {background-color: var(--n-secondary); color: #fff;} /* 선후불 */ /* size */ .card_list.size_sm {margin: 0 -.4rem;} .card_list.size_sm .card_list_item {padding: 0 .4rem; margin-bottom: .8rem;} /*------------------------------------------- -- price list(요금 소계) -------------------------------------------*/ .price_list {font-size: 1.5rem; font-weight: 500; color: var(--n-gray-900);} .price_list li {display: flex; justify-content: space-between;} .price_list li + li {padding-top: 2rem;} .price_list li.depth {padding-top: .8rem; font-size: 1.3rem; font-weight: 400; color: var(--n-gray-500);} .price_list li.total {color: var(--n-primary); font-weight: 700;} .price_list li .title, .price_list li .text {font-weight: inherit; font-size: inherit; color: inherit; padding-bottom: 0;} .price_list.type2 {font-weight: 400; color: var(--n-gray-800);} .price_list.type2 li {flex-wrap: wrap;} .price_list.type2 li + li {padding-top: 1.6rem; margin-top: 1.6rem; border-top: 1px solid #f2f2f2;} /*------------------------------------------- -- thumb card -------------------------------------------*/ .thumb_card_link {display: inline-block; width: 100%; margin-bottom: 1.2rem;} .thumb_card_img {width: 100%; height: 200px; margin-bottom: 1.2rem; border-radius: var(--border-radius-s); overflow: hidden;} .thumb_card_img.event {position: relative; width: 100%; height: auto; padding-top: 61%; overflow: hidden;} .thumb_card_img.event_end::before {content: '종료'; position: absolute; top: 0; left: 0; display: inline-flex; justify-content: center; align-items: center; width: 100%; height: 100%; font-size: 2rem; font-weight: 600; color: #fff; background-color: rgba(0,0,0,.56); z-index: 1;} .thumb_card_img img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%;} .thumb_card_desc {font-size: 1.5rem; line-height: 137.5%;} .thumb_card_desc .title {margin-bottom: .4rem; font-weight: 600; color: var(--n-gray-700); text-overflow: ellipsis; overflow: hidden; word-break: break-all; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;} .thumb_card_desc .title .badge {position: relative; top: -2px; margin-right: 4px;} .thumb_card_desc .date {font-size: 1.3rem; color: var(--n-gray-500);} /*------------------------------------------- -- tab -------------------------------------------*/ /* box */ .tab_box {margin-bottom: 2.4rem; word-break: keep-all;} .tab_box_list {display: flex; flex-wrap: wrap; width: 100%; padding: .4rem; border-radius: var(--border-radius-s); background-color: var(--n-gray-100);} .tab_box_list li {flex: 1 0; display: inline-block;} .tab_box_link {position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; padding: .8rem 1.2rem; font-size: 1.5rem; border-radius: .8rem; color: var(--n-gray-500); background-color: transparent; text-align: center; line-height: 150%; letter-spacing: -.25px; word-break: keep-all;} .tab_box_link:hover {color: var(--n-cgray-700);} .tab_box_link.on, .tab_box_link.active {border: 1px solid var(--n-gray-100); color: var(--n-gray-900); background-color: #fff; box-shadow: 0 2px 8px 0 rgba(149, 157, 165, .2);} .tab_box_list_t2 {display: flex; flex-wrap: wrap; gap: 4px 0; margin: 0 -2px;} .tab_box_list_t2 li {flex: 0 0 auto; display: inline-block; padding: 0 2px;} .tab_box_list_t2 .tab_box_link {padding: .8rem 1.2rem; background-color: transparent; box-shadow: none;} .tab_box_list_t2 .tab_box_link:hover {color: var(--n-gray-700); background-color: rgba(15, 23, 42, .04);} .tab_box_list_t2 .tab_box_link.on, .tab_box_list_t2 .tab_box_link.active {background-color: var(--n-primary); color: #fff;} .tab_box_list_t2 .tab_box_link.on:hover, .tab_box_list_t2 .tab_box_link.active:hover {color: #fff;} .tab_box_list_t3 {display: flex; flex-wrap: wrap; gap: .8rem .4rem; width: 100%;} .tab_box_list_t3 li {display: inline-block;} .tab_box_list_t3 .tab_box_link {padding: .8rem 1.2rem; border: 1px solid var(--n-gray-200); color: var(--n-gray-500); background-color: transparent;} .tab_box_list_t3 .tab_box_link:hover {color: var(--n-gray-700); background-color: rgba(15, 23, 42, .04);} .tab_box_list_t3 .tab_box_link.on, .tab_box_list_t3 .tab_box_link.active {color: #fff; border: 1px solid var(--n-primary); background-color: var(--n-primary);} .tab_box_list_t3 .tab_box_link.on:hover, .tab_box_list_t3 .tab_box_link.active:hover {background-color: transparent;} .tab_box_oval {margin-bottom: 1.6rem;} .tab_box_oval .tab_list {position: relative; display: flex; gap: .8rem; text-align: center;} .tab_box_oval .tab_link {display:inline-block; padding: .8rem 1.6rem; font-size: 1.5rem; border-radius: 10rem; background-color: transparent; color: var(--n-gray-500); background-color: var(--n-gray-100);} .tab_box_oval .tab_link:hover {color: var(--n-gray-600);} .tab_box_oval .tab_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; gap: .8rem; text-align: center;} .tab_box_oval .tab_link {display:inline-block; padding: .8rem 1.6rem; font-size: 1.5rem; border-radius: 10rem; background-color: transparent; color: var(--n-gray-500); background-color: var(--n-gray-100);} .tab_box_oval .tab_link:hover {color: var(--n-gray-600);} .tab_box_oval .tab_link.on {background-color: var(--n-primary); color: #fff;} /* line */ .tab_line_wrap {position: relative; margin-bottom: 1.6rem;} .tab_line_wrap::after {content: ''; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 100%; max-width: 1200px; height: 1px; background-color: var(--n-gray-200); z-index: -1;} .tab_line_list {position: relative; display: flex; width: 100%; margin: 0 auto; text-align: center;} .tab_line_list li {margin-right: 1.6rem;} .tab_line_link {position: relative; display:inline-block; width: 100%; padding: 1.2rem 0; border-radius: 0; font-size: 1.4rem; background-color: transparent; color: var(--n-gray-500);} .tab_line_link:hover {color: var(--n-gray-600);} .tab_line_link.on {font-weight: 600; color: var(--n-gray-900);} .tab_line_link.on::after {content: ''; position: absolute; bottom: 1px; left: 0; width: 100%; height: 2px; background-color: var(--n-gray-900);} .tab_line_list_t2 {position: relative; display: flex; width: 100%; margin: 0 auto; border-bottom: 1px solid var(--n-gray-200); text-align: center;} .tab_line_list_t2 li {flex: 1 0 auto;} /* sub */ .sub_tab_list {display: flex; flex-wrap: wrap; gap: .8rem; width: 100%;} .sub_tab_link {display:inline-block; padding: .8rem 1.6rem; font-size: 1.4rem; border: 1px solid var(--n-gray-300); border-radius: 10rem; color: var(--n-gray-500); background-color: #fff;} .sub_tab_link:hover {color: var(--n-primary); background-color: var(--n-gray-100);} .sub_tab_link.on {border-color: var(--n-primary); color: var(--n-primary); background-color: var(--n-primary-light);} /* etc */ .tab_content {width: 100%; margin-top: 4rem;} .tab_content img {width: 100%;} .tab_content .review_list {border-top: none} .tab_login {margin-bottom: 1.6rem;} .tab_login_list {position: relative; display: flex; width: 100%; margin: 0 auto; text-align: center;} .tab_login_list li {flex: 1 1 auto;} .tab_login_link {position: relative; display:inline-block; width: 100%; padding: 1.6rem 1rem; border-radius: 10rem; font-size: 1.4rem; line-height: 125%; background-color: transparent; color: var(--n-gray-500);} .tab_login_link:hover {color: var(--n-cgray-600);} .tab_login_link.on {font-weight: 600; color: var(--n-gray-900); background-color: var(--n-gray-100);} /*------------------------------------------- -- search -------------------------------------------*/ .search_wrap {padding: 1rem 0;} .search_box {display: flex; border: 1px solid var(--n-primary-dark); border-radius: var(--border-radius-s); overflow: hidden;} .search_box input {border: 0; background-color: unset;} .search_box .search_btn {position: relative; flex-shrink: 0; width: 5.2rem; height: 5.2rem; padding: 0; font-size: 0; background-color: transparent;} .search_box .search_btn:before {content: ''; display: block; width: 100%; height: 100%; background: url(../svg/search.svg) center/24px no-repeat transparent; filter: var(--n-filter-gray9);} /*------------------------------------------- -- order layout -------------------------------------------*/ .order_wrap {padding-top: 1.6rem;} .order_container {min-width: 320px; margin: 0 auto;} .order_content {padding: 0 2rem;} .order_group {padding: 3.2rem 0;} .order_group:first-child {padding-top: 0;} .order_group + .order_group {border-top: 1px solid var(--n-gray-100);} .order_payment {padding: 2.4rem 2rem; border-top: 10px solid var(--n-gray-100);} .order_payment .price_list {margin-bottom: 1.6rem; padding-bottom: 1.6rem; border-bottom: 1px solid var(--n-gray-100);} /*------------------------------------------- -- guide -------------------------------------------*/ .guide_area {font-size: 1.6rem; color: var(--n-gray-700); word-break: keep-all;} .guide_area .guide_top {} .guide_area .guide_con {margin-top: 3.2rem;} .guide_area h4 {margin-bottom: 1rem;} .guide_area .guide_con .box {font-size: 1.6rem;} .guide_area .benefit_card {border: 1px solid var(--n-border);} /*------------------------------------------- -- 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 var(--n-gray-300);} .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 .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 {margin-top: 3.2rem;} .product_select + .rate_list_wrap {padding-top: 1rem;} /* ## rate list - new ## */ .rate_list_wrap > .inner {max-width: 1200px; padding: 0 2rem;} .card_list.rate_list {display: flex; margin: 0;} /* display: block */ .card_list.rate_list .card_list_item {width: 100%; padding: 0; overflow: unset;} .card_list.rate_list .card_rate_link {width: 100%; height: fit-content; padding: 2.4rem; border: 1px solid transparent; border-radius: var(--border-radius-d); background-color: #fff; box-shadow: 0 2px 12px 0 rgba(149, 157, 165, .24); transition: all .3s;} .card_list.rate_list .card_rate_link:hover {box-shadow: 0 2px 12px 0 rgba(149, 157, 165, .56);} /* .card_list.rate_list .card_rate_link:hover {border-color: var(--n-secondary);} */ .card_list.rate_list .title {position: relative; display: flex; flex-direction: column; margin-bottom: 2rem; font-size: 1.5rem; font-weight: 500; color: var(--n-gray-500);} .card_list.rate_list .content_group {flex-direction: column; gap: 2rem;} .card_list.rate_list .detail {width: 100%; font-size: 1.5rem; color: var(--n-gray-700);} .card_list.rate_list .desc {display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem 0; width: 100%; margin-top: auto;} .card_list.rate_list .desc li {position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; line-height: 125%;} .card_list.rate_list .desc li:first-child {width: 100%; font-size: 2.4rem; font-weight: 700; color: var(--n-gray-900);} .card_list.rate_list .desc li:last-child {margin-left: 1rem; padding-left: 1rem;} .card_list.rate_list .desc li:last-child::before {content: ''; position: absolute; left: 0; display: block; width: 1px; height: 1rem; background-color: var(--n-gray-300);} .card_list.rate_list .desc li span {font-weight: 700;} .card_list.rate_list .desc li .qos {font-size: 1.4rem; font-weight: 400; color: var(--n-gray-500);} .card_list.rate_list .detail .ref {width: 100%; margin-bottom: .8rem; font-size: 1.4rem; font-weight: 400; color: var(--n-secondary);} .card_list.rate_list .price {display: flex; flex-direction: column; gap: 0; font-size: 2.8rem; font-weight: 700; color: var(--n-primary); text-align: end;} .card_list.rate_list .price span {font-size: 2.2rem; font-weight: 500;} .card_list.rate_list .price .ref {font-size: 1.3rem; font-weight: 400; color: var(--n-gray-500);} /* ##### rate detail real new ##### */ .rate_view_column {} /* rate info */ .rate_info .inner {padding: 2rem; margin: 0 2rem; border-radius: var(--border-radius-d); box-shadow: 0 2px 12px 0 rgba(149, 157, 165, .2);} .rate_info .header .title {font-size: 1.5rem; font-weight: 500; color: var(--n-gray-700);} .rate_info .detail {margin-top: 2rem; font-size: 1.5rem; color: var(--n-gray-700);} .rate_info .detail .desc {display: flex; flex-wrap: wrap; gap: .4rem 0; width: 100%; margin-top: auto;} .rate_info .detail .desc li {position: relative; display: flex; flex-wrap: wrap; align-items: flex-start; gap: .4rem.8rem; font-weight: 500;} .rate_info .detail .desc li:last-child {margin-left: 1rem; padding-left: 1rem;} .rate_info .detail .desc li:last-child::before {content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 1rem; background-color: var(--n-gray-300);} .rate_info .detail .desc li > p {line-height: 125%;} .rate_info .detail .desc li .ref {font-size: 1.3rem; color: var(--n-gray-500);} .rate_info .detail .desc .icon {width: 1.6rem; height: 1.6rem; margin-top: .5%; filter: var(--n-filter-gray4);} .rate_info .detail .desc li:first-child {width: 100%; font-size: 2.4rem; font-weight: 700; color: var(--n-gray-700); line-height: 1;} .rate_info .detail .desc li:first-child .icon {width: 1.8rem; height: 1.8rem; margin-top: 1.5%;} .rate_info .detail .desc li:first-child .ref {display: inline-block; width: 100%; font-weight: 400; color: var(--n-secondary);} .rate_info .price {margin-top: 2rem; font-size: 1.3rem; font-weight: 400; text-align: end;} .rate_info .price .desc {display: flex; flex-direction: column; flex-wrap: wrap; justify-content: end; font-size: 2.8rem; font-weight: 700; color: var(--n-primary);} .rate_info .price .desc p span {font-size: 2.4rem; font-weight: 500;} .rate_info .price .ref {margin-bottom: .8rem; font-size: 1.4rem; font-weight: 400; color: var(--n-gray-400);} /* rate select */ .rate_select_area {position: fixed; bottom: 0; left: 0; width: 100%; height: fit-content; padding: 0 2rem 1.6rem 2rem; border-radius: var(--border-radius-d) var(--border-radius-d) 0 0; background-color: #fff; box-shadow: 0 -2px 24px 0 rgba(149, 157, 165, .48); z-index: 10;} .rate_select_area .box_opener {width: 100%; padding: 1.6rem 0; font-size: 0; text-align: center;} .rate_select_area .box_opener button {width: 2.4rem; height: 1rem; filter: var(--n-filter-gray4); background: url(../svg/keyboard-arrow-up.svg) no-repeat center/100% transparent;} .rate_select_area .box_opener button.on {background-image: url(../svg/keyboard-arrow-down.svg);} .rate_select_area .rate_select_box {max-height: 40vh; margin-bottom: 1.6rem; overflow-x: hidden; overflow-y: auto;} .rate_select_area .btn_group {padding: 0;} .rate_select_area .ref_stop {padding-top: calc(1.2rem + 1.6rem); padding-bottom: 1.2rem; font-size: 1.6rem; font-weight: 500; color: var(--n-gray-700); text-align: center;} /* rate detail */ .rate_detail {margin-top: 4rem; border-top: 10px solid var(--n-gray-100);} .rate_detail_depth {margin-top: 4rem;} .rate_detail_depth .title {margin-bottom: 1.6rem; font-size: 2rem; font-weight: 600; color: var(--n-gray-900);} .rate_detail_depth .desc, .rate_detail_depth pre, .rate_detail_depth table {margin-bottom: 0; font-size: 1.4rem; color: var(--n-gray-500); line-height: 137.5%; overflow-x: auto;} .rate_detail_depth table {white-space: nowrap;} .rate_detail_depth img {max-width: 100%; height: auto;} /* .rate_detail_depth p.desc_list>* {font-size: 1.4rem !important;} .rate_detail_depth .desc_list {padding-left: 2rem; font-size: 1.3rem; color: var(--n-gray-600);} .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: "- ";} */ .rate_detail.type2 {padding-top: 2rem; margin-top: 0; border: 0; } /* ##### rate detail real new ##### */ /* 260326 추가 - tab 화살표 */ .tab_line_wrap .container {position: relative; overflow: hidden;} .tab_line_wrap .swiper-button-prev, .tab_line_wrap .swiper-button-next { position: absolute; width: 3.6rem; height: calc(100% - 1px); top: 0; margin-top: 0; border-radius: 0; transition: opacity .3s; z-index: 10; } .tab_line_wrap .swiper-button-prev {left: 0; justify-content: flex-start; padding-left: .4rem; background: linear-gradient(to right, rgba(255,255,255,1) 60%, rgba(255,255,255,0) 100%);} .tab_line_wrap .swiper-button-next {right: 0; justify-content: flex-end; padding-left: .4rem; background: linear-gradient(to left, rgba(255,255,255,1) 60%, rgba(255,255,255,0) 100%);} .tab_line_wrap .swiper-button-prev::after, .tab_line_wrap .swiper-button-next::after { background-size: 2rem; background-repeat: no-repeat; background-position: center; filter: var(--n-filter-gray7); } /* 끝에 도달했을 때 (Swiper 자동 처리) */ .tab_line_wrap .swiper-button-disabled { display: none !important; } /*------------------------------------------- -- addon(부가서비스) -------------------------------------------*/ .card_list.rate_list .addon_detail {} .card_list.rate_list .addon_detail .title {display: flex; gap: .8rem; padding-bottom: 2rem; margin-bottom: 2rem; border-bottom: 1px solid var(--n-gray-200); font-size: 2rem; font-weight: 600; color: var(--n-gray-900);} .card_list.rate_list .addon_detail .content {padding-bottom: 1px; overflow-x: hidden; overflow-y: auto; scrollbar-gutter: stable;} .card_list.rate_list .addon_detail .content #viewContents p, .card_list.rate_list .addon_detail .content #viewContents span, .card_list.rate_list .addon_detail .content #viewContents font {width: unset !important; height: unset !important;} /*------------------------------------------- -- event(이벤트) -------------------------------------------*/ .board.event_board .board_content .inner {max-width: 800px; margin: 0 auto;} /* 이벤트 종료 뱃지 */ .event_end .event_badge {position: absolute; top: 2rem; right: 2rem; z-index: 1;} .event_end .event_badge .badge {padding: .5rem 1rem; border-radius: .5rem; font-size: 1.4rem; font-weight: 400; background-color: var(--n-gray-300); color: var(--n-gray-600);} /*------------------------------------------- -- review(리뷰) -------------------------------------------*/ /* review list */ .review_list {} .review_list_item {display: flex; flex-direction: column; gap: 2rem; padding: 2rem 0; border-bottom: 1px solid var(--n-gray-200); font-size: 1.4rem; color: var(--n-gray-700);} .review_list_header .review_info {display: flex; align-items: end; gap: .8rem; width: 100%; font-size: 1.2rem; color: var(--n-gray-500);} .review_list_header .review_info .info {display: inline-flex; justify-content: space-between; align-items: center; width: 100%;} .review_list_header .review_info .info span {line-height: 137.5%;} .review_list_header .grade {display: flex; align-items: center;} .review_list_header .grade_icon {background: url(../svg/star-fill.svg) no-repeat center/100%; content: ""; display: inline-block; width: 1.6rem; height: 1.6rem; filter: var(--n-filter-disabled);} .review_list_header .grade_icon.active {filter: var(--n-filter-yellow);} .review_list_content {display: flex; flex-direction: row; gap: 1.6rem;} .review_list_content .title {margin-bottom: .4rem; font-size: 1.5rem; font-weight: 700; color: var(--n-gray-900);} .review_list_content .desc {flex: 1; font-size: 1.4rem; color: var(--n-gray-500); line-height: 150%; word-break: keep-all;} .review_list_content .img_wrap {position: relative; width: 7.8rem; min-width: 7.8rem; height: 7.8rem; border-radius: .8rem; 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; justify-content: center; align-items: center;} .grade_btn_wrap .grade_btn {background: url(../svg/star-fill.svg) no-repeat center/100%; content: ""; display: inline-block; width: 3.2rem; height: 3.2rem; filter: var(--n-filter-disabled); opacity: .5;} .grade_btn_wrap .grade_btn.active {filter: var(--n-filter-primary); opacity: 1;} .review_photo_wrap {position: relative; width: calc(100vw * .35); height: calc(100vw * .35); max-width: 20rem; max-height: 20rem; border-radius: 1.2rem; border: 1px solid var(--n-border); overflow: hidden;} .review_photo_wrap label {width: 100%; height: 100%; background: url(../svg/plus.svg) no-repeat center/25%; filter: var(--n-filter-disabled);} .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.8rem; height: 2.8rem; border-radius: 10rem; background-color: #000; opacity: 50%;} .btn_photo_remove:hover {opacity: 70%;} .btn_photo_remove::before {background: url(../svg/close.svg) no-repeat center/100%; content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: inline-block; width: 1.6rem; height: 1.6rem; filter: var(--n-filter-white);} /*------------------------------------------- -- qna(자주묻는질문) -------------------------------------------*/ .qna_wrap {width: calc(100% + 4rem); padding: 0 2rem; margin: 2rem -2rem 0 -2rem; border-top: 1rem solid var(--n-gray-100);} /* qna tab */ .qna_tab_wrap {margin-top: 2rem;} .qna_tab {display: flex; flex-wrap: wrap; gap: .8rem; width: 100%;} .qna_tab_link {display:inline-block; padding: .8rem 1.6rem; font-size: 1.4rem; border: 1px solid var(--n-gray-300); border-radius: 10rem; color: var(--n-gray-500); background-color: #fff;} .qna_tab_link:hover {color: var(--n-primary); background-color: var(--n-gray-100);} .qna_tab_link.on {border-color: var(--n-primary); color: var(--n-primary); background-color: var(--n-primary-light);} /* qna accordion */ .qna_acc_wrap {margin-top: 1rem;} .qna_acc_wrap .acc_item {width: 100%; padding: 2rem 0; border-bottom: 1px solid var(--n-gray-200);} /* .qna_acc_wrap .acc_item + .acc_item {margin-top: 1.2rem;} */ .qna_acc_wrap .acc_header {color: var(--n-gray-700);} .qna_acc_wrap .acc_header_link {position: relative; display: flex; width: 100%; padding: 0; padding-right: 3.2rem; border-radius: 0; font-size: 1.5rem; font-weight: 600; background-color: transparent; text-align: left; line-height: 137.5%;} .qna_acc_wrap .acc_header_link::before {content: 'Q'; display: inline-block; margin-right: .8rem; color: var(--n-primary); font-weight: 600;} .qna_acc_wrap .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: .8rem; display: inline-block; width: 1.6rem; height: 1.6rem; filter: var(--n-filter-gray4);} .qna_acc_wrap .acc_header.active .acc_header_link, .qna_acc_wrap .acc_header.active .acc_header_link::before {color: var(--n-primary);} .qna_acc_wrap .acc_header.active .acc_header_link::after {background-image: url(../svg/chevron-up.svg); } .qna_acc_wrap .acc_content {display: none; padding-left: 1.8rem; margin-top: 1rem; word-break: break-all;} .qna_acc_wrap .acc_content_inner, .qna_acc_wrap .acc_content_inner > pre {margin-bottom: 0; font-size: 1.5rem; color: var(--n-gray-500); line-height: 150%; word-break: keep-all;} .qna_acc_wrap .q_mark {flex-shrink: 0; display: inline-block; margin-right: 1rem; color: var(--n-gray-600); text-align: center; font-weight: 500;} .qna_acc_wrap .acc_header.active .q_mark {color: var(--n-primary);} /* .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 {margin-top: 1.2rem;} /* notice list */ .notice_list {} .notice_list_item {position: relative; display: flex; flex-direction: row; gap: .8rem; padding: 2rem 0; border-bottom: 1px solid var(--n-gray-200); font-size: 1.4rem;} /* .notice_list_item + .notice_list_item {margin-top: 1.2rem;} */ .notice_list_link {flex: 1; font-size: 1.5rem; font-weight: 600; color: var(--n-gray-700); overflow: hidden;} .notice_list_link:hover {color: var(--n-gray-700);} .notice_list_item .title {overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} .notice_list_item .date, .notice_list_item .event_date {flex-shrink: 0; font-size: 1.3rem; color: var(--n-gray-500); line-height: 150%;} /* 공지사항 고정 */ .notice_list_item.fix_item {padding-left: 2.8rem;} .notice_list_item.fix_item::before {content: ''; position: absolute; top: 50%; left: 0; transform: translateY(-50%); display: block; width: 2rem; height: 2rem; background: url(../svg/megaphone-fill.svg) center/100% no-repeat; filter: var(--n-filter-red);} .notice_list_item .no {display: none;} .notice_list_item .event_date {display: flex; flex-direction: column;} /* 접수내역리스트 */ .notice_list_item.order_item .inner_flex {display: flex; flex-direction: column; justify-content: space-between; width: 100%;} .notice_list_item.order_item .title {margin-bottom: 1.6rem; font-size: 1.8rem; font-weight: 700;} .notice_list_item.order_item .title_status {display: flex; flex-direction: row-reverse; justify-content: start; align-items: center; gap: .8rem; margin-bottom: .4rem; font-size: 1.5rem; font-weight: 700; color: var(--n-primary);} .notice_list_item.order_item .title_status span {display: inline-block; border-radius: .4rem; padding: 4px 8px; border-radius: 999px; font-size: 1.3rem; font-weight: 500; color: var(--n-primary); background-color: var(--n-primary-light);} .notice_list_item.order_item .text {margin-top: .4rem; font-weight: 500; color: var(--n-gray-600);} .notice_list_item.order_item .text ul {display: flex; flex-direction: column; gap: .4rem;} .notice_list_item.order_item .text ul li {display: inline-flex; align-items: center;} .notice_list_item.order_item .text ul li span {width: 20%; font-weight: 400;} .notice_list_item.order_item .btn_group {display: flex; flex-direction: row; gap: .8rem; min-width: 9rem; padding: 0; margin-top: 1.6rem;} .notice_list_item.order_item .btn_group > * {flex: 1 1 auto; width: auto; max-width: none; padding: 0 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 var(--n-gray-300); 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);} /*------------------------------------------- -- online cs(1:1문의) -------------------------------------------*/ /* agree box */ .agree_group {margin-top: 2.4rem;} .agree_box {padding: 2rem; border-radius: var(--border-radius-s); font-size: 1.4rem; background-color: var(--n-gray-50); line-height: 150%; word-break: keep-all;} .agree_check {margin-top: 1.2rem; font-weight: 600;} .agree_check .n_check_label {color: var(--n-gray-900);} /* pagination */ .pagination {flex-wrap: wrap; align-items: center; justify-content: center; margin-top: 1.6rem;} .page_icon {position: relative; display: inline-block; vertical-align: middle; width: 2.4rem; height: 2.4rem; border-radius: 10rem;} .page_icon::before {content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: inline-block; width: 100%; height: 100%; background-size: 1.6rem; background-position: center; background-repeat: no-repeat; filter: var(--n-filter-gray6);} .page_icon.page_first::before {background-image: url(../svg/double-arrow-left.svg);} .page_icon.page_last::before {background-image: url(../svg/double-arrow-right.svg);} .page_icon.page_prev::before {background-image: url(../svg/chevron-left.svg);} .page_icon.page_next::before {background-image: url(../svg/chevron-right.svg);} .page_link {display: inline-flex; align-items: center; justify-content: center; width: 3.2rem; height: 3.2rem; border-radius: 999px; font-size: 1.4rem; color: var(--n-gray-500);} .page_link:hover {color: var(--n-gray-600);} .page_link.on, .page_link.on:hover {font-weight: 600; color: #fff; background-color: var(--n-gray-700);} /*img upload*/ .cs_photo_wrap {position: relative; width: calc(100vw * .35); height: calc(100vw * .35); max-width: 250px; max-height: 250px; border-radius: .5rem; border: 1px solid var(--n-gray-300); overflow: hidden;} .cs_photo_wrap label {width: 100%; height: 100%; background: url(../svg/plus.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 .notice_list_item {flex-direction: row; align-items: center;} .download_wrap .notice_list_item .title {flex: 1 0 auto; padding-right: 1rem;} .download_wrap .notice_list_item .btn_down {flex: 0 0 auto;} .download_wrap .card_list_item {width: 100%;} .download_wrap .card_link {display: flex; align-items: center; gap: 2rem;} .download_wrap .card_link:hover {box-shadow: 0 2px 12px 0 rgba(149, 157, 165, .48);} .download_wrap .card_link .content_group {flex: 1; font-size: 1.4rem; color: var(--n-gray-700); word-break: keep-all;} .download_wrap .card_link .title {font-weight: 600;} .download_wrap .card_link .date {display: inline-block; margin-top: .4rem; color: var(--n-gray-500);} .download_wrap .card_link .icon {flex-shrink: 0;} .download_wrap .card_link .icon img {width: 2rem; height: 2rem; filter: var(--n-filter-gray4);} .download_wrap .card_link:hover .icon img {filter: var(--n-filter-primary);} /*------------------------------------------- -- apply change(가입정보변경) -------------------------------------------*/ .applychg_tab {margin-bottom: 1.6rem;} .applychg_tab.tab_box_list li {flex: 0 0 auto;} .applychg_tab .tab_box_link.check_self::after {content: '*'; position: absolute; top: .8rem; right: .8rem; color: #FF623F;} .applychg_tab .tab_box_link.on::after {} /*------------------------------------------- -- contact -------------------------------------------*/ /* company */ .company_img_wrap {background: url(../img/img-about-company.png)no-repeat center/cover; width: 100%; height: 15rem; margin-top:-40px;} .company_box {display: inline-flex; align-items: center; justify-content: center; width: 100%; padding: 4rem; margin-bottom: 1.6rem; border-radius: 1.2rem; background-color: var(--n-primary);} .company_box img {width: 8rem !important; height: auto;} /*------------------------------------------- -- prepaid -------------------------------------------*/ .charge_wrap .input_flex button, #smsAuth .input_flex button {min-width: 10rem;} .charge_wrap .step.type3 .step_icon::before {content: "방법" counter(section);} .charge_wrap .cs_channel {position: relative; padding-left: 3.6rem; color: var(--n-gray-700); text-decoration: underline;} .charge_wrap .cs_channel::before {content: ''; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 2.8rem; height: 2.8rem; border-radius: .6rem; background-position: center; background-size: 100%; background-repeat: no-repeat;} .charge_wrap .cs_channel.kakao::before {background-image: url(../img/icon-kakaotalk.png);} /*------------------------------------------- -- mypage -------------------------------------------*/ .my_wrap {background-color: var(--n-gray-100);} .my_wrap + form + footer {margin-top: 0;} .my_info.joinInfo > .flex_row {gap: 1rem 0;} /* join info */ .my_info.joinInfo .header {position: relative; display: flex; flex-direction: column; padding: 2.4rem 2rem; margin-bottom: 1rem; background-color: #fff;} .my_info.joinInfo .header_top {display: block; padding-top: 0; font-size: 2rem; font-weight: 600;} .my_info.joinInfo .header_top b {font-weight: 600;} .my_info.joinInfo .header_top .apply_no {margin-top: .4rem; font-size: 1.5rem; font-weight: 600; color: var(--n-primary);} .my_info.joinInfo .header_bottom {padding-top: 1.6rem; margin-top: 1.6rem; border-top: 1px solid var(--n-gray-200); font-size: 1.5rem;} .my_info.joinInfo .header_bottom ul {display: flex; flex-wrap: wrap; gap: 1rem 0;} .my_info.joinInfo .header_bottom ul li {display: flex; flex-direction: row; flex: 1 1 auto; letter-spacing: -.25px;} .my_info.joinInfo .header_bottom ul li span {position: relative; width: 25%; color: var(--n-gray-500);} .my_info.joinInfo .content_box {display: flex; flex-direction: column; padding: 0 .8rem;} .my_info.joinInfo .content_box .title_wrap {padding: 2.4rem 2rem; background-color: #fff;} .my_info.joinInfo .content_box .title_wrap h2 {margin-bottom: 0; font-size: 1.6rem; line-height: 150%;} .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.3rem; font-weight: 400; color: var(--n-gray-500);} .my_info.joinInfo .content_box .title_wrap .amount_refresh {display: flex; align-items: center; gap: .8rem; width: 100%; font-size: 1.3rem; 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 > .order_list, .my_info.joinInfo .content_box > .order_box {position: relative; flex-grow: 1; height: 100%; padding: 0 2rem 2.4rem 2rem; border: 0; border-radius: 0; background-color: #fff;} .my_info.joinInfo .content_box ul li.data_none {height: 100%; min-height: unset;} .my_info.joinInfo .content_box ul li.btn_wrap {margin-top: auto;} .my_info.joinInfo .content_box .order_list .title, .my_info.joinInfo .content_box .order_list .text {font-size: 1.5rem;} .my_info.joinInfo .content_box ul .rateplan {padding: 1.6rem; border-radius: .8rem; font-size: 1.5rem; font-weight: 500; color: var(--n-gray-700); background-color: var(--n-gray-50); text-align: center;} .my_info.joinInfo .content_box .btn_group {word-break: keep-all; gap: .8rem;} .my_info.joinInfo .content_box .btn_group .btn_item {position: relative;} .my_info.joinInfo .content_box .box_guide .text {padding: 0; margin: 0;} .my_info.joinInfo .content_box .amount_info {display: flex; flex-direction: column;} .my_info.joinInfo .content_box .amount_info + .amount_info {margin-top: 2rem;} .my_info.joinInfo .content_box .amount_info .box_title {margin-bottom: 1.2rem; font-size: 1.5rem;} .my_info.joinInfo .content_box .amount_info .price_list.type2 {padding: 2rem; border-radius: var(--border-radius-s); background-color: var(--n-gray-50);} .my_info.joinInfo .content_box .amount_info .price_list.type2 li {gap: .4rem;} .my_info.joinInfo .content_box .amount_info .price_list.type2 li + li {padding-top: 0; border-top: 0;} .my_info.joinInfo .content_box .amount_info .amount {flex-shrink: 0; color: var(--n-gray-400);} .my_info.joinInfo .content_box .amount_info .amount .acc {font-weight: 700; color: var(--n-primary);} .my_info.joinInfo .content_box .amount_info + .form_notice {margin-top: 2rem;} .my_info.joinInfo .amount_area + .form_notice {font-size: 1.3rem;} .my_info.joinInfo .content_box .point_info {display: flex; justify-content: space-between; align-items: center; font-size: 1.4rem; color: var(--n-gray-800);} .my_info.joinInfo .content_box .point_info .acc {font-size: 2rem; font-weight: 700; color: var(--n-primary);} .my_info.joinInfo .content_box .point_info .ref {} .my_info.joinInfo .charge_area {flex-direction: column;} .my_info.joinInfo .charge_area .total_info {display: flex; flex-wrap: wrap; align-items: center; width: 100%; padding: 2rem; border: 1px solid var(--n-gray-200); border-radius: var(--border-radius-s); font-size: 1.6rem; font-weight: 500; color: var(--n-gray-700);} .my_info.joinInfo .charge_area .total_info p:first-child {flex: 1 0 auto;} .my_info.joinInfo .charge_area .total_info .amount {font-size: 2rem; color: var(--n-primary);} .my_info.joinInfo .charge_area .total_info .period {width: 100%; font-size: 1.3rem; color: var(--n-gray-400);} .my_info.joinInfo .charge_area .charge_info {width: 100%; padding: 2rem; border-radius: var(--border-radius-s); background-color: var(--n-gray-50); } .my_info.joinInfo .charge_area .form_notice {margin-top: 2rem;} /* pay history */ .select_month_area {margin-bottom: 2.4rem; text-align: center;} .select_month_area select.select_box {width: 120px;} .select_month_area .period {padding-top: 1rem; font-size: 1.3rem; color: var(--n-gray-500);} /*********************************************************************************************************************** F. Self ***********************************************************************************************************************/ .body_wrap.self_wrap {padding-top: 6rem; height: max-content;} .self_wrap .sub_header + .form_wrap, .self_wrap .sub_header + .order_list_wrap {max-width: 588px; margin: 0 auto;} .self_wrap .continue_area {max-width: 737px; margin: 0 auto; margin-top: 4rem;} .self_wrap .login_wrap {width: 100%; max-width: 737px; padding: 2rem 0; margin: 0 auto;} .self_wrap .login_wrap > .form_wrap > input[type=text] {display: none;} .self_wrap .form_wrap h2 {margin-bottom: 2rem;} .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 .agent_logo {margin-bottom: 0;} #hopeNumList {row-gap: 1rem; padding: 2rem 0;} #hopeNumList .n_check_label {letter-spacing: -.25px;} #hopeNumListArea button {max-width: 340px;} #areaTerms {padding: 1rem 2rem !important; border: 1px solid var(--n-gray-200); border-radius: var(--border-radius-s);} #areaTerms > div {gap: 1.2rem; padding: .8rem 0;} /* #areaTerms .btn_underline, #personAgree .btn_underline, #harmAgree .btn_underline {min-width: 30px; font-size: 1.3rem; color: var(--n-gray-400);} */ #areaTerms .form_check_icon {flex: 1;} #areaTerms .flex-fill {flex: 0 0 auto !important;} #areaTerms .btn_underline, #personAgree .btn_underline, #harmAgree .btn_underline {position: relative; width: max-content; padding-right: 1.6rem; font-size: 1.3rem; line-height: 150%; text-decoration: none; filter: var(--n-filter-gray4);} #areaTerms .btn_underline::after, #personAgree .btn_underline::after, #harmAgree .btn_underline::after {content: ''; position: absolute; top: 50%; right: 0; transform: translateY(-50%); width: 1.6rem; height: 1.6rem; background: url(../svg/chevron-right.svg) no-repeat center/100%;} #harmAgree .form_check_icon {flex: 1;} #harmAgree .d-flex {gap: 1.2rem;} #harmAgree .d-flex .flex-fill {flex: 0 0 auto !important;} #inisisAuth .modal-body {height: 65vh;} #inisisAuth .acc_group {} #inisisAuth .acc_item {padding: 1.2rem 0; border-bottom: 0;} #inisisAuth .acc_item .acc_content_inner {padding: 2rem; border-radius: var(--border-radius-s); background-color: var(--n-gray-50);} #inisisAuth .acc_wrap .acc_content_inner, .acc_wrap .acc_content_inner > pre {font-size: 1.3rem;} /* #inisisAuth .step {flex-direction: row; align-items: start; gap: 2rem;} #inisisAuth .step_item {gap: 0; padding: 0; text-align: center;} #inisisAuth .step_item + .step_item::before {top: 2.4rem; left: -2rem; transform: unset; background: url(../svg/chevron-right.svg) no-repeat center/100%;} #inisisAuth .step_item .title {margin-top: .8rem; font-size: 1.5rem;} */ .self_copy_wrap {padding: 2rem 0 4rem 0;} .self_copy {font-size: 1rem; color: var(--n-gray-400); text-align: center;} /*------------------------------------------- -- step1 -------------------------------------------*/ /* inquiryInfo 가입 전 확인 */ #inquiryInfoTab li {flex: 0 0 auto; width: 50%;} #inquiryInfoTabContent {margin-top: -1rem;} #inquiryInfoTabContent .tab_board .title_area {position: relative; display: flex; justify-content: space-between; gap: 2rem; margin-bottom: 2rem;} #inquiryInfoTabContent .tab_board .title_area > .title {font-size: 1.5rem; color: var(--n-primary); text-align: start !important; word-break: keep-all;} #inquiryInfoTabContent .tab_board .content {margin-top: 0; padding-bottom: 2.4rem;} #inquiryInfoTabContent .swiper_controller {display: flex; gap: .4rem;} #inquiryInfoTabContent .swiper-button-prev::after, #inquiryInfoTabContent .swiper-button-next::after {display: none;} #inquiryInfoTabContent .swiper-pagination {bottom: 0; line-height: normal;} #inquiryInfoTabContent .swiper-pagination-bullet:only-child {display: inline-block !important;} .tab_board .list_dash li + li {margin-top: .25rem;} .tab_board .list_dash li.ref {margin-top: 0;} /* 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 modal & swiper */ #inquiryInfoTabContent .step_item {justify-content: normal;} .self-simtype-img {width: 100%; max-width: 360px;} .step1-usimInfo .advice_item .img_wrap img {width: auto;} .step1-usimInfo .advice_item .box_outline {padding: 1.2rem;} .step1-authInfo {gap: 1rem 0;} .step1-authInfo .box {height: 100%; padding: 2rem; border: 1px solid var(--n-gray-200); border-radius: 1.2rem;} /* */ .self_info .box .title {margin-bottom: .8rem;font-size: 1.8rem; font-weight: 700;} .self_info .box .ref {padding-top: .8rem; font-size: 1.3rem; 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;} .self_wrap .icon_help2 {width: 1.8rem; height: 1.8rem;} .step1-activeInfo button {font-size: 1.4rem;} .self_wrap .form_wrap .n_btn_s {height: 5.4rem; border-radius: var(--border-radius-s);} /*------------------------------------------- -- price select(요금제 선택 - step_price) -------------------------------------------*/ .self_wrap .box_cardlist .inner {max-width: 737px; background-color: #fff;} /* price filter */ .price_filter, .price_filter_popup {top: 6rem; max-width: 737px; padding: 0 2rem; padding-bottom: 1.6rem; margin: 0 auto; background-color: #fff; overflow-x: visible;} .price_filter_popup {padding-top: 1.6rem; margin-top: -1.6rem;} .price_filter_popup .swiper {padding-right: 2rem;} .price_filter button, .price_filter_popup button {display:inline-block; padding: .8rem 1.6rem; font-size: 1.4rem; border: 1px solid var(--n-gray-300); border-radius: 10rem; color: var(--n-gray-500); background-color: #fff;} .price_filter button:hover, .price_filter_popup button:hover {color: var(--n-primary); background-color: var(--n-gray-100);} .price_filter button.on, .price_filter_popup button.on {border-color: var(--n-primary); color: var(--n-primary); background-color: var(--n-primary-light);} .self_wrap .price_sticky_wrap {top: 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; margin-bottom: 0; border-bottom: 0; background-color: transparent;} .self_wrap .price_sticky_wrap .sub_header::after {display: none;} .self_wrap .price_sticky_wrap .price_filter {top: 0; background-color: transparent;} /* price list */ .card_price_list {border: none; margin-bottom: 1.6rem;} .card_price_list label {padding: 2.4rem; border: 1px solid transparent; border-radius: var(--border-radius-d); background-color: #fff; box-shadow: 0 2px 12px 0 rgba(149, 157, 165, .24); transition: all .3s;} .card_price_list label:hover {box-shadow: 0 2px 12px 0 rgba(149, 157, 165, .56);} .card_price_list input[type="radio"] {display: none;} .card_price_list input[type="radio"]:checked + label {border: 1px solid var(--n-gray-900); box-shadow: 0 2px 12px 0 rgba(149, 157, 165, .56);} .card_price_list .head {position: relative; margin-bottom: 2rem; font-size: 1.5rem; font-weight: 500; color: var(--n-gray-500);} .card_price_list .content_group {flex-wrap: wrap; gap: 2rem;} .card_price_list .detail {width: 100%; font-size: 1.5rem; color: var(--n-gray-700);} .card_price_list .text {display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem 0; width: 100%;} .card_price_list .text li {position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; line-height: 125%;} .card_price_list .text li span {font-weight: 700;} .card_price_list .text li .qos {font-size: 1.4rem; font-weight: 400; color: var(--n-gray-500);} .card_price_list .text li:first-child {width: 100%; font-size: 2.4rem; font-weight: 700; color: var(--n-gray-900);} .card_price_list .text li:last-child {padding-left: 1rem; margin-left: 1rem;} .card_price_list .text li:last-child::before {content: ''; position: absolute; left: 0; display: block; width: 1px; height: 1rem; background-color: var(--n-gray-300);} .card_price_list .detail .ref {font-size: 1.5rem; font-weight: 400; color: var(--n-secondary);} .card_price_list .price {display: flex; flex-direction: column; gap: 0; width: 100%; font-size: 2.8rem; font-weight: 700; color: var(--n-primary); text-align: end;} .card_list.rate_list .price span {font-size: 2.2rem; font-weight: 500;} .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 .form_wrap {padding: 2rem; border: 1px solid var(--n-gray-200); border-radius: var(--border-radius-s);} .order_list_wrap .form_wrap h2 {margin-bottom: 2rem; font-size: 1.6rem;} .order_list_wrap .order_list.type_flex, .order_box.type_flex {display: flex; flex-direction: column;} .order_list_wrap .order_list li + li {padding-top: 1.2rem;} .order_list li + li {padding-top: 1.2rem;} .order_list .title {font-size: 1.5rem; color: var(--n-gray-500); line-height: 150%; word-break: keep-all;} .order_list .text {font-size: 1.5rem; color: var(--n-gray-700); line-height: 150%; word-break: break-all;} .order_list .text .ref {display: inline-block; width: 100%;} .order_list .text button {height: 3.6rem; line-height: 3.6rem; padding: 0 1.2rem; border-radius: .8rem; font-size: 1.4rem;} .order_list .text_flex {display: flex; flex-direction: column; align-items: start;} .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: 1rem;} .applyComplArea .img_wrap img {width: 4rem; filter: var(--n-filter-primary);} .applyComplArea h2 {margin-bottom: 2.4rem; font-size: 1.6rem; font-weight: 600; color: var(--n-gray-500);} .applyComplArea .box_guide {} .applyComplArea .box_guide .text_group_ref {font-size: 1.4rem;} /*********************************************************************************************************************** G. Components ***********************************************************************************************************************/ /*------------------------------------------- -- form -------------------------------------------*/ .form_wrap + .form_wrap {margin-top: 4rem;} .form_group {margin-bottom: 1.6rem;} .form_wrap .form_group:only-child {margin-bottom: 0;} .form_group:last-child {margin-bottom: 0;} .input_group {position: relative;} .input_group input[type="email"] {padding-right: 7rem;} div.form-control {line-height: 1.25;} .form_notice {width: 100%; margin-top: .8rem; font-size: 1.4rem; color: var(--n-gray-500);} .form_notice .list_dot li:before, .form_notice .list_dash li:before, .form_notice .list_dot li span {top: 8px; background-color: var(--n-gray-500);} .input_flex {display: flex; align-items: center; gap: .8rem;} .input_flex > * {flex: 1;} .input_flex button, .input_flex a {flex: 0 0 auto; height: 5.2rem; padding: 0 1.2rem; font-size: 1.5rem;} /* label */ .n_form_label {font-size: 1.5rem; font-weight: 500; padding: .8rem 0; margin: 0; color: var(--n-gray-900);} .n_check_label {margin-left: .4rem; font-size: 1.5rem; color: var(--n-gray-700);} /* checkbox */ .form_check_group {display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 2rem; height: 100%;} .form-check {position: relative; padding-left: 2.4rem; margin-bottom: 0; line-height: 150%;} .form-check input[type="checkbox"], .form-check input[type="radio"] {position: absolute; top: .15rem; left: 0; margin: 0; margin-right: .4rem; border-radius: .4rem;} .form-check input[type="radio"] {border-radius: 999px;} input[type="checkbox"]+.form-label, input[type="radio"]+.form-label {margin-bottom: 0;} /* form number */ .form_number {display: flex; flex-wrap: wrap; width: fit-content;} .form_number .form_number_btn {position: relative; width: 4rem; height: 4rem; border: 1px solid var(--n-gray-200); background-color: #fff;} .form_number .form_number_btn:hover {background-color: rgba(15, 23, 42, .04);} .form_number .form_number_btn::before {content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: block; width: 2.4rem; height: 2.4rem; filter: var(--filter-ng10); background-position: center; background-size: 100%; background-repeat: no-repeat;} .form_number .form_number_btn.decrement {border-radius: .8rem 0 0 .8rem;} .form_number .form_number_btn.decrement::before {background-image: url(../svg/minus.svg);} .form_number .form_number_btn.increment {border-radius: 0 .8rem .8rem 0;} .form_number .form_number_btn.increment::before {background-image: url(../svg/plus.svg);} .form_number .form_number_btn:disabled, .form_number .form_number_btn.disabled {cursor: default; pointer-events: none; opacity: 1;} .form_number .form_number_btn:disabled::before, .form_number .form_number_btn.disabled::before {filter: var(--n-filter-disabled);} .form_number .form_number_inp { flex: 1 0 auto; display: inline-block; width: 1%; min-width: 4.8rem; max-width: 5.6rem; height: 4rem; padding: 0; border: 0; border-top: 1px solid var(--n-gray-200); border-bottom: 1px solid var(--n-gray-200); border-radius: 0; font-size: 1.6rem; font-weight: 700; color: var(--n-gray-700); text-align: center; line-height: 4rem; -moz-appearance: textfield; } .form_number_inp::-webkit-outer-spin-button, .form_number_inp::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .form_number_inp:read-only {background-color: #fff;} /* checkbox - terms */ .form_check_icon {padding-left: 0; margin-bottom: 0;} .form_check_icon .n_check_label {position: relative; padding-left: 2.4rem; margin-left: 0; font-size: 1.4rem; font-weight: 500; letter-spacing: -.25px;} .form_check_icon input[type="checkbox"] + label span {position: absolute; top: 50%; left: 0; display: inline-block; width: 1.8rem; height: 1.8rem; vertical-align: top; cursor: pointer; transform: translateY(-50%); background-image: url(../svg/check-circle.svg); background-size: 100%; background-position: 0 0; filter: var(--n-filter-disabled);} .form_check_icon input[type="checkbox"]:checked + label span {background-image: url(../svg/check-circle-fill.svg); filter: var(--n-filter-primary);} /* select box */ .selectbox {position: relative;} .selectbox_control { position: relative; display: block; width: 100%; padding: 1.2rem 2rem; padding-right: 4rem; border: 1px solid var(--n-border); border-radius: var(--border-radius-s); background-color: #fff; line-height: 125%; text-align: left; cursor: pointer; } .selectbox_control::after {content: ''; position: absolute; top: 50%; right: 2rem; transform: translateY(-50%); width: 1.6rem; height: 1.6rem; background-image: url(../svg/chevron-down.svg); background-repeat: no-repeat; background-position: center; background-size: 100%;} .selectbox_control .current {width: 100%; padding: 0; font-size: 1.5rem; color: var(--n-gray-700); background-color: transparent; text-align: left; line-height: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} .selectbox_control.on::after {background-image: url(../svg/chevron-up.svg);} .selectbox > ul {position: absolute; top: 0; left: 0; display: none; width: 100%; padding: .8rem 0; border: 1px solid var(--n-border); border-radius: var(--border-radius-s); background-color: #fff; box-shadow: 0 2px 12px 0 rgba(149, 157, 165, .2); opacity: 0; transition: all .3s; overflow-y: auto; z-index: 999;} .selectbox > ul > li:hover {background-color: #fff;} .selectbox > ul > li > a {display: inline-block; width: 100%; padding: 0 2rem; color: var(--n-gray-700); line-height: 4rem;} .selectbox > ul > li > a:hover {color: var(--n-gray-900); text-decoration: underline;} .selectbox_control.on + ul {top: 5.2rem; display: block; opacity: 1;} .selectbox_control.lg {padding: 1.6rem 2rem;} .selectbox_control.lg::after {width: 1.8rem; height: 1.8rem;} .selectbox_control.lg .current {font-size: 1.6rem;} .selectbox_control.lg.on + ul {top: 6rem;} /*------------------------------------------- -- list -------------------------------------------*/ .list li {position: relative; line-height: 150%;} .list li + li {margin-top: .4rem;} .list li.ref {margin-top: .25rem; padding-left: 1rem;} .list_dash li {position: relative; padding-left: 1rem; line-height: 150%;} .list_dash li + li {margin-top: .4rem;} .list_dash li:before {content: ""; position: absolute; top: 10px; left: 0; display: block; width: 5px; height: 1px; background-color: var(--n-gray-600);} .list_dash li.ref:before {display: none;} .list_dot li {position: relative; padding-left: 1rem; line-height: 150%;} .list_dot li + li {margin-top: .4rem;} .list_dot li.ref {margin-top: .25rem;} .list_dot li:before {content: ""; position: absolute; top: 10px; left: 0; display: block; width: 3px; height: 3px; border-radius: 100%; background-color: var(--n-gray-600);} .list_dot li.ref:before {display: none;} .list_ico li {position: relative; display: flex; gap: .3rem; padding-left: 0; line-height: 150%;} .list_ico li:before {content: ""; display: none;} .list_ico li + li {margin-top: .4rem;} .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%; padding: 1.2rem; border: 1px solid var(--n-gray-200); border-radius: var(--border-radius-s); font-size: 1.2rem; color: var(--n-gray-700);} .select_list li a.on {border-color: var(--n-primary); font-weight: 600; color: var(--n-gray-900); box-shadow: inset 0 0 0 .5px var(--n-primary);} .select_list li a .img_wrap {position: relative; width: 4rem; height: 4rem; margin: 0 auto; border-radius: .4rem; 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 {width: 100%; text-align: center; vertical-align: middle;} .table tr {border-top: 1px solid var(--n-gray-200);} .table th, .table td {padding: 1.2rem; border-right: 1px solid var(--n-gray-200); border-bottom: 1px solid var(--n-gray-200); font-size: 1.4rem; color: var(--n-gray-700); vertical-align: middle;} .table th {font-weight: 500; color: var(--n-gray-900); background-color: var(--n-gray-50);} .table th:last-child, .table td:last-child {border-right: 0;} /* board */ .table_board {display: block; width: 100%; border-top: 1px solid var(--n-gray-900); border-bottom: 1px solid var(--n-gray-200); font-size: 1.5rem; color: var(--n-gray-700);} .table_board tbody {display: inline-block; width: 100%;} .table_board tr {display: grid; grid-template-columns: auto; align-items: start; width: 100%; padding: 2rem 0; border-bottom: 1px solid var(--n-gray-100);} .table_board th {width: 100%; height: 100%; padding: 0; font-size: 1.5rem; font-weight: 600; color: var(--n-gray-900);} .table_board td {width: 100%; height: 100%; padding-top: 1.2rem;} .table_board .form_group {margin-bottom: 1rem;} .table_board .form_check_group {min-height: 4rem;} .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-800); 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);} .table_board.table_board_gray tr {padding: 0; padding-bottom: 2.4rem;} .table_board.table_board_gray th {padding: 2rem 1.2rem; background-color: var(--n-gray-100);} .table_board.table_board_gray td {padding: 0 1.2rem; padding-top: 2.4rem;} /* align */ .table_board td.td_left {text-align: left;} /*------------------------------------------- -- box -------------------------------------------*/ .box {border-radius: 1.2rem; font-size: 1.4rem;} .box_title {font-size: 1.4rem; font-weight: 600; color: var(--n-gray-900); margin-bottom: 1rem;} .box_outline {padding: 2rem; border: 1px solid var(--n-gray-200);} .box_outline_icon + .box_outline_title {margin-top: 1.2rem;} .box_outline_title + .box_outline_text {margin-top: .4rem;} .box_outline_title {font-size: 1.6rem; font-weight: 600; color: var(--n-gray-900);} .box_outline_text {font-size: 1.4rem; color: var(--n-gray-500);} .box_outline_icon {position: relative; width: 3.6rem; height: 3.6rem;} .box_outline_icon img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: auto;} .box_form {padding: 2rem; border-radius: var(--border-radius-s); background-color: var(--n-gray-50);} .box_form .inner {display: flex; flex-direction: column; justify-content: center; gap: 1.6rem;} .box_form .inner .img_wrap {width: 100%; max-width: 282px; margin: 0 auto;} .box_form .inner .img_wrap + div {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; border-radius: 0;} .box_cardlist .inner {padding: 2rem;} .box_cardlist option {display: none;} .box_list {padding: 2rem; background-color: var(--n-gray-200);} .box_list .form-check {} .box_guide {padding: 2rem; background-color: var(--n-gray-50);} .box_guide .title {margin-bottom: 1rem; font-size: 1.4rem; font-weight: 600; 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: 2rem; background-color: rgba(36, 150, 181, .04);} .box_green .title {font-size: 1.4rem; font-weight: 700;} .box_light {height: 100%; padding: 2rem; background-color: #E2ECF7;} .box_light .title {font-size: 1.4rem; font-weight: 700;} /*------------------------------------------- -- button -------------------------------------------*/ button {border-radius: 1.2rem;} /* 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, .select_btn.disabled, .select_btn_t2.disabled, .btn-check:checked[disabled] + .select_btn, .btn-check:checked[disabled] + .select_btn_t2, .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-300); color: var(--n-gray-500); opacity: .8;} .btn-check:checked[disabled] + .select_btn, .btn-check:checked[disabled] + .select_btn_t2, .btn-check:checked + .select_btn.disabled, .btn-check:checked + .select_btn_t2.disabled {box-shadow: inset 0 0 0 1px var(--n-gray-300);} /* btn wrap */ .btn_wrap {margin-top: 2.4rem;} .btn_group {padding: 1.6rem 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-200);} /* btn center */ .btn_center_wrap {display: flex; justify-content: center; gap: .8rem; margin-top: 1.6rem;} .btn_center_wrap button, .btn_center_wrap a {width: auto; padding: 0 2.4rem;} /* 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_lightprimary {background-color: var(--n-primary-light); color: var(--n-primary);} .n_btn_lightprimary:hover {background-color: #CBDFF2; color: var(--n-primary);} .n_btn_lightgray {background-color: var(--n-gray-200); color: var(--n-gray-700);} .n_btn_lightgray:hover {background-color: var(--n-gray-300); color: var(--n-gray-700);} .n_btn_darkgray {background-color: var(--n-gray-600); color: #fff;} .n_btn_darkgray:hover {background-color: var(--n-gray-700); 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_yellow {background-color: #fde047; color: #423806;} .n_btn_yellow:hover {background-color: #fad615; color: #423806;} .n_btn_outline_primary {background-color: transparent; border: 1px solid var(--n-primary); color: var(--n-primary); background-color: #fff;} .n_btn_outline_primary:hover {color: var(--n-primary); background-color: var(--n-gray-50);} .n_btn_outline_gray {background-color: transparent; border: 1px solid var(--n-gray-200); color: var(--n-gray-700); background-color: #fff;} .n_btn_outline_gray:hover {border-color: var(--n-gray-200); color: var(--n-gray-700); background-color: var(--n-gray-50);} .n_btn_outline_dark {background-color: transparent; border: 1px solid var(--n-gray-900); color: var(--n-gray-900); background-color: #fff;} .n_btn_outline_dark:hover {color: var(--n-gray-900); background-color: var(--n-gray-50);} .n_btn_info {background-color: var(--n-gray-100); color: var(--n-gray-700);} .n_btn_info:hover {background-color: var(--n-gray-200); color: var(--n-gray-700); border: none;} .n_btn_pop {background-color: var(--n-gray-600); color: #fff;} .n_btn_pop:hover {background-color: var(--n-gray-700); color: #fff;} .n_btn_pop_close {background-color: var(--n-gray-200); color: var(--n-gray-700);} .n_btn_pop_close:hover {background-color: var(--n-gray-300); color: var(--n-gray-700);} .btn_underline {height: auto; padding: 0; font-size: 1.5rem; color: var(--n-gray-500); text-decoration: underline; vertical-align: middle; background-color: transparent;} .btn_underline:hover {color: var(--n-gray-500);} .btn_underline_primary {height: auto; padding: 0; color: var(--n-primary); text-decoration: underline; vertical-align: middle; background-color: transparent;} .btn_underline_primary:hover {color: var(--n-primary);} .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: 3.2rem; padding: 0 1.2rem 0 3.2rem; font-size: 1.4rem; background-color: transparent; border: 1px solid var(--n-cgray-300); border-radius: .4rem; color: var(--n-gray-700);} a.btn_down {display: inline-block; line-height: 3.2rem;} .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: 2rem; height: 2rem; filter: var(--n-filter-gray5);} .btn_down:hover {color: var(--n-gray-700); background-color: rgba(15, 23, 42, .04);} /* 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.4rem; padding: 0 1.6rem; font-size: 1.6rem; font-weight: 500; border-radius: var(--border-radius-s); text-align: center;} a.n_btn_lg {display: inline-block; line-height: 5.4rem;} .n_btn_lg.w340 {max-width: 340px;} .n_btn_lg.w260 {max-width: 260px;} .n_btn_m {width: 100%; height: 5rem; padding: 0 1.2rem; font-size: 1.5rem; font-weight: 500; border-radius: var(--border-radius-s); text-align: center;} a.n_btn_m {display: inline-block; line-height: 5rem;} .n_btn_s {width: 100%; height: 4.8rem; padding: 0 1.2rem; font-size: 1.5rem; border-radius: .8rem; text-align: center;} a.n_btn_s {display: inline-block; line-height: 4.8rem;} .n_btn_xs {height: 4rem; padding: 0 1.6rem; font-size: 1.4rem; border-radius: .8rem; text-align: center;} a.n_btn_xs {display: inline-block; line-height: 4rem;} .n_btn_auto {height: 3.6rem; padding: 0 1.6rem; font-size: 1.3rem; border-radius: .8rem; text-align: center;} a.n_btn_auto {display: inline-block; line-height: 3.6rem;} .oval {border-radius: 999px;} /* btn style */ .btn_link_ico {position: relative; display: inline-block; padding: 0; font-size: 1.4rem; font-weight: 500; color: var(--n-gray-500); background-color: transparent; vertical-align: middle; line-height: normal;} .btn_link_ico::after {background: url(../svg/chevron-right.svg) no-repeat center/100%; content: ""; transform: translateY(3px); display: inline-block; width: 1.6rem; height: 1.6rem; filter: var(--n-filter-gray5);} .btn_link_ico:hover {color: var(--n-gray-500);} /* icon */ .icon_help {width: 2rem; height: 2rem; 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);} .icon_help2 {width: 2rem; height: 2rem; padding: 0; margin-left: .4rem; background: url(../svg/question-circle.svg) no-repeat center center; background-size: 100%; background-position: 0 0; filter: var(--n-filter-gray9);} /* select button */ .btn_list {display: flex; flex-wrap: wrap; gap: .6rem .4rem;} 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; font-size: 1.5rem; font-weight: 500; color: var(--n-gray-700); border: 1px solid var(--n-border); border-radius: var(--border-radius-s); text-align: center; word-break: keep-all;} .select_btn {justify-content: center;} .select_btn_t2 {justify-content: space-between;} .select_btn_sm {width: auto; height: auto; padding: .8rem 1.2rem; border-radius: .8rem; font-size: 1.3rem;} .select_btn_lg {padding: 2rem 1.2rem;} .btn-check + .select_btn:hover, .btn-check + .select_btn_t2:hover {color: var(--n-gray-700); border: 1px solid var(--n-border); background-color: var(--n-gray-50);} .btn-check:checked + .select_btn, .btn-check:checked + .select_btn_t2, .select_btn.on {border-color: var(--n-primary); box-shadow: inset 0 0 0 .5px var(--n-primary);} /* selector */ select.select_box::-ms-expand {display: none;} select.select_box { position: relative; display: revert; width: auto; padding: 1rem 2.4rem 1rem 1.2rem; font-size: 1.4rem; font-weight: 500; border: 1px solid var(--n-border); border-radius: .4rem; color: var(--n-gray-700); background: url(../svg/chevron-down.svg) no-repeat; background-position: 85% 50%; background-size: 10px; -webkit-appearance: none; -moz-appearance: none; appearance: none; } select.select_box + select.select_box {margin-left: .4rem;} /* .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: .4rem; width: 100%; margin-bottom: .8rem; overflow: hidden;} .badge {display: inline-block; padding: 4px 8px; font-size: 1.3rem; font-weight: 400; border-radius: 10rem;} .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 transparent; color: var(--n-primary);} .badge_red {background-color: #ffe2e2; border: 1px solid #ffe2e2; color: #fb2c36;} .badge_purple {background-color: #f3e8ff; border: 1px solid #f3e8ff; color: #ad46ff;} .badge_green {background-color: #dcfce7; border: 1px solid #dcfce7; color: #00c951;} .badge_yellow {background-color: #fef3c6; border: 1px solid #fef3c6; color: #d08700;} .badge_blue {background-color: #dbeafe; border: 1px solid #dbeafe; color: #2b7fff;} .badge_black {background-color: var(--n-gray-100); border: 1px solid var(--n-gray-100); color: var(--n-gray-700);} .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 #fb2c36; color: #fb2c36;} .badge_purple-line {background-color: transparent; border: 1px solid #ad46ff; color: #ad46ff;} .badge_green-line {background-color: transparent; border: 1px solid #00c951; color: #00c951;} .badge_yellow-line {background-color: transparent; border: 1px solid #d08700; color: #d08700;} .badge_blue-line {background-color: transparent; border: 1px solid #dbeafe; color: #dbeafe;} .badge_LGT {background-color: #ffe4f7; border: 1px solid #ffe4f7; color: #E6007E;} .badge_KTF, .badge_KT {background-color: #d5f8f7; border: 1px solid #d5f8f7; color: #226068;} .badge_SKT {background-color: #e7e7ff; border: 1px solid #e7e7ff; color: #3617CE;} /*------------------------------------------- -- text -------------------------------------------*/ h1 {font-size: 2.4rem; font-weight: 700; line-height: 137.5%; color: var(--n-gray-900);} h2 {font-size: 2rem; font-weight: 600; line-height: 137.5%; color: var(--n-gray-900); margin-bottom: 1.6rem; word-break: keep-all;} .breadcrumb {font-size: 1.1rem; color: var(--n-gray-500); margin-bottom: 0;} .text_lg_size {font-size: 1.7rem;} .text_default_size {font-size: 1.5rem;} .text_md_size {font-size: 1.4rem;} .text_sm_size {font-size: 1.3rem;} .text_default_color {color: var(--n-gray-700);} .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: 600;} .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 {counter-reset: section; display: flex; flex-direction: column; justify-content: space-between; gap: .8rem;} .step_item {position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 1.2rem; flex: 1; width: 100%; padding: 1.6rem 0; font-size: 1.4rem; color: var(--n-gray-700);} .step_item + .step_item::before {content: ""; position: absolute; top: -1.5rem; left: 50%; transform: translateX(-50%); display: block; width: 1.8rem; height: 1.8rem; background: url(../svg/chevron-down.svg) center/100% no-repeat; filter: var(--n-filter-gray4);} .step_item .img_wrap {position: relative; width: 5.6rem; height: 5.6rem; border-radius: var(--border-radius-s); background-color: var(--n-gray-50);} .step_item .img_wrap img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 3.2rem; height: 3.2rem;} .step_item .desc {width: 100%; text-align: center;} .step_item .title {display: flex; flex-direction: row; justify-content: center; align-items: center; gap: .8rem; margin-bottom: .4rem; font-size: 1.6rem; font-weight: 600; color: var(--n-gray-900);} .step_icon {counter-increment: section; display: inline-flex; justify-content: center; width: 1.8rem; height: fit-content; padding: .3rem 0; border-radius: 10rem; background-color: var(--n-secondary); color: #fff; text-align: center; line-height: 1;} .step_icon::before {content: counter(section); font-size: 1.2rem; font-weight: 600;} .step.type2 {} .step.type2 .step_item {display: grid; grid-template-columns: 5.6rem 1fr; align-items: start; justify-content: start; gap: 0 1.6rem; padding: 1rem 0;} .step.type2 .step_item + .step_item::before {} .step.type2 .step_item .img_wrap {grid-column: 1 / 2; grid-row: 1 / 2 span; min-width: 5.6rem;} .step.type2 .step_item .title {grid-column: 2 / 2; justify-content: start; align-items: center;} .step.type2 .step_item .desc {grid-column: 2 / 2; font-size: 1.3rem; color: var(--n-gray-500); text-align: start;} .step.type3 {gap: 1.2rem;} .step.type3 .step_item {justify-content: start; align-items: start; padding: 2rem; border: 1px solid var(--n-gray-200); border-radius: var(--border-radius-d);} .step.type3 .step_item > * {width: 100%;} .step.type3 .step_item + .step_item::before {display: none;} .step.type3 .step_item .img_wrap {width: 100%; height: auto; border-radius: 0; background-color: transparent; text-align: center;} .step.type3 .step_item .img_wrap img {position: static; transform: unset; width: auto; max-width: 100%; height: auto;} .step.type3 .step_item .title {justify-content: start;} .step.type3 .step_icon {width: auto; padding: .4rem .8rem; border-radius: 10rem; line-height: normal; background-color: var(--n-primary-light);} .step.type3 .step_icon::before {content: "STEP" counter(section); color: var(--n-primary);} /*------------------------------------------- -- advice -------------------------------------------*/ .advice {display: flex; flex-direction: column; gap: 2.4rem;} .advice_item {display: flex; gap: 1.6rem; font-size: 1.3rem; color: var(--n-gray-600); line-height: 1.65; word-break: keep-all;} .advice_item .img_wrap {position: relative; flex-basis: 4rem; min-width: 4rem; height: 4rem; margin-top: .4rem;} .advice_item .img_wrap img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 4rem; height: 4rem;} .advice_item .title {font-size: 1.6rem; font-weight: 600; color: var(--n-gray-900);} .advice_item .desc {line-height: 150%;} .advice.type2 .advice_item {flex-direction: column; gap: 1.2rem;} .advice.type2 .advice_item .img_wrap {flex-basis: auto; width: 4rem; height: 4rem;} /*------------------------------------------- -- filter aside -------------------------------------------*/ .filter_aside {position: fixed; bottom: 0; left: 0; width: 100%; height: fit-content; padding: 0 2rem; border-radius: var(--border-radius-d) var(--border-radius-d) 0 0; background-color: #fff; box-shadow: 0 -2px 24px 0 rgba(149, 157, 165, .48); z-index: 10;} /* header */ .filter_aside .filter_header {display: flex; justify-content: space-between; align-items: center; padding: 2rem 0;} .filter_aside .filter_header .title {font-size: 1.6rem; font-weight: 700; color: var(--n-gray-900);} .filter_aside .filter_header .btn_opener { width: 2.8rem; height: 2.8rem; border-radius: 0; background-repeat: no-repeat; background-position: center; background-size: 100%; background-color: transparent; background-image: url(../svg/plus.svg); } .filter_aside .filter_header.on .btn_opener {background-image: url(../svg/x.svg);} /* body, footer */ .filter_aside .filter_body {display: none;} .filter_aside .filter_body .filter_group {max-height: 235px; padding-bottom: 2rem; overflow-x: hidden; overflow-y: auto;} .filter_aside .filter_footer {padding: 2rem 0;} /* on */ .filter_aside .filter_header.on + .filter_body {display: block;} /** type2 **/ .filter_aside.type2 .box_opener {width: 100%; padding: 1.6rem 0; font-size: 0; text-align: center;} .filter_aside.type2 .box_opener button {width: 2.4rem; height: 1rem; filter: var(--n-filter-gray4); background: url(../svg/keyboard-arrow-up.svg) no-repeat center/100% transparent;} .filter_aside.type2 .box_opener button.on {background-image: url(../svg/keyboard-arrow-down.svg);} .filter_aside.type2 .btn_group {padding: 0;} /** custom **/ .filter_aside .select_btn {font-weight: 400; color: var(--n-gray-500);} .filter_aside .btn-check:checked + .select_btn, .filter_aside .select_btn.on {font-weight: 500; background-color: #ECF0F8;} /*------------------------------------------- -- space -------------------------------------------*/ .pt16 {padding-top: 1.6rem;} .pt24 {padding-top: 2.4rem;} .pb16 {padding-bottom: 1.6rem;} .pb24 {padding-bottom: 2.4rem;} .pb32 {padding-bottom: 3.2rem;} .pb40 {padding-bottom: 4rem;} .pb_fixbtn {padding-bottom: 8rem;} .mb16 {margin-bottom: 1.6rem;} .mb24 {margin-bottom: 2.4rem;} .mb32 {margin-bottom: 3.6rem;} .mb40 {margin-bottom: 4rem;} /*------------------------------------------- -- modal -------------------------------------------*/ .modal-content {border-radius: 1.6rem;} /* .modal-content > div:first-child.modal-body:not(.pop_content) {padding-top: 2rem;} */ .modal-header + .modal-body {padding-top: 0;} .modal-content > div:only-child.modal-body {padding: 0 2rem;} .modal-header {padding: 2rem; border: 0;} .modal-header .btn-close {padding: 0; width: 2.4rem; height: 2.4rem; background-size: 50%;} .modal-footer {padding: 2rem;} .modal-body {padding: 0 2rem; padding-top: 2rem;} .modal-body, .modal-footer {border: none;} .modal-body .inner {max-height: 70vh; word-break: keep-all;} .modal-title {font-size: 1.8rem; font-weight: 600; color: var(--n-gray-900);} .modal_text {list-style: "\00B7 "; padding-left: 1rem;} .modal_text li {padding-left: 1rem; 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;} /*------------------------------------------- -- tooltip -------------------------------------------*/ .tooltip {position: relative; opacity: 1; z-index: unset;} .tooltip:hover .tooltip_msg, .tooltip:hover .tooltip_msg::before {animation: tooltips 300ms ease-out forwards;} .tooltip_msg { position: absolute; left: 50%; transform: translateX(-50%); display: inline-block; width: max-content; max-width: 100%; padding: .8rem 1rem; border-radius: .4rem; font-size: 1.3rem; text-align: center; color: #fff; background-color: var(--n-primary); box-shadow: rgba(15, 23, 42, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px; line-height: 147.4%; visibility: hidden; opacity: 0; z-index: 1001; } .tooltip_msg::before { content: ''; position: absolute; left: 50%; transform: translate(-50%); border: 5px solid transparent; z-index: 1001; } /* position default(down) */ .tooltip_msg:not([flow]), .tooltip_msg[flow^="down"] {top: calc(100% + 10px);} .tooltip_msg:not([flow])::before, .tooltip_msg[flow^="down"]::before {top: -5px; border-top-width: 0; border-bottom-color: var(--n-primary);} /* flow up */ .tooltip_msg[flow^="up"]{bottom: calc(100% + 10px);} .tooltip_msg[flow^="up"]::before {bottom: -5px; border-bottom-width: 0; border-top-color: var(--n-primary);} @keyframes tooltips { to { visibility: visible; opacity: 1; } } /*------------------------------------------- -- 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: 8rem 0; word-break: keep-all; text-align: center;} .error_wrap img {width: 25%; min-width: 100px;} .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: 10rem; height: 10rem;} /* reset */ .edit_reset {font-size: 1.4rem;} .edit_reset table tbody {display: revert; width: revert;} .edit_reset table tr {display: revert; width: revert; border-bottom: revert;} .edit_reset table td {width: revert; height: revert; padding-top: revert;} /*********************************************************************************************************************** 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 {display: none;} .carousel_tablet {display: inline-block;} /** 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) { .container { max-width: unset; } } @media screen and (min-width: 1200px) { /*------------------------------------------- -- desktop (1200px~) -------------------------------------------*/ /*** A. Default ***/ input[type="text"], input[type="password"], input[type="number"], input[type="date"], input[type="email"], textarea, select.form-select {width: 100%;} /*** B. Layout ***/ /* -- container*/ .container, .container-lg, .container-md, .container-sm { max-width: 1240px; } /* -- header */ .header .header_content {align-items: center; padding: 0; padding-bottom: 1rem;} .header .logo img {max-height: 4rem;} .header_top {display: block;} .header_content .moblie_wrap {display: none;} .header_content .pc_wrap {display: flex;} /* -- sub header */ .sub_header {top: 12rem; gap: 1.6rem; max-width: 792px; padding: 2.4rem 0;} .body_wrap_agent .sub_header {top: 0;} .sub_header .title_wrap {justify-content: space-between; width: 100%;} .sub_header .title {display: block; font-size: 1.8rem; font-weight: 600;} .sub_header .title_wrap .label {font-size: 1.5rem; font-weight: 500; color: var(--n-primary);} .sub_header_step {gap: .8rem;} .sub_header_step li {width: .8rem; height: .8rem;} .sub_header_step li.on {width: 2.4rem; height: 2.4rem;} /*** -- fullmenu ***/ .full_menu_modal .menu_list .title.nodepth::after {content: ''; position: absolute; top: 50%; right: -1.6rem; transform: translateY(-50%); display: block; width: 1.6rem; height: 1.6rem; background: url(../svg/chevron-right.svg) no-repeat center/100%;} /* fullmenu - header */ .full_menu_modal .modal-header {padding: 3.2rem;} .full_menu_modal .sign {gap: 1.2rem;} .full_menu_modal .sign .title {font-size: 1.6rem;} /* fullmenu - body */ .full_menu_modal .modal-body {padding: 0;} .full_menu_modal .menu_list {padding: 3.2rem; padding-top: 0;} .full_menu_modal .menu_list > li {display: flex; justify-content: space-between; gap: 4rem; padding: 3.2rem 0;} .full_menu_modal .menu_list > li:last-child {border-bottom: 0;} .full_menu_modal .menu_list .title {width: auto; padding: 0; font-size: 1.8rem;} .full_menu_modal .menu_list .title.nodepth::after {width: 2rem; height: 2rem;} .full_menu_modal .sub_list {display: flex; gap: 4rem; width: 85%; padding-bottom: 0;} .full_menu_modal .sub_list > li {} .full_menu_modal .sub_list > li > a {padding: 0; font-size: 1.8rem;} /* -- body */ .body_wrap {padding-top: calc(12rem + 4rem);} /* -- nav */ .gnb_wrap {display: flex; justify-content: end; align-items: center;} /* -- footer */ footer {padding: 4rem 0; margin-top: 8rem;} footer .logo {width: auto; height: 2rem;} footer .family_info {flex-direction: row; justify-content: space-between; align-items: center;} footer .family {width: 180px;} footer .family ul {bottom: 5.2rem;} footer .company_info {margin-top: 2rem; font-size: 1.3rem;} footer .company_info li span {width: auto;} footer .company_info li span + span {margin-left: 1rem; padding-left: 1rem;} footer .company_info li span + span:not(.copyright)::before {display: block;} footer .company_info .copyright {margin-top: 0; margin-left: auto;} .footer_bottom {margin-top: 3.2rem;} footer .policy_list {font-size: 1.6rem; gap: 2rem;} footer .call_list {gap: .8rem 1.6rem;} footer .call_list li:first-child, footer .call_list li:last-child {width: auto;} footer .call_list li:nth-child(3) {padding-right: 1.6rem;} /* -- preview bottom */ .preview_wrap {max-width: 588px; border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;} .preview_header {padding: 2.4rem 0;} .preview_header .head {font-size: 2rem;} .preview_header .n_btn_icon {} .preview_body {padding-top: 3.2rem;} .preview_body .price_info .title {font-size: 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 var(--n-gray-300);} /* -- popup */ .main_pop_layer {width: 100%; margin: 0 auto;} .main_pop_layer .pop_content {border-radius: 2rem 2rem 0 0;} .main_pop_layer .pop_footer {border-radius: 0 0 2rem 2rem;} .main_pop_layer .pop_footer .pop_close {font-size: 1.6rem;} /* -- flex */ .flex_row {margin: 0 -1.2rem; gap: 1.6rem 0;} .flex_row > * {padding: 0 1.2rem;} .flex_row.small {margin: 0 -.4rem; gap: .8rem 0;} .flex_row.small > * {padding: 0 .4rem;} .form_group .row {margin: 0 -.6rem} .form_group .row > * {padding: 0 .6rem;} /*** C. login ***/ .login_wrap {width: 35%; padding: 8rem 0;} /*** D. Main ***/ .main_content {display: block; padding-top: 12rem;} .main_title_area {margin-bottom: 3.2rem;} .main_title_area.for_pc {display: flex;} .sec_title {display: block; font-size: 2.8rem;} .main_title_area .btn_link_ico {font-size: 1.6rem;} .main_title_area .btn_link_ico::after {width: 2rem; height: 2rem; margin-left: 0;} .main_btn_wrap .link_all {padding-right: calc(1rem + 2rem); font-size: 1.6rem;} .main_btn_wrap .link_all::after {width: 2rem; height: 2rem;} /* -- main banner */ .carousel_tablet, .for_tabelet, .for_mobile {display: none;} .carousel_pc, .for_pc {display: inline-block;} .none_pc {display: none;} .main_banner {flex-direction: column; padding-bottom: 0;} /* .main_banner img {width: auto; height: 100%;} */ .main_banner .main_banner_controller {bottom: 4rem;} .main_banner .main_banner_controller .controller_box {left: 0; transform: unset; font-size: 1.4rem;} /* -- main service area */ .main_service_area {padding: 4rem 0 5.6rem 0;} .main_service_area .inner {flex-direction: row; gap: 4rem;} .main_service_area .usage_box {align-items: center; width: 50%;} .main_service_area .usage_item_large {width: calc(100% - 33.33333%);} .main_service_area .usage_item_large .title {margin-bottom: 0; font-size: 1.8rem; text-align: start;} .main_service_area .usage_item_small {width: 33.33333%;} .main_service_area .usage_box .usage_info .desc {text-align: center;} .main_service_area .usage_box .usage_list {padding-top: 2.8rem; padding-left: 2.4rem; margin-top: 0;} .main_service_area .usage_box .usage_list li span {font-size: 1.7rem;} .main_service_area .service_group {align-items: center; gap: 2.4rem; width: 50%;} .main_service_area .service_group li {flex: 1; width: auto;} .main_service_area .service_link {font-size: 1.6rem;} .main_service_area .service_link .img_wrap {width: 9.6rem; height: 9.6rem; border-radius: 1.6rem;} .main_service_area .service_link img {width: 4rem;} .main_service_area .service_group .tooltip {top: -36px; font-size: 1.4rem;} /*** -- main product list ***/ .main_product_list {padding: 8rem 0;} .main_product_list .tab_box_oval {margin-bottom: 1.6rem;} /* rate list */ .rate_card {padding: 3.2rem;} .rate_card_title {font-size: 1.6rem;} .rate_card_info li {font-size: 1.5rem;} .rate_card_info li span.ref {font-size: 1.5rem;} .rate_card_info li:first-child {font-size: 2.4rem;} .rate_card_bottom .rate_origin {font-size: 1.5rem;} .rate_card_bottom .rate_price .discount {font-size: 2.8rem;} .rate_card_bottom .rate_price .discount span {font-size: 2.2rem;} .rate_card_bottom .rate_price .ref {font-size: 1.3rem;} .rate_card_bottom .rate_benefit {font-size: 1.5rem;} /* phone list */ .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 {display: block; padding: 7rem 0 4rem 0;} .main_event_area .thumb_card_desc {padding: 0 .4rem;} /* -- main review area */ .main_review_area {width: 100%; padding: 4rem 0 7rem 0;} .review_card {padding: 3.2rem; border-radius: var(--border-radius-d);} .review_card .grade_icon {width: 2rem; height: 2rem;} .review_content_text {min-height: 7.2rem; font-size: 1.6rem;} .review_card_info {font-size: 1.4rem;} /* -- main benefit area */ .main_benefit_area {padding: 8rem 0;} .main_benefit_area .sec_header span {font-size: 2.4rem;} .main_benefit_area .sec_header .sec_title {margin-top: 2rem; font-size: 3.6rem;} .benefit_card_list {flex-wrap: nowrap;} .benefit_card {flex-direction: column; align-items: normal; gap: 0; height: 100%; padding: 3.2rem; border-radius: var(--border-radius-lg);} .benefit_card .title {font-size: 2rem;} .benefit_card .title p {margin-top: .8rem; font-size: 1.6rem;} .benefit_card img {margin-top: auto; margin-left: auto; width: 10rem;} /*** -- main cs area ***/ .main_cs_area {padding: 7rem 0 8rem 0;} .main_cs_group {display: flex; flex-wrap: nowrap; gap: 4rem;} /* notice box */ .notice_box {width: 100%;} .notice_box .notice_list li {gap: 1.2rem; padding: 2.4rem 3.2rem; border-radius: var(--border-radius-lg);} .notice_box .notice_list li img {width: 2.4rem;} .notice_box .notice_list li a {font-size: 1.6rem;} .notice_box .notice_list li .date {font-size: 1.4rem;} /* call cs box */ .call_cs_box {width: 100%; margin-top: 0;} .call_cs_box .call_cs_content {padding: 3.2rem;} .call_cs_box .call_cs_content li:not(:last-child) {font-size: 1.6rem;} .call_cs_box .call_cs_content .cs_all {font-size: 2rem;} .call_cs_box .call_cs_content .cs_desc {font-size: 1.6rem;} .call_cs_box .call_cs_content .cs_desc p {font-size: 1.4rem;} /*** -- main swiper area ***/ /* common */ .main_swiper_area {width: 100%; margin: 0;} .main_swiper_area .swiper-container {padding: 0;} .main_swiper_area .swiper-slide {width: 100%;} /** == custom == **/ /* main banner swiper */ .main_banner .swiper-container {padding: 0;} .main_banner .swiper-slide {overflow: hidden;} .main_banner .swiper-pagination {position: static; margin-top: 1.6rem; line-height: .6rem;} .main_banner .swiper-pagination-current {color: #fff;} .main_event_article .swiper-container {padding-bottom: 0;} .main_event_article .swiper-pagination {display: none;} /* rate swiper */ .main_product_list .swiper-container {padding: 0;} /* event swiper */ .main_event_area .main_swiper_area {max-width: 1240px; margin: 0 auto;} .main_event_area .swiper-container {padding-bottom: 3.8rem; overflow: hidden;} .main_event_area .swiper-pagination {display: block;} /* .main_event_area .main_swiper_area .swiper {padding-bottom: 0;} .main_event_area .main_swiper_area .swiper-pagination {display: none;} */ /* review swiper */ .main_review_area .main_swiper_area {max-width: 1240px; margin: 0 auto;} .main_review_area .swiper-container {overflow: unset;} /*** E. Sub ***/ /* -- common */ .page_title {margin-bottom: 2.8rem;} .alert_wrap > * {font-size: 1.6rem;} .alert_img {padding: 1.6rem 0 1rem 0;} .alert_img span {width: 3.6rem; height: 3.6rem;} .agent_logo img {height: 2.8rem;} /* document */ .doc_wrap {} .doc_head {margin-bottom: 48px; padding-top: 50px;} .doc_head h2 {font-size: 20pt; margin-bottom: 0;} /* .doc_head_logo {height: 35px;} */ .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;} .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; font-size: 9.75pt;} .doc_notice .box .title {font-size: 9.75pt;} .doc_seal {padding-top: 24px; font-size: 11pt;} .doc_seal p {font-size: 16pt;} .doc_seal .seal {margin-top: 24px; font-size: 16pt;} .doc_seal .seal img {width: 60px;} /* -- 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.6rem; height: 1.6rem;} */ /* -- board list */ .list_title button {font-size: 1.6rem;} .board_list {margin-top: 2.8rem;} .board_list li {padding: 2.4rem 0;} .board_list li .title {font-size: 1.5rem;} .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;} /* size */ .board_list.size_sm li {padding: 1.6rem 0;} /* etc */ .board_list li.tb {flex-direction: row; align-items: center;} /* -- card list */ .card_list_wrap {padding-top: 2.4rem;} .card_list {margin: 0 -1.2rem;} .card_list_item {padding: 0 1.2rem; margin-bottom: 1.6rem; font-size: 1.6rem;} .card_link {padding: 2.4rem; border-radius: var(--border-radius-lg); font-size: 1.6rem;} .card_link .title {font-size: 1.6rem;} /* size */ .card_list.size_sm {margin: 0 -.6rem;} .card_list.size_sm .card_list_item {padding: 0 .6rem; margin-bottom: 1.2rem;} .card_list.size_sm .card_link {padding: 2rem; border-radius: var(--border-radius-d); font-size: 1.5rem;} .card_list.rate_list .service_desc {} /* -- price list */ .price_list {font-size: 1.6rem;} .price_list li.depth {font-size: 1.4rem;} .price_list li + li {padding-top: 2.4rem;} /* .price_list li.total {margin-top: 1.6rem; border-top: 1px solid var(--n-gray-300);} */ /* -- thumb card */ .thumb_list_item {width: 25%;} .thumb_card_img {border-radius: var(--border-radius-d);} .thumb_card_desc {padding: 0 .8rem; margin-bottom: 1.6rem;} .thumb_card_desc .title {font-size: 1.6rem;} /* -- tab */ .tab_box {margin-bottom: 3.2rem} .tab_box_link {font-size: 1.5rem;} /* .tab_box_list_t2 {gap: 10px 0;} */ .tab_line_wrap {margin-bottom: 2.4rem;} .tab_box_list_t3 {gap: .8rem;} .tab_box_oval {margin-bottom: 4rem;} .tab_box_oval .tab_link {} .tab_line_wrap {} .tab_line_link {padding: 1.6rem 0; font-size: 1.6rem;} .tab_login_link {font-size: 1.6rem;} /* -- search */ .search_wrap {padding: 2rem 0;} .search_box {max-width: 588px; margin: 0 auto;} .search_box input {height: 5.6rem; font-size: 1.8rem; padding: 1rem 2rem;} .search_box .search_btn {width: 5.6rem; height: 5.6rem;} .search_box .search_btn:before {} /* -- order layout */ .order_container {display: flex; gap: 4rem; max-width: 1240px; padding: 0 2rem;} .order_content {flex: 1 1 auto; padding: 0;} .order_group {padding: 4rem 0;} .order_payment {position: sticky; position: -webkit-sticky; top: calc(137px + 1.6rem); flex: 0 0 auto; width: 384px; height: fit-content; padding: 2.4rem; border: 1px solid var(--n-cgray-200); border-radius: 2rem; background-color: #fff; box-shadow: 0 2px 24px 0 rgba(149, 157, 165, .32);} /* -- guide */ .guide_area {font-size: 1.6rem;} .guide_area .guide_con {margin-top: 4rem;} .guide_area .benefit_card {flex-direction: row;} .guide_area .benefit_card img {margin: unset; width: 6rem;} /* -- 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 .title {font-size: 1.8rem; -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 {border-top: 0;} .rate_list_wrap > .inner {display: flex; gap: 4rem; max-width: 1240px; margin: 0 auto;} .product_select + .rate_list_wrap {padding-top: 1.6rem;} .rate_content .rate_list_wrap .card_list.rate_list {flex-direction: column;} .card_list.rate_list {flex: 1; margin: 0 -1.2rem;} .card_list.rate_list .card_list_item {padding: 0 12px; margin-bottom: 2.4rem;} .card_list.rate_list .card_rate_link {padding: 3.2rem; border-radius: var(--border-radius-lg);} .card_list.rate_list .title {margin-bottom: 2.4rem; font-size: 1.6rem;} .card_list.rate_list .content_group {flex-direction: row; gap: 4rem;} .card_list.rate_list .detail {font-size: 1.6rem;} .card_list.rate_list .desc li:first-child {font-size: 2.8rem;} .card_list.rate_list .desc li:first-child::before {width: 2rem; height: 2rem;} .card_list.rate_list .desc li:last-child {margin-left: 2rem; padding-left: 2rem;} .card_list.rate_list .desc li .qos {font-size: 1.5rem;} .card_list.rate_list .detail .ref {width: 100%; font-size: 1.3rem;} .card_list.rate_list .price {flex: 0 0 auto; font-size: 3.2rem;} .card_list.rate_list .price span {font-size: 2.6rem;} .card_list.rate_list .price .ref {font-size: 1.4rem;} /* ##### rate detail real new ##### */ .rate_view_column > .inner {display: flex; flex-direction: row; gap: 4rem; max-width: 1200px; margin: 0 auto;} /* rate info */ .rate_info {flex: 1;} .rate_info .inner {margin: 0; padding: 3.2rem; border: 1px solid var(--n-gray-200); border-radius: var(--border-radius-lg); box-shadow: none;} .rate_info .header .title {font-size: 1.6rem;} .rate_info .detail {font-size: 1.6rem;} .rate_info .detail .desc li:last-child {margin-left: 2rem; padding-left: 2rem;} .rate_info .detail .desc li:first-child {font-size: 2.8rem;} .rate_info .detail .desc li:first-child .icon {width: 2rem; height: 2rem; margin-top: 1%;} .rate_info .price .desc {font-size: 3.2rem;} .rate_info .price .desc p span {font-size: 2.6rem;} /* rate select */ .rate_select_area {position: sticky; position: -webkit-sticky; top: calc(12rem + 3.2rem); max-width: 384px; min-width: 384px; padding: 2.4rem; border-radius: var(--border-radius-lg); box-shadow: 0 2px 24px 0 rgba(149, 157, 165, .32);} .body_wrap_agent .rate_select_area {top: 3.2rem;} .rate_select_area .box_opener {display: none;} .rate_select_area .rate_select_box {max-height: 60vh;} .rate_select_area .btn_group {padding: 0;} .rate_select_area .ref_stop {padding: 1.2rem;} /* ##### rate detail real new ##### */ /* -- addon */ .addon_content .card_list.rate_list .card_list_item {width: 50%;} /* -- review */ .review_list {} .review_list_item {gap: 2.4rem; padding: 2.4rem 0; font-size: 1.6rem;} .review_list_header .review_info {font-size: 1.3rem;} .review_list_header .grade_icon {width: 2rem; height: 2rem;} .review_list_content .title {margin-bottom: .8rem; font-size: 1.6rem;} .review_list_content .desc {font-size: 1.5rem;} .review_list_content .img_wrap {width: 10.8rem; min-width: 10.8rem; height: 10.8rem;} .grade_btn_wrap .grade_btn {width: 3.2rem; height: 3.2rem;} /* -- qna */ .qna_wrap {width: 100%; padding: 0; margin: 0; margin-top: 4rem; border-top: 0;} .qna_tab_wrap {margin-top: 2.4rem;} .qna_acc_wrap {margin-top: 1.6rem;} .qna_acc_wrap .acc_item {padding: 2.4rem 0;} .qna_acc_wrap .acc_header_link {padding-right: 4.8rem;} .qna_acc_wrap .acc_header .acc_header_link::after {width: 3.2rem; height: 3.2rem; background-size: 2rem;} .qna_acc_wrap .acc_content {margin-top: 1.6rem; padding-left: 2rem;} .qna_acc_wrap .q_mark {flex-basis: 2.8rem; width: 2.8rem; height: 2.8rem; line-height: 2.8rem;} /* 부가서비스 항목*/ .qna_acc_wrap .addType {width:6rem; line-height: 2; margin-right: .8rem; font-size: 1.3rem;} /* -- notice */ .notice_wrap {margin-top: 3.2rem;} .notice_list_item {padding: 2.4rem 0;} .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_list_item.order_item {font-size: 1.5rem;} .notice_list_item.order_item .title {font-size: 1.7rem;} .notice_list_item.order_item .title_status {font-size: 1.6rem;} .notice_list_item.order_item .text ul {flex-direction: row;} .notice_list_item.order_item .text ul li {position: relative; gap: .8rem;} .notice_list_item.order_item .text ul li span {width: auto;} .notice_list_item.order_item .text ul li + li {padding-left: 1rem; margin-left: 1rem;} .notice_list_item.order_item .text ul li + li::before {content: ''; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 1px; height: 10px; background-color: var(--n-gray-300);} .notice_list_item.order_item .btn_group {justify-content: start; margin-top: 1.6rem;} /* -- 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;} /* -- online cs */ .agree_group {margin-top: 3.2rem;} .agree_box {font-size: 1.4rem;} .agree_check .n_check_label {font-size: 1.6rem;} /* -- form download */ .download_wrap .card_link {gap: 12rem;} .download_wrap .card_list_item {width: 50%; /* margin-bottom: 2.4rem; */} .download_wrap .card_link .icon img {width: 2.4rem; height: 2.4rem;} /* -- pagination */ .pagination {margin-top: 3.2rem;} .page_link {font-size: 1.5rem;} /* -- apply change */ .applychg_tab.tab_box_list li {flex: 1;} /* -- contact */ .company_img_wrap {height: 25rem; margin-top: -60px;} .company_box {height: 100%; margin-bottom: 0; border-radius: 1.6rem;} .company_box img {width: 12rem !important;} /* -- prepaid */ .charge_wrap .table_board td {line-height: 34px;} .charge_wrap .input_flex button, #smsAuth .input_flex button {min-width: 13rem;} /* -- mypage */ .my_wrap {padding: 4rem 0; margin-bottom: -8rem;} .my_info.joinInfo {max-width: 1200px; margin: 0 auto;} .my_info.joinInfo > .flex_row {gap: 1.6rem 0;} .my_info.joinInfo .header {flex-direction: row; justify-content: space-between; padding: 3.2rem; margin-bottom: 2.4rem; border-radius: var(--border-radius-d);} .my_info.joinInfo .header_top {font-size: 2.4rem;} .my_info.joinInfo .header_bottom {width: 25%; padding-top: 0; margin-top: 0; border-top: 0; font-size: 1.6rem;} .my_info.joinInfo .content_box {padding: 0 1.2rem; margin-bottom: .8rem;} .my_info.joinInfo .content_box .title_wrap {padding: 3.2rem; padding-bottom: 2.4rem; border-radius: var(--border-radius-d) var(--border-radius-d) 0 0;} .my_info.joinInfo .content_box .title_wrap h2 {font-size: 1.7rem; 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 {font-size: 1.4rem;} .my_info.joinInfo .content_box > .order_list, .my_info.joinInfo .content_box > .order_box {padding: 3.2rem; padding-top: 0; border-radius: 0 0 var(--border-radius-d) var(--border-radius-d);} .my_info.joinInfo .content_box .order_list .title, .my_info.joinInfo .content_box .order_list .text {font-size: 1.6rem;} .my_info.joinInfo .content_box ul .rateplan {font-size: 1.6rem;} .my_info.joinInfo .content_box ul .btn_group .btn {min-height: 4rem; font-size: 1.4rem;} .my_info.joinInfo .content_box .box_guide .text {padding: 0; margin: 0;} .my_info.joinInfo .content_box .amount_info {} .my_info.joinInfo .content_box .amount_info + .amount_info {margin-top: 2.4rem;} .my_info.joinInfo .content_box .amount_info .box_title {font-size: 1.6rem;} .my_info.joinInfo .content_box .amount_info .price_list.type2 {padding: 2.4rem;} .my_info.joinInfo .content_box .amount_info .price_list.type2 li {flex-wrap: nowrap;} .my_info.joinInfo .content_box .point_info {font-size: 1.8rem;} .my_info.joinInfo .content_box .point_info .acc {font-size: 2.4rem;} .my_info.joinInfo .content_box .point_info .ref {} .my_info.joinInfo .charge_area {flex-direction: row;} .my_info.joinInfo .charge_area .total_info {font-size: 1.6rem;} .my_info.joinInfo .charge_area .total_info .period {font-size: 1.4rem;} .my_info.joinInfo .charge_area .charge_info {padding: 2.4rem;} /*** F. Self ***/ .body_wrap.self_wrap {padding-top: calc(12rem + 4rem);} .self_form_inner {padding: 0 2rem;} /* .self_wrap .sub_header + .form_wrap, .self_wrap .login_wrap, .self_wrap .sub_header + .order_list_wrap {padding: 3.2rem; border-radius: 1.6rem; background-color: #fff;} */ .self_wrap .continue_area {padding: 3.2rem; border-radius: 1.6rem; background-color: #fff;} .self_wrap .form_group {margin-bottom: 2rem;} .self_wrap .moveJoinArea .form_group .flex-fill {flex: 1 !important;} .self_wrap .form_group .n_form_label.w_auto {width: auto;} /* .self_wrap .form_group input[type="text"], .self_wrap .form_group input[type="password"], .self_wrap .form_group input[type="number"], .self_wrap .form_group input[type="date"], .self_wrap .form_group input[type="email"], .self_wrap .form_group select.form-select {min-width: 280px;} */ .self_wrap .btn_group {background-color: transparent;} .self_wrap .fixed-bottom .btn_group {background-color: #fff;} .form_wrap.newJoinArea, .form_wrap.moveJoinArea {width: 100%;} #hopeNumList {row-gap: 2rem; padding: 2.4rem 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 .step_item + .step_item::before {top: 3.2rem;} #inisisAuth .step_item .img_wrap img {width: 3.2rem; height: 3.2rem;} */ .self_copy_wrap {padding: 3rem 0 5rem 0;} .self_copy {font-size: 1.15rem;} /* -- step1 */ #inquiryInfoTab li {flex: 1 1 auto; width: auto;} #inquiryInfoTabContent .tab_board .title_area {margin-bottom: 2.4rem;} #inquiryInfoTabContent .tab_board .title_area > .title {font-size: 1.8rem;} #inquiryInfoTabContent .tab_board .content {padding-bottom: 3.2rem;} #persAuthFail .step {flex-direction: column;} #persAuthFail .step_item + .step_item::before {top: -2.5rem; left: 50%; transform: translateX(-50%); width: 1.2rem; height: 1.2rem; background: url(../svg/chevron-down.svg) center/100% no-repeat;} /* 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 {font-size: 1.6rem;} .step1-activeInfo button {font-size: 1.6rem;} .step1-authInfo .box {padding: 2.4rem;} /* -- price select */ .self_wrap .box_cardlist .inner {padding-bottom: 12rem;} .price_filter {top: 12rem; padding: 2rem 0;} .self_wrap .price_sticky_wrap {top: 12rem; background-color: #fff;} .body_wrap_agent.self_wrap .price_sticky_wrap {top: 0;} .self_wrap .price_sticky_wrap .price_filter {padding: 2rem 0; border-radius: 1.2rem 1.2rem 0 0;} .card_price_list .detail {flex: 1; width: auto;} .card_price_list .price {flex-shrink: 0; width: auto;} /* -- order list */ .order_list_wrap h1 {margin-bottom: 5.6rem;} .order_list_wrap .form_wrap {padding: 3.2rem; border-radius: var(--border-radius-d);} .order_list_wrap .form_wrap h2 {font-size: 1.7rem; margin-bottom: 2.4rem;} .order_list_wrap .order_list li + li {padding-top: 1.6rem;} .order_list li + li {padding-top: 1.6rem;} .order_list .title {font-size: 1.6rem;} .order_list .text {font-size: 1.6rem;} /* -- applyComplArea */ .applyComplArea {} .applyComplArea .img_wrap img {width: 4.8rem;} .applyComplArea h2 {margin-bottom: 3.2rem; font-size: 2.2rem;} .applyComplArea .box_guide {padding-top: 3.2rem;} .applyComplArea .box_guide .text_group_ref {font-size: 1.5rem;} /*** G. Components ***/ /* -- form */ .form_wrap + .form_wrap {margin-top: 5.6rem;} .form_group {margin-bottom: 2rem;} .input_group input[type="email"] {padding-right: 8rem;} .input_flex button {padding: 0 2rem;} .form_notice {margin-top: 1rem;} /* .n_form_label {font-size: 1.6rem;} .n_check_label {font-size: 1.6rem;} */ .form_check_icon .n_check_label {padding-left: 3rem; font-size: 1.5rem;} .form_check_icon input[type="checkbox"] + label span {width: 2.2rem; height: 2.2rem;} .form_number .form_number_btn {width: 4.8rem; height: 4.8rem;} .form_number .form_number_inp {max-width: 6.4rem; height: 4.8rem; font-size: 1.8rem;} /* -- list */ .select_list li {font-size: 1.4rem;} .select_list li a {font-size: 1.3rem;} .select_list li a span {margin-top: .8rem;} /** -- table **/ /* .table th, .table td {padding: 1.6rem; font-size: 1.5rem;} */ /* board */ .table_board {display: table; font-size: 1.6rem;} .table_board tr {grid-template-columns: 15% 1fr; padding: 2.8rem 0;} .table_board th {padding-top: 1rem; font-size: 1.6rem;} .table_board td {padding-top: 0;} .table_board .form_group {margin-bottom: 1.6rem;} /* gray */ .table_board.table_board_gray tr {padding-bottom: 0;} .table_board.table_board_gray th, .table_board.table_board_gray td {padding: 2.8rem 1.2rem;} /* -- box */ .box {font-size: 1.5rem;} .box_title {font-size: 1.6rem;} .box_outline {padding: 2.4rem;} .box_outline_icon + .box_outline_title {margin-top: 1.6rem;} .box_outline_icon {width: 4rem; height: 4rem;} .box_outline_icon img {width: 4rem;} .box_form .inner {justify-content: center; 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 {} .box_cardlist .inner {max-width: 737px; margin: 0 auto;} .box_list {padding: 2.4rem;} .box_guide {padding: 2.4rem;} .box_guide .title {margin-bottom: 1.6rem; font-size: 1.5rem;} .box_guide .text {padding: 1rem 0; font-size: 1.5rem;} .box_guide .text_group_title {font-size: 2rem; margin-bottom: 2rem;} .box_guide .text_group_ref {font-size: 1.3rem;} .box_green {padding: 2.4rem;} .box_green .title {font-size: 1.7rem;} .box_light {padding: 2.4rem;} .box_light .title {font-size: 1.7rem;} /* -- button */ button {padding: 0 1rem;} .btn_wrap {margin-top: 3.2rem;} .btn_group {padding: 2.4rem 0;} .n_btn_lg, .n_btn_m, .n_btn_s, .n_btn_xs, .n_btn_auto {} .n_btn_lg.oval, .n_btn_m.oval, .n_btn_s.oval, .n_btn_xs.oval, .n_btn_auto.oval {border-radius: 999px;} .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;} .select_btn, .select_btn_t2 {font-size: 1.5rem;} .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, .board pre {font-size: 1.6rem;} .board .board_head {padding-bottom: 2.4rem;} .board .board_head .title {font-size: 2.4rem;} .board_page {} .board_page .page_item {} .board_page .page_link {padding: 2.4rem;} .tab_board {} .tab_board .title {font-size: 2rem;} .tab_board .content {font-size: 1.6rem;} .modal_board {} .modal_board .board_content {padding-bottom: 4rem;} .modal_board .title {font-size: 1.8rem;} .modal_board .content {font-size: 1.6rem;} /* -- space */ .pb_fixbtn {padding-bottom: 11rem;} /* -- modal */ .modal-content {border-radius: 2rem;} /* .modal-content > div:first-child.modal-body:not(.pop_content) {padding-top: 2.4rem;} */ .modal-header + .modal-body {padding-top: 0;} .modal-content > div:only-child.modal-body {padding: 0 2.4rem;} .modal-header {padding: 2.4rem;} .modal-footer {padding: 2.4rem;} .modal-body {padding: 0 2.4rem; padding-top: 2.4rem;} .modal-title {font-size: 2rem;} .modal_text li {font-size: 1.6rem;} /* -- badge */ .badge_wrap .badge {font-size: 1.3rem;} /* -- text */ h1 {font-size: 2.8rem;} h2 {font-size: 2.2rem; margin-bottom: 2rem;} .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; gap: 1.6rem;} .step_item {flex-direction: column; gap: 1.6rem; padding: 2rem; text-align: center;} .step_item + .step_item::before {top: 50%; left: -1.7rem; transform: translateY(-50%); width: 2rem; height: 2rem; background: url(../svg/chevron-right.svg) center/100% no-repeat;} .step_item .title {font-size: 1.8rem;} .step_item .img_wrap {width: 8rem; height: 8rem; border-radius: 3rem;} .step_item .img_wrap img {width: 4rem; height: 4rem;} .step.type2 {flex-direction: column;} .step.type2 .step_item {gap: 0 2.4rem; padding: 1.2rem 0;} .step.type2 .step_item + .step_item::before {top:-.8rem; left: calc(5.6rem / 3); width: 2rem; height: 2rem; background: url(../svg/chevron-down.svg) center/100% no-repeat;} .step.type2 .step_item .img_wrap {min-width: 5.6rem; width: 5.6rem; height: 5.6rem; border-radius: var(--border-radius-s);} .step.type2 .step_item .img_wrap img {width: 3.2rem; height: 3.2rem;} .step.type2 .step_item .desc {} .step.type3 {gap: 2.4rem;} .step.type3 .step_item {padding: 2.4rem; border-radius: var(--border-radius-lg);} /* -- advice */ .advice {gap: 4rem;} .advice_item {gap: 2.4rem; font-size: 1.5rem;} .advice_item .img_wrap {flex-basis: 6rem; min-width: 6rem; height: 6rem;} .advice_item .img_wrap img {width: 6rem; height: 6rem;} .advice_item .title {font-size: 1.7rem;} .advice_item .desc {} .advice.type2 .advice_item .img_wrap {flex-basis: 6rem;} /* -- filter aside */ .filter_aside {position: sticky; position: -webkit-sticky; top: calc(12rem + 3.2rem); max-width: 384px; min-width: 384px; padding: 2.4rem; border-radius: var(--border-radius-lg); box-shadow: 0 2px 24px 0 rgba(149, 157, 165, .32);} .filter_aside .filter_header {padding: 0; margin-bottom: 2rem;} .filter_aside .filter_header .btn_opener {display: none;} .filter_aside .filter_body {display: block;} .filter_aside .filter_body .filter_group {max-height: 500px;} .filter_aside .filter_footer {padding: 2rem 0 0 0;} /* -- tooltip */ .tooltip_msg {padding: .8rem 1.2rem; font-size: 1.4rem;} /* -- 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~) -------------------------------------------*/ } @media screen and (min-width: 1440px) { /*------------------------------------------- -- xLarge desktop (1440px~) -------------------------------------------*/ } /*********************************************************************************************************************** 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 {display: none;} .noPrintArea {display: none !important;} .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; margin-bottom: 20px;} .doc_head_logo {height: 20px; top: 40px; right: 20mm;} .doc_content .table_board th, .doc_content .table_board td, .doc_content .table_board.type2 th, .doc_content .table_board.type2 td {font-size: 9pt; padding: .5rem;} .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 {font-size: 8.25pt; padding-top: 20px;} #confirmDoc .doc_content:last-child {padding-bottom: 40px;} #confirmDoc .doc_content .table_board.type2 th, #confirmDoc .doc_content .table_board.type2 td {padding: 10px 8px;} #confirmDoc .doc_content .table_board.type2 td:first-child {width: 80px;} #confirmDoc .doc_notice {padding-top: 24px; font-size: 9.25pt;} #confirmDoc .doc_notice .box, #confirmDoc .doc_notice .box .title {font-size: 9pt;} #confirmDoc .doc_seal {padding-top: 80px;} #confirmDoc .doc_seal .seal {margin-top: 40px;} }