@charset "utf-8";
/* CSS Document */
/*----------
Banner
----------*/
#index-banner{ position:relative; overflow:hidden;}
.index-banner-box{ color:var(--web-theme-color-white);}
#index-banner .swiper-pagination{ position: absolute; bottom: 4rem;}
#index-banner .swiper-pagination-bullet{ background-color:var(--web-theme-color);}
.indexbanner-img{ display: block; max-width: 1920px; width: 100%; margin: 0 auto;}
.indexsmallimg{ width: 100%;}
.indexsmallimg{ display:none;}
/*----------
Company Overiew
----------*/
#company-overiew{ position:relative;  margin-bottom:1vw;}
#company-overiew .page-title{ position:relative; z-index:1;}
.company-overiewbg{ position:absolute; left:0; top:16%; width:100%; display: -webkit-flex;  display: flex; justify-content: center; align-items: center;}
#company-overiew .sy-container{ position:relative; z-index:2; }
#company-overiew .grid{grid-template-columns:repeat(4,auto); justify-content: center; margin-top:9rem; grid-column-gap:4rem; }
.company-overiew-content{ border-right:#ccc solid 1px; padding:0 5rem;}
.company-overiew-content:last-child{ border:none;}
.company-overiew-info{font-size:5rem; font-weight:bold; color:var(--web-theme-color);}
.company-overiew-info span{ vertical-align:text-top; font-size:1.8rem; font-weight:lighter; color:var(--web-theme-color-black);}
.company-overiew-content p{ padding-top:1.4rem;}
#company-overiew .wrap-flex{ background-color:var(--web-theme-color-white);  box-shadow: 0 0 10px rgba(80,80,80,0.4);margin-top:9rem;}
.company-overiew-img{flex:1;}
.company-overiew-img img{ width:100%;}
.company-overiew-describe{ flex:1; padding:6rem 6rem 0 6rem; overflow:hidden;}
.company-overiew-title{ font-size:3rem; font-weight:bold; line-height:1.2em; margin:1.4rem 0;}
.company-overiew-title span{ display:block; color:var(--web-theme-color);}
.company-overiew-describe p{ padding-top:2rem;}
.company-overiew-more{ padding-top:9rem;}
/*----------
Product List
----------*/
#product-list{ position:relative; padding-top:0; padding-bottom:2rem;}
.product-listbg{ position:absolute; left:0; top:0; width:100%; height:83%; background-color:#e1e2e4;}
#product-list .grid{ position:relative; z-index:5; grid-template-columns:1fr 1.6fr; }
.product-list-content:first-child{ padding:14rem; width: calc(100% - 100px/2);}
.product-list-content h2{ margin:2rem 0; line-height:1.2em; color:var(--web-theme-color);}
.product-list-content h2 span{ color:var(--web-theme-color-black);}
.product-list-content p{ width:min(80%,230px);}
.product-list-content:first-child a{ display:inline-block; padding:1rem 5rem; margin-top:8rem; border-radius:30px; border:var(--web-theme-color) solid 1px; color:var(--web-theme-color-black);}
.product-list-content:first-child a i{ margin-left:1.4rem; -webkit-text-stroke: 0 var(--web-theme-color); font-size: 1.4rem; color:var(--web-theme-color);}
.product-list-content:first-child a:hover{background-color:var(--web-theme-color-black); border:none; color:var(--web-theme-color-white);}
.product-list-content:first-child a:hover i{color:var(--web-theme-color-white);}
/*tab*/
.tab-container{  overflow:hidden;}
.tab-content img{ width:100%;}
.tab-buttons { position:relative; z-index:5; display: -webkit-flex; display: flex;  justify-content: center;}
.tab-button{ width:100%; padding:5rem 4rem; background-color:var(--web-theme-color-black); border:none; text-align:center;  cursor: pointer; transition: all 0.5s;}   
.tab-button a{ white-space:nowrap; color:var(--web-theme-color-white);}
.tab-button:hover,.tab-button.active {border:none; background-color:var(--web-theme-color);  font-weight: bold;  }
.tab-panel {display: none;}
.tab-panel.active {display:block;}  
/*----------
Cooperative Partner
----------*/
/*swiper*/
#partner-catalog{ position:relative;  overflow:hidden; margin-top:6rem; padding-top:4rem;}
#partner-catalog .swiper-wrapper{ padding-bottom:6rem;}
#partner-catalog .swiper-slide a{ display:inline-block; padding:2rem 4rem; border-radius:15px; border:#ccc solid 1px;}
/*----------
Quality Controlr
----------*/
.quality-control-detection{flex:1;}
.quality-control-detection img{ width:100%;}
.quality-control-detection h4,.quality-control-detection h2,.quality-control-detection h3{ padding-left:6rem;}
.quality-control-detection h4{padding-top:8rem;color:var(--web-theme-color);}
.quality-control-detection h2{ padding-top:1.2rem;line-height:1.2em;}
.quality-control-detection ul{ padding-top:4rem;}
.quality-control-detection ul li{ border-bottom:#ccc solid 2px; padding:3rem 0;}
.quality-control-detection ul li a{color:var(--web-theme-color-black);}
.quality-control-detection ul li:hover{border-bottom:var(--web-theme-color) solid 2px; cursor:pointer;}
.quality-control-detection ul li:hover a{ color: var(--web-theme-color-gray);}
.quality-control-detection  .more{ margin-top:8rem; margin-right:2rem; float:right;}

/* Moblie phone */
@media screen and (max-width: 1023px) {
/*banner*/	
#index-banner{margin-top:0rem; }
#index-banner .swiper-button-next,#index-banner .swiper-button-prev{ display:none;}
#index-banner .swiper-pagination{ position: absolute; bottom:2rem;}
.indexbanner-img{ display:none;}
.indexsmallimg{ display:block;}
/*Company Overiew*/
#company-overiew{ overflow:hidden;}
.company-overiewbg{ position:absolute; left:0; top:6%; }
#company-overiew .grid{grid-template-columns:repeat(2,auto);  margin-top:4rem;  grid-gap:3rem 0; }
.company-overiew-content{ padding:0 2rem; }
.company-overiew-content:nth-child(2){ border: none;}
.company-overiew-info{font-size:2.6rem;}
.company-overiew-info span{ font-size:1.4rem; }
#company-overiew .wrap-flex{   flex-direction: column; margin-top:5rem; padding-bottom:4rem;}
.company-overiew-describe{  padding:4rem 15px 0 15px; }
.company-overiew-describe p{ padding-top:0;}
.company-overiew-more{ padding-top:2rem;}
.company-overiew-title{ font-size:2.6rem;}
.company-overiew-content p{ white-space: nowrap;}
.company-overiew-title span{ display:inline-block;}
/*Product List*/
#product-list{ position:relative; padding:0;}
.product-listbg{ position:absolute; left:0; top:0; width:100%; height:100%;}
#product-list .grid{grid-template-columns:1fr; }
.product-list-content:first-child{ padding:4rem 15px; width:100%;}
.product-list-content h2{ margin:2rem 0; line-height:1.2em; color:var(--web-theme-color);}
.product-list-content p{ width:100%;}
.product-list-content:first-child a{ display:inline-block; padding:1rem 4rem; margin-top:2rem;}
.product-list-content:first-child a i{font-size: 1.6rem;}
/*tab*/
.tab-container{  overflow:hidden;}
.tab-content img{ width:100%;}
.tab-buttons {margin-top:0;}
.tab-button{ width:40%; padding:2rem 0; }   
.tab-button a{ font-size:10px; white-space:normal;}
/*Cooperative Partner*/
#partner-catalog{ margin-top:2rem; padding-top:2rem;}
#partner-catalog .swiper-wrapper{ padding-bottom:6rem;}
#partner-catalog .swiper-slide a{ display:inline-block; padding:2rem 4rem; border-radius:15px; border:#ccc solid 1px;}
/*----------
Quality Controlr
----------*/
#quality-control .wrap-flex{flex-direction: column;}
.quality-control-detection img{ width:100%;}
.quality-control-detection h4,.quality-control-detection h2,.quality-control-detection h3{ padding-left:2rem;}
.quality-control-detection h4{padding-top:4rem;}
.quality-control-detection h2{ width:100%;}
.quality-control-detection ul{ padding-top:4rem;}
.quality-control-detection ul li{padding:3rem 0;}
.quality-control-detection  .more{ margin:2rem 0; margin-right:0; margin-left: 2rem; float: left;}
}