/*------------------------------------------
List
---------------------------------------------*/
/* layout, left nav */
.prod_wp {}
.prod_wp  .inner {display:flex;  gap:12rem;}
.prod_wp .sub_menu {position:sticky; width: 30rem; height:1em; top:2em; left:0; }
.prod_wp .sub_menu .dep2_menu ul li a {display: inline-block; width:100%; padding: 2rem 2rem; border-radius: .5rem;  opacity: .5; font-size: 2rem; font-weight: 600; letter-spacing: -0.05em;}
.prod_wp .sub_menu .dep2_menu ul li.active a {background: #333 url(/pages/layout/kor/images/sub/about/ico_btn.svg) no-repeat 95% 50%; color: #fff; opacity: 1;}


/* top cate */
.item_product  .product_menu {margin: 0 0 3rem 0;}
.item_product  .product_menu ul {display:flex; border-bottom:1px solid #E5E5E5;}
.item_product  .product_menu ul li {}
.item_product  .product_menu ul li a {position: relative; display: inline-block; padding: 1.5rem 3rem; font-size: 2rem;  line-height: 100%;}
.item_product  .product_menu ul li a:before {position: absolute; bottom:-1px;  content:''; left: 50%; -webkit-transform: translateX(-50%);  transform: translateX(-50%); height: 2px;
width: 100%; -webkit-transition: .2s; transition: .2s; width:0; background:#000;}
.item_product  .product_menu ul li a:hover:before {width:100%;}
.item_product  .product_menu ul li a:hover { font-weight: 600; color:#000;}
.item_product  .product_menu ul li.active a{position: relative; font-weight: 600; color:#000;}
.item_product  .product_menu ul li.active a:before {width:100%;}
  

/* loc */
.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; 	}


/* list */
.item_product {position: relative; width:120rem; }
.item_product .product_area {position: relative; display:flex; flex-wrap: wrap; gap:4rem;}
.item_product .product_area li {width: 100%; }
.item_product .prod_box {width:100%; height:100%; background:#F5F5F7; transition: all .1s ease; border-radius:1rem;  display:flex; justify-content: space-between; 
padding:3rem; box-sizing:border-box; gap:5rem; align-items: center;}
/*.item_product .prod_box:hover {background:#2D68C1}
.item_product .prod_box:hover .cate {color:#fff; opacity:.6;}
.item_product .prod_box:hover .tit{color:#fff;}
.item_product .prod_box:hover .tag span {background:#477AC9; color:#fff;}*/
.item_product .prod_box  .info {width:50%; }
.item_product .prod_box .cate {font-size: 1.5rem; color:#6E6E6E; font-weight: 500; margin-bottom:.5rem}
.item_product .prod_box .tit {font-size: 3.5rem; line-height: 1; margin: 1rem 0 2rem 0; font-weight: 700; color:#222;}
.item_product .prod_box .tag span {font-size: 1.4rem; color:#6E6E6E; font-weight: 500; padding:.8rem 1.5rem; background:#E9E9E9; border-radius:.5rem; margin:0 .2rem 0 0;}
.item_product .prod_box .denier {display:flex; padding:1.8rem 0; border-top:1px solid #e6e6e6; border-bottom:1px solid #e6e6e6;}
.item_product .prod_box .denier span {display:inline-block; font-weight: 500; color:#222; min-width:9rem;}
.item_product .prod_box .img {position: relative; width: 50%; aspect-ratio: 4 / 3; overflow:hidden; max-width:100%; border-radius:1rem; background: #fff; display:flex; align-items: center; }
.item_product .prod_box .img p {overflow:hidden; }
.item_product .prod_box .img p img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);  object-fit: cover; width:100%; height:100%; }
.item_product .prod_box a {display: flex; align-items: center; justify-content: center; max-width:20rem; height:5.5rem; border-radius:.5rem; background:#222; color:#fff; margin:3rem auto 0;}


/* slide */
.item_product .prod_box .img .pro_swiper {width:100%; height:100%;}
.item_product .prod_box .img .pro_swiper .swiper-slide {position:relative; width:100%; height:100%; overflow:hidden;}
.item_product .prod_box .img .pro_swiper .swiper-slide img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);  object-fit: cover; width:100%; height:100%;}

.item_product .prod_box .img .pro_swiper .swiper-button-prev,
.item_product .prod_box .img .pro_swiper .swiper-button-next {width:4.5rem; height:4.5rem; background:#fff; border-radius:2em; box-shadow:0 .5rem 1.5rem rgba(0,0,0,0.1); border:1px solid #e4e4e4;}
.item_product .prod_box .img .pro_swiper .swiper-button-prev:after, 
.item_product .prod_box .img .pro_swiper .swiper-button-next:after {font-size: .8vw; font-weight: 600; color:#222;}

.item_product .prod_box .img .pro_swiper .swiper-button-prev:after {margin-right:.5rem;}
.item_product .prod_box .img .pro_swiper .swiper-button-next:after {margin-left:.5rem;}
 


/* no data */
.item_product .product_area li.nodata_box {width:100%; border:0; text-align: center; padding:8rem 0;}
.item_product .product_area li.nodata_box i {font-size: 2em; color:#222;}
.item_product .product_area li.nodata_box p {font-size:1.2em; color:#222;}
 
@media screen and (max-width: 1600px) {
 
}
@media screen and (max-width: 1400px) {
	.product_box .thumbnail {height:auto; } 
}

@media screen and (max-width: 1200px) {
	/* layout, left nav */
	.prod_wp .inner {gap:0 3rem;}
	.prod_wp .sub_menu {width:20rem;}
	.prod_wp .sub_menu .dep2_menu ul li a {font-size: 1.1em; box-sizing:border-box;}
	
	.item_product {width:calc(100% - 20rem);}
}

@media screen and (max-width: 1024px) {
	/* layout, left nav */
	.prod_wp .inner {gap:0; flex-direction: column;  box-sizing:border-box;}
	.prod_wp .sub_menu {position:relative; width:100%; top:auto; height:auto; margin: 0 0 3rem 0;}
	.prod_wp .sub_menu .dep2_menu ul {display:flex; gap:.8rem;}
	.prod_wp .sub_menu .dep2_menu ul li {width:33%;}
	.prod_wp .sub_menu .dep2_menu ul li a {padding:1.5rem;  text-align: center;  background: #ccc;}
	.prod_wp .sub_menu .dep2_menu ul li.active a {background-image:none;   }
	
	.item_product  .product_menu ul li a {font-size: 1.1em;}
	
	.item_product {width:100%;}
	.item_product .product_area li {width:calc(50% - 2rem);}
	.item_product .prod_box {flex-direction: column; gap:2.5rem;}
	.item_product .prod_box .info {width:100%;}
	.item_product .prod_box .cate {font-size: 1.4rem;} 
	.item_product .prod_box .tit {font-size: 2.2em;}
	.item_product .prod_box .denier {font-size: 1.1em; padding:1.4rem 0;}
	.item_product .prod_box .img {width:100%;  }
	.item_product .prod_box a {max-width:100%; height:4.8rem; font-size: 1.1em; margin:2rem auto 0;}
	
	.item_product .prod_box .img .pro_swiper .swiper-button-prev,
	.item_product .prod_box .img .pro_swiper .swiper-button-next {width:4rem; height:4rem; }
	.item_product .prod_box .img .pro_swiper .swiper-button-prev:after, 
	.item_product .prod_box .img .pro_swiper .swiper-button-next:after {font-size: 1.5vw; }
 
}
@media screen and (max-width: 768px) {  
	.prod_wp .sub_menu {margin:0 0 1rem 0;}

	.item_product .stitle_area .breadcrumb ul li {font-size: 1em;}
	.item_product .product_area {gap:2rem; flex-direction: column;}
 
	.item_product .product_area li {width:100%; }
	
	.item_product .prod_box {padding:1.8rem;}
	.item_product .prod_box .tit {font-size: 1.5em; margin:1rem 0;}
	.item_product .prod_box .denier {font-size: 1em; padding:1rem 0;}
	.item_product .prod_box .denier span {min-width:4.5rem;}
	.item_product .prod_box .denier p {word-break:keep-all; }
	.item_product .prod_box a {height:4.5rem; font-size: 1em;}
 
	.item_product .prod_box .img .pro_swiper .swiper-button-prev,
	.item_product .prod_box .img .pro_swiper .swiper-button-next {width:3.5rem; height:3.5rem; }
	.item_product .prod_box .img .pro_swiper .swiper-button-prev:after, 
	.item_product .prod_box .img .pro_swiper .swiper-button-next:after {font-size: 1.3rem; }

}
@media screen and (max-width: 420px) {  
	.prod_wp .sub_menu .dep2_menu ul li a {padding:1.1rem;}
	


}

/*------------------------------------------
View
---------------------------------------------*/
.item_proview {position: relative; display:flex;  }
.item_proview .goto_back { text-align:right;}

.item_proview .goto_back a {display:inline-block; font-size: 1em; padding:1.5rem 3rem; border:2px solid #ddd; border-radius:2em; transition:.3s;}
.item_proview .goto_back i {display:inline-block; width:2.5rem; height:2.5rem; background:url(/pages/layout/kor/images/common/btn_arr.svg)no-repeat 50% 50% / cover; vertical-align:-.7rem; margin-left:1rem; filter:invert(1); opacity:.2}
.item_proview .goto_back span {}

.item_proview .goto_back a:hover {background-color:var(--main-color1); border-color:var(--main-color1); color:var(--white);}
.item_proview .goto_back a:hover i {opacity:1; filter:invert(0);}



.item_proview .thumb_wrap {position:sticky; top:0; width: 50%;  min-height: 100vh; max-height:100vh;overflow:hidden; background:#f8f8f8;}
.item_proview .thumb_wrap .thumb_area {width: 100%; height: 100%; position: relative;}
.item_proview .thumb_wrap .thumb_area .swiper-pagination {margin-bottom: 2rem;}
.item_proview .thumb_wrap .thumb_area .proview_img {width: 100%;  height: 100%; mix-blend-mode: multiply; }
.item_proview .thumb_wrap .thumb_area .proview_img ul {}
.item_proview .thumb_wrap .thumb_area .proview_img ul li {position: relative;  }
.item_proview .thumb_wrap .thumb_area .proview_img ul li img {position: absolute; left:50%; top:50%;transform:translate(-50%, -50%); }
.item_proview .thumb_wrap .thumb_area .proview_thum {position: absolute; bottom: 7vh; left: 50%; transform: translateX(-50%); padding:1rem;}
.item_proview .thumb_wrap .thumb_area .proview_thum ul {}
.item_proview .thumb_wrap .thumb_area .proview_thum ul li { width: 7.5rem; height:7.5rem;cursor: pointer; overflow:hidden; opacity:.5; text-align: center; background-color:#ffffff; position: relative; margin: 0 .5rem;}
.item_proview .thumb_wrap .thumb_area .proview_thum ul li.swiper-slide-thumb-active {opacity: 1; border: 3px solid #ffffff; box-sizing: border-box; box-shadow: 0px 3px 4px 0px rgb(0 0 0 / 25%);}
.item_proview .thumb_wrap .thumb_area .proview_thum ul li img {width: auto; height: 100%;position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}


.item_proview .spec_wrap {position: relative; width: 50%;	min-height: auto; padding:7rem; box-sizing:border-box;}
.item_proview .spec_wrap .spec_area {width: auto; margin: 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:1em;display: block;margin-bottom: 1rem; color:var(--main-color2);}
.item_proview .spec_wrap .spec_area .spec_top .title h2 {font-size: 3em; }
.item_proview .spec_wrap .spec_area .spec_top .descrip {line-height:1.6; word-break:keep-all;}

.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:#000; letter-spacing:0;}
.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 {font-family:'xeicon' ; transition: all .3s;}
.item_proview .spec_wrap .spec_area .spec_info .specinfo_tit.on .arrow-wrap i {transform:rotate(-180deg);}

.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%;}

@media screen and (max-width: 1400px) {
	.item_proview .spec_wrap .spec_area .spec_top .title h2 {font-size: 1.5em;}
}
@media screen and (max-width: 1200px) {
	.item_proview .thumb_wrap .thumb_area .proview_img ul li img {width: 80%;}
}
@media screen and (max-width: 1024px) {
	
}
@media screen and (max-width: 768px) { 
	.item_proview {flex-direction: column;}
	.item_proview .thumb_wrap {position: relative; width: 100%; height: 50vh;}
	.item_proview .thumb_wrap .thumb_area .proview_img ul li img {width: auto; height: 100%;}
	.item_proview .spec_wrap {width: 100%; min-height: auto;}
	.item_proview .spec_wrap .spec_area {margin:7rem 5%;}
	.item_proview .spec_wrap .spec_area .spec_info .specinfo_cont ul li {font-size: 1em;}
	.item_proview .thumb_wrap .thumb_area .proview_thum {display: none;}
}
@media screen and (max-width: 568px) { 
	.item_proview .thumb_wrap .thumb_area .proview_img ul li img {width: auto; height: 70%;}
}


/*------------------------------------------
etc
---------------------------------------------*/
.paging {margin:5rem 0 10rem;}
.paging ul {display: flex; align-items: center; justify-content: center;}
.paging ul li { font-size: 1.4em; }
.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: 40px; 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;}
}
