@charset "utf-8";
/* CSS Document */
/*----------
Banner
----------*/
#index-banner{position:relative; width:100%; overflow:hidden; margin-top:13rem; }
#index-banner  .indexbanner-img,#index-banner .indexsmallimg{width:100%; }
#index-banner .swiper-button-next,#index-banner .swiper-button-prev{ width:50px; height:50px; padding:1.4rem 2rem; border-radius:50%; background-color:#fff; font-size:24px; color:#fff;}
#index-banner .swiper-button-prev:after{width:50px; height:50px; padding:1.4rem 1.8rem; border-radius:50%; background-color:var(--web-theme-color-blue); font-size:24px;}
#index-banner .swiper-button-next:after {width:50px; height:50px; padding:1.4rem 2rem; border-radius:50%; background-color:var(--web-theme-color-blue); font-size:24px;}
#index-banner .swiper-button-next:after{right:14.6%; top:93%; }
#index-banner .swiper-button-prev:after{left:80%;top:93%;}
.indexsmallimg{ display:none;}
/*----------
Feature Products
----------*/
#feature-products{ position:relative; padding-bottom:10rem;} 
#feature-products .sy-container{position:relative;}
#feature-productsbg{ position:absolute; right:0; top:0; width:50%; height:50%; background-image: linear-gradient(to right,rgba(42,90,166,1) , rgba(130,210,212,1)); }
#feature-products h2 span{background-image: linear-gradient(to bottom,rgba(42,90,166,1) ,rgba(27,174,225,1), rgba(130,210,212,1)); -webkit-background-clip: text;-moz-background-clip: text;background-clip: text;color: transparent;}
#feature-products-link{padding:2rem 6rem; position:absolute; left:30px; top:30%; z-index:12; }
#feature-products-link a{color:var(--web-theme-color-white);}
#feature-products-link a:hover{color:var(--web-theme-color);}
#feature-products .swiper-button-next,#feature-products .swiper-button-prev{ width:50px; height:50px; padding:1.4rem 2rem; border-radius:50%; background-color:#fff; font-size:24px; color:#fff;}
#feature-products .swiper-button-next{right:10rem; top:12%; }
#feature-products .swiper-button-prev{ left:auto;right:18rem; top:12%;}
#feature-products .swiper-button-prev:after{ right:10rem;top:12%; width:50px; height:50px; padding:1.4rem 1.8rem; border-radius:50%; background-color:#fff; font-size:24px;color:var(--web-theme-color-black);}
#feature-products .swiper-button-next:after {left:auto; right:18rem; top:12%;   width:50px; height:50px; padding:1.4rem 2rem; border-radius:50%; background-color:#fff; font-size:24px;color:var(--web-theme-color-black);}
/*swiper*/
#feature-products-list{ position:relative; z-index:5; margin-top:10rem; }
#feature-products-list .swiper-slide{ background-color:var(--web-theme-color-white);}
/*----------
Advantages
----------*/
#advantages{ background:url(../images/index/about/company-info.webp) no-repeat; background-size:cover; padding-bottom:12rem;}
#advantages .grid{ border:#ccc solid 1px; border-radius:15px; padding:6rem 0; margin-top:6rem; background-color:rgba(5,37,61,.6); grid-template-columns:repeat(4,auto); align-items: center;}
.advantages-content-info h3,.advantages-content-info p{ text-align:center; color:var(--web-theme-color-white);}
.advantages-content-info h3{ padding-top:2rem;}
.advantages-content-info p{ width:min(80%,300px); margin:1rem auto;}
/*----------
Company Overiew
----------*/
#company-overiew .grid{grid-template-columns:repeat(2,1fr);}
.company-overiew-content:first-child{ background-color:#F2F7FC; padding:6vw 8rem 0 4vw;}
.company-overiew-contentimg{  border:#83CBD0 solid 2px;}
.company-overiew-contentimg img{ position:relative; z-index:5; left:4rem; top:6rem; }
.company-overiew-content h3{ padding-top:8rem; text-align:right;}
.company-overiew-content h3 span{color:var(--web-theme-color);}
.company-overiew-content:last-child{ padding:8rem;}
.company-overiew-content:last-child .com-line{ margin:1.1rem 0;}
.company-overiew-content:last-child h2{ width:min(80%,800px);padding-top:2rem;}
.company-overiew-content:last-child p{ padding-top:4rem;}
.company-overiew-content:last-child .more{ margin-top:6rem;}
/*company info*/
#company-info{padding-top:7vw; padding-bottom:8rem;}
#company-info h1{  font-size:30rem; font-weight:500; text-align:center; -webkit-text-stroke: 1px #F0F0F0;-webkit-text-stroke: 1px #F0F0F0; color:transparent; } 
#company-info .grid{ position:relative; z-index:5; grid-template-columns:repeat(4,1fr); padding-top:2rem; margin-top:-6rem;}
.company-info-content-txt{ margin-left:2rem;}
.company-info-content h2{  font-weight:700; color:var(--web-theme-color-black);  padding-top:0.6rem;}
.company-info-content span{ display:block; margin-left:0.6rem; margin-top:0.8rem; font-size:2rem; text-transform:lowercase; color:var(--web-theme-color-black);}
#company-info .company-info-content p{ line-height:0;  color:var(--web-theme-color-black);}
/*----------
Product Certification
----------*/
#certification{ position:relative; background:url(../images/index/about/cerbg.webp) no-repeat; background-size:cover; padding-bottom:8rem; margin-top:8rem;}
#certification h2{color:var(--web-theme-color-black);}
#certification .com-line{ width:6rem; height:5px; margin:0 auto; margin-top:2rem;}
#certification .swiper-button-next{ right:4vw; top:50%; width:50px; height:50px; padding:1.4rem 2rem; border-radius:50%; border:#ccc solid 1px; font-size:24px; color:var(--web-theme-color-black);}
#certification .swiper-button-prev{ left:4vw;  top:50%; width:50px; height:50px; padding:1.4rem 2rem; border-radius:50%; border:#ccc solid 1px; font-size:24px; color:var(--web-theme-color-black);}
#certification .swiper-button-prev:after{ left:4vw; top:50%; width:50px; height:50px; padding:1.4rem 1.8rem; border-radius:50%; border:#ccc solid 1px; font-size:24px; color:var(--web-theme-color-black);}
#certification .swiper-button-next:after { right:4vw; top:50%; width:50px; height:50px; padding:1.4rem 2rem; border-radius:50%; border:#ccc solid 1px; font-size:24px; color:var(--web-theme-color-black);}
#certification .swiper-pagination{ display:none;}
#certification .more{ margin:0 auto; margin-top:12rem;}
/*swiper*/
#certification-list{ margin-top:11rem;}
/*----------
Application
----------*/
#application{ padding-bottom:8rem;}
#application h2,#application p{color:var(--web-theme-color-black);}
#application .com-line{ width:6rem; height:5px; margin:0 auto; margin-top:2rem;}
#application .grid{grid-template-columns:repeat(3,1fr); grid-gap:2rem 4rem; margin-top:6rem;}
#application .more{ margin:0 auto; margin-top:6rem;}
#application .application-content a{color:var(--web-theme-color-black);}
.application-contentimg{ position:relative;}
#application a:hover img{opacity:0.6;}
.application-content-info{ position:absolute; left:0; bottom:2rem;display: -webkit-flex; display: flex; align-items: center; background-color:#F7F7F7; padding:8px 2rem 8px 0;}
#application a:hover .application-content-info{ background-color:var(--web-theme-color-blue); color:var(--web-theme-color-white);}
#application .application-content-info .com-line{ width:3rem; height:5px; margin:0;}
.application-content-info h4{ margin-left:2rem;}
@media screen and (max-width: 1023px) {
/*banner*/	
#index-banner{margin-top:0rem; }
#index-banner .swiper-button-next,#index-banner .swiper-button-prev{ display: none;}
.indexbanner-img{ display:none;}
.indexsmallimg{ display:block;}
/*Feature Products*/
#feature-products{ padding-top: 4rem; padding-bottom:2rem;}
#feature-productsbg{ position:absolute; right:0; top:0; width:50%; height:50%;}
#feature-products-link{top:50%;}
#feature-products .swiper-button-next,#feature-products .swiper-button-prev{ display: none;}
/*swiper*/
#feature-products-list{ margin-top:2rem; }
/*Advantages----------*/
#advantages{padding-bottom:8rem;}
#advantages .grid{padding:6rem 0; margin-top:6rem; grid-template-columns:repeat(2,1fr); grid-gap:2rem 0; }
.advantages-contentimg{ width:15%; margin:0 auto;}
.advantages-content-info h3,.advantages-content-info p{ text-align:center; color:var(--web-theme-color-white);}
.advantages-content-info h3{ padding:2rem 0;}
.advantages-content-info p{ width:100%; margin:0;}
/*Company Overiew*/
#company-overiew .grid{grid-template-columns:1fr;}
.company-overiew-content:first-child{padding:0; padding-bottom:2rem;}
.company-overiew-contentimg{ border:none;}
.company-overiew-contentimg img{ position:relative; z-index:5; left:0; top:0;}
.company-overiew-content h3{ padding-top:2rem;}
.company-overiew-content:last-child{ margin-top:2rem; padding:2rem;}
.company-overiew-content:last-child .com-line{ margin:1.1rem 0;}
.company-overiew-content:last-child h2{ width:100%;padding-top:2rem;}
.company-overiew-content:last-child p{ padding-top:2rem;}
.company-overiew-content:last-child .more{ margin-top:4rem;}
/*company info*/
#company-info{padding-top:7vw; padding-bottom:4rem;}
#company-info h1{display:none;} 
#company-info .grid{  grid-template-columns:repeat(2,1fr);grid-gap:2rem; padding-top:0; margin-top:0;}
.company-info-content-txt{ margin-left:1rem;}
.company-info-content h2{padding-top:0.6rem;}
.company-info-content span{ display:block; margin-left:0.6rem; margin-top:0.8rem; font-size:10px;}
#company-info .company-info-content p{line-height:1.4em;}
/*Product Certification*/
#certification{padding-bottom:6rem; margin-top:4rem;}
#certification .com-line{ width:6rem; height:5px; margin:0 auto; margin-top:2rem;}
#certification .swiper-button-next{ display:none;}
#certification .swiper-button-prev{display:none;}
#certification .swiper-wrapper{ padding-bottom:2rem;}
#certification .swiper-pagination{ display:block; left:0; top:77%;right:0; bottom:0;}
#certification .swiper-pagination-bullet-active{background-color:var(--web-theme-color);}
#certification .more{margin-top:6rem;}
/*swiper*/
#certification-list{ margin-top:8rem;}
/*Application*/
#application{ padding-bottom:6rem;}
#application .com-line{ width:6rem; height:5px; margin:0 auto; margin-top:2rem;}
#application .grid{grid-template-columns:1fr; grid-gap:2rem 0; margin-top:6rem;}
#application .more{ margin:0 auto; margin-top:4rem;}
.application-content-info h4{ margin-left:1rem;}
}
@media screen and (max-width: 768px) {
#feature-products-link{ display:none;}
#feature-products .swiper-button-next,#feature-products .swiper-button-prev{display:none;}
#feature-products .swiper-button-prev:after,#feature-products .swiper-button-next:after{ display:none;}
}