@charset "utf-8";

/*
 * shop.css / custom_shop.css에서 따로 수정한다.
 *
 * 1) 컬러수정
 * 2) 상품목록 - 수정 20240124
 *
 */

/* 1) 컬러수정 */
/*
input[type=text],
input[type=password],
input[type=tel],
input[type=date],
input[type=email],
input[type=number],
textarea{background-color:#101010; color:#fff; border-color:#333;}

.designCheck input[type="checkbox"] + label:before{background-image:url(../images/board/sp_check_w.png);}
.designRadio input[type="radio"] + label:before{background-image:url(../images/board/sp_radio_w.png);}
*/

/* 2)상품목록 */
[data-shop-list="default"]{display:grid; gap:60px 20px;}
[data-shop-list="default"].slide{display:flex; gap:inherit;}/* slide사용시 */
[data-shop-list="default"] > li .img{flex:0 1 100%; overflow:hidden; display:block; position:relative; padding-top:0; background-color:transparent; aspect-ratio:1/1;}
[data-shop-list="default"] > li .img i{display:block; position:absolute; top:0; left:50%; width:100%; height:100%; transform:translateX(-50%);}
[data-shop-list="default"] > li .img img{object-fit:cover; width:100%; height:100%;}
[data-shop-list="default"] > li .img i:nth-of-type(2){display:none;}
[data-shop-list="default"] > li a{display:flex; flex-direction:column; position:relative;}
[data-shop-list="default"] div{display:flex; flex-wrap:wrap; align-items:baseline;}
[data-shop-list="default"] > li > a > em,
[data-shop-list="default"] strong{flex:0 1 100%; margin-top:15px; font-size:18px; font-weight:600;}
[data-shop-list="default"] description{flex:0 1 100%; margin-top:5px; font-size:15px;}
[data-shop-list="default"] price,
[data-shop-list="default"] priceSale{display:flex; align-items:center; margin-top:5px; font-family:var(--font-eng);}
[data-shop-list="default"] price{font-size:30px;}
[data-shop-list="default"] priceSale{opacity:0.3; position:relative; margin-right:5px; font-size:25px;}
[data-shop-list="default"] priceSale:before{content:''; display:block; position:absolute; top:50%; left:0; width:100%; height:1px; background-color:#111;}
/*
[data-shop-list="default"] price:after,
[data-shop-list="default"] priceSale:after{content:'원';}
*/
[data-shop-list="default"] discount{position:absolute; right:10px; top:10px; display:flex; justify-content:center; align-items:center; width:65px; background-color:var(--color-point); border-radius:100%; font-family:var(--font-eng); font-size:20px; color:#111; aspect-ratio:1/1;}
[data-shop-list="default"] button[class*="-btn"]{position:absolute; top:0; right:0; width:40px; height:40px; background-color:transparent; background-repeat:no-repeat; background-position:50% 50%;}
[data-shop-list="default"] button.interest-btn{background-image:url(../images/shop/icon_interest.svg); background-size:18px;}
[data-shop-list="default"] button.interest-btn.on{background-image:url(../images/shop/icon_interest_on.svg);}

#product_title{line-height:1.3; color:#101010;}
.area_shopList .total > p{color:#101010;}
[data-shop-list="default"] > li > a .price i, 
[data-shop-list="default"] > li > a .price i:last-child{font-family:var(--font-hankookM); font-weight:600;}
.area_shopList [data-category-location="tab"] .web > li:only-child,
.area_shopList [data-category-location="tab"] .mob > ul > li:only-child{display:none;}
	/* 기존 */
[data-shop-list="default"] > li [data-shop-icon="icon"]{text-align:left;}
[data-shop-list="default"] > li > a .price i,
[data-shop-list="default"] > li > a .price i:last-child{position:relative; font-family:var(--font-eng); font-size:20px; font-weight:normal; text-decoration:none;}
[data-shop-list="default"] > li > a .price i:last-child{margin-left:0; font-size:25px;}
[data-shop-list="default"] > li > a .price i:not(:only-child):nth-of-type(1){margin-right:5px; color:#878787;}
[data-shop-list="default"] > li > a .price i:not(:only-child):nth-of-type(1):before{content:''; display:block; position:absolute; top:50%; width:100%; height:1px; background:#747474;}
[data-shop-list="default"] > li > a .price i:after{display:none;}
[data-shop-list="default"] > li > a > em,
[data-shop-list="default"] > li > a > i,
[data-shop-list="default"] > li > a .price,
[data-shop-list="default"] > li > a .icon,
[data-shop-list="default"] > li > a .sold{text-align:left;}
[data-shop-list="default"] > li > a .price, 
[data-shop-list="default"] > li > a .sold{margin-top:5px;}
[data-shop-list="default"] > li > a .percent{position:absolute; right:10px; top:10px; display:flex; justify-content:center; align-items:center; width:55px; height:auto; padding:0; margin:0; background-color:#383838; border-radius:100%; font-family:var(--font-eng); font-weight:normal; font-size:15px; font-weight:600; color:#fff; aspect-ratio:1/1;}
[data-shop-list="default"] > li > a .percent i{display:none;}
	/* 1)상품목록 - 반응형 */
@media screen and (min-width:1301px){
	[data-shop-list="default"]{grid-template-columns:repeat(4, 1fr);}
}
@media screen and (max-width:1300px){
	[data-shop-list="default"]{grid-template-columns:repeat(3, 1fr);}
}
@media screen and (max-width:1024px){
	[data-shop-list="default"] price,
	[data-shop-list="default"] > li > a .price i:last-child{font-size:20px;}
	[data-shop-list="default"] priceSale,
	[data-shop-list="default"] > li > a .price i:not(:only-child):nth-of-type(1){font-size:16px;}
	[data-shop-list="default"] strong{line-height:1.5cap; font-weight:700;}
	[data-shop-list="default"] discount,
	[data-shop-list="default"] > li > a .percent{width:45px; font-size:16px;}
	.area_shopList .total{margin-bottom:20px;}
	.area_shopList [data-category-location="list"]{display:none;}
}
@media screen and (max-width:768px){
	[data-shop-list="default"]{gap:50px 10px;}
	[data-shop-list="default"] price,
	[data-shop-list="default"] > li > a .price i:last-child{font-size:18px;}
	[data-shop-list="default"] discount,
	[data-shop-list="default"] > li > a .percent{justify-content:flex-start; position:static; width:auto; background-color:transparent; border-radius:0; font-family:inherit; font-size:14px; aspect-ratio:auto;}
	[data-sublayout="product"] ~ #container #content h2{margin-top:0;}
}	  
@media screen and (max-width:480px){
	[data-shop-list="default"]{gap:40px 5px;}
	[data-shop-list="default"] strong,
	[data-shop-list="default"] > li > a > em{font-size:15px;}
	[data-shop-list="default"] description{font-size:14px;}
	[data-shop-list="default"] price,
	[data-shop-list="default"] > li > a .price i:last-child{flex:0 1 100%; margin-top:0px; font-size:16px;} 
	[data-shop-list="default"] priceSale,
	[data-shop-list="default"] > li > a .price i:not(:only-child):nth-of-type(1){font-size:14px;}
}
@media screen and (max-width:450px){
	[data-shop-list="default"] > li > a .price i:not(:only-child):nth-of-type(1){display:inline-flex;}
}

/* 목록 보기형태 */
.list-control{display:none; justify-content:center; align-items:center; gap:0 15px; margin-bottom:40px;}
.list-control button{opacity:0.3; width:30px; height:30px; background-color:transparent; background-repeat:no-repeat; background-position:50% 50%; background-size:100% auto; font-size:0; transition:opacity 0.3s ease;}
.list-control button[data-listview="col01"]{background-image:url(../images/common/ico_view01.svg);}
.list-control button[data-listview="col02"]{background-image:url(../images/common/ico_view02.svg);}
.list-control button[data-listview="col03"]{background-image:url(../images/common/ico_view03.svg);}
.list-control button[data-listview="col04"]{background-image:url(../images/common/ico_view04.svg);}
.list-control button.active{opacity:1;}
	/* 목록 보기형태 - 반응형 */
@media screen and (max-width:1024px){	
	.list-control{display:flex;}
	.view-control[data-viewnumber="col01"]{grid-template-columns:repeat(1, 1fr);}
	.view-control[data-viewnumber="col02"]{grid-template-columns:repeat(2, 1fr);}
	.view-control[data-viewnumber="col03"]{grid-template-columns:repeat(3, 1fr);}
	.view-control[data-viewnumber="col04"]{grid-template-columns:repeat(4, 1fr); gap:50px 10px;}
}
@media screen and (max-width:768px){	
	.list-control{gap:0 5px; margin-bottom:30px;}
	.list-control button{background-size:20px 20px;}
	
}
@media screen and (max-width:480px){
	.view-control[data-viewnumber="col04"]{gap:40px 5px;}
}

/* 장바구니 
.area_shopCart table.table thead th{background-color:transparent !important;}
[data-cart-option="total"].area_shop_final{background-color:#222; border-color:transparent; box-shadow:0 0 50px 10px rgba(0,0,0,0.9);}
[data-cart-option="total"]:not(.area_shop_final){background-color:transparent; border-color:#222;}
[data-cart-option="total"] > *{color:#fff;}
[data-cart-option="total"] > * em{color:#888; font-weight:normal;}
.area_shopCart [data-cart-table="count"] [data-cart-option="send"]{background-color:transparent;}
@media screen and (max-width:1220px){
	[data-cart-option="total"] > div{border-color:#373737;}
}
@media screen and (max-width:768px){
	.area_shopCart [data-cart-table="count"]{display:inline-flex; align-items:center; gap:0 3px;}
}
@media screen and (max-width:480px){
	.area_shopCart [data-cart-table="price"],
	.area_shopCart [data-cart-table="count"]{width:100%;}
}
*/

/* 제품상세 */
[data-shop-view="tab"] > li > a.active,
[data-shop-view="tab"] > li > a.go,
[data-shop-view="tab"] > li > a:hover{font-weight:500;}
[data-shop-view="conts"] div[id^="shopView"] .title{font-size:35px;}
[data-shop-view="conts"] div[id^="shopView"] .title + .sub{font-size:16px;}
@media screen and (max-width:1240px){
	[data-shop-view="tab"]{width:calc(100% - 20px);}
}
@media screen and (max-width:1024px){
	[data-shop-view="conts"] div[id^="shopView"] .title{font-size:clamp(25px, calc(35 / 1024 * 100vw), 35px);}
	.area_shopView{padding-top:clamp(50px, calc(110 / 1024 * 100vw), 110px);}
}

/* 게시판 */
ul.bbsList{border-top-color:#111;}
ul.bbsList li .subject{font-size:18px; font-weight:500; color:#111;}
ul.bbsList li .more:before{filter:grayscale(1);}
ul.bbsList li .more.active,
ul.bbsList li .more:hover,
ul.bbsList li .more:focus{width:36px; border-color:#111;}
ul.bbsList li .more.active em,
ul.bbsList li .more:hover em,
ul.bbsList li .more:focus em{display:none;}
ul.bbsList li .subject:hover,
ul.bbsList li .subject:focus{color:var(--color-point);}
ul.bbsList li .date i{font-weight:500;}
.bbsTitle{border-top-color:#111; font-size:20px !important; font-weight:600 !important; color:#101010 !important; text-align:center;}
.pagination a[class^="btn_"]:hover,
.pagination a[class^="btn_"]:focus{background-position-y:0px;}

/* 버튼 */
.button,
input.button{border-radius:0px;}
.button{background-color:#000; border:1px solid #000;}
.button.blue{background:var(--color-point); border:1px solid var(--color-point);}
.button.gray{background-color:#ac9f9b; border-color:#ac9f9b;}
.button.yellow{background-color: gold; color:black !important;}
.button.btn_buy{background-color:var(--color-point); border-color:var(--color-point);}
.button:before{display:none;}
.button.white{background-color:#000; border-color:#000; color:#fff !important;}
.button.sm{border-color:rgba(255,255,255,0.3);}
.button:not(.white):hover,
.button:not(.white):focus{color:#fff !important;}
input.button:hover,
input.button:focus{opacity:1;}

/* 안내 */
.area_shop_terms .box_terms{}
.area_shop_terms p{font-weight:normal;}
.area_shop_terms ul li{font-weight:normal;}
.area_shop_terms p strong{color:var(--color-point);}

/* table */
.form-flex{display:flex; flex-wrap:wrap; align-items:center; gap:5px;}
.bbsList thead th{background-color:transparent; font-weight:500;}
.bbsList thead tr:first-child th{border-top-color:#101010;}

/* datapickter */
select[class*="ui-datepicker"]{color:#222;}
.ui-widget.ui-widget-content{border-color:#111; box-shadow:0 40px 50px rgba(0,0,0,0.9);}
.ui-datepicker-trigger{filter:invert(1);}

/* 로그인 */
.login_check_box{margin-top:10px;}
.login_check_box input{margin-top:0;}
.area_join_select h2{font-size:clamp(30px, calc(50 / var(--inr) * 100vw), 50px) !important; font-family:'Hankook TTF Medium', 'Pretendard', serif !important;}
.area_join_select.login h2{font-size:clamp(20px, calc(35 / var(--inr) * 100vw), 35px) !important; font-weight:normal !important;}
.area_shopLogin .btn_submit{background-color:#101010; border-color:#101010;}

/* 회원가입 */
.join_area{max-width:800px; margin:0 auto;}
.join_area > p{color:#777; font-weight:normal;}
.join_area h3{color:#f5f5f5;}
.join_area .box{border-color:#3f3f3f;}
.join_area .join_box_scroll{border-color:#3f3f3f;}
.join_area .join_box_scroll::-webkit-scrollbar{background:transparent;}
.join_area .join_box_scroll::-webkit-scrollbar-thumb{background-color:hsl(0deg 0% 42.82% / 58%);}
.join_area .bbsView td em{color:#aaa;}
[data-result="email"]{flex:0 1 100%;}
[data-member-form="email"] #email2{flex:0 1 100%;}
[data-member-form="email"] select{flex:auto;}

@media screen and (max-width:480px){
	.bbsView td[data-member-form="phone"]{display:flex; align-items:center; gap:4px;}
	.bbsView td[data-member-form="phone"] select,
	.bbsView td[data-member-form="phone"] input{flex:auto;}
	.bbsView > tbody > tr > td.spam{display:flex; align-items:center; gap:4px;}
	.bbsView .spam > span{flex:none;}
	.bbsView .spam input[type="text"]{flex:auto;}
}

/* 관심상품 */
@media screen and (max-width:1220px){
	 .area_shopCart table.table tr{font-size:0;}
	 .area_shopCart table.table tr td{font-size:initial;}
	 .area_shopCart [data-cart-table="set"]{background-color:#222;}
	 .area_shopCart.wish [data-cart-table="price"]{width:100%;}
}

/* 비밀번호 */
.secret_area:before,
.secret_area:after{display:none}
.secret_area i{opacity:0.3; display:flex; justify-content:center; align-items:center; width:70px; height:70px; box-sizing:border-box; margin:0 auto; border:3px solid rgba(19,19,19,0.3); border-radius:100%; margin-bottom:30px; font-size:30px; color:#111;}
.secret_area .login_social:before,
.secret_area .login_social:after{display:none;}

/* 주문입력 */
/*
.area_shopPay .title,
[data-shop-view="addcordion_conts"] .title{color:#fff;}

[data-shop-view="point"]{border-top-color:#777; border-bottom-color:#3f3f3f;}
[data-shop-view="point"] > div > em{color:#fff; font-weight:normal;}
[data-shop-view="point"] > div:nth-of-type(2){border-color:#373737;}
[data-cart-option="total"] .total [data-expected-price],
[data-cart-option="total"] [data-total-price]{color:var(--color-point);}
.area_shop_payment .designRadio.blue{background:transparent; border-color:#373737;}
.area_shop_payment .designRadio input[type="radio"]:checked + label{background-color:var(--color-point); border-color:var(--color-point);}
.area_shop_payment .bankbook{border-bottom-color:#777;}
.area_shop_payment .bankbook ul li{border-color:#373737;}
.area_shopCart [data-cart-option="img"] .status{color:#aaa;}
.area_shopCart [data-cart-option="img"] .status span{color:var(--color-point);}
.area_shopMypage span[class^="status"]{background:transparent !important; border-width:0 !important;}
*/

/* 배송지선택 
.popWrap h1{border-bottom-color:#373737; color:#fff; font-size:18px;}
*/
.btn_popClose{filter:invert(1);}

/* 아코디언 
[data-shop-view="addcordion"]{background:#222; border-color:var(--color-point);}
[data-shop-view="addcordion"] em{color:var(--color-point); font-weight:600;}	 
@media screen and (max-width:1220px){
	[data-shop-view="addcordion"].active,
	[data-shop-view="addcordion"].show{background:#222; border-color:var(--color-point); border-bottom-color:#373737;}
	[data-shop-view="addcordion"].show + [data-shop-view="addcordion_conts"]{border-color:var(--color-point);}
}
*/

/* button box */
.btn_area .button.lg{min-width:200px; border-radius:50em;}
.btn_area .button.lg i{margin-right:10px;}

/* 게시판 */
.list_file li > a:before{top:5px;}
.none_data{padding:100px 10px; color:#bbb;}
.bbsTitle.flex{display:flex; justify-content:center; align-items:center; gap:20px; text-align:left; word-break:keep-all;}
@media (max-width:1024px){
	.bbsTitle.flex{flex-direction:column; gap:10px; text-align:center; line-height:1.3;}
}

/* view에디터관련 */
.bbsContent *{font-size:initial;}
.bbsContent .conts :not(.img):not(.img *):not(.iframe_video):not(.iframe_video *){all:revert-layer;}
.bbsContent .conts{min-height:370px; line-height:1.7; padding-bottom:20px;}
.bbsContent .conts .img{display:flex; flex-direction:column; align-items:center; gap:10px 0; padding-bottom:30px; text-align:center;}
.bbsContent .conts .img img,
.bbsContent .conts img,
.bbsContent img{max-width:100% !important; height:auto !important;}
#content .bbsContent .conts table{border-top:unset;}
#content .bbsContent .conts table,
#content .bbsContent .conts td,
#content .bbsContent .conts th{border:1px solid black}
#content .bbsContent table,
#content .bbsContent table *{all:revert-layer;}
#content .bbsContent table{max-width:100%;}
	/* view에디터관련 - 반응형 */
@media screen and (max-width:768px){
	#content .bbsContent table{max-width:inherit;}
	.bbsContent .conts :not(.img):not(.img *):not(.iframe_video):not(.iframe_video *){width:auto !important;}
}

/* 갤러리게시판 커스텀 */
.photo-news{border-top:2px solid #111;}
.photo-news > li{padding:20px 0; border-bottom:1px solid #e7e7e7;}
.photo-news > li > a{display:flex; align-items:center; gap:60px;}
.photo-news .img{order:2;}
.photo-news .news-box{order:1;}
.photo-news .img{flex:none; overflow:hidden; width:360px; aspect-ratio:16/11;}
.photo-news .img i{display:block; width:100%; height:100%; background-size:cover;}
.photo-news .news-box{flex:auto; display:flex; flex-direction:column; align-items:flex-start; gap:20px;}
.photo-news .news-box strong{font-size:23px; font-weight:500; line-height:1.3; word-break:keep-all; display:-webkit-box; overflow:hidden; -webkit-line-clamp:2; -webkit-box-orient:vertical; text-overflow:ellipsis;}
.photo-news .news-box .write em{color:#aaa;}
.ko-basic-list__cate{flex:none; display:flex; justify-content:center; align-items:center; min-width:120px; height:38px; box-sizing:border-box; padding:0 15px; border:2px solid var(--color-point); border-radius:50em; font-size:14px; color:var(--color-point);}

@media (hover:hover){
	.photo-news > li{transition:opacity 0.3s ease;}
	.photo-news:hover > li:not(:hover){opacity:0.5;}
	.photo-news:hover > li:hover{opacity:1;}
	.photo-news > li > a .img i{transform:scale(1); transition:transform 0.7s ease;}
	.photo-news > li > a:hover .img i{transform:scale(1.05);}
}
@media (max-width:1024px){
	.photo-news .img{width:clamp(180px, 31.25vw, 320px);}  	
	.photo-news .news-box strong{font-size:clamp(18px, 2.246vw, 23px);}
}
@media (max-width:620px){
	.photo-news > li > a{gap:40px;}
}
@media (max-width:480px){
	.photo-news > li > a{display:flex; flex-direction:column; gap:20px;}
	.photo-news .img{order:1;}
	.photo-news .news-box{order:2;}
	.photo-news .img{width:100%;}
	.photo-news .news-box{flex:none; gap:10px; width:100%;}
	.ko-basic-list__cate{min-width:90px; height:35px;}
}