/*---------------------------------------------------------------------------------------------------------------------- [ AJD ] A. Default B. Layout C. Login D. Main E. Sub F. Self G. Components H. etc I. Media Query ----------------------------------------------------------------------------------------------------------------------*/ :root { /* color */ --n-primary: #145CE6; /* AJD main color */ --n-primary-hover: #1749b6; --n-primary-dark: #19418f; --n-primary-light: #d9edff; --n-primary-shadow: rgba(18, 94, 227, 0.3); --n-lightGreen: rgba(20, 92, 230, 0.04); --n-lightPink: #FFF6FB; --n-lightPurple: #f3f4fb; --n-lightBlue: #f9fafc; /* color :: gray */ --n-gray-50: #F9FAFB; --n-gray-100: #F3F4F6; --n-gray-200: #E5E7EB; /* border color */ --n-gray-300: #D1D5DB; --n-gray-400: #9CA3AF; --n-gray-500: #6B7280; --n-gray-600: #4B5563; --n-gray-700: #374151; /* text main */ --n-gray-800: #1F2937; --n-gray-900: #111827; --n-gray-950: #030712; --n-cgray-50: #F8FAFC; --n-cgray-100: #F1F5F9; --n-cgray-200: #E2E8F0; --n-cgray-300: #CBD5E1; --n-cgray-400: #94A3B8; --n-cgray-500: #64748B; --n-cgray-600: #475569; --n-cgray-700: #334155; --n-cgray-800: #1E293B; --n-cgray-900: #0F172A; --n-cgray-950: #020617; /* color :: filter */ --n-filter-primary: invert(19%) sepia(56%) saturate(5830%) hue-rotate(220deg) brightness(99%) contrast(85%); --n-filter-gray4: invert(73%) sepia(13%) saturate(244%) hue-rotate(179deg) brightness(87%) contrast(88%); --n-filter-gray5: invert(46%) sepia(32%) saturate(184%) hue-rotate(182deg) brightness(89%) contrast(85%); --n-filter-gray7: invert(25%) sepia(9%) saturate(1206%) hue-rotate(178deg) brightness(93%) contrast(96%);; --n-filter-gray9: invert(6%) sepia(8%) saturate(4775%) hue-rotate(184deg) brightness(99%) contrast(93%); --n-filter-white: invert(94%) sepia(100%) saturate(0%) hue-rotate(333deg) brightness(103%) contrast(101%); --n-filter-disabled: invert(84%) sepia(3%) saturate(447%) hue-rotate(177deg) brightness(100%) contrast(95%); --n-filter-yellow: invert(70%) sepia(71%) saturate(423%) hue-rotate(340deg) brightness(105%) contrast(101%); /* border-radius */ --border-raidus-s: 1rem; --border-raidus-d: 1.6rem; --border-raidus-lg: 2.4rem; } /*********************************************************************************************************************** A. Default ***********************************************************************************************************************/ html, body {height: 100%; } html {font-size: 62.5%;} body {font-family: "Pretendard", -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif; box-sizing: border-box; display: flex; flex-direction: column; justify-content: space-between;} a {text-decoration: none;} a:not([href]):hover {cursor: pointer;} button {border: none; border-radius: .5rem;} button:disabled, button:disabled:hover {background-color: var(--n-gray-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 {width: 100%; height: 4.4rem; padding: 1rem 1.2rem; font-size: 1.4rem; color: var(--n-gray-700); border: 1px solid var(--n-gray-300); border-radius: .4rem;} input:focus, textarea:focus, select.form-select:focus, .form-control:focus {border-color: var(--n-primary); box-shadow: none; outline: 0;} input[type="text"]::placeholder, input[type="password"]::placeholder,input[type="number"]::placeholder, input[type="date"]::placeholder, input[type="email"]::placeholder, textarea::placeholder {color: var(--n-gray-400)} input:disabled, select:disabled, .form-control:disabled, .form-select:disabled {color: var(--n-gray-500); background-color: var(--n-gray-200); pointer-events: none;} input:read-only, .form-control:read-only {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[type="checkbox"]:read-only, input[type="radio"]:read-only {background-color: #fff; pointer-events: inherit;} input:checked:read-only {background-color: #0d6efd !important; pointer-events: inherit;} input:-webkit-autofill, input:-webkit-autofill:hover {transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out; -webkit-transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out; background-color: #fff !important; box-shadow: inset 0 0 0 1000px white; -webkit-box-shadow: 0 0 0 1000px white inset;} input:-webkit-autofill:focus, input:-webkit-autofill:active {transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out; -webkit-transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out; background-color: #fff !important; box-shadow: inset 0 0 0 1000px white, 0 0 0 0.25rem 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: 3px; width: 1.6rem; height: 1.6rem; margin-right: .25rem; border: 1px solid var(--n-gray-300); 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-cgray-100);} .header .header_content, .header_popup .header_content {height: 5.2rem;} .header .logo img {max-height: 25px;} .header .mobile_wrap .logo {padding-top: .5rem;} .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: 2rem; background-color: transparent;} .header_content .icons_item img {width: 2.8rem; height: auto;} /* .header_content .icons_item_btn {height: 3rem; padding: 0 1.5rem; margin-left: 1rem; font-size: 1.2rem; vertical-align: middle;} */ /* pc - 상단 유틸 */ .header_top {padding-top: 1rem; background-color: #fff; display: none;} /* 모바일, 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: 2rem; font-weight: 700; color: var(--n-gray-900);} /*------------------------------------------- -- sub header(셀프개통 단계) -------------------------------------------*/ .sub_header {display: flex; flex-direction: column; align-items: center; gap: 1.6rem; top: 52px; width: 100%; max-width: 640px; padding: 2.4rem 0; margin: 0 auto; margin-bottom: 4rem; border-bottom: 3px solid var(--n-cgray-50); text-align: center; background-color: #fff;} .body_wrap_agent .sub_header {top: 0;} .sub_header .title {font-size: 2rem; font-weight: 700; color: var(--n-gray-900);} .sub_header_step {display: flex; width: 100%;} .sub_header_step li {position: relative; flex: 1 0 auto; display: inline-block; line-height: 1.5;} .sub_header_step li:not(:last-child):before {content: ''; position: absolute; top: 50%; right: -50%; transform: translate(-50%, -50%); display: block; width: 50%; height: 1px; background-color: var(--n-gray-200);} .sub_header_step li.on ~ li img {filter: var(--n-filter-disabled);} .sub_header_step li img {width: 2.2rem; height: 2.2rem; filter: var(--n-filter-primary);} .sub_header_step li.on img {filter: var(--n-filter-primary);} /*------------------------------------------- -- fullmenu (모바일 전체메뉴) -------------------------------------------*/ .full_menu_wrap {position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #fff; overflow: auto; z-index: 9999; display: none;} .full_menu_header {background-color: #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: 2.4rem 0; border-bottom: 1px solid var(--n-gray-200); font-size: 1.3rem; color: var(--n-gray-500);} .full_menu_sign .title {font-size: 1.8rem; font-weight: 600; color: var(--n-gray-800); margin-bottom: 1.2rem;} .full_menu_sign .full_menu_login, .full_menu_logout {text-align: center;} .full_menu_sign .full_menu_login .btn_sign {position: relative; width: auto; padding: 1.2rem; border-radius: .8rem; font-size: 1.6rem; font-weight: 500; color: var(--n-primary); background-color: rgba(18, 94, 227, .12);} .full_menu_logout .btn_sign {font-size: 1.4rem; font-weight: 500; color: var(--n-gray-500); background-color: transparent;} .full_menu_sign .btn_link_ico {font-size: 1.8rem; font-weight: 600; color: var(--n-primary);} .full_menu_sign .btn_link_ico::after {transform: translateY(6px); width: 2.4rem; height: 2.4rem; filter: var(--n-filter-primary);} /* fullmenu - submenu(tab) */ .full_menu_body .submenu_list {gap: 0; margin-top: 2rem; 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-gray-600);} .full_menu_body .sub_tab_list .sub_tab_link:hover {color: var(--n-gray-600);} .full_menu_body .sub_tab_list .sub_tab_link img {width: 1.8rem; height: 1.8rem; margin-right: .4rem; filter: var(--n-filter-gray7);} /* fullmenu - service */ .full_menu_service {padding: 2.4rem 0; border-bottom: 1px solid var(--n-gray-200);} .full_menu_service .service_list {display: flex; flex-wrap: wrap; gap: 1.6rem 0;} .full_menu_service .service_list li {width: 33.33333%;} .full_menu_service .service_list li a {display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 1.4rem; font-weight: 500; color: var(--n-gray-800);} .full_menu_service .service_list li a img {width: 4rem;} /* fullmenu - body */ .full_menu_content {padding-bottom: 4rem;} .full_menu_body .menu_list li {padding: 2.4rem 0; border-bottom: 1px solid var(--n-gray-200);} .full_menu_body .menu_list li .title {padding: .8rem 0; font-size: 1.4rem; color: var(--n-gray-500);} /* .full_menu_body .menu_list li a {position: relative; font-size: 1.6rem; font-weight: 700; color: var(--n-gray-800);} */ .full_menu_body .menu_list li .sub_list {} .full_menu_body .menu_list li .sub_list li {padding: 0; border-bottom: 0;} .full_menu_body .menu_list li .sub_list li a {position: relative; display: flex; align-items: center; gap: 1.2rem; padding: 1rem .8rem; border-radius: .8rem; font-size: 1.8rem; font-weight: 600; color: var(--n-gray-900);} .full_menu_body .menu_list li .sub_list li a:hover {color: var(--n-gray-900); background-color: rgba(100, 116, 139, .1);} .full_menu_body .menu_list li .sub_list li a::after {content: ''; position: absolute; top: 50%; right: .4rem; transform: translateY(-50%); display: block; width: 2.4rem; height: 2.4rem; background: url(../svg/chevron-right.svg) no-repeat center / 100%; filter: var(--n-filter-gray4);} .full_menu_body .menu_list li .sub_list .img_wrap {display: inline-flex; justify-content: center; align-items: center; width: 4rem; height: 4rem; border-radius: .6rem; background-color: var(--n-cgray-100);} .full_menu_body .menu_list li .sub_list .img_wrap img {width: 3.2rem; height: auto;} /*------------------------------------------- -- body -------------------------------------------*/ .body_wrap, .body_wrap_popup, .body_wrap_popup_t2 {height: auto; padding-top: calc(52px + 38px);} .body_wrap_popup_t2 {padding-bottom: 8rem;} .body_wrap_agent {padding-top: 4rem;} /*------------------------------------------- -- nav -------------------------------------------*/ /* pc */ .gnb_wrap {display: none;} .gnb {gap: 0 4rem;} .gnb li {position: relative; padding: 2.4rem 0; font-size: 1.6rem; font-weight: 700; cursor: pointer;} .gnb li > a {display: inline; color: var(--n-gray-900); transition: all .3s;} .gnb li > a:hover {color: var(--n-primary);} .gnb > li.on > a {color: var(--n-primary);} /* snb */ .snb {position: absolute; top: 56px; left: 0; padding: .8rem; border: 1px solid var(--n-cgray-50); border-radius: 1.6rem; background-color: #fff; visibility: hidden; opacity: 0; transition: all .3s; box-shadow: 0 8px 10px -4px rgba(51, 65, 85, .12), 0 10px 16px 4px rgba(51, 65, 85, 0.08), 0 0 10px -10px rgba(51,65,85,.08);} .snb li {padding: 0;} .snb li a {display: inline-block; width: 100%; padding: 1rem 2rem 1rem 1.2rem; border-radius: .8rem; font-size: 1.5rem; font-weight: 400; color: var(--n-gray-600); white-space: nowrap;} .snb li a:hover {color: var(--n-gray-600); background-color: rgba(100, 116, 139, .1);} .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 {font-size: 1.5rem; font-weight: 300; color: var(--n-gray-800); text-decoration: none; line-height: 2.5rem; transition: all .1s;} .submenu a + a {margin-left: 1.6rem;} .submenu a img {width: 1.8rem; margin-right: .4rem; filter: var(--n-filter-gray7); transition: all .1s;} .submenu a:hover {color: var(--n-gray-950);} .submenu a:hover img {filter: var(--n-filter-gray9);} /*------------------------------------------- -- footer -------------------------------------------*/ footer {background-color: var(--n-cgray-800); margin-top: 4rem; font-size: 1.2rem;} .footer_top {position: relative; padding-top: 4rem;} footer .policy_list {gap: .8rem 1.6rem;} footer .policy_list li a {color: var(--n-gray-300);} footer .policy_list li a.indv {color: #fff; font-weight: 600;} .footer_bottom {display: flex; flex-direction: column; gap: .8rem; padding: 3.2rem 0 4rem 0;} footer .logo {width: 5rem; height: 2.4rem;} footer .company_info {display: flex; flex-wrap: wrap; gap: .8rem 2rem; font-weight: 400; color: var(--n-gray-400);} footer .company_info li {} footer .company_info li a {color: var(--n-gray-400); text-decoration: underline;} footer .company_info li span {display: none;} /*------------------------------------------- -- preview bottom -------------------------------------------*/ .preview_wrap {width: 100%; max-width: 640px; margin: 0 auto; border-radius: 2rem 2rem 0 0; background-color: #fff; box-shadow: 0px -4px 16px 0px rgba(15, 23, 42, .12);} .preview_header {padding: 2rem 0;} .preview_header .head {font-size: 1.6rem; font-weight: 600; color: var(--n-gray-900);} .preview_header .n_btn_icon {width: 2rem; height: 2rem; background-color: transparent; background-position: center center; background-size: 2rem; background-repeat: no-repeat; filter: var(--n-filter-gray5);} .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-bottom: 4rem;} .preview_body .price_info {width: calc(100% - 1rem); padding: 2rem; margin: 0 auto; border-radius: 1.2rem; background-color: var(--n-cgray-100);} .preview_body .price_info .badge_wrap {margin-bottom: 0; grid-column: 1 / span 2;} .preview_body .price_info .title {font-size: 1.4rem; font-weight: 700; margin-top: .5rem; word-break: break-all;} .preview_body .price_info .title:nth-of-type(3) {font-size: 1.6rem; text-align: right;} .preview_body .price_info .ref {font-size: 1.2rem; font-weight: 400; color: var(--n-gray-800); text-align: right;} .preview_body .order_list {margin-top: 2rem;} .preview_body .order_list li {padding: 0 0 1rem 0; border-bottom: 0;} /* 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.4rem; color: var(--n-gray-700); word-break: keep-all;} .board .board_head {padding-bottom: 2.4rem; border-bottom: 1px solid var(--n-cgray-200);} .board .board_head .title {font-size: 1.7rem; font-weight: 600; color: var(--n-gray-900);} .board .board_head .date {font-size: 1.3rem; color: var(--n-gray-400);} .board .board_content {padding: 2rem 0; line-height: 150%; /* overflow-x: auto; */} .board .board_content img {position: relative; left: 50%; transform: translateX(-50%); max-width: 100%; height: auto;} .board_page {padding: 0 2rem; font-size: 1.3rem; border-radius: 1.2rem; color: var(--n-gray-500); background-color: var(--n-cgray-100); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} .board_page .page_item {display: flex; align-items: center; padding: 2rem 0;} .board_page .page_item + .page_item {border-top: 1px solid var(--n-cgray-200);} .board_page .page_link {display: inline; padding: 0; padding-left: .8rem; margin: 0; font-size: 1.3rem; font-weight: 600; color: var(--n-gray-700);} .board_page .page_link:hover {color: var(--n-gray-700); background-color: transparent;} .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;} /*------------------------------------------- -- popup (main layer popup) -------------------------------------------*/ /** new **/ .main_pop_layer {width: calc(100% - 4rem); max-width: 500px; 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: 104%;} .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: 520px; padding: 0; border-radius: 2rem; overflow: hidden;} .main_pop_layer .pop_content .pop_editor {background-color: #fff; 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: 1rem;} .main_pop_layer .pop_footer .form-check-input {top: .1rem; width: 1.3rem; height: 1.3rem;} .main_pop_layer .pop_footer .n_check_label {padding-left: .5rem; font-size: 1.3rem; color: #fff;} .main_pop_layer .pop_footer .pop_close {font-size: 1.3rem; color: #fff; background-color: transparent;} .main_pop_layer .swiper-pagination {bottom: 2.4rem; left: 50%; transform: translateX(-50%); width: auto; padding: .4rem 1.2rem; border-radius: 999px; background-color: rgba(0, 0, 0, .25); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);} .main_pop_layer .swiper-pagination-fraction {font-size: 1.2rem; font-weight: 500; color: var(--n-gray-200);} .main_pop_layer .swiper-pagination-fraction .swiper-pagination-current {font-weight: 700; color: #fff;} /* .main_pop_layer .swiper-pagination-bullets .swiper-pagination-bullet {width: 6px; height: 6px; margin: 0 4px; border: 1px solid #fff; background-color: unset; opacity: 1;} .main_pop_layer .swiper-pagination-bullets .swiper-pagination-bullet-active {background-color: #fff;} .main_pop_layer .swiper-pagination-bullet:only-child {display: inline-block !important; } */ .main_pop_layer .swiper-button-next, .main_pop_layer .swiper-button-prev {display: none; width: 4.8rem; height: 4.8rem; border: 1px solid var(--n-gray-300); border-radius: 10rem;} .main_pop_layer .swiper-button-next {right: calc(-4.8rem + -3.2rem);} .main_pop_layer .swiper-button-prev {left: calc(-4.8rem + -3.2rem);} .main_pop_layer .swiper-button-next::after, .main_pop_layer .swiper-button-prev::after {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: inline-block; width: 2.4rem; height: 2.4rem; filter: var(--n-filter-white); font-size: 0; line-height: normal;} .main_pop_layer .swiper-button-next::after {background: url(../svg/chevron-right.svg) no-repeat center/100%;} .main_pop_layer .swiper-button-prev::after {background: url(../svg/chevron-left.svg) no-repeat center/100%;} /** new **/ /*------------------------------------------- -- flex -------------------------------------------*/ .flex_row {display: flex; flex-wrap: wrap; margin: 0 -.6rem; gap: 1.2rem 0;} .flex_row > * {padding: 0 .6rem;} .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;} .flex_between {display: flex; justify-content: space-between; align-items: center;} /*********************************************************************************************************************** C. Login ***********************************************************************************************************************/ .login_wrap {max-width: 480px; padding: 4rem 0;} .login_either_wrap {max-width: calc(1024px + 40px);} .login_wrap h1 {margin-bottom: 2.4rem;} .login_wrap form {} .login_wrap .form_wrap {padding-bottom: 0;} .login_box {padding: 3.2rem 2rem; border: 1px solid var(--n-cgray-200); border-radius: 2rem; box-shadow: 0 1px 10px 0 rgba(15, 23, 42, .04);} /*********************************************************************************************************************** D. Main ***********************************************************************************************************************/ .main_content {padding-top: 5.2rem;} .main_content section {overflow: hidden;} .main_title_area {position: relative;} .sec_title {display: flex; flex-direction: column; margin-bottom: 2.4rem; font-size: 2.4rem; font-weight: 700; color: var(--n-cgray-900); word-break: keep-all; line-height: 133.333%;} .sec_title span {color: var(--n-primary);} .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 bannber (배너) -------------------------------------------*/ /* -- main banner */ .carousel_tablet, .carousel_pc, .for_tablet, .for_pc {display: none;} .main_banner {position: relative; overflow: hidden;} .main_banner .swiper-slide {position: relative; width: 100%; height: auto; overflow: hidden;} .main_banner img {position: relative; left: 50%; transform: translateX(-50%); width: 100%; height: auto;} .main_banner .main_banner_controller {position: absolute; bottom: 1.6rem; width: 100%;} .main_banner .main_banner_controller .controller_box {position: relative; left: 50%; transform: translateX(-50%); display: flex; align-items: center; width: fit-content; padding: .4rem 1.2rem; border-radius: 999px; background-color: rgba(0,0,0,.25); font-size: 1.2rem; font-weight: 500; color: var(--n-cgray-200); z-index: 10;} .main_banner .swiper-pagination {position: static;} .main_banner .swiper-pagination-current {font-weight: 600; color: #fff;} .main_banner .swiper-button-prev, .main_banner .swiper-button-next {display: none; position: relative; left: unset; right: unset; top: unset; min-width: 2rem; height: 2rem; margin-top: unset;} .main_banner .swiper-button-prev::after, .main_banner .swiper-button-next::after {width: 100%; height: 100%; font-size: 0; line-height: normal; filter: var(--n-filter-white);} .main_banner .swiper-button-prev::after {background: url(../svg/chevron-left.svg) center/100% no-repeat;} .main_banner .swiper-button-next::after {background: url(../svg/chevron-right.svg) center/100% no-repeat;} /*------------------------------------------- -- main service area -------------------------------------------*/ .main_service_area {padding: 3.6rem 0 4.8rem 0;} .main_service_area .service_group {display: flex; justify-content: center; flex-wrap: wrap; gap: 1.6rem 0; max-width: 980px; margin: 0 auto;} .main_service_area .service_group li {width: 33.33333%;} .main_service_area .service_link {display: flex; flex-direction: column; align-items: center; gap: .8rem; font-size: 1.3rem; font-weight: 500; color: var(--n-gray-800);} .main_service_area .service_link img {width: 4.8rem; height: auto;} /*------------------------------------------- -- main product list -------------------------------------------*/ .main_product_list {padding: 5.6rem 0; overflow: hidden; background-color: #D9EEFF;} /** rate list */ .rate_card_list {display: flex; flex-direction: column; gap: 1.6rem 0;} .rate_card_item {width: 100%;} .rate_card {display: flex; flex-wrap: wrap; gap: 2rem; width: 100%; height: 100%; padding: 2.4rem 2rem; border-radius: 2rem; background-color: #fff; box-shadow: 0 1px 10px 0 rgba(15, 23, 42, .04);} /* rate card :: title */ .rate_card_title {width: 100%; font-size: 1.4rem; font-weight: 500; color: var(--n-gray-900); word-break: keep-all;} /* .rate_card_title p {text-overflow: ellipsis; overflow: hidden; word-break: break-all; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;} */ .rate_card_title .title_label {display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .8rem; text-overflow: unset; overflow: unset;} .rate_card_title .title_label span {display: inline-block; padding: 2px 4px; border-radius: .4rem; font-size: 1.1rem; font-weight: 600; line-height: normal; -webkit-line-clamp: 1;} /* rate card :: info */ .rate_card_info {display: flex; flex-wrap: wrap; gap: .8rem 2rem; width: 100%;} .rate_card_info li {position: relative; display: flex; align-items: center; gap: 1rem; font-size: 1.3rem; font-weight: 500; color: var(--n-gray-900); line-height: normal;} .rate_card_info li:first-child {width: 100%; font-size: 1.8rem; font-weight: 700; color: var(--n-gray-900);} .rate_card_info li > span {font-weight: 400; color: var(--n-gray-500); line-height: normal;} /* rate card :: price */ .rate_card_price {display: flex; flex-direction: column; justify-content: end; width: 100%; font-size: 1.4rem; margin-top: auto; padding-top: 1.8rem; text-align: right;} .rate_card_price .discount {font-size: 1.3rem; font-weight: 400; color: var(--n-primary); line-height: normal;} .rate_card_price .discount span {font-size: 2rem; font-weight: 700;} .rate_card_price .origin {font-size: 1.3rem; font-weight: 400; color: var(--n-gray-400);} /** 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 video area -------------------------------------------*/ .main_video_area {padding: 4rem 0;} .main_video_area .main_video {position: relative; width: 100%; height: 0; padding-top: 75.25%; border-radius: 1.6rem; overflow: hidden;} .main_video_area .main_video > iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%;} /*------------------------------------------- -- main service banner -------------------------------------------*/ .main_service_banner {} .main_service_banner .service_banner {width: 100%; height: 12rem; border-radius: 1.6rem; background: linear-gradient(90deg, rgba(255, 175, 189, 0.30) 0%, rgba(255, 195, 160, 0.30) 100%); overflow: hidden;} .service_banner a {display: inline-block; width: 100%; height: 100%; padding: 2rem; font-size: 1rem; font-weight: 500; color: var(--n-gray-800); background: url(../svg/main-self-banner.svg) no-repeat right -5% bottom/200px;} .service_banner a .title {font-size: 1.6rem; font-weight: 700; color: var(--n-primary);} /*------------------------------------------- -- main event area -------------------------------------------*/ .main_event_area {padding: 5.6rem 0; overflow: hidden;} .main_event_area .swiper_controller {display: none;} .main_event_area .thumb_card_img.event {width: 100%; padding-top: 36.25%; border-radius: 2rem; border-bottom: 0;} .event_banner {position: relative; display: inline-block; width: 100%; height: 0; padding-top: calc(780 / 1000 * 100%); border-radius: 1rem; overflow: hidden;} .event_banner img {position: absolute; top: 50%; left: 50%; width: auto; height: 100%; transform: translate(-50%,-50%);} .main_event_area .event_info {flex-shrink: 0; width: 33.33333%; padding: .8rem 0;} .main_event_area .event_info li {height: auto; padding: 1.6rem 2rem; border: 1px solid transparent; border-radius: .8rem; font-size: 1.7rem; font-weight: 600; color: var(--n-gray-400); line-height: normal; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; -webkit-line-clamp: 1;} .main_event_area .event_info li.on {border-color: var(--n-primary); color: var(--n-primary);} /*------------------------------------------- -- main review area -------------------------------------------*/ .main_review_area {padding: 5.6rem 0; background-color: var(--n-cgray-100);} .review_card {display: block; width: 100%; padding: 3.2rem 2rem; border-radius: 4rem; border-bottom-left-radius: 1rem; background-color: #fff; box-shadow: 0 1px 10px 0 rgba(15, 23, 42, 0.04); text-align: center; overflow: hidden;} .review_card_info {} .review_card_info .grade {display: flex; justify-content: center; margin-bottom: 2.4rem;} .review_card_info .grade_icon {background: url(../svg/star-fill.svg) no-repeat center/100%; content: ""; display: inline-block; width: 2rem; height: 2rem; filter: var(--n-filter-disabled);} .review_card_info .grade_icon.active {filter: var(--n-filter-yellow);} .review_card_info .title {font-size: 1.6rem; font-weight: 600; color: var(--n-gray-800);} .review_card_info .info {margin-top: 1rem; font-size: 1.3rem; color: var(--n-gray-500);} .review_card_content {padding: 0; margin-top: 2.4rem;} .review_content_text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; font-size: 1.4rem; color: var(--n-gray-700); line-height: 150%; } /*------------------------------------------- -- main cs area -------------------------------------------*/ .main_cs_area {padding: 4rem 0; margin-bottom: -4rem;} /* notice box */ .notice_box {width: 100%;} .notice_box .title {font-size: 2rem; font-weight: 700; color: var(--n-cgray-900);} .notice_content {margin-top: 1.6rem; border-top: 1px solid var(--n-gray-200);} .notice_content li {display: flex; flex-direction: column; gap: 1rem; padding: 2rem 0; border-bottom: 1px solid var(--n-gray-200);} .notice_content li a {font-size: 1.6rem; font-weight: 600; color: var(--n-gray-800); line-height: normal; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; word-break: break-all;} .notice_content li .date {font-size: 1.3rem; font-weight: 400; color: var(--n-gray-500); line-height: normal;} /* call cs box */ .call_cs_box {width: 100%; padding: 2.4rem 2rem; margin-top: 4rem; border-radius: 2rem; border: 1px solid var(--n-primary); background-color: #EEF8FF;} .call_cs_box .cs_num {display: flex; flex-direction: column; gap: 1rem; font-size: 2rem; font-weight: 700; color: var(--n-cgray-900); text-align: center;} .call_cs_box .cs_num span {font-size: 2.4rem; color: var(--n-primary);} /*------------------------------------------- -- main swiper area(plugin style) -------------------------------------------*/ .main_swiper_area {width: 100%;} .main_swiper_area .swiper-container {position: relative; width: 100%; margin: 0 auto; overflow: hidden;} .main_swiper_area .swiper-slide {position: relative; text-align: center; font-size: 20px;} .main_swiper_area .swiper-pagination {bottom: 0;} .main_swiper_area .swiper-pagination-bullet {width: .6rem; height: .6rem; margin: 0 .25rem; border-radius: 10rem; background-color: rgba(15, 23, 42, 0.25); opacity: 1; } .main_swiper_area .swiper-pagination-bullet-active {width: 2rem; background-color: var(--n-cgray-900);} .main_swiper_area .swiper-button-next, .main_swiper_area .swiper-button-prev {width: 2.4rem; height: 2.4rem; color: var(--n-gray-900);} .main_swiper_area .swiper-button-next:after, .main_swiper_area .swiper-button-prev:after {font-size: 2.4rem;} .main_swiper_area .swiper-button-prev, .main_swiper_area .swiper-rtl .swiper-button-next {left: 2rem;} .main_swiper_area .swiper-button-next, .main_swiper_area .swiper-rtl .swiper-button-prev {right: 2rem;} .main_swiper_area .swiper-pagination-bullet:only-child {display: inline-block !important; } /* rate swiper */ .main_product_list .main_swiper_area {position: relative; padding: 0; padding-left: 2rem; overflow: hidden;} .main_product_list .swiper-container {padding-right: 2rem;} .main_product_list .swiper-slide {width: 94.2%; height: auto; margin: 0; text-align: left;} .main_product_list .main_swiper_area .swiper-button-next, .main_product_list .main_swiper_area .swiper-button-prev {display: none;} /* event swiper */ .main_event_area .main_swiper_area {position: relative; max-width: none; padding: 0;} .main_event_area .swiper {padding-bottom: 2.6rem;} .main_event_area .swiper-slide {margin: 0;} .main_event_area .event_info .swiper {height: 100%; padding-bottom: 0;} .main_event_area .event_info .swiper-wrapper {justify-content: center;} /* review swiper */ .main_review_area .main_swiper_area {padding: 0 2rem;} .main_review_area .swiper-container {padding-bottom: 2.8rem;} .main_review_area .swiper-slide {width: 100%;} .main_review_area .swiper-button-next, .main_review_area .swiper-button-prev {display: none;} /*********************************************************************************************************************** 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: url(../svg/exclamation-circle-fill.svg) no-repeat center/100%; display: inline-block; width: 3.2rem; height: 3.2rem;} /* 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: 30px;} .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; 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);} .doc_seal p {font-size: 9.25pt; font-weight: 500;} .doc_seal .seal {position: relative; margin-top: 20px; font-size: 11.5pt; color: #000;} .doc_seal .seal img { -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -o-user-select: none; user-select: none; -webkit-user-drag: none; -khtml-user-drag: none; -moz-user-drag: none; -o-user-drag: none; user-drag: none; position: absolute; top: 50%; transform: translateY(-50%); width: 50px; height: auto; margin-left: 5px; } /*------------------------------------------- -- accordion style -------------------------------------------*/ .acc_wrap .acc_item {width: 100%; padding: 1rem 0;} .acc_wrap .acc_header {font-size: 1.4rem; font-weight: 700; color: var(--n-gray-900);} .acc_wrap .acc_header .acc_header_link {position: relative; display: flex; flex-direction: column; width: 100%; background-color: transparent; text-align: left;} .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: 1rem; display: inline-block; width: 1.2rem; height: 1.2rem; filter: invert(25%) sepia(98%) saturate(9%) hue-rotate(329deg) brightness(100%) contrast(95%);} .acc_wrap .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: 1rem; display: inline-block; width: 1.2rem; height: 1.2rem; filter: invert(25%) sepia(98%) saturate(9%) hue-rotate(329deg) brightness(100%) contrast(95%);} .acc_wrap .acc_content {display: none; padding-top: 1rem; word-break: break-all;} .acc_wrap .acc_content_inner {padding: 2rem; border-radius: .4rem; background-color: var(--n-cgray-100); 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.2rem; height: 1.2rem; filter: var(--n-filter-gray5);} .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.6rem; border-top: 1px solid var(--n-gray-900);} .board_list li {padding: 2rem 1.6rem; border-bottom: 1px solid var(--n-gray-300);} .board_list li .title, .board_list li .title a {position: relative; margin: .5rem 0; font-size: 1.6rem; font-weight: 500; color: var(--n-gray-900);} .board_list li .title.ico {padding-right: 2rem;} .board_list li .title.ico::after {background: url(../svg/chevron-right.svg) no-repeat center/100%; content: ""; position: absolute; top: 50%; transform: translateY(-50%); right: 0; display: inline-block; width: 1.4rem; height: 1.4rem;} .board_list li .detail_list {display: flex; flex-wrap: wrap;} .board_list li .detail_list li {position: relative; padding: 0; border-bottom: 0; font-size: 1.3rem; color: var(--n-gray-600);} .board_list li .detail_list li + li {padding-left: 1rem; margin-left: 1rem;} .board_list li .detail_list li + li::before {content: ''; position: absolute; top: 50%; left: 0; transform: translateY(-50%); display: block; width: 1px; height: 50%; background-color: var(--n-gray-600);} .board_list li .detail_list li span {font-weight: 500;} .board_list li.tb {display: flex; flex-direction: column;} /*------------------------------------------- -- card list -------------------------------------------*/ .card_list_wrap {padding-top: 1.6rem;} .card_list_item {display: flex; flex-direction: column; margin-bottom: 1.6rem; font-size: 1.4rem; overflow: hidden;} .card_list_item.no_list {width: 100% !important; flex: 1 !important;} .no_list {padding: 5rem 1.6rem !important;} .card_link {padding: 2rem; border-radius: 1.6rem; border: 1px solid var(--n-gray-300); font-size: 1.4rem;} .card_link.type2 {background-color: var(--n-gray-100); border: 0;} /* .card_link {border: 1px solid var(--n-gray-300); background-color: transparent;} */ .card_link .title {font-size: 1.8rem; font-weight: 500;} .card_list.rate_list .service_desc {display: flex; justify-content: space-between; gap: 1.6rem;} .card_list.rate_list .service_desc .title_wrap {flex: 1; min-width: 0;} .card_list.rate_list .service_desc .title {font-size: 1.6rem;} .addType.badge_pps {background-color: #ff5169;} /* 선불 */ .addType.badge_post {background-color: #1fc198; } /* 후불 */ .addType.badge_all {background-color: var(--n-cgray-600);} /* 선후불 */ /*------------------------------------------- -- price list(요금 소계) -------------------------------------------*/ .price_list {font-size: 1.4rem; font-weight: 500; color: var(--n-gray-900);} .price_list li {display: flex; justify-content: space-between;} .price_list li + li {padding-top: 1.6rem;} .price_list li.depth {padding-top: .5rem; font-size: 1.3rem; font-weight: 400; color: var(--n-gray-600);} .price_list li.total {color: var(--n-primary);} .price_list li .title, .price_list li .text {font-weight: inherit; font-size: inherit; color: inherit; padding-bottom: 0;} .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%;} .thumb_card_img {width: 100%; height: 200px; margin-bottom: 1rem; border-radius: 1rem; overflow: hidden;} /* .thumb_card_img.event {max-width: 340px;} */ .thumb_card_img.event {position: relative; width: 100%; height: auto; padding-top: 36.25%; margin-bottom: 0; border-radius: 2rem; overflow: hidden;} .thumb_card_img.event_end::before {content: ''; position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; background-color: var(--n-gray-950); opacity: .4; z-index: 1;} .thumb_card_img img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; object-fit: cover;} .thumb_card_desc {padding: 1.2rem; font-size: 1.3rem;} .thumb_card_desc .title {font-size: 1.5rem; font-weight: 500; color: var(--n-gray-900); text-overflow: ellipsis; overflow: hidden; word-break: break-all; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;} .thumb_card_desc .title .badge {position: relative; top: -2px; margin-right: 4px;} .thumb_card_desc .date {color: var(--n-gray-400);} /*------------------------------------------- -- tab -------------------------------------------*/ /* box type */ .tab_box {margin-bottom: 2.4rem; word-break: keep-all;} .tab_box_list {display: flex; flex-wrap: wrap; width: 100%; border-radius: 999px; background-color: var(--n-cgray-200);} .tab_box_list li {flex: 1; display: inline-block;} .tab_box_link {position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 1.2rem 1rem; font-size: 1.4rem; border-radius: 999px; color: var(--n-cgray-500); background-color: var(--n-cgray-200); text-align: center;} .tab_box_link:hover {color: var(--n-cgray-700);} .tab_box_link.on, .tab_box_link.active {background-color: var(--n-primary); color: #fff;} .tab_box_list_t2 {display: flex; flex-wrap: wrap; gap: .8rem 0; margin: 0 -.4rem;} .tab_box_list_t2 li {flex: 0 0 auto; display: inline-block; padding: 0 .4rem;} .tab_box_list_t2 .tab_box_link {padding: 1.2rem .8rem; border: 1px solid var(--n-gray-200); border-radius: .4rem; word-break: keep-all; background-color: transparent;} .tab_box_list_t2 .tab_box_link:hover {background-color: rgba(15, 23, 42, .04);} .tab_box_list_t2 .tab_box_link.on, .tab_box_list_t2 .tab_box_link.active {border-color: var(--n-primary); font-weight: 500; background-color: rgba(18, 94, 227, 0.15); color: var(--n-gray-800);} .tab_box_list_t3 {display: flex; flex-wrap: wrap; width: 100%; border-radius: .8rem; background-color: var(--n-cgray-200);} .tab_box_list_t3 li {display: inline-block;} .tab_box_list_t3 .tab_box_link {border-radius: .8rem;} .tab_box_list_t3 .tab_box_link:hover {background-color: rgba(15, 23, 42, .04);} .tab_box_list_t3 .tab_box_link.on, .tab_box_list_t3 .tab_box_link.active {background-color: var(--n-primary); color: #fff; border: 1px solid var(--n-primary);} .tab_box_oval {margin-bottom: 1.6rem;} .tab_box_oval .tab_list {position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; width: 100%; margin: 0 auto; text-align: center;} .tab_box_oval .tab_link {display:inline-block; height: 3.5rem; line-height: 3.5rem; padding: 0 1.2rem; font-size: 1.2rem; font-weight: 500; border-radius: 10rem; background-color: #FAFAFA; color: #BFBFBF; } .tab_box_oval .tab_link.on {background-color: var(--n-primary); color: #fff;} /* line type */ .tab_line_wrap {position: relative; margin-bottom: 2.4rem;} .tab_line_wrap::after {content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background-color: var(--n-cgray-200);} .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: .8rem .4rem; border-radius: 0; font-size: 1.5rem; background-color: transparent; color: var(--n-gray-400);} .tab_line_link:hover {color: var(--n-gray-700);} .tab_line_link.on {border-bottom: 2px solid var(--n-primary); font-weight: 600; color: var(--n-primary);} .tab_line_list_t2 {position: relative; display: flex; flex-wrap: wrap; gap: .8rem 1.6rem; width: 100%; padding-bottom: 2rem; border-bottom: 1px solid #efefef;} .tab_line_list_t2 .tab_line_link {display: inline; padding: 0; font-size: 1.5rem; color: var(--n-gray-700);} .tab_line_list_t2 .tab_line_link:hover {color: var(--n-gray-700);} .tab_line_list_t2 .tab_line_link.on {border-bottom: 1px solid var(--n-gray-900); font-weight: 700; color: var(--n-gray-900);} /* sub */ .sub_tab {padding: 2rem 0; background-color: var(--n-cgray-100);} .sub_tab_list {display: flex; flex-wrap: wrap; gap: .6rem; width: 100%; } .sub_tab_list .sub_tab_link {display:inline-block; padding: .8rem 1.6rem; font-size: 1.4rem; border: 1px solid var(--n-gray-200); border-radius: .6rem; color: var(--n-gray-700); background-color: #fff;} .sub_tab_list .sub_tab_link:hover {color: var(--n-gray-700); background-color: var(--n-gray-50);} .sub_tab_list .sub_tab_link.on {border-color: var(--n-primary); font-weight: 600; color: #fff; background-color: var(--n-primary);} /* tab etc */ .tab_content {width: 100%; margin-top: 4rem;} .tab_content img {width: 100%;} .tab_content .review_list {border-top: none} .tab_login {margin-bottom: 2.4rem;} .tab_login_list {position: relative; display: flex; flex-wrap: wrap; width: 100%; border-bottom: 1px solid var(--n-gray-200); text-align: center;} .tab_login_list li {flex: 1 1 auto;} .tab_login_link {display:inline-block; width: 100%; padding: .8rem 0; border-radius: 0; font-size: 1.5rem; color: var(--n-gray-400); background-color: transparent;} .tab_login_link:hover {color: var(--n-gray-400);} .tab_login_link.on {font-weight: 600; color: var(--n-primary); border-bottom: 2px solid var(--n-primary);} /*------------------------------------------- -- search -------------------------------------------*/ .search_wrap {padding: 1rem 0;} .search_box {display: flex; border: 2px solid var(--n-primary); border-radius: 999px; overflow: hidden;} .search_box input {border: 0;} .search_box .search_btn {position: relative; flex-shrink: 0; width: 4.4rem; height: 4.4rem; font-size: 0; background-color: transparent;} .search_box .search_btn:before {content: ''; display: block; width: 100%; height: 100%; background: url(../svg/search.svg) center/75% no-repeat transparent; filter: var(--n-filter-primary);} /*------------------------------------------- -- 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);} /*------------------------------------------- -- 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 {padding-top: 2rem;} */ .product_select + .rate_list_wrap {padding-top: 1rem;} .card_list .badge_wrap {display: flex; flex-wrap: wrap; gap: .5rem;} /* ## rate list - new ## */ .rate_list_wrap .inner {} .card_list.rate_list {display: flex; flex-wrap: wrap; margin: 0;} .card_list.rate_list .card_list_item {width: 100%; margin-bottom: 0; padding: 0;} .card_list.rate_list .card_rate_link {display: flex; flex-direction: column; height: 100%; padding: 2.4rem 2rem; border-bottom: 1px solid var(--n-gray-200);} .card_list.rate_list .title {position: relative; font-size: 1.4rem; font-weight: 500; color: var(--n-gray-900);} .card_list.rate_list .content_group {flex-direction: column; gap: 2rem; margin-top: 2rem;} .card_list.rate_list .detail {width: 100%; font-size: 1.3rem; color: var(--n-gray-900);} .card_list.rate_list .desc {display: flex; flex-wrap: wrap; gap: .8rem 2rem; width: 100%;} .card_list.rate_list .desc li {position: relative; display: flex; align-items: center; gap: 1rem; font-size: 1.3rem; color: var(--n-gray-900); line-height: normal;} .card_list.rate_list .desc li span {font-weight: 400; color: var(--n-gray-500);} .card_list.rate_list .desc li:first-child {width: 100%; font-size: 1.8rem; font-weight: 700; color: var(--n-gray-900);} .card_list.rate_list .detail .ref {padding-top: .8rem; margin-bottom: 0; font-size: 1.3rem; font-weight: 400; color: var(--n-primary);} .card_list.rate_list .detail .ref.list_dot li:before {top: 8px; width: 2px; height: 2px; background-color: var(--n-primary);} .card_list.rate_list .price {margin-top: auto; font-size: 2rem; font-weight: 700; color: var(--n-primary); text-align: right;} .card_list.rate_list .price .ref {font-size: 1.3rem; font-weight: 400; color: var(--n-gray-400);} /* ## rate detail view - new ## */ .rate_info_wrap {} .rate_info_wrap > .inner {display: flex; flex-direction: column; padding: 0 2rem; margin: 0 auto;} .rate_info {height: fit-content;} .rate_info .header h2 {font-weight: 600;} .rate_info .detail {padding: 2rem; border-radius: 1.6rem; font-size: 1.5rem; color: var(--n-gray-900); background-color: var(--n-cgray-100);} .rate_info .detail .desc li {display: flex; gap: 1.6rem; font-weight: 500;} .rate_info .detail .desc li + li {margin-top: 2rem;} .rate_info .detail .desc li > p {line-height: 120%;} .rate_info .detail .desc li .ref {margin: 0; font-size: 1.3rem; color: var(--n-gray-500);} .rate_info .detail .desc li .ref li {display: block; width: 100%;} .rate_info .detail .desc li .ref li + li {margin-top: .5rem;} .rate_info .detail .desc li .ref.list_dot li:before {top: 8px; width: 2px; height: 2px; background-color: var(--n-gray-500);} .rate_info .detail .desc .icon {width: 1.8rem; height: 1.8rem; filter: var(--n-filter-gray5);} .rate_info .price {margin-top: 2rem; text-align: right; line-height: normal; font-size: 1.3rem; font-weight: 400;} .rate_info .price p {font-size: 2.2rem; font-weight: 700; color: var(--n-primary);} .rate_info .price .vat {color: var(--n-primary);} .rate_info .price .ref {margin-top: .4rem; font-size: 1.3rem; font-weight: 400; color: var(--n-gray-500);} .rate_caption {padding: 2rem; margin-top: 1rem; border-radius: 1.6rem; background-color: var(--n-gray-100);} .rate_caption_list {padding-left: 1rem; font-size: 1.3rem; color: var(--n-gray-600);} .rate_caption_list li {list-style: "\00B7 "; padding-left: .5rem;} .rate_caption_list li:not(:last-child) {margin-bottom: .5rem;} .rate_select_area {width: 100%; padding-top: 2.4rem; margin-top: 2.4rem; border-top: 1px solid var(--n-gray-200);} .rate_select_box {} .rate_select_box.ref_stop {font-size: 1.6rem; font-weight: 500; color: var(--n-gray-900); text-align: center;} .rate_select_box .form_group {margin-bottom: 1.6rem;} .rate_select_box .n_form_label {padding: .4rem 0;} .rate_select_box .title + form {margin-top: 1.6rem;} .rate_detail {padding-top: 4rem; margin-top: 4rem; border-top: 12px solid var(--n-cgray-100);} .rate_detail.type2 {padding: 1.6rem 1rem; margin-top: 0; border: 0; } .rate_detail_depth .title {margin-bottom: 1.2rem; font-size: 1.6rem; font-weight: 600; color: var(--n-gray-900); } .rate_detail_depth .desc {padding-bottom: 1rem;} .rate_detail_depth table {white-space: nowrap;} .rate_detail_depth .desc, .rate_detail_depth pre, .rate_detail_depth table {margin-bottom: 0; font-size: 1.4rem; color: var(--n-gray-600); line-height: 1.5; overflow-x: auto; word-break: keep-all;} .rate_detail_depth img {max-width: 100%; height: auto;} .rate_detail_depth p.desc_list>* {font-size: 1.3rem !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_depth {margin-top: 2.4rem; padding-top: 2.4rem; border-top: 1px solid var(--n-gray-200);} .rate_detail_depth:first-child {margin-top: 0; padding-top: 0; border-top: 0;} .rate_detail_depth .table th, .rate_detail_depth .table td {padding: .5rem 1rem; border: 1px solid var(--n-gray-200); text-align: center; vertical-align: middle;} .rate_detail_depth .table th {font-weight: 600; background-color: var(--n-gray-100);} .rate_detail_depth .table td {padding: 1rem .5rem; color: var(--n-gray-500);} .rate_detail_depth .desc_custom > ul {margin-top: 1rem;} .rate_detail_depth .desc_custom ul li {position: relative; padding-left: 1rem; line-height: 1.5;} .rate_detail_depth .desc_custom ul li:before {content: ''; position: absolute; top: 8px; left: 0; width: 2px; height: 2px; border-radius: 100%; background-color: var(--n-gray-600);} /* custom */ /* .rate_detail_depth .desc a {color: var(--n-gray-600); text-decoration: underline;} .rate_detail_depth .desc p {margin-top: 2rem; font-size: 1.6rem; font-weight: 600; color: var(--n-gray-900);} .rate_detail_depth .desc p:first-child {margin-top: 0;} .rate_detail_depth .desc > ul {margin-top: 1rem;} .rate_detail_depth .desc ul li {position: relative; padding-left: 1rem; line-height: 1.5;} .rate_detail_depth .desc ul li:before {content: ''; position: absolute; top: 8px; left: 0; width: 2px; height: 2px; border-radius: 100%; background-color: var(--n-gray-600);} .rate_detail_depth .desc ul li + li {margin-top: .5rem;} .rate_detail_depth .desc ul li ul {margin-top: .5rem;} .rate_detail_depth .desc ul li ul li {} .rate_detail_depth .desc ul li ul li:before {content: ''; position: absolute; top: 10px; left: 0; width: 5px; height: 1px; background-color: var(--n-gray-600);} */ /* ## rate detail view - new ## */ /*------------------------------------------- -- event(이벤트) -------------------------------------------*/ /* 이벤트 종료 뱃지 */ .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; padding: 2rem 0; border-bottom: 1px solid var(--n-gray-200); font-size: 1.4rem; color: var(--n-gray-600);} .review_list_header {margin-bottom: 1.6rem;} .review_list_header .review_info {display: flex; flex-direction: column; gap: .4rem; width: 100%; font-size: 1.2rem; color: var(--n-gray-400);} .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: 2rem; height: 2rem; filter: var(--n-filter-disabled);} .review_list_header .grade_icon.active {filter: var(--n-filter-yellow);} .review_list_content {display: flex; gap: .8rem;} .review_list_content .title {margin-bottom: .4rem; font-weight: 600; color: var(--n-gray-900);} .review_list_content .desc {margin-bottom: 0; font-size: 1.4rem; letter-spacing: -.25px; line-height: 144.4%; color: var(--n-gray-600);} .review_list_content .img_wrap {position: relative; width: 8.8rem; min-width: 8.8rem; height: 8.8rem; border-radius: .4rem; background-color: var(--n-gray-100); text-align: center; overflow: hidden;} .review_list_content .img_wrap img {position:absolute; top:50%; left: 0; transform:translateY(-50%); width: 100%; height: auto;} /* review write */ .grade_btn_wrap {display: flex; align-items: center;} .grade_btn_wrap .grade_btn {background: url(../svg/star-fill.svg) no-repeat center/100%; content: ""; display: inline-block; width: 2.4rem; height: 2.4rem; filter: var(--n-filter-disabled);} .grade_btn_wrap .grade_btn.active {filter: var(--n-filter-yellow);} .review_photo_wrap {position: relative; width: calc(100vw * .35); height: calc(100vw * .35); max-width: 240px; max-height: 240px; border-radius: .4rem; border: 1px solid var(--n-gray-300); overflow: hidden;} .review_photo_wrap label {width: 100%; height: 100%; background: url(../svg/plus-lg.svg) no-repeat center/30%; 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.5rem; height: 2.5rem; border-radius: 10rem; background-color: #000; opacity: 50%;} .btn_photo_remove:hover {opacity: 70%;} .btn_photo_remove::before {background: url(../svg/close.svg) no-repeat center/100%; content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: inline-block; width: 12px; height: 12px; filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(188deg) brightness(100%) contrast(100%);} /*------------------------------------------- -- qna(자주묻는질문) -------------------------------------------*/ /* qna tab */ .qna_tab_wrap {padding-top: 3.6rem;} .qna_tab {display: flex; flex-wrap: wrap; gap: .8rem;} .qna_tab_link {padding: .8rem 1.6rem; font-size: 1.4rem; border-radius: 10rem; color: var(--n-cgray-600); background-color: var(--n-cgray-100);} .qna_tab_link.on {background-color: var(--n-gray-900); color: #fff;} /* qna accordion */ .qna_acc_wrap {margin-top: 1.6rem;} .qna_acc_wrap .acc_item {width: 100%; border-bottom: 1px solid var(--n-gray-200);} .qna_acc_wrap .acc_header {font-size: 1.5rem; font-weight: 500; text-align: left; color: var(--n-gray-700);} .qna_acc_wrap .acc_header_link {position: relative; display: flex; align-items: center; width: 100%; padding: 2rem 0; padding-right: 3.2rem; background-color: transparent; text-align: left;} .qna_acc_wrap .acc_header.active .acc_header_link {color: var(--n-primary); font-weight: 700;} .qna_acc_wrap .acc_header .acc_header_link::after {background: url(../svg/chevron-down.svg) no-repeat center/100%; content: ""; position: absolute; top: 50%; transform: translateY(-50%); right: 1rem; display: inline-block; width: 1.2rem; height: 1.2rem; filter: var(--n-filter-gray5);} .qna_acc_wrap .acc_header.active .acc_header_link::after {background: url(../svg/chevron-up.svg) no-repeat center/100%; filter: var(--n-filter-primary);} .qna_acc_wrap .acc_content {display: none; padding-bottom: 2rem; word-break: break-all;} .qna_acc_wrap .acc_content_inner {display: flex; font-size: 1.4rem; color: var(--n-gray-600); word-break: keep-all;} .qna_acc_wrap .acc_content pre {font-size: 1.4rem; margin-bottom: 0; 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 {padding-top: 2.4rem;} /* notice list */ .notice_list {} .notice_list_item {position: relative; display: flex; flex-direction: column; padding: 2rem 1.2rem; border-bottom: 1px solid var(--n-gray-200); font-size: 1.3rem;} /* .notice_list_item::after {background: url(../svg/chevron_right.svg) no-repeat center/100%; content: ""; position: absolute; top: 50%; right: 1.6rem; transform: translateY(-50%); width: 1.8rem; height: 1.8rem; filter: invert(25%) sepia(98%) saturate(9%) hue-rotate(329deg) brightness(100%) contrast(95%);} */ .notice_list_item.no_list {padding-right: 0;} .notice_list_item.no_list::after {display: none;} .notice_list_item .title {font-size: 1.5rem; font-weight: 600; color: var(--n-gray-900); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} .notice_list_item .date, .notice_list_item .event_date {color: var(--n-gray-400);} .notice_list_link {color: var(--n-gray-900);} .notice_list_link:hover {color: var(--n-gray-900);} /* 공지사항 고정 */ .notice_list_item.fix_item {background-color: var(--n-cgray-100);} .notice_list_item.fix_item .title {position: relative; padding-left: 2rem; font-weight: 700;} .notice_list_item.fix_item .title::before {content: ''; position: absolute; top: 50%; left: 0; transform: translateY(-50%); display: block; width: 1.5rem; height: 1.5rem; background: url(../svg/push-pin-fill.svg) center/100% no-repeat;} .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;} .notice_list_item.order_item .title {font-weight: 700;} .notice_list_item.order_item .title_status {display: flex; justify-content: space-between; font-size: 1.4rem; font-weight: 400; color: var(--n-gray-400);} .notice_list_item.order_item .title_status span {font-weight: 500; color: var(--n-primary);} .notice_list_item.order_item .text {margin-top: 1rem; font-weight: 500; color: var(--n-gray-700);} .notice_list_item.order_item .btn_group {display: flex; flex-direction: row; justify-content: center; gap: .8rem; min-width: 9rem; padding: 0; margin-top: 1.2rem;} .notice_list_item.order_item .btn_group > * {width: 100%; max-width: none; padding-left: .4rem; padding-right: .4rem;} /*------------------------------------------- -- 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 1.6rem; border-radius: 1.2rem; font-size: 1.4rem; background-color: var(--n-cgray-100);} .agree_check {margin-top: 1rem; font-weight: 600;} /* pagination */ .pagination {flex-wrap: wrap; align-items: center; justify-content: center; margin-top: 2rem;} .page_icon { display: inline-block; vertical-align: middle; width: 2rem; height: 2rem; margin: 0 .25rem; filter: var(--n-filter-gray5);} .page_first {background: url(../svg/double-arrow-left.svg) no-repeat center/100%;} .page_last {background: url(../svg/double-arrow-right.svg) no-repeat center/100%;} .page_prev {background: url(../svg/chevron-left.svg) no-repeat center/100%;} .page_next {background: url(../svg/chevron-right.svg) no-repeat center/100%;} .page_link {display: inline-flex; align-items: center; justify-content: center; width: 3.2rem; height: 3.2rem; margin: 0 .25rem; border-radius: .4rem; font-size: 1.4rem; color: var(--n-gray-400);} .page_link:hover {color: var(--n-gray-400); background-color: rgba(100, 116, 139, .1);} .page_link.on, .page_link.on:hover {color: var(--n-primary); background-color: var(--n-primary-light);} /*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-lg.svg) no-repeat center/30%; filter: var(--n-filter-gray4);} .cs_photo_wrap img {position:absolute; top:50%; transform:translateY(-50%); width: 100%; height: auto;} /*------------------------------------------- -- form download(신청서 다운로드) -------------------------------------------*/ .download_wrap .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_link {display: flex; align-items: center; gap: .8rem;} .download_wrap .card_link .title {flex: 1 1 auto; word-break: keep-all;} .download_wrap .card_link .btn_down {flex: 0 0 auto;} /*------------------------------------------- -- apply change(가입정보변경) -------------------------------------------*/ .applychg_tab {margin-bottom: 1.2rem;} .applychg_tab .tab_box_link.check_self::before {content: ''; position: absolute; top: .4rem; right: .4rem; display: block; width: 1.4rem; height: 1.4rem; background: url(../svg/asterisk.svg) no-repeat center/100%; filter: var(--n-filter-gray5);} .applychg_tab .tab_box_link.on::before {filter: var(--n-filter-primary);} /*------------------------------------------- -- 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 {position: relative; display: inline-flex; align-items: 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;} /* cs info */ .step.type3.cs_step {flex-direction: unset; flex-wrap: wrap;} .step.type3.cs_step .step_item {width: calc(50% - .6rem);} /*------------------------------------------- -- prepaid -------------------------------------------*/ .charge_wrap .guide_area {font-size: 1.4rem; color: var(--n-gray-800); word-break: keep-all;} .charge_wrap .guide_area .guide_top {margin-bottom: 4rem;} .charge_wrap .guide_area h4 {margin-bottom: 1rem;} .charge_wrap .guide_area .guide_cardlist > * {display: flex; flex-direction: column; margin-bottom: 1.6rem;} .charge_wrap .guide_area .guide_cardlist .box {height: 100%;} .charge_wrap .input_flex button, #smsAuth .input_flex button {min-width: 10rem;} /*------------------------------------------- -- mypage -------------------------------------------*/ /* join info */ .my_info.joinInfo .header {display: flex; flex-direction: column; padding: 2rem 1.6rem; margin-bottom: 4rem; border: 1px solid var(--n-primary); border-radius: 1.2rem; background-color: #eef8ff;} .my_info.joinInfo .header_top {display: block; padding-top: 0; font-size: 1.6rem; background-color: transparent; text-align: center;} .my_info.joinInfo .header_top .name {font-weight: 600;} .my_info.joinInfo .header_top .apply_no {color: var(--n-primary);} .my_info.joinInfo .header_bottom {padding-top: 1.6rem; margin-top: 1.6rem; border-top: 1px solid var(--n-cgray-200); font-size: 1.4rem;} .my_info.joinInfo .header_bottom ul {display: flex; flex-direction: column; gap: .4rem; color: var(--n-cgray-800);} .my_info.joinInfo .header_bottom ul li {display: flex; width: 100%; justify-content: space-between;} .my_info.joinInfo .header_bottom ul li span {position: relative; padding-right: 1rem; color: var(--n-cgray-500);} .my_info.joinInfo .content_box {display: flex; flex-direction: column; padding: 0 .8rem; margin-bottom: 3.2rem;} .my_info.joinInfo .content_box .title_wrap {margin-bottom: 1.2rem;} .my_info.joinInfo .content_box .title_wrap h2 {margin-bottom: 0; line-height: 1.75;} .my_info.joinInfo .content_box .title_wrap.type2 {display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;} .my_info.joinInfo .content_box .title_wrap.type3 {display: flex; flex-direction: column; justify-content: space-between;} .my_info.joinInfo .content_box .title_wrap .ref {font-size: 1.2rem; font-weight: 400; color: var(--n-gray-500);} .my_info.joinInfo .content_box .title_wrap .amount_refresh {display: flex; justify-content: end; align-items: center; gap: .8rem; width: 100%; font-size: 1.2rem; font-weight: 400; color: var(--n-gray-500);} .my_info.joinInfo .content_box .title_wrap .amount_refresh button {height: 3rem;} .my_info.joinInfo .content_box ul {position: relative; flex-grow: 1; height: 100%;} .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 ul .title, .my_info.joinInfo .content_box ul .text {font-size: 1.4rem;} .my_info.joinInfo .content_box ul .rateplan {padding: 1.2rem 1rem; border-radius: .4rem; font-size: 1.6rem; font-weight: 600; color: var(--n-gray-900); background-color: var(--n-cgray-100); 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 {padding-top: 2rem; margin-top: 2rem; border-top: 1px solid var(--n-gray-200);} .my_info.joinInfo .content_box .amount_info .box_title {margin-bottom: 1.6rem; font-size: 1.6rem;} .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; width: 100%; color: var(--n-gray-400);} .my_info.joinInfo .content_box .amount_info .amount .acc {font-weight: 700; color: var(--n-primary);} .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-direction: column; justify-content: center; width: 100%; padding-bottom: 2rem; margin-bottom: 2rem; border-bottom: 1px solid var(--n-gray-200); font-size: 1.5rem; color: var(--n-gray-800); text-align: center;} .my_info.joinInfo .charge_area .total_info .amount {font-size: 2.8rem; color: var(--n-primary);} .my_info.joinInfo .charge_area .total_info .period {margin-top: .5rem; font-size: 1.3rem; color: var(--n-gray-500);} .my_info.joinInfo .charge_area .charge_info {width: 100%; margin-top: 1.2rem;} /* pay history */ .select_month_area {margin-bottom: 2.4rem; text-align: center;} .select_month_area .select_box {width: 120px;} .select_month_area .period {padding-top: 1rem; font-size: 1.3rem; color: var(--n-gray-500);} /*********************************************************************************************************************** F. Self ***********************************************************************************************************************/ .body_wrap.self_wrap {padding-top: calc(52px + 24px);} .self_wrap .login_wrap {max-width: 640px; padding: 2rem 0; margin: 0 auto;} .self_wrap .form_wrap {max-width: 640px; margin: 0 auto;} .self_wrap .form_wrap h2 {font-size: 1.7rem;} .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;} #hopeNumList .n_check_label {letter-spacing: -.25px;} #hopeNumListArea button {max-width: 340px;} #areaTerms {padding: 1rem ; border-radius: 1.2rem; background-color: var(--n-cgray-100);} #areaTerms > div {padding: .8rem;} #areaTerms .btn_underline, #personAgree .btn_underline, #harmAgree .btn_underline {min-width: 30px; font-size: 1.3rem; color: var(--n-gray-400);} #inisisAuth .modal-body {height: 65vh;} #inisisAuth .acc_group {padding: 1rem 1.6rem; border: 1px solid var(--n-cgray-200); border-radius: 1.2rem;} #inisisAuth .acc_content {font-size: 1.4rem;} #inisisAuth .step_item {flex-direction: column; gap: 0; padding: 2rem 1rem; text-align: center;} #inisisAuth .step_item + .step_item::before {top: 0; width: 1.2rem; height: 1.2rem;} #inisisAuth .step_item .title {font-size: 1.4rem;} #inisisAuth .step_item .img_wrap {width: 5rem; height: 5rem;} #inisisAuth .step_item .img_wrap img {width: 3rem; height: 3rem;} .self_copy_wrap {padding: 2rem 0 4rem 0;} .self_copy {font-size: 1rem; color: var(--n-gray-400); text-align: center;} /*------------------------------------------- -- step1 -------------------------------------------*/ /* inquiryInfo 가입 전 확인 */ #inquiryInfoTab li {flex: 0 0 auto; width: 33.333%;} #inquiryInfoTabContent {margin-top: -1rem;} #inquiryInfoTabContent .tab_board .title_area {position: relative; padding-bottom: 2rem; margin-bottom: 2rem; border-bottom: 1px dashed var(--n-cgray-300);} #inquiryInfoTabContent .tab_board .title_area > .title {font-size: 1.5rem;} /* #inquiryInfoTabContent .tab_board .title_area > .title {padding: 0 3rem;} */ #inquiryInfoTabContent .tab_board .content {padding-bottom: 2.4rem; margin-top: 0;} #inquiryInfoTabContent .swiper-button-prev, #inquiryInfoTabContent .swiper-button-next {width: 2rem; height: 2rem; margin-top: unset; transform: translateY(-50%);} #inquiryInfoTabContent .swiper-button-prev::after, #inquiryInfoTabContent .swiper-button-next::after {display: none;} #inquiryInfoTabContent .swiper-button-prev {left: 0; background: url(../svg/chevron-left.svg) no-repeat center/100%;} #inquiryInfoTabContent .swiper-button-next {right: 0; background: url(../svg/chevron-right.svg) no-repeat center/100%;} #inquiryInfoTabContent .swiper-pagination {bottom: 0; line-height: normal;} #inquiryInfoTabContent .swiper-pagination-bullet {width: .6rem; height: .6rem; margin: 0 .25rem; border-radius: 10rem; background-color: rgba(15, 23, 42, 0.25); opacity: 1; } #inquiryInfoTabContent .swiper-pagination-bullet-active {width: 2rem; background-color: var(--n-cgray-900);} #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-radius: 1.2rem; background-color: var(--n-cgray-100);} .step1-authInfo .box_outline_text span {font-size: 1.2rem;} /* 유심/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;} /*------------------------------------------- -- price select(요금제 선택 - step_price) -------------------------------------------*/ .self_wrap .box_cardlist .inner {max-width: 640px !important;} /* price filter */ .price_filter, .price_filter_popup {top: 5.3rem; padding: 2rem 0; overflow-x: visible; background-color: var(--n-cgray-100);} .price_filter_popup {margin-top: -3.8rem;} .price_filter .swiper {max-width: 640px; margin: 0 auto;} .price_filter_popup .swiper {padding-right: 2rem;} .price_filter button, .price_filter_popup button {padding: .8rem 1.6rem; font-size: 1.4rem; color: var(--n-gray-700); background-color: #fff; border: 1px solid var(--n-gray-200); border-radius: .6rem;} .price_filter button:hover, .price_filter_popup button:hover {color: var(--n-gray-700); background-color: rgba(15, 23, 42, .04); border-color: var(--n-gray-200);} .price_filter button.on, .price_filter_popup button.on {color: #fff; background-color: var(--n-primary); border-color: var(--n-primary);} .self_wrap .price_sticky_wrap {top: 5.3rem; 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;} .self_wrap .price_sticky_wrap .sub_header::after {display: none;} .self_wrap .price_sticky_wrap .price_filter {top: 0;} /* price list */ .card_price_list {border: none; margin-bottom: 1.6rem;} .card_price_list label {padding: 2rem; border: 1px solid var(--n-gray-200); border-radius: 1.6rem;} .card_price_list input[type="radio"] {display: none;} .card_price_list input[type="radio"]:checked + label {border: 1px solid var(--n-primary); box-shadow: 0px 0px 8px 0px rgba(15, 23, 42, .24);} .card_price_list .head {font-size: 1.4rem; font-weight: 500; color: var(--n-gray-900);} .card_price_list .content_group {flex-direction: column; gap: 2rem; margin-top: 2rem;} .card_price_list .detail {width: 100%; font-size: 1.3rem; color: var(--n-gray-700);} .card_price_list .text {display: flex; flex-wrap: wrap; gap: .8rem 2rem; width: 100%;} .card_price_list .text li {position: relative; display: flex; align-items: center; gap: 1rem; font-size: 1.3rem; color: var(--n-gray-900); line-height: normal;} .card_price_list .text li:first-child {width: 100%; font-size: 1.8rem; font-weight: 700; color: var(--n-gray-900);} .card_price_list .text li span {font-weight: 400; color: var(--n-gray-500);} .card_price_list .detail .ref {padding-top: .8rem; font-size: 1.3rem; font-weight: 400; color: var(--n-primary);} .card_price_list .price {font-size: 2rem; font-weight: 700; text-align: right; color: var(--n-primary);} .card_price_list .price .ref {font-size: 1.3rem; font-weight: 400; color: var(--n-gray-400);} /*------------------------------------------- -- order list(가입정보 확인 - step_6) -------------------------------------------*/ .order_list_wrap h1 {margin-bottom: 3.2rem;} .order_list_wrap .order_list, .order_box {padding: 2rem 1.6rem; border-radius: 1.2rem; border: 1px solid var(--n-cgray-200); word-break: keep-all;} .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.6rem;} .order_list li + li {padding-top: 1.6rem;} .order_list .title {font-size: 1.4rem; color: var(--n-gray-400);} .order_list .text {font-size: 1.4rem; color: var(--n-gray-700);} .order_list .text .ref {display: inline-block; width: 100%;} .order_list .text button {height: 3.6rem; line-height: 3.6rem; padding: 0 1.2rem; 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: 1.6rem;} .applyComplArea .img_wrap img {width: 6rem; filter: var(--n-filter-primary);} .applyComplArea h2 {margin-bottom: 2rem; font-size: 1.8rem; font-weight: 500;} .applyComplArea .box_guide {padding: 2rem; border-radius: 1.6rem; background-color: var(--n-gray-100);} .applyComplArea .box_guide .text_group_ref {font-size: 1.3rem;} /*********************************************************************************************************************** G. Components ***********************************************************************************************************************/ /*------------------------------------------- -- form -------------------------------------------*/ .form_wrap + .form_wrap {margin-top: 4rem;} .form_group {margin-bottom: 2rem;} .form_group:last-child {margin-bottom: 0;} .input_group {position: relative;} .input_group input[type="email"] {padding-right: 7rem;} .form_notice {width: 100%; margin-top: 1rem; font-size: 1.3rem; color: var(--n-gray-500);} .form_notice .list_dot li:before, .form_notice .list_dash li:before, .form_notice .list_dot li span {background-color: var(--n-gray-500);} .form_count {display: flex; justify-content: space-between; align-items: center; font-size: 1.4rem; font-weight: 500; color: var(--n-gray-900);} .input_flex {display: flex; align-items: center; gap: .8rem;} .input_flex input {flex: 1;} .input_flex button {height: 4.4rem; padding: 0 1.2rem; font-size: 1.5rem;} /* label */ .n_form_label {font-size: 1.4rem; padding: .4rem 0; margin: 0; color: var(--n-gray-500);} .n_check_label {font-size: 1.5rem; color: var(--n-gray-700);} /* checkbox */ .form-check {padding-left: 0; margin-bottom: 0;} .form-check input[type="checkbox"], .form-check input[type="radio"] {top: .25rem; margin: 0; margin-right: .8rem; border-radius: .4rem;} .form-check input[type="radio"] {border-radius: 999px;} input[type="checkbox"]+.form-label, input[type="radio"]+.form-label {margin-bottom: 0;} /* checkbox - terms */ .form_check_icon {padding-left: 0; margin-bottom: 0;} .form_check_icon .n_check_label {position: relative; padding-left: 2.4rem; 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-fill.svg); background-size: 100%; background-position: 0 0; filter: var(--n-filter-disabled);} .form_check_icon input[type="checkbox"]:checked + label span {filter: var(--n-filter-primary);} /* 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;} /*------------------------------------------- -- list -------------------------------------------*/ .list li {position: relative; word-break: keep-all;} .list li + li {margin-top: .4rem;} .list li.ref {margin-top: .25rem; padding-left: 1rem;} .list_dash li {position: relative; padding-left: 1rem; word-break: keep-all;} .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; word-break: keep-all;} .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; word-break: keep-all;} .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%; font-size: 1.2rem; color: var(--n-gray-800);} .select_list li a.on {font-weight: 500; color: var(--n-gray-900);} .select_list li a.on .img_wrap {border: 2px solid var(--n-primary); box-shadow: var(--n-primary-shadow) 0px 0px 0px 3px;} .select_list li a .img_wrap {width: 5rem; height: 5rem; margin: 0 auto; border: 1px solid var(--n-cgray-200); border-radius: 1rem; overflow: hidden;} .select_list li a .img_wrap img {width: 100%; height: 100%; object-fit: cover;} .select_list li a span {display: inline-block; margin-top: .5rem;} /*------------------------------------------- -- table -------------------------------------------*/ .table_board {display: block; width: 100%; border-top: 1px solid var(--n-gray-200); font-size: 1.4rem; 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%; border-bottom: 1px solid var(--n-gray-200);} .table_board th {width: 100%; height: 100%; padding: 1.6rem 1.2rem; font-weight: 600; color: var(--n-gray-900); background-color: var(--n-cgray-100);} .table_board td {width: 100%; padding: 1.6rem 1.2rem;} .table_board .form_group {margin-bottom: 1rem;} .table_board.type2 {display: table; width: 100%; border-top: 2px solid var(--n-primary); font-size: 1.4rem;} .table_board.type2 tbody {display: table-row-group;} .table_board.type2 tr {display: table-row; border-bottom: 1px solid var(--n-gray-300);} .table_board.type2 th {width: auto; min-width: unset; padding: 1rem; border: 1px solid var(--n-gray-300); background-color: var(--n-gray-100); color: var(--n-gray-900); text-align: center;} .table_board.type2 th:first-child {border-left: 0;} .table_board.type2 th.be_0 {border-right: 0;} .table_board.type2 td {width: auto; padding: 1.6rem 1rem; color: var(--n-gray-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); border-bottom: 1px solid var(--n-gray-300);} .table_board.table_board_gray th {background-color: var(--n-gray-100);} /* align */ .table_board td.td_left {padding-left: 2rem;} /*------------------------------------------- -- box -------------------------------------------*/ .box {border-radius: 1.2rem; font-size: 1.4rem; color: var(--n-gray-700); word-break: keep-all;} .box_title {font-size: 1.6rem; font-weight: 600; color: var(--n-gray-900); margin-bottom: 1.6rem;} .box_outline {padding: 2rem 1.6rem; border: 1px solid var(--n-cgray-200);} .box_outline_title {font-size: 1.5rem; font-weight: 600; color: var(--n-gray-900);} .box_outline_text {font-size: 1.3rem; color: var(--n-gray-500);} .box_outline_icon img {width: 4rem;} .box_form {padding: 2rem; background-color: var(--n-cgray-100);} .box_form .inner {display: flex; flex-direction: column; justify-content: center; gap: 1.6rem;} .box_form .inner .img_wrap {width: 100%; max-width: 320px; 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; padding-bottom: 10rem;} .box_cardlist option {display: none;} .box_list {padding: 2rem 1.6rem; background-color: var(--n-cgray-100);} .box_list .form-check {} .box_guide {padding: 2rem; background-color: var(--n-cgray-100);} .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(20, 92, 230, .04);} .box_green .title {font-size: 1.4rem; font-weight: 700;} .box_light {height: 100%; padding: 2rem; background-color: rgb(18, 94, 227, .08);} .box_light .title {font-size: 1.4rem; font-weight: 700;} /*------------------------------------------- -- button -------------------------------------------*/ button {border-radius: .4rem;} /* 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-200); color: var(--n-gray-400); opacity: 1;} .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-cgray-200);} /* 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: #bbe2ff; color: var(--n-primary);} .n_btn_lightgray {background-color: var(--n-gray-200); color: var(--n-gray-600);} .n_btn_lightgray:hover {background-color: var(--n-gray-300); color: var(--n-gray-700);} .n_btn_darkgray {background-color: var(--n-gray-700); color: #fff;} .n_btn_darkgray:hover {background-color: var(--n-gray-600); color: #fff;} .n_btn_dark {background-color: var(--n-gray-900); color: #fff;} .n_btn_dark:hover {background-color: var(--n-gray-800); color: #fff;} .n_btn_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);} .n_btn_outline_gray {background-color: transparent; border: 1px solid var(--n-gray-300); color: var(--n-gray-600); background-color: #fff;} .n_btn_outline_gray:hover {color: var(--n-gray-600);} .n_btn_outline_dark {background-color: transparent; border: 1px solid var(--n-gray-900); color: var(--n-gray-900); background-color: #fff;} .n_btn_outline_dark:hover {color: var(--n-gray-900);} .n_btn_info {background-color: var(--n-gray-200); color: var(--n-gray-800);} .n_btn_info:hover {background-color: var(--n-gray-300); color: var(--n-gray-800); border: none;} .btn_underline {height: auto; padding: 0; font-size: 1.4rem; 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-gray-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: 4.8rem; font-size: 1.6rem; font-weight: 500; border-radius: .4rem; text-align: center;} a.n_btn_lg {display: inline-block; line-height: 4.8rem;} .n_btn_lg.w340 {max-width: 340px;} .n_btn_lg.w260 {max-width: 260px;} .n_btn_m {width: 100%; height: 4.8rem; font-size: 1.5rem; font-weight: 500; border-radius: .4rem; text-align: center;} a.n_btn_m {display: inline-block; line-height: 4.8rem;} .n_btn_s {width: 100%; height: 4.4rem; font-size: 1.4rem; border-radius: .4rem; text-align: center;} a.n_btn_s {display: inline-block; line-height: 4.4rem;} .n_btn_xs {max-width: 120px; height: 3.6rem; padding: 0 1.2rem; font-size: 1.4rem; border-radius: .4rem; text-align: center;} a.n_btn_xs {display: inline-block; line-height: 3.6rem;} .n_btn_auto {height: 3.2rem; padding: 0 1.6rem; font-size: 1.3rem; border-radius: .4rem; text-align: center;} a.n_btn_auto {display: inline-block; line-height: 3.2rem;} .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-700); background-color: transparent; vertical-align: middle;} .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; margin-left: .4rem; filter: var(--n-filter-gray7);} .btn_link_ico:hover {color: var(--n-gray-700);} .btn_link_ico.primary_color {color: var(--n-primary);} .btn_link_ico.primary_color::after {filter: var(--n-filter-primary);} .btn_link_ico.primary_color:hover {color: var(--n-primary);} /* 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);} h2 .icon_help, h2 .icon_help2 {transform: translateY(3px);} /* select button */ input[type="radio"].btn-check, input[type="checkbox"].btn-check {display: none;} .select_btn, .select_btn_t2 {display: flex; align-items: center; width: 100%; height: 100%; padding: 1rem 1.2rem; font-size: 1.4rem; color: var(--n-gray-700); border: 1px solid var(--n-gray-300); border-radius: .4rem; background-color: transparent; text-align: center; word-break: keep-all;} .select_btn {justify-content: center;} .select_btn_t2 {justify-content: space-between;} .select_btn_lg, .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-gray-300); background-color: rgba(15, 23, 42, .04);} .btn-check:checked + .select_btn, .btn-check:checked + .select_btn_t2, .select_btn.on {border-color: var(--n-gray-300); font-weight: 600; color: var(--n-primary); box-shadow: inset 0 0 0 1px var(--n-primary);} /* selector */ select.select_box::-ms-expand {display: none;} .select_box { position: relative; width: auto; padding: 1rem 2.4rem 1rem 1.2rem; font-size: 1.4rem; font-weight: 500; border: 1px solid var(--n-gray-300); 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_box + .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: 3px 6px; font-size: 1.1rem; font-weight: 600; border-radius: 0.4rem;} /* .badge_wrap .badge + .badge {margin-left: .5rem;} */ .badge_primary {background-color: var(--n-primary); border: 1px solid var(--n-primary); color: #fff;} .badge_light {background-color: var(--n-primary-light); border: 1px solid transparent; color: var(--n-primary);} .badge_red {background-color: #ff5169; border: 1px solid #ff5169; color: #fff;} .badge_purple {background-color: #b053c5; border: 1px solid #b053c5; color: #fff;} .badge_green {background-color: #1fc198; border: 1px solid #1fc198; color: #fff;} .badge_yellow {background-color: #ffc157; border: 1px solid #ffc157; color: #fff;} .badge_blue {background-color: #00a0ff; border: 1px solid #00a0ff; color: #fff;} .badge_blue {background-color: #00a0ff; border: 1px solid #00a0ff; color: #fff;} .badge_orange {background-color: #FF8A00; border: 1px solid #FF8A00; color: #fff;} .badge_pink {background-color: #FF5C93; border: 1px solid #FF5C93; color: #fff;} .badge_white_b {background-color: #fff; border: 1px solid var(--n-cgray-600); color: var(--n-cgray-600);} .badge_black {background-color: var(--n-cgray-600); border: 1px solid var(--n-cgray-600); color: #fff;} .badge_white {background-color: #fff; border: #fff; color: var(--n-cgray-600);} .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 #ff5169; color: #ff5169;} .badge_purple-line {background-color: transparent; border: 1px solid #b053c5; color: #b053c5;} .badge_green-line {background-color: transparent; border: 1px solid #1fc198; color: #1fc198;} .badge_yellow-line {background-color: transparent; border: 1px solid #ffc157; color: #ffc157;} .badge_blue-line {background-color: transparent; border: 1px solid #00a0ff; color: #00a0ff;} .badge_LGT {background-color: #E6007E; border: 1px solid #E6007E; color: #fff;} .badge_KTF {background-color: #5DDFDE; border: 1px solid #5DDFDE; color: #000;} .badge_SKT {background-color: #3617CE; border: 1px solid #3617CE; color: #fff;} /*------------------------------------------- -- text -------------------------------------------*/ h1 {font-size: 2.4rem; font-weight: 700; color: var(--n-gray-900);} h2 {font-size: 2rem; font-weight: 600; color: var(--n-gray-900); margin-bottom: 1.6rem; line-height: 1.5; word-break: keep-all;} .breadcrumb {font-size: 1.1rem; color: var(--n-gray-500); margin-bottom: 0;} .text_lg_size {font-size: 1.6rem;} .text_default_size {font-size: 1.4rem;} .text_md_size {font-size: 1.3rem;} .text_sm_size {font-size: 1.1rem;} .text_default_color {color: var(--n-gray-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; border-radius: 1.2rem; background-color: var(--n-cgray-100);} .step_item {position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 1rem; flex: 0 1 auto; width: 100%; padding: 2.4rem 0; font-size: 1.3rem; color: var(--n-gray-600); text-align: center;} .step_item + .step_item::before {content: ""; position: absolute; top: -1rem; left: 50%; transform: translateX(-50%); display: block; width: 1.4rem; height: 1.4rem; background: url(../svg/chevron-down.svg) center/100% no-repeat; filter: var(--n-filter-gray5);} .step_item .img_wrap {position: relative; width: 4rem; height: 4rem;} .step_item .img_wrap img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 4rem; height: 4rem;} .step_item .title {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.6rem; height: fit-content; padding: .2rem 0; margin-right: .4rem; border-radius: 100%; background-color: var(--n-gray-900); color: #fff; text-align: center; line-height: 1; transform: translateY(-2px);} .step_icon::before {content: counter(section); font-size: 1.2rem; font-weight: 600;} .step.type2 {border-radius: 0; background-color: transparent;} .step.type2 .step_item {justify-content: start; flex-direction: row; padding: 1.2rem 0; text-align: start;} .step.type2 .step_item + .step_item::before {display: none;} .step.type3 {gap: 1.2rem; border-radius: 0; background-color: transparent;} .step.type3 .step_item {gap: 1.6rem; padding: 2rem; border-radius: 1.2rem; background-color: var(--n-cgray-100);} .step.type3 .step_item + .step_item::before {display: none;} /* .step.type3 .step_item > .title {font-size: 1.4rem; font-weight: 500;} */ .step.type3 .step_icon {width: auto; padding: .2rem .6rem; border-radius: 10rem; line-height: normal;} .step.type3 .step_icon::before {content: "STEP" counter(section);} /*------------------------------------------- -- 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;} .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.type2 .advice_item {flex-direction: column; gap: 1.2rem;} .advice.type2 .advice_item .img_wrap {flex-basis: auto; width: 4rem; height: 4rem;} /*------------------------------------------- -- space -------------------------------------------*/ .pt16 {padding-top: 1.6rem;} .pt24 {padding-top: 2.4rem;} .pb16 {padding-bottom: 1.6rem;} .pb24 {padding-bottom: 2.4rem;} .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-header, .modal-body, .modal-footer {padding: 2rem;} .modal-body, .modal-footer {border: none;} .modal-header {border: 0;} .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: .5rem;} .modal_text li {padding-left: .5rem; 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;} /*********************************************************************************************************************** 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 */ .main_banner {overflow: hidden;} .carousel_mobile, .for_mobile {display: none;} .carousel_tablet, .for_tablet {display: inline-block;} /* .main_banner .swiper-slide {height: 380px;} .main_banner img {width: auto; height: 100%;} */ /* -- main service area */ .main_service_area .service_group li {width: auto; flex: 1;} /* -- main product list */ /* .main_product_list .swiper-slide {width: 48%;} */ /* -- main service banner */ .main_service_banner .service_banner {height: auto;} .service_banner a {background: url(../img/main-self-banner.png) no-repeat right bottom/contain;} /** E. Sub ***/ /* -- mypage */ .my_info.joinInfo .content_box .amount_info {flex-wrap: nowrap;} .my_info.joinInfo .content_box .amount_info .box_title {margin-bottom: 0;} .my_info.joinInfo .content_box .amount_info .price_list.type2 li {flex-wrap: nowrap;} .my_info.joinInfo .content_box .amount_info .amount {flex-wrap: nowrap; width: auto; padding-left: 1rem;} /* -- 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: 1024px) { /*------------------------------------------- -- desktop (1024px~) -------------------------------------------*/ /*** A. Default ***/ input[type="text"], input[type="password"], input[type="number"], input[type="date"], input[type="email"], textarea, select.form-select {width: 100%; border-radius: .6rem; font-size: 1.5rem;} /*** B. Layout ***/ /* -- container*/ .container, .container-lg, .container-md, .container-sm { max-width: calc(1024px + 40px); } /* -- header */ .header .header_content {height: auto; align-items: center;} .header .logo img {max-height: 4rem;} .header_top {display: block; padding-top: 2.4rem;} .submenu {height: auto;} .submenu a {font-size: 1.4rem; color: var(--n-gray-600); line-height: normal;} .submenu a + a {margin-left: 2rem;} .header_content .moblie_wrap {display: none;} .header_content .pc_wrap {display: flex;} /* -- sub header */ .sub_header {top: 13.7rem; gap: 2rem; width: 100%; padding: 3.2rem 0; margin-bottom: 5.6rem;} .body_wrap_agent .sub_header {top: 0;} .sub_header .title {font-size: 2.4rem;} .sub_header_step {} /* .sub_header_step li:not(:last-child):before {right: -24px; width: 1.4rem; height: 1.4rem;} */ .sub_header_step li img {width: 2.8rem; height: 2.8rem;} /* -- body */ .body_wrap {padding-top: calc(137px + 56px);} /* -- nav */ .gnb_wrap {display: block;} /* -- footer */ footer {margin-top: 8rem; font-size: 1.3rem;} footer .policy_list a {font-weight: 400;} .footer_bottom {flex-direction: row; gap: 2.4rem; padding: 3.2rem 0 4rem 0;} footer .logo {width: 6.7rem; height: 3.2rem;} footer .company_info {gap: 1rem; width: 50%;} footer .company_info li {width: auto;} footer .company_info li span {display: inline-block;} footer .company_info li a {display: none;} footer .copyright {width: 100%;} /* -- preview bottom */ .preview_header {padding: 2.8rem 0;} .preview_header .head {font-size: 1.8rem;} /* .preview_header .n_btn_icon {width: 1.6rem; height: 1.6rem; background-size: 1.6rem;} */ .preview_body .price_info .title {font-size: 1.6rem;} .preview_body .price_info .title:nth-of-type(3) {font-size: 2rem;} .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_footer .form-check-input {width: 1.5rem; height: 1.5rem;} .main_pop_layer .pop_footer .n_check_label {padding-left: .8rem; font-size: 1.5rem;} .main_pop_layer .pop_footer .pop_close {font-size: 1.5rem;} .main_pop_layer .swiper-button-next, .main_pop_layer .swiper-button-prev {display: flex;} /* -- flex */ .flex_row {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;} .form_group .row {margin: 0 -.6rem} .form_group .row > * {padding: 0 .6rem;} /*** C. login ***/ /* .login_form {padding: 0 5rem;} */ .login_box {padding: 4rem;} /*** D. Main ***/ .main_content {padding-top: 13.7rem;} .sec_title {display: block; font-size: 3.6rem; margin-bottom: 3.2rem;} .main_btn_wrap {margin-top: 4rem;} .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 {display: none;} .carousel_pc, .for_pc {display: inline-block;} .none_pc {display: none;} /* .main_banner .swiper-slide {height: 480px;} */ /* .main_banner {height: 618px;} */ .main_banner {height: 500px;} .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_banner .swiper-button-prev, .main_banner .swiper-button-next {display: flex;} /* -- main service area */ .main_service_area {padding: 8rem 0;} .main_service_area .service_link {gap: 1.2rem; font-size: 1.8rem;} .main_service_area .service_link img {width: 8.8rem;} /* -- main product list */ .main_product_list {padding: 10rem 0;} .rate_card_list {flex-direction: row; gap: 2.4rem;} .rate_card_item {width: 33.33333%;} .rate_card {gap: 3.2rem; padding: 3.2rem; box-shadow: 0px 1px 16px 0px rgba(15, 23, 42, .04);} .rate_card_title {font-size: 1.6rem;} .rate_card_title .title_label span {font-size: 1.3rem;} .rate_card_info {flex-direction: column; gap: 1.2rem;} .rate_card_info li {gap: 1rem; font-size: 1.4rem;} .rate_card_price {padding-top: 0; font-size: 1.6rem;} .rate_card_price .discount {font-size: 1.5rem;} .rate_card_price .discount span {font-size: 2.4rem;} .rate_card_price .origin {font-size: 1.4rem;} .phone_card_list {margin: 0 -12px 0 -12px;} .phone_card_item {width: 33.33333%; padding: 0 12px 0 12px} .phone_card {flex-direction: column; padding: 3.2rem; border-radius: 2rem;} .phone_card_img {width: 100%; max-width: 250px; height: auto; max-height: 250px; margin: 0 auto;} .phone_card_info {padding-left: 0; padding-top: 2rem; font-size: 1.6rem;} .phone_card_title {font-size: 2rem;} .phone_card_title .title_label {margin-right: .8rem;} .phone_card_price {flex-direction: row; align-items: center; margin-top: 3.2rem; font-size: 1.8rem;} .phone_card_price .ref {padding-left: .5rem; font-size: 1.2rem;} /* -- main video area */ .main_video_area {padding: 8rem 0;} .main_video_area .main_video {padding-top: 56.25%; border-radius: 2.4rem;} /* -- main service banner */ .service_banner a {padding: 4.8rem 6rem; font-size: 1.8rem;} .service_banner a .title {font-size: 2.4rem;} /* -- main event area */ .main_event_area {padding: 10rem 0;} .main_event_area .main_title_area .btn_link_ico {font-size: 1.5rem; color: var(--n-primary);} .main_event_area .main_title_area .btn_link_ico::after {width: 1.2rem; height: 1.2rem; filter: var(--n-filter-primary);} .main_event_area .swiper_controller {position: relative; display: flex; gap: 1.6rem; padding-bottom: 3.2rem;} /* .main_event_area .content {width: 75%;} */ .main_event_area .content {display: flex; gap: 2.4rem;} .main_event_area .thumb_card_img.event {padding-top: 36.98%; border-radius: 0;} /* -- main review area */ .main_review_area {padding: 10rem 0;} .main_review_area .sec_title {max-width: unset;} .review_card {padding: 5.6rem 10rem; border-radius: 6.4rem; border-bottom-left-radius: 1rem; box-shadow: 0 1px 16px 0 rgba(15, 23, 42, .04);} .review_card_info .grade {margin-bottom: 4rem;} .review_card_info .grade_icon {width: 2.4rem; height: 2.4rem;} .review_card_info .title {font-size: 2rem;} .review_card_info .info {font-size: 1.5rem;} .review_card_content {margin-top: 4rem; min-height: 42px;} .review_content_text {-webkit-line-clamp: 2; font-size: 1.8rem; line-height: 133.3333%;} /* -- main cs area */ .main_cs_area {padding: 8rem 0; margin-bottom: -8rem;} .notice_box .title {font-size: 2.8rem} .notice_content {margin-top: 2.4rem;} .notice_content li {padding: 2.4rem 0;} .notice_content li a {font-size: 2rem;} .notice_content li .date {font-size: 1.5rem;} .call_cs_box {padding: 3.2rem 2rem;} .call_cs_box .cs_num {flex-direction: row; justify-content: center; align-items: center; font-size: 2.4rem;} .call_cs_box .cs_num span {display: inline-block; font-size: 2.8rem;} /* -- main swiper area */ .main_swiper_area .swiper-container {padding-bottom: 4.8rem;} .main_swiper_area .swiper-slide {position: relative; margin:0; text-align: center; font-size: 20px;} .main_swiper_area .swiper-button-next, .main_swiper_area .swiper-button-prev {width: auto; height: 2.4rem;} .main_swiper_area .swiper-button-next:after, .main_swiper_area .swiper-button-prev:after {font-size: 2.4rem;} .main_swiper_area .swiper-button-prev, .main_swiper_area .swiper-rtl .swiper-button-next {left: 0;} .main_swiper_area .swiper-button-next, .main_swiper_area .swiper-rtl .swiper-button-prev {right: 0;} .main_product_list .main_swiper_area {padding-left: 0;} .main_product_list .main_swiper_area .swiper-container {width: calc(100% - 10rem); margin: 0 5rem; padding-right: 0; padding-bottom: 0;} .main_product_list .main_swiper_area .swiper-slide {text-align: left;} .main_product_list .main_swiper_area .swiper-button-prev, .main_product_list .main_swiper_area .swiper-button-next {display: flex;} .main_product_list .main_swiper_area .swiper-button-prev, .main_product_list .main_swiper_area .swiper-rtl .swiper-button-next {left: calc(5rem/2);} .main_product_list .main_swiper_area .swiper-button-next, .main_product_list .main_swiper_area .swiper-rtl .swiper-button-prev {right: calc(5rem/2);} #rate-swiper {padding: 2rem 0;} #rate-swiper .swiper-slide {transform: scale(.96); transition: all .5s;} #rate-swiper .swiper-slide-active {transform: scale(1.1);} .main_event_area .main_swiper_area {border-radius: 2rem; overflow: hidden;} .main_event_area .main_swiper_area .swiper {padding-bottom: 0;} .main_event_area .main_swiper_area .swiper-pagination {display: none;} .main_review_area .main_swiper_area .swiper-container {padding-bottom: 0;} .main_review_area .main_swiper_area .swiper-slide {width: 55%;} .main_review_area .main_swiper_area .swiper-pagination {display: none;} .main_review_area .main_swiper_area {padding: 0;} .main_review_area .main_swiper_area .swiper-button-prev, .main_review_area .main_swiper_area .swiper-button-next {display: flex; width: 5.6rem; height: 5.6rem; border-radius: 999px; background-color: rgba(15, 23, 42, .25); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);} .main_review_area .main_swiper_area .swiper-button-prev {left: calc(100vw/4.9);} .main_review_area .main_swiper_area .swiper-button-next {right: calc(100vw/4.9);} .main_review_area .main_swiper_area .swiper-button-prev::after, .main_review_area .main_swiper_area .swiper-button-next::after {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: inline-block; width: 3.2rem; height: 3.2rem; filter: var(--n-filter-white); font-size: 0; line-height: normal;} .main_review_area .main_swiper_area .swiper-button-prev::after {background: url(../svg/arrow-back-light.svg) center/100% no-repeat;} .main_review_area .main_swiper_area .swiper-button-next::after {background: url(../svg/arrow-forward-light.svg) center/100% no-repeat;} /*** 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;} .doc_seal p {font-size: 11pt;} .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.4rem;} .board_list li {padding: 2rem 2.4rem;} .board_list li .title, .board_list li .title a {font-size: 1.8rem;} .board_list li .title.ico {padding-right: 2rem;} .board_list li .title.ico::after {width: 1.6rem; height: 1.6rem;} .board_list li .detail_list li {font-size: 1.5rem;} .board_list li .detail_list li + li {padding-left: 1.2rem; margin-left: 1.2rem;} .board_list li.tb {flex-direction: row; align-items: center;} /* -- card list */ .card_list_wrap {padding-top: 2.4rem;} .card_list_item {font-size: 1.6rem;} .card_link {padding: 3.2rem; border-radius: 2.4rem; font-size: 1.6rem;} .card_link .title {font-size: 1.8rem;} .card_list.rate_list .service_desc {} .card_list.rate_list .service_desc .title {font-size: 1.8rem;} /* -- price list */ .price_list {font-size: 1.6rem;} .price_list li.depth {font-size: 1.4rem;} /* .price_list li.total {margin-top: 1.6rem; border-top: 1px solid var(--n-gray-300);} */ /* -- thumb card */ .thumb_list_item {width: 33.33333333%;} .thumb_card_link {margin-bottom: 2.4rem; border-radius: 2.4rem;} .thumb_card_img {height: 200px; margin-bottom: 1rem; border-radius: 2.4rem;} .thumb_card_img.event {} .thumb_card_desc {padding: 1.6rem;} .thumb_card_desc .title {font-size: 1.7rem;} /* -- tab */ .tab_box {margin-bottom: 3.2rem} .tab_box_link {padding: 1.6rem 0; font-size: 1.6rem;} .tab_box_list_t2 .tab_box_link {padding: 1.6rem 0;} .tab_box_oval {margin-bottom: 4rem;} .tab_box_oval .tab_list {gap: 1.6rem;} .tab_box_oval .tab_link {height: 4.5rem; line-height: 4.5rem; padding: 0 1.6rem; font-size: 1.6rem;} .sub_tab_list {gap: 1rem;} .sub_tab_list .sub_tab_link {padding: .8rem 1.6rem; font-size: 1.6rem;} .tab_line_wrap {margin-bottom: 3.2rem;} .tab_line_link {padding: 1.2rem .8rem; font-size: 1.7rem;} .tab_line_list_t2 {gap: 1rem 2.4rem; padding-bottom: 3.2rem;} .tab_line_list_t2 .tab_line_link {font-size: 1.8rem;} .tab_login {margin-bottom: 3.2rem;} .tab_login_link {padding: 1.2rem 0; font-size: 1.7rem;} /* -- search */ .search_wrap {padding: 2rem 0;} .search_box {max-width: 720px; margin: 0 auto;} .search_box input {height: 5.6rem; font-size: 1.7rem; 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: 3.6rem; max-width: calc(1024px + 40px); 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: 33.33333%; height: fit-content; padding: 2.4rem; border: 1px solid var(--n-cgray-200); border-radius: 2rem; background-color: #fff; box-shadow: 0 1px 10px 0 rgba(15, 23, 42, .04);} /* -- 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 {padding-top: 2.4rem;} .rate_list_wrap > .inner {max-width: calc(1024px + 40px); margin: 0 auto;} .product_select + .rate_list_wrap {padding-top: 1.6rem;} .card_list.rate_list .card_list_item {width: 50%; padding: 0 12px; margin-bottom: 2.4rem;} .card_list.rate_list .card_rate_link {padding: 3.2rem; border: 1px solid var(--n-gray-200); border-radius: 2rem;} .card_list.rate_list .title {font-size: 1.6rem;} .card_list.rate_list .content_group {gap: 2.8rem; margin-top: 2.8rem;} .card_list.rate_list .detail {gap: 1.2rem; font-size: 1.4rem;} .card_list.rate_list .desc li {font-size: 1.4rem;} .card_list.rate_list .price {font-size: 2.4rem;} /* ## rate detail - new ## */ .rate_info_wrap {} .rate_info_wrap > .inner {flex-direction: row; gap: 3.6rem; max-width: calc(1024px + 40px);} .rate_info {position: sticky; position: -webkit-sticky; top: calc(137px + 24px); flex: 1; padding: 3.2rem; border-radius: 2rem; background-color: rgba(217, 219, 255, .3);} .body_wrap_agent .rate_info {top: 24px;} .rate_info > .inner {display: flex; flex-direction: column; height: 100%;} .rate_info .detail {padding: 2.4rem; font-size: 1.8rem; background-color: #fff;} .rate_info .detail .desc li {} .rate_info .detail .desc li .ref {} .rate_info .detail .desc .icon {margin-top: .2rem;} .rate_info .price {margin-top: 3.2rem;} .rate_info .price p {font-size: 2.6rem;} .rate_info .price .ref, .rate_info .price .vat {font-size: 1.5rem;} .rate_caption {padding: 4rem; margin-top: 2rem; border-radius: 2.4rem;} .rate_caption_list {display: flex; font-size: 1.4rem;} .rate_caption_list li {margin-bottom: 0;} .rate_caption_list li:not(:last-child) {margin-bottom: 0; padding-right: 4rem;} .rate_select_area {max-width: 400px; min-width: 400px; padding-top: 0; margin-top: 0; border-top: 0;} .rate_select_box {padding: 2.4rem 3.2rem; border: 1px solid var(--n-cgray-200); border-radius: 2rem; background-color: #fff; box-shadow: 0 1px 10px 0 rgba(15, 23, 42, .04);} .rate_select_box .form_group {margin-bottom: 2rem;} .rate_select_box .n_form_label, .rate_select_box .select_btn, .rate_select_box .select_btn_t2 {font-size: 1.5rem;} .rate_select_box .guide_btn button {height: 3rem;} .rate_detail {padding-top: 8rem; margin-top: 8rem; border-top-width: 18px;} .rate_detail.type2 {padding: 2.4rem 1.6rem;} .rate_detail_depth + .rate_detail_depth {padding-top: 4rem; margin-top: 4rem;} .rate_detail_depth .title {margin-bottom: 1.6rem; font-size: 2rem;} .rate_detail_depth .desc, .rate_detail_depth pre, .rate_detail_depth table {font-size: 1.5rem;} .rate_detail_depth .desc_list {padding-left: 3rem; font-size: 1.5rem;} .rate_detail_depth .desc_list li {margin-bottom: 1rem;} .rate_detail_depth .desc_list_depth {padding: 1rem 0 0 2rem; font-size: 1.3rem;} /* custom */ /* .rate_detail_depth .desc p {font-size: 2rem;} .rate_detail_depth .desc ul li + li {margin-top: .8rem;} */ /* ## rate detail - new ## */ /* -- review */ .review_list_item {padding: 2.4rem 0; font-size: 1.5rem;} .review_list_header {margin-bottom: 2rem;} .review_list_header .review_info {font-size: 1.3rem;} .review_list_header .grade_icon {width: 2.4rem; height: 2.4rem;} .review_list_content {gap: 1.6rem;} .review_list_content > *:first-child {flex: 1 1 auto;} .review_list_content .title {margin-bottom: .8rem; font-size: 1.7rem;} .review_list_content .desc {font-size: 1.5rem;} .review_list_content .img_wrap {width: 24rem; min-width: 24rem; height: 24rem;} .grade_btn_wrap .grade_btn {width: 3.2rem; height: 3.2rem;} /* -- qna */ .qna_tab_wrap {padding-top: 5.6rem;} .qna_tab {display: flex;} .qna_tab_link {font-size: 1.6rem;} .qna_acc_wrap {margin-top: 2.4rem;} .qna_acc_wrap .acc_header {font-size: 1.7rem;} .qna_acc_wrap .acc_header_link {padding: 2.4rem 0; padding-right: 4.8rem;} .qna_acc_wrap .acc_header .acc_header_link::after {transform: translateY(-50%); right: 1.6rem; width: 1.6rem; height: 1.6rem;} .qna_acc_wrap .acc_header.active .acc_header_link::after {right: 1.6rem; width: 1.6rem; height: 1.6rem;} .qna_acc_wrap .acc_content {padding-bottom: 2.4rem;} .qna_acc_wrap .acc_content_inner {font-size: 1.6rem;} .qna_acc_wrap .acc_content pre {font-size: 1.6rem;} .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 {padding-top: 5.6rem;} .notice_list_item {padding: 2.4rem 1.6rem; font-size: 1.5rem;} .notice_list_item .title {flex: 1; font-size: 1.7rem;} .notice_list_item.fix_item .title {} .notice_list_item.fix_item .title::before {width: 1.6rem; height: 1.6rem;} .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 .title_status {font-size: 1.5rem;} .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 {padding: 2.4rem 3.2rem; font-size: 1.5rem;} /* -- form download */ .download_wrap .card_link {flex-direction: column; gap: 1rem;} /* -- pagination */ .pagination {margin-top: 3.6rem;} .page_icon {width: 2rem; height: 2rem;} .page_link {font-size: 1.5rem;} /* -- apply change */ .applychg_tab {margin-bottom: 1.6rem;} /* -- 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 .guide_area {font-size: 1.6rem;} .charge_wrap .guide_area .guide_cardlist > * {margin-bottom: 2.4rem;} .charge_wrap .input_flex button, #smsAuth .input_flex button {min-width: 13rem;} /* -- mypage */ .my_info.joinInfo .header {flex-direction: row; justify-content: space-between; align-items: center; padding: 2.4rem;} .my_info.joinInfo .header_top {font-size: 1.8rem; text-align: start;} .my_info.joinInfo .header_bottom {margin-top: 0; padding-top: 0; border-top: 0; border-left: 1px solid var(--n-cgray-200); font-size: 1.5rem;} .my_info.joinInfo .header_bottom ul li {padding: 0 2rem;} .my_info.joinInfo .order_box {padding: 2.4rem;} .my_info.joinInfo .content_box {padding: 0 1.2rem; margin-bottom: 4.8rem;} .my_info.joinInfo .content_box .title_wrap {margin-bottom: 1.5rem;} .my_info.joinInfo .content_box .title_wrap h2 {margin-bottom: 0;} .my_info.joinInfo .content_box .title_wrap.type3 {flex-direction: row;} .my_info.joinInfo .content_box .title_wrap .ref {font-size: 1.4rem;} .my_info.joinInfo .content_box .title_wrap .amount_refresh {width: auto; font-size: 1.4rem;} .my_info.joinInfo .content_box ul .title, .my_info.joinInfo .content_box ul .text {font-size: 1.5rem;} .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 {flex-direction: row; gap: 2.4rem;} .my_info.joinInfo .content_box .amount_info + .amount_info {padding-top: 3.2rem; margin-top: 3.2rem;} .my_info.joinInfo .content_box .amount_info .box_title {min-width: 25%; margin-bottom: 0;} .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 {height: 100%; padding-bottom: 0; margin-bottom: 0; padding-right: 1.2rem; margin-right: 1.2rem; border-bottom: 0; border-right: 1px solid #e6e6e6; font-size: 1.8rem;} .my_info.joinInfo .charge_area .total_info .amount {font-size: 3.2rem;} .my_info.joinInfo .charge_area .total_info .period {margin-top: 1rem; font-size: 1.4rem;} .my_info.joinInfo .charge_area .charge_info {margin-top: 0;} /*** F. Self ***/ .body_wrap.self_wrap {padding-top: calc(137px + 24px);} .self_wrap .form_wrap h2 {font-size: 2rem;} .self_form_inner {padding: 0 2rem;} .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;} #areaTerms > div {padding: 1.2rem;} .form_wrap.newJoinArea, .form_wrap.moveJoinArea {width: 100%;} #hopeNumList, #hopeNumListArea {margin: 2rem 0;} #hopeNumList .n_form_label, #hopeNumListArea .n_form_label {width: 100%;} #esimPop .form_wrap {width: 100%; max-width: none;} #esimPop .form_group {flex-direction: column; align-items: start;} #esimPop .form_group .n_form_label + * {flex: none;} #esimPop .form_group input {width: 100%;} #inisisAuth .acc_group {padding: 1rem 2rem;} #inisisAuth .step_item + .step_item::before {top: 50%; left: -.5rem; transform: translateY(-50%);} #inisisAuth .step_item .title {font-size: 1.4rem;} #inisisAuth .step_item .img_wrap img {width: 3rem; height: 3rem;} .self_copy_wrap {padding: 3rem 0 5rem 0;} .self_copy {font-size: 1.15rem;} /* -- step1 */ #inquiryInfoTab li {flex: 1 1 auto; width: auto;} #inquiryInfoTabContent {padding: 3.2rem;} #inquiryInfoTabContent .tab_board .title_area {padding-bottom: 2.4rem; margin-bottom: 2.4rem;} #inquiryInfoTabContent .tab_board .title_area > .title {font-size: 1.8rem;} #inquiryInfoTabContent .tab_board .content {padding-bottom: 3.2rem;} #inquiryInfoTabContent .swiper-button-prev, #inquiryInfoTabContent .swiper-button-next {width: 2.4rem; height: 2.4rem;} #persAuthFail .step {flex-direction: column;} #persAuthFail .step_item + .step_item::before {top: -1.6rem; 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;} .step1-authInfo .box_outline_text span {font-size: 1.3rem;} /* -- price select */ .price_filter {top: 13.7rem; padding: 2rem 0; margin-bottom: 1.5rem;} .price_filter::after {top: 82px; height: 15px;} .price_filter button, .price_filter_popup button {font-size: 1.6rem;} .self_wrap .price_sticky_wrap {top: 13.7rem;} .body_wrap_agent.self_wrap .price_sticky_wrap {top: 0;} .card_price_list label {padding: 3.2rem;} .card_price_list .head {font-size: 1.6rem;} .card_price_list .content_group {flex-direction: row; gap: 4rem; margin-top: 2.8rem;} .card_price_list .detail {font-size: 1.4rem;} .card_price_list .price {flex-shrink: 0; font-size: 2.4rem;} /* -- order list */ .order_list_wrap h1 {margin-bottom: 5.6rem;} .order_list_wrap .order_list, .order_box {padding: 2.4rem;} .order_list_wrap .order_list li + li {padding-top: 2rem;} .order_list li + li {padding-top: 2.4rem;} .order_list .title {font-size: 1.6rem;} .order_list .text {font-size: 1.6rem;} /* -- applyComplArea */ .applyComplArea {} .applyComplArea .img_wrap {margin-bottom: 2.4rem;} .applyComplArea .img_wrap img {width: 8rem;} .applyComplArea h2 {margin-bottom: 3.2rem; font-size: 2.2rem;} .applyComplArea .box_guide {padding: 2.4rem; border-radius: 2.4rem;} .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: 3.2rem;} .input_group input[type="email"] {padding-right: 8rem;} .form_count {font-size: 1.6rem;} .input_flex button {padding: 0 2rem;} .form_notice {margin-top: 1.2rem; font-size: 1.4rem;} .n_form_label {font-size: 1.5rem;} .n_check_label {font-size: 1.5rem;} .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 .img_wrap {width: 6rem; height: 6rem;} .select_list li a span {margin-top: .8rem;} /* -- table */ .table_board {display: table; font-size: 1.6rem;} .table_board tr {display: table-row-group;} .table_board th {width: 240px; min-width: 240px; padding: 2rem; border-radius: 0;} .table_board td {padding: 2rem;} .table_board .form_group {margin-bottom: 1.6rem;} /* -- box */ .box {font-size: 1.5rem;} .box_title {font-size: 1.8rem; margin-bottom: 2rem;} .box_outline {padding: 2.4rem;} .box_outline_title {font-size: 1.6rem;} .box_outline_text {font-size: 1.4rem;} .box_outline_icon img {width: 6rem;} .box_form {padding: 4rem;} .box_form .inner {justify-content: center; gap: 2.4rem; width: 100%;} .box_form .inner .img_wrap {width: 50%; max-width: unset;} .box_form img {width: 100%;} .box_form .title {padding-bottom: 1.6rem; font-size: 1.4rem; font-weight: 700; color: var(--n-primary);} .box_guide + .form_wrap {margin-top: 3.2rem;} .box_form .btn_group {background-color: transparent;} .self_wrap .box_form .form_group + .form_group {margin-top: 0;} .box_cardlist {} .box_cardlist .inner {max-width: calc(1024px + 40px); margin: 0 auto;} .box_list {padding: 1.4rem 2.4rem;} /* .box_list .form-check {padding: 1rem 1.5rem;} */ .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; border-radius: .6rem;} .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 {border-radius: .6rem;} .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;} .btn_link_ico {font-size: 1.6rem;} .select_btn, .select_btn_t2 {font-size: 1.6rem; border-radius: .8rem;} .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: 3.2rem;} .board .board_head .title {font-size: 2rem;} .board .board_head .date {font-size: 1.4rem;} .board .board_content {padding: 3.2rem 0;} .board_page {padding: 0 3.2rem; font-size: 1.5rem;} .board_page .page_item {padding: 2.4rem 0;} .board_page .page_link {padding-left: 1.2rem; font-size: 1.5rem;} .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-header, .modal-body, .modal-footer {padding: 2rem 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;} .step_item {padding: 2.4rem;} .step_item + .step_item::before {top: 50%; left: -.8rem; transform: translateY(-50%); width: 1.8rem; height: 1.8rem; background: url(../svg/chevron-right.svg) center/100% no-repeat;} .step_item .img_wrap {width: 5rem; height: 5rem;} .step_item .img_wrap img {width: 5rem; height: 5rem;} .step_item .title {font-size: 1.6rem;} .step.type2 {flex-direction: column;} .step.type2 .step_item {flex-direction: row; padding: 1.6rem 0;} /* -- advice */ .advice {gap: 3.2rem;} .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;} /* -- 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~) -------------------------------------------*/ /*** B. Layout ***/ /* -- container*/ /* .container { max-width: 1220px; } */ /*** D. Main ***/ /* .sub_banner a {padding: 5.6rem 4rem;} .sub_banner .content {font-size: 1.8rem;} .sub_banner .content .title {font-size: 2.4rem; margin-bottom: 1.6rem;} .sub_banner img {width: 10rem; height: 10rem;} */ /* .rate_container {max-width: 1180px;} */ /* -- main banner */ /* .main_banner .swiper-slide {height: 580px;} */ /* -- main swiper area */ /* .main_product_list .main_swiper_area {padding-left: 0;} .main_product_list .main_swiper_area .swiper-container {width: calc(100% - 20rem); margin: 0 10rem;} .main_product_list .main_swiper_area .swiper-button-prev, .main_product_list .main_swiper_area .swiper-rtl .swiper-button-next {left: calc(10rem/2);} .main_product_list .main_swiper_area .swiper-button-next, .main_product_list .main_swiper_area .swiper-rtl .swiper-button-prev {right: calc(10rem/2);} */ /*** E. Sub ***/ /** -- event */ /* .rate_list_wrap > .inner, .rate_info_wrap > .inner {max-width: 1220px;} */ /** - order layout */ /* .order_container {max-width: 1220px;} */ /*** G. Components ***/ /* .box_cardlist .inner {max-width: 1220px;} */ } @media screen and (min-width: 1440px) { /*------------------------------------------- -- xLarge desktop (1440px~) -------------------------------------------*/ /*** D. Main ***/ /* -- main banner */ /* .main_banner .swiper-slide {height: 618px;} */ } /*********************************************************************************************************************** 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", -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif; } hr { color: #ccc; background-color: #ccc; } h1, h2, h3, h4, h5, h6, code, pre { color: #000; text-transform: none; /* because sometimes I set all-caps */ } h1 { font-size: 11pt; margin-top: 1em; } h2 { font-size: 10pt; } h3 { font-size: 9pt; } h4, h5, h6 { font-size: 8pt; } code, pre { font-size: 8pt; background-color: transparent; /* just in case the user configured browser to print backgrounds */ } a { text-decoration: underline; color: #000; } /* -- print document */ header, .fixed-bottom, .noPrintArea {display: none;} .onlyPrintArea {display: block;} .body_wrap_popup, .body_wrap_popup_t2 {padding: 0;} .container {max-width: unset; padding: 0;} .doc_wrap { width: 210mm; min-height: 297mm; padding: 20mm; /* margin: 10mm auto; */ } .doc_head {padding-top: 0;} .doc_head_logo {height: 25px; 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: 9.25pt; 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 {padding-top: 40px;} #confirmDoc .doc_content:last-child {padding-bottom: 40px;} #confirmDoc .doc_content .table_board.type2 th, #confirmDoc .doc_content .table_board.type2 td {padding: 20px;} #confirmDoc .doc_notice {padding-top: 24px; font-size: 9.25pt;} #confirmDoc .doc_notice .box, #confirmDoc .doc_notice .box .title {font-size: 9.25pt;} #confirmDoc .doc_seal {padding-top: 80px;} #confirmDoc .doc_seal .seal {margin-top: 40px;} }