/*-- --*/
.bannerbox{ width:100%; height:auto; overflow: hidden; float: left; position: relative; background-color:#000; font-family:system-ui,sans-serif; }
.bannerbox .swiper{ width:100%; height:auto;}
.bannerbox .swiper-wrapper{height:auto!important;}
.bannerbox .swiper-slide{ width:100%!important; height:auto!important; 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; top:calc(40% - 100px); width: 100%; height:auto; display: flex; justify-content:center; align-items:center; padding: 20px; flex-direction: column;}
.banwords h1{ font-size:3.75rem; text-align: center; font-weight: normal; color: #FFF; text-shadow: 2px 10px 4px rgba(0, 0, 0, 0.3);}
.banwords p{ font-size:1.625rem; text-align: center; color: #FFF; padding:10px 0px; text-shadow: 2px 10px 4px rgba(0, 0, 0, 0.3);}
.banwords img{ max-width:100%; }
.banwords button{ font-size:1rem; line-height: 1.5; background-color: #c19b88; display: flex; justify-content: center; align-items: center; text-align: center; color:#FFF; border: 0; margin-top:30px; padding:8px 30px; -webkit-transition:0.6s;-moz-transition:0.6s;transition:0.6s;}
.banwords button.button--isi::before { background:#000;}
.banwords button:hover{ color:#FFF; }
.ban-swiper-pagination{width: 100%; position: absolute; left: 0; bottom:30px!important; z-index: 1; display: flex; justify-content: center; align-items: center;}
.ban-swiper-pagination .swiper-pagination-bullet { width:10px; height:10px; opacity: 1; background-color: transparent; border: 2px solid #FFF; }
.ban-swiper-pagination .swiper-pagination-bullet-active { width:45px; border-radius:10px; 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; }
.bannerbox .goplay{ width:100%; height: 100%; position: absolute; left: 0; top:0; z-index: 1; display: flex; justify-content: center; align-items: center; flex-direction: column; }
.bannerbox .goplay i img{ width:80px; cursor: pointer;}
.bannerbox .swiper-slide video { width: 100%; object-fit: cover;}

.syone{width:100%;display:flex;flex-direction: column;}
.syone-t{ width:100%; padding:50px 0px 15px; }
.syone-t h1{ font-size:2.5rem; font-weight:600; padding-bottom:10px; }
.syone-t p{ font-size:1.25rem; font-weight:600; }
.syone-a{width:100%;display:flex;flex-direction: column;}
.onebox{ width:100%; display:flex; flex-direction:row; padding:35px 0px; }
.onebox.two{ flex-direction:row-reverse; }
.onebox.two .syone-w{ align-items:flex-start; padding:10px 16% 10px 45px;}
.onebox.two .syone-w h1::before{left:-80px; right: auto;}
.onebox.two .syone-w p{ text-align:left; }

.syone-w{flex: 1; display: flex; justify-content:center; align-items:flex-end; flex-direction: column; padding:10px 45px 10px 16%;}
.syone-w h1{ font-size:2.2rem; position: relative; text-align: right;}
.syone-w h1::before{content:''; position: absolute; right:-80px; top:17px; width:65px; height:4px; background-color:#907c6a; text-align: right;}
.syone-w h2{ font-size:2.1rem; padding:5px 0px; }
.syone-w p{ font-size:1.1rem; text-align:right; line-height: 1.8; padding:40px 0px 0px; }
.syone-w a{ font-size:1.1rem; color:#575757; margin-top:60px; -webkit-transition:0.6s;-moz-transition:0.6s;transition:0.6s;}
.syone-w a:hover{ text-decoration:underline!important;  color:#000;}
.syone-img{flex:3; display: flex; justify-content:flex-end;}
.syone-img img{width:100%;}
.onebox.maximg .syone-w{background-color: #907c6a;}
.onebox.maximg h1{color:#ffffff; text-align: left;}
.onebox.maximg h1::before{background-color:#ffffff;}
.onebox.maximg h2{color:#ffffff;}
.onebox.maximg p{color:#ffffff;}
.onebox.maximg a{color:#ffffff;}
.onebox.maximg img{max-width:100%; width: auto;}

.sytwo{width:100%;display:flex; height:100vh; overflow: hidden; background-attachment: fixed; background-size:cover; background-color:#8e8172; background-repeat: no-repeat; background-position: center;  flex-direction: column;justify-content: center; align-items: center; margin-top: 45px;}
.sytwo-box{ width:560px; display:flex; justify-content:center; align-items:center; flex-direction:column; padding:15px; text-align:center; color:#FFF; line-height:2; }
.sytwo-box h1{font-size: 3.4rem;}
.sytwo-box p{font-size: 1.1rem; padding: 40px 10%;}
.sytwo-box a{font-size: 1rem; border-bottom: 1px solid #FFF; padding:5px 0px; color:#FFF; -webkit-transition:0.6s;-moz-transition:0.6s;transition:0.6s;}
.sytwo-box a:hover{ background-color:#000; padding:5px 30px; border-bottom: 1px solid #000; }

.syth{ width:100%; display:flex; flex-direction:column; }
.syth .onebox.two .syone-w{ width:50%; flex:auto; }
.syth .onebox.two .syone-img{ width:50%; flex:auto; }
.syth .onebox.two img{width:100%;}

.syfo{ width:100%; display: flex; justify-content: space-between; align-items: center; flex-direction: row; padding-top: 20px; padding-bottom:80px;}
.syfo-a{ width:50%; height:600px; position:relative; background-position:center; background-repeat:no-repeat; background-size:cover; display: flex; justify-content:space-around; flex-direction: column; background-color: black; -webkit-transition:all .6s;-moz-transition:all .6s;transition:all .6s;}
.syfo-a.a1{ width:50%; margin-right:8px; }
.syfo-a.a2{ width:50%; margin-left:8px; }
.syfo-a.a1:hover{ width:70%;}
.syfo-a.a2:hover{ width:70%;}
.syfo-a a{ width:100%; height: 100%; display: flex; justify-content:center; align-items:center; }
.syfo-a div{ padding:15px; display: flex; justify-content:center; align-items:center; flex-direction:column; position:absolute; left:0; top:0; width:100%; height:100%; color: #FFF; line-height:1.6; }
.syfo-a div h1{ font-size:2.25rem; font-weight:normal; text-align: center;}
.syfo-a div h2{ font-size:2.25rem; font-weight:normal; text-align: center;}
.syfo-a div p{ font-size:1.1rem; color: #FFF; padding:30px 0px; text-align: center;}
.syfo-a div button{ font-size: 1.1rem; color: #ffffff; background-color: transparent; padding:5px 20px; -webkit-transition:all .6s;-moz-transition:all .6s;transition:all .6s; border:0;}
.syfo-a:hover button{background-color: #000; }

.video-background {
position:absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
overflow: hidden;
}

@media (max-width: 1430px) {
.onebox.two .syone-w{ align-items:flex-start; padding:10px 45px;}
.syone-w{padding:10px 45px;}
}

@media (max-width: 1230px) {
.syone-w h1{ font-size:2rem;}
.syone-w h2{ font-size:2rem; }
.syone-w p{ font-size:1rem; padding:30px 0px 0px; }
.syone-w a{ font-size:1rem; margin-top:50px;}

.syfo-a div h1{ font-size:2rem; }
.syfo-a div h2{ font-size:2rem; }
.syfo-a div p{ font-size:1rem;}
.syfo-a{ height:450px;}
}
/*ipad*/
@media (min-width: 768px) and (max-width: 991px) {
.syone-w h1{ font-size:1.8rem;}
.syone-w h2{ font-size:1.8rem; }
.syone-w p{ padding:20px 0px 0px; }
.syone-w a{ margin-top:40px;}
.syfo-a{ height:380px;}
}
/* xs */
@media (max-width: 767px) {
/*-- --*/
.bannerbox{ width:100%; height:auto; margin-top: 50px;}
.banwords{ top:calc(45% - 50px);}
.banwords h1{ font-size:1.85rem; }
.banwords p{ font-size:1.2rem; padding:10px 0px;}
.banwords button{ font-size:0.9rem; margin-top:25px; padding:8px 15px; }
.ban-swiper-pagination{bottom:20px!important; }
.ban-swiper-pagination .swiper-pagination-bullet { width:8px; height:8px;  }
.ban-swiper-pagination .swiper-pagination-bullet-active { width:35px;}
.bannerbox .goplay i img{ width:45px; }

.syone-t{ padding:30px 0px 10px; }
.syone-t h1{ font-size:1.42rem; }
.syone-t p{ font-size:1.05rem; }
.onebox{ flex-direction:column; padding:15px 0px; }
.onebox{ flex-direction:column-reverse; }
.onebox.two{ flex-direction:column-reverse; }
.onebox.two .syone-w{ align-items:flex-start; padding:15px;}
.onebox.two .syone-w h1::before{left:-50px; right: auto;}
.onebox.two .syone-w p{ text-align:left; }
.syone-w{ justify-content:flex-start; align-items:flex-start; padding:15px;}
.syone-w h1{ font-size:1.3rem; text-align:left; padding-left: 30px}
.syone-w h1::before{content:''; position: absolute; left:-50px; right: auto; top:7px; width:65px; height:4px; background-color:#907c6a; text-align: right;}
.syone-w h2{ font-size:1.2rem; padding-left: 30px }
.syone-w p{ font-size:1rem; text-align:left; padding:10px 0px; }
.syone-w a{ font-size:1rem; margin-top:10px;}
.syone-img{flex:1; justify-content:flex-start;}
.onebox.maximg img{ width:100%;}

.sytwo{ margin-top: 30px;}
.sytwo-box{ width:100%;}
.sytwo-box h1{font-size: 2.5rem;}
.sytwo-box p{font-size: 1.1rem; padding: 30px 0;}

.syth .onebox.two .syone-w{ width:100%; }
.syth .onebox.two .syone-img{ width:100%;}

.syfo{ flex-direction:column; padding-top:0px; padding-bottom:50px;}
.syfo-a{ width:100%; height:250px; margin-top:15px; }
.syfo-a.a1{ width:100%; margin-right:0; }
.syfo-a.a2{ width:100%; margin-left:0; }
.syfo-a.a1:hover{ width:100%;}
.syfo-a.a2:hover{ width:100%;}

.syfo-a div h1{ font-size:1.35rem; }
.syfo-a div h2{ font-size:1.35rem; }
.syfo-a div p{ font-size:1rem; padding:20px 0px; }
.syfo-a div button{ font-size: 1rem;}

}

@media (max-width: 480px) {
}