/*-- --*/
.bannerbox{ width:100%; height:100vh; float: left; position: relative; background-color:#000; padding-top: 100px;}
.bannerbox .swiper{ width:100%; height: 100%;}
.bannerbox .swiper-slide{ width:100%; height: 100%; background-size:cover; background-repeat: no-repeat; background-position: center center; display: flex;}
.bannerbox .swiper-slide a{ width: 100%; display: flex; position: relative;}
.bannerbox .swiper-slide a img{ max-width: 100%;}
.banwords{ position: absolute; left:0%; bottom:200px; width:100%; height:auto; display: flex; justify-content:center; align-items:flex-start; padding: 20px; flex-direction: column;}
.ban-m{width:100%; height:auto; display: flex; justify-content:center; align-items:flex-start; flex-direction: column;}
.banwords h1{ font-size:3.55rem; text-align: center; color: #FFF; text-shadow: 2px 10px 4px rgba(0, 0, 0, 0.3);}
.banwords p{ font-size:1.2rem; text-align: center; color: #FFF;  text-shadow: 2px 10px 4px rgba(0, 0, 0, 0.3);}
.banwords img{ max-width:100%; }
.banwords button { font-size:1.1rem; line-height: 1.5; background-color: #FFF; display: flex; justify-content: center; align-items: center; text-align: center; color:#000; border: 0; margin-top:20px; padding:10px 20px; -webkit-transition:0.6s;-moz-transition:0.6s;transition:0.6s;}
.banwords button i{ margin-left:10px; width:50px; height:30px; background-size:80%; background-repeat: no-repeat; background-position: center center; background-image:url(../../uploads/page/syjt.png); }
.banwords button:hover i{ background-image:url(../../uploads/page/syjts.png); } 
.banwords button.button--isi::before { background:#00a0e9;}
.banwords button:hover{ color:#ffffff; }
.ban-swiper-pagination{width: 100%; position: absolute; left: 0; bottom:40px!important; z-index: 1; display: flex; justify-content: center; align-items: center;}
.ban-swiper-pagination .swiper-pagination-bullet { width:70px; height:8px; opacity: 1; background-color: transparent; border: 2px solid #FFF; border-radius:0; }
.ban-swiper-pagination .swiper-pagination-bullet-active { background: #ffffff;}
.ban-swiper-pagination .swiper-horizontal>.swiper-pagination-bullets{ bottom:60px;}
.banSwiper .inbg{ width:100%; height:100%; position: absolute; left: 0; top:0; background-repeat: no-repeat; background-size:cover; background-position: center; }
.section .dds{ width:100%; position: absolute; left: 0; bottom:30px; z-index: 10; display: flex; justify-content: center; align-items: center; text-align: center;}
.section .dds svg{ display:inline-block; }

.bigbox{ width:100%; float:left; display:flex; flex-direction: column;}
.syone{ width:100%; background-color:#f4f4f4; position:relative; padding: 60px 0px 100px;}
.syone::before{ content:''; position:absolute; left:0; bottom:0; width:100%; height:100px; background: linear-gradient(to bottom, #f4f4f4, #ffffff);}
.symain{ width:100%; display:flex; justify-content:space-between; align-items: center; flex-direction:row; position: relative; z-index: 1} 
.syonel{ width:50%; display:flex; }
.syonel div{ width:480px; position:relative; display:flex; flex-direction:column; }
.syonel div h2{ font-size:2.8rem; font-weight:100; position:relative; padding-right:30px; }
.syonel div h2::before{ content:''; position:absolute; right:0; top:-15px; width:30px; height:30px; background-repeat:no-repeat; background-position:center; background-image:url('../../uploads/svg-loaders/shuangyinhao.svg'); background-size:30px; }
.syonel div h1{ font-size:2.8rem; font-weight:600; }
.syonel div p{ font-size:1rem; line-height:1.6; color:#5b5b5b; padding:10px 0px 50px; position:relative; }
.syonel div p::before{ content:''; position:absolute; left:0; bottom:0; width:60px; height:6px; background-color:#000; }
.syoner{ width:50%; display:flex; justify-content:flex-end; }
.syoner i img{ max-width:100%; }

.sytwo{ width:100%; display:flex; justify-content:center; align-items: center; flex-direction:column; }
.sytwo-title{ width:700px; display:flex; justify-content:center; align-items:center; flex-direction:column; gap:10px; }
.sytwo-title h1{ text-align:center; font-size:2.8rem; color:#000;}
.sytwo-title p{ text-align:center; font-size:1.125rem; color:#5b5b5b;}
.sytwo-info{ width:100%; padding:50px 0px;}
.sytwo-imgbox, .sytwo-imgbox a{ width:100%; display:flex; flex-direction:column; position:relative; border-radius:30px; overflow:hidden; }
.sytwo-logo{ width:95px; height:95px; border-radius:360px; background-color:#000; display:flex; justify-content:center; align-items: center; flex-direction:column; padding:10px; position: absolute; left:20px; top:-20px; visibility:hidden; opacity: 0; -webkit-transition:0.6s;-moz-transition:0.6s;transition:0.6s;}
.sytwo-logo img{ max-width:100%; }
.sytwo-img{ width:100%; display: flex;}
.sytwo-img img{ width:100%; max-height:640px; }
.sytwo-name{ width:90%; background-color:#000; border-radius:30px; display:flex; justify-content:center; align-items:center; flex-direction:column; text-align:center; color:#FFF; position:absolute; left:5%; bottom:-20px; font-size:1.125rem; min-height:50px; visibility:hidden; opacity: 0; -webkit-transition:0.6s;-moz-transition:0.6s;transition:0.6s;}
.sytwo-imgbox:hover .sytwo-logo{ visibility:visible; opacity:1; top:15px;}
.sytwo-imgbox:hover .sytwo-name{ visibility:visible; opacity:1; bottom:15px;}
.sytwo-prev-next{ width:100%; padding:20px 0px; display:flex; justify-content:center; align-items:center; flex-direction:row; gap:0px 50px; }
.sytwo-swiper-button-prev { position: relative; background: url(../../uploads/svg-loaders/sing-left.svg) center center no-repeat #000; border-radius: 360px; cursor:pointer; background-size:40%; width:40px; height:40px; z-index: 99; transition: 0.6s;-webkit-transition: 0.6s;-moz-transition: 0.6s;}
.sytwo-swiper-button-prev:hover { width:40px; height:40px; background: url(../../uploads/svg-loaders/sing-left.svg) center center no-repeat #ababab; background-size:40%; transition: 0.6s;-webkit-transition: 0.6s;-moz-transition: 0.6s;}
.sytwo-swiper-button-next { position: relative; background: url(../../uploads/svg-loaders/sing-right.svg) center center no-repeat #000;  border-radius: 360px; background-size:40%; width:40px; height:40px; z-index: 99; transition: 0.6s;-webkit-transition: 0.6s;-moz-transition: 0.6s;}
.sytwo-swiper-button-next:hover {width:40px; height:40px; background: url(../../uploads/svg-loaders/sing-right.svg) center center no-repeat #ababab; background-size:40%; transition: 0.6s;-webkit-transition: 0.6s;-moz-transition: 0.6s;}
.sytwo-btn{ width:100%; display:flex; justify-content:center; align-items:center; flex-direction:column; }
.sytwo-btn a{ width:145px; height:50px; background-color:#000; display:flex; justify-content:center; align-items:center; flex-direction:column; text-align:center; font-size:1rem; color:#FFF; border-radius:25px; transition: 0.3s;-webkit-transition: 0.3s;-moz-transition: 0.3s;}
.sytwo-btn a:hover{ background-color:#ababab; }

.sythree{ width:100%; display:flex; flex-direction:column; gap:50px 0px; padding:40px 0px 100px;}
.thone{ width:100%; display:flex; flex-direction:row; justify-content:flex-start; position:relative; }
.thonel{ width:49%; display:flex; align-items:flex-start; justify-content:flex-start; animation-name: customSlideInLeft;}
.thonel img{ max-width:100%; }
.thoner{ width:51%; display:flex; justify-content:center; align-items:center; flex-direction:column; animation-name: customSlideInRight; padding: 15px;}
.thoner-info{ width:550px; display:flex; flex-direction:column; justify-content:flex-end; align-items:flex-end; text-align:right; }
.thoner-info h1{ font-size:2.43rem; color:#000; font-weight:600; font-style:italic; padding:10px 0px; }
.thoner-info p{ font-size:1rem; color:#000; padding:10px 0px;}
.thoner-info a{ width:190px; height:40px; margin-top: 25px; border:2px solid #000; font-size:1rem; text-align:center; padding:0px 10px; display:flex; justify-content:center; align-items:center; flex-direction:column; transition: 0.3s;-webkit-transition: 0.3s;-moz-transition: 0.3s;}
.thoner-info a:hover{ background-color:#000; color:#FFF; }
.thone.two{ flex-direction:row-reverse; }
.thone.two .thoner-info{ justify-content:flex-start; align-items:flex-start; text-align:left; }
.thone.two .thonel{ animation-name: customSlideInRight; }
.thone.two .thoner{ animation-name: customSlideInLeft; }
@keyframes customSlideInLeft {from {transform: translateX(-50px); opacity: 0.5; } to {transform: translateX(0); opacity: 1; } }
@keyframes customSlideInRight {from {transform: translateX(50px); opacity: 0.5; } to {transform: translateX(0); opacity: 1; } }
@keyframes customSlideInUp {from {transform: translateY(50px); opacity: 0.5; } to {transform: translateY(0); opacity: 1; } }
@keyframes customSlideInDown {from {transform: translateY(-50px); opacity: 0.5; } to {transform: translateY(0); opacity: 1; } }

.syfour{ width:100%; display:flex; flex-direction:row; position:relative; }
.syf-main{ width:calc(100% - 150px); padding:70px 0px 50px 10%; margin-bottom:100px; display:flex; flex-direction:column; position:relative; z-index:1; background-color:#f5f5f5; }
.syf-main-title{ width:100%; display:flex; justify-content:space-between; align-items:flex-end; flex-direction:row; padding-right:100px;}
.syf-main-title div{ display:flex; flex-direction:column; }
.syf-main-title div h1{ font-weight:600; font-size:2.8rem; color:#000; padding: 8px 0px;}
.syf-main-title div p{ font-size:1.125rem; color:#5b5b5b; padding: 8px 0px;}
.syf-main-title a{ width:190px; height:40px; border:2px solid #000; font-size:1rem; text-align:center; padding:0px 10px; display:flex; justify-content:center; align-items:center; flex-direction:column; margin-bottom:15px; transition: 0.3s;-webkit-transition: 0.3s;-moz-transition: 0.3s;}
.syf-main-title a:hover{ background-color:#000; color:#FFF; }
.fbg{ width:50%; height:calc(100% - 110px); position:absolute; right:0; bottom:0; background-color:#f1d6b0; }
.syf-title{ width:150px; padding:10% 10px 0px; display:flex; justify-content:flex-start; align-items: center; flex-direction:column; position:relative; z-index:1; }
.syf-title i img{ max-width:100%; }
.syf-main-swiper{ width:100%; padding:40px 0px 0px; position:relative; }
.fuone{ width:100%; display:flex; flex-direction:column; transition:all 0.3s;-webkit-transition:all 0.3s;-moz-transition:all 0.3s;}
.fuimg{ width:100%; display:flex; flex-direction:column; position:relative; overflow:hidden; border-radius:30px; }
.fuimg i{ position:absolute; right: 20px; top:20px; width:45px; height:45px; border-radius: 360px; background-color:#FFF; display:flex; justify-content:center; align-items:center; flex-direction:column; background-repeat:no-repeat; background-position:center; background-size:20px; background-image:url(../../uploads/svg-loaders/r-right.svg); }
.fuimg p{ position:absolute; left:20px; bottom:20px; padding:10px 15px; background-color:#f4f4f4; border-radius:15px; font-size:1rem; color:#000; }
.syf-main-swiper .swiper-slide{ width:550px!important; margin-right:70px;}
.funame{ width:100%; display:flex; flex-direction:column; padding:20px 0px; }
.funame h1{ font-size:1.125rem; color:#000000; padding:8px 0px; }
.funame p{ font-size:1rem; color:#5b5b5b; padding:8px 0px; }
.fone-swiper-button-prev { position:absolute; left:-70px; top:calc(50% - 35px); transform: translateY(-50%); background: url(../../uploads/svg-loaders/l-left.svg) center center no-repeat #FFF; border-radius: 360px; cursor:pointer; background-size:50%; width:45px; height:45px; z-index: 99; transition: 0.6s;-webkit-transition: 0.6s;-moz-transition: 0.6s;}
.fone-swiper-button-prev:hover { width:45px; height:45px; background: url(../../uploads/svg-loaders/l-lefth.svg) center center no-repeat #000; background-size:50%; transition: 0.6s;-webkit-transition: 0.6s;-moz-transition: 0.6s;}
.fone-swiper-button-next { position:absolute; cursor:pointer; left:-70px; top:calc(50% + 35px);  transform: translateY(-50%); background: url(../../uploads/svg-loaders/r-right.svg) center center no-repeat #FFF;  border-radius: 360px; background-size:50%; width:45px; height:45px; z-index: 99; transition: 0.6s;-webkit-transition: 0.6s;-moz-transition: 0.6s;}
.fone-swiper-button-next:hover {width:45px; height:45px; background: url(../../uploads/svg-loaders/r-righth.svg) center center no-repeat #000; background-size:50%; transition: 0.6s;-webkit-transition: 0.6s;-moz-transition: 0.6s;}
.fuone:hover .fuimg i{ background-color:#000; background-image:url(../../uploads/svg-loaders/r-righth.svg); background-size:20px;}
.fuone:hover .fuimg p{ background-color:#000; color:#ffffff; }

@media (max-width: 1430px) {

}

@media (max-width: 1330px) {

}

@media (max-width: 1230px) {
.thoner-info{ width:100%; padding:0px 15px; }
.thoner-info h1 {font-size:2rem;padding:5px 0px;}
.syf-main{  padding:70px 0px 50px 50px; }
}

/*ipad*/
@media (min-width: 768px) and (max-width: 991px) {
.syf-main-swiper .swiper-slide{ width:400px!important; margin-right:30px;}
}
/* xs */
@media (max-width: 767px) {
/*-- --*/
.bannerbox{ width:100%; height:370px; padding: 0;}
.banwords{ top:calc(45% - 50px); bottom: 13%;}
.banwords h1{ width:100%; font-size:1.5rem; text-align:left; }
.banwords p{ width:100%; font-size:1.1rem; padding:5px 0px; text-align:left}
.banwords button{ font-size:0.9rem; margin-top:20px; padding:3px 10px; }
.banwords button i{ margin-left:5px; width:30px;background-size:70%;}
.ban-swiper-pagination{bottom:20px!important; }
.ban-swiper-pagination .swiper-pagination-bullet { width:35px; height:6px; }
.ban-swiper-pagination .swiper-pagination-bullet-active {}

.syone{ padding:40px 0px;}
.syone::before{ height:60px;}
.symain{ flex-direction:column; } 
.syonel{ width:auto; }
.syonel div{ width:auto; display:inline-block; }
.syonel div h2{ font-size:1.5rem; font-weight:300; padding-right:30px; display:inline-block;}
.syonel div h2::before{ top:-15px; width:25px; height:25px; background-size:20px; }
.syonel div h1{ font-size:1.5rem; padding:10px 0px; }
.syonel div p{ padding:10px 0px 30px; }
.syonel div p::before{ width:60px; height:4px;  }
.syoner{ width:100%; justify-content:center; align-items:center; padding:20px 0px; }

.sytwo-title{ width:100%; gap:20px; }
.sytwo-title h1{ font-size:1.5rem; }
.sytwo-title p{ font-size:1.05rem; }
.sytwo-info{ padding:30px 0px;}
.sytwo-imgbox, .sytwo-imgbox a{ border-radius:15px; }
.sytwo-logo{ width:45px; height:45px; left:10px; top:15px; visibility:visible; opacity:1}
.sytwo-logo img{ width:30px; }
.sytwo-img img{max-height:300px; }
.sytwo-name{ font-size:0.85rem; min-height:35px; visibility:visible; opacity:1; bottom:15px;}
.sytwo-prev-next{ padding:10px 0px; gap:0px 30px; }
.sytwo-swiper-button-prev { width:35px; height:35px;}
.sytwo-swiper-button-prev:hover { width:35px; height:35px;}
.sytwo-swiper-button-next { width:35px; height:35px;}
.sytwo-swiper-button-next:hover {width:35px; height:35px;}
.sytwo-btn a{ width:120px; height:40px; }

.sythree{ gap:30px 0px; padding:30px 15px 50px;}
.thone{ flex-direction:column; }
.thonel{ width:100%; }
.thonel img{ max-width:100%; }
.thoner{ width:100%; padding:10px 0px;}
.thoner-info{ width:100%; justify-content:flex-start; align-items:flex-start; text-align:left; padding: 0;} 
.thoner-info h1{ font-size:1.3rem; }
.thoner-info p{ font-size:0.9rem; padding: 0px;}
.thoner-info a{ width:120px; height:35px; margin-top:15px; font-size: 0.85rem;}
.thone.two{ flex-direction:column; }

.syf-main{ width:calc(100% - 70px); padding:50px 15px; margin-bottom:50px; }
.syf-main-title{ justify-content: flex-start; align-items: flex-start; flex-direction:column; padding-right:0px;}
.syf-main-title div h1{ font-size:1.5rem; padding:5px 0px;}
.syf-main-title div p{ font-size:1rem; padding:5px 0px 20px;}
.syf-main-title a{ width:120px; height:35px; padding:0px 10px; font-size: 0.85rem;}
.fbg{ width:50%; height:calc(100% - 70px); }
.syf-title{ width:100px; padding:20% 10px 0px;  }
.syf-main-swiper{ padding:30px 0px 0px; }
.fuimg{ border-radius:15px; }
.fuimg i{ width:35px; height:35px; background-size:15px; }
.fuimg p{ padding:5px 10px; font-size:0.95rem; }
.syf-main-swiper .swiper-slide{ width:230px!important; margin-right:10px;}
.funame{ width:100%; display:flex; flex-direction:column; padding:20px 0px; }
.funame h1{ font-size:1rem; padding:5px 0px; }
.funame p{ font-size:0.85rem; padding:5px 0px; }
.fone-swiper-button-prev { left:0px; top:102%; width:35px; height:35px;}
.fone-swiper-button-prev:hover { width:35px; height:35px; }
.fone-swiper-button-next { left:45px; top:102%; width:35px; height:35px;}
.fone-swiper-button-next:hover {width:35px; height:35px;}

}

@media (max-width: 480px) {
.bannerbox{ width:100%; height:250px;}
}