@charset "utf-8";
/*-----------------------------------Index pagecontent----------------------------------------------------*/
/*-------
Banner
-------*/
#index-banner{position:relative;}
#index-banner picture img{width:100%;}
#index-banner .banner-samlltitle{ padding: 3rem 0; text-align: center; color:rgba(255,255,255,.6); }
#index-banner .banner-largetitle{ font-size:4rem;   text-align: center;  font-weight: 600;  color:rgba(255,255,255,.6); }
#banner-txt{position: absolute;  left:0; top:54%; right: 0; bottom: 0; color: var(--web-theme-color-white);}
/*Feature Product*/
#feature-product{background-image: linear-gradient(to right, rgba(0,0,0,1), rgba(71,71,71,1));}
#feature-product h4{color: var(--web-theme-color);}
#feature-product h2{  padding-top: 1.2rem;  text-align: left; line-height: 1.2em;}
.product-title{ position: relative; flex: 0 0 30%;}
#feature-product .swiper-button-prev:after, #feature-product .swiper-container-rtl .swiper-button-next:after {
	content:'';
     color: #fff;
}
#feature-product .swiper-button-next:after, #feature-product .swiper-container-rtl .swiper-button-prev:after {
	content:'';
     color: #fff;
}
#feature-product .swiper-button-next,#feature-product .swiper-button-prev{border: #b3b3b3 solid 1px; padding: 3px 5rem; margin-top:7rem;  color: #fff !important; }
#feature-product .swiper-button-next{position: absolute; left:30%; color: #fff !important;}
#feature-product .swiper-button-prev{ position: absolute; right:20%; color: #fff !important;}
#feature-product .swiper-button-next i,#feature-product .swiper-button-prev i{ font-size:2rem; -webkit-text-stroke: 0.3px #333; text-align: center; color: #fff;  }
/* swiper*/
#product-list{flex: 0 0 70%;}
#product-list .swiper-slide a{display: block; padding: 2rem;}
#product-list p{ width: 100%; padding-top: 1.6rem; text-align: center; color:rgba(255,255,255,.6);}
#product-list img{ background-color: transparent; border-radius: 50%;}
#product-list .swiper-slide a:hover p{ color: var(--web-theme-color); }
#product-list .swiper-slide a:hover img{ box-shadow: 0 0 20px rgba(230,33,41,0.6);}
#product-list .swiper-pagination{ display:none; }
/*Product Series */
#product-series{background-image: linear-gradient(to right, rgba(0,0,0,1), rgba(71,71,71,1)); padding-bottom: 8rem; }
/* swiper */
#product-content .swiper-wrapper{ padding-bottom: 4rem;}
#product-content .swiper-slide{  position: relative;}
.productbg{display: none; position: absolute; left: 0; top: 0; right: 0; width: 100%; height: 100%; bottom: 0; z-index: 1;  }
#product-content a p{ display: none; position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 2;   font-size: 2rem; color: var(--web-theme-color-white);}
#product-content .swiper-slide:hover .productbg{ display: block; background-color: rgba(230,33,41,.5);} 
#product-content .swiper-slide a:hover p{ display: block; display: flex; justify-content: center; align-items:center;} 
#product-content .swiper-pagination-bullet-active{background-color: var(--web-theme-color);} 
/* Company Overiew */
#overiew{ background: url(/images/index/about/aboutbg.webp) no-repeat center center; background-size: cover;}
#overiew h2{  display: flex; justify-content: center; align-items: center;  color: var(--web-theme-color-white);}
#overiew .company-info h2{  color: var(--web-theme-color);}
#overiew h2 span{display: block; margin-top: -2rem; margin-left: 1.4rem;  font-size: 1.6rem; color: var(--web-theme-color-white);}
#overiew p{ width: max(60%,1000px); margin: 0 auto; padding-top: 2rem; text-align: center; color: var(--web-theme-color-white);}
#overiew h4{ letter-spacing: 0; text-align: center; color: var(--web-theme-color-white);}
#overiew .grid{ max-width: 1400px; border-radius: 20px;  padding: 5rem 2rem; margin: 0 auto; margin-top: 6rem; grid-template-columns: repeat(4,1fr);}
/*News*/
#news{ background-color: #141414;}
#news  h4{ text-align: center; color: var(--web-theme-color);}
#news  h2{ line-height: 1.4em; color: var(--web-theme-color-white);}
#news .grid{grid-template-columns:repeat(3,1fr); grid-gap: 0 2rem; margin-top: 4rem;  }
.news-content{ display: block; background-color: #222222;}
.news-item{ padding:2rem 2rem 0 2rem;}
.news-item img{ opacity: 0.6;  filter: grayscale(40%);}
.news-list{ padding-bottom: 4rem;}
#news  a em{ font-size: 1.4rem; color: rgba(255,255,255,.6);}
.news-item h3{  padding: 1.4rem 0;  color:var(--web-theme-color-white); font-weight:bold;}
.news-item p{ color: rgba(255,255,255,.6);}
#news a .content-link-info{margin-top: 4rem; font-size:0.8em; color:#fff; }
.news-line{ position:relative; transition: all .3s ease-in-out; width:12%; height: 2px; background-color: var(--web-theme-color);  margin-top: 1.2rem;}
#news svg {width: 2rem; margin-left: 1.2rem;  }
#news  a:hover svg path { fill:#999; }
#news  a:focus svg path {fill:#999; }
#news a:hover img{ opacity: 1;  filter: grayscale(0%);}
#news a:hover .news-line{width:26%;}
/*-------
moblic phone
-------*/
@media (max-width:1023px){	
/*Banner*/
#index-banner .banner-samlltitle{ padding:5px 0; display:none;}
#index-banner .banner-largetitle{ font-size:2.2rem; line-height: 1.2em;  }
#banner-txt{position: absolute;  left:0; top:35%; right: 0; bottom: 0; color: var(--web-theme-color-white);}
/*Feature Product*/
#feature-product .wrap-flex{ display:block;}
#feature-product  .product-title{ position:static; flex:1;}
#feature-product .swiper-button-next:after,#feature-product .swiper-button-prev:after{display:none;}
#feature-product .swiper-button-next,#feature-product .swiper-button-prev{display:none;}
/* swiper */
#product-list{ position: relative; width:100%; margin-top: 4rem; }
#product-list .swiper-slide a{display: block; padding: 0;}
#product-list p{ padding-top: 2rem; }
#product-list img{ width: 10rem;}
#product-list .swiper-wrapper{ padding-bottom:2rem;}
#product-list .swiper-pagination{ display: block; }
#product-list .swiper-pagination-bullet-active{  background-color:var(--web-theme-color);} 
/* Company Overiew */
#overiew{ background: url(/images/index/about/aboutbg-mb.jpg) no-repeat center center; background-size:cover;}
#overiew p{ width:100%; margin: 0 ; padding-top: 2rem; }
#overiew h4{ letter-spacing: 0; text-align: center; color: var(--web-theme-color-white);}
#overiew .grid{ max-width: 1400px; padding: 3rem 1rem;  margin-top: 4rem; grid-template-columns: repeat(2,1fr); grid-gap: 2rem 0;}
/*News*/
#news .grid{grid-template-columns:1fr; grid-gap: 4rem 0; margin-top: 4rem;  }
}