/*-- --*/
.bannerbox{ width:100%; height:100vh; float: left; position: relative; background-color:#000;}
.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:23%; 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 { 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-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;}
.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%; display:flex; flex-direction:column; }
.syone-a{ width:100%; }
.symain{ width:100%; padding: 90px 0px; display:flex; justify-content: space-between; flex-direction: row;}
.syone-a a{ width:135px; height:45px; font-size: 1rem; border:1px solid #000000; border-radius:30px; display:flex; justify-content:center; align-items: center; flex-direction:column; flex-shrink:0; -webkit-transition:0.6s;-moz-transition:0.6s;transition:0.6s;}
.syone-a a:hover{ background-color:#9aa9ca; color:#FFF; border:1px solid #9aa9ca; }
.syone-a p{ width:100%; min-height:170px; padding-left:10%; font-size:1.6rem; font-weight:600; }

.syone-b{ width:100%; display:flex; flex-direction:row; padding-left:13.5%; }
.ob-swiper{ width:55%; position:relative; background-color:#fafafa; }
.ob-swiper .swiper-slide{ width:100%; }
.ob-swiper .swiper-slide img{ width:100%; }
.one-swiper-pagination { position: absolute; bottom:20px!important; left:auto!important; right:40px; text-align: right; z-index: 1; }
.one-swiper-pagination .swiper-pagination-bullet {width: 28px; height: 28px; font-weight:600; text-align: center; border: 2px solid #FFF; border-radius: 0; background: transparent; color: #000; font-size:1rem; display: inline-flex; justify-content: center; align-items: center; color:#FFF; opacity: 1; transition: all 0.3s; }
.one-swiper-pagination .swiper-pagination-bullet-active {color: #000; background-color: #ffffff; }
.ob-content{ width:100%; padding: 20px 8% 20px 5%; background-color: #fafafa; display: flex; justify-content: center;  flex-direction:column; gap:20px 0px;}
.ob-content h1{ font-size:1.875rem; font-weight:600; color:#000; }
.ob-content p{ font-size: 1.125rem; color:#000; }
.ob-content a{ width:150px; height: 50px; border-radius: 30px; margin-top:35px; background-color:transparent; display:flex; justify-content:flex-start; align-items: center; flex-direction:row; -webkit-transition:0.6s;-moz-transition:0.6s;transition:0.6s;}
.ob-content a span{ height:30px; font-size:1rem; color:#000; display:flex; justify-content:center; align-items:flex-end; -webkit-transition:0.6s;-moz-transition:0.6s;transition:0.6s;}
.ob-content a i{ width:30px; height:30px; background-size:22px; background-repeat:no-repeat; background-image:url(../../uploads/page/1.png); background-position:center; -webkit-transition:0.6s;-moz-transition:0.6s;transition:0.6s;}
.ob-content a:hover { background-color: #9aa9ca; justify-content:center; -webkit-transition:0.6s;-moz-transition:0.6s;transition:0.6s; }
.ob-content a:hover span{ color:#FFF; -webkit-transition:0.6s;-moz-transition:0.6s;transition:0.6s;}
.ob-content a:hover i{ background-size:22px; background-image:url(../../uploads/page/2.png); -webkit-transition:0.6s;-moz-transition:0.6s;transition:0.6s}

.sytwo{ width:100%; min-height:730px; overflow: hidden; background-repeat:no-repeat; background-color:#0a0a0a; background-position:center; background-size:cover; background-attachment:fixed; margin-top:100px; display:flex; justify-content:center; align-items: center; flex-direction:column; padding:30px; gap:50px 0px; }
.sytwo p{ width:1000px; font-size:2.3rem; font-weight:600; color:#FFF; line-height:1.5; text-align:center; }
.sytwo a{ width:150px; height: 50px; border-radius: 30px; font-size:0.95rem; margin-top: 50px; background-color:transparent; display:flex; justify-content:center; align-items: center; flex-direction:row; -webkit-transition:0.6s;-moz-transition:0.6s;transition:0.6s;}
.sytwo a span{ height:30px; font-size:0.95rem; color:#FFF; display:flex; justify-content:center; align-items:flex-end; -webkit-transition:0.6s;-moz-transition:0.6s;transition:0.6s;}
.sytwo a i{ width:30px; height:30px; background-size:22px; background-repeat:no-repeat; background-image:url(../../uploads/page/2.png); background-position:center; -webkit-transition:0.6s;-moz-transition:0.6s;transition:0.6s;}
.sytwo a:hover { background-color: #9aa9ca; -webkit-transition:0.6s;-moz-transition:0.6s;transition:0.6s;}

.syth{ width:100%; display:flex; padding:100px 0px 120px; }
.syth-main{ width:100%; display:flex; flex-direction:row; justify-content: center; align-items:center; }
.syth-main i{ width:50%; height:560px; background-color:#9aa9ca; position: relative; display: block; overflow: hidden; -webkit-transition:all 0.5s;-moz-transition:all 0.5s;transition:all 0.5s; animation-name: customSlideInLeft;}
.syth-main 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;}
.th-content{ width:50%; padding:20px 8% 20px 6%; display:flex; justify-content:center; align-items:flex-start; flex-direction:column; gap: 30px 0px; animation-name: customSlideInRight; }
.th-content h1{ font-size:1.6rem; color:#000; }
.th-content p{ font-size:1.5rem; color:#000; }
@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) {
.syone-b{ padding-left:5%; }
}

@media (max-width: 1450px) {
.syone-b{ padding-left:0; }
}

@media (max-width: 1330px) {

}

@media (max-width: 1230px) {
.banwords img{ max-width:70%!important; }
.symain{ padding:70px 0px;}
.syone-a p{ padding-left:6%; font-size:1.5rem;}
.syone-b{ padding-left:0; }
.ob-swiper{ width:65%;}
.ob-content{ padding: 20px 30px;}
.ob-content h1{ font-size:1.7rem; }
.ob-content p{ font-size: 1.1rem; }
.ob-content a{ margin-top:0px; }
}

@media (max-width: 1080px) {
.sytwo p{ width:100%; }
.syone-a p{ font-size:1.35rem; }
.ob-content p{ font-size:0.97rem; }

}

/*ipad*/
@media (min-width: 768px) and (max-width: 991px) {
.banwords img{ max-width:60%!important; }
.syone-a p{ padding-left:3%; font-size:1.35rem;}
.ob-swiper{ width:100%; }
.syone-b{ padding-left:0; flex-direction:column; }
.sytwo{ min-height:600px;}

.syth-main i{ height:450px;}
.th-content{ padding:20px 30px; gap:20px 0px; }
}
/* xs */
@media (max-width: 767px) {
/*-- --*/
.bannerbox{ width:100%; height:400px; 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 img{ width:75%; }
.banwords button{ width:130px; font-size:0.85rem; margin-top:20px; height:40px; padding:0px 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 {}

/*-- --*/
.symain{ padding:35px 0px; justify-content:flex-start; flex-direction:column-reverse;}
.syone-a a{ width:120px; height:40px; font-size:0.95rem; margin-top: 20px;}
.syone-a p{ min-height:auto; padding-left:0; font-size:1.05rem; }

.syone-b{ padding-left:0; flex-direction:column; }
.ob-swiper{ width:100%; }
.one-swiper-pagination { bottom:20px!important; right:20px; }
.one-swiper-pagination .swiper-pagination-bullet {width: 25px; height: 25px; font-size:0.85rem; }
.ob-content{ width:100%; padding:20px 15px; gap:20px 0px;}
.ob-content h1{ font-size:1.25rem; }
.ob-content p{ font-size: 1.05rem; }
.ob-content a{ width:120px; height:40px; margin-top:0px; }
.ob-content a i{ background-size:18px; }
.ob-content a:hover i{ background-size:18px;}

.sytwo{ min-height:430px; margin-top:40px; padding:30px 20px; gap:10px 0px; }
.sytwo p{ font-size:1.25rem; }
.sytwo a{ width:120px; height:40px; margin-top:20px; }
.sytwo a i{ background-size:18px; }

.syth{ padding:40px 0px; }
.syth-main{ flex-direction:column; }
.syth-main i{ width:100%; height:350px;}
.th-content{ width:100%; padding:30px 0px; gap: 15px;}
.th-content h1{ font-size:1.25rem; }
.th-content p{ font-size:1.05rem; }
}

@media (max-width: 480px) {
.bannerbox{ width:100%; height:270px;}
.sytwo{ min-height:370px;}
.syth-main i{ height:250px;}
}