@charset "utf-8";

.products {}

.productList {}
.productList h3 {color: #000;font-size:var(--fs36);font-weight: 700;line-height: normal;}


.products-search {padding:30px 0;}
.products-search form {}
.products-search .inputWrap {display:flex;}
.products-search .inputWrap>* {height:60px;}
.products-search .inputWrap select {width:260px; margin-right:5px; border-radius:0;}
.products-search .inputWrap input {width:calc(100% - 590px); border-radius:0;}
.products-search .inputWrap button {width:60px; height:60px; border:1px solid #ddd; margin-left:-1px;}
.products-search .inputWrap button img {width:100%; height:100%; object-fit:scale-down;}

.products-total {padding:0 0 10px; display:flex; align-items:center; justify-content:space-between;}
.products-total .totalNum {}
.products-total select {width:200px; height:60px; border-radius:0;}

.products-list {display:flex; gap:60px 40px; flex-wrap:wrap;}
.products-list-item {width:calc((100% - 120px)/4); display:flex; flex-direction:column; gap:20px; position:relative;}
.products-list-item .detail {width:100%; height:100%; position:absolute; left:0; top:0; background:rgba(0,0,0,.9); opacity:0; overflow:hidden;}
.products-list-item .detail ul {}
.products-list-item .detail ul li {color:#fff; padding:10px 10px 10px 120px; font-size:var(--fs14); position:relative; border-bottom:1px solid rgba(255,255,255,.3);}
.products-list-item .detail ul li span {color: #fff; font-weight: 500; left:20px; position:absolute;}
.products-list-item:hover .detail{opacity:1; z-index:1;}

.products-list-item .head {display:flex; flex-direction:column; gap:1px; left:0; top:0; position:absolute;z-index:1;}
.products-list-item .head span {width: 80px; line-height: 35px; color: #FFF;text-align: center;font-size: var(--fs14);font-weight: 600; background:#999}
.products-list-item .head span.new {background:var(--base1);}
.products-list-item .head span.best {background:var(--base2);}
.products-list-item .img {aspect-ratio:1/1; border: 1px solid #DDD;background: #FFF; position:relative;}
.products-list-item .img img {width:100%; height:100%; object-fit:scale-down;}
.products-list-item .desc {display:flex; flex-direction:column; gap:10px;}
.products-list-item .desc p {color: #666;font-size: var(--fs14);font-weight: 500;line-height: normal;}
.products-list-item .desc .sub {}
.products-list-item .desc .tit {color: #000;font-size:var(--fs21);font-weight: 700;}
.products-list-item .desc .txt {}

.products-list-item:hover .img {border:2px solid var(--base1);}

.productView {}
.productView-tit {display:flex; gap:70px;}
.productView-tit-img {width:calc(50% - 70px);}
.productView-tit-img-main {aspect-ratio:1/1; border:1px solid #ddd; }
.productView-tit-img-main-item {width:100%; height:100%; display:none;}
.productView-tit-img-main-item.active {display:block;}
.productView-tit-img-main-item .youtubevideowrapperdiv  {height:100%;}
.productView-tit-img-main-item img {width:100%; height:100%; object-fit:scale-down;}
.productView-tit-img-sub {display:flex; margin-top:-1px;}
.productView-tit-img-sub-item {width:25%; aspect-ratio:1/1; border:1px solid #ddd; position:relative;}
.productView-tit-img-sub-item:after {width:100%; height:100%; border:2px solid var(--base1); left:0; top:0; position:absolute; display:block; content:'';opacity:0; transition:var(--ani);}
.productView-tit-img-sub-item.active {border-color:var(--base1);}
.productView-tit-img-sub-item.active:after {opacity:1;}
.productView-tit-img-sub-item img {width:100%; height:100%; object-fit:scale-down;}
.productView-tit-img-sub-item.iframe {position:relative;}
.productView-tit-img-sub-item.iframe:before {width:100%; height:100%; left:0; top:0; position:absolute; background:rgba(0,0,0,.6) url(/images/products/playBtn.svg)center /40% no-repeat; display:block; content:'';}
/* .productView-tit-img-sub-item iframe {} */

.productView-tit-desc {width:50%;}
.productView-tit-desc-tit {padding:20px 30px; border-width:1px 0; border-style:solid; border-color:#000; }
.productView-tit-desc-tit h3 {color: #000;font-size: var(--fs32);font-weight: 700;line-height: normal;}
.productView-tit-desc-tit p {padding:5px 0 0; font-size:var(--fs18);line-height: normal;}
.productView-tit-desc-txt {}
.productView-tit-desc-txt ul {}
.productView-tit-desc-txt ul li {padding:16px 30px 16px 230px; font-size:var(--fs18); position:relative; border-bottom:1px solid #E5E5E5;}
.productView-tit-desc-txt ul li span {color: #000; font-weight: 500; left:30px; position:absolute;}

.productView-tit-desc-btn {padding:20px 0 0; display:flex; gap:10px;}
.productView-tit-desc-btn a {
	width:calc((100% - 10px)/2); height:70px; gap:10px; display:flex; align-items:center; justify-content:center;
	font-size:var(--fs18); font-weight:600; letter-spacing:-.5px;
	color:#fff; border-radius:5px; background:var(--base1);
	
}
.productView-tit-desc-btn a.online {}
.productView-tit-desc-btn a.kakao {background:var(--base2);}

.productView-subTit {color: #000; padding:0 0 15px; margin:0 0 20px; border-bottom:1px solid #000;font-size:var(--fs27);font-weight: 500;line-height: normal;}

.productView-battery {}
.productView-battery-list {display:flex; gap:40px 30px; flex-wrap:wrap;}
.productView-battery-item {width:calc((100% - 120px)/5);}
.productView-battery-item-img {aspect-ratio:1/1; border: 1px solid #DDD;background: #FFF;}
.productView-battery-item-img img {width:100%; height:100%; object-fit:scale-down;}
.productView-battery-item-txt {}
.productView-battery-item-txt .tit {padding:15px 0 10px;color: #000;font-size: var(--fs18);font-weight: 500;line-height: normal;}
.productView-battery-item-txt .txt {font-size: var(--fs14);line-height: normal;}

.productView-battery-item:hover .productView-battery-item-img {border-color:var(--base1);}

.productView-detail {}
.productView-detail img {height:auto !important;}
.productView-detail-con {padding:0 0 50px; min-height:2000px; height:2000px; overflow:hidden;}
.productView-detail .moreBtn {
	width:100%; height:80px; display:flex; gap:10px; align-items:center; justify-content:center;
	color:#000; font-size:var(--fs18); font-weight:500; transition:var(--ani);
	border-radius: 0 0 10px 10px;border: 1px solid #E5E5E5;background: #FFF;
	box-shadow: 0 -10px 70px 30px rgba(255, 255, 255, 0.80);
}
.productView-detail .moreBtn:hover {background-color:#f1f1f1;}
.productView-detail .moreBtn span {}
.productView-detail .moreBtn img {}

.productView-detail.active {}
.productView-detail.active .productView-detail-con {height:initial;}
.productView-detail.active .moreBtn img {transform:rotate(180deg);}




@media (max-width: 1199px) {
	
	.products-search {padding:20px 0;}
	.products-search .inputWrap {flex-wrap:wrap; gap:5px 0;}
	.products-search .inputWrap>* {height:50px;}
	.products-search .inputWrap select {width:calc((100% - 5px)/2);}
	.products-search .inputWrap select+select{margin:0;}
	.products-search .inputWrap input {width:calc(100% - 50px)}
	.products-search .inputWrap button {width:50px; height:50px;}
	.products-search .inputWrap button img {}
	
	
	.products-total select {height:50px;}
	
	.products-list {gap:60px 30px}
	.products-list-item {width:calc((100% - 60px)/3);}
	.products-list-item .head span {width:60px; line-height:30px; font-weight:400;}
	
	.productView {}
	.productView-tit {flex-direction:column; gap:20px;}
	.productView-tit-img {width:70%;}
	.productView-tit-img-main {height:40vw;}
	
	.productView-tit-desc {width:100%;}
	.productView-tit-desc-btn a {height:60px;}
	.productView-tit-desc-btn a svg {height:30px;}
	
	.productView-battery-list {gap:30px 20px;}
	.productView-battery-item {width:calc((100% - 60px)/4);}
	
	.productView-detail .moreBtn {height:70px;}
	
	
	
}

@media (max-width: 767px) {
	
	.products-search {padding:20px 0;}
	.products-search .inputWrap {}
	.products-search .inputWrap>* {height:40px;}
	.products-search .inputWrap input {width:calc(100% - 39px)}
	.products-search .inputWrap button {width:40px; height:40px;}
	
	.products-total select {height:40px;}
	
	.products-list {gap:40px 20px}
	.products-list-item {width:calc((100% - 20px)/2); gap:10px;}
	.products-list-item .head span {width:50px; line-height:25px; font-weight:300;}
	.products-list-item .desc {gap:5px;}
	
	
	.productView-tit-img {width:100%;}
	.productView-tit-img-main {min-height:250px;}
	.productView-tit-desc-tit {padding:16px 20px;}
	.productView-tit-desc-txt ul {}
	.productView-tit-desc-txt ul li {padding:10px 20px;}
	.productView-tit-desc-txt ul li span {padding:0 0 5px; position:static; display:block;}
	.productView-tit-desc-btn {padding:10px 0 0; flex-direction:column; gap:5px;}
	.productView-tit-desc-btn a {width:100%; height:50px; gap:5px;}
	.productView-tit-desc-btn a svg {height:25px;}
	
	.productView-battery-list {gap:20px 10px;}
	.productView-battery-item {width:calc((100% - 10px)/2);}
	.productView-battery-item-txt .tit {padding:10px 0 5px;}
	
	.productView-detail-con {min-height:500px; height:500px}
	.productView-detail .moreBtn {height:60px; gap:5px;}
	.productView-detail .moreBtn img {height:20px;}
	
	
	
	
}