/****************************************************** main ******************************************************/ 
.main-section { padding: 150px 0; } 
 
 
/* visual */ 
.main-visual { position:relative; padding: 0 30px; overflow:hidden; }
.mainIntro {  position: absolute;  z-index: 3; width:calc(100% - 60px); height:100%; border-radius:30px;  top: 0;  left: 30px;  right: 0;  bottom: 0;  display: flex;  justify-content: center;  align-items: center; flex-direction: row;  gap: 20px;  background:url('/resources/user/images/main-visual-intro.jpg') no-repeat center center / cover;    color: #fff;  font-size: 90px; font-weight: 700;  opacity: 1;  transition: all .6s ease;  overflow: hidden;}
.mainIntro span {  display: inline-block;  transform: translateX(0);  opacity: 1;transition: transform 1.2s ease, opacity 0.6s ease;     white-space: nowrap;}
.mainIntro.animate{gap:29%;} 
.mainIntro.fade-out { opacity:0;   pointer-events: none;  transition:opacity 1s ease;}  
.mainSwiper { position: relative; overflow: hidden; border-radius: 30px;  }
.mainSwiper.visible {  opacity: 1;  transition: opacity 1s ease;} 
.mainSwiper .visual-img{width: 100%; height:87vh;}
.mainSwiper .visual-img img { width: 100%; height: 100%; object-fit: cover; transform:scale(1.1); transition:all 3s ease-out .3s;}
.mainSwiper .swiper-slide-active .visual-img img{transform:scale(1);}
.mainSwiper .visual-caption {  position: absolute; top: 55%; transform:translateY(-50%); left: 0; right: 0; margin: 0 auto;max-width: 1500px; width: 90%; color: #fff;  opacity:0; transition:all .6s ease-out .6s;}
.mainSwiper .visual-caption h2 { font-size: 70px; font-weight: 600; margin-top: 20px;   }
.mainSwiper .visual-caption p { font-size: 28px; font-weight: 500; }
.mainSwiper .swiper-slide-active .visual-caption{ opacity:1;  top:50%;}
.mainSwiper .swiper-control { display:flex; align-items:center;    position: absolute;bottom: 50px; left: calc(50% - 750px);  gap:20px;}
.mainSwiper .swiper-pagination-progressbar {   width: 100px; }
.mainSwiper .swiper-button-next,
.mainSwiper .swiper-button-prev{border:0;} 
.thumbSwiper { width: 100%; max-width:500px;  overflow: initial;  bottom:30px; left:0; right:0; margin:0 auto;  position:absolute; transform:translateY(20px); opacity:0; transition:all  ease 1s;  text-align: center;}
.thumbSwiper .swiper-wrapper{width:auto; display:inline-flex; justify-content: center; margin:0 auto; background: rgba(255,255,255,0.5); gap:10px; backdrop-filter:blur(40px); padding:10px; border-radius:40px; box-sizing:border-box; }
.thumbSwiper .swiper-slide { width: 60px; height: 60px; border-radius:50%;  cursor: pointer;  overflow: hidden; }
.thumbSwiper .thumb-titles{position:relative; color: #fff; height:40px;}
.thumbSwiper .thumb-titles span{position:absolute; left:0; top:0; width: 100%; text-align: center; opacity:0; transition:all ease .35s; font-weight: 500;     white-space: nowrap;}
.thumbSwiper .thumb-titles span.active { opacity:1; }
.thumbSwiper .swiper-slide-thumb-active {   border: 3px solid #fff;}
.thumbSwiper img {  width: 100%;  height: 100%;  object-fit: cover;} 
.thumbSwiper.visible{transform:translateY(0); opacity:1;}
 

/* popup */
.popup {  position: fixed;  bottom: 16px;  right: 16px;  max-width: 450px;  box-shadow: 0 4px 15px rgba(0,0,0,0.2);z-index: 8;  display: none;   width: calc(100% - 32px);}
.popup-content img{width: 100%;}
.popup-buttons {  display: flex; justify-content: flex-end; border-top:1px solid #ddd;}
.popup-btn {  display:block; width: 50%; text-align: center; height:50px; line-height: 50px;    cursor: pointer; background: #fff; border:0; border-radius:0; font-size: 15px;}
.popup-btn + .popup-btn{border-left:1px solid #ddd;}  
.popup .swiper-pagination-bullet{background: #fff;}

   

/* services */
.main-section.service .service-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(284px, 1fr)); gap: 20px;  list-style: none;  padding: 0; }
.main-section.service .service-item { display: flex;  align-items: center;  justify-content: space-between;  padding: 30px 20px 30px 30px; background: #F2F6FC;   border-radius: 20px;  text-decoration: none;   transition: all 0.35s ease;  border:1px solid transparent; }
.main-section.service .service-item:focus,
.main-section.service .service-item:hover {  border-color: #0057C2;  box-shadow: 0 0 20px rgb(0 87 194 / 20%);  outline: none; transform:translateY(-10px); background: #fff;} 
.main-section.service .service-icon { width: 60px;  height: 60px; display:flex; align-items:center; justify-content:center;}
.main-section.service .service-item strong {display:block;font-size: 20px; font-weight: 500;} 
.main-section.service .service-item:focus,
.main-section.service .service-item:hover strong{color: #0057C2; font-weight: 600;  }


/* news */
.main-section.news {position:relative; overflow:hidden;}  
.main-section.news:before{content:''; width:80%; height:100%; position:absolute; left:0; top:0; background: #0057C2; z-index:-2; border-radius:0 800px 800px 0; }
.main-section.news:after{content:''; width: 686px;  height: 200px; background:url('/resources/user/images/news-symbol.png') no-repeat center center / contain;  position:absolute; left:0; bottom:70px; z-index:-1;}
.main-section.news .inner{position:relative; display:flex; justify-content:space-between; gap:100px; max-width:100%; width:100%;     padding-left: calc(50% - 750px);}
.main-section.news .section-header{color: #fff; width: 280px; padding-top: 10px;}
.main-section.news .section-subtitle{color: #fff;}
.main-section.news .section-subtitle:before{background: #fff;}
.main-section.news .newsSwiper { width:calc(100% - 380px);    position: relative; padding: 30px 0;  margin: -30px 0;}
.main-section.news .news-card {position:relative; padding:40px; min-height:433px; display: flex; flex-direction:column; justify-content:space-between; align-items:flex-start; background: #fff;  border-radius: 20px;  overflow: hidden;  text-decoration: none;  transition:all ease .35s; box-shadow: 0 0 20px rgb(0 87 194 / 20%);  } 
.main-section.news .swiper-slide-prev .news-card{opacity:0;}
.main-section.news .news-card .info { }
.main-section.news .news-card .title {display:block; font-size: 26px; margin-bottom: 20px; overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-wrap:break-word; font-weight: 600;}
.main-section.news .news-card .cate{display:inline-block; font-size: 16px; padding:5px 10px; border-radius:50px; background: #666; color: #fff; margin-bottom: 20px;}
.main-section.news .news-card .desc{color: #444;  font-size: 20px; overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;word-wrap:break-word; } 
.main-section.news .news-card .date { display:inline-block; font-size: 16px; color: #666; border:1px solid #ddd; padding:4px 10px; border-radius:30px;}
.main-section.news .swiper-slide-active .news-card{ transform:translateY(-30px);} 
.main-section.news .swiper-slide-active .news-card .cate{ background: #0057C2;}
.main-section.news .swiper-slide-active .news-card .title{ color: #0057C2;}
.main-section.news .swiper-slide-active .news-card:before{content:''; width: 15px; height: 3px; background: #000; position:absolute; right:22px; top:30px;}
.main-section.news .swiper-slide-active .news-card:after{content:''; width: 3px; height: 15px; background: #000; position:absolute; right:28px; top:24px;}
.main-section.news .swiper-control {  display:flex; align-items:center; gap:20px;   position: absolute;bottom: 50px; left: calc(50% - 750px); width: 300px;}
.main-section.news .swiper-pagination-progressbar {   width: 100px; }
.main-section.news .swiper-button-next{left:auto; right:0;}
.main-section.news .swiper-button-prev{left:auto; right:60px;}

/* banner */
.main-section.banner { }
.banner-list { position:relative; display:flex; align-items:center; border-radius:20px; height:400px; width: 100%;   color: #fff; text-align: center; overflow:hidden;}
.banner-list:after{content:''; width: 100%; height: 100%; object-fit:cover; position:absolute; left:0; top:0; z-index:-1;background: url('/resources/user/images/banner-bg.jpg') no-repeat center center / cover; transition:all ease .6s;}
.banner-item {  width: 50%; display:flex; flex-direction:column; justify-content:center; align-items:center;  height:100%;} 
.banner-link {  width: 100%; display:flex; flex-direction:column; justify-content:center; align-items:center;  height:100%;} 
.banner-list:before{content:''; width:1px; height:40%; background: rgba(255,255,255,0.3); position:absolute; left:50%; top:30%;     pointer-events: none;}
.banner-text {display:flex; flex-direction:column; justify-content:center; align-items:center; gap:30px; color: #fff; margin-top: 80px; transition:all ease .35s; } 
.banner-link .more{ color: #0057C2; background: #fff; padding:0 42px; height:50px; line-height: 50px; display:inline-block; border-radius:50px;  font-family: "Titillium Web", sans-serif; font-weight: 600; opacity:0; transform:translateY(20px); transition:all ease .35s;}
.banner-text strong { font-size: 32px; font-weight: 600;} 
@media (hover: hover) and (pointer: fine) {
	.banner-link:focus .more,
	.banner-link:hover .more { opacity:1;transform:translateY(0); } 
	.banner-link:focus .banner-text,
	.banner-link:hover .banner-text{margin-top: 0;} 
	.banner-list:hover:after{transform:scale(1.1);}
}



@media screen and (max-width:1540px){  
	.mainIntro{font-size: 5vw; width: 90%; left:5%;}
	.mainSwiper .swiper-control{left:5%;}
	.mainSwiper .visual-caption h2{font-size: 60px; margin-top: 10px;}
	.mainSwiper .visual-caption p{font-size: 24px;}
	.main-section.news .inner{padding-left: 5%;}
	.main-section.news .swiper-control{left:5%;} 
	.main-visual{padding:0 5%;} 
}
@media screen and (max-width:1024px){    
}

@media screen and (max-width:768px){ 
	.main-section{padding:70px 0;}  
	.mainIntro,
	.mainSwiper{border-radius:20px;}
	.mainSwiper .visual-caption h2{font-size: 30px;}
	.mainSwiper .visual-caption p{font-size: 16px;}  
	.thumbSwiper .thumb-titles{height: 32px;} 
	.mainSwiper .swiper-control{bottom:200px; left: calc(5% + 20px);}
	.mainSwiper .visual-caption{transform:translateY(-80%); width: calc(90% - 40px);}
	.mainSwiper .swiper-button-next{right:0;}
	.mainSwiper .swiper-button-prev{left:0;}
	.main-visual{padding:0 10px;}
	.mainIntro{left:10px; width:calc(100% - 20px);  }
	.main-section.service .service-item{padding:10px 20px; border-radius:10px;}
	.main-section.service .service-item strong{font-size: 15px;}
	.main-section.service .service-list{gap:10px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));}
	.main-section.service .service-icon{width: 40px; height: 40px;}
	.main-section.news .inner{ flex-direction: column; gap:30px;}
	.main-section.news .section-header{width: 100%;}
	.main-section.news .newsSwiper{width: 100%;}
	.main-section.news .news-card{padding:24px;}
	.main-section.news .news-card .cate{font-size: 13px; margin-bottom: 10px;}
	.main-section.news .news-card .title{font-size: 20px; margin-bottom: 10px;}
	.main-section.news .news-card .desc{font-size: 16px;}
	.main-section.news .news-card{min-height:auto;}
	.main-section.news .news-card .date{margin-top: 40px; font-size: 14px;}
	.main-section.news .swiper-control{position:relative; left:0; bottom:0;}
	.main-section.news:after{width: 100%;}
	.main-section.news:before{border-radius:0 80px 80px 0; width: 95%;}
	.banner-list{ flex-direction: column; height:auto; padding:20px 0;}
	.banner-item{width: 100%; padding:40px 10px;}
	.banner-text{margin-top: 0; gap:15px;}
	.banner-text strong{font-size: 20px;}
	.banner-list:before{width: 50%; height: 1px; left:25%; top:50%;}
	.banner-link .more{transform:translateY(0); opacity:1; padding:0 30px; font-size: 14px; height: 40px; line-height: 40px;}
}