#banner {position: relative;z-index: 2;width: 100%;padding: 0;overflow: hidden;-webkit-animation: bannerClipPathAni .8s ease-in-out .25s both;animation: bannerClipPathAni .8s ease-in-out .25s both;margin-top: 6.875rem;}
@keyframes bannerClipPathAni {
  0% { opacity: 0; -webkit-clip-path: inset(0 100% 0 0); clip-path: inset(0 100% 0 0); }
  100% { opacity: 1; -webkit-clip-path: inset(0 0 0 0); clip-path: inset(0 0 0 0); }
}
#banner .slick-dotted.slick-slider { margin: 0; }
#banner .main-slider,#banner .slick-list,#banner .slick-track,#banner .item {height: calc(100vh - 50px);min-height: 700px;}
#banner .item { position: relative; overflow: hidden; }
#banner .item::after {content: '';position: absolute;left: 6.35%;top: 0;z-index: 4;width: 93.65%;height: 100%;border-bottom-right-radius: 350px;background: linear-gradient(90deg,rgba(0,0,0,.58) 0%,rgba(0,0,0,.32) 34%,rgba(0,0,0,.08) 100%);pointer-events: none;opacity: .4;border-top-left-radius: 180px;}
#banner .img {position: absolute;right: 0;top: 0;z-index: 1;width: 93.65%;height: 100%;border-top-left-radius: 180px;border-bottom-right-radius: 350px;overflow: hidden;display: block;background: #d9dee5;}
#banner .img img { position: relative; width: 100%; height: 100%; min-width: 100%; object-fit: cover; object-position: center center; transform: scale(1.04); }
#banner .slick-current .img img { animation: bannerImageZoom 5.5s ease-out both; }
@keyframes bannerImageZoom {
  0% { transform: scale(1.08); }
  100% { transform: scale(1.02); }
}
#banner .video_box { position: absolute; left: 6.35%; top: 0; z-index: 3; width: 93.65%; height: 100%; overflow: hidden; border-bottom-left-radius: 180px; pointer-events: none; }
#banner .video_box video,#banner .video_box iframe,#banner .item video,#banner .item iframe { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }
#banner .info { position: absolute; left: 0; top: 0; z-index: 8; display: flex; align-items: center; width: 100%; height: 100%; pointer-events: none; }
#banner .info .txt { position: relative; z-index: 2; width: min(78%,1440px); height: auto; margin: 0 auto; padding-left: clamp(210px,22vw,360px); color: var(--white); pointer-events: auto; }
#banner .info .txt .entitle_box {margin: 0 0 1.5rem;color: var(--white);font-family: "Inter", sans-serif;font-size: 4.2rem;font-weight: 600;line-height: 1.1;text-align: left;width: min(80%, 540px);}
#banner .info .txt h2 {margin: 0 0 3rem;color: var(--white);font-size: clamp(1.65rem,2.05vw,2.05rem);font-weight: 600;line-height: 1.5;letter-spacing: .15em;text-align: left;}
#banner .info .txt h2:before {content: "";width: 80px;height: 1px;background: #ffffff;display: block;position: absolute;bottom: -20px;left: 0}

#banner .info .txt p {max-width: 530px;margin: 0;color: var(--white);font-size: 1rem;font-weight: 400;line-height: 2.05;letter-spacing: .12em;text-align: left;width: min(80%, 420px);}
#banner .slick-slide .info .txt .entitle_box,#banner .slick-slide .info .txt h2,#banner .slick-slide .info .txt p { opacity: 0; transform: translateY(26px); }
#banner .slick-current .info .txt .entitle_box { animation: bannerTextUp .8s ease .2s both; }
#banner .slick-current .info .txt h2 { animation: bannerTextUp .8s ease .38s both; }
#banner .slick-current .info .txt p { animation: bannerTextUp .8s ease .56s both; }
@keyframes bannerTextUp {
  0% { opacity: 0; transform: translateY(26px); }
  100% { opacity: 1; transform: translateY(0); }
}
#banner .banner-link {position: absolute;inset: 0;display: block;left: auto;right: 0;top: 0;z-index: 1;width: 93.65%;height: 100%;}
#banner .banner-link:hover ~ .info .txt h2,#banner .banner-link:focus ~ .info .txt h2 { color: var(--secondary); }
#banner .banner_feature {position: absolute;left: 6.35%;bottom: 0;z-index: 20;display: flex;width: min(650px,70vw);border-top-right-radius: 90px;overflow: hidden;}
#banner .feature_item { position: relative; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: .75rem; width: 33.333%; min-height: 150px; padding: 1.2rem 1rem; text-align: center; overflow: hidden; }
#banner .feature_item::before {content: '';position: absolute;left: -35%;top: 0;width: 28%;height: 100%;background: rgba(255,255,255,.26);transform: skewX(-18deg) translateX(-180%);transition: transform .55s ease;z-index: 1;}
#banner .feature_item:hover::before,#banner .feature_item:focus::before { transform: skewX(-18deg) translateX(520%); }
#banner .feature_item:hover,#banner .feature_item:focus {}
#banner .feature_item.white {background: var(--secondary);color: var(--primary);}
#banner .feature_item.white:after { content: ''; position: absolute; right: 0; top: 0; background: var(--white); border-top-right-radius: 90px; width: 100%; height: 100%; z-index: 0; }
#banner .feature_item.yellow { background: var(--primary); color: var(--white); position: relative; }
#banner .feature_item.yellow:after { content: ''; position: absolute; right: 0; top: 0; background: var(--secondary); border-top-right-radius: 90px; width: 100%; height: 100%; z-index: 0; }
#banner .feature_item.blue { background: var(--primary); color: var(--white); }
#banner .feature_item .icon { display: block; width: 72px; height: 72px; z-index: 10; }
#banner .feature_item .icon img { width: 100%; height: 100%; object-fit: contain; }
#banner .feature_item strong {position: relative;z-index: 2;color: inherit;font-size: 1rem;font-weight: 600;line-height: 1.6;letter-spacing: .1em;text-align: center;}
#banner .scroll_down {position: absolute;right: 3.4%;bottom: 3.2rem;z-index: 25;display: flex;align-items: center;justify-content: center;width: 9.75rem;height: 9.75rem;border-radius: 50%;background: var(--primary);color: var(--white);box-shadow: 0 1rem 2.2rem rgba(0,0,0,.18);overflow: hidden;transform: translateY(0);transition: background .3s ease,transform .3s ease,box-shadow .3s ease;}
#banner .scroll_down::before { content: ""; position: absolute; inset: 1rem; background: url("/images/39/img-scroll.png") center/contain no-repeat; pointer-events: none; }
#banner .scroll_down span { position: relative; z-index: 2; display: block; width: 2rem; height: 3rem; }
#banner .scroll_down span::before { content: ""; position: absolute; left: 50%; top: .15rem; width: .18rem; height: 2.4rem; background: var(--white); border-radius: 999px; transform: translateX(-50%); }
#banner .scroll_down span::after {content: "";position: absolute;left: 50%;bottom: 0.5rem;width: 1.25rem;height: 1.25rem;border-right: .18rem solid var(--white);border-bottom: .18rem solid var(--white);transform: translateX(-50%) rotate(45deg);}
#banner .scroll_down:hover { background: #002f58; transform: translateY(-.35rem); box-shadow: 0 1.25rem 2.6rem rgba(0,0,0,.24); }
#banner .scroll_down:hover span { transform: translateY(.2rem); }
#banner .scroll_down:focus,#banner .scroll_down:focus-visible { outline: none; box-shadow: 0 0 0 3px #d60000,0 1rem 2.2rem rgba(0,0,0,.18); }
#banner .scroll_down,#banner .scroll_down:hover,#banner .scroll_down:focus,#banner .scroll_down:focus-visible { border-radius: 50% !important; }
#banner .scroll_down:focus,#banner .scroll_down:focus-visible { outline: none !important; }
#banner .scroll_down:focus,#banner .scroll_down:focus-visible { box-shadow: 0 0 0 3px #d60000,0 1rem 2.2rem rgba(0,0,0,.18) !important; }
#banner .scroll_down span,#banner .scroll_down em,#banner .scroll_down::after { border-radius: 50%; }
@media screen and (max-width:960px) {
  #banner .scroll_down { right: 2rem; bottom: 3rem; width: 6.8rem; height: 6.8rem; }
  #banner .scroll_down::before { width: 5.25rem; height: 5.25rem; }
  #banner .scroll_down em::before { top: .55rem; font-size: .68rem; letter-spacing: .25em; }
  #banner .scroll_down span {width: 1.6rem;height: 2.8rem;}
}
@media screen and (max-width:640px) {
  #banner .scroll_down { display: none; }
}
#banner .banner_ctrl { position: absolute; right: 2rem; top: 50%; z-index: 22; display: flex; flex-direction: column; align-items: center; gap: .7rem; opacity: 0; pointer-events: none; transform: translateY(-50%) translateX(1rem); transition: opacity .3s ease,transform .3s ease; }
#banner .banner_ctrl:focus-within { opacity: 1; pointer-events: auto; transform: translateY(-50%) translateX(0); }
#banner .banner_ctrl button,#banner .banner_ctrl button:hover,#banner .banner_ctrl button:focus,#banner .banner_ctrl button:focus-visible { display: flex; align-items: center; justify-content: center; width: 3.25rem !important; height: 3.25rem !important; min-width: 3.25rem !important; min-height: 3.25rem !important; padding: 0 !important; border: 0 !important; border-radius: 50% !important; appearance: none; -webkit-appearance: none; cursor: pointer; }
#banner .banner_ctrl button { background: rgba(0,0,0,.68); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 .35rem .9rem rgba(0,0,0,.16); }
#banner .banner_ctrl button:hover { background: rgba(0,0,0,.82); transform: translateY(-2px); }
#banner .banner_ctrl button:focus,#banner .banner_ctrl button:focus-visible { outline: none !important; background: #f3c742; box-shadow: 0 0 0 3px #d60000,0 .35rem .9rem rgba(0,0,0,.16) !important; }
#banner .banner_ctrl button.is-active,#banner .banner_ctrl button.active { background: #f3c742; border-radius: 50% !important; }
#banner .banner_prev,#banner .banner_next,#banner .banner_pause,#banner .banner_play { border-radius: 50% !important; }
#banner .banner_ctrl .banner_prev::before,#banner .banner_ctrl .banner_next::before { content: ""; display: block; width: .8rem; height: .8rem; border-top: 2px solid #fff; border-left: 2px solid #fff; }
#banner .banner_ctrl .banner_prev::before { transform: rotate(-45deg); margin-left: .2rem; }
#banner .banner_ctrl .banner_next::before { transform: rotate(135deg); margin-right: .2rem; }
#banner .banner_ctrl .banner_pause::before { content: ""; display: block; width: .7rem; height: 1rem; border-left: .18rem solid #fff; border-right: .18rem solid #fff; }
#banner .banner_ctrl .banner_play::before { content: ""; display: block; width: 0; height: 0; margin-left: .15rem; border-top: .55rem solid transparent; border-bottom: .55rem solid transparent; border-left: .8rem solid #fff; }

#banner .banner-control,#banner .banner-arrow { position: relative; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; padding: 0; border: 1px solid rgba(255,255,255,.45); border-radius: 50%; background: rgba(0,0,0,.35); backdrop-filter: blur(10px); cursor: pointer; }
#banner .banner-control:hover,#banner .banner-arrow:hover,#banner .banner-control:focus,#banner .banner-arrow:focus { background: var(--secondary); border-color: var(--secondary); transform: translateX(-5px); }
#banner .banner-control .icon { position: relative; width: 14px; height: 14px; }
#banner .banner-control .icon::before,#banner .banner-control .icon::after { content: ''; position: absolute; top: 0; width: 4px; height: 14px; background: var(--white); }
#banner .banner-control .icon::before { left: 0; }
#banner .banner-control .icon::after { right: 0; }
#banner .banner-control.play .icon::before { left: 2px; width: 0; height: 0; border-left: 12px solid var(--white); border-top: 7px solid transparent; border-bottom: 7px solid transparent; background: transparent; }
#banner .banner-control.play .icon::after { display: none; }
#banner .banner-arrow::before { content: ''; display: block; width: 11px; height: 11px; border-top: 2px solid var(--white); border-left: 2px solid var(--white); }
#banner .banner-arrow.prev::before { transform: rotate(-45deg) translate(2px,2px); }
#banner .banner-arrow.next::before { transform: rotate(135deg) translate(2px,2px); }
#banner .main-slider .img.is-frozen img { visibility: hidden; }
#banner .banner-freeze-frame { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none; }
#banner .slick-dots { position: absolute; left: 2rem; top: 50%; z-index: 30; display: flex !important; flex-direction: column; justify-content: center; align-items: center; gap: .9rem; width: 3rem; padding: 1.75rem 0; margin: 0; transform: translateY(-50%); border-radius: 0; }
#banner .slick-dots li { position: relative; width: 1.25rem; height: 2.8rem; margin: 0; display: flex; align-items: center; justify-content: center; }
#banner .slick-dots li::before { display: none; }
#banner .slick-dots li button { position: relative; width: 2px; height: 100%; padding: 0; border: 0; background: rgba(var(--info-rgb),.18); border-radius: 999px; font-size: 0; color: transparent; cursor: pointer; overflow: hidden; }
#banner .slick-dots li button::before { display: none; }
#banner .slick-dots li button::after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 0; background: var(--primary); border-radius: 999px; transition: height .35s ease; }
#banner .slick-dots li.slick-active button { background: rgba(var(--primary-rgb),.15); }
#banner .slick-dots li.slick-active button::after { height: 100%; }
#banner .slick-dots li button:hover { background: rgba(var(--primary-rgb),.28); }
#banner .slick-dots li button:focus-visible { outline: 2px solid var(--primary); outline-offset: 4px; }
#banner.is-playing .slick-dots li.slick-active button::after { animation: bannerProgress 5s linear forwards; }
@keyframes bannerProgress {
  0% { height: 0; }
  100% { height: 100%; }
}
#banner a:focus,#banner button:focus { outline: 3px solid #d60000; outline-offset: 3px; }
#banner .banner-link:focus { outline-offset: -8px; }
#banner .banner-control:focus,#banner .banner-arrow:focus,#banner .scroll_down:focus,#banner .feature_item:focus { border-radius: 0; }

@media screen and (max-width:1640px) {
	#banner .info .txt { width: 86%; padding-left: clamp(210px,20vw,320px); }
}
@media screen and (max-width:1280px) {
    #banner{
    margin-top: 5px;
}
	#banner .info .txt { width: 86%; padding-left: clamp(140px,17vw,250px); }
	#banner .slick-dots { left: 1rem; }
	#banner .feature_item { min-height: 132px; }
	#banner .scroll_down { width: 112px; height: 112px; }
	#banner .item::after,#banner .img,#banner .video_box { border-bottom-right-radius: 260px; border-top-left-radius: 140px; border-bottom-left-radius: 0; }
}
@media screen and (max-width: 960px) {
	#banner { background: rgba(var(--primary-rgb),.04); }
	#banner .main-slider,#banner .slick-list,#banner .slick-track,#banner .item {height: auto;min-height: 630px;}
	#banner .item::before { display: none; }
	#banner .item::after,#banner .img,#banner .video_box {left: 0;width: 100%;border-top-left-radius: 100px;border-bottom-right-radius: 0;}
	#banner .info .txt { width: 88%; padding-left: 0; text-align: center; }
	#banner .info .txt::before,#banner .info .txt::after,#banner .curve_deco { display: none; }
	#banner .info .txt .entitle_box { font-size: 3.2rem; }
	#banner .info .txt p { max-width: 640px; }
	#banner .banner_feature { width: 92vw; left: 0; }
	#banner .feature_item { min-height: 100px; }
	#banner .feature_item .icon { width: 52px; height: 52px; }
	#banner .banner_ctrl { right: 1rem; }
	#banner .slick-dots li,#banner .scroll_down { display: none; }
}
@media screen and (max-width: 640px) {
	#banner .main-slider,#banner .slick-list,#banner .slick-track,#banner .item {}
	#banner .info .txt { width: 86%; padding-bottom: 90px; }
	#banner .info .txt .entitle_box { font-size: 2.35rem; letter-spacing: .12em; }
	#banner .info .txt h2 { font-size: 1.45rem; }
	#banner .info .txt p { font-size: .95rem; line-height: 1.9; }
	#banner .feature_item {width: 100%;min-height: auto;padding: 1.25rem .5rem;gap: .25rem;}
	#banner .feature_item .icon { width: 42px; height: 42px; }
    #banner .feature_item strong{
    font-size: .9rem;
}
#banner .feature_item.white:after, #banner .feature_item.yellow:after,#banner .banner_feature{
    border-top-right-radius: 50px;
}
	#banner .scroll_down { display: none; }
	#banner .banner_ctrl {right: 1rem;top: auto;bottom: 11rem;flex-direction: row;transform: none;}
	#banner .banner-control,#banner .banner-arrow { width: 42px; height: 42px; }
	}
@media (prefers-reduced-motion:reduce) {
	#banner,#banner * { animation: none !important; transition: none !important; transform: none !important; }
}