:root { --ratioW: 1; }

#banner { overflow: hidden; position: relative; width: 100vw; height: 100vh; background: url(/images/00/img_banner_sea.webp) no-repeat 50% bottom; }

#banner .boat_box { position: absolute; width: min(80vw, 1627px); background: url(/images/00/img_banner_boat_waves.webp) no-repeat 50% / cover; right: 0; bottom: 6%; }
#banner .boat_box img { --duration: .9s; -webkit-animation: boat calc(var(--duration) * (var(--ratioW))) linear infinite; animation: boat calc(var(--duration) * (var(--ratioW))) linear infinite; }

#banner .waves_box { position: absolute; width: 100vw; height: 100%; filter: url(#noise1); top: -1%; bottom: 0; }
#banner .waves_box::before , #banner .waves_box::after { --duration: 10s; --gapY: 0px; display: block; position: absolute; width: 100%; height: 100%; background-image: url(/images/00/img_banner_waves.webp); background-repeat: repeat; background-size: calc(100vw / var(--ratioW)) 30vh; -webkit-mask-image: linear-gradient(to top, #fff, rgb(255 255 255 / 20%) 10%, transparent, transparent, transparent); mask-image: linear-gradient(to top, #fff, rgb(255 255 255 / 20%) 10%, transparent, transparent, transparent); -webkit-animation: waves calc(var(--duration) * (var(--ratioW))) linear infinite; animation: waves calc(var(--duration) * (var(--ratioW))) linear infinite; opacity: .9; bottom: 0; left: 0; content: ""; }
#banner .waves_box::after { --duration: 11s; --gapY: 10vh; -webkit-animation-delay: -2s; animation-delay: -2s; transform: scale3d(-1, 1, 1); }

#banner .sky_box { position: absolute; width: 100%; height: 100%; background: url(/images/00/img_banner_sky.webp) no-repeat 50%; top: 0; left: 0; }
#banner .sun_box { mix-blend-mode: overlay; position: absolute; width: 100%; height: 100%; top: 0; left: 0; }
#banner .sun_box>div { position: absolute; width: 100%; height: 100%; display: block; transform-origin: 50vw 0; -webkit-animation: sun 7s ease infinite alternate; animation: sun 7s ease infinite alternate; -webkit-mask-image: linear-gradient(to bottom, transparent 15%, white 50%, white 55%, transparent 80%); mask-image: linear-gradient(to bottom, transparent 15%, white 50%, white 55%, transparent 80%); bottom: 0; left: 0; }
#banner .sun_box .sun_layer1 { background: linear-gradient(to right, transparent 39%, white 40%, transparent 41%, transparent 48.5%, white 50%, transparent 51.5%, transparent 53%, white 54%, transparent 55%, transparent 70%, white 71%, transparent 72%); }
#banner .sun_box .sun_layer2 { -webkit-animation-delay: -2s; animation-delay: -2s; -webkit-animation-duration: 7.8s; animation-duration: 7.8s; animation-direction: alternate-reverse; background: linear-gradient(to right, transparent 32%, white 33%, transparent 34%, transparent 38%, white 39%, transparent 40%, transparent 53%, white 54%, transparent 55%, transparent 63.5%, white 65%, transparent 66.5%); }
#banner .sun_box .sun_layer3 { -webkit-animation-delay: -5s; animation-delay: -5s; -webkit-animation-duration: 8.5s; animation-duration: 8.5s; background: linear-gradient(to right, transparent 38.5%, white 40%, transparent 41.5%, transparent 47%, white 48%, transparent 49%, transparent 52%, white 53%, transparent 54%, transparent 60%, white 61%, transparent 62%); }

#banner .banner_mask { position: absolute; width: 100%; height: 100%; background: url(/images/00/img_banner_mask.webp) no-repeat 50% bottom; bottom: 0; }

#scroll_down { position: absolute; right: 5vw; bottom: 10%; }
#scroll_down button { position: relative; width: 126px; aspect-ratio: 1/1; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 2; }
#scroll_down button svg { width: 60%; aspect-ratio: 1/1; fill: var(--primary); }
#scroll_down .circle_box { position: absolute; width: 100%; aspect-ratio: 1/1; -webkit-animation: scroll_circle 50s linear infinite; animation: scroll_circle 50s linear infinite; top: 0; left: 0; }
#scroll_down .circle_box svg { overflow: visible; display: block; }
#scroll_down .circle_box path { fill: none; }
#scroll_down .circle_box text { font-family: 'Jost', sans-serif; text-transform: uppercase; letter-spacing: .21em; font-size: .7em; fill: var(--primary); }

@-webkit-keyframes boat { 0% , 100% { -webkit-transform: translateY(0); } 50% { -webkit-transform: translateY(-5px); } }
@keyframes boat { 0% , 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@-webkit-keyframes waves { 0% { background-position: bottom var(--gapY) left; } 100% { background-position: bottom var(--gapY) left -100vw; } }
@keyframes waves { 0% { background-position: bottom var(--gapY) left; } 100% { background-position: bottom var(--gapY) left -100vw; } }
@-webkit-keyframes sun { 0% { opacity: .1; transform: skew(5deg) scale3d(3, 1.5, 1); } 50% { opacity: .08; transform: skew(0deg) scale3d(1.5, 1, 1); } 100% { opacity: .1; transform: skew(-5deg) scale3d(3, 1, 1); } }
@keyframes sun { 0% { opacity: .1; transform: skew(5deg) scale3d(3, 1.5, 1); } 50% { opacity: .08; transform: skew(0deg) scale3d(1.5, 1, 1); } 100% { opacity: .1; transform: skew(-5deg) scale3d(3, 1, 1); } }
@-webkit-keyframes scroll_circle { 0% { -webkit-transform: rotate(0); } 100% { -webkit-transform: rotate(1turn); } }
@keyframes scroll_circle { 0% { transform: rotate(0); } 100% { transform: rotate(1turn); } }

@media (orientation: portrait) { :root { --ratioW: 1; } }
@media (min-aspect-ratio: 1/1) { :root { --ratioW: 1; } }
@media (min-aspect-ratio: 2/1) { :root { --ratioW: 2; } }
@media (min-aspect-ratio: 3/1) { :root { --ratioW: 3; } }
@media (min-aspect-ratio: 4/1) { :root { --ratioW: 4; } }
@media (min-aspect-ratio: 5/1) { :root { --ratioW: 5; } }

@media screen and (max-width: 1160px) {
	#banner { height: 80vh; background-size: cover }
	#banner .boat_box { width: min(100vw, 1627px) }
	#scroll_down { display: none }
}
@media screen and (max-width: 768px) {
	#banner { height: 60vh; background-size: cover; background-position: center }
	#banner .boat_box { width: min(110vw, 1717px); }
	#banner .banner_mask { background-size: contain; }
}
@media screen and (max-width: 550px) {
	#banner { height: 40vh; }
}