/*------------------------------------------
Tab
---------------------------------------------*/
.tab_wrap ul {display:flex; gap:.5rem; flex-wrap:wrap;}
.tab_wrap ul li a{display:inline-block; padding:1.3rem 2.5rem; border:1px solid #ddd; border-radius:3rem; transition: all .3s; word-break:keep-all;}
.tab_wrap ul li:hover a, 
.tab_wrap ul li.active a {background:var(--main-color1); color:var(--white); border-color:var(--main-color1);}

@media screen and (max-width: 1600px) { 

 
}
@media screen and (max-width: 1024px) {
	.tab_wrap ul li a{ padding:1.2rem 2rem; font-size: 1em;}
}
@media screen and (max-width: 768px) { 
	.tab_wrap ul.no3 li {width:48%;}
	.tab_wrap ul li a{width:100%; padding:1rem; text-align: center; font-size: 1.1em; box-sizing:border-box;}
}
 

/*------------------------------------------
List
---------------------------------------------*/
.item_product {position: relative;margin-bottom: 15rem; margin-top:5rem;}
.item_product .stitle_area {position: relative; display:flex; justify-content: flex-end;  align-items: center; margin-bottom: 3rem;}
.item_product .stitle_area .breadcrumb {position: relative;}
.item_product .stitle_area .breadcrumb ul {display:flex;}
.item_product .stitle_area .breadcrumb ul li {display:flex;align-items: center;font-size: .8em;}
.item_product .stitle_area .breadcrumb ul li i {margin:0 1rem;opacity:.5;}
.item_product .stitle_area .breadcrumb ul li.home i {opacity:1; margin:0; 	}

.item_product .product_area {position: relative; display:flex; flex-wrap: wrap;}
.item_product .product_area li {width: 25%;}
.item_product .product_area li.nodata_box {width: 100%;display:flex; flex-direction: column;  justify-content: center;  align-items: center;}
.item_product .product_area li.nodata_box i {font-size:3em;}
.item_product .product_area li.nodata_box p {font-size: 1.2em;}

.product_box {margin:1rem;margin-bottom: 5rem; display: flex; flex-direction: column;  align-items: center;}
.product_box > a {display: flex; flex-direction: column; align-items: center;}
.product_box .thumbnail {position: relative; width: 100%; overflow:hidden; max-width:34rem; height: 34rem; max-height:34rem;background: #f8f8f8; border-radius:2rem; display:flex; align-items: center;	}
.product_box .thumbnail .tag_box {position: absolute; top:1.5rem; left:1.5rem; display:flex;}
.product_box .thumbnail .tag_box em{font-size: .7em;margin:0 0.1rem; padding:.3rem .5rem; display: inline-block; color:#ffffff; background-color: #000000;}
.product_box .thumbnail .thumb_img {overflow:hidden;  mix-blend-mode: multiply; }
.product_box .thumbnail .thumb_img img{width: 100%;display: block;}
.product_box .title { margin-top: 2rem; text-align: center;}
.product_box .title span {font-size: .8em;display: block; margin-bottom: 1rem;}
.product_box .title p {font-size: 1.1em; font-weight: 600; word-break:keep-all;}


@media screen and (max-width: 1400px) {
	.product_box .thumbnail {height:auto; }
}
@media screen and (max-width: 1024px) {
	.item_product .product_area li {width: 33.33%;}
}
@media screen and (max-width: 768px) { 
	.item_product { margin-top:2rem;}
	.item_product .stitle_area .breadcrumb ul li {font-size: 1em;}
	.item_product .product_area li {width: 50%; padding:2rem 0;}

	.product_box {margin-bottom: 0;} 


}
@media screen and (max-width: 568px) { 
	.product_box .title {margin-top: 1rem;}
	.product_box .title p {font-size: 1em; }
}



/*------------------------------------------
View
---------------------------------------------*/
.item_proview {position: relative; display:flex; margin-top: 7rem;}
.item_proview .goto_back {position: absolute; top:0; right:0	;}
.item_proview .goto_back a {font-size: 1.1em; display:flex;  justify-content: center; align-items: center; padding:1.2rem 2.2rem; border:2px solid #E8E8E8; border-radius:5rem;}
.item_proview .goto_back i {display:inline-block; width:2.2rem; height:2.2rem; background:url(../images/ico_back.svg)no-repeat 50% 50% / cover; margin-right:1.5rem;}
.item_proview .goto_back span {}

.item_proview .thumb_wrap { top:0; width:65rem; height:80rem; overflow:hidden;}
.item_proview .thumb_wrap .thumb_area {width: 100%; height: 100%; position: relative; display:flex; flex-direction: column; gap:3rem;}
.item_proview .thumb_wrap .thumb_area .swiper-pagination {margin-bottom: 2rem;}
.item_proview .thumb_wrap .thumb_area .proview_img {position:relative; width:64rem; aspect-ratio: 1 / 1; border:1px solid #EFEFEF; mix-blend-mode: multiply; border-radius:2rem; overflow:hidden;}
.item_proview .thumb_wrap .thumb_area .proview_img ul { width:100%;}
.item_proview .thumb_wrap .thumb_area .proview_img ul li {position: relative; width:100%; }
.item_proview .thumb_wrap .thumb_area .proview_img ul li img {position:relative; width:100%; height:100%; object-fit:cover;}
.item_proview .thumb_wrap .thumb_area .proview_thum { height: 100%; width: 100%; height:12rem; overflow: hidden; }
.item_proview .thumb_wrap .thumb_area .proview_thum ul {}
.item_proview .thumb_wrap .thumb_area .proview_thum .swiper-slide {position: relative;  aspect-ratio: 1 / 1; cursor: pointer; overflow: hidden; opacity: .5; text-align: center; background-color: #ffffff; border-radius:1rem; overflow:hidden;}
.item_proview .thumb_wrap .thumb_area .proview_thum .swiper-slide.swiper-slide-thumb-active {position:relative; opacity: 1;  box-sizing: border-box;}
.item_proview .thumb_wrap .thumb_area .proview_thum .swiper-slide.swiper-slide-thumb-active:after {position:absolute; left:0; top:0; width:100%; height:100%; content:''; border:2px solid var(--main-color1); box-sizing:border-box; border-radius:1rem;}
.item_proview .thumb_wrap .thumb_area .proview_thum .swiper-slide img {position:relative; width:100%; height:100%; object-fit:cover;}
 
.item_proview .spec_wrap {position: relative; width: calc(100% - 65rem); min-height: auto;}
.item_proview .spec_wrap .spec_area {width: auto; margin: 7rem; margin-right: 0;}
.item_proview .spec_wrap .spec_area section {margin-bottom: 5rem;}
.item_proview .spec_wrap .spec_area .spec_top {position: relative;}
.item_proview .spec_wrap .spec_area .spec_top .title {margin-bottom: 3rem;}
.item_proview .spec_wrap .spec_area .spec_top .title span { font-size: .9em;display: block;margin-bottom: 1rem;}
.item_proview .spec_wrap .spec_area .spec_top .title h2 {font-size: 2.25em; color:#222; font-weight: 700; letter-spacing:-0.025em;}
.item_proview .spec_wrap .spec_area .spec_top .descrip {margin:0 0 2rem 0;}

.item_proview .spec_wrap .spec_area .spec_top ul {display:flex;}
.item_proview .spec_wrap .spec_area .spec_top ul li {width:49%; margin:.5%;}
.item_proview .spec_wrap .spec_area .spec_top .con_btn {display:block; width:100%; padding:1em 1.5em; text-align: center;box-sizing:border-box; background:var(--main-color1); color:var(--white); 
border-radius:.4rem; font-weight: 500; font-size: 1em; }
.item_proview .spec_wrap .spec_area .spec_top .con_btn:before {display:none;}
.item_proview .spec_wrap .spec_area .spec_top .con_btn.buy {background:var(--main-color1); color:var(--white); border:1px solid var(--main-color1);}
.item_proview .spec_wrap .spec_area .spec_top .con_btn.list {background:var(--white); color:var(--main-color1); border:1px solid var(--main-color1);}

.item_proview .spec_wrap .spec_area .spec_info {position: relative; }
.item_proview .spec_wrap .spec_area .spec_info .specinfo_tit{position: relative; cursor: pointer;padding:1.5rem 0; border-bottom: 2px solid #000000; color:#222; font-weight: 600;	}
.item_proview .spec_wrap .spec_area .spec_info .specinfo_tit > span {font-size:  1.125em;}
.item_proview .spec_wrap .spec_area .spec_info .specinfo_tit .arrow-wrap { position: absolute; top:50%; right: 10px; transform: translate(0, -50%); }
.item_proview .spec_wrap .spec_area .spec_info .specinfo_tit .arrow-wrap i {}
.item_proview .spec_wrap .spec_area .spec_info .specinfo_tit .arrow-top {  display: none;}
.item_proview .spec_wrap .spec_area .spec_info .specinfo_tit .arrow-bottom {  display: block;}
.item_proview .spec_wrap .spec_area .spec_info .specinfo_tit.on .arrow-bottom {  display: none;}
.item_proview .spec_wrap .spec_area .spec_info .specinfo_tit.on .arrow-top {  display: block; }
.item_proview .spec_wrap .spec_area .spec_info .specinfo_cont {  overflow: hidden; width: 100%; position: relative; 	}
/*.item_proview .spec_wrap .spec_area .spec_info .specinfo_cont ul li {border-bottom:1px solid #dddddd; padding:2rem 0; font-size: .9em;}*/
.item_proview .spec_wrap .spec_area .spec_info .specinfo_cont em { display: inline-block; margin-bottom: .5rem;font-weight: bold; color:#222;}
.item_proview .spec_wrap .spec_area .spec_info .specinfo_cont p {}

.item_proview .spec_wrap .spec_area .spec_link {position: relative; width: 100%; display:flex;     justify-content: flex-end;}
.item_proview .spec_wrap .spec_area .spec_link a {position: relative; width: 22rem; height: 6.5rem;background-color: #000000; color:#ffffff; display:flex; align-items: center; justify-content: center;}

.item_proview .spec_wrap .spec_area .spec_detail {position: relative; line-height: 150%;}
.item_proview .spec_wrap .spec_area .spec_detail img {width: auto; height: auto; max-width: 100%;}

.item_proview .spec_wrap .spec_area .spec_info .spec_li {}
.item_proview .spec_wrap .spec_area .spec_info .spec_li { list-style: none; margin: 0; padding: 4rem 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem 6rem; border-top: 1px solid #eaeaea; border-bottom: 1px solid #eaeaea; }
.item_proview .spec_wrap .spec_area .spec_info  .spec_li li {width:100%; display: flex; align-items: center; gap: 2.5rem; }
.item_proview .spec_wrap .spec_area .spec_info  .spec_li li i { width: 6.5rem; height: 6.5rem; flex-shrink: 0; border-radius: 1.2rem; background: #f4f4f4; display: flex; align-items: center;
 justify-content: center; background-position: center; background-repeat: no-repeat; background-size: 3.8rem; }
.item_proview .spec_wrap .spec_area .spec_info  .spec_li li:nth-child(1) i { background-image: url('../images/ico_prod1.svg'); }
.item_proview .spec_wrap .spec_area .spec_info  .spec_li li:nth-child(2) i { background-image: url('../images/ico_prod2.svg'); }
.item_proview .spec_wrap .spec_area .spec_info  .spec_li li:nth-child(3) i { background-image: url('../images/ico_prod3.svg'); }
.item_proview .spec_wrap .spec_area .spec_info  .spec_li li:nth-child(4) i { background-image: url('../images/ico_prod4.svg'); }
.item_proview .spec_wrap .spec_area .spec_info  .spec_li li div { display: flex; flex-direction: column; gap: 4px; }
.item_proview .spec_wrap .spec_area .spec_info  .spec_li li strong { font-size: 1.8rem; font-weight: 500; color: #8a8a8a; }
.item_proview .spec_wrap .spec_area .spec_info  .spec_li li p { margin: 0; font-size: 1.8rem; font-weight: 600; color: #1a1a1a; letter-spacing:-0.025em;}


.item_detail {margin:10rem 0 0 0;}
.item_detail h3.tit {margin: 0 0 2rem 0;}
.item_detail .item_cont {padding:3rem 0; border-top:2px solid #222; border-bottom:1px solid #1E1E1E;}
.item_detail .item_cont img {max-width:100%; height:auto;}
.list_btn { width: 6.5rem; height: 6.5rem; border: 1px solid #1a1a1a; border-radius: .5px; cursor: pointer; background:url('../images/ico_dot.svg')no-repeat 50% 50%;
 margin:3rem auto; font-size:0; display:block; border-radius:.3rem;}


@media screen and (max-width: 1600px) {
	.item_proview {margin-top: 0;}
	.item_proview .goto_back a {padding:1rem 2rem; }
	.item_proview .goto_back i {width:2rem; height:2rem; margin-right:1.2rem;}

	.item_proview .thumb_wrap {width:50%; height:auto;}
	.item_proview .thumb_wrap .thumb_area { gap:2rem;} 
	.item_proview .thumb_wrap .thumb_area .proview_img { width:100%; }
	
	.item_proview .spec_wrap {width: 50%;}
	.item_proview .spec_wrap .spec_area {margin: 6rem 0 6rem 6rem;}
	.item_proview .spec_wrap .spec_area section {margin-bottom: 4rem;}
	.item_proview .spec_wrap .spec_area .spec_top .title {margin-bottom: 2rem;}
	.item_proview .spec_wrap .spec_area .spec_top .title span { font-size: 1em; }
	.item_proview .spec_wrap .spec_area .spec_top .title h2 {font-size: 2em;} 

	.item_proview .spec_wrap .spec_area .spec_info .spec_li {padding:3rem 0;}
	.item_proview .spec_wrap .spec_area .spec_info .spec_li li strong {font-size:.95em;}
	.item_proview .spec_wrap .spec_area .spec_info .spec_li li p {font-size: 1em;}
 
 
} 
@media screen and (max-width: 1400px) {   
	.item_proview .goto_back a {padding:.8rem 2rem; font-size: 1em;}
	.item_proview .goto_back i {width:1.5rem; height:1.5rem; margin-right:1rem;}

	.item_proview .thumb_wrap {width:40%;}

	.item_proview .spec_wrap {width:60%;}
	.item_proview .spec_wrap .spec_area {margin: 5rem 0 5rem 5rem;}
	.item_proview .spec_wrap .spec_area section {margin-bottom: 3rem;}  
	.item_proview .spec_wrap .spec_area .spec_top .title h2 {font-size: 1.8em;} 

	.item_proview .spec_wrap .spec_area .spec_top .con_btn {padding: .8em 1.2em;}

	.item_proview .spec_wrap .spec_area .spec_info .spec_li {padding:2rem 0;}
	.item_proview .spec_wrap .spec_area .spec_info .spec_li li p {font-size: 1em; word-break:keep-all;}
 
}
@media screen and (max-width: 1024px) {
	.item_proview .spec_wrap .spec_area .spec_info .spec_li li {gap: 2rem; }
	.item_proview .spec_wrap .spec_area .spec_info .spec_li li i {width: 4.5rem; height: 4.5rem; border-radius: 1rem; background-size: 3rem; } 
	.item_proview .spec_wrap .spec_area .spec_info .spec_li li div {gap:2px;}

	.item_detail {margin:6rem 0 0 0;}
	.item_detail h3.tit {margin: 0 0 1rem 0;}
	.item_detail .item_cont {padding:2.5rem 0; }
	.list_btn {width: 5.5rem; height: 5.5rem;}

}
@media screen and (max-width: 768px) { 
	.item_proview .goto_back a {display:none;}

	.item_proview {flex-direction: column;}
	.item_proview .thumb_wrap {position: relative;  width:100%;}
	.item_proview .spec_wrap {width:100%;}
	.item_proview .spec_wrap .spec_area {margin: 2.5rem 0 0 0;}
	.item_proview .spec_wrap .spec_area section {margin-bottom:0;} 
	.item_proview .spec_wrap .spec_area .spec_top .title h2 {font-size: 1.6em;}
	.item_proview .spec_wrap .spec_area .spec_top ul {margin: 2rem 0 0 0;}
	

	.item_proview .spec_wrap .spec_area .spec_info .spec_li {gap:1rem .5rem;}
	.item_proview .spec_wrap .spec_area .spec_info .spec_li li {gap:1rem}
	.item_proview .spec_wrap .spec_area .spec_info .spec_li li i {width: 4rem; height:4rem; background-size:2.5rem;}
	.item_proview .spec_wrap .spec_area .spec_info .spec_li li strong {font-size: .9em;}
	.item_proview .spec_wrap .spec_area .spec_info .spec_li li p {font-size: .95em;}


	.item_detail {margin:4rem 0 0 0;} 
	.item_detail .item_cont {padding:2rem 0; }
	.list_btn {width: 4rem; height: 4rem; background-size:1.8rem;}

}
 

/*------------------------------------------
etc
---------------------------------------------*/
.paging {margin:5rem 0 10rem;}
.paging ul {display: flex; align-items: center; justify-content: center;}
.paging ul li { font-size: 1.1em;}
.paging ul li a {display: flex; opacity:.4; width: 5rem; height: 5rem;    align-items: center;  justify-content: center;}
.paging ul li.active a {opacity:1;}
.paging ul li a:hover {opacity:1;}
.paging ul li i { font-size: .5em;}

.paging  ul li.page-item {width: 35px; height: 40px; margin:0 1rem;}
.paging  ul li.disabled {margin:0 .2rem;}
.paging  ul li.disabled  a.page-link {}
.paging  ul li.active {}
.paging  ul li.active a.page-link {color: var(--main-color1); font-weight:700;}
.paging  ul li a.page-link  {position: relative; width: 100%; height: 100%; display: inline-block; text-align: center; line-height: 4rem; font-weight: 300; color:var(--board-color3);}
.paging  ul li a.page-link > i {left: 50%; top: 50%; position: absolute; transform: translate(-50%, -50%);}
.paging  ul li a.page-link > i.icon-arr-page {width:14px; height:14px; background-repeat:no-repeat; background-position: 50% 50%;}
.paging  ul li a.page-link > i.icon-arr-page.prev {background-image: url(../images/ico_arr_prev.png);}
.paging  ul li a.page-link > i.icon-arr-page.next {background-image: url(../images/ico_arr_next.png);}
.paging  ul li a.page-link > i.icon-arr-page.first {background-image: url(../images/ico_arr_first.png);}
.paging  ul li a.page-link > i.icon-arr-page.last {background-image: url(../images/ico_arr_last.png);}


@media screen and (max-width: 768px) { 
	.paging ul li {font-size: 1.5em;}
	.paging ul li a.page-link {line-height: 100%;}
	.paging ul li.page-item {width: 3rem; height: 3rem;}
}
