@import url('d8338b88e9_sub.css'); 



/**** S:: Greetings ****/
.greeting_cont{}
.greeting_cont dl{display: flex;}
.greeting_cont dl dt{width: 620px;}
.greeting_cont dl dt img{width: 100%; height: auto;}
.greeting_cont dl dd{width: calc(100% - 620px); padding: 0 0 0 80px; box-sizing:border-box; display: flex; flex-direction: column; justify-content: center; align-items: flex-start;}
.greeting_cont dl dd img{width: 199px; height: auto; margin: 0 0 25px;}
.greeting_cont dl dd h3{}
.greeting_cont dl dd h4{padding-top: 10px;}
.greeting_cont dl dd h4 b{font-weight: 600;}
.greeting_cont > p{padding-top: 50px;}
.greeting_cont > p ~ p{padding-top: 10px;}
.greeting_cont > p strong{display: inline; font-weight: 600; color:var(--black); }
.greeting_cont > p.fs21{padding-top: 50px;}
/**** E:: Greetings ****/


/**** S:: Motto & Philosophy ****/
.philosophy_cont{background:url('../images/b3127138e5_mnp-illu.png') no-repeat 90% bottom/805px auto;}
.philosophy_cont dl{display: flex;}
.philosophy_cont dl dt{width: 50%;}
.philosophy_cont dl dt img{width: 100%; height: auto;}
.philosophy_cont dl dd{width: 50%; padding:0 0 0 80px; box-sizing:border-box; display: flex; flex-direction: column; justify-content: center; align-items: flex-start;}
.philosophy_cont dl dd h3{}
.philosophy_cont dl dd .text_box{padding: 20px 0 0 50px; box-sizing:border-box;}
.philosophy_cont dl dd h4{}
.philosophy_cont dl dd p{padding-top: 10px;}

.motto_cont{background:url('../images/7ef5333f02_motto-bg.jpg') no-repeat center/cover; width: 100%; height: var(--vh); display: flex; flex-direction: column; justify-content: center;}
.motto_cont .motto_in{display: flex;}
.motto_cont .motto_in h3{width: 50%; padding: 0 80px 0 0; box-sizing:border-box; font-weight: 600; color:var(--white);}
.motto_cont .motto_in ul{width: 50%;}
.motto_cont .motto_in ul li{line-height: 130%; font-weight: 300; color:var(--white);}
.motto_cont .motto_in ul li ~ li{margin-top: 16px;}

.about_motto{}
.about_motto ul{margin: 0 0 50px; display: grid; grid-template-columns: repeat(4, 1fr); grid-gap:30px;}
.about_motto ul li{background:var(--grayBg); padding: 40px; box-sizing:border-box;}
.about_motto ul li img{width: auto; height: 80px;}
.about_motto ul li h4{padding-top: 80px;}
.about_motto ul li p{padding-top: 10px;}
/**** E:: Motto & Philosophy ****/


/**** S:: About Us / Why Choose ****/
.about_cont .fs45{line-height: 140%;}
.about_title{}
.about_title h3{font-weight: 600; color:var(--black);}
.about_title h4{padding-top: 20px; color:var(--black); font-weight: 300;}
.about_title p{padding-top: 10px; color:var(--basic);}

.about_info{}
.about_info ul{display: flex;}
.about_info ul li{padding:0 20px 0 40px; box-sizing:border-box; width: 25%; border-left: 5px solid var(--main);}
.about_info ul li h4{font-weight: 800; line-height: 120%;}
.about_info ul li p{padding-top: 10px; line-height: 130%;}

.about_cnr{}
.about_cnr ul{display: flex; gap:10px; flex-wrap:wrap; text-align:center; justify-content: center;}
.about_cnr ul li{padding: 11px 35px 10px; box-sizing:border-box; border-radius:50px; background:var(--grayBg);}
.about_cnr ul li p{white-space: nowrap; color:var(--black); font-weight: 300; line-height: 150%;} 

.certi_list {display:grid; grid-template-columns:repeat(5, 1fr); grid-gap:30px;}
.certi_list dl {}
.certi_list dl > a {position: relative; display: block; cursor:default;}
.certi_list dl dt {aspect-ratio: 282 / 397; border:1px solid var(--border); box-sizing:border-box; }
.certi_list dl dt img {display: block; width: 100%; height: 100%; object-fit: contain;}
.certi_list dl dd {text-align:center; margin:15px 0 0;}
.certi_list dl dd {display: none;}
.certi_list dl dd .fs20 {color: var(--black); font-weight:400;}
/**** E:: About Us / Why Choose ****/

/**** S:: Overview ****/
.overview_banner{background:url('../images/16c9a61da1_overview-bg.jpg') no-repeat center/cover;}
.overview_banner_in{position: relative;}
.overview_banner_in::before{content:''; display: block; width: 409px; aspect-ratio:1/1; background:url('../images/a8c80969b8_overview-ci.png') no-repeat center/contain; position: absolute; right: 140px; top:50%; margin-top:-204px;}
.overview_banner_in > *{position: relative; z-index: 5;}
.overview_banner h3{color:var(--white);}
.overview_banner .text_box{padding: 25px 0 0 50px; box-sizing:border-box;}
.overview_banner p{color:var(--white); line-height:170%;}
.overview_banner p b{font-weight: 600;}

.overview_info{}
.overview_info > h4{font-weight: 600; color:var(--black);}
.overview_info > p{padding-top: 10px;}
.overview_info > ul{padding-top: 25px;}
.overview_info > ul > li{padding-left: 80px; box-sizing:border-box; line-height: 150%; position: relative;} 
.overview_info > ul > li ~ li{margin-top: 12px;}
.overview_info > ul > li b{display: block; width: 70px; height: 34px; line-height: 34px; text-align:center; font-size:0.882rem; font-weight: 600; color:var(--white); background:var(--main); position: absolute; left:0; top:-4px; border-radius:34px;}
.overview_info table{width:100%; border-collapse:separate; border-spacing:0px; border-top: 2px solid var(--main); text-align:left;}
.overview_info table th{width: 230px; font-size:1rem; line-height: 170%; font-weight: 600; color:var(--black); padding:20px; background:var(--grayBg); box-sizing:border-box; border-bottom: 1px solid var(--border);}
.overview_info table td{font-size:1rem; line-height: 170%; font-weight: 400; color:var(--basic); padding:20px; background:var(--white); box-sizing:border-box; border-bottom: 1px solid var(--border);}
/**** E:: Overview ****/


/**** S:: Organization ****/
.organization_style{text-align:center; position: relative;}
.organization_style::before{content:''; display: block; width: 1px; height: 100%; background:var(--border); position: absolute; left:50%; top:0; z-index: -1;}
.organization_style > div{display: flex; gap:30px; justify-content: center; position: relative;}
.organization_style dl{width: calc((100% - 90px)/4); box-sizing:border-box; position: relative;}
.organization_style dl dt{padding: 20px; box-sizing:border-box; border-radius:var(--borderR10); position: relative;}
.organization_style .ceo dl dt{background:var(--sub);}
.organization_style .management{padding: 40px 0; justify-content: flex-end;}
.organization_style .management::before{content:''; display: block; width: 50%; height: 1px; background:var(--border); position: absolute; right:0; top:50%; z-index: -1;}
.organization_style .management dl dt{border:3px solid var(--main); background:var(--white);}
.organization_style .management dl dt p{color:var(--main);}
.organization_style .engineering{padding-bottom: 40px;}
.organization_style .engineering dl dt{background:var(--sub2);}
.organization_style .team{padding-top: 40px; background:var(--white); z-index: 5;}
.organization_style .team::before{content:''; display: block; width: calc(((100% + 30px) / 4) * 3); height: 1px; background:var(--border); position: absolute; left:50%; top:0; transform:translateX(-50%);}
.organization_style .team dl{border-radius:var(--borderR10);}
.organization_style .team dl::before{content:''; display: block; width: 1px; height: 40px; background:var(--border); position: absolute; left:50%; top:-40px;}
.organization_style .team dl::after{content:''; display: block; width: 100%; height: 100%; border:1px solid var(--border); border-radius:var(--borderR10); box-sizing:border-box; position: absolute; left:0; top:0;}
.organization_style .team dl dt{background:var(--main); border-radius:var(--borderR10) var(--borderR10) 0 0; z-index: 9;}
.organization_style dl dt p{font-weight: 600; color:var(--white);}
.organization_style dl dd{padding:25px 20px; box-sizing:border-box;}
.organization_style dl dd p ~ p{margin-top: 12px;}
/**** E:: Organization ****/



/**** S:: OEM, ODM, OGM, OBM ****/
.om_banner{background-repeat:no-repeat; background-size:cover; background-position:center;}
.om_banner h3{color:var(--white);}
.om_banner p{color:var(--white); font-weight: 300;}
.om_banner .text_box{padding:25px 0 0 50px; box-sizing:border-box;}

.om_style{overflow: hidden;}
.om_style article{}
.om_style article ~ article{border-top: 1px solid var(--border);}
.om_style article > h3{}
.om_style article > p{padding: 25px 0;}
.om_style article > p b{font-weight: 400; color:var(--black);}

	.step-swiper{}
	.step-swiper .swiper-wrapper{}
	.step-swiper .swiper-slide{width: 193px !important; flex-shrink: 0; box-sizing:border-box; text-align:left;}
	.step-swiper.ogm .swiper-slide{width: 165px !important;}
	.step-swiper .swiper-slide .icon{display: block; position: relative; margin:0 0 15px;}
	.step-swiper .swiper-slide .icon::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:var(--sub); opacity: 0.3; font-weight: 400;}
	.step-swiper .swiper-slide:last-child .icon::after{display: none;}
	.step-swiper .swiper-slide .icon img{width: 100%; height: auto;}
	.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;}
	.step-swiper .swiper-slide:nth-child(1) small{color:#D5C440;}
	.step-swiper .swiper-slide:nth-child(2) small{color:#B2BA37;}
	.step-swiper .swiper-slide:nth-child(3) small{color:#89BE44;}
	.step-swiper .swiper-slide:nth-child(4) small{color:#7A9F3E;}
	.step-swiper .swiper-slide:nth-child(5) small{color:#606C33;}
	.step-swiper .swiper-slide:nth-child(6) small{color:#4E472C;}
	.step-swiper .swiper-slide:nth-child(7) small{color:#402C26;}
	.step-swiper .swiper-slide:nth-child(8) small{color:#2A0900;}
	.step-swiper .swiper-slide p{line-height: 170%; color:var(--black); font-weight: 400; transition:all .3s linear;}
	
.process-style{padding-top: 25px; display: grid; grid-template-columns: repeat(4, 1fr); grid-gap:10px 30px;}    
.process-style li{box-sizing:border-box; border-radius:60px; padding:16px 20px; background:var(--grayBg); text-align:center; position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center;}    
.process-style li::after{content:''; display: block; width: 30px; height: 1px; background:var(--border); position: absolute; right: -30px; top:50%;}    
.process-style li:nth-child(4n)::after{display: none;}    
.process-style li:last-child::after{display: none !important;}    
.process-style li p{line-height: 150%;} 

.obm_style{display: flex; justify-content: space-between;}
.obm_style dd{width: calc(50% - 15px); display: flex; flex-direction: column; justify-content: center; align-items: flex-start;}
.obm_style dd h4{padding-top: 25px;}
.obm_style dd p{padding-top: 10px;}
.obm_style dd .btn_area{padding-top: 50px;}
.obm_style dt{width: calc(50% - 15px); text-align:left;}
.obm_style dt img{max-width:100%; height: auto;}
/**** E:: OEM, ODM, OGM, OBM ****/



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

/**** S:: Greetings ****/
.greeting_cont{}
.greeting_cont dl{}
.greeting_cont dl dt{width: 40%;}
.greeting_cont dl dd{width: 60%; padding: 0 0 0 60px;}
.greeting_cont dl dd h4 br{display: none;}
/**** E:: Greetings ****/


/**** S:: Motto & Philosophy ****/
.philosophy_cont{background-size:50% auto;}
.philosophy_cont dl dd h4 br{display: none;}
/**** E:: Motto & Philosophy ****/



/**** S:: Overview ****/
.overview_banner_in::before{right: 0;}
/**** E:: Overview ****/



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

/**** S:: Motto & Philosophy ****/
.philosophy_cont dl dd{padding:0 0 0 50px;}
.philosophy_cont dl dd .text_box{padding: 20px 0 0 0;}

.about_motto{}
.about_motto ul{grid-template-columns: repeat(2, 1fr);}
/**** E:: Motto & Philosophy ****/


/**** S:: Overview ****/
.overview_banner_in::before{width: 300px; margin-top:-150px;}


.overview_info table{}
.overview_info table th{width: 200px; padding:15px;}
.overview_info table td{padding:15px;}
/**** E:: Overview ****/


/**** S:: About Us / Why Choose ****/
.about_info{}
.about_info ul{flex-wrap:wrap; gap:40px 0;}
.about_info ul li{width: 50%;}
.about_info ul li p{padding-top: 5px;}

.certi_list {display:grid; grid-template-columns:repeat(4, 1fr); grid-gap:30px;}
/**** E:: About Us / Why Choose ****/


}

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

/**** S:: Greetings ****/
.greeting_cont{}
.greeting_cont dl{}
.greeting_cont dl dd{padding: 0 0 0 30px;}
.greeting_cont dl dd img{width: 140px; height: auto; margin: 0 0 15px;}
.greeting_cont dl dd h3{}
.greeting_cont > p{padding-top: 30px;}
.greeting_cont > p.fs21{padding-top: 30px;}
/**** E:: Greetings ****/


/**** S:: Motto & Philosophy ****/
.philosophy_cont dl{}
.philosophy_cont dl dd{padding:0 0 0 30px;}
.philosophy_cont dl dd .text_box{padding: 15px 0 0 0;}
.philosophy_cont dl dd p{padding-top: 6px;}

.motto_cont{}
.motto_cont .motto_in{}
.motto_cont .motto_in h3{padding: 0 50px 0 0;}
.motto_cont .motto_in ul li ~ li{margin-top: 10px;}

.about_motto{}
.about_motto ul{margin: 0 0 30px; grid-gap:20px;}
.about_motto ul li{padding: 30px;}
.about_motto ul li img{width: auto; height: 60px;}
.about_motto ul li h4{padding-top: 60px;}
/**** E:: Motto & Philosophy ****/

/**** S:: Overview ****/
.overview_banner_in::before{width: 180px; right: 0; margin-top:-90px;}
.overview_banner .text_box{padding: 15px 0 0 0;}

.overview_info{}
.overview_info > ul > li ~ li{margin-top: 16px;}
.overview_info > ul > li b{top:-5px;}



.overview_info table{}
.overview_info table tr{display: block;}
.overview_info table th{width: 100%; padding:10px; display: block;}
.overview_info table td{width: 100%; padding:10px; display: block;}
/**** E:: Overview ****/

/**** S:: Organization ****/
.organization_style > div{gap:10px;}
.organization_style dl{width: calc((100% - 30px)/4);}
.organization_style dl dt{padding: 15px 10px;}
.organization_style .management{padding: 30px 0;}
.organization_style .management dl dt{}
.organization_style .engineering{padding-bottom: 30px;}
.organization_style .team{padding-top: 30px;}
.organization_style .team::before{width: calc(((100% + 10px) / 4) * 3);}
.organization_style .team dl::before{height: 30px; top:-30px;}
.organization_style dl dd{padding:20px 10px;}
/**** E:: Organization ****/





/**** S:: OEM, ODM, OGM, OBM ****/
.om_banner p br{display: none;}
.om_banner .text_box{padding:15px 0 0 0; width: 70%;}


.om_style article > p{padding: 15px 0 25px;}

	.step-swiper{}
	.step-swiper .swiper-wrapper{}
	.step-swiper .swiper-slide{width: 155px !important;}
	.step-swiper.ogm .swiper-slide{width: 135px !important;}

.process-style{grid-template-columns: repeat(3, 1fr); grid-gap:10px 20px;}    
.process-style li{padding:10px 10px;}    
.process-style li::after{width: 20px; right: -20px;}    
.process-style li:nth-child(4n)::after{display: block;}    
.process-style li:nth-child(3n)::after{display: none;}    

.obm_style dd h4{padding-top: 15px;}
.obm_style dd .btn_area{padding-top: 35px;}
/**** E:: OEM, ODM, OGM, OBM ****/



/**** S:: About Us / Why Choose ****/
.about_title{}
.about_title h4{padding-top: 15px;}
.about_title p{padding-top: 6px;}

.about_info{}
.about_info ul{gap:20px 0;}
.about_info ul li{padding:0 20px; border-width:4px;}

.about_cnr{}
.about_cnr ul{gap:5px;}
.about_cnr ul li{padding: 9px 25px 8px;}


.certi_list {display:grid; grid-template-columns:repeat(4, 1fr); grid-gap:20px;}

/**** E:: About Us / Why Choose ****/


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


/**** S:: Greetings ****/
.greeting_cont{}
.greeting_cont dl{flex-wrap:wrap;}
.greeting_cont dl dt{width: 100%;}
.greeting_cont dl dd{width: 100%; padding: 20px 0 0;}
.greeting_cont dl dd img{width: 120px; height: auto; margin: 0 0 10px;}
.greeting_cont dl dd h3{}
.greeting_cont dl dd h4{padding-top: 6px;}
.greeting_cont > p{padding-top: 10px;}
.greeting_cont > p ~ p{padding-top: 6px;}
.greeting_cont > p.fs21{padding-top: 20px;}
/**** E:: Greetings ****/

/**** S:: Motto & Philosophy ****/
.philosophy_cont{background-size:70% auto;}
.philosophy_cont dl{flex-wrap:wrap;}
.philosophy_cont dl dt{width: 100%;}
.philosophy_cont dl dd{width: 100%; padding:30px 0 0;}


.motto_cont{}
.motto_cont .motto_in h3{padding: 0 0 20px;}

.about_motto{}
.about_motto ul{margin: 0 0 20px; grid-gap:10px;}
.about_motto ul li{padding: 20px;}
.about_motto ul li img{width: auto; height: 40px;}
.about_motto ul li h4{padding-top: 20px;}
.about_motto ul li p{padding-top: 6px;}
/**** E:: Motto & Philosophy ****/

/**** S:: Overview ****/
.overview_banner_in::before{width: 100px; right: 0; margin-top:0; top:-30px;}
.overview_banner .text_box{padding: 15px 0 0 0;}
.overview_banner p br{display: none;}

.overview_info > p{padding-top: 6px;}
.overview_info > ul{padding-top: 15px;}
.overview_info > ul > li{padding-left: 65px;} 
.overview_info > ul > li ~ li{margin-top: 10px;}
.overview_info > ul > li b{width: 55px; height: 30px; line-height: 30px; top:-5px;}
/**** E:: Overview ****/

/**** S:: Organization ****/
.organization_wrap{position: relative; overflow-x: auto;}
.organization_wrap .responsive-dim.show{display: block;}
.organization_style{width: 800px;}
.organization_style dl dt{padding: 10px 5px;}
.organization_style .management{padding: 10px 0;}
.organization_style .management dl dt{}
.organization_style .engineering{padding-bottom: 20px;}
.organization_style .team{padding-top: 20px;}
.organization_style .team dl::before{height: 20px; top:-20px;}
.organization_style dl dd{padding:10px;}
.organization_style dl dd p ~ p{margin-top: 8px;}
/**** E:: Organization ****/


/**** S:: OEM, ODM, OGM, OBM ****/

.om_banner .text_box{width: 90%;}

.om_style article > p{padding: 10px 0 15px;}

	.step-swiper{}
	.step-swiper .swiper-wrapper{}
	.step-swiper .swiper-slide{width: 130px !important;}
	.step-swiper.ogm .swiper-slide{width: 110px !important;}
	.step-swiper .swiper-slide .icon{margin:0 0 10px;}
	.step-swiper .swiper-slide .icon::after{width: 20px; height: 20px; font-size:20px; line-height: 20px; right: -20px; margin-top: -10px;}
	.step-swiper .swiper-slide small{padding-bottom: 5px;}


.process-style{padding-top: 15px; grid-template-columns: repeat(2, 1fr); grid-gap:10px;}    
.process-style li{padding:10px 10px;}    
.process-style li::after{width: 10px; right: -10px;}      
.process-style li:nth-child(3n)::after{display: block;}   
.process-style li:nth-child(2n)::after{display: none;}   

.obm_style{flex-wrap:wrap; gap:30px;}
.obm_style dd{width: 100%; order:1;}
.obm_style dd h4{padding-top: 10px;}
.obm_style dd p{padding-top: 6px;}
.obm_style dd .btn_area{padding-top: 20px;}
.obm_style dt{width: 100%; order:2; text-align:center;}
/**** E:: OEM, ODM, OGM, OBM ****/

/**** S:: About Us / Why Choose ****/

.about_title{}
.about_title h4{padding-top: 10px;}
.about_title h4 br{display: none;}


.about_info{}
.about_info ul li{padding:0 15px; border-width:3px;}

.about_cnr{}
.about_cnr ul li p{white-space: wrap;}


.certi_list {display:grid; grid-template-columns:repeat(2, 1fr); grid-gap:20px 15px;}

/**** E:: About Us / Why Choose ****/



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

/**** S:: Motto & Philosophy ****/
.about_motto ul{grid-template-columns: repeat(1, 1fr);}
/**** E:: Motto & Philosophy ****/


}