* {
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

#wrap {width: 100%; min-width: 1200px; position: relative; overflow: hidden;}
.inner {max-width: var(--inner-width); margin: 0 auto;}
.overlay {position: fixed; width: 100%; height: 100%; background: url("/images/nshop/common/bg_overlay.png") repeat 0 0; z-index: 59; display: none;}

:root {
  --inner-width: 1440px;
  --color-primary: #006740;
  --inner-padding: 2%;

  font-size: 16px;
}

.pct {display: block;}
.pc {display: block;}
.tablet {display: none;}
.mobile {display: none;}

/* 헤더 */
#header .headerUtilsWrap {padding: 16px 0; background: var(--color-primary);}
#header .headerUtilsWrap ul {display: flex; align-items: center; justify-content: flex-end; gap: 24px;}
#header .headerUtilsWrap ul li {position: relative;}
#header .headerUtilsWrap ul li a {display: flex; align-items: center; gap: 4px; font-size: 14px; color: #E4E5E7; line-height: 140%; letter-spacing: -0.07px;}
#header .headerUtilsWrap ul li .arrow_icon {width: 12px;}
#header .headerUtilsWrap .utilsSubmenu {display: none; position: absolute; left: 50%; top: calc(100% + 16px); transform: translateX(-50%); width: max-content; background: #fff; z-index: 61; border: 1px solid #E4E5E7; border-radius: 4px;}
#header .headerUtilsWrap .utilsSubmenu a {padding: 8px 12px; color: #444;}
#header .headerUtilsWrap .utilsSubmenu a:hover {background: var(--color-primary); color: #fff;}

#header .mobileMenu {display: none;}
#header .logoAreaWrap {position: relative; padding: 24px 0;}
#header .logoAreaWrap h1 {width: 260px; margin: 0 auto;}
#header .logoAreaWrap h1 img {vertical-align: top;}
#header .searchWrap {position: absolute; top: 50%; right: 0; transform: translateY(-50%); width: 270px; border-radius: 20px; border: 1px solid #fafafa; background: #fafafa;}
#header .searchWrap form {position: relative; width: 100%; padding: 0px 37px 0px 17px;}
#header .searchWrap .text {width: 100%; height: 46px; padding: 0; border: none; background: none;}
#header .searchWrap .text::placeholder {color: #8E8E8E; opacity: 1;}
#header .searchWrap .button {position: absolute; top: 50%; right: 6px; transform: translateY(-50%); width: 18px; padding: 8px; background-color: transparent;}
#header .searchWrap .search_hide {display: none;}

/* GNB */
#allMenu {display: none;}
#nav {position: relative; z-index: 60; border-bottom: 1px solid rgba(228, 228, 228, 0.50);}
#gnb .menu {display: flex; align-items: center; justify-content: space-between;}
#gnb .menu li {position: relative;}
#gnb .menu li > a {display: flex; align-items: center; justify-content: center; height: 70px; padding: 8px 4px; color: #444; font-weight: 500; letter-spacing: -0.08px; cursor: pointer;}
#gnb .menu > li:hover > a,
#gnb .menu li > a:hover, 
#gnb .menu li.active > a {color: var(--color-primary);}
#gnb .menu li:hover .submenu {display: block;}
#gnb .menu .submenu {display: none; position: absolute; top: 70px; left: 50%; transform: translateX(-50%); width: max-content; min-width: 190px; background: #fff;}
#gnb .menu .submenu a {display: block; padding: 10px; background: #fff; text-align: center; font-size: 14px; line-height: 140%; font-weight: 400; color: #444; transition: background-color 0.2s, color 0.2s;}
#gnb .menu .submenu a:hover {background: var(--color-primary); color: #fff;}

/* 메인 비주얼 */
.mainVisual {position: relative; height: 640px; overflow: hidden;}
.mainVisual .slide {width: 100%; max-width: 1920px; height: 640px; overflow: hidden;}
.mainVisual .slide img {width: 100%; height: 100%; object-fit: cover;}
.mainVisual .v_pc {display: inline; width: 100%;}
.mainVisual .v_mobile {display: none;}
.mainVisual .visualTextWrap {position: absolute; width: 400px; left: 50%; top: 50%; transform: translateY(-50%); margin-left: -720px; z-index: 55;}
.mainVisual .visualText h2 {font-size: 48px; font-weight: 600; line-height: 72px; margin-bottom: 8px; letter-spacing: -0.216px; color: #fff;}
.mainVisual .visualText p {font-size: 20px; line-height: 30px; color: rgba(255, 255, 255, 0.8);}
.mainVisual .mainSlideControlor {display: none; /*display: inline-flex;*/ align-items: center; gap: 8px; margin-top: 3rem;}
.mainVisual .mainSlideControlor .pagination-wrapper {display: flex; align-items: center; gap: 0.75rem; border-radius: 100px; background: rgba(68, 68, 68, 0.4);}
.mainVisual .mainSlideControlor .slick-custom-paging {padding-left: 20px; font-size: 16px; color: rgba(255, 255, 255, 0.4);}
.mainVisual .mainSlideControlor .slick-custom-paging li {display: none;}
.mainVisual .mainSlideControlor .slick-custom-paging li.slick-active {display: inline;}
.mainVisual .mainSlideControlor .slick-custom-paging .pagination-current {font-weight: 600; color: #fff;font-variant-numeric: tabular-nums;}
.mainVisual .mainSlideControlor .slick-btns {display: flex; align-items: center; gap: 2px;}
.mainVisual .mainSlideControlor .slick-btn-prev,
.mainVisual .mainSlideControlor .slick-btn-next {width: 40px; cursor: pointer;}
.mainVisual .mainSlideControlor .slick-btns img {vertical-align: top;}
.mainVisual .mainSlideControlor .slick-control button {display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 100px; background: rgba(68, 68, 68, 0.4); color: #fff;}
.mainVisual .mainSlideControlor .slick-control button img {width: 24px; vertical-align: top;}

/* 메인 컨텐츠 */
#mainContents .mainSectionWrap {padding: 100px 0;}
#mainContents .mainSectionWrap .sectionTitleArea .subTitle {display: block; padding-bottom: 4px; font-size: 18px; font-weight: 500; color: var(--color-primary);}
#mainContents .mainSectionWrap .sectionTitleArea .title {display: flex; align-items: center; justify-content: space-between; line-height: 140%;}
#mainContents .mainSectionWrap .sectionTitleArea .title h3 {font-size: 28px; font-weight: 600; line-height: 150%; color: #222;}
#mainContents .mainSectionWrap .sectionTitleArea .desc {display: block; padding-top: 8px; font-size: 1rem; line-height: 140%; color: #8E8E8E;}
#mainContents .mainSectionWrap section {max-width: var(--inner-width); margin: 0 auto;}

#mainContents .mainProductWrap section {display: flex; flex-direction: column; gap: 32px;}
#mainContents .mainProductWrap section + section {padding-top: 100px;}
#mainContents .mainProductWrap .sectionTitleArea .btnMore {display: none;}
#mainContents .mainProductWrap .btnMore {font-size: 18px; font-weight: 500; line-height: 140%; color: #8E8E8E; padding-right: 1.125rem; background: url('/images/nshop/main/main_prd_arr.png') no-repeat center right; background-size: 1rem;}
#mainContents .mainProductWrap .btnMore:hover {color: #444; background-image: url('/images/nshop/main/main_prd_arr_b.png');}
#mainContents .mainProductWrap .productList {overflow: hidden;}
#mainContents .mainProductWrap .productList .swiper-wrapper {display: flex; gap: 0;}
#mainContents .mainProductWrap .mainPrdPagination .swiper-pagination-bullet {width: 14px; height: 14px; margin: 0 8px; background: #E4E5E7; opacity: 1;}
#mainContents .mainProductWrap .mainPrdPagination .swiper-pagination-bullet.swiper-pagination-bullet-active {background: #8E8E8E;}
#mainContents .mainProductWrap .noDataArea {background: #fff; padding: 3.5rem 0; border-radius: 24px; text-align: center;}
#mainContents .mainProductWrap .noDataArea img {width: 64px; margin-bottom: 1rem;}
#mainContents .mainProductWrap .noDataArea p {font-size: 20px; font-weight: 500; line-height: 140%; color: #444;}

#mainContents .mainProductWrap .prdCategoryTab {display: flex; align-items: center; justify-content: space-between;}
#mainContents .mainProductWrap .prdCategoryTab ul {display: flex; align-items: center; flex-wrap: wrap; gap: 8px;}
#mainContents .mainProductWrap .prdCategoryTab ul li button {padding: 8px 24px; border: 1px solid var(--color-primary); border-radius: 40px; background: #fff; font-size: 18px; font-weight: 500; line-height: 140%; color: var(--color-primary); overflow: hidden; transition: background-color 0.2s, color 0.2s;}
#mainContents .mainProductWrap .prdCategoryTab ul li button:hover,
#mainContents .mainProductWrap .prdCategoryTab ul li button.active {background-color: var(--color-primary); color: #fff;}

#mainContents .mainSouvenirWrap section {display: flex; align-items: center; justify-content: space-between;}
#mainContents .mainSouvenirWrap .sectionTitleArea .subTitle {padding-bottom: 24px;}
#mainContents .mainSouvenirWrap .txtArea .btnMore {display: inline-flex; margin-top: 24px; border: 1px solid var(--color-primary); background: #fff; border-radius: 24px; padding: 8px 20px; font-size: 18px; font-weight: 600; color: var(--color-primary); line-height: 140%; vertical-align: top; transition: background-color 0.2s, color 0.2s;}
#mainContents .mainSouvenirWrap .txtArea .btnMore:hover {background-color: var(--color-primary); color: #fff;}
#mainContents .mainSouvenirWrap .imgArea {width: 800px; border-radius: 16px; overflow: hidden;}

#mainContents .quickMenuWrap .sectionTitleArea {margin-bottom: 24px;}
#mainContents .quickMenuWrap .quickMenu {display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;}
#mainContents .quickMenuWrap .quickMenu .quickMenuItem {height: 216px; padding: 40px 32px 0px; border-radius: 16px; border: 1px solid rgba(228, 228, 228, 0.50); background-color: #FFF; background-repeat: no-repeat;}
#mainContents .quickMenuWrap .quickMenu .quickMenuItem.quick_01 {background-image: url('/images/nshop/main/main_quick_01.png'); background-size: 145px; background-position: 98% 98%;}
#mainContents .quickMenuWrap .quickMenu .quickMenuItem.quick_02 {background-image: url('/images/nshop/main/main_quick_02.png'); background-size: 114px; background-position: 92% 85%;}
#mainContents .quickMenuWrap .quickMenu .quickMenuItem.quick_03 {background-image: url('/images/nshop/main/main_quick_03.png'); background-size: 110px; background-position: 92% 85%;}
#mainContents .quickMenuWrap .quickMenu .quickMenuItem.quick_04 {background-image: url('/images/nshop/main/main_quick_04.png'); background-size: 120px; background-position: 95% 90%;}
#mainContents .quickMenuWrap .quickMenu .title {display: block; padding-bottom: 8px; font-size: 20px; font-weight: 600; line-height: 150%; color: #444;}
#mainContents .quickMenuWrap .quickMenu p {font-size: 16px; font-weight: 400; line-height: 140%; color: #8E8E8E;}

/* 상품 리스트 */
.productList ul {display: grid; grid-template-columns: repeat(4, 1fr); gap: 96px 32px;}
.productList.wide ul {grid-template-columns: repeat(2, 1fr); gap: 32px;}
.productList.wide ul.noData {display: block;}
.productList li .thumbArea {position: relative; border-radius: 16px; border: 1px solid #F1F1F1;}
.productList li .thumbArea a {display: block; width: 100%; aspect-ratio: 1/1;}
.productList li .thumbArea img {width: 100%;  aspect-ratio: 1/1; border-radius: 16px; object-fit: cover;}
.productList li .thumb_btnArea {position: absolute; top: 1rem; right: 1rem; z-index: 1; display: flex; gap: .25rem;}
.productList li .thumb_btnArea .options {display: none;}
.productList li .thumb_btnArea .btnCartArea {position: relative;}
.productList li .thumb_btnArea .options {position: absolute; left: 0; top: 44px; z-index: 2;}
.productList li .thumb_btnArea .options {width: 80px; padding: 8px 0; background: #fff; border-radius: 12px; box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.10);}
.productList li .thumb_btnArea .options li button {width: 100%; background: #fff; padding: 8px 0; font-size: 14px; font-weight: 500; text-align: center; line-height: 22px; color: #444;}
.productList li .thumb_btnArea .btnCartArea:hover .btn_cart {margin-bottom: 4px; background-color: #909090;}
.productList li .thumb_btnArea .btnCartArea:hover .options {display: none;}
.productList li .productInfoArea {position: relative; margin-top: 24px;}
.productList li .productInfoArea .productName {display: block; font-size: 20px; font-weight: 500; line-height: 140%; color: #444;}
.productList li .productInfoArea .priceInfo {display: flex; flex-wrap: wrap; align-items: center; gap: 0px 8px; margin-top: .25rem; font-size: 22px; line-height: 150%;}
.productList li .productInfoArea .priceInfo .discount {font-weight: 600; color: var(--color-primary);}
.productList li .productInfoArea .priceInfo .discountPrice {font-weight: 700; color: #444;}
.productList li .productInfoArea .priceInfo .originPrice {font-weight: 400; color: #B0B0B0; text-decoration: line-through;}
.productList li .productInfoArea .iconArea {display: flex; align-items: center; gap: 4px; margin-top: 16px;}
.productList.wide > ul > li {display: flex; align-items: center; gap:32px; padding: 24px; background: #fff; border-radius: 20px;}
.productList.wide li .thumbArea {flex-shrink: 0; width: 160px;}
.productList.wide li .thumb_btnArea {top: 0; right: 0;}
.productList.wide li .thumb_btnArea .btn {box-shadow: none;}
.productList.wide li .productInfoArea {display: flex; flex-direction: column; justify-content: center; flex: 1; height: 100%; margin-top: 0;}

/* 서브페이지 공통 */
.mobile_location,
.mobile_titleArea {display: none;}

.contentsArea {max-width: var(--inner-width); padding: 100px 0; margin: 0 auto;}

.contentsArea .titleArea {display: flex; align-items: center; justify-content: space-between; margin-bottom: 56px;}
.contentsArea .titleArea .title {font-size: 28px; font-weight: 600; line-height: 150%; color: #222;}
.contentsArea .titleArea .location {display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 400; line-height: 140%; color: #444;}
.contentsArea .titleArea .location .bul {display: block; width: 16px; height: 16px; background: url('/images/nshop/common/icon_location.png') no-repeat center center; background-size: 100%;}

.contentsArea.product .titleArea {margin-bottom: 32px;}

.list_circle li {position: relative; padding-left: 12px; font-size: 14px; font-weight: 400;}
.list_circle li:not(:first-child) {margin-top: 4px;}
.list_circle li::before {content:''; position: absolute; left: 0px; top: 50%; transform: translateY(-50%); width: 3px; height: 3px; border-radius: 50%; background: #444;}

/* 탭 CSS */
.tabArea {display: flex; align-items: center; margin-bottom: 56px;}
.tabArea button {flex: 1; display: flex; align-items: center; justify-content: center; height: 60px; background: #FAFAFA; color: #444; border-left: 1px solid rgba(228, 228, 228, 0.50)}
.tabArea button:first-child {border-left: none;}
.tabArea button.active {background: #444; color: #fff;}

.tabList {display: flex; align-items: flex-end; border-bottom: 1px solid #F1F1F1;}
.tabList li {width: 160px; height: 3.5rem; background: #fff; border: 1px solid #F1F1F1; margin-bottom: -1px; margin-right: -1px;}
.tabList li a {display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: 16px; font-weight: 400; color: #8E8E8E;}
.tabList li.active {width: auto; height: 72px;}
.tabList li.active a {padding: 0 45px; font-weight: 600; color: #444;}

/* 로그인 */
.contentsArea.login .logInner {width: 400px; margin: 0 auto;}
.contentsArea.login .titleArea {justify-content: center; margin-bottom: 24px;}
.contentsArea.login .loginForm {display: flex; flex-direction: column; gap: 1rem;}
.contentsArea.login .inputForm {display: flex; flex-direction: column; gap: .5rem;}
.contentsArea.login .loginForm .loginUtils {display: flex; align-items: center; justify-content: space-between;}
.contentsArea.login .loginForm .loginUtils .comm_check_label {color: #8E8E8E;}
.contentsArea.login .loginForm .loginUtils .comm_check_label.check_on {color: #444;}
.contentsArea.login .loginForm .loginUtils .btnFindIdPw {font-size: .875rem; font-weight: 400; color: #444;}
.contentsArea.login .loginForm .loginBul {position: relative; display: flex; align-items: center; justify-content: center;}
.contentsArea.login .loginForm .loginBul::after {content: ''; display: block; position: absolute; left: 0; top: 50%; width: 100%; height: 1px; background: rgba(228, 228, 228, 0.50); z-index: 0;}
.contentsArea.login .loginForm .loginBul span {position: relative; font-size: .875rem; font-weight: 400; padding: 0 .625rem; background: #fff; color: #8E8E8E; z-index: 1;}
.contentsArea.login .loginForm .loginBtnArea {display: flex; flex-direction: column; gap: .5rem;}
.contentsArea.login .loginForm .loginBtnArea button {display: flex; align-items: center; justify-content: center; gap: .5rem; width: 100%; height: 3.5rem; border-radius: 4px; font-size: 1.125rem; font-weight: 500;}
.contentsArea.login .loginForm .loginBtnArea button img {width: 1.25rem;}
.contentsArea.login .loginForm .loginBtnArea button.btnKakaoLogin {background: #F7E600; color: #391B1B;}
.contentsArea.login .loginForm .loginBtnArea button.btnNaverLogin {background: #43C63A; color: #fff;}
.contentsArea.login .loginForm .loginBtnArea button.btnNaverLogin img {width: 1.1875rem;}
.contentsArea.login .loginForm .joinInfo {font-size: 1.125rem; font-weight: 500; color: #8E8E8E; text-align: center; line-height: 1.5625rem;}
.contentsArea.login .loginForm .joinInfo a {margin-left: .25rem; color: #444; text-decoration: underline;}
.contentsArea.login .nonMemberWrap {margin-top: 6.25rem;}
.contentsArea.login .nonMemberWrap .btnFindOrder {width: 100%; margin-top: 1rem;}
.contentsArea.login .nonMemberWrap p {margin-top: 1.5rem; font-size: .75rem; font-weight: 400; color: #B0B0B0; line-height: 140%; text-align: center;}

.contentsArea.login .payPrivate {margin-top: 100px;}
.contentsArea.login .payPrivate .policyWrap {height: 250px; padding: 1rem; background: #f1f1f1; border-radius: 4px; overflow-y: scroll;}
.contentsArea.login .payPrivate .policyWrap * {font-size: .875rem; color: #8E8E8E; line-height: 140%;}
.contentsArea.login .payPrivate .agr {display: flex; justify-content: flex-end; margin-top: 1rem;}
.contentsArea.login .payPrivate .agr .comm_check_label {color: #222; font-size: 1rem;}

/* 회원단 CSS */
.contentsArea.member .titleArea {justify-content: center; margin-bottom: 24px;}
.contentsArea.member .joinAreeArea {max-width: 800px; margin: 0 auto;}
.contentsArea.member .agreeArea + .agreeArea {margin-top: 1.5rem;}
.contentsArea.member .agreeArea .comm_check_label {display: inline-flex; margin-bottom: .875rem; font-size: 1rem; color: #222; vertical-align: top;}
.contentsArea.member .agreeArea .textarea {resize:none; box-sizing:border-box; width:100%; height:132px; background:rgba(228, 228, 228, 0.50); border: none;  overflow-y:scroll; padding: 1rem; border-radius: 4px;}
.contentsArea.member .agreeArea .textarea * {font-size:.875rem; color: #8E8E8E; line-height: 140%;}

.contentsArea.member .member_form {width: 484px; margin: 0 auto;}
.contentsArea.member .member_form .join_form {display: flex; flex-direction: column; gap: 1.5rem;}
.contentsArea.member .join_form dl dt {margin-bottom: .5rem; color: #222; font-weight: 500;}
.contentsArea.member .join_form dl dt .require {position: relative; top: -0.25rem; color: #FF3B20;}
.contentsArea.member .join_form dl dd {display: flex; flex-direction: column; gap: .5rem;}
.contentsArea.member .join_form dl dd .inputWrap {display: flex; align-items: center; gap: .625rem;}
.contentsArea.member .join_form dl dd .btn_memgray {width: 158px;}
.contentsArea.member .join_form dl dd .numberWrap {display: flex; align-items: center; gap: .25rem;}
.contentsArea.member .join_form dl dd .numberWrap input {flex: 1;}
.contentsArea.member .join_form dl dd .nice-select {height: 3.25rem; line-height: 3.25rem; margin: 0; font-size: 1rem;}
.contentsArea.member .join_form dl dd .numberWrap .nice-select {width: 150px;}
.contentsArea.member .join_form dl dd .emailInputWrap {display: flex; align-items: center; gap: .25rem;}
.contentsArea.member .join_form dl dd .emailInputWrap input {flex: 1;}
.contentsArea.member .join_form dl dd .dc {font-size: .875rem; font-weight: 400; line-height: 140%; color: #8E8E8E;}
.contentsArea.member .join_form .consentArea {display: flex; flex-direction: column; gap: .5rem; padding: 1.5rem 0; border-top: 1px solid rgba(228, 228, 228, 0.50); border-bottom: 1px solid rgba(228, 228, 228, 0.50);}
.contentsArea.member .join_form .consentArea label {font-size: 1rem; font-weight: 500; color: #222;}
.contentsArea.member .join_form .tipBox {background: #F1F1F1; padding: 1rem; text-align: center; font-size: .875rem; font-weight: 400; line-height: 140%; color: #8E8E8E;}
.contentsArea.member.break textarea {resize: none; padding: .875rem;}

.contentsArea.member .findInfoWrap {display: flex; justify-content: space-between; width: 900px; margin: 0 auto;}
.contentsArea.member .findInfoWrap .cols {width: 400px;}
.contentsArea.member .findInfoWrap .cols .title {text-align: center; margin-bottom: 1.5rem; font-size: 28px; font-weight: 600; line-height: 150%;}
.contentsArea.member .findInfoWrap .cols .idpw {display: flex; flex-direction: column; gap: 1rem;}
.contentsArea.member .findInfoWrap .cols .idpw .inputArea {display: flex; flex-direction: column; gap: .5rem;}
.contentsArea.member .findInfoWrap .cols .idpw p {font-size: .75rem; font-weight: 400; line-height: 140%; color: #8E8E8E; word-break: keep-all;}

.contentsArea.member .resultResultInfo {width: 900px; margin: 0 auto; padding: 5rem 1rem; background: #f4f4f4; border-radius: 4px; text-align: center;}

/* 가격대별 상품 검색 */
.searchForm {background:#fafafa; box-sizing:border-box; padding:24px 32px; margin-bottom:32px; border-radius: 16px;}
.searchForm .price_select {display:none;}
.searchForm .search_select {display: flex; flex-direction: column; gap: 12px;}
.searchForm dl {display: flex; align-items: center; gap: 24px;}
.searchForm dl dt {flex-shrink: 0; width: 130px; font-size: 16px; font-weight: 500; line-height: 140%; color: #8E8E8E;}
.searchForm dl dd {display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; font-size: 16px; font-weight: 400; color: #8E8E8E;}
.searchForm dl dd .select {width: 240px;}
.searchForm .search_keyword {padding: 1rem 0; margin: 1rem 0; border-top: 1px dashed #E4E5E7; border-bottom: 1px dashed #E4E5E7; }
.searchForm .search_btn_area .btn_refresh {display: flex; align-items: center; justify-content: center; gap: 4px; width: 100%; background: transparent; font-size: 16px; line-height: 24px; font-weight: 500; color: rgba(34, 34, 34, 0.80);}
.searchForm .search_btn_area .btn_refresh img {width: 1rem;}
.searchForm .input_area {position: relative; display: inline-flex;}
.searchForm .input_area .btn_keyword_search {position: absolute; top: 0; right: 0; width: 44px; height: 44px; background: transparent; z-index: 1;}
.searchForm .input_area .btn_keyword_search img {width: 18px; vertical-align: top;}
.searchForm .search_name {width: 485px; height: 44px; padding: 12px; font-size: 14px; padding-right: 44px;}

/* 상품 리스트 */
.product #list .sort {display: flex; align-items: center; justify-content: space-between; margin-bottom:56px; padding: 16px 0; border-top: 1px solid rgba(228, 228, 228, 0.50);
border-bottom: 1px solid rgba(228, 228, 228, 0.50);}
.product #list .sort .select {height: 40px; line-height: 40px; margin-right: 0;}

.pdt_list:after {content:''; display:block; clear:both;}
.pdt_list li {width:25%; float:left; text-align:center; margin-bottom:35px;}
.pdt_list li a {display:block; line-height:28px;}
.pdt_list li > a > img {width:95%; max-width:320px; max-height:320px;}
.pdt_list li .pdt_image {margin-bottom:5px;}
.pdt_list li .pdt_image img {border:1px solid #dfdfdf;}
.pdt_list li .pdt_name {color:#111;} */

/* 상품 뷰 */
.productTopArea {display: flex; justify-content: space-between;}
.product #view .productTopArea {display: flex; gap: 8%; justify-content: space-between; align-items: flex-start;}

.product #view .productTopArea .productImgWrap {display: flex; flex: 1; gap: 16px; overflow: hidden;}
.product #view .productTopArea .productImgWrap .swiper-slide {height: fit-content; aspect-ratio: 1/1; border-radius: 8px; overflow: hidden;}
.product #view .productTopArea .productImgWrap .prdSlideMain {flex: 1;}
.product #view .productTopArea .productImgWrap .prdSlideMain img {width: 100%; aspect-ratio: 1/1; object-fit: cover;}
.product #view .productTopArea .productImgWrap .prdThumbWrap {display: flex; flex-direction: column; gap: 16px; overflow: hidden;}
.product #view .productTopArea .productImgWrap .prdThumbWrap .btnThumbNav {width: 100%; height: 32px; border: 1px solid #e4e4e4; border-radius: 4px; background-color: #fff; background-repeat: no-repeat; background-position: center center; background-size: 16px; cursor: pointer; font-size: 0; line-height: 0; text-indent: -9999px;}
.product #view .productTopArea .productImgWrap .prdThumbWrap .btnThumbNav.btnThumbPrev {background-image: url('/images/nshop/common/arrow_top.png');}
.product #view .productTopArea .productImgWrap .prdThumbWrap .btnThumbNav.btnThumbNext {background-image: url('/images/nshop/common/arrow_down.png');}

.product #view .productTopArea .productImgWrap .prdSlideThumb {display: flex; flex-direction: column; flex: 1; width: 160px; overflow: hidden;}
.product #view .productTopArea .productImgWrap .prdSlideThumb .swiper-slide {width: 160px; height: 160px; cursor: pointer; overflow: hidden;}
.product #view .productTopArea .productImgWrap .prdSlideThumb .swiper-slide img {width: 100%; height: 100%; object-fit: cover; border-radius: 8px;}
.product #view .productTopArea .productImgWrap .btn_wish {display: none;}

.product #view .productTopArea .productInfoWrap {display: flex; flex-direction: column; gap: 1.5rem; flex-shrink: 0; width: 500px;}
.product #view .productTopArea .productDetail {display: flex; flex-direction: column; gap: 1rem;}
.product #view .productTopArea .productDetail .iconArea {display: flex; align-items: center; gap: 4px;}
.product #view .productTopArea .productDetail .productNameArea .name {display: block; font-size: 24px; font-weight: 600; line-height: 150%;}
.product #view .productTopArea .productDetail .productNameArea .desc {margin-top: .25rem; font-size: .875rem; font-weight: 400; line-height: 140%; color: #8E8E8E;}

.product #view .productTopArea .productPrice .originPrice {display: block; font-size: .875rem; font-weight: 400; line-height: 140%; text-decoration: line-through; color: #B0B0B0;}
.product #view .productTopArea .productPrice .priceInfo {display: flex; align-items: center; gap: .5rem; margin-top: 4px; font-size: 22px; font-weight: 600; line-height: 150%;}
.product #view .productTopArea .productPrice .priceInfo .discount {color: var(--color-primary);}
.product #view .productTopArea .productPrice .priceInfo .discountPrice {font-weight: 700;}

.product #view .purchaseOptionsContainer {display: flex; flex-direction: column; gap: 1.5rem;}
.product #view .productOption {border-top: 1px solid #F1F1F1;}
.product #view .productOption .optionSection {display: flex; flex-direction: column; gap: 1rem; padding: 1.5rem 0; border-bottom: 1px solid #F1F1F1;}
.product #view .productOption .optionSection dl {display: flex; align-items: center; gap: 1.25rem; font-size: .875rem; font-weight: 400; line-height: 140%;}
.product #view .productOption .optionSection dl dt {flex-shrink: 0; width: 5rem; color: #8E8E8E;}
.product #view .productOption .optionSection dl dd {display: flex; align-items: center; flex-wrap: wrap; flex: 1;}
.product #view .productOption .optionSection dl dd .custom-selectBox {flex: 1; width: 100%;}
.product #view .productOption .optionSection dl dd .custom-selectBox .selectBtn {opacity: 0.5;}
.product #view .productOption .optionSection dl dd .custom-selectBox .selectBtn.selected {color: #8E8E8E; opacity: 1;}
.product #view .productOption .optionSection dl dd.comm_radio_group {gap: .5rem 3rem;}
.product #view .productOption .optionSection dl.pickup_time dd {display: flex; align-items: center; gap: .5rem;}
.product #view .productOption .optionSection.additionalOption {padding: .75rem 0; transition: padding 0.3s ease;}
.product #view .productOption .optionSection.additionalOption dl {flex-direction: column; align-items: flex-start; gap: .5rem;}
.product #view .productOption .optionSection.additionalOption dl dt {display: flex; width: 100%; align-items: center; justify-content: space-between; cursor: pointer; user-select: none; }
.product #view .productOption .optionSection.additionalOption dl dt .viewBtn {display: inline-flex; width: 16px; height: 16px; background-color: transparent; background-repeat: no-repeat; background-position: center center; background-size: 100%; background-image: url('/images/nshop/common/btn_plus_2.png'); vertical-align: middle; font-size: 0; line-height: 0; text-indent: -9999px;}
.product #view .productOption .optionSection.additionalOption dl dd {display: none; width: 100%; flex-direction: column; gap: 8px;}
.product #view .productOption .optionSection.additionalOption.open {padding: 24px 0;}
.product #view .productOption .optionSection.additionalOption.open dl dt .viewBtn {background-image: url('/images/nshop/common/btn_minus_2.png');}
.product #view .productOption .optionSection.additionalOption.open dl dd {display: flex;}
.product #view .productOption .optionSection dl.previewOption {align-items: flex-start;}
.product #view .productOption .optionSection dl.previewOption dt {line-height: 44px;}
.product #view .productOption .optionSection .previewOptionArea {display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;}
.product #view .productOption .optionSection .previewOptionArea .previewOptionItem {border: 1px solid #F1F1F1; border-radius: 4px; overflow: hidden; cursor: pointer;}
.product #view .productOption .optionSection .previewOptionArea .previewOptionItem.selected {border-color: var(--color-primary);}
.product #view .productOption .optionSection .previewOptionArea .previewOptionItem img {width: 100%; aspect-ratio: 1/1; object-fit: cover; vertical-align: top;}
.product #view .productOption .optionSection .previewOptionArea .previewOptionItem .prdInfo {padding: .5rem; text-align: center;}
.product #view .productOption .optionSection .previewOptionArea .previewOptionItem .prdInfo .name {font-size: .875rem; font-weight: 400; line-height: 140%;   white-space: pre-line;}
.product #view .productOption .optionSection .previewOptionArea .previewOptionItem .prdInfo .price {display: block; padding-top: .25rem; font-size: .875rem; font-weight: 600; line-height: 140%;}

.product #view .orderSummaryArea {display: flex; flex-direction: column; gap: 1.5rem;}
.product #view .selectedOptionBox {display: flex; flex-direction: column; gap: 1rem; padding: 1rem; background: #FAFAFA; border-radius: 4px;}
.product #view .selectedOptionBox .selectedOptionItem {display: flex; align-items: center; gap: 1rem;}
.product #view .selectedOptionBox .selectedOptionItem .name {flex: 1; font-size: .875rem; font-weight: 400; line-height: 140%;}
.product #view .selectedOptionBox .selectedOptionItem .price {flex-shrink: 0; width: 100px; font-size: 1rem; font-weight: 600; line-height: 140%; color: #222; text-align: right; word-break: break-all;}
.product #view .selectedOptionBox .selectedOptionItem .btnDelete {display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 16px; height: 16px; background: none; border: none;}
.product #view .selectedOptionBox .selectedOptionItem.additional .name {color: #8E8E8E;}

.product #view .productTotalPrice dl {display: flex; align-items: center; justify-content: space-between; gap: 16px;}
.product #view .productTotalPrice dl dt {flex-shrink: 0; font-size: 1rem; font-weight: 600; line-height: 140%; color: #222;}
.product #view .productTotalPrice dl dt strong {color: var(--color-primary);}
.product #view .productTotalPrice dl dd {font-size: 1.375rem; font-weight: 700; line-height: 150%; color: var(--color-primary);}

.product #view .productTopArea .purchaseBtnArea {display: flex; align-items: center; gap: 8px;}
.product #view .productTopArea .purchaseBtnArea .btn_greenBig {min-width: auto; flex: 1;}
.product #view .productTopArea .purchaseBtnArea .btn_grayLineBig {min-width: 120px; font-weight: 400;}
.product #view .productTopArea .note {font-size: .875rem; font-weight: 400; line-height: 140%; color: #B0B0B0;}

.product #view .detailWrap {display: flex; flex-direction: column; gap: 160px; margin-top: 3.5rem;}

.product #view .detailWrap .detail_con {display: flex; flex-direction: column; gap: 24px; padding-top: 40px;}
.product #view .detailWrap .detail_con .productList ul {grid-template-columns: repeat(5, 1fr);}

.product #view .detailWrap .replyForm {display: flex; flex-direction: column; gap: 16px;}
.product #view .detailWrap .replyForm dl {display: flex; gap: 20px;}
.product #view .detailWrap .replyForm dl dt {flex-shrink: 0; width: 5rem; font-size: .875rem; font-weight: 400; color: #8E8E8E; line-height: 140%;}
.product #view .detailWrap .replyForm dl dd {flex: 1;}
.product #view .detailWrap .replyForm dl dd.star_rating {display: flex; flex-wrap: wrap; align-items: center; gap: 8px 48px;}
.product #view .detailWrap .replyForm dl dd.star_rating .comm_radio_label {margin: 0px;}
.product #view .detailWrap .replyForm dl dd.star_rating img {height: 16px;}
.product #view .detailWrap .replyForm dl dd .commentBox {display: flex; gap: .5rem; height: 80px;}
.product #view .detailWrap .replyForm dl dd .commentBox textarea {flex: 1; padding: 10px 16px; border: 1px solid #F1F1F1; border-radius: 4px; resize: none;}
.product #view .detailWrap .replyForm dl dd .commentBox .btn_reply {display: flex; align-items: center; justify-content: center; width: 5rem; flex-shrink: 0; border-radius: 4px; border: none; background: #444; font-size: 18px; font-weight: 600; color: #fff;}
.product #view .detailWrap .replyForm .note {padding-top: .5rem; font-size: 14px; font-weight: 400; line-height: 140%; color: #8E8E8E;}

.product #view .detailWrap .replyList {margin-top: 1rem;}
.product #view .detailWrap .replyList ul {border-top:1px solid #444;}
.product #view .detailWrap .replyList ul li {display: flex; flex-direction: column; gap: .5rem; border-bottom:1px solid #F1F1F1; padding: 24px;}
.product #view .detailWrap .replyList ul li .name {display: flex; align-items: center; gap: .5rem; color:#222;}
.product #view .detailWrap .replyList ul li .name .date {color:#8E8E8E; font-size:14px;}
.product #view .detailWrap .replyList ul li .star img {vertical-align:top; height: 1rem;}
.product #view .detailWrap .replyList ul li .replyTxt {font-size: 14px; font-weight: 400; color: #444; line-height: 140%;}

#detail4 .detail_con .noticeBox {padding: 24px; background: #f4f4f4;}
#detail4 .detail_con .noticeCon > dl > dt {font-size:18px; font-weight: 600; line-height: 140%;}
#detail4 .detail_con .noticeCon > dl > dd {margin-top: .5rem;}

#productBottomDrawer {display: none;}

/* 커스텀 셀렉트 박스 */
.custom-selectBox {position: relative; display: inline-flex; width: auto; vertical-align: top;}
.custom-selectBox .selectBtn {display: flex; align-items: center; width: 100%; height: 44px; padding: 12px 40px 12px 12px; box-sizing: border-box; border: 1px solid #E4E5E7; border-radius: 4px; background: #fff url('/images/nshop/common/arrow_down.png') no-repeat calc(100% - 12px) center; background-size: 17px; font-size: 14px; font-weight: 400; color: #8E8E8E;}
.custom-selectBox .selectBtn.selected {color: #444;}
.custom-selectBox .selectList {display: none; position: absolute; top: calc(100% - 1px); left: 0; width: 100%; background: #fff; border: 1px solid rgba(228, 228, 228, 0.50); border-radius: 4px; padding-top: 8px; z-index: 10; box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.10);}
.custom-selectBox .selectList ul {max-height: 230px; overflow-y: auto;}
.custom-selectBox .selectList ul li button {width: 100%; padding: 12px 16px; background: #fff; font-size: 14px; font-weight: 400; line-height: 140%; text-align: left; color: #444;}
.custom-selectBox .selectList ul li button:hover {background: #fafafa;}
.custom-selectBox .selectList ul li button.selected {color: #006740; background-image: url('/images/nshop/common/icon_check_green.png'); background-repeat: no-repeat; background-size: 16px; background-position: calc(100% - 16px) center; padding-right: 40px;}

/* 수량 선택 */
.quantityBox {display: flex; align-items: center; justify-content: center; flex-shrink: 0; gap: 6px;}
.quantityBox button {width: 20px; background: none;}
.quantityBox button img {vertical-align: top;}
.quantityBox .text {width: 50px; height: 30px; padding: 4px; text-align: center; font-size: 16px; font-weight: 400; color: #222;}

/* 장바구니 CSS */
.cart .cartSelectArea {display: flex; align-items: center; justify-content: center; gap: 16px; margin-bottom: 56px;}
.cart .cartSelectArea .nice-select {border-color: var(--color-primary) !important;}
.cart .cartSelectArea .custom-selectBox {width: 400px;}
.cart .cartSelectArea .selectBox {flex: 1; max-width: 400px;}
.cart .cartSelectArea .selectBox .select {width: 100%;}
.cart .cartSelectArea .selectBox .select .current {display: block; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.cart .cartSelectArea .btnAddAddress {display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 16px; background: #F0F8F5; font-size: 14px; font-weight: 600; line-height: 140%; color: #006740;}
.cart .cartSelectArea .btnAddAddress img {width: 14px;}
/* .cart .orderInfoText2 {display: flex; align-items: center; justify-content: center;  margin-top: -20px; font-size: .865rem; font-weight: 700; line-height: 140%; color: #222; margin-bottom: 20px;}
.cart .orderInfoText3 {display: flex; align-items: center; justify-content: center;  margin-top: -20px; font-size: .865rem; font-weight: 700; line-height: 140%; color: #222; margin-bottom: 20px;  margin-left: -38px;} */
.cart .orderCautionInfoList {display: flex; justify-content: center; margin-top: -20px; margin-bottom: 20px;}
.cart .orderCautionInfoList ul {width: 350px;}
.cart .orderCautionInfoList li {display: flex; gap: 2px; font-size: .865rem; font-weight: 700; line-height: 140%; color: #222;}
.cart .orderCautionInfoList li::before {content: '*';}

.cart .orderSelectArea {display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: 1.5rem;}
.cart .orderSelectArea .orderSelect {display: flex; align-items: center;}
.cart .orderSelectArea .orderSelect li {position: relative; padding-left: 16px; margin-left: 16px;}
.cart .orderSelectArea .orderSelect li:first-child {padding-left: 0; margin-left: 0;}
.cart .orderSelectArea .orderSelect li:not(:first-child)::before {content: ''; position: absolute; left: 0; top: 50%; width: 1px; height: 80%; transform: translateY(-50%); background: #E4E5E7;}
.cart .orderSelectArea .orderSelect li button {background: transparent; color: #444; font-size: .875rem; font-weight: 400; line-height: 140%;}
.cart .orderSelectArea .btnChangeDelivery {display: flex; align-items: center; gap: 4px; font-weight: 600; line-height: 140%; color: #006740; background: #fff;}
.cart .orderSelectArea .btnChangeDelivery img {width: 1rem;}

.cart .mobilePrdBoxWrap {display:none;}
.cart .tblType01 table th, .cart .tblType01 table td {text-align:center;}
.cart .tblType01 table td {border-left: 1px solid rgba(228, 228, 228, 0.50); font-size: 16px; font-weight: 400; line-height: 140%; color: #222;}
.cart .tblType01 table td:first-child {border-left: none;}
.cart .tblType01 table td.prd_cell {padding-left: 32px; padding-right: 32px; text-align: left;}
.cart .tblType01 table td.amount,
.cart .tblType01 table td.price {font-weight: 600;}
.cart .tblType01 table .prdInfoArea {display: flex; align-items: center; gap: 40px;}
.cart .tblType01 table .prdInfoArea label {flex-shrink: 0;}
.cart .tblType01 table .imgArea {flex-shrink: 0; width: 80px; height: 80px;}
.cart .tblType01 table .imgArea img {width: 100%; height: 100%; object-fit: cover;}
.cart .tblType01 table .pdtArea .name {font-weight: 500; color: #222;}
.cart .tblType01 table .pdtArea .option {display: flex; flex-direction: column; gap: 4px; padding-top: 10px; font-size: 14px; font-weight: 400; line-height: 140%; color: #8E8E8E;}
.cart .tblType01 table .btn_pickup {display: inline-flex; align-items: center; background: none; color: #006740; font-size: 16px; font-weight: 600; text-decoration: underline;}
.cart .tblType01 table .note {margin-top: 10px; font-size: 12px; font-weight: 400; color: #EA0000; line-height: 1.2;}
.cart .tblType01 table .note img {width: 14px;}
.cart .tblType01 table .sold_out .imgArea,
.cart .tblType01 table .sold_out td:not(.prd_cell) {opacity: 0.4;}

.cart .payForm {margin-top: 160px;}
.cart .payForm .tabList {margin-bottom: 40px;}
.cart .payForm .tblType03 .ico_delivery01,
.cart .payForm .tblType03 .ico_delivery02,
.cart .payForm .tblType03 .ico_delivery03 {margin-left: 8px;}

.cart .orderTotalBox {display: flex; flex-direction: column; gap: 1rem; align-items: flex-end; margin-top: 1.5rem; padding: 2rem; background: #FAFAFA; border-radius: 4px;}
.cart .orderTotalBox dl {display: flex; align-items: center; justify-content: space-between; width: 400px;}
.cart .orderTotalBox dl dt {color: #444; font-weight: 500; line-height: 140%;}
.cart .orderTotalBox dl dd {color: #444; font-weight: 600; line-height: 140%;}
.cart .orderTotalBox dl.total {padding-top: 1rem; border-top: 1px dashed #E4E5E7;}
.cart .orderTotalBox dl.total dt {color: #222; font-weight: 600;}
.cart .orderTotalBox dl.total dd {font-size: 1.375rem; font-weight: 700; line-height: 150%; color: var(--color-primary);}

#changeDeliveryModal .totalInfo {padding: .5rem 0;}
#changeDeliveryModal .tblType01 {border-top-color: rgba(228, 228, 228, 0.50); color: #444; max-height: calc(100vh - 450px); overflow-y: auto;}
#changeDeliveryModal .tblType01 table td.prd_cell {padding: 1rem;}
#changeDeliveryModal .labelArea {margin-top: 24px;}
#changeDeliveryModal .labelArea .comm_radio_label {font-size: 18px; font-weight: 500;}

#pickupStoreModal .desc {padding-bottom: 1rem;}
#pickupStoreModal .selectBoxArea {height: 240px;}
#pickupStoreModal .selectBoxArea .nice-select .list {max-height: 200px;}

.addDeliveryForm {width: calc(100% + 24px); max-height: calc(100dvh - 250px); padding-right: 24px; overflow-y: auto;}
.addDeliveryForm .inputForm {display: flex; flex-direction: column; gap: 1.5rem;} 
.addDeliveryForm .inputForm dl dt {padding-bottom: .5rem; font-weight: 500; line-height: 140%;}
.addDeliveryForm .inputForm dl dd {display: flex; flex-direction: column; gap: .5rem;}
.addDeliveryForm .inputForm dl dd input.text {color: #8E8E8E;}
.addDeliveryForm .inputForm dl dd .numberWrap {display: flex; align-items: center; gap: .25rem;}
.addDeliveryForm .inputForm dl dd .numberWrap .select,
.addDeliveryForm .inputForm dl dd .numberWrap input.text {flex: 1;}
.addDeliveryForm .inputForm dl dd .numberWrap .select {max-width: 30%;}
.addDeliveryForm .inputForm dl dd .inputWrap {display: flex; align-items: center; gap: .625rem;}
.addDeliveryForm .inputForm dl dd .inputWrap .btn_memgray {width: 158px;}
.addDeliveryForm .agreeForm {padding: 1.5rem 0; margin-top: 1.5rem; border-top: 1px solid #F1F1F1; border-bottom: 1px solid #F1F1F1;}
.addDeliveryForm .agreeForm .agreeCheckArea {display: flex; flex-direction: column; gap: .5rem;}
.addDeliveryForm .agreeForm .agreeCheckArea label {font-size: 16px; font-weight: 500; color: #222;}
.addDeliveryForm .agreeForm .privacyPolicy {max-height: 7.5rem; margin-top: .875rem; padding: 1rem; background: #F1F1F1; border-radius: 4px; font-size: .875rem; font-weight: 400; line-height: 140%; color: #8E8E8E; overflow-y: auto;}

.cart .payProcessBox {border:1px solid #F1F1F1; padding:40px 32px;}
.cart .payProcessBox .processInner {display: flex; flex-direction: column; align-items: center; gap: 1.5rem;}
.cart .payProcessBox img {display:block; margin:0 auto; width: 4rem;}
.cart .payProcessBox .notice {font-size: 22px; color: #222; font-weight: 700; line-height: 150%; word-break: keep-all;}
.cart .payProcessBox .notice strong {font-weight: 700;}
.cart .payProcessBox .infoBox {width: 100%; padding: 24px 16px; background: #FAFAFA; text-align: center; word-break: keep-all;}
.cart .payProcessBox .infoBox .title {color: var(--color-primary); line-height: 140%;}
.cart .payProcessBox .infoBox p {color: #444; font-weight: 400; line-height: 140%;}

.cart .payForm .tblType03 td {color: #8E8E8E;}
.cart .payForm .tblType03 .text {width: 100%; vertical-align:top; color: #8E8E8E;}
.cart .payForm .tblType03 .select {min-width: 100px; height: 52px; line-height: 52px; font-size: 16px;}
.cart .payForm .tblType03 .phoneInputWrap .tel {width:100px;}
.cart .payForm .tblType03 .emailInputWrap {display: flex; align-items: center; gap: .25rem;}
.cart .payForm .tblType03 .emailInputWrap input.text {flex: 1;}
.cart .payForm .tblType03 .emailInputWrap .select {width: 200px;}
.cart .payForm .tblType03 .addressInputWrap {display: flex; flex-direction: column; gap: 8px;}
.cart .payForm .tblType03 .addressInputWrap .zipcodeWrap {display: flex; align-items: center; gap: .625rem;}
.cart .payForm .tblType03 .addressInputWrap .zipcodeWrap .zipcode {width: 200px;}
.cart .payForm .tblType03 .addressInputWrap .zipcodeWrap .btn_memgray {width: 158px;}
.cart .payForm .tblType03 .addressInputWrap .addressWrap {display: flex; align-items: center; gap: .5rem;}
.cart .payForm .tblType03 .giftInputWrap {display: flex; flex-direction: column; align-items: flex-start; gap: 8px;}
.cart .payForm .tblType03 .giftInputWrap .giftInputList {display: flex; align-items: center; gap: .25rem; flex-wrap: wrap;}
.cart .payForm .tblType03 .giftInputWrap label {margin-right: 8px;}
.cart .payForm .tblType03 .giftInputWrap .text {width: 250px;}
.cart .payForm .tblType03 .giftInputWrap .text:read-only {background-color: #F1F1F1; cursor: not-allowed;}
.cart .payForm .tblType03 .giftInputWrap .card {width: 120px;}
.cart .payForm .tblType03 .textarea {width:100%; height: 196px; resize:none; border-radius: 4px;}
.cart .payForm .tblType03 .comm_radio_label {margin-right: 48px;}
.cart .payForm .tblType03 .point {width: 100px; vertical-align: middle;}
.cart .payForm .tblType03 .infoText {margin-top: 8px; font-size: .875rem; font-weight: 400; line-height: 140%; color: #222;}
.cart .payForm .tblType03 .bankinfo {min-width: 280px;}
.cart .payForm .tblType03 .bankinfo .current {display: block; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.cart .payForm .tblType03 .receipt_box {margin-top: 10px;}
.cart .payForm .bankInfoText {padding-left: 16px; font-size: .875rem;}
.cart .payForm .tblType03 .bill {margin-top: .5rem;}
.cart .payForm .checkLabelArea {margin-bottom: 1rem;}
.cart .payForm .orderInfoText {margin-bottom: 1rem; font-size: .875rem; font-weight: 400; line-height: 140%; color: #444;}

/* 푸터 */
#footer {background: #3F3F3F;}
#footer .footerWrap {padding: 80px 0;}
#footer .footerMenu {display: flex; align-items: center; justify-content: space-between; padding-bottom: 1.5rem; border-bottom: 1px solid #444;}
#footer .footerMenu .footerUtils {display: flex; align-items: center; font-size: 14px; line-height: 140%; font-weight: 400;}
#footer .footerMenu .footerUtils a {color: #fff;}
#footer .footerMenu .footerUtils span {padding: 0 10px; color: rgba(255, 255, 255, 0.30);}
#footer .footerMenu .snsMenu {display: flex; align-items: center; gap: 16px;}
#footer .footerMenu .snsMenu a {display: flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; padding: .5rem; background: #fff; border-radius: 100%; overflow: hidden;}
#footer .footerInfoWrap {display: flex; flex-direction: row-reverse; justify-content: space-between; margin-top: 40px;}
#footer .address {font-size: 12px; font-weight: 400; line-height: 140%; color: rgba(255, 255, 255, 0.60);}
#footer .address a {color: rgba(255, 255, 255, 0.60);}
#footer .address .copy {margin-top: 16px; color: rgba(255, 255, 255, 0.30);}
#footer .footerContactWrap {display: flex; gap: 60px; color: #fff;}
#footer .footerContactWrap .tt {display: block; margin-bottom: .75rem; font-size: .875rem; line-height: 140%; font-weight: 600;}
#footer .footerContactWrap .tel {display: block; margin-bottom: .375rem; font-size: .75rem; line-height: 140%; font-weight: 600;}
#footer .footerContactWrap p {font-size: .75rem; line-height: 140%; font-weight: 400;}
#footer .footerContactWrap p .time {color: rgba(255, 255, 255, 0.60);}

/********************************************************/
/**************** PC 1440px 해상도 ******************/
/********************************************************/
@media only screen and (max-width:1440px){
.inner {padding-right: var(--inner-padding); padding-left: var(--inner-padding);}

/* 헤더 */
#header .searchWrap {right: var(--inner-padding);}
#header .headerUtilsWrap ul li.u_cscenter .utilsSubmenu {right:-24px; left: auto; transform: translateX(0);}

/* 메인 비주얼 */
.mainVisual .visualTextWrap {left: var(--inner-padding); margin-left: 0;}


/* 메인 컨텐츠 */
#mainContents .mainSectionWrap section {padding-right: var(--inner-padding); padding-left: var(--inner-padding);}

/* 서브페이지 공통 */
.contentsArea {padding-right: var(--inner-padding); padding-left: var(--inner-padding);}

/* 푸터 */
#footer .footerWrap {padding-right: var(--inner-padding); padding-left: var(--inner-padding);}
#footer .footerInfoWrap {flex-direction: column; gap: 1.5rem;}

}


/********************************************************/
/**************** PC 1280px 해상도 ******************/
/********************************************************/
@media only screen and (max-width:1280px){

}


/********************************************************/
/**************** 테블릿 1024px 해상도 ******************/
/********************************************************/
@media only screen and (max-width:1024px){
:root {
  --inner-padding: 4%;
}

.pc {display: none;}
.tablet {display: block;}

#wrap {width:100%; min-width:100%; position:relative;}

/* 헤더 */
#header .headerUtilsWrap {display: none;}
#header .logoAreaWrap {padding: 18px 0;}
#header .logoAreaWrap h1 {width: 200px;}
#header .mobileMenu {display: block;}
#header .mobileMenu .btn_allmenu_t {position: absolute; left: var(--inner-padding); top: 50%; transform: translateY(-50%); width: 35px;}
#header .mobileMenu .btn_search_t {position: absolute; right: calc(var(--inner-padding) + 64px); top: 50%; transform: translateY(-50%); width: 35px;}
#header .mobileMenu .btn_cart_t {position: absolute; right: var(--inner-padding); top: 50%; transform: translateY(-50%); width: 35px;}

#header .searchWrap {display:none; position:absolute; width:100%; height: 114px; margin:0; left:0; top:0; margin-top:0; padding:3%; z-index:60; background:#fff; box-sizing:border-box; border:none; text-align:center; transform: translateY(0); border-radius: 0;}
#header .searchWrap form {padding-right: 50px;}
#header .searchWrap .search_input {display: inline-block; width: calc(100% - 70px); border: 2px solid var(--color-primary); vertical-align: top;}
#header .searchWrap .text {height: 58px;}
#header .searchWrap .button {width: 25px;}
#header .searchWrap .search_hide {display: inline-block;}
#header .searchWrap .search_hide img {height: 62px; vertical-align: top;}

/* GNB */
#gnb {display: none;}
#nav {border-bottom: none;}

/* 모바일 메뉴 */
#allMenu {display: none; width:300px; position:fixed; height:100%; overflow-y:scroll; left:-100%; top:0; background:#fff; z-index:60;}
#allMenu .logoArea {padding: 10px 20px;}
#allMenu .logoArea a {display: block; width: 140px;}
#allMenu .memberArea {background:#8E8E8E;}
#allMenu .memberArea ul {overflow:hidden;}
#allMenu .memberArea li {float:left; width:50%; height:50px; line-height:50px; box-sizing:border-box; border-bottom:2px solid #fff;}
#allMenu .memberArea li:first-child, #allMenu .memberArea li:nth-child(3) , #allMenu .memberArea li:nth-child(5) {border-right:2px solid #fff;}
#allMenu .memberArea li a {color:#fff; font-size:16px; display:block; text-align:center;}

#allMenu .menuWrap .menu > li > a {display: block; height:60px; line-height:60px; background:url('/images/nshop/common/ico_plus.png') no-repeat 90% center; font-size:18px; color:#444; padding:0 22px; cursor:pointer; border-bottom:1px solid #F1F1F1; background-size: 18px;}
#allMenu .menuWrap .menu > li.active > a {color:#fff; background-color: var(--color-primary); background-image: url('/images/nshop/common/ico_minus.png');}
#allMenu .menuWrap .menu .submenu {display: none; background:#F7F7F8; padding:16px 22px; border-bottom:1px solid #F1F1F1; }
#allMenu .menuWrap .menu > li.active .submenu {display: block;}
#allMenu .menuWrap .menu .submenu a {position: relative; display:block; color:#444; line-height:30px; font-size:16px; padding-left:10px;}
#allMenu .menuWrap .menu .submenu a::before {content: ''; position: absolute; top: 14px; left: 0; width: 2px; height: 2px; background: #444; border-radius: 100%;}
#allMenu .menuWrap .menu .submenu a:hover,
#allMenu .menuWrap .menu .submenu a.active {color:#222; text-decoration: underline;}

#allMenu .quick {display: flex; flex-direction: column; gap: 1rem; padding:32px 22px; background:#F7F7F8;}
#allMenu .quick li a {display: flex; align-items: center; gap: .625rem; font-size:18px; font-weight: 500; color:#444;}
#allMenu .quick li a:hover {text-decoration: underline;}
#allMenu .quick li a img {width: 1.5rem; vertical-align:middle;}

#allMenu .csInfo {padding: 32px 22px;}
#allMenu .csInfo .cols {display: flex; flex-direction: column; gap: .375rem;}
#allMenu .csInfo .cols:not(:first-child) {padding-top: 1rem; margin-top: 1rem; border-top: 1px dashed #F1F1F1;}
#allMenu .csInfo .cols .tt {display: block; padding-bottom: .25rem; font-size: 16px; font-weight: 600;}
#allMenu .csInfo .cols .tel {font-size: 14px; font-weight: 600;}
#allMenu .csInfo .cols .time {font-size: 14px; color: #8E8E8E; line-height: 140%;}
#allMenu .csInfo .cols .account {font-size: 14px; line-height: 140%;}

/* 메인 비주얼 */
.mainVisual .visualTextWrap {left: 50%; transform: translateX(-50%) translateY(-50%); text-align: center;}

/* 메인 컨텐츠 */
#mainContents .mainSectionWrap {padding: 80px 0;}
#mainContents .mainProductWrap .sectionTitleArea {position: relative;}
#mainContents .mainProductWrap .sectionTitleArea .btnMore {display: block; position: absolute; right: 0; bottom: 8px;}
#mainContents .mainSectionWrap .productList.basic ul li:last-child {display: none;}
#mainContents .mainProductWrap .prdCategoryTab .btnMore {display: none;}
#mainContents .mainSouvenirWrap section {flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 2.5rem;}
#mainContents .mainSouvenirWrap .imgArea {width: 100%;}
#mainContents .quickMenuWrap .quickMenu {grid-template-columns: repeat(2, 1fr);}

/* 서브페이지 공통 */
.mobile_location {display: block; background: #FAFAFA; padding: 16px var(--inner-padding);}
.mobile_location .location {display: flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 500; line-height: 140%; color: #444;}
.mobile_location .location .bul {display: block; width: 1rem; height: 1rem; background: url('/images/nshop/common/icon_location.png') no-repeat center center; background-size: 100%;}

.mobile_titleArea {position: relative; display: flex; align-items: center; justify-content: center; padding: 16px var(--inner-padding); border-bottom: 1px solid #F1F1F1;}
.mobile_titleArea .title {font-size: 28px; font-weight: 600; line-height: 150%;}
.mobile_titleArea .btnBack {position: absolute; top: 0; left: var(--inner-padding); display: flex; align-items: center; justify-content: center; width: 40px; height: 100%; background: none; margin-left: -15px;}
.mobile_titleArea .btnBack img {width: 8px;}

.contentsArea {padding-top: 80px; padding-bottom: 80px;}
.contentsArea .titleArea {display: none;}

/* 탭 CSS */
.tabList li.active a {padding: 0 20px;}

/* 가격대별 상품 검색 */
.searchForm dl dd .select {width: 200px;}
.searchForm .search_name {width: 450px;}

/* 상품 리스트 */
.product #list .sort {border: none; padding: 0; margin-bottom: 24px;}
.productList ul {grid-template-columns: repeat(3, 1fr);}
.productList.wide ul {grid-template-columns: repeat(1, 1fr); gap: 8px;}

/* 상품 뷰 */
.product #view .productTopArea {gap: 3%;}
.product #view .productTopArea .productImgWrap .prdThumbWrap {display: none;}
.product #view .productTopArea .productImgWrap .swiper-slide {border-radius: 4px;}
.product #view .productTopArea .productImgWrap .prdSlideMain {height: max-content}
.product #view .productTopArea .productImgWrap .swiper-dot-pagination {display: flex; align-items: center; justify-content: center; gap: .5rem; margin-top: 1rem;}
.product #view .productTopArea .productImgWrap .swiper-dot-pagination .swiper-pagination-bullet {width: .75rem; height: .75rem; margin: 0;}
.product #view .productTopArea .productImgWrap .swiper-dot-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {background: var(--color-primary);}
.product #view .productTopArea .productInfoWrap {width: 450px;}

.product #view .detailWrap .detail_con .productList ul {grid-template-columns: repeat(4, 1fr); gap: 1rem;}
.product #view .detailWrap .detail_con .productList ul li:last-child {display: none;}

.product #view .detailWrap .replyForm dl dd.star_rating {gap: .5rem 1rem;}

.cart #orderForm {display:none;}
.cart .mobilePrdBoxWrap {display: flex; flex-direction: column; gap: 40px;}
.cart .product_box {display: flex; flex-direction: column; gap: 1.5rem; padding: 1.5rem; border: 1px solid #F1F1F1; }
.cart .product_box .prdInfoArea {display: flex; align-items: center; gap: 24px;}
.cart .product_box .prdInfoArea .imgArea {width: 5rem; height: 5rem; flex-shrink: 0;}
.cart .product_box .prdInfoArea .imgArea img {max-width: 100%; max-height: 100%; object-fit: cover;}
.cart .product_box .prdInfoArea .pdtArea {padding-left: 16px;}
.cart .product_box .prdInfoArea .pdtArea .name {font-size: 1rem; font-weight: 500; line-height: 140%; color: #222;}
.cart .product_box .prdInfoArea .pdtArea .option {display: flex; flex-direction: column; gap: .25rem; padding-top: .625rem; font-size: .875rem; font-weight: 400; line-height: 140%; color: #8E8E8E;}
.cart .product_box .optionArea {display: flex; flex-direction: column; gap: 16px; padding: 1.5rem; background: #FAFAFA;}
.cart .product_box .optionArea dl {display: flex; align-items: center; gap: 1.25rem;}
.cart .product_box .optionArea dl dt {flex-shrink: 0; width: 80px; font-size: .875rem; font-weight: 600; line-height: 140%; color: #444;}
.cart .product_box .optionArea dl dd {font-size: 1rem; font-weight: 400; line-height: 140%; color: #222;}
.cart .product_box .optionArea dl dd.price {font-weight: 600;}
.cart .product_box.sold_out .prdInfoArea .imgArea,
.cart .product_box.sold_out .optionArea dl {opacity: 0.4;}
.cart .product_box .optionArea dl dd .btn_pickup {background: none; font-size: 1rem; font-weight: 600; line-height: 140%; color: var(--color-primary); text-decoration: underline;}
.cart .product_box .optionArea dl dd .note {display: flex; align-items: center; gap: 4px; padding-top: 6px; font-size: .875rem; font-weight: 400; line-height: 140%; color: #EA0000;}
.cart .product_box .optionArea dl dd .note img {width: 1rem;}
.cart .product_box .optionArea dl.selectPickup {align-items: flex-start;}

.cart .payForm {margin-top: 80px;}
.cart .payForm .tblType03 colgroup col:first-child {width: 160px;}
.cart .payForm .tblType03 colgroup col:nth-child(2) {width: calc(100% - 160px);}

/* 장바구니 CSS */
.cart .cartSelectArea {flex-direction: column; gap: .5rem; margin-bottom: 2rem;}
.cart .cartSelectArea .custom-selectBox {width: 100%;}
.cart .cartSelectArea .selectBox {width: 100%; max-width: 100%;}
.cart .cartSelectArea .selectBox .select .list {width: 100%;}

/* 로그인 */
.contentsArea.login .logInner {width: 100%;}
.contentsArea.login .payPrivate .titleArea {display: flex !important;}

/* 회원단 CSS */
.contentsArea.member .member_form {width: 100%;} 
.contentsArea.member .member_form .btnArea button,
.contentsArea.member .member_form .btnArea a {flex: 1; min-width: auto; max-width: 15rem;}

.contentsArea.member .findInfoWrap {width: 100%; flex-direction: column; gap: 64px;}
.contentsArea.member .findInfoWrap .cols {width: 100%;}

.contentsArea.member .resultResultInfo {width: 100%;}



}

/********************************************************/
/**************** 테블릿 768px 해상도 ******************/
/********************************************************/
@media only screen and (max-width:768px){

/* 가격대별 상품 검색 */
.searchForm .input_area,
.searchForm .search_name {width: 100%;}
.searchForm dl dd .select {width: 180px;}
.searchForm dl dt {width: 110px;}

/* 상품 뷰 */
.product #view .productTopArea {display: block;}
.product #view .productTopArea .productImgWrap {position: relative;}
.product #view .productTopArea .productImgWrap .btn_wish {display: block; position: absolute; top: 1rem; right: 1rem; z-index: 10;}
.product #view .productTopArea .productInfoWrap {width: 100%; margin-top: 3.5rem;}



}




/********************************************************/
/**************** 모바일 640px 해상도 ******************/
/********************************************************/
@media only screen and (max-width:640px){

.pct {display: none;}
.pc {display: none;}
.tablet {display: none;}
.mobile {display: block;}

/* 헤더 */
#header .logoAreaWrap {padding: 8px 0;}
#header .logoAreaWrap h1 {width: 126px;}
#header .mobileMenu .btn_allmenu_t {width: 20px;}
#header .mobileMenu .btn_search_t {width: 24px; right: calc(var(--inner-padding) + 36px);}
#header .mobileMenu .btn_cart_t {width: 24px;}

#header .searchWrap {height: 70px;}
#header .searchWrap .search_input {position:relative; width: calc(100% - 50px); height: 44px;}
#header .searchWrap .text {height: 40px;}
#header .searchWrap .search_hide img {height: 44px;}
#header .searchWrap .button {width: 22px;}

/* 메인 비주얼 */
.mainVisual {height: 360px;}
.mainVisual .v_pc {display: none;}
.mainVisual .v_mobile {display: block; width: 100%; height: 100%; object-fit: cover;}
.mainVisual .slide {height: 360px;}
.mainVisual .visualTextWrap {width: auto; left: 10%; transform: translateY(-50%); text-align: left;}
.mainVisual .visualText h2 {margin-bottom: .5rem; font-size: 1.5rem; line-height: 150%;}
.mainVisual .visualText p {font-size: 1rem; font-weight: 600; line-height: 140%;}
.mainVisual .mainSlideControlor .pagination-wrapper {height: 2.125rem;}
.mainVisual .mainSlideControlor .slick-custom-paging {padding-left: 1rem; font-size: .75rem;}
.mainVisual .mainSlideControlor .slick-btn-prev, .mainVisual .mainSlideControlor .slick-btn-next {width: 1.75rem;}
.mainVisual .mainSlideControlor .slick-control button {width: 2.125rem; height: 2.125rem;}
.mainVisual .mainSlideControlor .slick-control button img {width: 1rem;}

/* 모바일 메뉴 */
#allMenu {width: 270px;}
#allMenu .logoArea {padding: .625rem 1rem;}
#allMenu .logoArea a {width: 125px;}
#allMenu .memberArea li {height: 2.5rem; line-height: 2.5rem;}
#allMenu .memberArea li a {font-size: .875rem;}

#allMenu .menuWrap .menu > li > a {height: 3.375rem; line-height: 3.375rem; padding: 0 1rem; font-size: 1rem; background-size: 1rem; background-position: calc(100% - 1rem) center;}
#allMenu .menuWrap .menu .submenu {padding: 1rem;}
#allMenu .menuWrap .menu .submenu a {font-size: .875rem; line-height: 1.75rem;}

#allMenu .quick {padding: 2rem 1.5rem;}
#allMenu .quick li a {font-size: 1rem;}

#allMenu .csInfo {padding: 1.5rem;}
#allMenu .csInfo .cols .tt {font-size: .875rem;}
#allMenu .csInfo .cols .tel,
#allMenu .csInfo .cols .time,
#allMenu .csInfo .cols .account {font-size: .75rem;}

/* 메인 컨텐츠 */
#mainContents .mainSectionWrap {padding: 4rem 0;}
#mainContents .mainSectionWrap .sectionTitleArea .subTitle {font-size: .875rem; font-weight: 400;}
#mainContents .mainSectionWrap .sectionTitleArea .title h3 {font-size: 1.5rem;}
#mainContents .mainProductWrap .btnMore {font-size: .875rem; font-weight: 400; background-position: right 25%;}
#mainContents .mainProductWrap .mainPrdPagination .swiper-pagination-bullet {width: .625rem; height: .625rem; margin: 0 4px;}
#mainContents .mainProductWrap .sectionTitleArea .btnMore {bottom: 0.5rem;}
#mainContents .mainProductWrap section {gap: 1.5rem;}
#mainContents .mainProductWrap .prdCategoryTab ul {gap: 4px;}
#mainContents .mainProductWrap .prdCategoryTab ul li button {padding: .5rem 1rem; font-size: .875rem; font-weight: 600;}
#mainContents .mainProductWrap .noDataArea img {width: 3.25rem;}
#mainContents .mainProductWrap .noDataArea p {font-size: 1rem;}

#mainContents .mainSouvenirWrap .sectionTitleArea .subTitle {padding-bottom: .5rem;}
#mainContents .mainSouvenirWrap .sectionTitleArea .title span {display: inline-block;}
#mainContents .mainSouvenirWrap .txtArea .btnMore {margin-top: 1rem; padding: .5rem 1rem; border-radius: 2.5rem; font-size: .875rem;}

#mainContents .quickMenuWrap .sectionTitleArea {margin-bottom: 1rem;}
#mainContents .quickMenuWrap .quickMenu {gap: .5rem;}
#mainContents .quickMenuWrap .quickMenu .quickMenuItem {height: auto; aspect-ratio: 1/1; padding: 1rem 1.5rem 0px;}
#mainContents .quickMenuWrap .quickMenu .quickMenuItem.quick_01 {background-size: 7.5rem;}
#mainContents .quickMenuWrap .quickMenu .quickMenuItem.quick_02 {background-size: 5rem;}
#mainContents .quickMenuWrap .quickMenu .quickMenuItem.quick_03 {background-size: 5rem;}
#mainContents .quickMenuWrap .quickMenu .quickMenuItem.quick_04 {background-size: 5.625rem;}
#mainContents .quickMenuWrap .quickMenu .title {font-size: 1rem;}
#mainContents .quickMenuWrap .quickMenu p {display: none;}

/* 서브페이지 공통 */
.mobile_location {padding-top: 8px; padding-bottom: 8px; font-size: .875rem; font-weight: 400;}
.mobile_location .location {gap: 4px; font-size: .875rem; font-weight: 400; line-height: 140%;}
.mobile_titleArea .title {font-size: 1.125rem; font-weight: 700;}
.contentsArea {padding-top: 32px; padding-bottom: 5rem;}

.list_circle li {padding-left: 10px; font-size: .75rem;}
.list_circle li::before {width: 2px; height: 2px;}

/* 탭 CSS */
.tabList {width: calc(100% + var(--inner-padding)*2); margin-left: calc(-1 * var(--inner-padding)); justify-content: space-between;}
.tabList li {flex: 1; width: auto; border: none; margin: 0; height: auto !important; white-space: nowrap;}
.tabList li a {position: relative; padding: 1.125rem 3vw !important; font-size: .875rem; font-weight: 600; color: #444; line-height: 140%;}
.tabList li.active a::after {content: ''; position: absolute; left: 0; bottom: -1px; width: 100%; height: 2px; background: #444;}

/* 가격대별 상품 검색 */
.searchForm {padding: 1.5rem; margin-bottom: 3.5rem;}
.searchForm .search_select {gap: 1.5rem}
.searchForm .price_select {display: block;}
.searchForm dl {flex-direction: column; gap: .5rem; align-items: flex-start;}
.searchForm dl dt {font-size: .875rem; font-weight: 600;}
.searchForm dl dd {width: 100%; font-size: 14px;}
.searchForm dl dd .select {width: 100%;}
.searchForm dl dd.price_range .select {width: calc(100% - 40px);}
.searchForm .input_area .btn_keyword_search img {width: 1rem;}
.searchForm .search_btn_area .btn_refresh {font-size: 1rem; line-height: 1.5rem;}

/* 상품 리스트 */
.productList ul {grid-template-columns: repeat(2, 1fr); gap: 2.5rem 1rem;}
#mainContents .mainSectionWrap .productList.basic ul li:last-child {display: block;}
.productList li .thumb_btnArea {top: .5rem; right: .5rem;}
.productList li .thumb_btnArea .options {top: 2.125rem; width: 3.75rem;}
.productList li .thumb_btnArea .options li button {padding: 4px 0; font-size: .75rem;}
.productList li .productInfoArea {margin-top: 1rem;}
.productList li .productInfoArea .productName {font-size: 1rem;}
.productList li .productInfoArea .priceInfo {font-size: 1rem; gap: 0px 4px;}
.productList li .productInfoArea .priceInfo .originPrice {width: 100%;}
.productList li .productInfoArea .iconArea {margin-top: .5rem;}

.productList.wide > ul > li {gap: 1.5rem; padding: 1rem;}
.productList.wide li .thumbArea {width: 5.625rem;}
.productList.wide li .productInfoArea .productName {padding-right: 4.375rem;}

/* 상품 뷰 */
.product #view .productTopArea .productDetail .productNameArea .name {font-size: 1.125rem; font-weight: 700;}
.product #view .productTopArea .productPrice .priceInfo {font-size: 1.25rem; font-weight: 500;}
.product #view .productTopArea .productPrice .priceInfo .discountPrice {font-weight: 600;}
.product #view .productOption .optionSection dl {align-items: flex-start;}
.product #view .productTopArea .productOption .optionSection {display: none;}
.product #view .productTopArea .productOption .optionSection.basicOption {display: flex;}
.product #view .productTopArea .selectedOptionBox,
.product #view .productTopArea .productTotalPrice,
.product #view .productTopArea .purchaseBtnArea {display: none;}

.product #view .detailWrap {gap: 3.5rem;}
.product #view .detailWrap .detail::before {content: ''; display: block; width: calc(100% + var(--inner-padding)*2); height: 1rem; margin-left: calc(-1 * var(--inner-padding)); background: rgba(13, 13, 13, 0.02);}
.product #view .detailWrap .detail_con {padding-top: 2rem;}
.product #view .detailWrap .detail_con .productList ul { grid-template-columns: repeat(2, 1fr);}
.product #view .detailWrap .detail_con .productList ul li {display: none;}
.product #view .detailWrap .detail_con .productList ul li:nth-child(-n+2) {display: block;}

.product #view .detailWrap .replyForm dl.comment {flex-direction: column; gap: .5rem;}
.product #view .detailWrap .replyForm dl dd .commentBox {height: 10rem;}
.product #view .detailWrap .replyForm .note {font-size: .75rem;}
.product #view .detailWrap .replyList ul li {padding: 1rem .625rem; gap: .25rem;}
.product #view .detailWrap .replyList ul li .name .date {font-size: .75rem;}
.product #view .detailWrap .replyList ul li .star img {height: .75rem;}
.product #view .detailWrap .replyList ul li .replyTxt {font-size: .75rem;}

#detail4 .detail_con .noticeBox {padding: 1rem;}
#detail4 .detail_con .noticeCon > dl > dt {font-size: 1rem;}

.product #view #productBottomDrawer {display: block; position: fixed; left: 0; bottom: 0; width: 100%; background: #fff; padding: 10px var(--inner-padding); border-top: 1px solid #d3d3d3; z-index: 50; transition: padding .2s ease;}
.product #view #productBottomDrawer .btnDrawerToggle {position: absolute; left: 50%; top: -28px; transform: translateX(-50%); display: flex; align-items: center; justify-content: center; width: 96px; height: 28px; border-radius: 4px 4px 0 0; border: 1px solid #d3d3d3; border-bottom-color: #fff; background: #fff;}
.product #view #productBottomDrawer .btnDrawerToggle img {width: 20px;}

.product #view #productBottomDrawer .purchaseOptionsContainer {display: none; max-height: 65dvh; width: calc(100% + var(--inner-padding)); padding-right: var(--inner-padding); overflow-y: auto;}
.product #view #productBottomDrawer .productOption {border-top: none; margin-top: -1.5rem;}
.product #view #productBottomDrawer .productOption .optionSection.basicOption {display: none;}
.product #view #productBottomDrawer .productOption .optionSection dl {flex-direction: column; gap: .5rem;}
.product #view #productBottomDrawer .productOption .optionSection dl dt,
.product #view #productBottomDrawer .productOption .optionSection dl dd {width: 100%;}
.product #view #productBottomDrawer .productOption .optionSection dl.previewOption dt {line-height: 140%;}
.product #view #productBottomDrawer .productOption .optionSection .previewOptionArea {gap: .5rem;}

.product #view #productBottomDrawer .selectedOptionBox {gap: 1.5rem;}
.product #view #productBottomDrawer .selectedOptionBox .selectedOptionItem {position: relative; flex-wrap: wrap; gap: .5rem;}
.product #view #productBottomDrawer .selectedOptionBox .selectedOptionItem .name {flex: auto; width: 100%;}
.product #view #productBottomDrawer .selectedOptionBox .selectedOptionItem .price {flex: 1;}
.product #view #productBottomDrawer .selectedOptionBox .selectedOptionItem .btnDelete {position: absolute; top: 1px; right: 0;}

.product #view #productBottomDrawer .purchaseBtnArea {display: flex; align-items: center; flex-direction: row-reverse; gap: 8px;}
.product #view #productBottomDrawer .purchaseBtnArea button {flex: 1;}
.product #view #productBottomDrawer .purchaseBtnArea .btn_prd_wishlist {display: none;}

.product #view #productBottomDrawer.open {padding-top: 1.5rem; padding-bottom: 2rem;}
.product #view #productBottomDrawer.open .btnDrawerToggle img {transform: rotate(180deg);} 
.product #view #productBottomDrawer.open .purchaseBtnArea {padding-top: 1.5rem;}

/* 장바구니 CSS */
.cart .orderSelectArea .orderSelect li {padding-left: .5rem; margin-left: .5rem;}
.custom-selectBox .selectList ul li button {padding: .625rem 1rem;}
.cart .orderSelectArea .btnChangeDelivery {gap: 0px; font-size: .875rem;}

.cart .mobilePrdBoxWrap {gap: 1.5rem;}
.cart .product_box {padding: 1.5rem 1rem;}
.cart .product_box .prdInfoArea {gap: 1rem;}
.cart .product_box .prdInfoArea .pdtArea {padding-left: 0;}
.cart .product_box .optionArea {padding: 1rem 1.5rem; gap: .5rem;}
.cart .product_box .optionArea dl dt {width: 3.4375rem;}
.cart .product_box .optionArea dl dd {font-size: .875rem;}
.cart .product_box .optionArea dl dd .btn_pickup {font-size: .875rem;}
.cart .product_box .optionArea dl dd .note {padding-top: .25rem; font-size: .75rem;}
.cart .product_box .optionArea dl dd .note img {width: .875rem;}

.cart .payForm {margin-top: 3.5rem;}
.cart .payForm::before {content: ''; display: block; width: calc(100% + var(--inner-padding)*2); height: 1rem; margin-left: calc(-1 * var(--inner-padding)); background: rgba(13, 13, 13, 0.02);}
.cart .payForm .tabList {margin-bottom: 2rem;}
.cart .payForm .tblType03 colgroup col:first-child {width: 5rem;}
.cart .payForm .tblType03 colgroup col:nth-child(2) {width: calc(100% - 5rem);}

.cart .orderTotalBox dl {width: 100%;}

#pickupStoreModal .selectBoxArea {height: 9.375rem;}
#pickupStoreModal .selectBoxArea .nice-select .list {max-height: 7.5rem;}

.addDeliveryForm .inputForm dl dt {font-size: .875rem; font-weight: 600;}
.addDeliveryForm .inputForm dl dd .inputWrap .btn_memgray {width: 8.75rem;}
.addDeliveryForm .agreeForm .agreeCheckArea label {font-size: .875rem;}
#changeDeliveryModal .totalInfo {font-size: .875rem;}
#changeDeliveryModal .tblType01 table .prdInfoArea {gap: 1rem;}
#changeDeliveryModal .labelArea {margin-top: 1rem;}
#changeDeliveryModal .labelArea .comm_radio_label {font-size: .875rem;}

.cart .payForm .tblType03 input,
.cart .payForm .tblType03 .select {width: 100%; height: 2.5rem; line-height: 2.5rem;}
.cart .payForm .tblType03 .select {min-width: auto; font-size: .875rem;}
.cart .payForm .tblType03 .btn_memgray {height: 2.5rem; line-height: 2.5rem; font-size: .875rem;}
.cart .payForm .tblType03 .phoneInputWrap {display: flex; align-items: center; gap: .25rem;}
.cart .payForm .tblType03 .phoneInputWrap .select {width: 4.375rem;}
.cart .payForm .tblType03 .phoneInputWrap .tel {flex: 1; width: 100%;}
.cart .payForm .tblType03 .emailInputWrap {flex-wrap: wrap;}
.cart .payForm .tblType03 .emailInputWrap .select {width: 100%;}
.cart .payForm .tblType03 .giftInputWrap {gap: 1rem;}
.cart .payForm .tblType03 .addressInputWrap .zipcodeWrap .zipcode {flex: 1; width: 100%; max-width: 100px;}
.cart .payForm .tblType03 .addressInputWrap .zipcodeWrap .btn_memgray {width: 6.25rem;}
.cart .payForm .tblType03 .addressInputWrap .addressWrap {flex-wrap: wrap;}
.cart .payForm .tblType03 .giftInputWrap .text {width: 100%;}
.cart .payForm .tblType03 .giftInputWrap label {margin-top: 0px !important;}
.cart .payForm .tblType03 .dateSelectWrap {display: flex; align-items: center; gap: .25rem; flex-wrap: wrap;}
.cart .payForm .tblType03 .dateSelectWrap .year {width: 90%;}
.cart .payForm .tblType03 .dateSelectWrap .month,
.cart .payForm .tblType03 .dateSelectWrap .day {width: 40%;}
.cart .payForm .tblType03 .textarea {height: 6.5rem;}
.cart .payForm .tblType03 .infoText {display: block; margin-top: .625rem; font-size: .75rem;}
.cart .payForm .bankInfoText {display: block; padding-left: 0; margin-top: .625rem;}
.cart .payForm .tblType03 .comm_radio_label {width: 100%; margin-right: 0; margin-top: .5rem;}
.cart .payForm .tblType03 .comm_radio_label:first-of-type {margin-top: 0;}
.cart .payForm .tblType03 .receipt_box {margin-top: .5rem;}

.cart .payProcessBox {padding: 1.5rem 1rem;}
.cart .payProcessBox .notice {font-size: 1.125rem; text-align: center;}
.cart .payProcessBox .infoBox {padding: 1.5rem .5rem;}












/* 탭 CSS */
.tabArea {width: calc((100% + (var(--inner-padding)*2))); margin-left: calc(-1 * var(--inner-padding)); margin-bottom: 2rem; border-bottom: 1px solid #F1F1F1;}
.tabArea button {position: relative; height: 3.625rem; border: none; background: #fff; font-size: .875rem; font-weight: 600;}
.tabArea button.active {background: #fff; color: #444;}
.tabArea button.active::before {content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: #444;}

/* 로그인 */
.contentsArea.login .loginForm .joinInfo {font-size: .875rem;}
.contentsArea.login .nonMemberWrap {margin-top: 3.5rem;}
.contentsArea.login .nonMemberWrap .titleArea {display: flex;}
.contentsArea.login .nonMemberWrap .titleArea .title {font-size: 1.5rem;}
.contentsArea.login .nonMemberWrap p {word-break: keep-all;}
.contentsArea.login .nonMemberWrap p br {display: none;}

.contentsArea.login .payPrivate {margin-top: 3.5rem;}
.contentsArea.login .payPrivate .titleArea {margin-bottom: 1.5rem;}
.contentsArea.login .payPrivate .titleArea .title {font-size: 1.5rem;}

/* 회원단 CSS */
.contentsArea.member .agreeArea .comm_check_label {font-size: .875rem;}

.contentsArea.member .join_form dl dt {font-size: .875rem;}
.contentsArea.member .join_form dl dd .inputWrap {gap: .5rem;}
.contentsArea.member .join_form dl dd .btn_memgray {width: 5rem; padding: 0;}
.contentsArea.member .join_form dl dd {font-size: .875rem;}
.contentsArea.member .join_form dl dd .numberWrap .nice-select {width: 6.25rem;}
.contentsArea.member .join_form dl dd .nice-select {height: 3rem; line-height: 3rem; font-size: .875rem;}
.contentsArea.member .join_form .consentArea label {font-size: .875rem;}

.contentsArea.member .findInfoWrap {gap: 3.5rem;}
.contentsArea.member .findInfoWrap .cols .title {font-size: 1.5rem;}

/* 푸터 */
#footer .footerWrap {padding-top: 4rem; padding-bottom: 4rem;}
#footer .footerInfoWrap {margin-top: 1.5rem;}
#footer .footerContactWrap {gap: 1rem;}
#footer .footerMenu .footerUtils {display: block; font-size: .75rem; line-height: 160%;}
#footer .footerMenu .snsMenu {gap: .5rem;}
#footer .address {font-size: .625rem;}
#footer .address .copy {margin-top: .25rem; font-size: .75rem;}

}



/********************************************************/
/**************** 모바일 420px 해상도 ******************/
/********************************************************/
@media only screen and (max-width:420px){

/* 장바구니 CSS */
.cart .orderSelectArea .orderSelect .mobile_hide_text {display: none;}
.cart .orderSelectArea .orderSelect li {padding-left: .375rem; margin-left: .375rem;}
.cart .orderSelectArea .btnChangeDelivery img {display: none;}

}


/********************************************************/
/**************** 모바일 320px 해상도 ******************/
/********************************************************/
@media only screen and (max-width:320px){

/* 장바구니 CSS */
.cart .orderSelectArea .orderSelect li {padding-left: .25rem; margin-left: .25rem;}
.cart .orderSelectArea .orderSelect li:not(:first-child)::before {height: 60%;}

}


/* ===================진행중=================== */





/* 행사기념품 단체주문 */
.order .order_info {border:5px solid #dfdfdf; background:#f3f3f3; padding:25px; margin-bottom:45px;}
.order .caseWrap:after {content:''; display:block; clear:both;}
.order .caseWrap .order_case {width:49.5%;}
.order .caseWrap .order_case01 {float:left;}
.order .caseWrap .order_case02 {float:right;}
.order .caseWrap .order_case .case_title {font-size:22px; line-height:24px; font-family:'NanumBarunGothicL'; position:relative; padding-left:55px; margin-bottom:20px;}
.order .caseWrap .order_case .case_title b {font-family:'NanumBarunGothicN';}
.order .caseWrap .order_case .round {display:inline-block; width:47px; height:47px; text-align:center; line-height:47px; border-radius:100px; font-weight:700; position:absolute; left:0; color:#fff; top:0;}
.order .caseWrap .order_case01 .round {background:#006740;}
.order .caseWrap .order_case02 .round {background:#f68811;}
.order .caseWrap .btnArea {margin:40px 0; text-align:center;}
.order .member_form .order_form_tt {font-size:24px; color:#006740; font-weight:normal; margin-bottom:15px;}
.order .member_form .tel {width:100px;}
.order .member_form .amount {width:130px;}
.order .member_form .date {width:180px;}
.order .member_form .textarea {width:100%; height:200px; resize:none; box-sizing:border-box; padding:5px;}
.order .member_form .file {width:500px;}
.order .btnArea.alignC {margin-top:40px;}

/* 쇼핑몰 이용안내 */
.contentsArea.guide .section > dl > dt {font-size:20px; line-height:24px; color:#111; margin:40px 0 10px 0;}
.contentsArea.guide .section > dl > dd {line-height:1.5em;}
.contentsArea.guide .section .cardBox {border:3px solid #dfdfdf; padding:20px;}
.contentsArea.guide .section .cardBox dt {font-size:20px; line-height:24px; margin-bottom:10px; color:#111;}
.contentsArea.guide .section .cardBox .col {float:left; width:45%; margin-bottom:10px;}
.contentsArea.guide .section .cardBox .col.card2 {float:right; width:55%;}
.contentsArea.guide .notice {background:#f3f3f3; border:5px solid #dfdfdf; padding:30px;}

/* 이화기념품점 소개 */
.contentsArea.company .section {margin-top:40px;}
.contentsArea.company .section:first-child {margin-top:0;}
.contentsArea.company .section:after {content:''; display:block; clear:both;}
.contentsArea.company h3.green_title {background:url('/images/nshop/common/bg_title_line.gif') no-repeat left top; padding-top:15px; font-weight:normal; font-size:18px; color:#333; line-height:1.5em; margin-bottom:15px;}
.contentsArea.company h3.green_title2 {color:#006740; font-size:24px; margin-bottom:15px; font-weight:normal;}
.contentsArea.company h3.green_title .green {display:block; font-size:24px; margin-bottom:5px;}
.contentsArea.company .section .txt {float:left; width:45%;}
.contentsArea.company .section .img {float:right; width:50%;}
.contentsArea.company .history:after {content:''; display:block; clear:both;}
.contentsArea.company .history dt {clear:both; float:left; border-top:1px solid #333; padding:20px 0 20px 10px; width:140px; box-sizing:border-box; color:#222;}
.contentsArea.company .history dd {float:left; border-top:1px solid #dfdfdf; padding:20px 0 20px 10px; width:87%; box-sizing:border-box;}
.contentsArea.company .history dd img {display:block; margin-top:15px;}
.contentsArea.policy .textarea {box-sizing:border-box; resize:none; width:100%; height:600px; padding:1%; overflow-y:scroll; border:1px solid #dfdfdf; background:#f3f3f3;}
.contentsArea.policy .textarea * {font-size:14px; color:#333;}

/* 사이트맵 */
.contentsArea.sitemap .siteMenu {overflow:hidden; margin-bottom:20px;}
.contentsArea.sitemap .siteMenu dt {width:16.6%; float:left; border-top:1px solid #006740; color:#006740; box-sizing:border-box; padding:15px 10px;}
.contentsArea.sitemap .siteMenu dt a {color:#006740; display:block;}
.contentsArea.sitemap .siteMenu dd {width:83.4%; float:left; box-sizing:border-box; border-top:1px solid #dfdfdf;}
.contentsArea.sitemap .siteMenu dd ul {overflow:hidden; padding:15px 10px;}
.contentsArea.sitemap .siteMenu dd ul li {width:16.6%; float:left; margin-bottom:10px;}


/********************************************************/
/**************** 테블릿 1024px 해상도 ******************/
/********************************************************/
@media only screen and (max-width:1024px){

/* 메인 비주얼 */
.mainVisual .slide {max-width: 100vw;}

/* 메인 컨텐츠 */
#mainContents {padding-left:0; width:100%;}
#mainContents .productWrap {padding:0 3%;}
#mainContents h3.title {font-size:24px; margin:50px 0 20px 0;}
#mainContents h3.title .eng {font-size:14px;}
#mainContents .mdChoice ul li a {padding:5%;}
#mainContents .mdChoice ul li dt {font-size:15px;}
#mainContents .mdChoice ul li .line {margin:10px 0;}
#mainContents .mdChoice ul li dd {font-size:30px; line-height:37px;}
#mainContents .pdtSlide li {width:232px !important; margin-right:10px !important;}
#mainContents .pdtSlide li a img {height:auto;}
#mainContents .seasonSlide li {width:33.3% !important; margin-right:0 !important;}
#mainContents .bottomWrap {padding:5% 3% 0 3%;}
#mainContents .quickWrap ul li {width:32.3%; margin:0.5%;}
#mainContents .quickWrap ul li a {font-size:16px;}
#mainContents .quickWrap ul li a img {width:40px;}

/* 행사기념품 단체주문 */
.order .caseWrap .order_case .round {width:40px; height:40px; line-height:40px; margin-top:2px;}
.order .caseWrap .order_case .case_title {line-height:normal; font-size:18px;}

.contentsArea.company .section .txt {width:100%; float:none;}
.contentsArea.company .section .img {width:100%; float:none; margin-top:3%;}
.contentsArea.company .history dt {width:20%;}
.contentsArea.company .history dd {width:80%;}
.contentsArea.policy .textarea {height:400px;}

}
/********************************************************/
/**************** 테블릿 768px 해상도 ******************/
/********************************************************/
@media only screen and (max-width:768px){

/* 행사기념품 단체주문 */
.order .caseWrap .order_case01 {width:100%; float:none; margin-bottom:8%;}
.order .caseWrap .order_case02 {width:100%; float:none;}
.order .caseWrap .order_case .case_title {font-size:16px; padding:0;}
.order .caseWrap .order_case .case_title br {display:none;}
.order .caseWrap .order_case .round {position:relative;}
.order .member_form .tblType01 colgroup col:first-child {width:20%;}
.order .member_form .tblType01 colgroup col:nth-child(2) {width:80%;}
.order .member_form .tel {width:15%;}
.order .member_form .email {margin-bottom:2px; width:45%;}
.order .member_form .btn_calendar {width:37px;}
.order .member_form .file {width:100%;}
.order .member_form .date {width:80%;}

/* 사이트맵 */
.contentsArea.sitemap .siteMenu dt {width:25%;}
.contentsArea.sitemap .siteMenu dd {width:75%;}
.contentsArea.sitemap .siteMenu dd ul li {width:50%;}

}

/********************************************************/
/**************** 모바일 520px 해상도 ******************/
/********************************************************/
@media only screen and (max-width:520px){

/* 회원단 CSS */
.contentsArea.member.break .logInner .tip {font-size:4vw;}
.contentsArea.member .logInner .reason {margin-top:5%;}
.contentsArea.member .logInner .reason ul li span.name {display:block; width:100%;}
.contentsArea.member .logInner .reason ul li .nice-select {width:100%;}
.contentsArea.member .logInner .reason ul li .textarea {width:100%;}

/* 상품 뷰 */
.cart .payForm #bank_div.tblType03 colgroup col {width:100%;}
.cart .payForm #bank_div.tblType03 th, .cart .payForm #bank_div.tblType03 td {display:block; width:100%; padding:3%; box-sizing:border-box;}

.order .order_info {padding:3%;}
.order .member_form .order_form_tt {font-size:4vw;}
.order .caseWrap .order_case .case_title {padding-left:45px;}
.order .caseWrap .order_case .round {position:absolute; top:-3px;}
.order .member_form .tblType01 colgroup col:first-child {width:23%;}
.order .member_form .tblType01 colgroup col:nth-child(2) {width:77%;}
.order .btnArea .btn_greenBig {min-width:60px;}
.order .btnArea .btn_grayBig {min-width:60px;}


/* 쇼핑몰 이용안내 */
.contentsArea.guide .section {word-break:break-all;}
.contentsArea.guide .section > dl > dt {font-size:4.2vw; line-height:normal; color:#111; margin:8% 0 3% 0;}
.contentsArea.guide .section .cardBox {padding:3%;}
.contentsArea.guide .section .cardBox dt {font-size:4.2vw; line-height:normal; margin-bottom:3%;}
.contentsArea.guide .section .cardBox .col {margin-bottom:1%; float:none; width:100% !important;}
.contentsArea.guide .notice {padding:5%;}

#detail4 .detail_con .section {word-break:break-all;}
#detail4 .detail_con .section > dl > dt {font-size:4.2vw; line-height:normal; color:#111; margin:8% 0 3% 0;}
#detail4 .detail_con .section .cardBox {padding:3%;}
#detail4 .detail_con .section .cardBox dt {font-size:4.2vw; line-height:normal; margin-bottom:3%;}
#detail4 .detail_con .section .cardBox .col {margin-bottom:1%; float:none; width:100% !important;}
#detail4 .detail_con .notice {padding:5%;}

.contentsArea.company h3.green_title {font-size:4vw; background-size:23px 2px; padding-top:8px;}
.contentsArea.company h3.green_title br {display:none;}
.contentsArea.company h3.green_title2 {font-size:4.6vw;}
.contentsArea.company h3.green_title .green {font-size:4.6vw;}
.contentsArea.company .history dt {float:none; width:100%; padding:3% 1%;}
.contentsArea.company .history dd {float:none; width:100%; padding:3% 1%;}
.contentsArea.policy .textarea {height:200px;}

/* 행사기념품 단체주문 */
.order .member_form .text {width:60%;}
.order .member_form .email {width:40%;}
.order .member_form .tel {width:30%;}
.order .member_form .date {width:70%;}
.order .member_form .amount {width:30%;}
.order .member_form .file {width:100%;}
.order .member_form .ui-datepicker-trigger {height:35px;}

/* 사이트맵 */
.contentsArea.sitemap .siteMenu dt {font-size:3.6vw; width:40%;}
.contentsArea.sitemap .siteMenu dt a {font-size:3.6vw;}
.contentsArea.sitemap .siteMenu dd {font-size:3.6vw; width:60%;}
.contentsArea.sitemap .siteMenu dd ul li {width:100%;}
.contentsArea.sitemap .siteMenu dd ul li a {font-size:3.6vw;}

}