/*---------------------------------------------------------------------------------------------------------------------- [ CHINGU MOBILE ] A. Default B. Layout C. Login D. Main E. Sub F. Self G. Components H. etc I. Media Query ----------------------------------------------------------------------------------------------------------------------*/ :root { /* color */ --n-primary: #DC0071; /* CHINGU main color */ --n-primary-hover: #b0045a; --n-primary-dark: #5b002b; --n-primary-light: #FBDFED; --n-lightGreen: rgba(36, 150, 181, 0.04); --n-lightPink: #FFF6FB; --n-lightPurple: #f3f4fb; --n-lightBlue: #f9fafc; /* color :: gray */ --n-gray-50: #f8f8f8; --n-gray-100: #f5f5f5; --n-gray-200: #E5E5E5; --n-gray-300: #D4D4D4; --n-gray-400: #A3A3A3; --n-gray-500: #737373; --n-gray-600: #525252; --n-gray-700: #404040; --n-gray-800: #262626; --n-gray-900: #000; /* color :: filter */ --n-filter-primary: invert(11%) sepia(99%) saturate(5307%) hue-rotate(321deg) brightness(94%) contrast(104%); --n-filter-gray3: invert(97%) sepia(0%) saturate(9%) hue-rotate(150deg) brightness(95%) contrast(79%); --n-filter-gray4: invert(74%) sepia(0%) saturate(31%) hue-rotate(168deg) brightness(89%) contrast(91%); --n-filter-gray5: invert(48%) sepia(0%) saturate(47%) hue-rotate(192deg) brightness(93%) contrast(89%); --n-filter-gray7: invert(23%) sepia(6%) saturate(0%) hue-rotate(265deg) brightness(91%) contrast(86%); --n-filter-gray9: invert(0%) sepia(1%) saturate(4%) hue-rotate(336deg) brightness(98%) contrast(104%); --n-filter-red: brightness(0) saturate(100%) invert(22%) sepia(36%) saturate(6218%) hue-rotate(6deg) brightness(96%) contrast(104%); --n-primary-shadow: rgba(220, 0, 113, 0.3); } /*********************************************************************************************************************** A. Default ***********************************************************************************************************************/ html, body {height: 100%; } html {font-size: 62.5%;} body { position: relative; min-height: 100%; background-color: #F1F5F9; font-family: "Wanted Sans", -apple-system, BlinkMacSystemFont, system-ui, "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; } 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);} input[type="text"], input[type="password"], input[type="number"],input[type="date"], input[type="email"], textarea, select.form-select {width: 100%; height: 4.8rem; padding: 0 1.6rem; font-size: 1.4rem; color: var(--n-gray-800); border: 1px solid var(--n-gray-200); border-radius: .5rem;} input:focus, textarea:focus, select.form-select:focus, .form-control:focus {border-color: var(--n-gray-900); box-shadow: none; outline: 0;} input:-webkit-autofill:focus, input:-webkit-autofill:active {box-shadow: none;} input[type="text"]::placeholder, input[type="password"]::placeholder,input[type="number"]::placeholder, input[type="date"]::placeholder, input[type="email"]::placeholder, textarea::placeholder {color: var(--n-gray-400)} input[type="checkbox"] {position: relative; top: 0.05rem; width: 1.5rem; height: 1.5rem; border: 1px solid var(--n-gray-300); border-radius: .5rem;} input[type="checkbox"]:checked {border-color: var(--n-primary); background-color: var(--n-primary);} input[type="radio"] {position: relative; top: 0.2rem; width: 1.5rem; height: 1.5rem; border: 1px solid var(--n-gray-300); border-radius: .5rem;} input[type="radio"]:checked {border-color: var(--n-primary); background-color: var(--n-primary);} input:read-only, input:disabled, select:disabled, .form-control:disabled, .form-select:disabled {background-color: var(--n-gray-200); pointer-events: none;} input[type="radio"]:disabled + label, input[type="checkbox"]:disabled + label {color: var(--n-gray-400);} input[type="checkbox"]:read-only, input[type="radio"]:read-only {background-color: #fff; pointer-events: inherit;} input:checked:read-only {background-color: var(--n-primary) !important; pointer-events: inherit;} input:-webkit-autofill, input:-webkit-autofill:hover {transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out; -webkit-transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out; background-color: #fff !important; box-shadow: inset 0 0 0 1000px white; -webkit-box-shadow: 0 0 0 1000px white inset;} input:-webkit-autofill:focus, input:-webkit-autofill:active {transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out; -webkit-transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out; background-color: #fff !important; box-shadow: inset 0 0 0 1000px white, 0 0 0 0.25rem rgba(13, 110, 253, 0.25); -webkit-box-shadow: 0 0 0 1000px white inset, 0 0 0 0.25rem rgba(13, 110, 253, 0.25);} input:-internal-autofill-selected {background-color: #fff} input:-webkit-autofill:read-only {background-color: #EAEAEA !important; box-shadow: inset 0 0 0 1000px #eaeaea; -webkit-box-shadow: 0 0 0 1000px #eaeaea inset; pointer-events: none;} ul {list-style: none; padding: 0; margin: 0;} h1, h2, h3, h4, h5, p, span {margin: 0;} hr {border-color: var(--n-gray-500);} pre {font-family: "Wanted Sans"; white-space: pre-wrap;} /*********************************************************************************************************************** B. Layout ***********************************************************************************************************************/ /* template */ .m_template {position: relative; display: flex; flex-direction: column; max-width: 475px; min-height: 100%; margin: 0 auto; background-color: #fff;} .m_template::before, .m_template::after {content: ''; position: fixed; top: 0; bottom: 0; width: 1px; background-color: #D4DDE9; z-index: 1040;} .m_template::after {right: 50%; transform: translateX(238px);} .m_template .sticky-top, .m_template .sticky-bottom, .m_template .fixed-top, .m_template .fixed-bottom {z-index: 10;} /* -- 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 -------------------------------------------*/ .m_template header.sticky-top {z-index: 1020;} .header_wrap {background-color: #fff;} .header_top {padding-top: 1rem; background-color: #fff; display: none;} .header .header_content, .header_popup .header_content {height: 6rem;} .header .logo, .header .icons_item, .header_popup .logo, .header_popup .icons_item {display: inline-block;} .header .logo img {max-height: 28px;} .header_content .icons_item {padding: 0; margin: 0; margin-left: 2rem; background-color: transparent;} .header_content .icons_item_btn {height: 3rem; padding: 0 1.5rem; margin-left: 1rem; font-size: 1.2rem; vertical-align: middle;} .header_content .icons_item img {width: 2.4rem; height: auto;} .header_popup .head {font-size: 2rem; font-weight: 700; color: var(--n-gray-900);} .header_content .moblie_wrap {display: flex; height: 100%; align-items: center; justify-content: space-between;} .header_content .pc_wrap {display: none; align-items: center; justify-content: space-between;} /*------------------------------------------- -- sub header(셀프개통 단계) -------------------------------------------*/ .sub_header {top: 6rem; display: flex; flex-direction: column-reverse; align-items: center; padding-top: 1.6rem; padding-bottom: 2rem; margin-bottom: 3.2rem; background-color: #fff;} .body_wrap_agent .sub_header {top: 0;} /* .sub_header::after {position: absolute; bottom: -12px; left: 0; display: block; width: 100%; height: 14px; background: linear-gradient(to bottom, #fff 0%, transparent 100%); content: "";} */ .sub_header_step {display: flex; justify-content: center; width: 100%; margin-top: 1.6rem;} .sub_header_step li {position: relative; display: flex; flex: 1; justify-content: center; align-items: center; gap: .8rem; padding: 0 .8rem .8rem .8rem; font-size: 1.4rem; font-weight: 600; color: var(--n-primary);} .sub_header_step li::before {content: ''; position: absolute; left: 0; bottom: 0; display: block; width: 100%; height: 2.5px; background-color: var(--n-primary);} .sub_header_step li img {width: 1.6rem; height: 1.6rem; filter: var(--n-filter-primary);} .sub_header_step li + li {padding-left: 1rem;} .sub_header_step li.on {flex: 1 0 auto;} .sub_header_step li.on ~ li::before {background-color: var(--n-gray-200);} .sub_header_step li.on ~ li img {filter: var(--n-filter-gray3);} /*------------------------------------------- -- fullmenu (모바일 전체메뉴) -------------------------------------------*/ .full_menu_wrap {position: fixed; top: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 475px; height: 100%; background-color: #fff; overflow: auto; z-index: 1040; display: none;} .full_menu_header {background-color: #fff; z-index: unset;} .full_menu_header .icons {display: flex; justify-content: end; align-items: center; justify-content: end; height: 100%;} .full_menu_body {height: 100%;} /* fullmenu - top */ .full_menu_sign {padding: 2rem 0 3.2rem 0;} .full_menu_sign .login {margin-bottom: 1rem;} .full_menu_sign .btn_login {position: relative; font-size: 2.2rem; font-weight: 700; color: var(--n-gray-900);} .full_menu_sign .btn_login::after {content: ""; background: url(../svg/caret-right-bold.svg) no-repeat center center/100%; position: absolute; top: 50%; transform: translateY(-50%); display: inline-block; width: 1.6rem; height: 1.6rem; margin-left: .5rem;} .full_menu_sign .logout {display: flex; align-items: center; margin-bottom: 1rem;} .full_menu_sign .logout span {font-size: 2.2rem; font-weight: 700;} .full_menu_sign .logout a {margin-left: .8rem;} /* fullmenu - submenu(tab) */ .full_menu_body .submenu_list {flex-wrap: wrap; overflow: hidden;} .full_menu_body .sub_tab_list {border-bottom: 0;} .full_menu_body .sub_tab_list li {margin-right: 1.6rem;} /* .full_menu_body .sub_tab_list li + li {margin-right: 1.6rem;} */ .full_menu_body .sub_tab_link {display: inline-block; width: 100%; padding: 0; border-radius: 0; font-size: 1.2rem; background-color: transparent; color: var(--n-gray-500);} .full_menu_body .sub_tab_link:hover {color: var(--n-gray-500);} /* fullmenu - body */ .full_menu_content {padding: 2.4rem 0; background-color: var(--n-gray-100);} .full_menu_body .menu_list li {padding: 2rem; border-radius: .8rem; background-color: #fff;} .full_menu_body .menu_list > li + li {margin-top: 2rem;} .full_menu_body .menu_list li a {font-size: 1.6rem; font-weight: 500; color: var(--n-gray-900);} .full_menu_body .menu_list li .sub_list {margin-top: 1rem; list-style: none;} .full_menu_body .menu_list li .sub_list li {padding: .8rem 0;} .full_menu_body .menu_list li .sub_list li a {font-size: 1.4rem; font-weight: 400; color: var(--n-gray-700);} .full_menu_body .menu_list li a:hover, .full_menu_content .sub_list li a:hover {color: var(--n-primary);} .full_menu_body .menu_list li a:not([href]):hover, .full_menu_content .sub_list li a:not([href]):hover {color: Inherit} /*------------------------------------------- -- body -------------------------------------------*/ .body_wrap, .body_wrap_popup, .body_wrap_popup_t2 {height: auto; padding-top: 4rem;} .body_wrap_popup, .body_wrap_popup_t2 {min-height: 100%; background-color: #fff; padding-top: 8rem;} .body_wrap_popup_t2 {padding-bottom: 80px;} .body_wrap_agent {min-height: 100%; padding-top: 40px; background-color: #fff;} .body_wrap_agent > .container {max-width: 400px;} /*------------------------------------------- -- nav -------------------------------------------*/ .gnb_wrap {line-height: 7.5rem; display: none;} .gnb li {position: relative; font-size: 1.8rem; font-weight: 600; text-align: right;} .gnb li + li {margin-left: 4.5rem;} .gnb li a {display: inline; color: var(--n-gray-800);} .gnb li a:hover, .gnb li.on a {color: var(--n-primary);} .gnb li:first-child a:hover {border-bottom: 0;} /* snb */ .snb {position: absolute; top: 80%; left: 50%; transform: translateX(-50%); width: 170px; padding: 2rem 1.6rem; background-color: #fff; border-radius: 2rem; box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; display: none;} .snb li{margin-left: 0; text-align: center; line-height: 1.5;} .snb li + li {padding-top: 1.5rem; margin-left: 0;} .snb li a{font-size: 1.6rem; font-weight: 400; color: var(--n-gray-900);} .snb li a:hover{color: var(--n-primary);} .gnb li a:not([href]):hover, .snb li a:not([href]):hover {color: Inherit} .gnb > li:hover > .snb {display: block;} /* submenu (top util) */ .submenu {height: 2.5rem; align-items: center; justify-content: right; text-align: right;} .submenu a {font-size: 1.5rem; font-weight: 300; color: var(--n-gray-800); text-decoration: none; line-height: 2.5rem;} .submenu a + a {margin-left: 2.4rem;} /* util (gnb right) */ .util_wrap .util_list {display: flex;} .util_wrap .util_list li {font-size: 1.6rem; font-weight: 400; text-align: right;} .util_wrap .util_list li + li {margin-left: 2.4rem;} .util_wrap .util_list li a {display: inline; color: var(--n-gray-900);} /*------------------------------------------- -- footer -------------------------------------------*/ footer {margin-top: auto;} footer > .container {margin-top: 4rem; background-color: var(--n-gray-700);} .footer_top {position: relative; padding-top: 3.6rem;} footer .policy_list {gap: .5rem 0; font-size: 1.3rem;} footer .policy_list li:not(:last-child) {position: relative; padding-right: .5rem; margin-right: .5rem;} footer .policy_list li:not(:last-child)::after {content: ''; position: absolute; top: 50%; right: 0; transform: translateY(-50%); display: block; width: 1px; height: 1rem; background-color: var(--n-gray-500);} footer .policy_list li a {color: var(--n-gray-300);} footer .policy_list li a.indv {color: var(--n-gray-50); font-weight: 600;} .footer_bottom {padding-top: 1.6rem; padding-bottom: 4rem;} footer .company {font-size: 1.3rem; font-weight: 700; color: #fff;} footer .company_info {display: flex; flex-wrap: wrap; gap: .5rem 1rem; font-size: 1.2rem; color: var(--n-gray-400);} footer .company_info li {width: 100%;} footer .company_info li:first-child, footer .company_info li:nth-child(2) {width: auto;} footer .copyright {margin-top: 2.4rem; font-size: 1.2rem; color: var(--n-gray-400);} /*------------------------------------------- -- preview bottom -------------------------------------------*/ .preview_wrap {width: 100%; max-width: 475px; margin: 0 auto; border-radius: 2rem 2rem 0 0; background: var(--n-gray-800);} .preview_header {padding: 2.4rem 0;} .preview_header .head {font-size: 1.6rem; font-weight: 700; color: #fff;} .preview_header .n_btn_icon {width: 2rem; height: 2rem; filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(266deg) brightness(108%) contrast(107%);} .preview_header .n_btn_icon.open {background: url(../svg/chevron-up.svg) no-repeat center center; background-size: contain;} .preview_header .n_btn_icon.close {background: url(../svg/chevron-down.svg) no-repeat center center; background-size: contain;} .preview_body {padding-bottom: 4rem;} .preview_body .box_green {padding: 2.4rem; background-color: #F6FBFC;} .preview_body .box_light {padding: 2.4rem; background-color: var(--n-lightBlue);} .preview_body .price_info {padding: 2rem; border-radius: 1rem; background-color: #fff;} .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.8rem; text-align: right;} .preview_body .price_info .ref {font-size: 1.3rem; font-weight: 400; color: var(--n-gray-400); text-align: right;} .preview_body .order_list {padding: 1.6rem; margin-top: 1.6rem; border-radius: 1rem; background-color: var(--n-gray-500);} .preview_body .order_list li {padding: .8rem 0; border-bottom: 0;} .preview_body .order_list .title {color: var(--n-gray-300);} .preview_body .order_list .text {font-weight: 500; color: #fff;} /* preview bottom - product */ .product_bottom_preview {padding-top: 2rem; margin-bottom: -4rem;} .product_bottom_preview .preview_wrap {max-width: 1080px; width: 100%; background: #fff; border-radius: 2rem 2rem 0 0; box-shadow: 0px -2px 16px rgba(0,0,0,.2);} .product_bottom_preview .preview_header .content {display: flex; flex-direction: column;} .product_bottom_preview .preview_header .head {margin-bottom: 1rem; font-size: 1.4rem; font-weight: 700; color: var(--n-gray-900);} .product_bottom_preview .preview_header .head span {font-size: 1.8rem;} .product_bottom_preview .preview_header .n_btn_icon {width: 1.8rem; height: 1.8rem; transform: translateY(-50%);} .product_bottom_preview .preview_header .n_btn_icon.open {background: url(../svg/chevron-up-solid.svg) no-repeat center center; background-size: contain; filter: invert(29%) sepia(21%) saturate(0%) hue-rotate(213deg) brightness(102%) contrast(99%);} .product_bottom_preview .preview_header .n_btn_icon.close {background: url(../svg/chevron-down-solid.svg) no-repeat center center; background-size: contain; filter: invert(29%) sepia(21%) saturate(0%) hue-rotate(213deg) brightness(102%) contrast(99%);} .product_bottom_preview .preview_body {padding: 0 0 4rem 0;} .product_bottom_preview .preview_body .order_list {margin-top: 0; padding-top: 0; border-top: none; } .product_bottom_preview .preview_body .order_list + .order_list {margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid #e6e6e6;} .product_bottom_preview .preview_body .order_list li {display: flex;} .product_bottom_preview .preview_body .order_list li:first-child {font-weight: 700; color: var(--n-gray-900);} .product_bottom_preview .preview_body .order_list .title {font-weight: 400;} .product_bottom_preview .preview_body .order_list li + li {padding-top: 1rem;} /*------------------------------------------- -- board -------------------------------------------*/ .board {font-size: 1.4rem; color: var(--n-gray-800);} .board .board_content {padding: 2rem; padding-bottom: 0; line-height: 1.5; overflow-x: auto;} .board .board_content img, .board_content img {max-width: 100%; height: auto;} .modal-body .board .board_content {padding: 0;} .modal_board {} .modal_board .board_content {padding-bottom: 3rem;} .modal_board .title {font-size: 1.6rem; font-weight: 500; color: var(--n-gray-900);} .modal_board .content {margin-top: 1rem; font-size: 1.4rem; color: var(--n-gray-800); line-height: 1.65; word-break: keep-all;} /* .modal_board .content {margin-top: 1rem; font-size: 1.4rem; color: var(--n-gray-800); line-height: 1.65; word-break: keep-all;} */ /*------------------------------------------- -- popup (main layer popup) -------------------------------------------*/ .ui-dialog {max-width: 475px; border-radius: 1rem; z-index: 1040 !important ; box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;} .ui-dialog-titlebar {background-color: #fff; padding: 1rem 2rem; border-radius: 1rem 1rem 0 0;} .ui-dialog-titlebar span {color: var(--n-gray-900); font-size: 1.4rem; font-weight: 500;} .ui-dialog-titlebar button {display: none;} .hide-title-bar .ui-dialog-titlebar { display: none;} .main_pop_layer .pop_content {padding: 0; overflow: auto; background-color: #fff;} .main_pop_layer .pop_content img {width: 100%; height: auto;} .main_pop_layer .pop_footer {display: flex; align-items: center; padding: 1rem 2rem; border-radius: 0 0 1rem 1rem; background-color: #fff;} .main_pop_layer .pop_footer label {color: var(--n-gray-600);} .main_pop_layer .pop_footer .n_btn_icon {background: url(../svg/x-lg.svg) no-repeat center center; width: 16px; height: 16px; background-size: contain; filter: var(--n-filter-gray9); font-size: 0;} /*------------------------------------------- -- flex -------------------------------------------*/ .flex_row {display: flex; flex-wrap: wrap; margin: 0 -.4rem; gap: .8rem 0;} .flex_row > * {padding: 0 .4rem;} .flex_between {display: flex; justify-content: space-between; align-items: center;} /*********************************************************************************************************************** C. Login ***********************************************************************************************************************/ .login_wrap {} .login_either_wrap {max-width: 960px;} .login_wrap h1 {margin-bottom: 5.6rem;} .login_wrap form {padding-bottom: 5rem;} .login_wrap .form_wrap {padding-bottom: 0;} /*********************************************************************************************************************** D. Main ***********************************************************************************************************************/ .main_content {} .main_content + footer > .container {margin-top: 0;} .main_title_area {position: relative;} .main_title_area .btn_link_ico {position: absolute; top: 50%; right: 0; transform: translateY(-50%);} .sec_title {margin-bottom: 1.6rem; font-size: 2.2rem; font-weight: 500; color: var(--n-gray-900);} /*------------------------------------------- -- main banner(carousel) -------------------------------------------*/ .main_banner {overflow: hidden;} .main_banner img {width: 100%; height: auto; border-radius: .8rem;} .main_banner .swiper-container {position: relative; padding-bottom: 1.6rem;} .main_banner .swiper-slide {width: 96%;} .main_banner .swiper-pagination {bottom: 0; line-height: normal;} .main_banner .swiper-pagination-bullet {width: 6px; height: 6px; opacity: .25;} .main_banner .swiper-pagination-bullet-active {width: 16px; border-radius: 10rem; background-color: var(--n-primary); opacity: 1;} .carousel_tablet, .carousel_pc, .for_tablet, .for_pc {display: none;} /*------------------------------------------- -- main service area -------------------------------------------*/ .main_service_area {padding: 2.4rem 0 3.2rem 0;} .main_service_area .title {margin-bottom: 1.6rem; font-size: 1.8rem;} .main_service_area .service_group {display: flex;} .main_service_area .service_group li {flex: 1;} .service_link {display: flex; flex-direction: column; align-items: center; gap: .8rem; width: 100%; font-size: 1.3rem; color: var(--n-gray-900); letter-spacing: -0.65px;} .service_link:hover {color: var(--n-gray-900);} .service_link img {width: 4.4rem; height: auto;} /*------------------------------------------- -- main product list -------------------------------------------*/ .main_product_list {padding: 4rem 0; background-color: var(--n-primary);} .main_product_list .sec_title, .main_product_list .btn_link_ico {color: #fff;} .main_product_list .btn_link_ico::after {filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(39deg) brightness(101%) contrast(101%);} .main_product_list .btn_link_ico:hover {color: #fff;} /* rate card */ .rate_card_list {border-radius: .8rem; background-color: #fff;} .rate_card_item + .rate_card_item {border-top: 1px dashed var(--n-primary);} .rate_card {width: 100%; height: 100%; padding: 2rem 2.4rem;} .rate_card_title {width: 100%; margin-bottom: 1rem; font-size: 1.5rem; font-weight: 500; color: var(--n-gray-900);} .rate_card_title p {text-overflow: ellipsis; overflow: hidden; word-break: break-all; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;} .rate_card_info {display: flex; flex-wrap: wrap; gap: .5rem 1rem; width: 100%; margin-bottom: 1.6rem;} .rate_card_info li {position: relative; display: inline-block; font-size: 1.3rem; color: var(--n-gray-900);} .rate_info_ico::before {content: ""; display: inline-block; width: 1.4rem; height: 1.4rem; margin-right: .2rem; transform: translateY(3px); filter: var(--n-filter-primary);} .rate_info_ico.ico_data::before {background: url(../svg/cell-tower.svg)no-repeat center/100%;} .rate_info_ico.ico_voice::before {background: url(../svg/phone.svg)no-repeat center/100%;} .rate_info_ico.ico_mms::before {background: url(../svg/envelope-simple.svg)no-repeat center/100%;} .rate_card_price {width: 100%; font-size: 1.8rem; font-weight: 700; color: var(--n-primary);} .rate_card_price .ref {font-size: 1.2rem; font-weight: 400; color: var(--n-gray-400);} .rate_card_ref {margin-top: .2rem; font-size: 1.3rem; color: var(--n-primary);} /* phone card */ /* .phone_card_list {display: flex; flex-wrap: wrap; align-items: stretch; gap: 1.6rem 0;} .phone_card_item {width: 100%;} .phone_card {display: flex; width: 100%; height: 100%; padding: 2rem; border-radius: 1rem; border: 1px solid #e0e0e0;} .phone_card_img {width: 10rem; min-width: 10rem;} .phone_card_img img {width: 100%; height: 100%; object-fit: cover;} .phone_card_info {padding-left: 1rem; font-size: 1.1rem; color: var(--n-gray-800);} .phone_card_title {display: flex; align-items: center; margin-bottom: 1rem; font-size: 1.4rem; font-weight: 500; color: var(--n-gray-900);} .phone_card_title p:not(.title_label) {text-overflow: ellipsis; overflow: hidden; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;} .phone_card_title .title_label {margin-right: .8rem; font-size: 1.6rem; -webkit-line-clamp: 1;} .phone_card_title .title_label span {display: inline-block; padding: 2px 6px; border-radius: 10rem; font-size: 1.1rem; font-weight: 500; -webkit-line-clamp: 1;} .phone_card_title .title_label span + span {margin-left: .4rem} .phone_card_price {display: flex; flex-direction: column; margin-top: 1.6rem; font-size: 1.4rem; font-weight: 700; color: var(--n-primary);} .phone_card_price .ref {font-size: 1rem; font-weight: 400; color: var(--n-gray-700);} */ /*------------------------------------------- -- main event area -------------------------------------------*/ .main_event_area {padding: 4rem 0; background-color: #f0f6fe; overflow: hidden;} .main_event_area .thumb_card_img.event {width: 100%; padding-top: 48.5%; border-radius: .5rem; border-bottom: 0;} /* .main_event_area .thumb_card_img.event {width: 100%; height: calc(100vw - 350px); min-height: 90px; max-height: 130px; border-radius: 0;} */ /* .main_event_area .thumb_card_img.event img {width: 100%; height: 100%; object-fit: cover;} */ .event_banner {position: relative; display: inline-block; width: 100%; height: 0; padding-top: calc(780 / 1000 * 100%); border-radius: 1rem; overflow: hidden;} .event_banner img {position: absolute; top: 50%; left: 50%; width: auto; height: 100%; transform: translate(-50%,-50%);} /*------------------------------------------- -- main notice area -------------------------------------------*/ .main_notice_area {border-bottom: 1px solid var(--n-gray-200);} /* notice box */ .notice_box {position: relative; width: 100%; padding: 1.8rem 0;} .notice_content {display: flex; align-items: center; gap: 1.6rem; font-size: 1.6rem;} .notice_content img {width: 2.4rem; height: auto; margin-right: 1.6rem;} .notice_content span {font-weight: 500; color: var(--n-gray-900);} .notice_content .title {flex: 1;} .notice_content .title a{color: var(--n-gray-900);} /*------------------------------------------- -- main cs area -------------------------------------------*/ .main_cs_area {padding: 4rem 0;} /* call cs box */ .call_cs_box {width: 100%; display: inline-block;} .call_cs_content {display: flex; flex-direction: row; width: 100%; height: 100%;} .call_cs_content .title {flex-shrink: 0; width: 25.5%; font-size: 1.6rem; font-weight: 500; color: var(--n-gray-900);} .call_cs_content .cs_num {display: flex; flex-wrap: wrap; gap: 0 1.6rem; font-size: 2rem; font-weight: 500; color: var(--n-gray-900);} .call_cs_content .cs_num .badge {padding: .2rem .8rem; font-size: 1.2rem;} .call_cs_content .cs_desc {margin-top: .5rem; font-size: 1.4rem; color: var(--n-gray-500);} .cs_center {display: flex; } .cs_center .cs_num > div {display: flex; align-items: center; gap: .8rem;} .active_center {margin-top: 3.2rem;} /*------------------------------------------- -- main swiper area(plugin style) -------------------------------------------*/ .main_swiper_area {width: 100%;} .main_swiper_area .swiper-container {position: relative; width: 100%; margin: 0 auto; padding-bottom: 3rem; overflow: hidden;} .main_swiper_area .swiper-slide {position: relative; text-align: center; font-size: 20px;} .main_swiper_area .swiper-pagination {bottom: 0;} .main_swiper_area .swiper-pagination-bullet {width: .8rem; height: .8rem; border-radius: 10px; background-color: var(--n-main-light); opacity: 100%; margin: 0 1rem;} .main_swiper_area .swiper-pagination-bullet-active {width: 2.5rem; background-color: var(--n-primary);} .main_swiper_area .swiper-button-next, .main_swiper_area .swiper-button-prev {width: 2.4rem; height: 2.4rem; color: var(--n-gray-700);} .main_swiper_area .swiper-button-next:after, .main_swiper_area .swiper-button-prev:after {font-size: 2.4rem;} .main_swiper_area .swiper-button-prev, .main_swiper_area .swiper-rtl .swiper-button-next {left: 2rem;} .main_swiper_area .swiper-button-next, .main_swiper_area .swiper-rtl .swiper-button-prev {right: 2rem;} .main_swiper_area .swiper-pagination-bullet:only-child {display: inline-block !important; } /*********************************************************************************************************************** E. Sub ***********************************************************************************************************************/ /* -- common */ .page_title {padding: .5rem 0; margin-bottom: 2.4rem; font-weight: 600;} .data_none, .event_none {display: flex; justify-content: center; align-items: center; width: 100%; min-height: 20vh; text-align: center;} .alert_wrap {padding: 2.4rem 0 3.2rem 0; text-align: center;} .alert_wrap > * {font-size: 1.4rem; color: var(--n-gray-900); line-height: 1.75;} .alert_img { width: 100%; padding: 1rem 0; text-align: center;} .alert_img span { background-image: url(../svg/exclamation-circle-fill.svg); background-repeat: no-repeat; background-position: center; background-size: 100%; display: inline-block; width: 3.2rem; height: 3.2rem; } .alert_img span.success {background-image: url(../svg/check2-circle.svg); filter: var(--n-filter-primary);} .alert_img span.fail {background-image: url(../svg/x-circle.svg); filter: var(--n-filter-red);} .alert_img span.success, .alert_img span.fail {width: 4.8rem; height: 4.8rem;} /* 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;} .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 #e6e6e6;} .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-gray-50);} .doc_content .doc_price_area.total .price_list {font-size: 11pt;} .doc_notice {font-size: 7.5pt; padding-top: 5px; color: var(--n-gray-600);} .doc_notice .box {padding: 10px;} .doc_notice .box .title {padding-bottom: 5px; font-size: 7.5pt; font-weight: 600; color: var(--n-gray-600);} .doc_notice .list li {letter-spacing: -.25px;} .doc_notice .list li + li {margin-top: 5px;} .doc_seal {padding-top: 20px; line-height: 1.75; text-align: center; color: var(--n-gray-800);} .doc_seal p {font-size: 9.25pt; font-weight: 500;} .doc_seal .seal {position: relative; margin-top: 20px; font-size: 11.5pt; color: #000;} /* .doc_seal .seal img {display: none;} */ .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: 1.5rem 2rem; border-radius: .5rem; background-color: var(--n-gray-100);} /* 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: invert(25%) sepia(98%) saturate(9%) hue-rotate(329deg) brightness(100%) contrast(95%);} .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: 1.6rem 0; border-bottom: 1px solid var(--n-gray-200);} .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-500);} .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-400);} .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: .5rem; font-size: 1.4rem; border: 1px solid var(--n-gray-200);} .card_link.type2 {background-color: var(--n-gray-100); border: 0;} .card_link .title {font-size: 1.6rem; font-weight: 500;} .service_desc {display: flex; flex-direction: column; justify-content: space-between; align-items: baseline;} .service_desc .badge {display: inline;} .addType.badge_pps {background-color: var(--n-primary); } /* 선불 */ .addType.badge_post {background-color: var(--n-primary); } /* 후불 */ .addType.badge_all {background-color: var(--n-gray-900);} /* 선후불 */ .service_desc .title_wrap { flex: 1; min-width: 0;} .service_desc .title {padding-right: 1rem; font-size: 1.5rem; color: var(--n-gray-900);} .service_desc .price {margin-left: auto; font-size: 1.8rem; font-weight: 700; color: var(--n-primary); text-align: right;} .service_desc .price .ref {font-size: 1.2rem; font-weight: 400; color: var(--n-gray-400);} /*------------------------------------------- -- price list(요금 소계) -------------------------------------------*/ .price_list {font-size: 1.4rem; font-weight: 500; color: var(--n-gray-900);} .price_list li {display: flex; align-items: center; justify-content: space-between;} .price_list li + li {padding-top: 1rem;} .price_list li.depth {padding-top: .5rem; font-size: 1.3rem; font-weight: 400; color: var(--n-gray-600);} .price_list li.total {color: var(--n-primary);} .price_list li .title, .price_list li .text {font-weight: inherit; font-size: inherit; color: inherit; padding-bottom: 0;} /*------------------------------------------- -- thumb card -------------------------------------------*/ .thumb_card_link {display: inline-block; width: 100%; margin-bottom: 2rem; border: 1px solid var(--n-gray-200); border-radius: .5rem;} .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: 48.5%; margin-bottom: 0; border-radius: .5rem .5rem 0 0; overflow: hidden;} .thumb_card_img.event_end img {opacity: .65; filter: grayscale(60%);} .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: 1rem 1.6rem; font-size: 1.2rem;} .thumb_card_desc .title {margin-bottom: .25rem; font-size: 1.6rem; font-weight: 500; color: var(--n-gray-900); text-overflow: ellipsis; overflow: hidden; word-break: break-all; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;} .thumb_card_desc .date {color: var(--n-gray-400);} /*------------------------------------------- -- tab -------------------------------------------*/ .tab_box {margin-bottom: 2.4rem; word-break: keep-all;} .tab_box_list {display: flex; flex-wrap: wrap; gap: 5px; width: 100%;} .tab_box_list li {flex: 1; display: inline-block;} .tab_box_link {position: relative; display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; padding: 1rem .5rem; font-size: 1.4rem; border: 1px solid var(--n-gray-200); border-radius: 5px; background-color: var(--n-gray-200); color: var(--n-gray-600); text-align: center; word-break: keep-all;} .tab_box_link:hover {color: var(--n-gray-600);} .tab_box_link.on, .tab_box_link.active {background-color: var(--n-gray-900); color: #fff; border-color: var(--n-gray-900);} .tab_box_list_t2 {display: flex; flex-wrap: wrap; gap: 5px 0; margin: 0 -2.5px;} .tab_box_list_t2 li {flex: 0 0 auto; display: inline-block; padding: 0 2.5px;} .tab_box_list_t3 {display: flex; flex-wrap: wrap; gap: .8rem 1rem; width: 100%;} .tab_box_list_t3 li {display: inline-block;} .tab_box_list_t3 .tab_box_link {padding: .8rem 1.5rem; background-color: transparent; border: 1px solid #e6e6e6; border-radius: 5px;} .tab_box_list_t3 .tab_box_link.on {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: var(--n-gray-50); color: #BFBFBF; } .tab_box_oval .tab_link.on {background-color: var(--n-primary); color: #fff;} .sub_tab {} .sub_tab_list {display: flex; width: 100%; } .sub_tab_list li {margin-right: 1rem;} .sub_tab_link {display:inline-block; padding: .5rem 1.6rem;; font-size: 1.3rem; color: var(--n-gray-600); border-radius: .5rem; background-color: var(--n-gray-200);} .sub_tab_link:hover {color: var(--n-gray-500);} .sub_tab_link.on {font-weight: 700; color: #fff; background-color: var(--n-gray-900);} .tab_line_wrap {margin-bottom: 2.4rem;} .tab_line_cate {position: relative; padding-right: 2rem; margin: 0 -2rem 1.6rem -2rem;} .tab_line_cate::before {content: ''; position: absolute; bottom: 0; display: block; width: 100%; height: 1px; background-color: var(--n-gray-200);} .tab_line_list {position: relative; display: flex; flex-wrap: wrap; width: 100%; padding-top: 1.75rem; margin: 0 auto; text-align: center; background: #fff; border-bottom: 1px solid #e6e6e6;} .tab_line_list li {flex: 1 1 auto;} .tab_line_link {display:inline-block; width: 100%; padding: 1rem .5rem; border-radius: 0; font-size: 1.4em; background-color: transparent; color: var(--n-gray-500);} .tab_line_link:hover {color: var(--n-gray-500);} .tab_line_link.on {border-bottom: 2px solid var(--n-primary); font-weight: 700; color: var(--n-primary);} .tab_line_list_t2 {position: relative; display: flex; width: 100%; padding: 0 1rem;} .tab_line_list_t2 li {padding: 0 1rem;} .tab_line_list_t2 .tab_line_link {padding: 1rem 0; font-size: 1.5rem; color: var(--n-gray-400);} .tab_line_list_t2 .tab_line_link:hover {color: var(--n-gray-400);} .tab_line_list_t2 .tab_line_link.on {border-bottom: 2px solid var(--n-primary); font-weight: 700; color: var(--n-primary);} .tab_content {width: 100%; margin-top: 4rem;} .tab_content img {width: 100%;} .tab_content .review_list {border-top: none} .tab_login {margin-bottom: 3.2rem;} .tab_login_list {position: relative; display: flex; flex-wrap: wrap; gap: 1rem; width: 100%; max-width: 200px; margin: 0 auto; text-align: center;} .tab_login_list li {flex: 1 1 auto;} .tab_login_link {display:inline-block; width: 100%; padding: 1rem; border-radius: 10rem; font-size: 1.4rem; background-color: transparent; color: var(--n-gray-600);} .tab_login_link:hover {color: var(--n-gray-600); background-color: var(--n-gray-100)} .tab_login_link.on {font-weight: 700; color: #fff; background-color: var(--n-gray-900);} /*------------------------------------------- -- search -------------------------------------------*/ .search_wrap {padding: 1rem 0;} /*------------------------------------------- -- product layout(휴대폰) -------------------------------------------*/ /* phone list */ .card_list.phone_list {display: flex; flex-wrap: wrap;} .card_list.phone_list .card_list_item {flex: 0 0 auto; width: 100%; border-radius: 1rem;} .card_list.phone_list .card_rate_link {display: flex;} .card_list.phone_list .img_wrap {width: 45%; min-width: 45%; max-height: 16rem;} .card_list.phone_list .img_wrap img {width: 100%; height: 100%; object-fit: contain;} .card_list.phone_list .content_group {justify-content: center; flex-direction: column; margin-left: 1rem;} .card_list.phone_list .badge {font-size: 1.1rem;} .card_list.phone_list .title {margin-bottom: 1rem; font-size: 1.6rem; font-weight: 700; color: var(--n-gray-900); text-overflow: ellipsis; overflow: hidden; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;} .card_list.phone_list .title::after {content: ""; width: 0; height: 0;} .card_list.phone_list .detail {width: 100%; font-size: 1.3rem; color: var(--n-gray-600);} .card_list.phone_list .price {margin-top: 0.8rem; font-size: 2.2rem; font-weight: 700; color: var(--n-primary);} .card_list.phone_list .price .ref {font-size: 1.3rem; font-weight: 400; color: #BF2673;} /* product banner */ .product_banner_area {width: auto; overflow: hidden; padding-bottom: 3rem;} .product_banner_area .swiper-container {position: relative; width: 100%; margin: 0 auto;} .product_banner_area .swiper-pagination {bottom: 2rem;} .product_banner_area .swiper-pagination-bullet {width: .6rem; height: .6rem; background-color: #000; opacity: 20%; margin: 0 .8rem;} .product_banner_area .swiper-pagination-bullet-active {background-color: var(--n-gray-800); opacity: 100%;} .product_banner_area .thumb_card_img {height: calc(100vw - 30vw); max-height: 360px; margin-bottom: 0; border-radius: 1rem; background-color: #eaeaea;} .product_banner_area .thumb_card_img img {object-fit: cover; width: 100%; height: 100%;} /* product select */ .product_select {display: flex; justify-content: space-between; align-items: end; padding-top: 3rem;} .product_select p {display: block; font-size: 1.4rem; font-weight: 300; color: var(--n-gray-700);} .product_select select {position: relative; width: 10rem; height: 35px; padding: 0 2.27rem 0 1.2rem; color: var(--n-gray-800); background-position: right 8% center;} /* product search */ .product_search_acc .acc_item {width: 100%; height: 100%; padding: 2rem; border: 1px solid var(--n-primary); border-radius: 1rem; background-color: transparent;} .product_search_acc .acc_header .acc_header_link {position: relative; font-size: 1.6rem; font-weight: 700; color: var(--n-primary);} .product_search_acc .acc_header .acc_header_link::after {background: url(../svg/chevron-down.svg) no-repeat center/100%; content: ""; position: absolute; top: 50%; transform: translateY(-50%); right: 0; display: inline-block; width: 1.6rem; height: 1.6rem; filter: var(--n-filter-primary);} .product_search_acc .acc_header.active .acc_header_link::after {background: url(../svg/chevron-up.svg) no-repeat center/100%; content: ""; position: absolute; top: 50%; transform: translateY(-50%); right: 0; display: inline-block; width: 1.6rem; height: 1.6rem; filter: var(--n-filter-primary);} .product_search_acc .acc_content {padding-top: 0; margin-top: 3.2rem;} .items_search {padding: 0 1rem;} .items_search .items {display: flex; flex-direction: column; align-items: start; gap: .5rem; padding-bottom: 1.5rem; margin-bottom: 1.5rem; border-bottom: 1px solid #e6e6e6;} .items_search .items .title {font-size: 1.4rem; font-weight: 500; color: var(--n-gray-800);} .items_search .items .input_group {margin-right: 1rem;} .items_search .select_btn, .items_search .btn-check + .select_btn:hover {border: 1px solid #efefef; border-radius: 100px; background-color: #efefef; color: var(--n-gray-700);} .items_search .btn-check:checked + .select_btn:hover {border: 1px solid var(--n-primary); background-color: #fff; color: var(--n-primary);} .items_search .btn_wrap {padding-top: 1rem; margin-top: 0; text-align: center;} /* product detail view */ .product_title {font-weight: 700;} .product_title_desc { margin-top: .5rem; font-size: 1.2rem; font-weight: 400; color: var(--n-gray-700);} .product_info_wrap {margin-bottom: 3rem;} .product_tab {margin: 0 -2rem;} /* photo - swiper */ .product_photo_thumbs {display: none; margin-top: 2rem;} .product_photo_thumbs .swiper-wrapper {justify-content: center;} .product_photo_thumbs .box_outline {width: 9rem; height: 9rem; padding: .5rem; cursor: pointer;} .product_photo_thumbs .box_outline img {width: 100%; height: 100%; object-fit: contain;} .product_photo_thumbs .box_outline.active {border: 1px solid var(--n-primary);} .product_photo {padding-bottom: 2rem;} .product_photo .swiper-horizontal>.swiper-pagination-bullets, .product_photo .swiper-pagination-bullets.swiper-pagination-horizontal, .product_photo .swiper-pagination-custom, .swiper-pagination-fraction {bottom: 0;} .product_photo .swiper-slide {text-align: center; height: 25rem;} .product_photo .swiper-slide img {width: 80%; height: 100%; object-fit: contain;} .product_photo .swiper-pagination-bullet {width: .8rem; height: .8rem; background-color: #000; opacity: 20%; margin: 0 .8rem;} .product_photo .swiper-pagination-bullet-active {background-color: var(--n-gray-800); opacity: 100%;} .product_photo .swiper-button-next, .product_photo .swiper-button-prev {width: 2.4rem; height: 2.4rem; color: var(--n-gray-700);} .product_photo .swiper-button-next:after, .product_photo .swiper-button-prev:after {font-size: 2.4rem;} .product_photo .swiper-button-prev, .product_photo .swiper-rtl .swiper-button-next {left: 2rem;} .product_photo .swiper-button-next, .product_photo .swiper-rtl .swiper-button-prev {right: 2rem;} .product_photo_thumbs .swiper-wrapper .swiper-slide:last-child {margin-right: 0 !important;} .product_color_select {display: flex; gap: 0 .5rem;} .product_color_select li {position: relative; width: 3.6rem; height: 3.6rem; border-radius: 50%;} .product_color_select input[type="radio"] + label {display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 2.4rem; height: 2.4rem; border-radius: 50%; border: 1px solid #efefef; cursor: pointer;} .product_color_select input[type="radio"]:checked + label::before {content: ""; display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 3.6rem; height: 3.6rem; border: 1px solid #000; border-radius: 50%; } .product_color_select input[type="radio"] + label span {display: none;} .product_rate_select {margin-bottom: 4rem;} .rate_select_box {padding: 2rem 2.4rem; border-radius: .5rem; border: 1px solid var(--n-primary);} .rate_select_box .title {padding: 0; font-size: 1.6rem; font-weight: 700; color: var(--n-gray-900); text-overflow: ellipsis; overflow: hidden; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;} .rate_select_box .content_group {display: flex; flex-direction: column;} .rate_select_box .desc {flex: 1 1 auto; width: 100%; font-size: 1.2rem; color: var(--n-gray-600);} .rate_select_box .desc li {display: inline-block; padding-right: 2rem;} .rate_select_box .desc li:not(:last-child)::after {content: '|'; position: absolute; display: inline-block; margin: 0 0.8rem; color: var(--n-gray-300);} .rate_select_box .price {flex: none; font-size: 1.8rem; font-weight: 700; text-align: right; color: var(--n-primary);} .rate_select_box .price .ref {display: block; font-size: 1.3rem; font-weight: 400; color: #BF2673;} /*------------------------------------------- -- rate layout(요금제) -------------------------------------------*/ .rate_list_wrap {padding-top: 1.6rem;} .product_select + .rate_list_wrap {padding-top: 1rem;} .card_list .badge_wrap {display: flex; flex-wrap: wrap; gap: .5rem;} /* rate list */ .card_list.rate_list {display: flex; flex-wrap: wrap; margin: 0 -12px 0 -12px;} .card_list.rate_list .card_list_item {width: 100%; padding: 0 12px 0 12px;} .card_list.rate_list .card_rate_link {padding: 2rem 2.4rem; border-radius: 1rem; border: 1px solid var(--n-gray-200); background-color: transparent;} .card_list.rate_list .title {position: relative; font-size: 1.5rem; font-weight: 500; color: var(--n-gray-900);} .card_list.rate_list .content_group {flex-direction: column; margin-top: 1rem;} .card_list.rate_list .detail {width: 100%; margin-bottom: 1rem; font-size: 1.3rem; color: var(--n-gray-900);} .card_list.rate_list .desc {display: flex; flex-wrap: wrap; gap: .5rem 1rem;} .card_list.rate_list .desc li {position: relative; display: inline-block;} .card_list.rate_list .desc li::before {content: ''; display: inline-block; width: 1.6rem; height: 1.6rem; margin-right: .3rem; transform: translateY(4px); filter: var(--n-filter-primary);} .card_list.rate_list .desc li:first-child::before {background: url(../svg/cell-tower.svg)no-repeat center/100%;} .card_list.rate_list .desc li:nth-child(2)::before {background: url(../svg/phone.svg)no-repeat center/100%;} .card_list.rate_list .desc li:last-child::before {background: url(../svg/envelope-simple.svg)no-repeat center/100%;} .card_list.rate_list .detail .ref {padding-top: .5rem; font-size: 1.3rem; font-weight: 400; color: var(--n-gray-400);} .card_list.rate_list .price {font-size: 1.8rem; font-weight: 700; text-align: right; color: var(--n-primary);} .card_list.rate_list .price .ref {font-size: 1.3rem; font-weight: 400; color: var(--n-gray-400);} /* rate detail view */ .rate_info_wrap {} .rate_info .header_sub {display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem;} .rate_info .header_sub .badge {padding: .5rem .8rem; font-size: 1.2rem; font-weight: 500; border-radius: 10rem;} /* .rate_info .header_sub .badge + .badge {margin-left: .5rem;} */ .rate_info .telco {line-height: 1; padding: .5rem .8rem; border: 1px solid var(--n-gray-100); border-radius: 10rem; font-size: 1.2rem; color: var(--n-gray-600); background-color: var(--n-gray-100);} .rate_info .header {margin-bottom: 2rem; font-size: 1.8rem;} .rate_info .content {display: flex; flex-direction: column;} .rate_info .content .detail {font-size: 1.4rem; color: var(--n-gray-800);} .rate_info .detail .desc li {display: flex; align-items: center; margin-bottom: 1rem; gap: .5rem;} .rate_info .detail .desc .icon {width: 2rem; height: 2rem; filter: var(--n-filter-primary);} .rate_info .detail .ref {margin-top: 1rem; font-size: 1.2rem; font-weight: 400; color: var(--n-gray-400);} .rate_info .price {display: grid; grid-template-columns: 1fr 100px; grid-template-rows: 1fr; justify-content: center; align-items: center; margin-top: 1rem;} .rate_info .price p {font-size: 1.8rem; font-weight: 700; color: var(--n-primary);} .rate_info .price .vat {font-size: 1.2rem; font-weight: 400;} .rate_info .price .ref {font-size: 1.2rem; font-weight: 400; color: var(--n-gray-400);} .rate_info .price .ref_stop {grid-column: 2; grid-row: 1 / span 2; font-size: 1.5rem; font-weight: 500; text-align: center; color: var(--n-gray-900);} .rate_info .price button {grid-column: 2; grid-row: 1 / span 2; font-size: 1.6rem;} .rate_caption {margin-top: 1.6rem; padding: 1rem; border-radius: .5rem; background-color: var(--n-primary-light);} .rate_caption_list {padding-left: 1rem; font-size: 1.2rem; color: var(--n-primary);} .rate_caption_list li {list-style: "\00B7 "; padding-left: .5rem;} .rate_caption_list li:not(:last-child) {margin-bottom: .5rem;} .rate_detail {padding-top: 2.4rem; margin-top: 2.4rem; border-top: 1px solid var(--n-gray-200);} .rate_detail.type2 {padding-top: 1.6rem; margin-top: 0; border-top: 1px solid var(--n-gray-900); color: var(--n-gray-700);} .rate_detail_depth {margin-bottom: 2.4rem;} .rate_detail_depth .title {margin-bottom: 1rem; font-size: 1.4rem; font-weight: 700; color: var(--n-gray-900); } .rate_detail_depth .desc_list {padding: 1rem; border-radius: .5rem; font-size: 1.3rem; color: var(--n-gray-800); background-color: var(--n-gray-100);} .rate_detail_depth .desc {padding: 1rem; border-radius: .5rem; font-size: 1.3rem; color: var(--n-gray-800); background-color: var(--n-gray-100); line-height: 1.8; overflow-x: auto;} .rate_detail_depth p.desc_list>* {font-size: 1.3rem !important;} .rate_detail_depth img {width: 100%; height: auto;} .rate_detail_depth .desc_list li {list-style: "\00B7 "; padding-left: .5rem; margin-bottom: 0.5rem;} .rate_detail_depth .desc_list_depth {padding: .5rem 0 0 1rem; font-size: 1.2rem;} .rate_detail_depth .desc_list_depth li {list-style: "- ";} /* .modal_board .rate_detail .content {padding: 0; border: 0;} */ /*------------------------------------------- -- event(이벤트) -------------------------------------------*/ /* 이벤트 종료 뱃지 */ .event_end .event_badge {position: absolute; top: 1rem; left: 1.6rem; z-index: 1;} .event_end .event_badge .badge {padding: .5rem .8rem; border-radius: .5rem; font-size: 1.3rem; font-weight: 500; background-color: var(--n-gray-900);} .event_board {border-bottom: 1px solid var(--n-gray-200); font-size: 1.4rem; color: var(--n-gray-700);} .event_board .board_head {padding: 1.6rem 0; border-bottom: 1px solid var(--n-gray-200);} .event_board .board_head .title {font-size: 1.8rem; font-weight: 500; color: var(--n-gray-900);} .event_board .board_content {padding: 1.6rem 0; overflow-x: auto;} .event_board .board_content img {max-width: 100%;} /* event table */ /* .table_list {width: 100%; border-top: 1px solid var(--n-primary); border-bottom: 1px solid var(--n-primary); font-size: 1.4rem;} .table_list th, .table_list tr {border-bottom: 1px solid #e6e6e6;} .table_list th {padding: 1.6rem 0; font-size: 1.6rem; font-weight: 500; color: var(--n-gray-900); text-align: center;} .table_list td {padding: 1.6rem 0; font-size: 1.6rem; color: var(--n-gray-600); text-align: center;} .table_list td .link {color: var(--n-gray-800);} .table_list td .link:hover {color: var(--n-gray-800);} .table_list tr:last-child {border-bottom: none;} .table_board td { padding: 2rem 0; padding-left: 1rem;} */ /*------------------------------------------- -- review(리뷰) -------------------------------------------*/ /* review list */ .review_list {} .review_list_item {display: flex; flex-direction: column; padding: 1.6rem 0; border-bottom: 1px solid #e6e6e6; font-size: 1.4rem;} .review_list_header {display: flex; align-items: flex-start; flex-direction: column-reverse; width: 100%; gap: 1.6rem;} .review_list_header .title {width: 100%; font-weight: 700; color: var(--n-gray-900); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} .review_list_header .review_info {display: flex; flex-direction: column; gap: .5rem; width: 100%; font-size: 1.3rem; font-weight: 400; color: var(--n-gray-400);} .review_list_header .grade {display: flex; align-items: center; gap: 0 .4rem;} .review_list_header .grade_icon {background: url(../svg/star-fill.svg) no-repeat center/100%; content: ""; display: inline-block; width: 1.4rem; height: 1.4rem; filter: var(--n-filter-gray3);} .review_list_header .grade_icon.active {filter: var(--n-filter-primary);} .review_list_content .desc {margin: 1rem 0 0 0 ; color: var(--n-gray-700);} .review_list_content .img_wrap {position: relative; width: 100%; height: 0; padding-top: 65.5%; border-radius: .5rem; background-color: var(--n-gray-50); text-align: center; overflow: hidden;} .review_list_content .img_wrap img {position:absolute; top:50%; left: 0; transform:translateY(-50%); width: 100%; height: auto;} /* review write */ .grade_btn_wrap {display: flex; align-items: center; gap: 0 .4rem;} .grade_btn_wrap .grade_btn {background: url(../svg/star-fill.svg) no-repeat center/100%; content: ""; display: inline-block; width: 2.4rem; height: 2.4rem; filter: invert(99%) sepia(22%) saturate(313%) hue-rotate(332deg) brightness(112%) contrast(76%);} .grade_btn_wrap .grade_btn.active {filter: var(--n-filter-primary);} .review_photo_wrap {position: relative; width: 100%; height: calc(100vw * .55); max-height: 250px; border-radius: .5rem; border: 1px solid var(--n-gray-200); overflow: hidden;} .review_photo_wrap label {width: 100%; height: 100%; background: url(../svg/plus-lg.svg) no-repeat center/15%; filter: var(--n-filter-gray4);} .review_photo_wrap img {position:absolute; top:50%; left: 50%; transform:translate(-50%, -50%); width: auto; height: 100%;} .btn_photo_remove {position: absolute; top: 1rem; right: 1rem; width: 2.5rem; height: 2.5rem; border-radius: 10rem; background-color: #000; opacity: 50%;} .btn_photo_remove:hover {opacity: 70%;} .btn_photo_remove::before {background: url(../svg/x-lg.svg) no-repeat center/100%; content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: inline-block; width: 12px; height: 12px; filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(188deg) brightness(100%) contrast(100%);} /*------------------------------------------- -- qna(자주묻는질문) -------------------------------------------*/ /* qna tab */ .qna_tab_wrap {padding-top: 3.6rem;} .qna_tab {display: flex; flex-wrap: wrap; gap: .5rem 1rem;} .qna_tab_link {padding: .5rem 1.6rem; font-size: 1.3rem; border-radius: .5rem; color: var(--n-gray-600); background-color: var(--n-gray-200);} .qna_tab_link:hover {color: var(--n-gray-600);} .qna_tab_link.on {font-weight: 700; color: #fff; background-color: var(--n-gray-900);} /* 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-900);} .qna_acc_wrap .acc_header_link {position: relative; display: flex; align-items: center; width: 100%; padding: 1.6rem 2.4rem 1.6rem 0; background-color: transparent; font-weight: 500; text-align: left;} .qna_acc_wrap .acc_header.active .acc_header_link {color: var(--n-primary);} .qna_acc_wrap .acc_header .acc_header_link::after {background: url(../svg/expand_more.svg) no-repeat center/100%; content: ""; position: absolute; top: 50%; transform: translateY(-50%); right: 0; display: inline-block; width: 2rem; height: 2rem; filter: var(--n-filter-gray4);} .qna_acc_wrap .acc_header.active .acc_header_link::after {background: url(../svg/expand_less.svg) no-repeat center/100%; content: ""; filter: var(--n-filter-primary);} .qna_acc_wrap .acc_content {display: none; padding-bottom: 1.6rem;} .qna_acc_wrap .acc_content_inner {display: flex; padding: 1.6rem; border-radius: .5rem; font-size: 1.4rem; color: var(--n-gray-700); background-color: var(--n-gray-50);} .qna_acc_wrap .q_mark {flex-shrink: 0; display: inline-block; margin-right: .5rem; color: var(--n-gray-900); text-align: center; font-weight: 700;} .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: 3.6rem;} /* notice list */ .notice_list {} .notice_list_item {position: relative; display: flex; flex-direction: column-reverse; padding: 1.6rem 0; border-bottom: 1px solid var(--n-gray-200); font-size: 1.5rem;} /* .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 .title {font-weight: 600; overflow: hidden; text-overflow: ellipsis; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical} .notice_list_item .date, .notice_list_item .event_date {font-size: 1.3rem; 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 .no {display: none;} .notice_list_item .event_date {display: flex; flex-direction: column;} /* notice detail view */ .notice_board {font-size: 1.5rem; color: var(--n-gray-800);} .notice_board .board_head {padding: 1.6rem 0; border-bottom: 1px solid var(--n-gray-200);} .notice_board .board_head .title {font-size: 1.8rem;} .board_head .title {margin-bottom: .5rem; font-weight: 500; color: var(--n-gray-900);} .board_head .date {font-size: 1.3rem; color: var(--n-gray-400);} .notice_board .board_content { padding: 2.4rem 0 4rem 0; overflow-x: auto; word-break: break-all;} .notice_board .board_content img {max-width: 100%;} .board_page {border-radius: .5rem; font-size: 1.4rem; background-color: var(--n-gray-50); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} .board_page .page_item {display: flex; align-items: center; padding: 1rem 1.6rem; border-top: 1px solid var(--n-gray-200);} .board_page .page_item:first-child {border-top: 0;} .board_page .page_link {padding-left: 1rem; font-weight: 500; color: var(--n-gray-900);} .board_page .page_link:hover {color: var(--n-gray-900); background-color: transparent;} /* 접수내역리스트 */ .notice_list_item.order_item {flex-direction: column; display: block; padding: 1.6rem 0; padding-right: 0;} .notice_list_item.order_item::after {display: none;} .notice_list_item.order_item .inner_flex {display: flex; flex-direction: column; justify-content: space-between;} .notice_list_item.order_item .title {position: relative; font-weight: 500;} .notice_list_item.order_item .title_status {margin-bottom: .5rem; font-size: 1.4rem; color: var(--n-gray-500);} .notice_list_item.order_item .title_status span {margin-right: .5rem; font-weight: 500; color: var(--n-primary);} .notice_list_item.order_item .text {display: flex; flex-wrap: wrap; font-size: 1.3rem; color: var(--n-gray-700);} .notice_list_item.order_item .text p:not(:first-child) {position:relative; padding-left: .8rem; margin-left: .8rem;} .notice_list_item.order_item .text p:not(:first-child)::before {content: ''; position: absolute; top: 50%; left: 0; transform: translateY(-50%); display: block; width: 1px; height: 10px; background-color: var(--n-gray-400);} .notice_list_item.order_item .btn_group {display: flex; flex-direction: row; justify-content: center; gap: 1rem; min-width: 9rem; padding: 0; padding-top: 1.6rem;} .notice_list_item.order_item .btn_group > * {width: 100%; max-width: none; padding-left: .5rem; padding-right: .5rem;} /* .notice_list_item.order_item .btn_group > * + * {margin-left: 1rem;} */ .notice_list_item.order_item .btn_group > .n_btn_xs {font-size: 1.3rem;} /*------------------------------------------- -- store list(매장안내) -------------------------------------------*/ .store_list {border-top: 1px solid var(--n-primary);} .store_list_item {display: flex; flex-direction: column; padding: 2rem 1.6rem; border-bottom: 1px solid #e6e6e6; font-size: 1.4rem;} .store_list_item .title {margin-bottom: .5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} .store_list_item .date {font-size: 1.3rem; color: var(--n-gray-500);} /* map */ .store_map {width: 100%; height: 15rem;} .store_map iframe {width: 100%; height: 100%;} /* desc */ .store_desc {padding-top: 1rem;} .store_desc .title {margin-bottom: 0; color: var(--n-gray-900); font-weight: 700;} .store_desc .ref {margin-top: .5rem; color: var(--n-gray-600);} /* old */ /* .store_link {color: var(--n-gray-800);} .store_link:hover {color: var(--n-gray-800);} .store_link .title {margin-bottom: 0; color: var(--n-gray-900); font-weight: 700;} .store_link .ref {margin-top: .5rem; color: var(--n-gray-600);} .store_card_link {display: block; padding: 1.6rem; font-size: 1.4rem; background-color: #fff; color: var(--n-gray-800); border: 1px solid #e6e6e6; border-radius: 10px; margin-bottom: 1rem; cursor: default;} .store_card_link:hover {color: var(--n-gray-800);} .store_card_link .title {margin-bottom: 0; color: var(--n-gray-900); font-weight: 700;} .store_card_link .ref {margin-top: .5rem; font-size: 1.3rem; color: var(--n-gray-700);} */ /*------------------------------------------- -- online cs(1:1문의) -------------------------------------------*/ /* .table_board {display: block; width: 100%; border-top: 1px solid var(--n-gray-900); font-size: 1.4rem;} .table_board tbody {display: inline-block; width: 100%;} .table_board tr {display: grid; grid-template-columns: auto; align-items: start; width: 100%; border-bottom: 1px solid #e6e6e6;} .table_board th {width: 100%; height: 100%; padding: 1rem; font-weight: 500; color: var(--n-gray-900); background-color: #f5f5f5;} .table_board td {width: 100%; padding: 1rem; padding-bottom: 2rem;} .table_board .form_group {margin-bottom: 1rem;} */ /* agree box */ .agree_group {margin-top: 2rem; border-radius: .5rem; padding: 1.6rem; background-color: var(--n-gray-50);} .agree_box {font-size: 1.3rem; color: var(--n-gray-600);} .agree_box .inner {} .agree_check {margin-top: 1.6rem;} .agree_check .n_check_label {font-weight: 500;} /* pagination */ .pagination {align-items: center; justify-content: center; margin-top: 2rem;} .page_icon { display: inline-block; vertical-align: middle; width: 2rem; height: 3rem; filter: var(--n-filter-gray4);} .page_first {background: url(../svg/double_arrow_left.svg) no-repeat center/100%;} .page_last {background: url(../svg/double_arrow_right.svg) no-repeat center/100%;} .page_prev {background: url(../svg/chevron_left.svg) no-repeat center/100%; margin: 0 .5rem;} .page_next {background: url(../svg/chevron_right.svg) no-repeat center/100%; margin: 0 .5rem;} .page_link {width: 3rem; height: 3rem; line-height: 3rem; border-radius: .5rem; font-size: 1.3rem; color: var(--n-gray-500); text-align: center;} .page_link:not(:first-child) {margin-left: .5rem;} .page_link:hover {background-color: var(--n-gray-100); color: var(--n-gray-500);} .page_link.on {background-color: var(--n-gray-900); color: #fff;} /*img upload*/ .cs_photo_wrap {position: relative; width: 100%; height: calc(100vw * .55); max-height: 250px; border-radius: .5rem; border: 1px solid var(--n-gray-200); overflow: hidden;} .cs_photo_wrap label {width: 100%; height: 100%; background: url(../svg/plus-lg.svg) no-repeat center/15%; filter: var(--n-filter-gray4);} .cs_photo_wrap img {position:absolute; top:50%; left: 50%; transform:translate(-50%, -50%); width: auto; height: 100%;} /*------------------------------------------- -- apply change(가입정보변경) -------------------------------------------*/ .applychg_tab {} .applychg_tab .tab_box_link.check_self::before {content: ''; position: absolute; top: .5rem; right: .5rem; display: block; width: 1rem; height: 1rem; background: url(../svg/asterisk-bold.svg) no-repeat center/100%; filter: var(--n-filter-gray5);} .applychg_tab .tab_box_link.on::before {filter: invert(99%) sepia(72%) saturate(26%) hue-rotate(127deg) brightness(106%) contrast(100%);} /*------------------------------------------- -- contact -------------------------------------------*/ /* company */ .company_img_wrap {background: url(../img/img-about-company.png)no-repeat center/cover; width: 100%; height: 15rem; margin-top: -39px;} /*------------------------------------------- -- prepaid -------------------------------------------*/ .charge_wrap {padding-top: 1.2rem;} .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%;} /*------------------------------------------- -- download -------------------------------------------*/ .download_wrap .service_desc .title {margin-bottom: .8rem;} .download_wrap .service_desc .btn_down {margin-left: auto;} /*------------------------------------------- -- mypage -------------------------------------------*/ /* join info */ .my_info.joinInfo .header {padding: 1.6rem; margin-bottom: 3.2rem; border: 1px solid var(--n-gray-200); border-radius: .5rem;} .my_info.joinInfo .header_top {display: flex; flex-direction: column; justify-content: space-between; height: unset; padding-top: 0; margin-bottom: 1rem; border-bottom: 0; font-size: 1.4rem;} .my_info.joinInfo .header_top .name {font-size: 1.8rem;} .my_info.joinInfo .header_top .apply_no {display: flex; justify-content: space-between; margin-top: 1rem;} .my_info.joinInfo .header_top .apply_no b {color: var(--n-primary);} .my_info.joinInfo .header_bottom {padding: 1.6rem; border-radius: .5rem; font-size: 1.3rem; background-color: var(--n-gray-100);} .my_info.joinInfo .header_bottom ul {display: flex; flex-direction: column;} .my_info.joinInfo .header_bottom ul li {display: flex; width: 100%; justify-content: space-between; padding: .8rem 0;} .my_info.joinInfo .header_bottom ul li:last-child {border-bottom: 0;} .my_info.joinInfo .header_bottom ul li span {position: relative; padding-right: 1rem; font-weight: 500; color: var(--n-gray-500);} .my_info.joinInfo .order_box {height: 100%; padding: 1.5rem; border-radius: 1rem; border: 1px solid #e6e6e6;} .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-400);} .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-400);} .my_info.joinInfo .content_box .title_wrap .amount_refresh button {height: 3rem;} .my_info.joinInfo .content_box ul {position: relative;} .my_info.joinInfo .content_box .order_list {} .my_info.joinInfo .content_box .order_list li {} .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; border-bottom: 0;} .my_info.joinInfo .content_box ul .rateplan {font-size: 1.6rem; font-weight: 700; color: var(--n-primary); text-align: center;} .my_info.joinInfo .content_box ul .form_notice {margin-top: 0;} .my_info.joinInfo .content_box ul .list_dot {height: unset;} .my_info.joinInfo .content_box ul .list_dot li {padding: 0; padding-left: 1rem; border-bottom: 0;} .my_info.joinInfo .content_box .btn_group {border-radius: .5rem; background-color: var(--n-primary-light); word-break: keep-all;} .my_info.joinInfo .content_box .btn_group .btn_item {position: relative;} .my_info.joinInfo .content_box .btn_group .btn_item:not(:first-child)::before {content: ''; display: block; width: 1px; height: 50%; background-color: var(--n-main-light); position: absolute; top: 50%; transform: translateY(-50%);} .my_info.joinInfo .content_box .btn_group .btn {display: flex; align-items: center; justify-content: center; width: 100%; min-height: 3.5rem; padding: .5rem 1rem; border: 0; font-size: 1.3rem; font-weight: 500; background-color: transparent; color: var(--n-primary);} .my_info.joinInfo .content_box .box_guide .text {padding: 0; margin: 0;} .my_info.joinInfo .content_box .amount_info {font-size: 1.4rem; color: var(--n-gray-800);} .my_info.joinInfo .content_box .amount_info .box_title {margin-bottom: 1.6rem; color: var(--n-gray-400);} .my_info.joinInfo .content_box .amount_info .amount {font-weight: 400; color: var(--n-gray-600);} .my_info.joinInfo .content_box .amount_info .acc {margin-top: .8rem; font-size: 1.8rem; font-weight: 700; color: var(--n-primary);} .my_info.joinInfo .content_box .amount_info .ref {font-size: 1.2rem; font-weight: 400; color: var(--n-gray-400);} .my_info.joinInfo .charge_area {flex-direction: column;} .my_info.joinInfo .charge_area .total_info {display: flex; flex-direction: column; justify-content: center; width: 100%; padding-bottom: 1.2rem; margin-bottom: 1.2rem; border-bottom: 1px solid #e6e6e6; font-size: 1.6rem; color: var(--n-gray-900); text-align: center;} .my_info.joinInfo .charge_area .total_info .amount {font-size: 2.8rem; color: var(--n-primary);} .my_info.joinInfo .charge_area .total_info .period {margin-top: .5rem; font-size: 1.3rem; color: var(--n-gray-400);} .my_info.joinInfo .charge_area .charge_info {width: 100%; margin-top: 1.2rem;} /* pay history */ .select_month_area {margin-bottom: 2.4rem; text-align: center;} .select_month_area .select_box {width: 120px;} .select_month_area .period {padding-top: 1rem; font-size: 1.3rem; color: var(--n-gray-500);} /*********************************************************************************************************************** F. Self ***********************************************************************************************************************/ .self_wrap {padding-bottom: 6rem;} .self_wrap .login_wrap {} .self_wrap .form_wrap h2 {margin-bottom: 1.6rem; font-size: 1.6rem; color: var(--n-gray-900);} .self_wrap .form_wrap h2.type_flex {display: flex; flex-wrap: wrap; justify-content: space-between;} .self_wrap .form_group {margin-bottom: 1.6rem;} .self_wrap .order_list_wrap .form_wrap h2 {padding-bottom: 0; margin-bottom: 1rem; border-bottom: 0;} #hopeNumList, #hopeNumListArea {margin: 1rem 0;} #hopeNumList li, #hopeNumListArea li {margin: .5rem 0;} #hopeNumListArea button {max-width: 340px;} #areaTerms {padding: 1rem .5rem; border-radius: .5rem; background-color: var(--n-gray-50);} #areaTerms > div {padding: .5rem .8rem;} #areaTerms .btn_underline, #personAgree .btn_underline, #harmAgree .btn_underline {min-width: 30px;} #inisisAuth .modal-body {height: 65vh;} #inisisAuth .acc_group {padding: 1rem; border: 1px solid var(--n-gray-200); border-radius: 1rem;} #inisisAuth .acc_content {font-size: 1.4rem;} #inisisAuth .step {flex-direction: row; gap: 2.4rem;} #inisisAuth .step_item + .step_item::before {top: 50%; left: -1.8rem; transform: translateY(-50%); background: url(../svg/chevron-right.svg) center / 100% no-repeat; } #inisisAuth .step_item .img_wrap {width: 5.6rem; height: 5.6rem;} #inisisAuth .step_item .img_wrap img {width: 2.4rem;} .self_copy_wrap {padding: 2rem 0 4rem 0;} .self_copy {font-size: 1rem; color: var(--n-gray-400); text-align: center;} /*------------------------------------------- -- step1 -------------------------------------------*/ /* self call (가입 가능시간 안내) */ .self_call {font-size: 1.4rem; color: var(--n-gray-800);} .self_call .title {margin-bottom: .5rem; font-weight: 700;} .self_call .content {padding-left: 1.2rem; margin-bottom: 1.6rem; list-style: "- ";} .self_call .content li {word-break: keep-all;} .self_call .ref {font-size: 1.1rem; color: var(--n-gray-500);} /* self info (셀프개통 안내) */ .self_info .board_content:not(:last-child) {padding-bottom: 2rem; margin-bottom: 2rem; border-bottom: 1px solid var(--n-gray-200);} /* .self_info .box_outline .title {margin-bottom: 1rem; font-size: 1.6rem; font-weight: 400; color: var(--n-primary);} .self_info .box_outline .content {font-size: 1.4rem; color: var(--n-gray-800); word-break: keep-all; border: 0; padding: 0;} .self_info .box_outline .ref {padding-top: 1rem; font-size: 1.2rem; color: var(--n-gray-600);} */ /* 유심/esim 안내 버튼(임시) */ .self_wrap .guide_btn {text-align: right;} .self_wrap .guide_btn button {height: 3rem; padding: 0 1rem; font-size: 1.4rem;} .step1-activeInfo button {font-size: 1.4rem;} .step1-usimInfo .box_outline {padding: 1rem;} /* .step1-usimInfo .advice_item .img_wrap {flex-basis: 6rem; min-width: 6rem; height: 6rem;} */ /* .step1-usimInfo .advice_item .img_wrap img {width: auto; height: 6rem;} */ .step1-authInfo .advice_item .desc {color: var(--n-gray-400);} /*------------------------------------------- -- price select(요금제 선택 - step_price) -------------------------------------------*/ /* price filter */ .price_filter, .price_filter_popup {top: 6rem; padding: 1rem 0; margin-top: -10px; margin-bottom: 1.4rem; overflow-x: visible; background-color: #fff;} .price_filter button, .price_filter_popup button {padding: .5rem 1.6rem; font-size: 1.3rem; color: var(--n-gray-600); background-color: var(--n-gray-200); border: 1px solid var(--n-gray-200); border-radius: .5rem;} .price_filter button:hover, .price_filter_popup button:hover {color: var(--n-gray-600); background-color: var(--n-gray-200); border-color: var(--n-gray-200);} .price_filter button.on, .price_filter_popup button.on {color: #fff; background-color: var(--n-gray-900); border-color: var(--n-gray-900);} .price_filter_popup .swiper {padding-right: 2rem;} .self_wrap .price_sticky_wrap {top: 6rem; background-color: #fff;} .body_wrap_agent.self_wrap .price_sticky_wrap {top: 0;} .self_wrap .price_sticky_wrap .sub_header {position: relative; top: 0; padding-bottom: 2.4rem; margin-bottom: 0;} .self_wrap .price_sticky_wrap .sub_header::after {display: none;} .self_wrap .price_sticky_wrap .price_filter {top: 0;} .self_wrap .price_sticky_wrap .price_filter::after {top: unset; bottom: -12px;} /* price list */ .card_price_list {border: none; border-radius: 1rem;} .card_price_list + .card_price_list {margin-top: 1.6rem;} .card_price_list label {padding: 2rem 2.4rem; border: 1px solid var(--n-gray-200); border-radius: 1rem;} .card_price_list input[type="radio"] {display: none;} .card_price_list input[type="radio"]:checked + label {border: 2px solid var(--n-gray-900); box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;} .card_price_list .head {font-size: 1.5rem; font-weight: 500;} .card_price_list .content_group {flex-direction: column; margin-top: 1rem;} .card_price_list .detail {width: 100%; margin-bottom: 1rem; font-size: 1.3rem; color: var(--n-gray-900);} .card_price_list .text li {position: relative; display: inline-block;} .card_price_list .text li:not(:first-child) {padding-left: 1rem; margin-left: 1rem;} .card_price_list .text li:not(:first-child)::before {content: ''; position: absolute; top: 50%; left: 0; transform: translateY(-50%); display: block; width: 1px; height: 10px; background-color: var(--n-gray-300);} .card_price_list .detail .ref {padding-top: .5rem; font-size: 1.3rem; font-weight: 400; color: var(--n-gray-400);} .card_price_list .price {font-size: 1.8rem; 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 h2 {} .order_list_wrap .order_list, .order_box {padding: 1.6rem; border: 1px solid var(--n-gray-200); border-radius: .5rem;} /* .order_box */ .order_list_wrap .order_list.type_flex, .order_box.type_flex {display: flex; flex-direction: column;} .order_list_wrap .order_list li {padding: .8rem 0; line-height: 1.75; word-break: keep-all;} .order_list_wrap .order_list .text {word-break: break-all;} .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-900); word-break: break-all;} .order_list .text_flex {display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: .5rem;} .order_list .box_guide {margin-top: 1rem;} .order_list .box_guide .row + .row {padding-top: 1rem;} /*------------------------------------------- -- applyComplArea(접수완료 - step_7) -------------------------------------------*/ .applyComplArea {} .applyComplArea .img_wrap {margin-bottom: 1.6rem;} .applyComplArea .img_wrap img {width: 6rem; filter: var(--n-filter-primary);} .applyComplArea h2 {margin-bottom: 2rem; font-size: 1.8rem; font-weight: 500;} .applyComplArea .box_guide {} .applyComplArea .box_guide .text_group_ref {font-size: 1.3rem; word-break: keep-all;} /*********************************************************************************************************************** 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-600);} .form_notice .list_dot li::before {background-color: var(--n-gray-600);} .input_flex {display: flex; align-items: center; gap: .8rem;} .input_flex input {flex: 1;} .input_flex button {height: 4.8rem; padding: 0 1.6rem; font-size: 1.4rem;} /* label */ .n_form_label {font-size: 1.4rem; padding: .5rem 0 .8rem 0; margin: 0; color: var(--n-gray-900);} .n_check_label {font-size: 1.4rem; padding-left: .8rem; color: var(--n-gray-800);} /* checkbox - terms */ .form_check_icon {padding-left: 0; margin-bottom: 0;} .form_check_icon .n_check_label {position: relative; padding-left: 2.8rem;} .form_check_icon input[type="checkbox"] + label span {position: absolute; top: 50%; left: 0; display: inline-block; width: 25px; height: 25px; vertical-align: top; cursor: pointer; transform: translateY(-50%); background: url(../svg/check_small.svg) no-repeat center center; background-size: 100%; background-position: 0 0; filter: invert(92%) sepia(0%) saturate(1214%) hue-rotate(153deg) brightness(88%) contrast(75%);} .form_check_icon input[type="checkbox"]:checked + label span {filter: invert(11%) sepia(0%) saturate(11%) hue-rotate(192deg) brightness(91%) contrast(92%);} /* timer */ .form_timer {position: relative;} .form_timer .time {position: absolute; top: 50%; right: 1.6rem; transform: translateY(-50%); font-size: 1.4rem; font-weight: 500; color: var(--n-primary);} /*------------------------------------------- -- list -------------------------------------------*/ .list li {position: relative;} .list li + li {margin-top: .8rem;} .list li.ref {margin-top: .25rem; padding-left: 1rem;} .list_dash li {position: relative; padding-left: 1rem;} .list_dash li:before {content: ""; position: absolute; top: 10px; left: 0; display: block; width: 5px; height: 1px; background-color: var(--n-gray-800);} .list_dash li.ref:before {display: none;} .list_dot li {position: relative; padding-left: 1rem;} .list_dot li + li {margin-top: .8rem;} .list_dot li.ref {margin-top: .25rem;} .list_dot li:before {content: ""; position: absolute; top: 8px; left: 0; display: block; width: 3px; height: 3px; border-radius: 100%; background-color: var(--n-gray-800);} .list_dot li.ref:before {display: none;} .list_ico li {position: relative; display: flex; gap: .3rem; padding-left: 0;} .list_ico li:before {content: ""; display: none;} .list_ico li + li {margin-top: .8rem;} .list_ico li.ref {margin-top: .25rem;} .list_ico li.ref ul li+li {margin-top: .25rem;} .select_list_area {} .select_list {gap: 1.6rem 0;} .select_list li {position: relative; text-align: center;} .select_list li a {display: inline-block; width: 100%; height: 100%; font-size: 1.2rem; color: var(--n-gray-800);} .select_list li a.on {font-weight: 500; color: var(--n-gray-900);} .select_list li a.on .img_wrap {border: 2px solid var(--n-primary); box-shadow: var(--n-primary-shadow) 0px 0px 0px 3px;} .select_list li a .img_wrap {width: 5rem; height: 5rem; margin: 0 auto; border: 1px solid #e6e6e6; border-radius: 1rem; overflow: hidden;} .select_list li a .img_wrap img {width: 100%; height: 100%; object-fit: cover;} .select_list li a span {display: inline-block; margin-top: .5rem;} /*------------------------------------------- -- table -------------------------------------------*/ .table_board {display: block; width: 100%; border-top: 1px solid var(--n-gray-900); font-size: 1.4rem;} .table_board tbody {display: inline-block; width: 100%;} .table_board tr {display: grid; grid-template-columns: auto; align-items: start; width: 100%; padding: 1.6rem 0; border-bottom: 1px solid var(--n-gray-200);} .table_board th {width: 100%; height: 100%; padding-bottom: 1rem; font-weight: 500; color: var(--n-gray-900);} .table_board td {width: 100%;} .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 #e6e6e6;} .table_board.type2 th {width: auto; min-width: unset; padding: 1rem; border: 1px solid #e6e6e6; 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 #e6e6e6;} /* 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: .5rem;} .box_title {font-size: 1.4rem; font-weight: 500; color: var(--n-gray-900); margin-bottom: 1rem;} .box_outline {padding: 1.6rem; border: 1px solid var(--n-gray-200);} .box_outline_title {padding-top: .8rem; font-size: 1.4rem; color: var(--n-gray-800);} .box_outline_text {padding-top: .8rem; font-size: 1.1rem; color: var(--n-gray-400);} .box_outline_icon img {width: 4rem;} .box_form {padding: 1rem 0;} .box_form .inner {display: flex; flex-direction: column; justify-content: center; gap: 1.6rem;} .box_form .inner .img_wrap {width: 100%; max-width: 340px; margin: 0 auto;} .box_form .inner .img_wrap + div {width: 100%;} .box_form img {width: 100%; height: auto;} .box_form .title {padding-bottom: 1.6rem; font-size: 1.4rem; font-weight: 700; color: var(--n-primary);} .box_guide + .form_wrap {margin-top: 3.2rem;} .box_form .btn_group {background-color: transparent;} .box_cardlist {overflow-y: auto; padding-top: 2.4rem; border-radius: 0; background-color: var(--n-gray-50);} .box_cardlist .inner {padding-bottom: 10.4rem;} .box_list {padding: 1.6rem; background-color: var(--n-gray-50);} .box_guide {padding: 2rem; background-color: var(--n-gray-50);} .box_guide .title {padding-bottom: 1rem; font-size: 1.4rem; font-weight: 500; color: var(--n-gray-900);} .box_guide .text {padding: .8rem 0; font-size: 1.4rem; color: var(--n-gray-800);} .box_guide .img_box {width: 100%; max-width: 180px; height: 230px; border: 1px solid var(--n-gray-300); border-radius: 5px 5px 0 0;} .img_box#imgKeypad { background: no-repeat center/100% url(../img/IMEI_guide01.jpeg);} .img_box#imgPhoneInfo { background: no-repeat bottom/100% url(../img/IMEI_guide02.jpeg);} .box_guide .text_group_title {font-size: 1.5rem; font-weight: 700; margin-bottom: 1.6rem;} .box_guide .text_group_ref {font-size: 1.4rem;} .box_green {height: 100%; padding: 1.6rem; background-color: rgba(36, 150, 181, .04);} .box_green .title {font-size: 1.4rem; font-weight: 700;} .box_light {height: 100%; padding: 1.6rem; background-color: var(--n-gray-50);} .box_light .title {font-size: 1.4rem; font-weight: 700;} /*------------------------------------------- -- button -------------------------------------------*/ button {border-radius: 5px;} /* 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 {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 {pointer-events: none; border-color: var(--n-gray-400); background-color: var(--n-gray-200); color: var(--n-gray-400); box-shadow: inset var(--n-gray-400) 0px 0px 0px .08rem; opacity: 1;} /* .n_btn_outline_gray.disabled {border-color: var(--n-gray-300); color: var(--n-gray-700);} */ /* btn wrap */ .btn_wrap {margin-top: 2.4rem;} .btn_group {padding: 1rem 0;} .btn_group.type_flex {display: flex; padding: 0;} .btn_group.type_flex > * {flex: 1;} /* .fixed-bottom {z-index: 1029;} */ .sticky-bottom .btn_group, .fixed-bottom .btn_group {border-top: 1px solid var(--n-gray-200); background-color: #fff;} .m_template .fixed-bottom .btn_group {max-width: 475px; margin: 0 auto;} /* 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_lightgray {background-color: var(--n-gray-200); color: var(--n-gray-600);} .n_btn_lightgray:hover {background-color: #eaeaea; color: var(--n-gray-700);} .n_btn_darkgray {background-color: var(--n-gray-600); color: #fff;} .n_btn_darkgray:hover {background-color: var(--n-gray-500); color: #fff;} .n_btn_dark {background-color: var(--n-gray-900); color: #fff;} .n_btn_dark:hover {background-color: var(--n-gray-800); color: #fff;} .n_btn_outline_primary {background-color: transparent; border: 1px solid var(--n-primary); color: var(--n-primary);} .n_btn_outline_primary:hover {color: var(--n-primary);} .n_btn_outline_gray {background-color: transparent; border: 1px solid var(--n-gray-300); color: var(--n-gray-600);} .n_btn_outline_gray:hover {color: var(--n-gray-600);} .n_btn_outline_dark {background-color: transparent; border: 1px solid var(--n-gray-900); color: var(--n-gray-900);} .n_btn_outline_dark:hover {color: var(--n-gray-900);} .n_btn_info {background-color: var(--n-gray-200); color: var(--n-gray-800);} .n_btn_info:hover {background-color: var(--n-gray-200); color: var(--n-gray-800); border: none;} .btn_underline {height: auto; padding: 0; font-size: 1.3rem; color: var(--n-gray-400); text-decoration: underline; vertical-align: middle; background-color: transparent;} .btn_underline:hover {color: var(--n-gray-400);} .btn_text_primary {position: absolute; top: 50%; transform: translateY(-50%); right: 10px; font-size: 1.4rem; font-weight: 500; background-color: transparent; color: var(--n-primary);} .btn_down {position: relative; height: 3rem; padding: 0 1rem 0 3rem; font-size: 1.4rem; background-color: transparent; border: 1px solid var(--n-gray-300); border-radius: 1rem; color: var(--n-gray-600);} a.btn_down {display: inline-block; line-height: 3rem;} .btn_down::before {content: ''; background: url(../svg/download.svg) no-repeat center/100%; position: absolute; top: 50%; left: 1rem; transform: translateY(-50%); display: inline-block; width: 1.5rem; height: 1.5rem; filter: invert(45%) sepia(8%) saturate(80%) hue-rotate(21deg) brightness(96%) contrast(87%);} .btn_down:hover {color: var(--n-gray-600);} /* button company */ .n_btn_img#thePay {background: url(../img/thePay_white.png) no-repeat center center; background-size: contain; background-color: #061E4F;} .btn_kakao {display: inline-block; padding: 1rem 1.6rem; font-size: 1.4rem; font-weight: 700; background-color: #FAE700; border-radius: 1rem; color: #452120;} .btn_kakao:hover {color: #452120;} /* button size */ .n_btn_lg {width: 100%; height: 5rem; font-size: 1.6rem; font-weight: 500; border-radius: 5px; text-align: center;} a.n_btn_lg {display: inline-block; line-height: 5rem;} .n_btn_lg.w340 {max-width: 340px;} .n_btn_lg.w260 {max-width: 260px;} .n_btn_m {width: 100%; height: 4.8rem; max-width: 340px; font-size: 1.6rem; font-weight: 500; border-radius: 5px; text-align: center;} a.n_btn_m {display: inline-block; line-height: 4.8rem;} .n_btn_s {width: 100%; height: 4.8rem; font-size: 1.5rem; border-radius: 5px; text-align: center;} a.n_btn_s {display: inline-block; line-height: 4.8rem;} .n_btn_xs {max-width: 120px; height: 3.5rem; padding: 0 1rem; font-size: 1.4rem; border-radius: 5px; text-align: center;} a.n_btn_xs {display: inline-block; line-height: 3.5rem;} .n_btn_auto {height: 3rem; padding: 0 1rem; font-size: 1.3rem; border-radius: 5px; text-align: center;} a.n_btn_auto {display: inline-block; line-height: 3rem;} .oval {border-radius: 100px;} /* btn style */ .btn_link_ico {position: relative; display: inline-block; padding: 0; font-size: 1.4rem; font-weight: 500; color: var(--n-gray-900); background-color: transparent; vertical-align: middle;} .btn_link_ico::after {background: url(../svg/chevron-right.svg) no-repeat center/100%; content: ""; display: inline-block; width: 1.2rem; height: 1.2rem; margin-left: .4rem;} .btn_link_ico:hover {color: var(--n-gray-900);} /* icon */ .icon_help {width: 14px; height: 14px; padding: 0; margin-left: .4rem; background: url(../svg/question-circle-fill.svg) no-repeat center center; background-size: 100%; background-position: 0 0; filter: invert(88%) sepia(18%) saturate(18%) hue-rotate(17deg) brightness(93%) contrast(84%);} /* 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; font-size: 1.4rem; color: var(--n-gray-600); border: 1px solid var(--n-gray-300); border-radius: 5px; background-color: transparent; word-break: keep-all;} .select_btn {justify-content: center;} .select_btn_t2 {justify-content: space-between;} .select_btn_lg {padding: 2rem 1rem;} .btn-check + .select_btn:hover, .btn-check + .select_btn_t2:hover {color: var(--n-gray-600); border: 1px solid var(--n-gray-300); background-color: transparent;} .btn-check:checked + .select_btn, .btn-check:checked + .select_btn_t2, .select_btn.on {font-weight: 600; color: var(--n-gray-900); border: 1px solid var(--n-gray-900); box-shadow: inset var(--n-gray-900) 0px 0px 0px .08rem;} /* selector */ select.select_box::-ms-expand {display: none;} .select_box { position: relative; width: auto; padding: 1rem 2.4rem 1rem 1rem; font-size: 1.4rem; font-weight: 500; border: 1px solid #e6e6e6; border-radius: 1rem; color: var(--n-gray-900); background: url(../svg/chevron-down.svg) no-repeat; background-position: 90% 50%; background-size: 10px; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .select_box + .select_box {margin-left: .5rem;} .select_box::after {background: url(../svg/chevron-down.svg) no-repeat center/100%; content: ""; position: absolute; top: 50%; transform: translateY(-50%); right: 1rem; display: inline-block; width: 1rem; height: 1rem; filter: invert(25%) sepia(98%) saturate(9%) hue-rotate(329deg) brightness(100%) contrast(95%);} /*------------------------------------------- -- badge -------------------------------------------*/ .badge_wrap {display: flex; flex-wrap: wrap; gap: .5rem; width: 100%; margin-bottom: .5rem; border-radius: .3rem; overflow: hidden;} .badge_wrap .badge {padding: .5rem .8rem; font-size: 1.2rem; font-weight: 500; border-radius: 10rem;} /* .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: #FAD9EA; border: 1px solid #FAD9EA; color: var(--n-primary);} .badge_red {background-color: #DB2C00; border: 1px solid #DB2C00; color: #fff;} .badge_purple {background-color: #8600DB; border: 1px solid #8600DB; color: #fff;} .badge_green {background-color: #2E862D; border: 1px solid #2E862D; color: #fff;} .badge_yellow {background-color: #e6c91a; border: 1px solid #e6c91a; color: #fff;} .badge_blue {background-color: #004FDB; border: 1px solid #004FDB; color: #fff;} .badge_dark {background-color: var(--n-gray-900); color: #fff;} .badge_primary-line {background-color: transparent; border: 1px solid var(--n-primary); color: var(--n-primary);} .badge_black-line {background-color: transparent; border: 1px solid var(--n-gray-900); color: var(--n-gray-900);} .badge_red-line {background-color: transparent; border: 1px solid #DB2C00; color: #DB2C00;} .badge_purple-line {background-color: transparent; border: 1px solid #8600DB; color: #8600DB;} .badge_green-line {background-color: transparent; border: 1px solid #2E862D; color: #2E862D;} .badge_yellow-line {background-color: transparent; border: 1px solid #e6c91a; color: #e6c91a;} .badge_blue-line {background-color: transparent; border: 1px solid #004FDB; color: #004FDB;} /*------------------------------------------- -- text -------------------------------------------*/ h1 {font-size: 2.2rem; font-weight: 700; color: var(--n-gray-900);} h2 {font-size: 1.5rem; font-weight: 700; color: var(--n-gray-900); margin-bottom: 1.2rem;} .breadcrumb {font-size: 1.2rem; 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.2rem;} .text_default_color {color: var(--n-gray-700);} .text_dark_color {color: var(--n-gray-900);} .text_light_color {color: var(--n-gray-400);} .text_primary_color {color: var(--n-primary);} .text_bold {font-weight: 700;} .text_semibold {font-weight: 500;} .text_light {font-weight: 400;} .text_info {margin-top: .5rem; font-size: 1.3rem;} .ellipsis {overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} /*------------------------------------------- -- step -------------------------------------------*/ .step {display: flex; flex-direction: column; justify-content: space-between; gap: 4rem;} .step_item {position: relative; display: flex; flex-direction: column; align-items: center; flex: 1; text-align: center;} .step_item + .step_item::before {content: ""; position: absolute; top: -3rem; left: 50%; transform: translateX(-50%); display: block; width: 1.2rem; height: 1.2rem; background: url(../svg/chevron-down.svg) center/100% no-repeat; filter: invert(83%) sepia(0%) saturate(30%) hue-rotate(177deg) brightness(83%) contrast(81%);} .step_item .img_wrap {position: relative; width: 10rem; height: 10rem; background-color: var(--n-gray-100); border-radius: 1rem; } .step_item .img_wrap img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 6rem; height: 6rem;} .step_item .title {margin-top: 1rem; font-size: 1.4rem;} /*------------------------------------------- -- advice -------------------------------------------*/ .advice {display: flex; flex-direction: column; gap: 3rem;} .advice_item {display: flex; gap: 1.6rem; font-size: 1.4rem; color: var(--n-gray-900); word-break: keep-all;} .advice_item .img_wrap {position: relative; flex-basis: 5.6rem; min-width: 5.6rem; height: 5.6rem;} .advice_item .img_wrap img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: auto; height: 5rem;} .advice_item .title {margin-bottom: .8rem; font-size: 1.4rem; font-weight: 500; color: var(--n-gray-900);} .advice.type2 .advice_item {flex-direction: column; gap: 1.2rem;} .advice.type2 .advice_item .img_wrap {flex-basis: auto; width: 4rem; height: 4rem;} /*------------------------------------------- -- space -------------------------------------------*/ .pt16 {padding-top: 1.6rem;} .pt24 {padding-top: 2.4rem;} .pb16 {padding-bottom: 1.6rem;} .pb24 {padding-bottom: 2.4rem;} .pb_fixbtn {padding-bottom: 8rem;} /*------------------------------------------- -- modal -------------------------------------------*/ .modal-dialog {width: calc(100% - 4rem); max-width: 435px; margin: 0 auto;} .modal-content {border-radius: 1rem;} .modal-header, .modal-body, .modal-footer {padding: 2rem 2rem;} .modal-body, .modal-footer {border: none;} .modal-header {border-color: #ebebeb;} .modal-body .inner {max-height: 70vh; overflow-y: auto;} .modal-title {font-size: 1.8rem; font-weight: 500; color: var(--n-gray-900);} .modal_text {} .modal_text li {position: relative; padding-left: 1.6rem; font-size: 1.4rem; color: var(--n-gray-800);} .modal_text li::before {content: ''; position: absolute; top: 8px; left: 3px; display: block; width: 3px; height: 3px; border-radius: 100%; background-color: var(--n-gray-800);} .modal_text li + li {margin-top: 1rem;} .modal_text_depth {padding: 1rem 0 0 1rem;} .modal_text_depth li + li {padding-top: .8rem;} .table_terms {min-width: 600px; vertical-align: middle; font-size: 1.1rem;} .modal .table-responsive {padding-bottom: 1.25rem;} /*------------------------------------------- -- swiper -------------------------------------------*/ .swiper {position: relative;} /* overflow: visible; */ .swiper .swiper-wrapper, .swiper-slide {width: auto;} .filter input[type="text"], .filter input[type="date"], .filter select.form-select {height: auto; padding: .5rem .8rem; font-size: 1.4rem;} .filter input[type="date"]::before {content: attr(data-placeholder); width: 100%; color: var(--n-gray-400);} .filter input[type="date"]:focus::before, .filter input[type="date"]:valid::before {display: none;} .viewlist_wrap {width: 100%; white-space: nowrap; font-size: 1.4rem;} .viewlist_wrap thead td {padding: .8rem .5rem; color: var(--n-gray-900);} .viewlist_wrap tbody td {padding: .8rem .5rem; color: var(--n-gray-800);} /*********************************************************************************************************************** H. etc ***********************************************************************************************************************/ /* bg space */ .bg_space10 {width: 100%; height: 1rem; background-color: var(--n-gray-100); font-size: 0;} /*responsive */ .for_tablet, .for_pc {display: none;} /* error */ .error_wrap {max-width: 360px; padding: 10rem 0; word-break: keep-all; text-align: center;} .error_wrap img {width: 40%; min-width: 140px;} .error_wrap h1 {margin-bottom: 2rem; font-size: 1.8rem;} .error_wrap p {font-size: 1.4rem; 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: auto;} /*********************************************************************************************************************** I. Media Query ***********************************************************************************************************************/ @media screen and (min-width: 992px) { /* ------------------------------------------- -- desktop (992px~) ------------------------------------------- */ /* document */ .doc_wrap {} .doc_head {margin-bottom: 48px; padding-top: 50px;} .doc_head h2 {font-size: 20pt; margin-bottom: 0;} .doc_head_logo {height: 45px;} .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 ;} .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;} } /* @media screen and (min-width: 576px) { ------------------------------------------- -- mobile (576px~) ------------------------------------------- ** D. Main ** -- main banner(carousel) .main_banner_carousel {height: calc(100vw - 230px); min-height: 380px; max-height: 480px;} .carousel-item img {width: auto; height: 100%;} ** B. Layout ** -- container .container {max-width: none;} ** E. Sub ** -- product layout .product_banner_area {margin: 0;} .product_tab {margin: 0;} .product_photo .swiper-slide {height: 30rem;} } @media screen and (min-width: 768px) { ------------------------------------------- -- tablet (768px~) ------------------------------------------- ** B. Layout ** -- container .container { max-width: none; } ** D. Main ** -- main banner(carousel) .main_banner_carousel {height: 100%; min-height: 320px; max-height: 420px;} .carousel-item img {width: auto; height: 100%;} .carousel-item img {width: 100%; height: auto;} .carousel_mobile, .for_mobile {display: none;} .carousel_tablet, .for_tablet {display: inline-block;} * E. Sub ** -- thumb card .thumb_list_item {width: 50%;} -- product layout .product_banner_area .thumb_card_img {max-height: 280px; height: calc(100vw - 60vw);} .card_list.phone_list {display: flex; gap: 0 1.6rem;} .card_list.phone_list .card_list_item {flex: 0 0 auto; width: calc(50% - 0.8rem);} -- store list .store_list_item {flex-direction: row; align-items: center; padding: 2rem 1.6rem;} .store_desc {padding-top: 0; padding-left: 2rem;} } @media screen and (min-width: 992px) { ------------------------------------------- -- desktop (992px~) ------------------------------------------- ** A. Default ** input[type="text"], input[type="password"], input[type="number"], input[type="date"], input[type="email"], textarea, select.form-select {width: 100%; height: 4.8rem; padding: 0 1.6rem; font-size: 1.6rem;} ** B. Layout ** -- container .container, .container-lg, .container-md, .container-sm { max-width: 960px; } -- header .header .header_content {height: 7.5rem; align-items: center;} .header .logo img {max-height: 50px;} .header_top {display: block;} .header_content .icons_item_btn {height: 3.5rem; padding: 0 2rem; margin-left: 1rem; font-size: 1.6rem;} .header_content .moblie_wrap {display: none;} .header_content .pc_wrap {display: flex;} -- sub header .sub_header {top: 11.1rem; padding-top: 2rem; padding-bottom: 1.6rem; margin-bottom: 6.4rem;} .body_wrap_agent .sub_header {top: 0;} .sub_header_step li {font-size: 1.5rem;} .sub_header_step li + li {padding-left: 1.6rem;} .sub_header_step li img {width: 2.2rem; height: 2.2rem;} -- fullmenu .full_menu_body {padding-top: 81px;} .full_menu_sign .pc_wrap {display: block;} .full_menu_sign .mob_wrap {display: none;} .full_menu_content {padding: 3.6rem 0;} .full_menu_content .submenu_list {margin-bottom: 4rem;} .full_menu_content .sub_tab_list li {flex: none;} .full_menu_content .sub_tab_link {padding: 1rem 1.6rem; font-size: 1.4rem;} .full_menu_content .menu_list {display: flex; flex-wrap: wrap; gap: 6rem 0; margin: 0 -1.8rem 0 -1.8rem;} .full_menu_content .menu_list li {width: 33.33333%; padding: 0 1.8rem 0 1.8rem;} .full_menu_content .menu_list li a {display: inline-block; width: 100%; font-size: 2rem; border-bottom: 2px solid var(--n-gray-900); text-decoration: none;} .full_menu_content .menu_list li a:hover {border-color: var(--n-primary);} .full_menu_content .menu_list li .sub_list li {width: 100%; padding: .8rem 0;} .full_menu_content .menu_list li .sub_list li a {font-size: 1.6rem; border-bottom: 0; text-decoration: none;} -- body .body_wrap {padding-top: 151px;} .body_wrap_agent {padding-top: 80px;} -- nav .gnb_wrap {display: block;} -- footer footer {margin-top: 8rem;} .footer_top {padding: 4rem 0 0 0;} footer .logo {height: 5.5rem; margin-bottom: 1.2rem;} footer .company {font-size: 1.4rem;} footer .company_info {width: 65%; max-width: 570px; font-size: 1.3rem; gap: .8rem 0;} footer .company_info li {width: auto;} footer .company_info li:first-child {width: 100%;} footer .company_info li:nth-child(odd)::before {content: '\007C'; padding: 0 .5rem; font-size: 1.3rem;} footer .company_info li:first-child::before {content: ''; padding: 0;} footer .sns_wrap {top: 4rem;} footer .sns_list {gap: 1.6rem;} footer .sns_list li {width: 4.2rem; height: 4.2rem;} footer .sns_list li a {width: 2.4rem; height: 2.4rem;} .footer_bottom {padding: 3.6rem 0 4rem 0;} footer .policy_list {font-size: 1.3rem; gap: 0 2.4rem;} footer .policy_list a {font-weight: 400;} footer .copyright {font-size: 1.1rem;} -- preview bottom .preview_header {max-width: 1040px; padding: 3rem 0; margin: 0 auto;} .preview_header .head {font-size: 2rem;} .preview_header .n_btn_icon {width: 2.5rem; height: 2.5rem;} .preview_body {max-width: 1040px; padding: 3rem 0 6rem 0; margin: 0 auto;} .preview_body .price_info {margin-left: 1rem;} .preview_body .price_info .title {font-size: 1.6rem;} .preview_body .order_list {margin-left: 3.6rem; padding: 0;} .product_bottom_preview {padding-top: 4rem; margin-bottom: -8rem;} .product_bottom_preview .preview_header .content {flex-direction: row;} .product_bottom_preview .preview_header .preview_btn {min-width: 280px;} .product_bottom_preview .preview_header .head {font-size: 1.6rem; margin-bottom: 0;} .product_bottom_preview .preview_header .head span {font-size: 2rem;} .product_bottom_preview .preview_body {padding: 0 0 6rem 0;} .product_bottom_preview .preview_body .order_list {margin-left: 0; padding: 0 2rem;} .product_bottom_preview .preview_body .order_list + .order_list {margin-top: 0; margin-left: 0; padding-top: 0; border-top: none; border-left: 1px solid #e6e6e6;} -- flex .flex_row {margin: 0 -1.2rem;} .flex_row > * {padding: 0 1.2rem;} ** C. login ** .login_form {padding: 0 5rem;} ** D. Main ** .main_content {padding-top: 11.1rem;} .sec_title {font-size: 3rem; margin-bottom: 3.2rem;} -- main banner .main_banner_carousel {height: 380px; max-height: unset;} .carousel-item img {width: auto; height: 100%;} .carousel-item img {width: auto; height: 100%;} .main_banner .carousel-indicators [data-bs-target] {width: 10px; height: 10px;} .carousel-control-next-icon, .carousel-control-prev-icon {width: 5.6rem; height: 5.6rem;} .carousel_mobile, .carousel_tablet, .for_mobile, .for_tablet {display: none;} .carousel_pc, .for_pc {display: inline-block;} .none_pc {display: none;} -- main service area .main_service_area {padding: 4rem 0; margin-bottom: -8rem;} .main_service_area .title {margin-bottom: 3.2rem; font-size: 2.4rem;} .main_service_area .service_group {padding: 3.2rem; border-radius: 2rem;} .service_link .img_wrap {flex-basis: 10rem; min-width: 10rem; height: 10rem;} .service_link .img_wrap img {width: 5.6rem;} .service_link .text {padding-top: 1rem; font-size: 2rem;} -- main product list .main_product_list {padding: 8rem 0;} .main_product_list .tab_line_wrap {margin-bottom: 4rem} .main_product_list .tab_line_wrap .tab_line {gap: 0 2.4rem;} .main_product_list .tab_line_wrap .tab_line_link {font-size: 2.4rem;} .rate_card_list {margin: 0 -12px 0 -12px;} .rate_card_item {width: 33.33333%; padding: 0 12px 0 12px;} .rate_card {padding: 3.6rem 3rem; gap: 3.6rem 0;} .rate_card_title {font-size: 2rem;} .rate_card_title .title_label {margin-bottom: 1.2rem;} .rate_card_title .title_label span {font-size: 1.2rem;} .rate_card_title .title_label span + span {margin-left: .4rem} .rate_card_info li {font-size: 1.8rem;} .rate_info_ico::before {width: 2rem; height: 2rem; margin-right: .8rem;} .rate_card_price {font-size: 1.8rem;} .rate_card_price .discount {font-size: 2.4rem;} .rate_card_price .origin {font-size: 1.8rem;} .rate_card_bottom .rate_btn {height: 6rem; font-size: 2rem; border-radius: 1rem;} .phone_card_list {margin: 0 -12px 0 -12px;} .phone_card_item {width: 33.33333%; padding: 0 12px 0 12px} .phone_card {flex-direction: column; padding: 3.2rem; border-radius: 2rem;} .phone_card_img {width: 100%; max-width: 250px; height: auto; max-height: 250px; margin: 0 auto;} .phone_card_info {padding-left: 0; padding-top: 2rem; font-size: 1.6rem;} .phone_card_title {font-size: 2rem;} .phone_card_title .title_label {margin-right: .8rem;} .phone_card_price {flex-direction: row; align-items: center; margin-top: 3.2rem; font-size: 1.8rem;} .phone_card_price .ref {padding-left: .5rem; font-size: 1.2rem;} -- main event area .main_event_area {padding: 8rem 0;} .main_event_area .thumb_card_img.event {padding-top: 32.5%;} .main_event_area .thumb_card_img.event {height: calc(100vw - 760px); max-height: 250px;} -- main review area .main_review_area {padding: 6rem 0;} .review_card {border-radius: 1rem;} .review_card_img {border-top-left-radius: 1rem; border-top-right-radius: 1rem;} .review_card_content {padding: 2.4rem;} .review_content_text .title {margin-bottom: .8rem; font-size: 1.6rem;} .review_content_text .desc {font-size: 1.4rem;} .review_more_mobile {display: none;} .review_more_pc {display: block;} -- main point area(현재 마블에서만 사용중) .main_point_area {padding: 6rem 0;} .keyword_box {padding: 4rem 2rem; border-radius: 1rem;} .keyword_content {max-width: 725px; margin: 0 auto; gap: 2.4rem 1.6rem;} .keyword {padding: 1.4rem 2.4rem; font-size: 1.8rem;} -- main cs area .main_cs_area {padding: 3rem 0; margin-bottom: -8rem;} .main_cs_group {display: flex; gap: 6.4rem; flex-direction: row;} .notice_box {width: 50%;} .notice_box .title {margin-bottom: 3.2rem; font-size: 2.4rem} .notice_content {gap: 2rem; font-size: 1.6rem;} .notice_content li + li {margin-top: 1.2rem;} .notice_content li a:first-child {font-size: 1.6rem;} .notice_content li .date {display: inline;} .notice_title {gap: 2.4rem;} .notice_title span {font-size: 1.8rem;} .call_cs_box {width: 50%; padding: 3.2rem; border-radius: 2rem;} .call_cs_content p {font-size: 1.4rem;} .call_cs_content .cs_desc {flex-direction: column; margin-bottom: 1.6rem;} .call_cs_content .cs_desc > * {font-size: 3.6rem;} .call_cs_content .cs_desc .title {font-size: 2.4rem;} .call_cs_content .cs_btn {gap: 1.6rem;} .call_cs_content .cs_btn > a {height: 4.5rem; line-height: 3.5rem; font-size: 1.6rem;} .more_con_area {flex-direction: row; gap: 2.4rem; margin-top: 2.4rem;} .more_con_area li {flex: 1;} .more_con_area li + li {margin-top: 0;} .more_con_card {font-size: 1.5rem;} .more_con_card .inner {padding: 1rem 1.6rem;} .more_con_card .more_con_card_ico {width: 4rem; height: 4rem;} .more_con_card .more_con_card_ico img {width: 2.4rem;} -- main swiper area .main_swiper_area {max-width: 960px; margin: 0 auto; padding: 0 2rem;} .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-pagination-bullet {width: 1rem; height: 1rem; margin: 0 1rem;} .main_swiper_area .swiper-pagination-bullet-active {width: 3.5rem;} .main_swiper_area .swiper-button-next, .main_swiper_area .swiper-button-prev {width: auto; height: 2.4rem;} .main_swiper_area .swiper-button-next:after, .main_swiper_area .swiper-button-prev:after {font-size: 2.4rem;} .main_swiper_area .swiper-button-prev, .main_swiper_area .swiper-rtl .swiper-button-next {left: 0;} .main_swiper_area .swiper-button-next, .main_swiper_area .swiper-rtl .swiper-button-prev {right: 0;} .main_product_list .main_swiper_area .swiper-slide {text-align: left;} .main_product_list .swiper-pagination {display: none;} ** E. Sub ** -- common .page_title {padding: 1rem 0; margin-bottom: 3.2rem;} .alert_wrap > * {font-size: 1.6rem;} .alert_img {padding: 1.6rem 0 1rem 0;} .alert_img span {width: 3.6rem; height: 3.6rem;} document .doc_wrap {} .doc_head {margin-bottom: 48px; padding-top: 50px;} .doc_head h2 {font-size: 20pt; margin-bottom: 0;} .doc_head_logo {height: 45px;} .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 ;} .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: 35px;} -- accordion style .acc_wrap .acc_header {font-size: 1.6rem;} .acc_wrap .acc_header .acc_header_link::after {right: 2.4rem; width: 1.5rem; height: 1.5rem;} .acc_wrap .acc_header.active .acc_header_link::after {right: 2.4rem; width: 1.5rem; height: 1.5rem;} type2 .acc_wrap.type2 .acc_header .acc_header_link {width: 1.5rem; height: 1.5rem;} -- board list .list_title button {font-size: 1.6rem;} .board_list {margin-top: 2.4rem;} .board_list li {padding: 2rem 2.4rem;} .board_list li .title, .board_list li .title a {font-size: 1.8rem;} .board_list li .title.ico {padding-right: 2rem;} .board_list li .title.ico::after {width: 1.6rem; height: 1.6rem;} .board_list li .detail_list li {font-size: 1.5rem;} .board_list li .detail_list li + li {padding-left: 1.2rem; margin-left: 1.2rem;} .board_list li.tb {flex-direction: row; align-items: center;} -- card list .card_list_wrap {padding-top: 2.4rem;} .card_list_item {font-size: 1.6rem;} .card_link {padding: 3.2rem; font-size: 1.6rem;} .card_link .title {font-size: 1.8rem;} .service_desc .title {padding-right: 2rem;} .service_desc .price {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 #e6e6e6;} -- thumb card .thumb_list_item {width: 33.33333333%;} .thumb_card_link {margin-bottom: 2.4rem;} .thumb_card_img {height: 200px; margin-bottom: 1rem; border-radius: 2rem;} .thumb_card_desc {padding: 2rem; font-size: 1.4rem;} .thumb_card_desc .title {margin-bottom: .5rem; font-size: 1.8rem;} -- tab .tab_box {margin-bottom: 3.2rem} .tab_box_link {padding: 2rem 0; font-size: 1.6rem;} .tab_box_list_t2 {gap: 10px 0;} .tab_box_list_t3 {gap: 1rem 1.6rem; padding-bottom: 3.2rem;} .tab_box_list_t3 .tab_line_link {font-size: 1.8rem;} .tab_box_oval {margin-bottom: 4rem;} .tab_box_oval .tab_list {gap: 1.6rem;} .tab_box_oval .tab_link {height: 4.5rem; line-height: 4.5rem; padding: 0 1.6rem; font-size: 1.6rem;} .sub_tab_list li {margin-right: 1rem;} .sub_tab_link {padding: 1rem 1.6rem; font-size: 1.5rem;} .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: 4.8rem;} .tab_login_list {border-radius: 1rem;} .tab_login_link {padding: .8rem; border-radius: 1rem; font-size: 1.6rem;} -- search .search_wrap {padding: 2rem 0;} -- product layout .card_list.phone_list .card_list_item {padding: 2.4rem 2rem; border-radius: 2rem;} .card_list.phone_list .img_wrap {width: 40%; min-width: 40%; max-height: 20rem;} .card_list.phone_list .content_group {margin-left: 2rem;} .card_list.phone_list .badge {font-size: 1.2rem;} .card_list.phone_list .title {font-size: 1.8rem;} .card_list.phone_list .price {margin-top: 0; font-size: 2.4rem;} .card_list.phone_list .detail {margin-bottom: 1rem; font-size: 1.4rem;} .product_select {padding-top: 4rem;} .product_select p {font-size: 1.6rem;} .product_select select {max-width: 8rem; min-width: 14.5rem; height: 45px; padding: 0 2.27rem 0 1.6rem; background-position: right 8% center;} .product_banner_area {padding-bottom: 5rem;} .product_banner_area .thumb_card_img {max-height: 380px; border-radius: 2rem;} .product_banner_area .swiper-pagination-bullet {width: .8rem; height: .8rem;} .product_search_acc .acc_item {padding: 2.4rem; border-radius: 1rem;} .product_search_acc .acc_header .acc_header_link {font-size: 2rem;} .product_search_acc .acc_header .acc_header_link::after { width: 2rem; height: 2rem;} .product_search_acc .acc_header.active .acc_header_link::after { width: 2rem; height: 2rem;} .product_search_acc .acc_content {margin-top: 3.2rem;} .items_search {padding: 0 2rem;} .items_search .items {flex-direction: row; align-items: center; gap: .5rem; padding-bottom: 2rem; margin-bottom: 2rem;} .items_search .items .title {min-width: 12rem; font-size: 1.6rem;} .items_search .items .input_group {margin-top: 0;} .items_search .btn_wrap { padding-top: 1rem;} .product_title_desc {font-size: 1.4rem; margin-top: 1rem;} .product_title .badge {font-size: 1.5rem;} .product_info_wrap {display: flex; flex-direction: row; margin-bottom: 6rem;} .product_img {width: 50%;} .product_detail {flex: 1 1 auto; padding-left: 4rem;} .product_photo_thumbs {display: block;} .product_photo .swiper-slide {height: 35rem;} .product_photo .swiper-slide img {width: 100%;} .product_color_select {gap: 0 1rem;} .product_color_select li {width: 4rem; height: 4rem;} .product_color_select input[type="radio"] + label {width: 3rem; height: 3rem;} .product_color_select input[type="radio"]:checked + label::before {width: 4rem; height: 4rem;} .product_rate_select {margin-bottom: 6rem;} .rate_select_box {padding: 2rem 2.4rem; border-radius: 1rem;} .rate_select_box .title {font-size: 1.6rem; -webkit-line-clamp: 1;} .rate_select_box .desc {font-size: 1.4rem;} .rate_select_box .price {font-size: 1.8rem;} -- rate layout .rate_list_wrap {padding-top: 2.4rem;} .product_select + .rate_list_wrap {padding-top: 1.6rem;} .card_list.rate_list .card_list_item {width: 50%; margin-bottom: 2.4rem;} .card_list.rate_list .card_rate_link {padding: 3.2rem;} .card_list.rate_list .content_group {flex-direction: row; margin-top: 2rem;} .card_list.rate_list .title {font-size: 1.8rem;} .card_list.rate_list .detail {margin-bottom: 0; font-size: 1.6rem;} .card_list.rate_list .desc li {} .card_list.rate_list .detail .ref {font-size: 1.4rem;} .card_list.rate_list .price {flex-shrink: 0; font-size: 2.4rem;} .card_list.rate_list .price .ref {font-size: 1.4rem;} .rate_info_wrap {padding-top: 2rem; margin-bottom: 3.6rem;} .rate_info .header_sub .badge {font-size: 1.5rem;} .rate_info .telco {font-size: 1.5rem;} .rate_info .header {margin-bottom: 2rem; font-size: 2.8rem;} .rate_info .content {padding: 4rem; flex-direction: row; align-items: center; border-radius: 2rem;} .rate_info .content .detail {width: 50%; padding-bottom: 0; margin-bottom: 0; border-bottom: 0; border-right: 1px solid #dfe4f2; font-size: 1.6rem;} .rate_info .detail .desc {display: flex; flex-direction: row; justify-content: center;} .rate_info .detail .desc li {flex-direction: column; width: 120px; margin-bottom: 0; margin-right: 0; text-align: center;} .rate_info .detail .desc .icon {width: 3.6rem; height: 3.6rem; margin-right: 0; margin-bottom: 1rem;} .rate_info .detail .ref {width: 360px; margin: 0 auto; padding-top: .5rem; font-size: 1.4rem; } .rate_info .price {width: 50%; text-align: center;} .rate_info .price p {width: 240px; margin: 0 auto; font-size: 2.8rem; text-align: right;} .rate_info .price .vat {font-size: 1.6rem; font-weight: 400;} .rate_info .price .ref {font-size: 1.6rem;} .rate_info .price button {max-width: 240px;} .rate_caption {margin-top: 2rem;} .rate_caption_list {display: flex; font-size: 1.4rem;} .rate_caption_list li {margin-bottom: 0;} .rate_caption_list li:not(:last-child) {margin-bottom: 0; padding-right: 4rem;} .rate_detail {padding-top: 4rem; margin-top: 4rem;} .rate_detail_depth {margin-bottom: 4rem;} .rate_detail_depth .title {margin-bottom: 1rem; font-size: 2rem;} .rate_detail_depth .desc {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;} -- event .event_board {font-size: 1.6rem;} .event_board .board_head {padding: 2rem 0;} .event_board .board_head .title {font-size: 2rem;} .event_board .board_content {padding: 4rem 2rem;} .thumb_card_img.event {max-height: 190px;} -- review .review_list_item {padding: 2.4rem 0;} .review_list_header {gap: 2.4rem; margin-bottom: 1rem;} .review_list_header .title {font-size: 2rem;} .review_list_header .review_info {gap: 2rem; font-size: 1.3rem;} .review_list_header .grade {gap: 0 .6rem;} .review_list_header .grade_icon {width: 1.3rem; height: 1.3rem;} .review_list_content {display: flex; gap: 1.6rem;} .review_list_content .desc {width: 100%; margin-bottom: 0; font-size: 1.5rem;} .review_list_content .img_wrap {width: 30%; height: 180px;} .grade_btn_wrap {gap: 0 .6rem;} .grade_btn_wrap .grade_btn {width: 3.2rem; height: 3.2rem;} -- qna .qna_tab_wrap {padding-top: 5.6rem;} .qna_tab {display: flex;} .qna_tab_link {font-size: 1.6rem;} .qna_acc_wrap {margin-top: 2.4rem;} .qna_acc_wrap .acc_header {font-size: 1.6rem;} .qna_acc_wrap .acc_header_link {padding: 2.4rem; padding-right: 5.6rem;} .qna_acc_wrap .acc_header .acc_header_link::after {transform: translateY(-50%); right: 2.4rem; width: 2.4rem; height: 2.4rem;} .qna_acc_wrap .acc_header.active .acc_header_link::after {right: 2.4rem; width: 2.4rem; height: 2.4rem;} .qna_acc_wrap .acc_content {padding: 2.4rem;} .qna_acc_wrap .acc_content_inner {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: 2rem 2.4rem; padding-right: 5.6rem; font-size: 1.8rem;} .notice_list_item::after {right: 2.4rem; width: 2.4rem; height: 2.4rem;} .notice_list_item .title {margin-bottom: 0; padding-right: 2rem; flex: 1;} .notice_list_item .date, .notice_list_item .event_date {font-size: 1.4rem;} .notice_list_item .no {display: block; padding-right: 2rem; color: var(--n-gray-600);} .notice_list_item .event_date {flex-direction: row; gap: 1.6rem;} .notice_board {font-size: 1.6rem;} .notice_board .board_head {padding: 2rem 0;} .notice_board .board_head .title {font-size: 2rem;} .board_head .date {font-size: 1.5rem;} .notice_board .board_content { padding: 4rem 2rem 6rem 2rem;} .board_page {font-size: 1.6rem;} .board_page .page_item {padding: 1.6rem 2.4rem;} .board_page .page_link {padding-left: 1.6rem;} 접수내역 리스트 .notice_list_item.order_item {padding: 2rem 1.6rem; padding-right: 0; font-size: 1.5rem;} .notice_list_item.order_item .title_status {font-size: 1.4rem;} .notice_list_item.order_item .text {flex-direction: row; gap: 1.6rem; font-size: 1.3rem;} .notice_list_item.order_item .btn_group {justify-content: flex-start;} .notice_list_item.order_item .btn_group > * {width: auto; max-width: 120px; min-width: 100px; } .notice_list_item.order_item .btn_group > .n_btn_xs {height: 3.5rem; font-size: 1.3rem;} .notice_list_item.order_item .btn_group > a.n_btn_xs {line-height: 3.5rem;} -- store list .store_list_item {padding: 2rem 2.4rem; font-size: 1.6rem;} .store_list_item .title {margin-bottom: 0; padding-right: 2rem; flex: 1;} .store_list_item .date {font-size: 1.4rem;} .store_map {height: 20rem; margin-bottom: 0;} .store_list {margin-top: 0;} .store_desc .ref {margin-top: .8rem;} .store_link .ref {margin-top: .8rem;} .store_card_link {padding: 2.4rem; min-height: 148px; font-size: 1.6rem; margin-bottom: 1.6rem;} .store_card_link .ref {font-size: 1.4rem;} -- online cs .table_board {font-size: 1.6rem;} .table_board tr {grid-template-columns: 240px 1fr;} .table_board th {padding: 2rem;} .table_board td {padding: 2rem 1.6rem;} .table_board .form_group {margin-bottom: 1.6rem;} .agree_group {margin-top: 3.2rem;} .agree_box {font-size: 1.5rem;} .agree_box .inner {padding: 2rem;} .agree_check {margin-top: 1rem;} -- pagination .pagination {margin-top: 3.6rem;} .page_icon {width: 1.6rem; height: 1.6rem;} .page_prev {margin: 0 1rem;} .page_next {margin: 0 1rem;} .page_link {height: 2.8rem; line-height: 2.8rem; margin: 0 .5rem; font-size: 1.6rem;} -- contact .company_img_wrap {height: 25rem; margin-top: -80px;} -- prepaid .charge_wrap .guide_area {font-size: 1.6rem;} .charge_wrap .guide_area .guide_cardlist > * {margin-bottom: 2.4rem;} -- mypage .my_info.joinInfo .header {padding-top: 2rem;} .my_info.joinInfo .header_top {flex-direction: row; align-items: center; margin-bottom: 2rem; font-size: 2rem;} .my_info.joinInfo .header_top .name {font-size: 2.4rem; color: var(--n-gray-900);} .my_info.joinInfo .header_top .apply_no {display: block; padding-top: 0; margin-top: 0; border-top: 0;} .my_info.joinInfo .header_bottom {font-size: 1.6rem;} .my_info.joinInfo .header_bottom ul {flex-direction: row;} .my_info.joinInfo .header_bottom ul li {display: list-item; width: 33.33333%; padding: 2.4rem; border-bottom: 0; border-right: 1px solid #e6e6e6; text-align: center;} .my_info.joinInfo .content_box ul li.btn_wrap {margin-top: auto;} .my_info.joinInfo .header_bottom ul li:last-child {border-right: 0;} .my_info.joinInfo .order_box {padding: 2.4rem;} .my_info.joinInfo .content_box {padding: 0 1.2rem; margin-bottom: 4.8rem;} .my_info.joinInfo .content_box .title_wrap {margin-bottom: 1.5rem;} .my_info.joinInfo .content_box .title_wrap h2 {margin-bottom: 0;} .my_info.joinInfo .content_box .title_wrap.type3 {flex-direction: row;} .my_info.joinInfo .content_box .title_wrap .ref {font-size: 1.4rem;} .my_info.joinInfo .content_box .title_wrap .amount_refresh {width: auto; font-size: 1.4rem;} .my_info.joinInfo .content_box .order_list li {padding: 1rem 1.6rem;} .my_info.joinInfo .content_box ul .title, .my_info.joinInfo .content_box ul .text {font-size: 1.5rem;} .my_info.joinInfo .content_box ul .rateplan {font-size: 2rem;} .my_info.joinInfo .content_box ul .btn_group .btn {min-height: 4rem; font-size: 1.4rem;} .my_info.joinInfo .content_box .amount_info {font-size: 1.6rem;} .my_info.joinInfo .content_box .amount_info .acc {font-size: 2rem;} .my_info.joinInfo .content_box .amount_info .ref {font-size: 1.3rem;} .my_info.joinInfo .charge_area {flex-direction: row;} .my_info.joinInfo .charge_area .total_info {height: 100%; padding-bottom: 0; margin-bottom: 0; padding-right: 1.2rem; margin-right: 1.2rem; border-bottom: 0; border-right: 1px solid #e6e6e6; font-size: 1.8rem;} .my_info.joinInfo .charge_area .total_info .amount {font-size: 3.2rem;} .my_info.joinInfo .charge_area .total_info .period {margin-top: 1rem; font-size: 1.4rem;} .my_info.joinInfo .charge_area .charge_info {margin-top: 0;} ** F. Self ** .self_wrap .form_wrap {width: 95%; max-width: 1040px; margin: 0 auto;} .self_wrap .form_wrap h2 {padding-bottom: 1.6rem; margin-bottom: 3.2rem; font-size: 2rem;} .self_wrap .order_list_wrap .form_wrap h2 {padding-bottom: 0; margin-bottom: 1.6rem;} .self_form_inner {padding: 0 2rem;} .self_wrap .form_group {display: flex; flex-wrap: wrap; flex-direction: row; align-items: center; margin-bottom: 2rem;} .self_wrap .form_group + .form_group {margin-top: 2rem;} .self_wrap .form_group .n_form_label {width: 18rem; min-width: 18rem;} .self_wrap .form_group .n_form_label + * {flex: 1;} .self_wrap .moveJoinArea .form_group .flex-fill {flex: 1 !important;} .self_wrap .form_group .n_form_label.w_auto {width: auto;} .self_wrap .form_group input[type="text"], .self_wrap .form_group input[type="password"], .self_wrap .form_group input[type="number"], .self_wrap .form_group input[type="date"], .self_wrap .form_group input[type="email"], .self_wrap .form_group select.form-select {min-width: 280px;} .self_wrap .form_group .form_notice {padding-left: 18rem;} #areaTerms {padding: 1.5rem 0; border-radius: 1rem;} #areaTerms > div {padding: .8rem 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 1.6rem;} #inisisAuth .step_item .title {font-size: 1.4rem;} #inisisAuth .step_item .img_wrap img {width: 3rem; height: 3rem;} .self_copy_wrap {padding: 3rem 0 5rem 0;} .self_copy {font-size: 1.15rem;} -- step1 self call (가입 가능시간 안내) .self_call {font-size: 1.6rem;} .self_call .content {padding-left: 1.4rem;} .self_call .ref {font-size: 1.3rem;} 유심/esim 안내 버튼(임시) .self_wrap .guide_btn button {height: 3.5rem; font-size: 1.6rem;} .step1-activeInfo button {font-size: 1.6rem;} .step1-usimInfo .advice_item .img_wrap {flex-basis: 12rem; min-width: 12rem; height: 12rem;} .step1-usimInfo .advice_item .img_wrap img {width: auto; height: 8rem;} .step1-usimInfo .advice_item .flex_row {margin: 0 -.4rem;} .step1-usimInfo .advice_item .flex_row > * {padding: 0 .4rem;} .step1-usimInfo .advice_item .box_outline {padding: 1.2rem;} .form_wrap .step1-usimInfo .advice_item .img_wrap {flex-basis: 10rem; min-width: 10rem; height: 10rem;} .form_wrap .step1-usimInfo .advice_item .img_wrap img {width: auto; height: 6rem;} -- price select .price_filter {top: 12.1rem; padding: 2rem 0; margin-bottom: 1.5rem;} .price_filter::after {top: 82px; height: 15px;} .price_filter .swiper {width: 95%; max-width: 1040px; margin: 0 auto;} .price_filter button, .price_filter_popup button {font-size: 1.6rem;} .self_wrap .price_sticky_wrap {top: 11.1rem;} .body_wrap_agent.self_wrap .price_sticky_wrap {top: 0;} .card_price_list + .card_price_list {margin-top: 2.4rem;} .card_price_list label {padding: 3.2rem; font-size: 1.6rem;} .card_price_list .head {margin-bottom: 0; font-size: 1.8rem;} .card_price_list .content_group {flex-direction: row; margin-top: 2rem;} .card_price_list .detail {margin-bottom: 0; font-size: 1.6rem;} .card_price_list .detail .ref {font-size: 1.4rem;} .card_price_list .price {flex-shrink: 0; font-size: 2.4rem;} .card_price_list .price .ref {font-size: 1.4rem;} -- order list .order_list_wrap h1 {margin-bottom: 5.6rem;} .order_list_wrap h2 {margin-bottom: 1.6rem;} .order_box {padding: 2.4rem;} .order_list_wrap .order_list li {padding: 2rem 1.6rem;} .order_list li + li {padding-top: 2.4rem;} .order_list .title {font-size: 1.6rem;} .order_list .text {font-size: 1.6rem;} .order_list .text_flex {align-items: center; gap: 1rem;} .order_list .text button {height: 3.5rem; line-height: 3.5rem;} -- applyComplArea .applyComplArea {padding: 3.6rem; border-radius: 2rem;} .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: 2rem 0;} .applyComplArea .box_guide .text_group_ref {font-size: 1.5rem;} ** G. Components ** -- form .form_wrap + .form_wrap {margin-top: 6.4rem;} .form_group {margin-bottom: 3.2rem;} .input_group input[type="email"] {padding-right: 8rem;} .input_flex button {height: 4.8rem; padding: 0 2rem;} .form_notice {margin-top: 1.5rem; font-size: 1.4rem;} .n_form_label {font-size: 1.6rem;} .n_check_label {font-size: 1.6rem;} .form_check_icon .n_check_label {padding-left: 3rem;} .form_check_icon input[type="checkbox"] + label span {width: 30px; height: 30px;} -- list .list li + li {margin-top: 1rem;} .list_dot li + li {margin-top: 1rem;} .list_ico li + li {margin-top: 1rem;} .select_list li {font-size: 1.4rem;} .select_list li a {font-size: 1.3rem;} .select_list li a .img_wrap {width: 6rem; height: 6rem;} .select_list li a span {margin-top: .8rem;} -- table .table_board {font-size: 1.6rem;} .table_board tr {grid-template-columns: 240px 1fr;} .table_board th {padding: 2rem;} .table_board td {padding: 2rem 1.6rem;} .table_board .form_group {margin-bottom: 1.6rem;} -- box .box_outline {padding: 2.4rem;} .box_outline_title {padding-top: 1rem; font-size: 1.6rem;} .box_outline_text {padding-top: 1rem; font-size: 1.4rem;} .box_outline_icon img {width: 6rem;} .box_form {padding: 2.4rem 2rem;} .box_form .inner {flex-direction: row; justify-content: center; gap: 2.4rem; width: 100%; padding: 0 4rem;} .box_form .inner .img_wrap {width: 50%; max-width: unset;} .box_form .inner .img_wrap + div {width: 50%;} .box_form img {width: 100%;} .box_form .title {padding-bottom: 1.6rem; font-size: 1.4rem; font-weight: 700; color: var(--n-primary);} .box_guide + .form_wrap {margin-top: 3.2rem;} .box_form .btn_group {background-color: transparent;} .self_wrap .box_form .form_group + .form_group {margin-top: 0;} .box_cardlist {padding-top: 2.4rem;} .box_cardlist .inner {width: 95%; max-width: 1040px; padding-bottom: 15rem; margin: 0 auto;} .box_list {padding: 1.4rem 2.4rem;} .box_list .form-check {padding: 1rem 1.5rem;} .box_guide .title {padding-bottom: 1.6rem; font-size: 1.6rem;} .box_guide .text {padding: 1rem 0; font-size: 1.6rem;} .box_guide .text_group_title {font-size: 2rem; margin-bottom: 2rem;} .box_guide .text_group_ref {font-size: 1.6rem;} .box_green {padding: 2.4rem;} .box_green .title {font-size: 1.8rem;} .box_light {padding: 2.4rem;} .box_light .title {font-size: 1.8rem;} -- button button {padding: 0 1rem;} .btn_wrap {margin-top: 6rem;} .btn_group {padding: 2rem 0;} .n_btn_lg {height: 6rem;} a.n_btn_lg {line-height: 6rem;} .n_btn_m {height: 5.6rem;} a.n_btn_m {line-height: 5.6rem;} .n_btn_s {height: 4.8rem;} a.n_btn_s {line-height: 4.8rem;} .n_btn_xs {height: 4rem; padding: 0 1.6rem;} a.n_btn_xs {line-height: 4rem;} .n_btn_auto {font-size: 1.4rem; height: 3.5rem;} a.n_btn_auto {line-height: 3.5rem;} .n_btn_lg.w340 {max-width: 340px;} .n_btn_lg.w260 {max-width: 260px;} .btn_underline {height: auto; font-size: 1.5rem;} .btn_text_primary {right: 16px; font-size: 1.6rem;} .btn_kakao {padding: 1.6rem 2.4rem; font-size: 1.6rem;} .btn_link_ico {font-size: 1.6rem;} .btn_link_ico::after {width: 1.4rem; height: 1.4rem;} .select_btn, .select_btn_t2 {font-size: 1.6rem; border-radius: 1rem;} .btn_down {height: 3.5rem; font-size: 1.6rem;} a.btn_down {line-height: 3.5rem;} .body_wrap_popup .fixed-bottom .btn_group, .body_wrap_popup_t2 .fixed-bottom .btn_group {padding: 1rem 0;} .body_wrap_popup .fixed-bottom .n_btn_lg, .body_wrap_popup_t2 .fixed-bottom .n_btn_lg {height: 6rem;} .body_wrap_popup .fixed-bottom a.n_btn_lg, .body_wrap_popup_t2 .fixed-bottom a.n_btn_lg {line-height: 6rem;} -- board .board {font-size: 1.6rem;} .modal_board {} .modal_board .board_content {padding-bottom: 4rem;} .modal_board .title {font-size: 1.8rem;} .modal_board .content {margin-top: 1.5rem; font-size: 1.6rem;} -- space .pb_fixbtn {padding-bottom: 11rem;} -- modal .modal-title {font-size: 2.2rem;} .modal_text li {font-size: 1.6rem;} -- text h1 {font-size: 2.8rem;} h2 {font-size: 2rem; margin-bottom: 1.6rem;} .breadcrumb {font-size: 1.6rem;} .text_lg_size {font-size: 1.8rem;} .text_default_size {font-size: 1.6rem;} .text_md_size {font-size: 1.5rem;} .text_sm_size {font-size: 1.3rem;} .text_info {font-size: 1.5rem;} -- step .step {flex-direction: row;} .step_item + .step_item::before {top: 50%; left: -3rem; transform: translateY(-50%); width: 1.4rem; height: 1.4rem; background: url(../svg/chevron-right.svg) center/100% no-repeat;} .step_item .img_wrap img {width: 5rem; height: 5rem;} .step_item .title {font-size: 1.6rem;} -- advice .advice {gap: 4rem;} .advice_item {gap: 2.4rem; font-size: 1.6rem;} .advice_item .img_wrap {flex-basis: 6rem; min-width: 6rem; height: 6rem;} .advice_item .img_wrap img {width: 6rem; height: 6rem;} .advice_item .title {font-size: 1.6rem;} .advice_item .desc {margin-top: .5rem;} -- swiper .filter input[type="text"], .filter input[type="date"], .filter select.form-select {height: auto; padding: .5rem .8rem; font-size: 1.4rem;} } @media screen and (min-width: 1200px) { ------------------------------------------- -- large desktop (1200px~) ------------------------------------------- ** B. Layout ** -- container .container { max-width: 1140px; } -- nav .snb {max-width: 1140px;} ** D. Main ** -- main banner .main_banner_carousel {height: 440px;} -- main swiper area .main_swiper_area {max-width: 1140px;} .main_swiper_area .swiper-button-next, .main_swiper_area .swiper-button-prev {width: auto; height: 3rem;} .main_swiper_area .swiper-button-next:after, .main_swiper_area .swiper-button-prev:after {font-size: 3rem;} -- main evnet area .main_event_area .thumb_card_img.event {max-height: 300px;} ** E. Sub ** * -- event .thumb_card_img.event {max-height : 220px;} } @media screen and (min-width: 1440px) { ------------------------------------------- -- xLarge desktop (1440px~) ------------------------------------------- ** B. Layout ** -- container .container { max-width: 1280px; max-width: 1200px; } ** D. Main ** -- main banner .main_banner_carousel {height: 516px;} -- main swiper area .main_swiper_area { max-width: 1280px; padding: 0; } } */ /*********************************************************************************************************************** J. Print ***********************************************************************************************************************/ @media print { @page { margin: 0; size: A4; } /* -- print default */ * { box-sizing: border-box; -moz-box-sizing: border-box; } html, body { width: 210mm; height: 297mm; background: #fff; } body { width: 100%; height: 100%; background: #fff; color: #000; font-size: 8pt; line-height: 150%; margin: 0; padding: 0 } 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 .price_list li.depth {color: var(--n-gray-800);} .doc_notice {color: var(--n-gray-500); line-height: 150%;} .doc_notice > * {font-weight: 300;} .doc_notice .box .title {padding-bottom: 2px; font-weight: 500; color: var(--n-gray-500);} .doc_notice .list li + li {margin-top: 0;} /* #confirmDoc {padding: 60px;} #confirmDoc .doc_head_logo {top: 60px; right: 60px;} */ #confirmDoc .doc_info {padding-top: 40px;} #confirmDoc .doc_content:last-child {padding-bottom: 40px;} #confirmDoc .doc_content .table_board.type2 th, #confirmDoc .doc_content .table_board.type2 td {padding: 20px;} #confirmDoc .doc_notice {padding-top: 24px; font-size: 9.25pt;} #confirmDoc .doc_notice .box .title {font-size: 9.25pt;} #confirmDoc .doc_seal {padding-top: 80px;} #confirmDoc .doc_seal .seal {margin-top: 40px;} }