@charset "utf-8";

/*------------------------------------
	Sub_Head 
------------------------------------*/


#sidemenu {position: relative;}
#sidemenu .snb {width: 100%;}
#sidemenu .snb ul {display:flex;align-items: center; padding: 1.5rem 0; width: 100% !important;}
#sidemenu .snb ul li {position: relative; margin-right:3rem;}
#sidemenu .snb ul li:hover a,
#sidemenu .snb ul li.active a{position: relative;  color:var(--color-black); padding-bottom: 1rem;}
#sidemenu .snb ul li a {width: 100%; line-height: 100%; font-weight: 600; color:var(--color-bbb);}
#sidemenu .snb ul li a:hover{color:var(--color-black) ;}
#sidemenu .snb ul li:hover a::before,
#sidemenu .snb ul li.active a::before {content:''; width: 100%; height: 2px; position: absolute; bottom:0px; left:0; background:var(--color-black);	}
 


/******************************1500******************************/
@media all and (max-width:1500px){
	.sub_head {padding:20rem 0 4rem 0;}
	.sub_head .inner h2 {font-size:4.2rem;}
	.sub_head .inner .location ul li a {font-size:1.5rem;}

	#sidemenu .snb ul {padding: 1.2rem 0;}
	#sidemenu .snb ul li {margin-right:3rem;}
	#sidemenu .snb ul li.active a{padding-bottom: 1.2rem;}
	#sidemenu .snb ul li a {font-size:2rem;}

}
/******************************1024******************************/
@media all and (max-width:1024px){
	.sub_head {padding:18rem 0 3rem 0;}
	.sub_head .inner h2 {font-size:3.2rem;}
	.sub_head .inner .location ul li a {font-size:.9em;}

	#sidemenu .snb ul {padding: 1rem 0;}
	#sidemenu .snb ul li {margin-right:2rem;}
	#sidemenu .snb ul li.active a{padding-bottom: 1rem;}
	#sidemenu .snb ul li a {font-size:1.8rem;}
}
/******************************768******************************/
@media all and (max-width:768px){  
	.sub_head {padding:12rem 0 2rem 0;}
	.sub_head .inner {align-items: flex-start; flex-direction: column;}
	.sub_head .inner h2 {font-size:2.5rem; margin-bottom:4rem;} 
	.sub_head .inner .location ul li:first-child,
	.sub_head .inner .location ul li:first-child a {padding-left:0;}
 
    #sidemenu .snb ul {align-items: flex-end;}
	#sidemenu .snb ul li {margin-right:25px; width: min-content; line-height: 1.3;}
	#sidemenu .snb ul li.class-kr {margin-right:20px; width: auto;}
	#sidemenu .snb ul li.active a{padding-bottom: .8rem;}
	#sidemenu .snb ul li a {font-size:1.4rem; max-width: 60px;}
}



/*------------------------------------
	Common
------------------------------------*/
/* button */
.board_btn {text-align:right;}
.board_btn.center {justify-content: center;}
.board_btn a.btn{display:inline-block; font-size: 1em; line-height: 100%; padding:1.5rem 2rem; margin: 0.2rem; min-width:15rem; box-sizing:border-box; text-align:center; 
transition:background, border .2s; border-radius:5rem;} 
.board_btn a.btn_ty1{border:2px solid #ddd; color:#222;} 
.board_btn a.btn_ty1:hover {background:var(--main-color1); border-color:var(--main-color1); color:#fff;}

/* tab */
.tab_wrap {display:flex; flex-wrap:wrap; margin:6rem 0 2rem 0;}
.tab_wrap li {margin-right:4rem;}
.tab_wrap li a {position:relative; display:inline-block; padding:1rem 0; font-size:2.8rem; font-weight: 600; color:var(--color-bbb);}
.tab_wrap li:hover a,
.tab_wrap li a.active {color:var(--main-color1); font-weight:bold;}

/* board total */
.total span{font-weight: 600;}

/******************************1500******************************/
@media all and (max-width:1500px){
	/* tab */
	.tab_wrap {margin:5rem 0 1.8rem 0;}
	.tab_wrap li {margin-right:0; width: 50%;}
	.tab_wrap li a {padding:1.5rem 0 1rem 0; font-size:2.5rem; }
	.tab_wrap li:hover a:before,
	.tab_wrap li a.active:before {width:.6rem; height:.6rem;}
}
/******************************1023******************************/
@media all and (max-width:1023px){ 
	/* button */
	.board_btn a.btn{padding:1.2rem 2rem; min-width:10rem;} 

	/* tab */
	.tab_wrap {margin:3rem 0 1.5rem 0;} 
	.tab_wrap li a {padding:1.2rem 0 1rem 0; font-size:2.2rem; }
	.tab_wrap li:hover a:before,
	.tab_wrap li a.active:before {width:.5rem; height:.5rem;}
}
/******************************768******************************/
@media all and (max-width:768px){
	/* button */
	.board_btn a.btn{padding:1rem 1rem; min-width:10rem;} 

	/* tab */
	.tab_wrap {margin:2.5rem 0 1rem 0;} 
	.tab_wrap li a {padding:1rem 0 .8rem 0; font-size:1.8rem;} 
}



/*------------------------------------
	Product_wp > Filter
------------------------------------*/
#filter_box {border-top:2px solid #000; margin:0 0 8rem 0;}
#filter_box .filter_area > div {display:flex; justify-content: space-between; border-bottom:1px solid #d9d9d9; padding:2rem 0;}
#filter_box .filter_area > div:last-child {border-bottom:0; flex-direction: row-reverse;}
#filter_box .filter_area > div .tit {display:flex; align-items: center; font-size:2rem; color:var(--color-black); font-weight: 600;}
#filter_box .filter_area > div .con {width:calc(100% - 25rem); overflow:hidden;}

#filter_box .filter_swiper {position:relative;}
#filter_box .filter_swiper .swiper-slide {text-align:center; display: flex; justify-content: center;}
#filter_box .filter_swiper .swiper-slide .item {display:block; font-size:1.6rem; cursor:pointer;}
#filter_box .filter_swiper .swiper-slide .item span {font-weight: 500; color:var(--color-black); }
#filter_box .filter_swiper .swiper-slide .item .icon{width:8rem; height:8rem; display: flex; flex-direction: column; justify-content: center;
align-items: center;  background: var(--main-color3); border-radius:4em; margin:0 auto .8rem auto;transition: all 0.2s linear;}
#filter_box .filter_swiper .swiper-slide .item .icon:hover {background-color: var(--main-color2);}
#filter_box .filter_swiper .swiper-slide .item .icon:hover img {filter:invert(100%) sepia(0) saturate(0) hue-rotate(176deg) brightness(150%) contrast(100%)}
#filter_box .filter_swiper .swiper-slide .item > input {visibility: hidden; position: absolute; z-index: -1;}
#filter_box .filter_swiper .swiper-slide .item > input:checked ~ .icon {background: var(--main-color1);}
#filter_box .filter_swiper .swiper-slide .item > input:checked ~ .icon img{filter: invert(100%) sepia(0) saturate(0) hue-rotate(176deg) brightness(150%) contrast(100%)}
#filter_box .filter_swiper .swiper-button-next,
#filter_box .filter_swiper .swiper-button-prev {display:none;}

#filter_box .filter_area .filter_pick {padding:2rem 4rem;}
#filter_box .filter_area .filter_pick .reset_btn {position:relative; border:0; padding:20px 0 0 2.5rem; font-size:1.6rem; display:inline-block; font-weight: 500;
cursor:pointer;}
#filter_box .filter_area .filter_pick .reset_btn:before {content: ''; position: absolute; left: 0; top: 50%; bottom: auto;
transform: translate(0, -50%); width: 1.5rem; height: 1.8rem;  background-image: url(../images/ico_reset.svg); -webkit-background-size: cover;
background-size: cover; }

#filter_box .filter_area .filter_pick .con .list {display:flex; flex-wrap:wrap;}
#filter_box .filter_area .filter_pick .con .list span {display: flex; align-items: center; font-size: 1.5rem; font-weight: 600;
color: #000;  padding: 0 1rem 0 1.5rem; line-height:3.5rem; background: #fff; border-radius: 5em; margin:.2rem .5rem;}
#filter_box .filter_area .filter_pick .con .list span .remove_btn {position:relative; width: 15px; height: 15px; margin-left: 3px; font-size: 0; cursor: pointer; border:0; background: none;}
#filter_box .filter_area .filter_pick .con .list span .remove_btn:before,
#filter_box .filter_area .filter_pick .con .list span .remove_btn:after {content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-45deg); width: 10px; height: 1px; background-color: #222;
border-radius: 2px;}
#filter_box .filter_area .filter_pick .con .list span .remove_btn:before {transform: translate(-50%, -50%) rotate(45deg);}

/******************************1500******************************/
@media all and (max-width:1500px){
	#filter_box {margin:0 0 7rem 0;}
	#filter_box .filter_area > div {padding:1.5rem 0;}
	#filter_box .filter_area > div .tit {font-size:1.8rem;}
	#filter_box .filter_area > div .con {width:calc(100% - 15rem);}

	#filter_box .filter_swiper .swiper-slide .item {font-size:1.5rem;}
 
	#filter_box .filter_area .filter_pick {padding:1.5rem 3rem;}
	#filter_box .filter_area .filter_pick .reset_btn {font-size:1.5rem;}
}
/******************************1200******************************/
@media all and (max-width:1200px){ 
	#filter_box .filter_swiper .swiper-slide .item .icon {width:6rem; height:6rem;}
	#filter_box .filter_swiper .swiper-slide .item .icon img {width:4rem;}
}
/******************************1023******************************/
@media all and (max-width:1023px){ 
	#filter_box {margin:0 0 6rem 0;}
	#filter_box .filter_area > div .con {width:calc(100% - 12rem);}
	
	#filter_box .filter_swiper .swiper-wrapper {flex-wrap:wrap;}
	#filter_box .filter_swiper .swiper-slide {width:25% !important; margin-bottom:1.5rem;}
	#filter_box .filter_swiper .swiper-slide .item {font-size:1.4rem;}
	
	#filter_box .filter_area .filter_pick {padding:1.2rem 2rem;}
	#filter_box .filter_area .filter_pick .reset_btn {font-size:1.4rem;}
}
/******************************768******************************/
@media all and (max-width:768px){
	#filter_box .filter_area > div {flex-direction: column; padding:0;}
	#filter_box .filter_area > div .tit {padding:1rem; background:var(--color-f5f5f5); justify-content: center; font-size:1.6rem;}
	#filter_box .filter_area > div .con {width:100%; padding:2rem 1rem; box-sizing:border-box;}
	
	#filter_box .filter_swiper .swiper-slide .item .icon {width:4.5rem; height:4.5rem;}
	#filter_box .filter_swiper .swiper-slide .item .icon img {width:3rem;}

	#filter_box .filter_area .filter_pick .tit {min-width:7rem; background: 0;}
	#filter_box .filter_area .filter_pick .tit,
	#filter_box .filter_area .filter_pick .con {padding:0;}
	#filter_box .filter_area .filter_pick .con .list {}
	#filter_box .filter_area .filter_pick .con .list span {font-size: 1.4rem; padding: .6rem 1rem; line-height:1.3; margin:.2rem .3rem; word-break:keep-all;}

}



/*------------------------------------
	Product_wp > Category_List
------------------------------------*/
.category_list {display:flex; flex-wrap:wrap; margin:2rem 0 7rem -2%; }
.category_list li {width:14.66%; margin-left:2%;}
.category_list li a {display:block; position: relative; transition: all 0.2s linear;height:25rem; border:1px solid #DFE8F2; border-radius:1.5rem; background-color: #FAFCFD; background-repeat: no-repeat;background-position:100% 100%;}
.category_list li:hover a {border-color:var(--main-color2); background-color: var(--main-white);}
.category_list li a::before {content:''; width: 10rem; height: 10rem; position: absolute;right:2rem; bottom:3rem; background-repeat:no-repeat; background-size:100%; background-position:center;
filter:invert(93%) sepia(9%) saturate(242%) hue-rotate(167deg) brightness(92%) contrast(91%);  transition: all 0.2s linear;}
.category_list li:hover a::before {opacity:.8;filter: none;}

.category_list li.active a{border-color:var(--main-color2); background-color: var(--main-white);}
.category_list li.active a::before {opacity:.8;filter: none;}

.category_list li a.cate1::before {background-image: url(../images/pro_cate_ico1.svg);}
.category_list li a.cate2::before {background-image: url(../images/pro_cate_ico2.svg);}
.category_list li a.cate3::before {background-image: url(../images/pro_cate_ico3.svg);}
.category_list li a.cate4::before {background-image: url(../images/pro_cate_ico4.svg);}
.category_list li a.cate5::before {background-image: url(../images/pro_cate_ico5.svg);}
.category_list li a.cate6::before {background-image: url(../images/pro_cate_ico6.svg);}
.category_list li a span {position:relative; display:inline-block; margin:3rem 0 0 3rem; font-weight:600; color:var(--color-black);}
.category_list li a span:after {display:inline-block; vertical-align:middle; content:''; width:1rem; height:1.5rem; 
background:url(../images/ico_arr.svg)no-repeat 50% 50% / .8rem; margin:-.4rem 0 0 1rem;}


/******************************1500******************************/
@media all and (max-width:1500px){
	.category_list {margin:2rem 0 6rem -2%;}
	.category_list li a span {margin:3rem 0 0 2rem; font-size:1.6rem;}

}

/******************************1200******************************/
@media all and (max-width:1200px){
	.category_list li {width:18%; margin:0 0 2% 2%;}
	.category_list li a {}
	.category_list li a span:after {background-size:.6rem;}
}
/******************************1023******************************/
@media all and (max-width:1023px){
	.category_list {margin:2rem 0 5rem -2%;}
	.category_list li {width:31%;}
	.category_list li a {height:20rem; background-size:contain;}
}
/******************************768******************************/
@media all and (max-width:768px){  
	.category_list {margin:2rem 0 4rem -2%;}
	.category_list li {width:48%;}
	.category_list li a {height:10rem;}
	.category_list li a span {margin:2rem 20px 0 2rem;}
	.category_list li a::before {width: 5rem; height:5rem; right:1rem; bottom:1rem;}


}


/*------------------------------------
	Product_wp > Brand_List
------------------------------------*/
.brand_list {display:flex; flex-wrap:wrap; margin:2rem 0 7rem -2%;}
.brand_list li {width:18%; margin-left:2%;}
.brand_list li a {display:block;  transition: all 0.2s linear;height:14rem; border:2px solid #DFE8F2; border-radius:1.5rem; background-color: #FAFCFD; background-repeat: no-repeat;
background-position:50% 50%;}
.brand_list li:hover a {border-color:var(--main-color2);}
.brand_list li a.brand1 {background-image: url(../images/bg_brand1.svg);}
.brand_list li a.brand2 {background-image: url(../images/bg_brand2.svg);}
.brand_list li a.brand3 {background-image: url(../images/bg_brand3.svg);}
.brand_list li a.brand4 {background-image: url(../images/bg_brand4.svg);}
.brand_list li a.brand5 {background-image: url(../images/bg_brand5.svg);}
.brand_list li a span {font-size:0; text-indent:-99999px;}

/******************************1500******************************/
@media all and (max-width:1500px){
	.brand_list {margin:2rem 0 6rem -2%;}
	.brand_list li a {background-size:50%;}
}
/******************************1200******************************/
@media all and (max-width:1200px){
	.brand_list li a {height:10rem;}
}
/******************************1023******************************/
@media all and (max-width:1023px){
	.brand_list {margin:2rem 0 5rem -2%;}
	.brand_list li {width:31%; margin:0 0 2% 2%;}
	
}
/******************************768******************************/
@media all and (max-width:768px){
	.brand_list {margin:2rem 0 4rem -2%;}
	
	.brand_list li {width:48%;}
	.brand_list li a {height:6rem; background-size:8rem;}
}



/*------------------------------------
	Product_wp > Board_List
------------------------------------*/
.prod_list { margin:2rem 0 3rem 0;}
.prod_list ul {display:flex; margin:0 0 3% -4%; flex-wrap:wrap;}
.prod_list ul li {width:16%; margin:3% 0 0 4%; text-align:center;}
.prod_list ul li .gall_img {position: relative; height: auto; padding-top: 100%; overflow: hidden;}
.prod_list ul li .gall_img img {position: absolute; top: 0; left:0; width: auto; max-width: unset; height: 100%; 
transition: .4s;}
.prod_list ul li .gall_img .ov {position:absolute; top:100%; left:0; transition: 0.3s ease-in-out; width:100%; height:100%; 
background-color: rgba(0,62,134,.1); background-image: url(../images/ico_btn.svg); background-position: 50% 50%; background-repeat: no-repeat; background-size:10rem; font-size:0; text-indent:-9999px;}
.prod_list ul li .gall_img .ov.en {background-image: url(../images/ico_btn_en.svg); }
.prod_list ul li .gall_img .ov.cn {background-image: url(../images/ico_btn_cn.svg); }
.prod_list ul li .gall_img .ov.mo {background-image: url(../images/ico_btn_mo.svg); }

.prod_list ul li:hover .gall_img .ov {top:0;}
.prod_list ul li:hover .gall_img img {transform: scale(1.1);}
.prod_list ul li .gall_cont {padding:2rem;}
.prod_list ul li .gall_cont .gall_tit {font-size:1em; font-weight: 600; margin:0 0 1rem 0;word-break:keep-all;}
.prod_list ul li .gall_cont .gall_desc {line-height:1.4; font-size:.85em; word-break:keep-all;}


/******************************1500******************************/
@media all and (max-width:1500px){
	.prod_list ul li .gall_cont {padding:1.5rem;}
	.prod_list ul li .gall_cont .gall_tit {font-size:2rem;}
	.prod_list ul li .gall_cont .gall_desc {font-size:1.5rem;}
}
/******************************1200******************************/
@media all and (max-width:1200px){
	.prod_list ul li .gall_img .ov {background-size:8rem;}
}
/******************************1023******************************/
@media all and (max-width:1023px){ 
	.prod_list ul li {width:29%;}
	.prod_list ul li .gall_img .ov {background-size:6rem;}


	.prod_list ul li .gall_cont .gall_tit {font-size:1.8rem;}
	.prod_list ul li .gall_cont .gall_desc {line-height:1.3; font-size:1.5rem;}
}
/******************************768******************************/
@media all and (max-width:768px){
	.prod_list ul li {width:46%;}
	.prod_list ul li .gall_cont .gall_desc {font-size:1.4rem;}
	.prod_list ul li .gall_cont .gall_tit {font-size:1.5rem;}
}




/*------------------------------------
	Board Paging
------------------------------------*/
.board_paging {}
nav.paging{margin:2rem 0;}
nav.paging ul{display:flex; justify-content: center; align-items: center;}
nav.paging ul li.page-item {width: 3.5rem; height: 3.5rem; margin:0 .3rem;}
nav.paging ul li.disabled {margin:0 .2rem;}
nav.paging ul li.disabled  a.page-link {}
nav.paging ul li.active {}
nav.paging ul li.active a.page-link {color: var(--color-black); font-weight:500;}
nav.paging ul li.active a.page-link:before {position:absolute; left:50%; transform:translateX(-50%); bottom:0px; content:'';
width:50%; height:2px; background: var(--main-color1);}
nav.paging ul li a.page-link {position: relative; width: 100%; height: 100%; display: inline-block; text-align: center; 
line-height: 3.5rem; font-weight: 500; color:#ccc;}
nav.paging ul li a.page-link > i {left: 50%; top: 50%; position: absolute; transform: translate(-50%, -50%);}
nav.paging ul li a.page-link > i.icon-arr-page {width:3.5rem; height:3.5rem; background-repeat:no-repeat; background-position: 50% 50%; background-size:3rem;}
nav.paging ul li a.page-link > i.icon-arr-page.prev {background-image: url(../images/ico_arr_prev.png);}
nav.paging ul li a.page-link > i.icon-arr-page.next {background-image: url(../images/ico_arr_next.png);}
nav.paging ul li a.page-link > i.icon-arr-page.first {background-image: url(../images/ico_arr_first.png); background-size:1.6rem; display: none;}
nav.paging ul li a.page-link > i.icon-arr-page.last {background-image: url(../images/ico_arr_last.png); background-size:1.6rem; display: none;}