@charset "utf-8";

.sub .subTop {position: relative; height: clamp(10em, 15vw, 15.22em); overflow: hidden; display: flex; align-items: center; justify-content: center;}
.sub .subTop .bg {position: absolute; width: 100%; height: 100%; top: 0; left: 0;}
.sub .subTop .bg:before {content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #036647; mix-blend-mode: color;}
.sub .subTop .bg img {width: 100%; height: 100%; object-fit: cover;}
.sub .subTop .subTitle {font-family: 'Gotham'; position: relative; z-index: 1; font-size: 2.66em; color: rgba(255, 255, 255, .5); letter-spacing: .7em; transform: translateX(.4em); text-transform: uppercase;}
.sub .subBody {padding: 3.33em 0;}
.sub .boxWrap .box {display: none;}
.sub .boxWrap .box.active {display: block; animation: upMove 1s ease both;}
.sub .starBox {display: flex; gap: 2px; flex: none; width: 6em; justify-content: flex-end;}
.sub .starBox .star {width: 1.1em; height: 1.1em; background: url(/images/ico_star_green.svg) no-repeat center / contain;}
.sub .starBox.star1 .star:not(:first-child) {background-image: url(/images/ico_star_gray.svg);}
.sub .starBox.star2 .star:not(:first-child, :nth-child(2)) {background-image: url(/images/ico_star_gray.svg);}
.sub .starBox.star3 .star:not(:first-child, :nth-child(2), :nth-child(3)) {background-image: url(/images/ico_star_gray.svg);}
.sub .starBox.star4 .star:last-child {background-image: url(/images/ico_star_gray.svg);}

.sub .itemBox {display: flex;}
.sub .swiper-horizontal > .swiper-pagination-bullets, .sub .swiper-pagination-bullets.swiper-pagination-horizontal {bottom: 1em;}
.sub .swiper-pagination-bullet {background: #222222; transition: .5s ease; opacity: .3; width: .5em; height: .5em;}
.sub .swiper-pagination-bullet-active {width: 3.33em; background: #222222; border-radius: 2em; box-sizing: border-box; opacity: 1;}

/* 상품 */
.shop .inner .productBox {display: flex; flex-wrap: wrap; gap: 1.1em; margin-bottom: 3.33em;}
.shop .inner .productBox li {width: calc(100% / 3 - .74em);}
.shop .inner .productBox li a {width: 100%; padding: .5em; border-radius: .9em; background: #fff; display: flex; flex-direction: column; gap: .9em; box-sizing: border-box;}
.shop .inner .productBox li a .imgBox {border-radius: .66em; height: 11.11em; overflow: hidden;}
.shop .inner .productBox li a .imgBox img {width: 100%; height: 100%; object-fit: cover; object-position: center; transition: .5s ease;}
.shop .inner .productBox li a .textBox {display: flex; flex-direction: column; gap: .7em}
.shop .inner .productBox li a .textBox .title {transition: .1s ease; font-weight: 400; line-height: 120%; height: 2.4em; overflow: hidden; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.shop .inner .productBox li a .textBox .title p {background-image: linear-gradient(#00664825, #00664825); background-repeat: no-repeat; background-position: left bottom 1px; background-size: 0 40%; transition: .5s ease; -webkit-box-sizing: border-box; display: initial;}
.shop .inner .productBox li a .textBox .priceBox {display: flex; gap: 4px; align-items: flex-end;}
.shop .inner .productBox li a .textBox .priceBox .per {font-size: 1.1em;}
.shop .inner .productBox li a .textBox .priceBox .per span {font-size: .8em;}
.shop .inner .productBox li a .textBox .priceBox .price {font-size: 1.35em; font-weight: 700;}

/* 상품 페이지 */
.detail .nice-select {border-radius: 12px; color: #222; border: none; font-size: 14px; height: 60px; align-items: center; padding-left: 5em;}
.detail .inner {padding-top: 2.22em; padding-bottom: 2.22em;}
.detail .inner .topWrap {display: flex; gap: 4%; align-items: flex-start; margin-bottom: 3.33em;}
.detail .inner .topWrap .leftBox {max-width: 570px; width: 50%; flex: none;}
.detail .inner .topWrap .leftBox .swiper .swiper-slide {position: relative; padding-bottom: 100%;}
.detail .inner .topWrap .leftBox .swiper img {width: 100%; height: 100%; top: 0; left: 0; position: absolute; object-fit: cover;}
.detail .inner .topWrap .leftBox .swiper-pagination {position: static; margin-top: .3em; text-align: left;}
.detail .inner .topWrap .rightBox {width: 100%; display: flex; flex-direction: column; gap: 1.55em;}
.detail .inner .topWrap .rightBox .topText {display: flex; flex-direction: column; gap: 1.35em;}
.detail .inner .topWrap .rightBox .topText .titleBox {display: flex; gap: 1.35em;}
.detail .inner .topWrap .rightBox .topText .titleBox .title {font-size: 1.35em; font-weight: 500; line-height: 120%; word-break: break-all;}
.detail .inner .topWrap .rightBox .topText .titleBox .box {display: flex; flex-direction: column; flex: none;}
.detail .inner .topWrap .rightBox .topText .titleBox .box .icon {width: 24px; height: 24px; transition: .5s ease;}
.detail .inner .topWrap .rightBox .topText .titleBox .box .heartBtn .icon {background: url(/images/ico_heart_gray.svg) no-repeat center / contain;}
.detail .inner .topWrap .rightBox .topText .titleBox .box .heartBtn.click .icon {background-image: url(/images/ico_heart.svg);}
.detail .inner .topWrap .rightBox .topText .titleBox .box .shareBtn .icon {background: url(/images/ico_share_gray.svg) no-repeat center / contain;}
.detail .inner .topWrap .rightBox .topText .priceBox {display: flex; flex-direction: column; gap: 4px; line-height: 1;}
.detail .inner .topWrap .rightBox .topText .priceBox .top {font-size: 1.1em;}
.detail .inner .topWrap .rightBox .topText .priceBox .top .gray {color: #DDDDDD;}
.detail .inner .topWrap .rightBox .topText .priceBox .bot {font-size: 2.22em; font-weight: 600;}
.detail .inner .topWrap .rightBox .topText .reviewBox {display: flex; gap: .66em; align-items: center;}
.detail .inner .topWrap .rightBox .topText .reviewBox .review {font-size: .77em; position: relative; line-height: 1.3; font-family: 'Rubik 500', 'pretendard';}
.detail .inner .topWrap .rightBox .topText .reviewBox .review:after {content: ""; position: absolute; bottom: 0; width: 100%; left: 0; height: 1px; border-bottom: 1px solid var(--black);}
.detail .inner .topWrap .rightBox .topText .textBox {line-height: 130%; color: #888888; font-size: .9em; font-weight: 500;}
.detail .inner .topWrap .rightBox .selectBox {display: flex; flex-direction: column; gap: .66em;}
.detail .inner .topWrap .rightBox .selectBox .itemBox {position: relative; background: #fff; border-radius: 12px;}
.detail .inner .topWrap .rightBox .selectBox .itemBox .text {position: absolute; top: 50%; left: 1.1em; transform: translateY(-50%); font-size: .77em; width: 3.15em; height: 1.71em; display: flex; align-items: center; justify-content: center; padding: .3em; box-sizing: border-box; color: #fff; border-radius: 10px;}
.detail .inner .topWrap .rightBox .selectBox .itemBox.top .text {background: #222;}
.detail .inner .topWrap .rightBox .selectBox .itemBox.bot .text {background: #BBBBBB;}
.detail .inner .topWrap .rightBox .selectAfter {display: flex; flex-direction: column; gap: .66em;}
.detail .inner .topWrap .rightBox .selectAfter li {display: flex; flex-direction: column; gap: .66em;}
.detail .inner .topWrap .rightBox .selectAfter .top {display: flex; flex-direction: column; gap: 4px; font-weight: 500;}
.detail .inner .topWrap .rightBox .selectAfter .top .tt1 {font-size: .9em; color: #666666;}
.detail .inner .topWrap .rightBox .selectAfter .top .tt2 {color: #CCCCCC; font-size: .77em;}
.detail .inner .topWrap .rightBox .selectAfter .bot {display: flex; gap: 1em; justify-content: space-between; align-content: center;}
.numBox {max-width:130px; height: 2em; padding: 6px; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; background: #fff; border: 1px solid #ddd; border-radius: .77em;}
.numBox button .icon {width: 22px; height: 22px; flex: none;}
.numBox .minusBtn .icon {transition: .5s ease; background: url(/images/sub/detail_minus_gray.svg) no-repeat center / contain;}
.numBox .plusBtn .icon {transition: .5s ease; background: url(/images/sub/detail_plus_gray.svg) no-repeat center / contain;}
.numBox .num {font-family: 'Rubik 600'; font-size: 14px; color: #222;}
.detail .inner .topWrap .rightBox .selectAfter .bot .totalBox {display: flex; align-items: center; gap: 8px; font-weight: 700;}
.detail .inner .topWrap .rightBox .selectAfter .bot .totalBox .price strong {color: #222;}
.detail .inner .topWrap .rightBox .selectAfter .bot .totalBox .price span {color: #BBBBBB; font-size: 13px;}
.detail .inner .topWrap .rightBox .selectAfter .bot .totalBox .deletBtn {flex: none;}
.detail .inner .topWrap .rightBox .selectAfter .bot .totalBox .deletBtn .icon {transition: .5s ease; width: 1.35em; height: 1.35em; background: url(/images/ico_delet_gray.svg) no-repeat center / contain;}
.detail .inner .topWrap .rightBox .btnBox {display: flex; gap: 10px;}
.detail .inner .topWrap .rightBox .btnBox > * {transition: .5s ease;}
.detail .inner .topWrap .rightBox .btnBox a {font-weight: 500; height: 3.33em; width: 100%; display: flex; align-items: center; justify-content: center; box-sizing: border-box; padding: .3em; border-radius: .9em; overflow: hidden;}
.detail .inner .topWrap .rightBox .btnBox .cartBtn {border: 1px solid #222222;}
.buyBtn {background: var(--mainColor); color: #fff;}
.detail .inner .topWrap .rightBox .btnBox .naverBtn {width: 3.33em; flex: none; padding: 0;}
.detail .inner .topWrap .rightBox .btnBox .naverBtn .icon {border-radius: .9em; overflow: hidden; width: 100%; height: 100%; background: url(/images/ico_naver.svg) no-repeat center / contain;}
.detail .inner .botWrap .listWrap {display: flex; justify-content: center; border-bottom: 1px solid #DDDDDD;}
.detail .inner .botWrap .listWrap ul {display: flex; align-items: center; gap: 1em;}
.detail .inner .botWrap .listWrap ul li a {position: relative; color: #BBBBBB; transition: .5s ease; height: 1.66em; padding: 0 .33em; box-sizing: border-box;}
.detail .inner .botWrap .listWrap ul li.active a {color: var(--mainColor); font-weight: 600;}
.detail .inner .botWrap .listWrap ul li.active a:after {content: ""; position: absolute; left: 50%; bottom: 0px; width: calc(100% - .66em); height: 2px; background: var(--mainColor); transform: translateX(-50%);}
.detail .inner .botWrap .boxWrap .box {padding: 2.22em 0;}
.detail .inner .botWrap .boxWrap .box02 .listBox {margin-bottom: 1.35em;}
.detail .inner .botWrap .boxWrap .box02 .listBox .list {margin-bottom: 20px; box-sizing: border-box; background: #fff; padding: 1.35em; border-radius: .9em; display: flex; flex-direction: column; gap: .9em;}
.detail .inner .botWrap .boxWrap .box02 .listBox .list .img {border-radius: .9em; overflow: hidden;}
.detail .inner .botWrap .boxWrap .box02 .listBox .list .nameBox {display: flex; align-items: center; gap: 1em; justify-content: space-between;}
.detail .inner .botWrap .boxWrap .box02 .listBox .list .nameBox .left {display: flex; align-items: center; gap: 8px;}
.detail .inner .botWrap .boxWrap .box02 .listBox .list .nameBox .left .name {color: #222; font-weight: 600}
.detail .inner .botWrap .boxWrap .box02 .listBox .list .nameBox .left .starBox .star {background-image: url(/images/ico_star_black.svg);}
.detail .inner .botWrap .boxWrap .box02 .listBox .list .nameBox .left .starBox.star1 .star:not(:first-child) {background-image: url(/images/ico_star_gray.svg);}
.detail .inner .botWrap .boxWrap .box02 .listBox .list .nameBox .left .starBox.star2 .star:not(:first-child, :nth-child(2)) {background-image: url(/images/ico_star_gray.svg);}
.detail .inner .botWrap .boxWrap .box02 .listBox .list .nameBox .left .starBox.star3 .star:not(:first-child, :nth-child(2), :nth-child(3)) {background-image: url(/images/ico_star_gray.svg);}
.detail .inner .botWrap .boxWrap .box02 .listBox .list .nameBox .left .starBox.star4 .star:last-child {background-image: url(/images/ico_star_gray.svg);}
.detail .inner .botWrap .boxWrap .box02 .listBox .list .nameBox .right {color: #999; font-size: .9em;}
.detail .inner .botWrap .boxWrap .box02 .listBox .list .text {font-size: .9em; color: rgba(17, 17, 17, .6); line-height: 160%;}
.detail .inner .botWrap .boxWrap .box02 .listBox .list .img img {width: 100%; height: 100%; object-fit: cover;}
.detail .inner .botWrap .boxWrap .box02 .grid {width:100%;}
.detail .inner .botWrap .boxWrap .box02 .grid-sizer, .detail .inner .botWrap .boxWrap .box02 .grid-item { width: calc((100% / 2) - 11px);}
.detail .inner .botWrap .boxWrap .box02 .grid .grid-item {transition: .3s ease; position: relative; overflow: hidden;}
.detail .inner .botBox {display: none;}

/* 브랜드 */
.brand {overflow: hidden;}
.brand .inner {display: flex; flex-direction: column; gap: 3.33em;}
.brand .inner .box01 {display: flex; flex-direction: column; gap: .9em; align-items: center; padding-bottom: calc(1.35em + .9em); position: relative;}
.brand .inner .box01:after {content: ""; position: absolute; width: 1px; height: 1.35em; border-right: 1px solid #222; box-sizing: border-box; bottom: 0; left: 50%; transform: translateX(-50%);}
.brand .inner .box01 .tt1 {font-family: 'pretendard'; color: var(--mainColor); font-weight: 600;}
.brand .inner .box01 .logo {max-width: 20.55em; width: 90%;}
.brand .inner .box02 .list {display: flex; gap: 3%;}
.brand .inner .box02 .list li {width: 100%; display: flex; flex-direction: column; align-items: center; text-align: center;}
.brand .inner .box02 .list li .img {position: relative; margin-bottom: 1.35em;}
.brand .inner .box02 .list li .img img {border-radius: 50%;}
.brand .inner .box02 .list li:first-child .img .logo {position: absolute; width: 11.78em; height: 100%; top: 0; left: 50%; background: url(/images/sub/brand_box02_list_img01-1.png) no-repeat center / contain; transform: translateX(-50%);}
.brand .inner .box02 .list li:first-child .img2 {margin-top: 1.35em; max-width: 15.22em; width: 90%;}
.brand .inner .box02 .list li .tt1 {font-size: 1.35em; font-weight: 700; color: var(--black);}
.brand .inner .box02 .list li .tt2 {margin-top: 1em; font-size: .9em; color: #666666; word-break: break-all; line-height: 160%; letter-spacing: -.5px;}
.brand .inner .box03 {position: relative; padding: 3.33em 0;}
.brand .inner .box03 .bg {position: absolute; width: 100vw; height: 100%; top: 0; left: 50%; transform: translateX(-50%); background: url(/images/sub/brand_box03_bg.jpg) no-repeat center / cover;}
.brand .inner .box03 .textBox {background: rgba(34, 34, 34, .4); border-radius: .9em; position: relative; backdrop-filter: blur(12px); padding: 2em; display: flex; flex-direction: column; align-items: center; gap: 1.35em; color: #fff; box-shadow: 0 2px 2px rgba(0, 0, 0, .15)}
.brand .inner .box03 .textBox .tt1 {font-size: 1.35em; font-weight: 600; text-align: center;}
.brand .inner .box03 .textBox .tt2 {font-weight: 300; word-break: break-all; text-align: center; font-size: .9em; line-height: 160%;}
.brand .inner .box04 .title {color: var(--mainColor); font-weight: 600; font-size: 1.35em; margin-bottom: .8em; text-align: center; display: none;}
.brand .inner .box04 .list {display: flex; gap: 1.35em;}
.brand .inner .box04 .list li {border-radius: 50%; border: 1px solid var(--mainColor); width: 100%; padding: 1.35em 1em; box-sizing: border-box; display: flex; align-items: center; justify-content: center; color: var(--mainColor); text-align: center; line-height: 120%; height: 8.7em; position: relative; font-weight: 600;}
.brand .inner .box04 .list li:not(:last-child):after {content: ""; width: .9em; position: absolute; right: -1.18em; height: 1px; background: var(--mainColor);}
.brand .inner .box05 .tt1 {color: #2D3650; font-size: 1.55em; text-align: center; line-height: 160%;}


/* 페이지 번호  */
.sub .pageWrap ul {display: flex; gap: 0.45em; justify-content: center;}
.sub .pageWrap ul li a {background: #fff; width: 2.1em; height: 2.1em; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: .5s ease; font-family: 'inter';}
.sub .pageWrap ul li.arrow {border-radius: 50%;; border: 1px solid #DDDDDD; box-sizing: border-box; background: #fff url(/images/ico_page_first.svg) no-repeat center;}
.sub .pageWrap ul li.arrow a {background: transparent;}
.sub .pageWrap ul li.first.active {background-image: url(/images/ico_page_first_active.svg);}
.sub .pageWrap ul li.prev {background-image: url(/images/ico_page_prev.svg);}
.sub .pageWrap ul li.next {background-image: url(/images/ico_page_next.svg);}
.sub .pageWrap ul li.last {background-image: url(/images/ico_page_last.svg);}
.sub .pageWrap ul li.last.active {background-image: url(/images/ico_page_last_active.svg);}
.sub .pageWrap ul li.now a {background: var(--mainColor); color: #fff; border-color: transparent;}


/* 공지  */
.notice .boardTable {margin-bottom: 3.33em}
.notice .boardTable table thead th {padding-bottom: .9em; border-bottom: 2px solid #222; text-align: center; vertical-align: middle; font-weight: 600;}
.notice .boardTable table thead .th2 {width: 8em;}
.notice .boardTable table tbody tr {border-bottom: 1px solid #DDDDDD; cursor: pointer;}
.notice .boardTable table tbody td {padding: 1.35em .9em;}
.notice .boardTable table tbody td:first-child div {overflow: hidden; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; font-weight: 500;}
.notice .boardTable table tbody td:first-child div p {background-image: linear-gradient(#00664825, #00664825); background-repeat: no-repeat; background-position: left bottom 1px; background-size: 0 40%; transition: .5s ease; -webkit-box-sizing: border-box; display: initial;}
.notice .boardTable table tbody td:last-child {padding-right: .5em; padding-left: .5em;}
.notice .boardTable table tbody td:last-child p {color: #999; font-size: .9em; text-align: center;}

.notice_view .boardView .titleBox {padding: .9em; padding-top: 0; border-bottom: 2px solid #222222; display: flex; flex-direction: column; gap: .44em;}
.notice_view .boardView .titleBox .title {font-weight: 500; font-size: 1.35em;}
.notice_view .boardView .titleBox .name {font-size: .9em; font-weight: 600;}
.notice_view .boardView .textBox {min-height: 25.8em; line-height: 160%; padding: 1.5em; font-size: .9em; border-bottom: 1px solid #DDDDDD;}
.notice_view .boardView .botBox {padding: .9em; display: flex; align-items: center; justify-content: space-between;}
.notice_view .boardView .botBox .backBtn {background: var(--mainColor); color: #fff; padding: .5em; width: 4.38em; height: 2.77em; box-sizing: border-box; display: flex; align-items: center; justify-content: center;}
.notice_view .boardView .botBox .date {font-size: .9em;}

/* 리뷰 */
.review .inner .listBox {margin-bottom: 1.35em;}
.review .inner .listBox .list {margin-bottom: 20px; box-sizing: border-box; background: #fff; padding: 1.35em; border-radius: .9em; display: flex; flex-direction: column; gap: .9em;}
.review .inner .listBox .list .img {border-radius: .9em; overflow: hidden;}
.review .inner .listBox .list .nameBox {display: flex; align-items: center; gap: 1em; justify-content: space-between;}
.review .inner .listBox .list .nameBox .left {display: flex; align-items: center; gap: 8px;}
.review .inner .listBox .list .nameBox .left .name {color: #222; font-weight: 600}
.review .inner .listBox .list .nameBox .left .starBox .star {background-image: url(/images/ico_star_black.svg);}
.review .inner .listBox .list .nameBox .left .starBox.star1 .star:not(:first-child) {background-image: url(/images/ico_star_gray.svg);}
.review .inner .listBox .list .nameBox .left .starBox.star2 .star:not(:first-child, :nth-child(2)) {background-image: url(/images/ico_star_gray.svg);}
.review .inner .listBox .list .nameBox .left .starBox.star3 .star:not(:first-child, :nth-child(2), :nth-child(3)) {background-image: url(/images/ico_star_gray.svg);}
.review .inner .listBox .list .nameBox .left .starBox.star4 .star:last-child {background-image: url(/images/ico_star_gray.svg);}
.review .inner .listBox .list .nameBox .right {color: #999; font-size: .9em;}
.review .inner .listBox .list .text {font-size: .9em; color: rgba(17, 17, 17, .6); line-height: 160%;}
.review .inner .listBox .list .img img {width: 100%; height: 100%; object-fit: cover;}

.review-grid {width:100%;}
.review-grid-sizer, .review-grid-item { width: calc((100% / 2) - 11px);}
.review-grid-item-mob { width: calc(100%);}
.review-grid-item {transition: .3s ease; position: relative; overflow: hidden;}

.qna-grid {width:100%;}
.qna-grid-sizer, .qna-grid-item { width: calc((100% / 2) - 11px);}
.qna-grid-item-mob { width: calc(100%);}
.qna-grid-item {transition: .3s ease; position: relative; overflow: hidden;}

@media screen and (min-width: 1025px) {
	.shop .inner .productBox li a:hover .imgBox img {transform: scale(1.05);}
	.shop .inner .productBox li a:hover .textBox .title {color: var(--mainColor);}
	.shop .inner .productBox li a:hover .textBox .title p {background-size: 100% 40%;}
    .detail .inner .topWrap .rightBox .topText .titleBox .box .heartBtn a:hover .icon {background-image: url(/images/ico_heart_green.svg);}
    .detail .inner .topWrap .rightBox .topText .titleBox .box .shareBtn a:hover .icon {background-image: url(/images/ico_share.svg);}
    .detail .inner .topWrap .rightBox .selectAfter .bot .numBox .minusBtn:hover .icon {background-image: url(/images/sub/detail_minus.svg);}
    .detail .inner .topWrap .rightBox .selectAfter .bot .numBox .plusBtn:hover .icon {background-image: url(/images/sub/detail_plus.svg);}
    .detail .inner .topWrap .rightBox .selectAfter .bot .totalBox .deletBtn:hover .icon {background-image: url(/images/ico_delet_green.svg);}
    .detail .inner .topWrap .rightBox .btnBox a:hover {box-shadow: 3px 3px 10px #00664875;}
    .detail .inner .topWrap .rightBox .btnBox .naverBtn:hover {box-shadow: 3px 3px 10px #03c75a75;}
    .sub .pageWrap ul li:not(.now) a:hover {background: #00664825; color: var(--mainColor);}
    .notice .boardTable table tbody tr:hover td:first-child p {color: var(--mainColor); background-size: 100% 40%;}
    .notice_view .boardView .botBox .backBtn:hover {box-shadow: 3px 3px #00664855; border-radius: 16px;}
}
@media screen and (max-width: 900px) {

    .brand .inner .box02 .list {flex-direction: column; gap: 2.66em;}
    .brand .inner .box02 .list li .tt2 {max-width: 31em;}
}
@media screen and (max-width: 768px){
    .sub .subTop {height: auto; padding: .75em 20px 1.25em; display: block;}
    .sub .subTop .bg {display: none;}
    .sub .subTop .subTitle {text-transform: none; font-size: 1.5em; color: var(--mainColor); letter-spacing: normal; transform: none;}
    .sub .subBody {padding-top: 0;}
    /*
    .sub .pageWrap ul li:nth-child(8), .sub .pageWrap ul li:nth-child(9), .sub .pageWrap ul li:nth-child(10), .sub .pageWrap ul li:nth-child(11), .sub .pageWrap ul li:nth-child(12) {display: none;}
     */

    .review-section {
        display: block !important;
    }
    .review-section .starBox {
        padding-top: 5px;
    }
    .review-delete {
        padding-top: 5px;
    }

    .nameBox .right {
        display: none;
        color: #999; font-size: .9em;}

	.shop {padding-top: 0;}
	.shop .inner .productBox {gap: .8em}
	.shop .inner .productBox li {width: calc(100% / 2 - .4em);}
	.shop .inner .productBox li a .imgBox {padding-bottom: 100%; position: relative; height: auto;}
	.shop .inner .productBox li a .imgBox img {position: absolute; width: 100%; height: 100%; object-fit: cover; object-position: center; top: 0; left: 0;}
    /*#container.detail {padding-top: 3.75em;}*/
    .detail .inner {padding: 0;}
    .detail .inner .topWrap {flex-direction: column; margin-bottom: 0;}
    .detail .inner .topWrap .leftBox {max-width: none; width: 100%;}
    .detail .inner .topWrap .leftBox .swiper-pagination {position: absolute; bottom: 12%; text-align: center;}
    .detail .swiper-pagination-bullet, .detail .swiper-pagination-bullet-active {background: #fff;}
    .detail .inner .topWrap .rightBox {border-radius: 15px 15px 0 0; background: #fff; margin-top: -2em; position: relative; z-index: 2; padding: 1.35em 20px; box-sizing: border-box; border-bottom: 1px solid #eee;}
    .detail .inner .topWrap .rightBox .topText .titleBox .box {display: none;}

    /*
    .detail .inner .topWrap .rightBox .selectBox, .detail .inner .topWrap .rightBox .selectAfter, .detail .inner .topWrap .rightBox .btnBox {display: none;}
     */
    .detail .inner .topWrap .rightBox .selectAfter, .detail .inner .topWrap .rightBox .btnBox {display: none;}
    .detail .inner .topWrap .rightBox{background-color: #F2F2F2}

    .detail .inner .botWrap {background: #fff; padding: 0 20px; padding-top: 3.33em; padding-bottom: 2.22em;}
    .detail .inner .botWrap .listWrap {border-bottom: none;}
    .detail .inner .botWrap .boxWrap .box02 .grid-sizer, .detail .inner .botWrap .boxWrap .box02 .grid-item {width: 100%;}
    .detail .inner .botWrap .boxWrap .box02 .listBox .list {margin-bottom: 0; border-radius: 0; border-bottom: 1px solid #eee;}
    .detail .inner .botWrap .boxWrap .box02 .listBox > div:last-child .list {border-bottom: none;}
    .detail .inner .botWrap .boxWrap .box02 .listBox .list .nameBox .left .starBox .star {background-image: url(/images/ico_star_green.svg);}
    .detail .inner .botWrap .boxWrap .box02 .listBox .list .nameBox .left .starBox.star1 .star:not(:first-child) {background-image: url(/images/ico_star_gray.svg);}
    .detail .inner .botWrap .boxWrap .box02 .listBox .list .nameBox .left .starBox.star2 .star:not(:first-child, :nth-child(2)) {background-image: url(/images/ico_star_gray.svg);}
    .detail .inner .botWrap .boxWrap .box02 .listBox .list .nameBox .left .starBox.star3 .star:not(:first-child, :nth-child(2), :nth-child(3)) {background-image: url(/images/ico_star_gray.svg);}
    .detail .inner .botWrap .boxWrap .box02 .listBox .list .nameBox .left .starBox.star4 .star:last-child {background-image: url(/images/ico_star_gray.svg);}
    .detail .inner .botBox {display: flex; padding: 16px 10px; align-items: center; gap: 8px; position: fixed; bottom: 0; width: 100%; left: 0; box-sizing: border-box; z-index: 50;}
    .detail .inner .botBox:after {content: ""; position: absolute; bottom: 0; width: 100%; height: 100%; background: linear-gradient(0deg, #222, transparent); z-index: -1; opacity: .2;left:0;}
    .detail .inner .botBox button {display: flex; align-items: center; justify-content: center; border-radius: 30px; height: 3.75em;}
    .buyBtn {background: var(--mainColor); color: #fff; width: 100%;}
    .detail .inner .botBox .buyBtn span {font-size: 1.1em;}
    .detail .inner .botBox .heartBtn {background: #fff; flex: none; width: 3.75em;}
    .detail .inner .botBox .heartBtn .icon {width: 24px; height: 24px; background: url(/images/sub/detail_ico_heart_gray.svg) no-repeat center / contain;}
    .detail .inner .botBox .heartBtn.click .icon {background-image: url(/images/sub/detail_ico_heart.svg)}
    .brand .inner .box04 .title {display: block;}
    .brand .inner .box04 .list {flex-wrap: wrap; max-width: 38em; width: 100%; width: 100%; margin: 0 auto;}
    .brand .inner .box04 .list li {width: calc(100% / 3 - .9em); height: 11.585em; padding: 1.8em;}
    .brand .inner .box04 .list li:nth-child(3):after {display: none;}
    .brand .inner .box05 .tt1 br {display: none;}
    .notice .boardTable table {font-size: .9em;}
    .notice .boardTable table tbody td {padding: 14.5px 8px;}
    .notice .boardTable table thead .th2 {width: 6em;}
    .review .inner .grid-sizer, .review .inner .grid-item {width: 100%;}
    .review .inner .listBox .list {margin-bottom: 0; border-radius: 0; border-bottom: 1px solid #ddd; background: transparent;}
    .review .inner .listBox > div:last-child .list {border-bottom: none;}
    .review .inner .listBox .list .nameBox .left .starBox .star {background-image: url(/images/ico_star_green.svg);}
    .review .inner .listBox .list .nameBox .left .starBox.star1 .star:not(:first-child) {background-image: url(/images/ico_star_gray.svg);}
    .review .inner .listBox .list .nameBox .left .starBox.star2 .star:not(:first-child, :nth-child(2)) {background-image: url(/images/ico_star_gray.svg);}
    .review .inner .listBox .list .nameBox .left .starBox.star3 .star:not(:first-child, :nth-child(2), :nth-child(3)) {background-image: url(/images/ico_star_gray.svg);}
    .review .inner .listBox .list .nameBox .left .starBox.star4 .star:last-child {background-image: url(/images/ico_star_gray.svg);}
}
@media screen and (max-width: 640px) {
    .brand .inner .box04 .list li {width: 100%; border-radius: 3em; padding: 10px; height: auto;}
    .brand .inner .box04 .list li:nth-child(3):after {display: block;}
    .brand .inner .box04 .list li:not(:last-child):after {width: 1px; height: .9em; bottom: -1.15em; left: 50%; transform: translateX(-50%);}
    .brand .inner .box05 .tt1 {font-size: 1.2em; max-width: 27em; margin: 0 auto;}
}
@media screen and (max-width: 480px) {
    .sub .pageWrap ul li a {width: 2em; height: 2em;}
    .notice_view .boardView .titleBox {padding: 0; padding-bottom: .9em;}
    .notice_view .boardView .textBox {padding: 1.5em 0;}
    .notice_view .boardView .botBox .backBtn {font-size: .9em; width: 4.2em; height: 2.25em;}
}