/* banner */
#banner {position: relative;width: 100%;z-index: 3;padding-top: 90px;}
#banner .main-slider { position: relative; width: 100%; overflow: hidden; }
#banner .main-slider .item { position: relative; width: 100%; height: clamp(650px,80vh,900px); overflow: hidden; }
#banner .main-slider .item > .pos_rel { width: 100%; height: 100%; overflow: hidden; }
#banner img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center center; transform: scale(1.015); transition: transform 8s ease; }
#banner video,#banner iframe {position: absolute;width: 100%;height: 100%;top: 0;left: 0px;object-fit: cover;border: 0;}
#banner .item > .pos_abs:has(video),#banner .item > .pos_abs:has(iframe) {width: 100%;height: 100%;top: 0;left: 0;z-index: 1;}
#banner .item:after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(90deg,rgba(244,249,252,.92) 0%,rgba(244,249,252,.76) 29%,rgba(244,249,252,.18) 48%,rgba(8,39,70,.08) 65%,rgba(7,38,69,.28) 100%); }
#banner .info { width: 100%; height: 100%; top: 0; left: 0; z-index: 4; align-items: center; pointer-events: none; }
#banner .info .txt { width: min(1500px,calc(100% - 120px)); margin: auto; pointer-events: auto; }
#banner .info .txt > * { opacity: 0; transform: translateY(24px); transition: opacity .8s ease,transform .8s cubic-bezier(.22,.61,.36,1); }
#banner .info .txt .h3 { max-width: 570px; margin: 0 0 22px; color: #123f6d; font-size: clamp(52px,4.5vw,60px); font-weight: 700; line-height: 1.25; letter-spacing: .04em; }
#banner .info .txt p { max-width: 550px; margin: 0 0 34px; color: #536b82; font-size: 20px; font-weight: 400; line-height: 1.9; letter-spacing: .08em; }
#banner .banner_btn { width: 320px; margin: 0 0 28px; }
#banner .banner_btn a { position: relative; z-index: 8; width: 100%; height: 70px; padding: 0 32px; display: flex; align-items: center; justify-content: space-between; overflow: hidden; border-radius: 4px; background: #123f6d; color: #fff; font-size: 16px; font-weight: 500; letter-spacing: .12em; transition: color .35s ease,background .35s ease,transform .35s ease,box-shadow .35s ease; white-space: unset; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }
#banner .banner_btn a:before { content: ""; position: absolute; inset: 0; z-index: -1; background: #0b2e50; transform: translateX(-101%); transition: transform .4s cubic-bezier(.77,0,.18,1); }
#banner .banner_btn a:hover { color: #fff; }
#banner .banner_btn a:hover:before { transform: translateX(0); }
#banner .banner_btn span { display: inline-block; font-size: 25px; font-weight: 300; transition: transform .35s ease; color: white; font-family: "Source Serif 4",serif; animation: antiBtn 1.5s forwards cubic-bezier(0.45,0.05,0.55,0.95) infinite; position: absolute; }
@keyframes antiBtn {
  0% { right: 30px; opacity: 0; }
  100% { right: 20px; opacity: 1; }
}
#banner .banner_btn a:hover span { transform: translateX(6px); }
#banner .banner_bottom_en { position: relative; width: max-content; padding: 0 0 24px; color: #607b99; font-size: 13px; font-weight: 400; line-height: 1; letter-spacing: .36em; font-family: "Source Serif 4",serif; }
#banner a.pos_abs { width: 100%; height: 100%; top: 0; left: 0; z-index: 3; }
#banner .banner_side {position: absolute;top: 17%;right: 2%;z-index: 6;width: 230px;color: #fff;pointer-events: none;}
#banner .side_top { font-size: 12px; font-weight: 400; line-height: 2.25; letter-spacing: .24em; font-family: "Source Serif 4",serif; color: white; }
#banner .side_line { width: 1px; height: 48px; margin: 24px 0; background: rgba(255,255,255,.65); }
#banner .side_cn { font-size: 21px; font-weight: 400; line-height: 1.7; letter-spacing: .18em; color: white; }
#banner .scrollDown {position: absolute;left: calc(50% - 62.5px);bottom: -40px;z-index: 10;}
#banner .scrollDown > a {display: block;white-space: unset;}
#banner .scroll_circle {position: relative;width: 125px;aspect-ratio: 1;border-radius: 50%;transition: background .35s ease,transform .35s ease,box-shadow .35s ease;display: flex;align-items: center;justify-content: center;}
#banner .scroll_text {position: absolute;width: 125px;aspect-ratio: 1;overflow: visible;animation: bannerScrollRotate 12s linear infinite;}
#banner .scroll_text text {fill: #17497d;font-size: 14px;font-weight: 500;letter-spacing: 1.8px;transition: fill .35s ease;font-family: "Source Serif 4", serif;}
#banner .scroll_arrow {position: absolute;width: 20px;height: 30px;animation: bannerScrollMove 1.7s ease-in-out infinite;top: 58px;}
#banner .scroll_arrow span:first-child { position: absolute; left: 50%; top: 1px; width: 1px; height: 20px; background: #17497d; transform: translateX(-50%); transition: background .35s ease; }
#banner .scroll_arrow span:last-child { position: absolute; left: 50%; bottom: 3px; width: 8px; height: 8px; border-right: 1px solid #17497d; border-bottom: 1px solid #17497d; transform: translateX(-50%) rotate(45deg); transition: border-color .35s ease; }
#banner .scrollDown:hover .scroll_circle {transform: scale(1.06);}
#banner .slick-list,#banner .slick-track { height: 100%; }
#banner .slick-slide { height: clamp(650px,80vh,900px); }
#banner .slick-slide > div { height: 100%; }
#banner .slick-current img { transform: scale(1); }
#banner .slick-current .info .txt > * { opacity: 1; transform: translateY(0); }
#banner .slick-current .info .txt .h3 { transition-delay: .25s; }
#banner .slick-current .info .txt p { transition-delay: .45s; }
#banner .slick-current .info .txt .banner_btn { transition-delay: .65s; }
#banner .slick-current .info .txt .banner_bottom_en { transition-delay: .8s; }
#banner .typewriter { position: relative; width: max-content; max-width: 850px; min-height: 1.25em; }
#banner .typewriter.is-typing:after { content: ""; display: inline-block; width: 2px; height: .9em; margin-left: 8px; vertical-align: -.05em; background: #123f6d; animation: bannerCursor .75s step-end infinite; }
#banner .typewriter.is-done:after { opacity: 0; }
@keyframes bannerCursor {
  0%,45% { opacity: 1; }
  46%,100% { opacity: 0; }
}
@media screen and (max-width:760px) {
  #banner .typewriter { width: auto; max-width: 90%; }
  #banner .typewriter.is-typing:after { width: 1px; margin-left: 4px; }
}
@keyframes bannerScrollRotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes bannerScrollMove {
  0%,100% {transform: translate(0%,-57%);}
  50% { transform: translate(0%,-35%); }
}
@media screen and (max-width:1600px) {
  #banner .info .txt {width: calc(100% - 250px);}
  #banner .info .txt .h3 {font-size: 48px;}
    #banner .banner_side{width: auto;right: 4%;}
}
@media screen and (max-width:1280px) {
  #banner {padding-top: 70px;}
  #banner .main-slider .item,#banner .slick-slide { height: 720px; }
  #banner .info .txt .h3 { font-size: 56px; }
  #banner .info .txt p { font-size: 18px; }
  #banner .banner_side {display: none;}
  #banner .side_cn { font-size: 24px; }
}
@media screen and (max-width:1024px) {
  #banner .main-slider .item,#banner .slick-slide { height: 680px; }
  #banner .item:after { background: linear-gradient(90deg,rgba(244,249,252,.94) 0%,rgba(244,249,252,.78) 47%,rgba(8,39,70,.12) 100%); }
  #banner .info .txt {width: calc(100% - 130px);}
  #banner .info .txt .h3 { font-size: 48px; }
  #banner .info .txt p { max-width: 570px; font-size: 17px; }
  #banner .banner_btn { width: 280px; }
  #banner .banner_btn a { height: 62px; padding: 0 26px; font-size: 17px; }
  #banner .banner_side { right: 30px; width: 180px; }
  #banner .side_top { font-size: 11px; }
  #banner .side_cn { font-size: 21px; }
}
@media screen and (max-width:760px) {
  #banner { padding-top: 65px; overflow: visible; }
  #banner .main-slider { overflow: hidden; }
  #banner .main-slider .item,#banner .slick-slide { height: 620px; }
  #banner img { object-position: 64% center; }
  #banner .item:after { background: linear-gradient(90deg,rgba(245,249,252,.96) 0%,rgba(245,249,252,.88) 60%,rgba(245,249,252,.58) 100%); }
  #banner .info { align-items: flex-end; padding-bottom: 78px; }
  #banner .info .txt { width: calc(100% - 40px); padding-right: 0; }
  #banner .info .txt .h3 { max-width: 90%; margin-bottom: 15px; font-size: 38px; line-height: 1.35; letter-spacing: .02em; }
  #banner .info .txt p { max-width: 88%; margin-bottom: 24px; font-size: 15px; line-height: 1.8; letter-spacing: .05em; }
  #banner .banner_btn { width: 240px; margin-bottom: 20px; }
  #banner .banner_btn a { height: 56px; padding: 0 22px; font-size: 15px; }
  #banner .banner_bottom_en { font-size: 9px; letter-spacing: .22em; }
  #banner .banner_side { display: none; }
  #banner .scrollDown {position: absolute;left: 50%;bottom: -58px;z-index: 10;transform: translateX(-50%) scale(.7);transform-origin: center center;}
}
@media screen and (max-width:550px) {
  #banner .main-slider .item,#banner .slick-slide {height: 420px;}
  #banner img {object-position: 65% center;}
  #banner .info {padding-bottom: 65px;}
  #banner .info .txt { width: calc(100% - 30px); }
  #banner .info .txt .h3 { font-size: 32px; }
  #banner .info .txt p { max-width: 95%; font-size: 14px; }
  #banner .banner_btn { width: 220px; }
  #banner .banner_btn a { height: 52px; padding: 0 18px; font-size: 14px; }
  #banner .banner_bottom_en {max-width: 260px;line-height: 1.7;padding: 0;}
}