@import url('d8338b88e9_sub.css'); 



/**** S:: PRODUCT ****/
.product_banner{padding:185px 0; background-repeat:no-repeat; background-size:cover; background-position:center;}
.product_banner h3{color:var(--white);}
.product_banner h4{color:var(--white);}
.product_banner p{color:var(--basic-w);}
.product_banner h4 + p{padding-top:8px;}
.product_banner .text_box{padding:25px 0 0 50px; max-width:52%; box-sizing:border-box;}


.product_step{overflow: hidden;}
.product_step .basic_in{position: relative;}
.product_step .icon{display: block; width: 240px; position: absolute; right: 0; top:-50px; z-index: -1;}
.product_step .icon img{opacity: 0.2; width: 100%; height: auto; filter:grayscale(1);}

.step_style{}
.step_style h4{margin: 25px 0 10px; padding-left: 30px; box-sizing:border-box; position: relative; line-height: 130%; font-weight: 300; color:var(--black);}
.step_style h4:first-of-type{margin-top: 0;}
.step_style h4 small{display: inline-block; font-size:1rem; font-weight: 600; color:var(--main); position: absolute; left:0; top:5px; line-height: 130%;}
	.step-swiper{}
	.step-swiper .swiper-wrapper{}
	.step-swiper .swiper-slide{width: 180px !important; height: 180px; flex-shrink: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; border-radius:50%; box-sizing:border-box; padding: 10px; text-align:center; background:var(--grayBg); transition:background .3s linear;}
	.step-swiper .swiper-slide::after{content:'\e5df'; display: block; width: 30px; height: 30px; font-size:30px; line-height: 30px; font-family:var(--icon); position: absolute; right: -30px; top:50%; margin-top: -15px; color:#D9D9D9; font-weight: 400;}
	.step-swiper .swiper-slide:last-child::after{display: none;}
	.step-swiper .swiper-slide small{display: block; padding-bottom: 8px; font-size:0.765rem; font-weight: 600; line-height: 130%; letter-spacing: 0; transition:color .3s linear; color:var(--light);}
	.step-swiper .swiper-slide p{line-height: 150%; color:var(--main); font-weight: 300; transition:all .3s linear;}
	
.step-swiper .swiper-slide.active{background:var(--main);}
.step-swiper .swiper-slide.active small{color:var(--white);}
.step-swiper .swiper-slide.active p{color:var(--white); font-weight: 600;}


.product_basic{}
.product_basic dl{display: flex; padding: 80px 0; border-top: 1px solid var(--border);}
.product_basic dl dt{width: 440px;}
.product_basic dl dt img{width: 100%; height: auto;}
.product_basic dl dd{width: calc(100% - 440px); padding:0 0 0 100px; box-sizing:border-box;}
.product_basic dl dd h4{font-weight: 400;}
.product_basic dl dd .dots{padding-top: 25px;}
	

.product_info{display: flex; flex-wrap:wrap; justify-content: center; gap:50px 3px;}
.product_info dl{width:calc((100% - 18px)/7);}
.product_info dl dt{text-align:center; padding:0 0 20px;}
.product_info dl dt img{width: 80px; height: auto; margin: 0 auto 10px;} 
.product_info dl dt h4{font-weight:600; color:var(--black); line-height:130%;}
.product_info dl dd{padding: 24px 0 0; position: relative; z-index: 2;}
.product_info dl dd::before{content:''; display: block; width: 100%; height: 25px; box-sizing:border-box; border-radius:25px; background:var(--white); border:1px solid var(--main); position: absolute; left:0; top:0; z-index: -1;}
.product_info dl dd ul{width: 80%; min-height:580px; padding:5px 0 50px; margin: 0 auto; background:var(--white); box-sizing:border-box; border:1px solid var(--main); border-top: 0; border-radius: 0 0 500px 500px; overflow: hidden; position: relative;}
.product_info dl dd ul::before{content:''; display: block; width: 100%; background:var(--main); opacity: 0.1; position: absolute; left:0; bottom:0;}
.product_info dl:nth-child(1) dd ul::before{height: 63%;}
.product_info dl:nth-child(2) dd ul::before{height: 83%;}
.product_info dl:nth-child(3) dd ul::before{height: 90%;}
.product_info dl:nth-child(4) dd ul::before{height: 73%;}
.product_info dl:nth-child(5) dd ul::before{height: 63%;}
.product_info dl:nth-child(6) dd ul::before{height: 90%;}
.product_info dl:nth-child(7) dd ul::before{height: 73%;}
.product_info dl dd ul li{position: relative; z-index: 3; font-size:0.882rem; line-height:140%; color:var(--light); padding: 0 5px 0 18px; box-sizing:border-box;}
.product_info dl dd ul li::before{content:''; display: block; width: 10px; height:1px; background:var(--main); position: absolute; left:0; top:9px;}
.product_info dl dd ul li ~ li{margin-top: 8px;}
/**** E:: PRODUCT ****/


/**** S:: OEM ODM Flow ****/
.flow_cont{}
.flow_cont h3{}
.flow_cont .check_list{padding: 25px 0 50px; border-bottom: 1px solid var(--border);}
.flow_cont .prdimgZoom{text-align:center; margin: 50px auto 0;}
/**** E:: OEM ODM Flow ****/



/*******************************************************************************
    @media 1680px
*******************************************************************************/
@media all and (max-width:1680px){


.product_banner .text_box{max-width:700px;}
.product_banner .text_box p br{display: none;}

}
/*******************************************************************************
    @media 1500px
*******************************************************************************/
@media all and (max-width:1500px){




/**** S:: PRODUCT ****/
.product_info{gap:50px 3px;}
.product_info dl{width:calc((100% - 9px)/4);}
/**** E:: PRODUCT ****/



}
/*******************************************************************************
    @media ~1300px
*******************************************************************************/
@media all and (max-width:1300px){


/**** S:: PRODUCT ****/
.product_banner{padding:140px 0;}
.product_banner .text_box{padding:25px 0 0 50px;}

.product_basic{}
.product_basic dl dt{width: 40%;}
.product_basic dl dd{width: 60%;}

.product_step .icon{width: 200px;}
/**** E:: PRODUCT ****/

}

/*******************************************************************************
    @media  ~980px               
*******************************************************************************/
@media all and (max-width:980px){



/**** S:: PRODUCT ****/
.product_banner{padding:100px 0;}
.product_banner p br{display: none;}
.product_banner .text_box{padding:15px 0 0; width: 60%;}

.product_info dl{width:calc((100% - 6px)/3);}
.product_info dl dt{padding:0 0 15px;}
.product_info dl dt img{width: 60px; height: auto; margin: 0 auto 10px;} 
.product_info dl dd ul{min-height:520px;}

.product_basic{}
.product_basic dl{padding: 40px 0;}
.product_basic dl dd{padding:0 0 0 50px;}
.product_basic dl dd .dots{padding-top: 15px;}


.product_step .icon{width: 150px;}


.step_style{}
.step_style h4{padding-left: 25px;}
.step_style h4 small{top:2px;}
	.step-swiper{}
	.step-swiper .swiper-slide{width: 150px !important; height: 150px; padding: 5px;}
	
/**** E:: PRODUCT ****/



/**** S:: OEM ODM Flow ****/
.flow_cont{}
.flow_cont h3{}
.flow_cont .check_list{padding: 15px 0 30px;}
.flow_cont .prdimgZoom{margin: 30px auto 0;}
/**** E:: OEM ODM Flow ****/



}
/*******************************************************************************
    @media 481~680px
*******************************************************************************/
@media all and (max-width:680px){



/**** S:: PRODUCT ****/
.product_banner{padding:60px 0;}
.product_banner h4 + p{padding-top:5px;}
.product_banner .text_box{padding:10px 0 0;}



.step_style{}
.step_style h4{margin: 20px 0 6px;}
.step_style h4 small{top:1px;}

.product_step .icon{width: 100px; top:-30px;}
	.step-swiper{}
	.step-swiper .swiper-slide{width: 120px !important; height: 120px;}
	.step-swiper .swiper-slide::after{width: 20px; height: 20px; font-size:20px; line-height: 20px; right: -20px; margin-top: -10px;}
	.step-swiper .swiper-slide small{padding-bottom: 5px;}
	
.product_basic{}
.product_basic dl{padding: 25px 0; flex-wrap:wrap;}
.product_basic dl dt{width: 100%;}
.product_basic dl dd{width: 100%; padding:30px 0 0;}
.product_basic dl dd .dots{padding-top: 10px;}


.product_info{gap:30px 3px;}
.product_info dl{width:calc((100% - 3px)/2);}
.product_info dl dt img{width: 40px; height: auto;} 
.product_info dl dd{padding: 19px 0 0;}
.product_info dl dd::before{height: 20px;}
.product_info dl dd ul{width: 90%; min-height:460px;}
.product_info dl dd ul li{padding: 0 5px 0 10px;}
.product_info dl dd ul li::before{width: 5px; top:7px;}
.product_info dl dd ul li ~ li{margin-top: 8px;}
	
/**** E:: PRODUCT ****/




/**** S:: OEM ODM Flow ****/
.flow_cont{}
.flow_cont .check_list{padding: 10px 0 20px;}
.flow_cont .prdimgZoom{margin: 20px auto 0;}
/**** E:: OEM ODM Flow ****/


}