@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css"); :root { /* color-black */ --color-black-normal: #424242; --color-black-normal-hover: #3b3b3b; --color-black-normal-active: #353535; /* color-gray */ --color-gray-light: #fffefe; --color-gray-light-hover: #fefefd; --color-gray-light-active: #fdfdfc; --color-gray-normal: #FAFAFA; --color-gray-normal-hover: #e1dfdc; --color-gray-normal-active: #c8c6c3; --color-gray-dark: #bcbab7; --color-gray-dark-hover: #969592; --color-gray-dark-active: #70706e; --color-gray-darker: #585755; /* color-main */ --color-main-light: #F2F2F8; --color-main-light-hover: #E8E8F0; --color-main-light-active: #DCDCE8; --color-main-normal: #485A7B; --color-main-normal-hover: #3A4A64; --color-main-normal-active: #2F3D52; --color-main-dark: #47436E; --color-main-dark-hover: #3A3659; --color-main-dark-active: #2E2A47; --color-main-darker: #231F38; /* color-sub */ --color-sub-light: #ecebea; --color-sub-light-hover: #e2e0df; --color-sub-light-active: #c3c0bc; --color-sub-normal: #3d3328; --color-sub-normal-hover: #372e24; --color-sub-normal-active: #312920; --color-sub-dark: #2e261e; --color-sub-dark-hover: #251f18; --color-sub-dark-active: #1b1712; --color-sub-darker: #15120e; /* color-white */ --color-white-light: #ffffff; --color-white-light-hover: #fefefe; --color-white-light-active: #fdfdfd; /* font-color */ --font-black: #424242; --font-gray: #979797; /* font-size */ --font-xs: 0.75rem; --font-sm: 0.875rem; --font-md: 1rem; --font-lg: 1.125rem; --font-xl: 1.25rem; --font-2xl: 1.5rem; --font-3xl: 1.75rem; --font-4xl: 2rem; } html, body {overflow: hidden; position: relative; width: 100%; height: 100%;} html { font-size: 100%; } body { font-weight: normal; font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif; min-height: 100dvh; line-height: 1.5; overflow-y: auto;} .ui-widget {font-family: "Pretendard Variable", Pretendard, sans-serif !important; color: var(--color-black-normal); line-height: 1.5;} body {display: flex; flex-direction: column;} /* 폰트, rem 반응형 정리 */ @media (max-width: 800px) { html, body {font-size: 15px;} } @media (max-width: 600px) { html, body {font-size: 14px;} } @media (max-width: 480px) { html, body {font-size: 13px;} } @media (max-width: 360px) { html, body {font-size: 12px;} } /* 리셋 */ body, p, form, h1, h2, h3, h4, h5, h6, small, ul, ol, dl { margin: 0; padding: 0; } li { list-style: none; } * { box-sizing: border-box; } *:after { clear: both; } dl, ol, ul { margin: 0; padding: 0; } ul li { list-style: none } dl, dd { margin-bottom: 0; } label { margin-bottom: 0; } em { font-style: normal; } a { display: inline-block; color: initial; } a:hover { color: initial; cursor: pointer; color: var(--font-black);} p { margin: 0; } h1, h2, h3, h4, h5, h6 { margin: 0; } button { background: transparent; padding: 0; border: 0; } form { margin-bottom: 0; } a, a:hover, a:focus { text-decoration: none; color: var(--color-black-normal);} dl, dd, dt { line-height: initial; } input::placeholder {font-style: normal;} .table { margin-bottom: 0; } .table td, .table th { border-top: 0; } .table thead th { border-bottom: 0; } .card { display: block; background-color: #fff; border: 0; border-radius: 0; } .container { padding: 0; } .btn { line-height: inherit; font-size: inherit; font-weight: inherit; padding: 0.5875rem 0.75rem;} img {display: block; max-width: 100%; object-fit: contain;} textarea {line-height: 1.5;} textarea::placeholder {font-style: normal;} /* 리셋 끝 */ .d-table {display: table; table-layout: fixed; width: 100%;} .d-table > * {display: table-cell;} .form-control {height: calc(2.625rem + 2px); border-radius: 0.5rem !important;} /* 버튼 */ .btn {border-radius: 0.5rem !important; padding: 0.5625rem 1rem !important; line-height: 1.5rem;} .btn-primary {border-color: var(--color-main-normal) !important; background-color: var(--color-main-normal) !important; color: #fff !important;} .btn-primary:hover, .btn-primary:focus {border-color: var(--color-main-normal-active) !important; background-color: var(--color-main-normal-active) !important;} .btn-outline-primary {border-color: var(--color-main-normal) !important; color: var(--color-main-normal) !important;} .btn-outline-primary:hover, .btn-outline-primary:focus {border-color: var(--color-main-normal-active) !important; background-color: var(--color-main-normal-active) !important; color: #fff !important;} /*상세페이지 버튼*/ .btn-primary.none-hover:hover, .btn-primary.none-hover:focus {border-color: var(--color-main-normal) !important; background-color: var(--color-main-normal) !important; color: #fff !important;} .btn-primary.type-02 {border-color: var(--color-main-normal-active) !important; background-color: var(--color-main-normal-active) !important; color: #fff !important;} .btn {border-radius: 0.5rem !important; padding: 0.5625rem 1rem !important; line-height: 1.5rem;} .btn-secondary {border-color: var(--color-gray-dark-active) !important; background-color: var(--color-gray-dark-active) !important; color: #fff !important;} .btn-secondary:hover, .btn-secondary:focus {border-color: var(--color-gray-dark-hover) !important; background-color: var(--color-gray-dark-hover) !important;} .btn-outline-secondary {border-color: var(--color-gray-dark-active) !important; color: var(--color-gray-dark-active) !important;} .btn-outline-secondary:hover, .btn-outline-secondary:focus {border-color: var(--color-gray-dark-hover) !important; background-color: var(--color-gray-dark-hover) !important; color: #fff !important;} /* 뱃지 */ .badge-primary {background-color: var(--color-main-normal) !important; color: #fff !important;} /* 공통 컴포넌트 */ /* 폰트 */ .font-mb {font-family: 'MaruBuri';} /* 헤더 */ h1.header {font-size: 3rem; font-weight: 500; line-height: 140%;} h1.header-bold {font-size: 3rem; font-weight: 700; line-height: 140%;} h2.header {font-size: 2.5rem; font-weight: 500; line-height: 140%;} h2.header-bold {font-size: 2.5rem; font-weight: 700; line-height: 140%;} h3.header {font-size: 2rem; font-weight: 500; line-height: 140%;} h3.header-bold {font-size: 2rem; font-weight: 700; line-height: 140%;} h4.header {font-size: 1.5rem; font-weight: 500; line-height: 140%;} h4.header-bold {font-size: 1.5rem; font-weight: 700; line-height: 140%;} h5.header {font-size: 1.25rem; font-weight: 500; line-height: 140%;} h5.header-bold {font-size: 1.25rem; font-weight: 700; line-height: 140%;} h6.header {font-size: 1.125rem; font-weight: 500; line-height: 140%;} h6.header-bold {font-size: 1.125rem; font-weight: 700; line-height: 140%;} .extra-bold {font-weight: 800 !important;} /* 뱃지 */ .badge {font-weight: 600 !important;} .badge.badge-lg {padding: 0.25rem 0.75rem; font-size: var(--font-sm); line-height: 1.5;} .badge.badge-lg.badge-pill {border-radius: 3rem;} .badge-outline-primary {border: 1px solid var(--color-main-normal); color: var(--color-main-normal); background-color: var(--color-main-light);} /* 텍스트 */ .text-primary {color: var(--color-main-normal) !important;} /* 공통 테이블 */ .table {border-bottom: 1px solid var(--color-gray-normal-active);} .table tr > th {vertical-align: middle; padding: 1rem; text-align: center; font-weight: 500;} .table tr > td {vertical-align: middle; padding: 1rem 0.875rem; text-align: center; border-bottom: 1px solid #EBECEE;} .table tr:hover > td{background-color: var(--color-gray-normal); transition: all 0.15s ease-in-out;} .table thead tr > th {background-color: var(--color-gray-light-active);} .table thead tr > th:first-child {border-top-left-radius: 0.5rem; border-bottom-left-radius: 0.5rem;} .table thead tr > th:last-child {border-top-right-radius: 0.5rem; border-bottom-right-radius: 0.5rem;} .table tbody tr:not(:first-child) > td {border-top: 1px solid var(--color-gray-light-active);} /* 공통 - 페이징 */ .pagination {margin-top: 2rem;} .pagination {gap: 0.75rem;} .pagination .page-link {border: none; color: var(--font-black); width: 2.25rem; text-align: center; font-weight: 500; padding: 0.5rem;} .pagination .page-link > i {color: var(--color-gray-normal-active); font-size: var(--font-xl);} .page-item.active .page-link {background-color: var(--color-main-light-active); color: var(--font-black); border-radius: 50%; width: 2.25rem; text-align: center;} .page-link:hover {border-radius: 50% !important;} /* 공통 - 말줄임 */ .text-overflow {display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; max-width: 100%;} .text-overflow-2 {max-width: 100%; text-overflow: ellipsis; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;} .text-overflow-3 {max-width: 100%; text-overflow: ellipsis; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;} .text-overflow-4 {max-width: 100%; text-overflow: ellipsis; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4;} /* 공통 - 다이얼로그 */ .SHUVIC_JQUERY_DIALOG.ui-dialog {border-radius: 0.5rem; overflow: hidden;} .SHUVIC_JQUERY_DIALOG.ui-dialog >.ui-widget-header {background: var(--color-blue-normal) !important;} .SHUVIC_JQUERY_DIALOG.ui-dialog {border: none !important;} .SHUVIC_JQUERY_DIALOG.ui-dialog .ui-dialog-titlebar {display: none !important;} .SHUVIC_JQUERY_DIALOG.ui-dialog > .ui-dialog-content {min-height: 7.5rem !important; text-align: center !important; color: var(--font-black) !important; padding: 2.5rem 1rem 1.5rem !important; font-size: 1.125rem; max-height: 80dvh !important; overflow-y: auto;} .SHUVIC_JQUERY_DIALOG.ui-dialog .ui-dialog-buttonpane {border-top: none !important; padding: 0.3rem 1rem 2.5rem 1rem;} .SHUVIC_JQUERY_DIALOG.ui-dialog .ui-dialog-buttonset {display: flex; justify-content: center; align-items: center; gap: 1rem;} .SHUVIC_JQUERY_DIALOG.ui-dialog .ui-dialog-buttonset > button {margin: 0 !important; min-width: 7.5rem;} .ui-widget-overlay {background-color: #000 !important;} .pre-scrollable {overflow-y: auto;} /* 레이아웃 - 공통 */ .default-container {width: 1200px; margin: 0 auto;} /* 레이아웃 - 헤더 */ #layout-top-wrapper {position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; background-color: var(--color-white-light); padding: 1.5rem 0; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.125);} .layout_header_wrap {display: flex; align-items: center; justify-content: space-between;} .main_logo {display: block; width: 125px;} .layout_header_tool_wrap {display: flex; align-items: center; justify-content: flex-end; gap: 1.5rem;} .layout_header_tool_wrap > ul {display: flex; align-items: center; justify-content: flex-start; gap: 1.5rem;} .layout_header_tool_wrap > ul > li > a {font-size: var(--font-md); font-weight: 700; color: var(--color-black-normal); padding: 0.625rem;} /* 레이아웃 - 바디 */ #layout-body-wrapper {flex: 1; padding-top: 5.75rem;} /* 레이아웃 - 푸터 */ .footer_wrap {background-color: #3A3A3A; color: var(--color-white-light);} .footer_top {padding: 3.375rem 0;} .footer_bottom {padding: 2rem 0; display: flex; align-items: center; justify-content: space-between;} .footer_bottom > ul {display: flex; align-items: center; justify-content: flex-end; gap: 1rem;} .footer_bottom > ul > li > a {font-size: var(--font-sm); font-weight: 500; color: var(--color-white-light); text-decoration: underline;} /* 컨텐츠 */ /* 컨텐츠 - 공통 */ .sub_page_defaul_form_title {font-size: var(--font-lg); font-weight: 700; text-align: center;} .sub_page_defaul_form_cont {margin-top: 1.5rem;} /* 컨텐츠 - 메인페이지 */ section[data-index="mainPrdIntro"] {padding: 4.5rem 0;} section[data-index="mainPrdDetIntro"] {background-color: var(--color-gray-normal); padding: 7rem 0;} .main_top_slide_item {position: relative; width: 100%;} .main_top_slide_cont {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; color: var(--color-white-light);} .main_top_slide_cont > dl > dd {margin-top: 0.5rem; font-size: var(--font-xl); font-weight: 500;} .main_top_slide_cont > dl > dd > span {line-height: 1.5; display: block;} .main_top_slide_cont > dl > dd > span + span {margin-top: 0.5rem; font-size: var(--font-lg);} .main_top_slide_cont a.btn {padding: 1rem 3rem !important; border-radius: 3rem !important; margin-top: 2rem;} .main_top_slide_info {padding: 3.5rem 0; background-color: var(--color-gray-normal);} .main_top_slide_info img {width: 5.5rem; margin: 0 auto;} .main_top_slide_info_cont {margin-top: 2rem; font-size: var(--font-xl); line-height: 1.5; text-align: center;} section[data-index="mainPrdIntro"] .main_prd_intro_top {text-align: center;} .main_prd_intro_top > dd {margin-top: 1rem; font-size: var(--font-xl); line-height: 1.5; color: var(--color-black-normal);} .main_prd_intro_tab {display: flex; align-items: center; justify-content: center; margin-top: 2rem;} .main_prd_intro_tab > ul {display: flex; align-items: center; justify-content: center; gap: 2.5rem; padding: 1rem 1.25rem; border-radius: 0.5rem; background-color: var(--color-main-light);} .main_prd_intro_tab > ul > li > a {padding: 1rem 1.5rem; border-radius: 0.5rem; color: var(--color-gray-dark);} .main_prd_intro_tab > ul > li > a:not(.active):hover {background-color: var(--color-main-light-active); color: var(--color-gray-darker); transition: all 0.15s ease-in-out;} .main_prd_intro_tab > ul > li > a.active {background-color: var(--color-main-normal); color: var(--color-white-light);} .main_prd_intro_tab_form {margin-top: 2rem; padding: 0 5rem;} .main_prd_intro_tab_form > ul > li > .card {border-radius: 1.5rem; box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.2);} .main_prd_intro_tab_form > ul > li > .card > .card-body {padding: 1.5rem;} .main_prd_intro_tab_form_item[data-params="0002"] {display: none;} .main_prd_intro_tab_form_wrap {display: flex; align-items: center; justify-content: space-between; gap: 2.5rem;} .main_prd_intro_tab_form_left {width: 25rem;} .main_prd_intro_tab_form_right {flex: 1;} .main_prd_intro_tab_form_title {color: var(--color-main-normal);} .main_prd_intro_tab_form_badge {margin-top: 0.75rem;} .main_prd_intro_tab_form_badge > ul {display: flex; align-items: center; justify-content: flex-start; gap: 0.75rem;} .main_prd_intro_tab_form_price {margin-top: 0.75rem; color: var(--color-main-normal);} .main_prd_intro_tab_form_info_list {margin-top: 1.5rem;} .main_prd_intro_tab_form_info_list > li:not(:first-child) {margin-top: 0.5rem;} .main_prd_intro_tab_form_info_list .card {border-radius: 0.5rem; overflow: hidden;} .main_prd_intro_tab_form_info_list .card > .card-body {padding: 1rem; background-color: #FDFCFA;} .main_prd_intro_tab_form_info_list .card > .card-body > dl > dt {color: var(--color-main-dark);} .main_prd_intro_tab_form_info_list .card > .card-body > dl > dd {margin-top: 0.5rem; color: var(--color-black-normal); font-weight: 500;} .main_prd_intro_tab_form_info_list .card > .card-body > dl > dd > ul > li:not(:first-child) {margin-top: 0.25rem;} .main_prd_intro_tab_form_info_list .card > .card-body > dl > dd > ul > li {display: flex; align-items: baseline; justify-content: flex-start; gap: 0.25rem;} .main_prd_intro_tab_form_info_list .card > .card-body > dl > dd > ul > li em {font-weight: 700;} .main_prd_intro_tab_form_btn_lst {margin-top: 2rem; display: flex; align-items: center; justify-content: center; gap: 1rem;} .main_prd_intro_tab_form_btn_lst > li {flex: 1;} .main_prd_intro_tab_form_btn_lst > li > a {display: block; padding: 1rem 0 !important;} .main_prd_det_intro_top {text-align: center;} .main_prd_det_intro_top > dd {margin-top: 1rem; font-size: var(--font-xl); line-height: 1.5; color: var(--color-black-normal);} .main_prd_det_intro_lst_wrap {padding: 0 7.5rem;} .main_prd_det_intro_lst {display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem 2.5rem; margin-top: 3rem;} .main_prd_det_intro_lst .card {border-radius: 0.5rem; box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.2); height: 100%;} .main_prd_det_intro_lst .card > .card-body {padding: 0;} .main_prd_det_intro_lst .card > .card-body .card-text {padding: 3rem 2rem;} .main_prd_det_intro_info > dt {color: var(--color-main-normal);} .main_prd_det_intro_info > dd {margin-top: 0.5rem; color: var(--color-black-normal); font-weight: 500; line-height: 1.5;} .main_bottom_banner_wrap {position: relative;} .main_bottom_banner_cont {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; color: var(--color-white-light);} .main_bottom_banner_cont > dl > dd {font-size: var(--font-xl); font-weight: 500;} .main_bottom_banner_cont > dl > dt {font-size: var(--font-2xl); font-weight: 700; margin-top: 1rem;} .main_bottom_banner_cont a.btn {padding: 0.75rem 1rem !important; border-radius: 3rem !important; margin-top: 2.25rem;} .main_prd_intro_tab_form_slide_wrap {padding-bottom: 1rem;} .main_prd_intro_tab_form_slide_list > li {padding: 1rem;} .main_prd_intro_tab_form_slide_btn_prev {background-image: url("/common/css/images/index/main_arrow_left.png"); background-size: contain; background-repeat: no-repeat; background-position: center; width: 2rem; height: 2rem; left: 0rem;} .main_prd_intro_tab_form_slide_btn_next {background-image: url("/common/css/images/index/main_arrow_right.png"); background-size: contain; background-repeat: no-repeat; background-position: center; width: 2rem; height: 2rem; right: 0;} .main_prd_intro_tab_form_slide_wrap .swiper-pagination {bottom: 0;} .main_prd_intro_tab_form_slide_wrap .swiper-pagination-bullet-active {background-color: var(--color-main-normal);} /* 컨텐츠 - 문의/주문 게시판 리스트 페이지 */ .ord_qust_list_form_wrap {display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem; margin-top: 2rem;} .ord_qust_list_form_left {width: 20rem;} .ord_qust_list_form_right {width: calc(100% - 21.5rem); padding-bottom: 9rem;} .ord_qust_list_form_left input[type="text"] {margin-top: 1.5rem; display: none;} .ord_qust_list_form_left_menu_lst {margin-top: 1.5rem;} .ord_qust_list_form_left_menu_lst > li {border-bottom: 1px solid var(--color-gray-normal-hover);} .ord_qust_list_form_left_menu_lst > li > a {padding: 0.625rem 1rem; display: flex; align-items: center; justify-content: space-between; color: var(--color-sub-normal); font-weight: 700;} .ord_qust_list .table tr > td:first-of-type {color: var(--color-gray-dark-hover);} .ord_qust_list .table tr > td:nth-of-type(2) {font-weight: 500;} .ord_qust_list .table tr > td:nth-of-type(3) {font-weight: 500;} .ord_qust_list .table tr > td:nth-of-type(3) > span {display: block; margin-top: 0.5rem;} /* 제품 소개 동영상 */ .prd_intro_video_wrap {margin: 2rem 0; text-align: center;} .prd_intro_video_wrap video {border-radius: 0.5rem; max-width: 100%; height: auto;} /* 컨텐츠 - 문의/주문 게시판 상세 페이지 */ .ord_qust_info_form_board_title {font-size: var(--font-xl); font-weight: 600; line-height: 1.4; padding: 1.25rem 0.625rem; border-bottom: 1px solid var(--color-gray-dark);} .ord_qust_info_form_board_cate_badge {color: var(--color-main-normal);} .ord_qust_info_form_board_title_txt {margin-left: 0.75rem;} .ord_qust_info_form_board_body {padding: 1.5rem;} .ord_qust_info_form_board_body_info {display: flex; align-items: center; justify-content: space-between;} .ord_qust_info_form_board_usr_nm {font-weight: 500;} .ord_qust_info_form_board_dt {font-weight: 500;} .ord_qust_info_form_board_cont {margin-top: 1.5rem;} .ord_qust_info_form_board_rply_form {margin-top: 6rem;} .ord_qust_info_form_board_rply_form .card {border-radius: 0.5rem; overflow: hidden;} .ord_qust_info_form_board_rply_form .card > .card-body {padding: 1rem 1.5rem; background-color: var(--color-main-light);} .ord_qust_info_form_board_rply_wri_form {margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--color-gray-normal-active); display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;} /* 컨텐츠 - 문의/주문 게시판 작성 페이지 */ .ord_qust_form_container_title {display: flex; align-items: center; justify-content: space-between; padding: 0.625rem;} .ord_qust_form_lst {padding-top: 1.5rem; border-top: 1px solid var(--color-gray-normal-active);} .ord_qust_form_lst > li:not(:first-child) {margin-top: 1.25rem;} .ord_qust_form_lst > li > dl {display: flex; align-items: flex-start; justify-content: flex-start; gap: 1.375rem;} .ord_qust_form_lst > li > dl > dt {width: 100px; font-weight: 500; line-height: 44px;} .ord_qust_form_lst > li > dl > dd {flex: 1;} /* 개인정보 이용약관 동의 */ .agree_form_wrap {display: flex; justify-content: center; align-items: center; margin-top: 1.5rem;} .agree_form {display: inline-block; cursor: pointer;} .agree_form {font-size: var(--font-xl);} [name="agreeBtn"] {appearance: none; -webkit-appearance: none; -moz-appearance: none; width: 1.5rem; height: 1.5rem; background-image: url("/common/css/images/icon/checkbox.png"); background-size: contain; background-repeat: no-repeat; background-position: center; cursor: pointer; vertical-align: middle; margin-right: 0.5rem; border: none; padding: 0;} [name="agreeBtn"]:checked {background-image: url("/common/css/images/icon/checkbox_checked.png");} /* 개인정보처리방침 */ .na_page_title {text-align: center; font-size: 2rem; font-weight: bold; margin-bottom: 1rem; line-height: 1.5;} .na_page_title.na_agree_form_header {font-size: 1.5rem;} .na_agree_form_wrap {text-align: left;} .pinfo_clct_util_agr_info_lst, .pinfo_clct_util_agr_info_lst ul, .pinfo_clct_util_agr_info_lst dl {margin-bottom: 0; padding-left: 0;} .pinfo_clct_util_agr_info_lst > *, .pinfo_clct_util_agr_info_lst ul > * {list-style: none;} .pinfo_clct_util_agr_info_lst > li {margin-top: 3rem;} .pinfo_clct_util_agr_info_lst > li > dl > dt {font-size: 1.375rem;} .pinfo_clct_util_agr_info_lst > li > dl > dd {margin-top: 1.5rem;} .pinfo_clct_util_agr_info_lst > li > ul > li {margin-top: 1.25rem;} .pinfo_clct_util_agr_info_lst > li > ul > li > dl > dt {font-size: 1.125rem; font-weight: 500;} .pinfo_clct_util_agr_info_lst > li > ul > li dl > dt {font-weight: 500;} .pinfo_clct_util_agr_info_lst > li > ul > li > dl > dd {margin-top: 0.75rem;} .pinfo_clct_util_agr_info_lst table {table-layout: fixed;} .pinfo_clct_util_agr_info_lst table > tbody > tr > th {background-color: var(--color-main-light-hover);} .pinfo_clct_util_agr_info_lst table > tbody > tr > th, .pinfo_clct_util_agr_info_lst table > tbody > tr > td {border-color: #ced4da; text-align: center; vertical-align: middle; font-size: 1rem; padding: 0.5rem; word-break: break-all;} .pinfo_clct_util_agr_info_lst table > tbody > tr > td ul > li:not(:first-child) {margin-top: 0.5rem;} .pinfo_agr_text_form .pinfo_clct_util_agr_info_lst > li {margin-top: 1.5rem;} .pinfo_agr_text_form .pinfo_clct_util_agr_info_lst > li > dl > dt {font-size: 1.125rem;} .pinfo_agr_text_form .pinfo_clct_util_agr_info_lst table {border-top-color: #000;} /* 제품 상세 페이지 */ .prd_intro {padding-bottom: 7rem;} .prd_intro_top_wrap {display: flex; align-items: flex-start; justify-content: space-between; gap: 4.75rem; margin-top: 5.25rem;} .prd_intro_top_left {width: 31.875rem;} .prd_intro_top_right {width: calc(100% - 36.625rem);} .prd_intro_top_img_slide_wrap li {border-radius: 0.5rem; overflow: hidden; border: 2px solid var(--color-gray-normal-hover); position: relative; padding-bottom: 100%;} .prd_intro_top_img_slide_wrap img {width: 100%; height: 100%; object-fit: contain; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 0.25rem;} .prd_intro_top_img_slide_wrap.swiper-container-horizontal > .swiper-pagination-bullets {margin-top: 1.25rem; position: static; flex: 1; display: flex; align-items: center; justify-content: center; gap: 1.25rem;} .prd_intro_top_img_slide_wrap.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {flex: 1; height: 0; background-color: transparent; opacity: 1; display: block; border-radius: 0.5rem; margin: 0; border: 2px solid var(--color-gray-normal-hover); overflow: hidden; padding-bottom: calc((100% - 3.75rem - 16px) / 4); position: relative;} .prd_intro_top_img_slide_wrap.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet img {width: 100%; height: 100%; object-fit: contain; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 0.25rem;} .prd_intro_top_img_slide_wrap.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet.swiper-pagination-bullet-active {border-color: var(--color-main-normal); background-color: var(--color-main-light);} .prd_intro_top_form_badge {margin-top: 0.75rem;} .prd_intro_top_form_badge > ul {display: flex; align-items: center; justify-content: flex-start; gap: 0.75rem;} .prd_intro_top_form_price {margin-top: 0.75rem; color: var(--color-main-normal);} .prd_intro_top_form_info {margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--color-gray-normal-hover);} .prd_intro_top_form_info > ul > li:not(:first-child) {margin-top: 1.5rem;} .prd_intro_top_form_info > ul > li > dl {display: flex; align-items: flex-start; justify-content: flex-start; gap: 1.5rem;} .prd_intro_top_form_info > ul > li > dl > dt {font-size: var(--font-lg); line-height: 1.5; width: 6.375rem;} .prd_intro_top_form_info > ul > li > dl > dd {font-size: var(--font-lg); line-height: 1.5; font-weight: 500;} .prd_intro_top_form_info_btn_wrap {margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--color-gray-normal-hover);} .prd_intro_top_form_info_btn_wrap > a.btn {display: block;} .prd_intro_body_wrap {margin-top: 5.25rem;} .prd_intro_body_tab_wrap > ul {display: flex; align-items: center; justify-content: flex-start; border-bottom: 2px solid var(--color-black-normal);} .prd_intro_body_tab_wrap > ul > li {position: relative; margin-bottom: -2px;} .prd_intro_body_tab_wrap > ul > li > a {display: block; width: 10rem; text-align: center; padding: 1rem 0; font-size: var(--font-lg); font-weight: 500;} .prd_intro_body_tab_wrap > ul > li > a:hover {background-color: var(--color-gray-normal); transition: all 0.15s ease-in-out;} .prd_intro_body_tab_wrap > ul > li:first-child {border: 2px solid var(--color-black-normal); border-bottom: 2px solid #fff; z-index: 1;} .prd_intro_body_tab_wrap > ul > li:last-child {border: 2px solid var(--color-gray-dark); border-bottom: 2px solid var(--color-black-normal); margin-left: -2px;} .prd_intro_body_info_wrap {margin-top: 5.25rem; padding: 0 12.5rem;} .prd_intro_body_det_info > dl > dt {padding: 0.625rem; border-bottom: 1px solid var(--color-gray-dark);} .prd_intro_body_det_info_lst > li {margin-top: 1.5rem;} .prd_intro_body_det_info_lst .card {border-radius: 0.5rem; overflow: hidden;} .prd_intro_body_det_info_lst .card > .card-body {padding: 1rem 1.5rem; background-color: #FDFCFA;} .prd_intro_body_det_info_lst .card > .card-body > dl > dt {color: var(--color-main-dark); line-height: 1.5; font-size: var(--font-lg);} .prd_intro_body_det_info_lst .card > .card-body > dl > dd {margin-top: 0.5rem;} .prd_intro_body_det_info_lst .card > .card-body > dl > dd > ul > li {line-height: 1.75rem; font-weight: 500; display: flex; align-items: flex-start; justify-content: flex-start; gap: 0.25rem;} .prd_intro_body_det_info_lst .card > .card-body > dl > dd > ul > li em {font-weight: 700;} .prd_intro_body_det_info_img_wrap {position: relative; margin-top: 1rem; max-height: 1050px; overflow: hidden;} .prd_intro_body_det_info_img_wrap.active {max-height: none;} .prd_intro_body_det_info_img_btn {position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); display: flex; align-items: center; justify-content: center; gap: 0.625rem; width: 100%; background-color: #fff !important;} .prd_intro_body_divy_info {margin-top: 5rem;} /* 로그인 페이지 */ /* login */ .login_htby{height:100%;min-width:1280px;} .login_wrap{min-width:1280px;font-size:17px;} .login_logo{position:absolute;top:45px;left:60px;font-size:0;line-height:0;z-index:10;} .login_logolink{display:inline-block;font-size:1.3rem;line-height:1;font-family:'nsb';color:#000;} .login_logolink img{} .logo_logadmin{color:#353b46;} .login_tb_w{position:fixed;top:50%;left:50%;transform: translate(-50%, -50%);width:100%;height:100%;overflow:hidden;overflow-y:auto;max-width:600px;} .login_tb{display:table;width:100%;height:100%;table-layout: fixed;} .login_td{display:table-cell;vertical-align: middle;text-align:center;padding: 2.5rem;} .login_box{border-radius:10px;width:600px;margin:0 auto;padding:60px;} .login_tit > dl > dt {font-size:2.5rem;color:var(--font-black); line-height:1;font-weight: 600;} .login_tit > dl > dd {margin-top: 1rem; color:var(--font-black); font-size: 1.125rem;} .outsi_login .login_tit{color:#5a77a9;} .br_login .login_tit{color:#458654;} .login_form_w{display:table;width:100%;} .login_form_tr + .login_form_tr {margin-top: 0.5rem;} .outsi_login .logf_cell{border-bottom:2px solid #5a77a9;} .br_login .logf_cell{border-bottom:2px solid #458654;} .logf_cell.logfth{width:1px;} .logf_cell.logftd{} .logfth_sp{font-size:1rem;white-space:nowrap;display:inline-block;color:#353b46;font-family: 'Noto Sans Korean';padding:3px 10px 0;font-weight:500;line-height:1;} .logf_int{font-size:1rem; color:#333; padding: 0.75rem 1.5rem; width: 100%; border: 1px solid var(--font-gray); border-radius: 0.5rem;} .logf_int::-webkit-input-placeholder{font-weight:400;color:#556ea0;font-family: 'Noto Sans Korean';} .logf_int::-moz-input-placeholder{font-weight:400;color:#556ea0;font-family: 'Noto Sans Korean';} .logf_int:-ms-input-placeholder{font-weight:400;color:#556ea0 !important;font-family: 'Noto Sans Korean';} .logf_int::-ms-input-placeholder{font-weight:400;color:#556ea0 !important;font-family: 'Noto Sans Korean';} .logf_int::input-placeholder{font-weight:400;color:#556ea0;font-family: 'Noto Sans Korean';} .login_else_tb{display:table;width:100%;margin-top:15px;} .login_else_td{display:table-cell;vertical-align:middle;} .login_else_td.logelse01{text-align:left;} .login_else_td.logelse02{text-align:right;} .logchk_item{} .logchk{vertical-align: middle;} .logchk_lab{font-size:1rem;color:#1a2e6e;vertical-align: middle;padding-left:2px;} .logchk:checked + .logchk_lab{} .btn_logelselink{font-size:1rem;color:#1a2e6e;display:inline-block;} .btn_loginsm_w{margin-top:1rem;} .btn_loginsm{margin-bottom: 0;display:block;text-align:center;border:1px solid #353b46;background:#3c434f;padding:0.75rem 1rem;border-radius:0.5rem;width:100%;box-sizing:border-box;} .outsi_login .btn_loginsm{border:1px solid #5a77a9;background:#5a77a9;} .br_login .btn_loginsm{border:1px solid #458654;background:#458654;} .btn_loginsm:last-child{margin-bottom:0; border-radius: 0.5rem;} .loginsm_in{font-size:1.25rem; ;color:#fff; font-weight: 300;} .btn_loginsm.type2{color:#2157d0;background:#fff;font-weight:500;} .btn_loginsm.type2 .loginsm_in{font-size:1.3rem;font-family: 'Noto Sans Korean';color:#2157d0;} .loginsm_in{} .login_wrap .footer_z{position:absolute;bottom:0;left:0;width:100%;} input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { transition: background-color 5000s ease-in-out 0s; -webkit-transition: background-color 9999s ease-out; -webkit-box-shadow: 0 0 0px 1000px white inset !important; -webkit-text-fill-color: #000 !important; } form .VALIDATE_ERROR_MSG{-webkit-box-shadow: none;box-shadow: none;} form .VALIDATE_ERROR_MSG:focus {-webkit-box-shadow: none;box-shadow: none;} .logf_cell {position: relative;} .logf_cell > ul {position: absolute; top: 50%; right: 1.5rem; display: block; transform: translateY(-50%); display: flex; flex-wrap: nowrap; justify-content: flex-end; align-items: center; gap: 0.625rem;} .logf_cell > ul > li {line-height: 0;} .logf_cell > ul > li > a > img {width: 1.5rem; height: 1.5rem; object-fit: contain;} .logf_pwd_view_btn > i {display: block; width: 1.5rem; height: 1.5rem; background-image: url("/common/css/images/icon/eye-closed.svg"); background-repeat: no-repeat; background-size: contain;} .logf_pwd_wrap.active .logf_pwd_view_btn > i {background-image: url("/common/css/images/icon/eye.svg");} .log_txt_del_btn {display: none;} /* data-required */ form .VALIDATE_ERROR_MSG {border-color: #EE2626 !important;}