/*-- --*/
.bannerbox{ width:100%; height:100vh; float: left; position: relative; background-color:#d0d0d0;}
.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; overflow: hidden;}
.banwords{ position: absolute; right:0%; top:37%; width:100%; height:auto; display: flex; justify-content:center; align-items:flex-start; padding: 20px; 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 { width:200px; height: 50px; font-size:1.1rem; line-height: 1.5; background-color: #9aa9ca; border-radius: 30px; display: flex; justify-content: center; align-items: center; text-align: center; color:#FFF; border: 0; margin-top:80px; 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; }
.banwords button:hover i{ } 
.banwords button.button--isi::before { background:#00a0e9;}
.banwords button:hover{ color:#000; background-color:#FFF; }
.ban-m{width:100%; display: flex; justify-content: flex-end;}
.ban-m a{ display:inline-block; }
.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:45px; height:7px; 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;}
.swipera .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; }
.smallbox{ width:100%; position:absolute; left:0; bottom:60px; background-color:#000; }
.swiperb{ width:100%; overflow:hidden; }
.choosebox{ width:100%; height:100px; display:flex; justify-content: center; align-items: center; flex-direction:column; position: relative; gap:10px; color: #FFF; cursor:pointer;}
.choosebox::before{ content:''; position:absolute; left:0; bottom:0; width:100%; height:3px; background-color:#FFF;opacity:0.7; }
.swiperb .swiper-slide-thumb-active .choosebox::after{ content:''; position:absolute; left:0; bottom:0; width:100%; height:100%; background-color:#fb7307; opacity:0.5; }
.choosebox h1{ font-size:1.25rem; position: relative; z-index: 1;}
.choosebox p{ font-size:1rem; position: relative; z-index: 1;}
.banner-swiper-button-prev{ position: absolute; left:0px; top:45%; transform: translateY(-50%); background: url(../../uploads/svg-loaders/back-big-left.svg) center center no-repeat; background-size:100%; width:50px; height:50px; z-index: 99; }
.banner-swiper-button-next{ position: absolute; right: 0; top:45%; transform: translateY(-50%); background: url(../../uploads/svg-loaders/back-big-right.svg) center center no-repeat; background-size:100%;width:50px; height:50px; z-index: 99; }

/*-- --*/
.bigbox{ width:100%; display:flex; flex-direction:column; }
.syone{ width:100%; min-height:1000px; background-color:#efefef; background-repeat:no-repeat; background-position:center; background-size:cover; display:flex; flex-direction:row; padding-top:90px; }
.syonel{ width:42%; }
.swiperOneA{ width:100%; overflow:hidden; }
.swiperOneA .swiper-slide i{ width:100%; height:900px; position: relative; display: block; overflow: hidden; -webkit-transition:all 0.5s;-moz-transition:all 0.5s;transition:all 0.5s;}
.swiperOneA .swiper-slide i img{ width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; position: absolute; top: 50%;left: 50%; transform: translate(-50%, -50%); max-width: 100%; -webkit-transition:all 0.5s;-moz-transition:all 0.5s;transition:all 0.5s;}
.one-swiper-button-prev{ position: absolute; right:90px; bottom:0px; background: url(../../uploads/svg-loaders/h-back-big-left.svg) center center no-repeat #FFF; background-size:20px; width:90px; height:70px; z-index: 99; outline:none; }
.one-swiper-button-next{ position: absolute; right:0px; bottom:0px; background: url(../../uploads/svg-loaders/h-back-big-right.svg) center center no-repeat #fb7307; background-size:20px; width:90px; height:70px; z-index: 99; outline:none;}

.syoner{ width:58%; padding:0px 0px 60px 50px; display:flex; flex-direction:column; justify-content:space-between;}
.syoner-a{ width:100%; display:flex; flex-direction:column; padding-left:50px; }
.syoner-header{ width:100%; display:flex; justify-content:space-between; align-items:center; flex-direction:row; position: relative; padding:80px 28% 0px 0px; margin-top: 60px;}
.syoner-header i{ position:absolute; left: 0; top: 0;}
.syoner-header i img{ max-width:100%; }
.syoner-header h1{ font-size:2.3rem; color:#000; position:relative; z-index:1; }
.syoner-header a{ width:140px; height:50px; font-size: 1rem; background-color:#fb7307; color:#FFF; border-radius:30px; display:flex; justify-content:center; align-items:center; text-align:center; -webkit-transition:all 0.6s;-moz-transition:all 0.6s;transition:all 0.6s; position:relative; z-index:1;}
.syoner-header a:hover{ background-color:#242424; }
.syoner-aa{ width:100%; height:300px; margin-top:50px; }
.swiperOneB{ width:100%; height:100%; padding-left:40px;}
.swiperOneB .swiper-slide p{ font-size:1.2rem; color:#757575; position:relative; display:flex; align-items:center; padding:0px 30px; cursor:pointer; }
.swiperOneB .swiper-slide-thumb-active p{ color:#fb7307; }
.swiperOneB .swiper-slide-thumb-active p::before{ content:''; position:absolute; left:-40px; top:43%; width:50px; height:4px; background-color:#fb7307; }

.syoner-b{ width:100%; }
.swiperOneC .swiper-slide{ width:380px; margin-right:30px; border:2px solid #FFF;}
.swiperOneC .swiper-slide i{ width:100%; }
.swiperOneC .swiper-slide i img{ width:100%; }
.swiperOneC .swiper-slide p{ position:absolute; left:0; bottom:0; width:100%; height:50px; text-align:center; display:flex; justify-content:center; align-items:center; font-size: 1rem; color:#ffffff; }
.swiperOneC .swiper-slide p::before{ content:''; position:absolute; left:0; bottom:0; width:100%; height:100%; background-color:#000; opacity:0.3; }
.swiperOneC .swiper-slide p span{ position:relative; z-index:1; }

/*-- sytwo --*/
.sytwo{ width:100%; display: flex; padding: 110px 0px 50px;}
.sytwo-header{ width:100%; display:flex; justify-content:space-between; align-items:flex-start; gap:10px;}
.two-hl{ display:flex; flex-direction:column; }
.two-hl h1{ font-size:2rem; color:#000;  }
.two-hl p{ font-size:1.18rem; color:#909090; padding-top:5px; }
.sytwo-header a{ width:135px; height:50px; background-color:#fb7307; border-radius:60px; display:flex; justify-content:center; align-items:center; color:#FFF; -webkit-transition:all 0.6s;-moz-transition:all 0.6s;transition:all 0.6s;}
.sytwo-header a:hover{ background-color:#242424; }
.sytwo-content{ width:100%; padding:30px 0px; }
.two-a{ width:100%; display:flex; position:relative; border-radius:10px; overflow:hidden; }
.two-a i{ width:100%; display:flex; }
.two-a i>img{ width:100%; -webkit-transition:all 0.6s;-moz-transition:all 0.6s;transition:all 0.6s;}
.two-a div{ width: 100%; height: 100%; position:absolute; left:0; top:0; display: flex; flex-direction:column; justify-content: center; align-items: center; padding:10px; gap:30px; }
.two-a div>img{ max-width:100%; }
.two-a div p{ font-size:1.2rem; color:#FFF; }
.two-a:hover i>img{-webkit-transform: scale(1.05);-moz-transform: scale(1.05);transform: scale(1.05);}

/*-- syth --*/
.syth{ width:100%; min-height:870px; display:flex; background-repeat:no-repeat; background-color:#000; background-position:center; background-size:cover; position:relative; overflow:hidden;}
.float-img{ position:absolute; right:0; top:0; animation-name: customSlideInRight; height:100%; }
.float-img img{ max-width:100%; height:100%; }
.syth-main{ width:100%; height: 100%; display:flex; flex-direction:column; padding:50px 0px; justify-content: center; }
.syth-content{ width:650px; display:flex; flex-direction:column; gap:40px; position:relative; z-index:1; }
.syth-content h1{ font-size:2.4rem; font-weight:600; color:#FFF; }
.syth-content p{ font-size:1rem; color:#FFF; line-height:2; }
.syth-num{ width:930px; display:flex; justify-content: space-between; align-items: flex-start; flex-direction:row; gap: 10px; padding:60px 0px; position: relative; z-index: 1}
.num-one{ display:flex; justify-content:center; align-items: center; flex-direction:column; text-align:center;}
.num-one h1{ position: relative; color:#ffffff; }
.num-one h1 span{ text-align: center; font-size:3.3rem; font-weight:bold; cursor: pointer; color:#fb7307;}
.num-one h1 i{ font-size:1.125rem; font-weight: normal;  color:#fb7307; font-style: normal; }
.num-one h1 i.isecond{ font-size:3rem; font-weight:bold;}
.num-one p{ font-size:0.95rem; color:#ffffff; line-height: 1.5; padding: 7px 0px; font-weight: normal;}
.syth-main a{ width:180px; height:60px; font-size: 1rem; background-color:#ffffff; color:#fb7307;border-radius:30px; display:flex; justify-content:center; align-items:center; text-align:center; -webkit-transition:all 0.6s;-moz-transition:all 0.6s;transition:all 0.6s; position: relative; z-index: 1;}
.syth-main a:hover{ background-color:#fb7307; color:#FFF; -webkit-transition:all 0.6s;-moz-transition:all 0.6s;transition:all 0.6s;}

/*-- syfo --*/
.syfo{ width:100%;  padding:85px 0px 120px; position:relative; }
.syfol{ width:690px; height:890px; position:absolute; left: 0; top:85px; overflow: hidden; display:flex; flex-shrink:0; flex-direction:column; justify-content:space-between; padding:50px 25px 60px 13%; background-color:#d0d0d0; background-image:url(../../uploads/page/simg.jpg); background-repeat:no-repeat; background-position:right bottom; }
.syfol-img{ position:absolute; left:0; top:0; }
.syfol-img img{ max-width:100%; }
.syfol-header{ display:flex; flex-direction:column; gap:10px; padding-right:150px; }
.syfol-header h1{ font-size:2.4rem; }
.syfol-header p{ font-size:1.18rem; color:#909090; }
.syfol a{ width:180px; height:60px; font-size: 1rem; background-color:#ffffff; color:#fb7307;border-radius:30px; display:flex; justify-content:center; align-items:center; text-align:center; -webkit-transition:all 0.6s;-moz-transition:all 0.6s;transition:all 0.6s;}
.syfol a:hover{ background-color:#fb7307; color:#FFF; -webkit-transition:all 0.6s;-moz-transition:all 0.6s;transition:all 0.6s;}
.syfor{ width:calc(100% - 540px); position: relative; z-index: 1; float: left; margin-left: 540px;}
.sfour{ width:100%; padding:120px 0px 40px;}
.sfour .swiper-slide{ width:500px!important; margin-right:30px;}
.sfour .swiper-slide:nth-child(odd) .fosbox{transform: translateY(40px); }
.sfour .swiper-slide:nth-child(even) .fosbox{transform: translateY(-40px); }
.fosbox{ width:100%; display:flex; justify-content:center; align-items:center; flex-direction:column; position:relative;}
.fosbox a{ width:100%; display:flex; justify-content:center; align-items:center; flex-direction:column; position:relative;}
.fosbox i{ width:100%; height: 670px; position: relative; display: block; overflow: hidden; -webkit-transition:all 0.5s;-moz-transition:all 0.5s;transition:all 0.5s;}
.fosbox i img{ width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; position: absolute; top: 50%;left: 50%; transform: translate(-50%, -50%); max-width: 100%; -webkit-transition:all 0.5s;-moz-transition:all 0.5s;transition:all 0.5s;}
.sfour .fos-content{ width:100%; position:absolute; left:0; bottom:0; display:flex; justify-content:space-between; flex-direction:row; padding: 20px;}
.sfour .fos-content::before{ content:''; position:absolute; left:0; bottom:0; width:100%; height:100%; background-color:#000; opacity:0.5; }
.sfour .fos-name{ display:flex; flex-direction:column; justify-content:flex-start; gap:5px; position:relative; z-index:1; }
.sfour .fos-name p{ font-size:1rem; color:#FFF; }
.sfour .fos-ico{ display:flex; position:relative; z-index:1;}
.sfour .fos-ico svg{ width:45px; }
.fosbox:hover .fos-content::before{ background-color:#fb7307; opacity:0.9; }

@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; } }

@media (max-width: 1650px) {
.float-img{ right:-200px;  }
}

@media (max-width: 1450px) {
/*-- syfo --*/
.syfol-header{ padding-right:50px; }
.syfor{ width:calc(100% - 400px); margin-left: 400px;}
.sfour{  padding:180px 0px 40px;}
.sfour .swiper-slide{ width:420px!important; margin-right:25px;}
.sfour .swiper-slide:nth-child(odd) .fosbox{transform: translateY(20px); }
.sfour .swiper-slide:nth-child(even) .fosbox{transform: translateY(-20px); }
.fosbox i{ height:600px; }
.syoner-header{ padding:40px 20% 0px 0px; margin-top:40px;}
.syoner-header h1{ font-size:2rem; }
.syoner-header a{ width:120px; height:40px; }
.syoner-aa{ height:250px; margin-top:30px; }
.syone{ min-height:700px; }
.swiperOneA .swiper-slide i{ height:750px;}
.one-swiper-button-prev{ right:80px; width:80px; height:60px; }
.one-swiper-button-next{ width:80px; height:60px; }
.swiperOneC .swiper-slide{ width:280px; margin-right:25px;}

}

@media (max-width: 1330px) {
.float-img{ right:-300px;  }
}

@media (max-width: 1230px) {
.syth{ min-height:800px; }
.syth-num{ width:100%; }
.num-one{ width:calc(30% - 15px); position:relative; padding:10px;}
.num-one::before{ content:''; position:absolute; left:0; top:0; width:100%; height:100%; background-color:#ffffff; opacity:0.5;  border-radius:5px; }
}

@media (max-width: 1080px) {
.syone{ min-height:700px; padding-top:70px; }
.syonel{ width:45%; }
.swiperOneA .swiper-slide i{ height:650px;}
.one-swiper-button-prev{ right:80px; width:80px; height:60px; }
.one-swiper-button-next{ width:80px; height:60px; }
.syoner{ width:55%; padding:0px 0px 40px 30px;}
.syoner-a{ padding-left:30px; }
.syoner-header{ padding:40px 15% 0px 0px; margin-top:30px;}
.syoner-header h1{ font-size:2rem; }
.syoner-header a{ width:120px; height:40px; }
.syoner-aa{ height:200px; margin-top:30px; }
.swiperOneB{ padding-left:30px;}
.swiperOneB .swiper-slide p{ font-size:1.15rem; padding:0px 20px; }
.swiperOneB .swiper-slide-thumb-active p::before{ left:-30px; top:43%; width:40px; height: 3px;}
.swiperOneC .swiper-slide{ width:280px; margin-right:25px;}
}

/*ipad*/
@media (min-width: 768px) and (max-width: 991px) {
.syth{ min-height:700px; }

/*-- syfo --*/
.syfo{  padding:85px 0px 180px; }
.syfol{ width:690px; height:800px; top:85px; }
.syfol-header{ padding-right:150px; }
.syfol-header h1{ font-size:2.2rem; }
.syfol-header p{ font-size:1.10rem; }
.syfol a{ width:160px; height:50px; }
.syfol-img img{ max-width:70%; }
.syfor{ width:calc(100% - 170px); margin-left:170px;}
.sfour{  padding:160px 0px 40px;}
.sfour .swiper-slide{ width:300px!important; margin-right:20px;}
.sfour .swiper-slide:nth-child(odd) .fosbox{transform: translateY(30px); }
.sfour .swiper-slide:nth-child(even) .fosbox{transform: translateY(-30px); }
.fosbox i{height:450px;}

}
/* xs */
@media (max-width: 767px) {
.plra15{ padding:5px; }
.bannerbox{ height:450px; }
.banwords{ top:30%; }
.smallbox{ bottom:10px; }
.ban-m a{ display:flex; justify-content:flex-end; }
.banwords img{ max-width:65%;}
.choosebox{ height:80px; gap:0px;}
.choosebox h1{ font-size:1rem;}
.choosebox p{ font-size:0.9rem; }
.banner-swiper-button-prev{ width:40px; height:40px;  }
.banner-swiper-button-next{ width:40px; height:40px; }
.syone{ min-height:auto; flex-direction:column-reverse; padding:15px; }
.syonel{ width:100%; }
.swiperOneA .swiper-slide i{ width:100%; height:350px;}
.one-swiper-button-prev{ right:60px; width:60px; height:50px;}
.one-swiper-button-next{ width:60px; height:50px; }
.syoner{ width:100%; padding:0; }
.syoner-a{ padding-left:0px; }
.syoner-header{ padding:40px 0px 0px; margin-top:20px;}
.syoner-header i img{ max-width:80%; }
.syoner-header h1{ font-size:1.4rem; }
.syoner-header a{ width:90px; height:35px; font-size:0.9rem;}
.syoner-aa{ height:auto; margin-top:15px; }
.swiperOneB{ height:auto; padding:10px 0px;}
.swiperOneB .swiper-slide{ max-width:100px; border:1px solid #000; background-color: #FFF; border-radius:5px;}
.swiperOneB .swiper-slide p{ width:100%; height:40px; display:flex; justify-content: center; align-items: center; text-align:center; font-size:1rem; padding:0px 5px; }
.swiperOneB .swiper-slide-thumb-active{ border:1px solid #fb7307; background-color: #FFF; border-radius:5px;  }
.swiperOneB .swiper-slide-thumb-active p::before{ display:none; }
.syoner-b{ padding:10px 0px; }
.swiperOneC .swiper-slide{ width:130px; margin-right:10px; }
.swiperOneC .swiper-slide p{ height:25px; font-size:0.8rem; }

/*-- sytwo --*/
.sytwo{ padding:50px 0px 20px;}
.two-hl h1{ font-size:1.4rem; }
.two-hl p{ font-size:1rem; }
.sytwo-header a{ width:90px; height:35px; }
.sytwo-content{ padding:15px 10px; }
.two-a div{ padding:10px; gap:10px; }
.two-a div>img{ width:50px; }
.two-a div p{ font-size:1rem; text-align:center; }

/*-- syth --*/
.syth{ min-height:300px;}
.float-img{ right:-300px;  }

.syth-main{  padding:50px 0px; justify-content: center; }
.syth-content{ width:100%; gap:30px;  }
.syth-content h1{ font-size:1.45rem; }
.syth-content p{ font-size:1.05rem; line-height:1.8; }
.syth-num{ width:100%; flex-wrap: wrap; gap:10px; padding:30px 0px;}
.num-one{ width:calc(50% - 10px); min-height:120px;}
.num-one h1 span{ font-size:2rem; }
.num-one h1 i{ font-size:0.95rem; }
.num-one h1 i.isecond{ font-size:2rem; }
.num-one p{ font-size:0.95rem; }
.syth-main a{ width:120px; height:50px;}

/*-- syfo --*/
.syfo{ width:100%; padding:50px 0px 120px; }
.syfol{ width:300px; height:520px; padding:50px 0px 30px 90px; background-size:250px; top:50px; }
.syfol-img img{ width:70px; }
.syfol-header{  padding-right:20px; }
.syfol-header h1{ font-size:1.45rem; }
.syfol-header p{ font-size:1rem; }
.syfol a{ width:120px; height:45px; font-size: 0.95rem; }

.syfor{ width:100%; margin-left:0px;}
.sfour{ width:100%; padding:160px 10px 40px;}
.sfour .swiper-slide{ width:180px!important; margin-right:15px;}
.sfour .swiper-slide:nth-child(odd) .fosbox{transform: translateY(15px); }
.sfour .swiper-slide:nth-child(even) .fosbox{transform: translateY(-15px); }
.fosbox i{ height:250px;}
.sfour .fos-content{ padding: 10px;}
.sfour .fos-name p{ font-size:0.85rem; }
.sfour .fos-ico svg{ width:25px; }

}

@media (max-width: 480px) {
.bannerbox{ height:320px; }
.banwords img{ max-width:85%;}
.choosebox{ height:60px;}
.choosebox h1{ font-size:0.95rem;}
.choosebox p{ font-size:0.8rem; }

.syoner-header{ padding:20px 0px 0px;}
.swiperOneA .swiper-slide i{ height:220px; }
.one-swiper-button-prev{ right:50px; width:50px; height:40px;}
.one-swiper-button-next{ width:50px; height:40px; }

.two-a div>img{ width:40px; margin-top:15px; }
.two-a div p{ font-size:0.9rem; }

}