/*-- --*/
.bannerbox{ width:100%; height:100vh; position: relative; background-color:#132848;}
.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%; top:calc(50% - 150px); 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:center; flex-direction: column;}
.banwords h1{ font-size:2.8rem; text-align: center; color: #FFF; text-shadow: 2px 5px 4px rgba(0, 0, 0, 0.3); padding: 25px 0px;}
.banwords p{ font-size:2.2rem; text-align: center; color: #FFF;  text-shadow: 2px 5px 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:50px!important; z-index: 1; display: flex; justify-content: center; align-items: center;}
.ban-swiper-pagination .swiper-pagination-bullet { width:65px; height:10px; border-radius:1px; opacity: 1; background-color: transparent; border: 2px solid #FFF; }
.ban-swiper-pagination .swiper-pagination-bullet-active { width:65px; border-radius:1px; border-color:#ffcd33; background: #ffcd33;}
.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; }

.syone{ width:100%; display:flex; justify-content:flex-start;  flex-direction: row; background-color:#0f2341;}
.syone-img{ width:40%; }
.syone-img i{ width:100%; height: 100%; padding-top:120%; position: relative; display: block; overflow: hidden; background-color:#000000; -webkit-transition:all 0.5s;-moz-transition:all 0.5s;transition:all 0.5s;}
.syone-img 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;}
.syone-info{ width:60%; padding:75px 18% 50px 8%; color:#FFF; display:flex; flex-direction:column; justify-content:space-between; align-items:flex-start; }
.syone-info-a{ width:100%; display:flex; justify-content:flex-start; align-items:flex-start; flex-direction:column; }
.syone-info-a h1{ font-size:2.5rem; color:#FFF; line-height:1.5; letter-spacing:2px; animation-name: customSlideInLeft;}
.syone-info-a h2{ font-size:2rem; align-self: flex-end; text-align: right; color:#FFF; line-height:1.5; font-weight:normal; letter-spacing:2px; position:relative; margin-top: 10px; animation-name: customSlideInRight;}
.syone-info-a h2::before{ content:''; position:absolute; left:-110px; top:50%; width:100px; height:2px; background-color:#FFF; }
.syone-info-b{ width:100%; display:flex; flex-direction:column; animation-name: customSlideInRight;}
.syone-info-b h1{ font-size:3rem; color:#FFF; line-height:1.5; letter-spacing:2px; }
.syone-info-b h2{ font-size:1.8rem; color:#FFF; line-height:1.5; font-weight:normal; letter-spacing:2px; position:relative; padding-bottom:30px; }
.syone-info-b h2::before { content:""; position: absolute; bottom: 0; left: 0; width: 100%;height: 10px; background: linear-gradient(to right, #e5ba35, transparent);}
.syone-info-b div{ width:100%; display:flex; flex-direction: column; padding:30px 0px;  }
.syone-info-b p{ width:100%; display:flex; padding:10px 0px; font-size:1rem; line-height:1.7; }
.syone-info a{ font-size:1rem; color:#ffcd33; line-height:1.5; display:flex; flex-direction:row; justify-content:flex-end; align-items:flex-end; -webkit-transition:all 0.6s;-moz-transition:all 0.6s;transition:all 0.6s;}
.syone-info a>i{ margin-left: 10px; width:50px; height:25px; background-size:100%; background-repeat:no-repeat; background-image:url(../../uploads/page/jt.png); background-position:center; }
.syone-info a:hover{ color:#FFF; }

.sytwo{ width:100%; max-height:950px; display:flex; justify-content:flex-start; flex-direction:row; background-color:#132848; overflow: hidden;}
.sytwo-a{ width:20%; display:flex; flex-direction:column; position:relative; }
.st-img{ width:100%; height: 100%; padding-top:110%; position: relative; display: block; overflow: hidden; background-color:#000000; -webkit-transition:all 0.5s;-moz-transition:all 0.5s;transition:all 0.5s;}
.st-img 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;}
.st-words{ position:absolute; left:0; top:0; width:100%; height:100%; padding:50px 50px 120px; display:flex; justify-content:space-between; flex-direction: column;}
.sytwo.onen .st-a{ letter-spacing:1px; }
.sytwo.onen .st-a p{ font-size:2rem; }
.st-a { writing-mode:vertical-lr; text-orientation: upright; line-height: 1.8;letter-spacing:5px; height:auto; padding: 20px 0;}
.st-a p{ color:#FFF; font-size:2.2rem; position: relative; font-weight: 600; padding-left:15px;}
.st-a p::before{ content:''; position:absolute; left:0; top:0; width:3px; height:120px; background-color:#ffcd33; }
.st-b{ width:100%; display:flex; justify-content:flex-end; align-items:flex-end; }
.st-b a{ color:#ffcd33; font-size:1.25rem; line-height:1.5; display:flex; flex-direction:row; justify-content:flex-end; align-items:flex-end; -webkit-transition:all 0.6s;-moz-transition:all 0.6s;transition:all 0.6s;}
.st-b a>i{ margin-left:30px; width:65px; height:25px; background-size:100%; background-repeat:no-repeat; background-image:url(../../uploads/page/jt.png); background-position:center top; }
.st-b a:hover{ color:#FFF; }
.sytwo-b{ width:32%; display:flex; flex-direction:column; position:relative; }
.sytwo-b i{ width:100%; height: 100%; padding-top:110%; position: relative; display: block; overflow: hidden; background-color:#000000; -webkit-transition:all 0.5s;-moz-transition:all 0.5s;transition:all 0.5s;}
.sytwo-b 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;}
.sytwo-b p{ position:absolute; left:0; bottom:0; width:100%; padding:30px 0px; font-size:1.2rem; color: #FFF; line-height:1.5; display:flex; justify-content:center; align-items:center; }
.sytwo-b p span{ position:relative; z-index:1 }
.sytwo-b p::before{ content:''; position:absolute; left:0; top:0; width:100%; height:100%; background-color:#000; opacity:0.4; }
.sytwo-c{ width:48%; display:flex; flex-direction:column; position:relative; }
.sytwo-ca{ width:100%; height: 50%; display:flex; flex-direction:column; position:relative; }
.sytwo-ca i{ width:100%; height: 100%; padding-top:55%; position: relative; display: block; overflow: hidden; background-color:#000000; -webkit-transition:all 0.5s;-moz-transition:all 0.5s;transition:all 0.5s;}
.sytwo-ca 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;}
.sytwo-ca p{ position:absolute; left:0; bottom:0; width:100%; padding:30px 0px; font-size:1.3rem; color: #FFF; line-height:1.5; display:flex; justify-content:center; align-items:center; }
.sytwo-ca p span{ position:relative; z-index:1 }
.sytwo-ca p::before{ content:''; position:absolute; left:0; top:0; width:100%; height:100%; background-color:#000; opacity:0.4; }
.sytwo-cb{ width:100%; height: 50%; display:flex; flex-direction:column; position:relative; }
.sytwo-cb i{ width:100%; height: 100%; padding-top:50%; position: relative; display: block; overflow: hidden; background-color:#000000; -webkit-transition:all 0.5s;-moz-transition:all 0.5s;transition:all 0.5s;}
.sytwo-cb 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;}
.sytwo-cb p{ position:absolute; left:0; bottom:0; width:100%; padding:30px 0px; font-size:1.3rem; color: #FFF; line-height:1.5; display:flex; justify-content:center; align-items:center; }
.sytwo-cb p span{ position:relative; z-index:1 }
.sytwo-cb p::before{ content:''; position:absolute; left:0; top:0; width:100%; height:100%; background-color:#000; opacity:0.4; }

.syth-c{ width:100%; display:flex; background-image:url(../../uploads/page/71.jpg); background-color:#183a6e; background-size:cover; background-repeat:no-repeat; background-position:center; padding:70px 0px 50px; }
.th-a{ width:100%; display:flex; justify-content:space-between; align-items:center; flex-direction:row; }
.th-a h1{ font-size:2.4rem; color:#ffffff; line-height:1.5; padding:10px 0px; position:relative; }
.th-a h1::before{ content:''; position:absolute; left:0; bottom:0; width:135px; height:2px; background-color:#ffcd33; }
.th-a a{ font-size:1rem; color:#ffcd33; line-height:1.5; display:flex; flex-direction:row; justify-content:flex-end; align-items:flex-end; -webkit-transition:all 0.6s;-moz-transition:all 0.6s;transition:all 0.6s;}
.th-a a>i{ margin-left: 10px; width:50px; height:25px; background-size:100%; background-repeat:no-repeat; background-image:url(../../uploads/page/jt.png); background-position:center; }
.th-a a:hover{ color:#FFF; }
.th-b{ width:100%; display:flex; flex-direction:column; padding:40px 0px; }
.th-row{ width:100%; display:flex; flex-direction:row; gap:15px; margin-top:25px;}
.th-bone{ flex:1; background-color:#ffffff; display:flex; flex-direction:column; overflow:hidden; }
.th-bone div{ width:100%; height:245px; position: relative; display: block; overflow: hidden; background-color:#000000; -webkit-transition:all 0.5s;-moz-transition:all 0.5s;transition:all 0.5s;}
.th-bone i{ width:100%; height:100%; display:flex; -webkit-transition:all 0.5s;-moz-transition:all 0.5s;transition:all 0.5s;}
.th-bone 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-bone p{ width:100%; height:70px; padding:0px 15px; display:flex; justify-content:center; align-items:center; line-height:1.5; font-size:1rem; text-align:center; }
.th-bone.flex-large { flex: 1.3;}
.th-bone:hover div i{ -webkit-transform: scale(1.05); -moz-transform: scale(1.05); transform: scale(1.05); }

.syfo-a{ width:100%; display:flex; background-image:url(../../uploads/page/90.jpg); background-color:#183a6e; background-size:cover; background-repeat:no-repeat; background-position:center; padding:70px 0px 50px; }
.fo-a{ width:100%; display:flex; justify-content:space-between; align-items:center; flex-direction:row; }
.fo-a h1{ font-size:2.4rem; color:#ffffff; line-height:1.5; padding:10px 0px; position:relative; }
.fo-a h1::before{ content:''; position:absolute; left:0; bottom:0; width:135px; height:2px; background-color:#ffcd33; }
.fo-a a{ font-size:1rem; color:#ffcd33; line-height:1.5; display:flex; flex-direction:row; justify-content:flex-end; align-items:flex-end; -webkit-transition:all 0.6s;-moz-transition:all 0.6s;transition:all 0.6s;}
.fo-a a>i{ margin-left: 10px; width:50px; height:25px; background-size:100%; background-repeat:no-repeat; background-image:url(../../uploads/page/jt.png); background-position:center; }
.fo-a a:hover{ color:#FFF; }
.fo-b{ width:100%; display:flex; align-items: center; flex-direction:row; padding: 15px 0px;}
.fo-bl{ width:38%; display:flex; flex-direction:column; position:relative; }
.fo-bl i img{ max-width:100%; }
.fo-bl i{ margin-bottom:30px; }
.fo-bl p{ font-size:1.4rem; line-height:2; color:#ffffff; letter-spacing:3px; }
.fo-bl .line{ position: relative; width: 100%; height:10px; margin-top: 40px;}
.fo-bl .line::before {
    content: "";
    display: inline-block;
    width: 15px;
    height: 15px;
    background-color: #ffcd33;
    vertical-align: middle;
}
.fo-bl .line::after {
    content: "";
    display: inline-block;
    width: 200px;
    height: 4px;
    background-color: #ffcd33;
    vertical-align: middle;
    margin-left:10px;
}

.fo-br{ width:62%; display:flex; flex-direction:row; flex-wrap:wrap; }
.fo-one{ width:100%; min-height:155px; padding: 20px; display: flex; justify-content:flex-start; align-items: center; flex-direction:column; overflow:hidden; border-radius: 30px; background-color:#e7d5c6; background-repeat:no-repeat; background-size:cover; background-image:url(../../uploads/page/bgs.jpg); background-position:center bottom; animation-name: customSlideInRight;}
.fo-one div{ width:100%; min-height:100px; padding:5px 0px; display:flex; justify-content:center; align-items:flex-start; flex-direction:column; }
.fo-one div p{ font-size:1rem; line-height:1.5; color:#000000; }
.fo-one h1{ width:100%; font-size:0.9rem; line-height:1.5; text-align:right; color: #000; font-weight:normal;}
.fo-one h1 span{ position:relative; }
.fo-one h1 span::before{ content:''; position:absolute; left:-60px; top:48%; width:50px; height:2px; background-color:#000; }
.plra15{ padding:20px;}

@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: 1430px) {
.md{ width:100%; }
.syone-info{ padding:75px 10% 50px 8%; }
}

@media (max-width: 1230px) {
.syone-info-a h1{ font-size:2.2rem; letter-spacing:1px; }
.syone-info-a h2{ font-size:1.9rem; letter-spacing:1px; }
.syone-info-a h2::before{ width:80px; }
.syone-info-b h1{ font-size:2.5rem; letter-spacing:1px; }
.syone-info-b h2{ font-size:1.6rem; letter-spacing:1px; padding-bottom:20px; }
.st-a p{ font-size:1.8rem; }
.st-a p::before{ height:100px; }
.sytwo.onen .st-a p{ font-size:1.6rem; }
.st-b a{ font-size:1.10rem;}
.sytwo-b p{ padding:20px 0px; font-size:1.1rem;}
.sytwo-ca p{ padding:20px 0px; font-size:1.1rem;}
.sytwo-cb p{ padding:20px 0px; font-size:1.1rem;}
.th-a h1{ font-size:2.2rem;}
.th-a h1::before{ width:120px; }
.th-bone div{ height:230px; }
.th-bone p{ padding:0px 10px; line-height:1.3; font-size:0.92rem; }
}

/*ipad*/
@media (min-width: 768px) and (max-width: 991px) {
.syone-img i{ padding-top:110%; }
.syone-info{ width:60%; padding:55px 30px 40px 5%; }
.syone-info-a h1{ font-size:2rem; letter-spacing:1px;}
.syone-info-a h2{ font-size:1.7rem; letter-spacing:1px; }
.syone-info-b h1{ font-size:2.2rem; letter-spacing:1px; }
.syone-info-b h2{ font-size:1.6rem; }
.st-a { letter-spacing:3px;}
.st-a p{ font-size:2rem; }
.sytwo.onen .st-a p{ font-size:1.8rem; }
.st-a p::before{ height:80px; }
.st-b a{ font-size:1.15rem; }
.st-b a>i{ margin-left:20px; width:55px; }
.sytwo-b p{ padding:15px 0px; font-size:1.1rem; }
.sytwo-ca p{ padding:15px 0px; font-size:1.1rem; }
.sytwo-cb p{ padding:15px 0px; font-size:1.1rem; }

}
/* xs */
@media (max-width: 767px) {
/*-- --*/
.bannerbox{ width:100%; height:370px; padding-bottom:0px; }
.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:8px; height:8px;  }
.ban-swiper-pagination .swiper-pagination-bullet-active { width:35px;}

.syone{ flex-direction:column-reverse;}
.syone-img{ width:100%; }
.syone-img i{ padding-top:0; height:300px}
.syone-img i img{ width: 100%; height:auto; top:0;transform: translate(-50%, -10%);}
.syone-info{ width:100%; padding:45px 15px; }
.syone-info-a h1{ font-size:1.40rem; letter-spacing:0;}
.syone-info-a h2{ font-size:1.28rem; letter-spacing:0; }
.syone-info-a h2::before{ left:-70px; width:60px; }
.syone-info-b h1{ font-size:1.40rem; letter-spacing:0; }
.syone-info-b h2{ font-size:1.28rem; letter-spacing:0; padding-bottom:25px; }
.syone-info-b h2::before { height:5px;}
.syone-info-b div{ padding:15px 0px; }

.sytwo{ max-height:auto; flex-wrap: wrap;}
.sytwo-a{ width:100%;}
.st-img{ padding-top:0; height:100px; }
.st-words{ padding:20px; flex-direction:row; }
.st-a { width:60%; writing-mode: horizontal-tb; text-orientation: mixed; line-height:1.5;letter-spacing:0px; padding:10px 0;}
.st-a p{ font-size:1.3rem; }
.sytwo.onen .st-a{ letter-spacing:0; }
.sytwo.onen .st-a p{ font-size:1.2rem; }
.st-a p::before{ height:28px; }
.st-b a{ font-size:1rem; }
.st-b a>i{ margin-left:5px; width:50px; height:25px; background-size:80%; background-position:center center; }
.st-b a:hover{ color:#FFF; }
.st-b{ align-items:center; padding-bottom:10px; }
.sytwo-b{ width:47%;  }
.sytwo-b i{ padding-top:200%; }
.sytwo-b p{ padding:15px 0px; font-size:1rem; line-height:1.2; }
.sytwo-c{ width:53%;  }
.sytwo-ca p{ padding:15px 0px; font-size:1rem; line-height:1.2; }
.sytwo-cb p{ padding:15px 0px; font-size:1rem; line-height:1.2; }

.syth-c{ padding:40px 0px 60px; }
.th-a h1{ font-size:1.45rem; }
.th-a h1::before{ width:70px; }
.th-b{ padding:15px 0px; }
.th-row{ flex-wrap:wrap; gap:10px; margin-top:10px;}
.th-bone{ flex:auto; width:calc(50% - 5px); }
.th-bone.flex-large { flex:auto; width:calc(50% - 5px);}
.th-bone div{ height:200px;}
.th-bone p{ height:60px; padding:0px 10px; line-height:1.2; font-size:0.85rem;}

.syfo-a{ padding:50px 0px; }
.fo-a h1{ font-size:1.45rem; }
.fo-a h1::before{ width:70px; }
.fo-b{ flex-direction:column; padding: 15px 0px;}
.fo-bl{ width:100%; display:flex; flex-direction:column; position:relative; padding-top:20px; }
.fo-bl i img{ width:60px }
.fo-bl i{ margin-bottom:15px; }
.fo-bl p{ font-size:1.15rem; line-height:1.6; letter-spacing:1px; }
.fo-bl .line{ margin-top:20px;}
.fo-bl .line::before { width:10px; height:10px;}
.fo-bl .line::after { width:120px;height:2px;}
.fo-br{ width:100%; padding:20px 10px; }
.fo-one{ width:100%; min-height:150px; padding:15px;}
.fo-one div{ width:100%; height:120px; padding:5px; }
.fo-one div p{ font-size:0.95rem; line-height:1.3; }
.fo-one h1{ width:100%; font-size:0.85rem; line-height:1.3;}
.plrax5{ padding:5px; }
}

@media (max-width: 480px) {
.syone-img i{ height:250px}
.th-bone div{ height:150px;}
}