html,body,header,main,footer,div{margin: 0; padding: 0}
html{font-family: pretendard, sans-serif;
	   cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'  width='80' height='96' viewport='0 0 100 100' style='fill:black;font-size:48px;'><text y='50%'>🐟</text></svg>") 0 32, auto;
    scroll-behavior: smooth;
		}

body{overflow-x:hidden; overflow-y:auto;}

main{width: 1280px; margin: auto; z-index: 850;}
body{padding-bottom: 20vw;}


h3,p{font-weight: 600;}
h1,h2,h4{font-family: bc-ludva, sans-serif; font-weight: 400}
	h1{font-size: 192px; filter: drop-shadow(0px 16px 8px rgba(0, 0, 0, 0.2)); text-align: center; }		
	h2{font-size: 56px; text-align: left; margin-top: 160px}
	h3{font-size: 17px; margin-top: 40px; text-align: center;}
	h5{font-size: 17px; margin: 0px; text-align: center;}
	h4{font-size: 36px; text-align: center; margin: 0}
	p{font-size: 17px; line-height: 26px; text-align: left; }
	.brand{color: gray; margin-bottom: 8px}

	.wrapper p{opacity: 0; transform: translateX(-100px); animation: wow 1s forwards;
			animation-delay: 0.3s}
	@keyframes wow{to{opacity: 100; transform: translateX(0px);}
	}

	.absolute { position: absolute; }
	.relative { position: relative; }
	.t-white{color: white;}
	.tight{margin: 0;}


#unfold,#fold{background: rgba(0, 60, 255, 100); border: 3.8px solid white; height: 32px; width: 32px; border-radius: 20px; 
	position: fixed; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2); transition: 0.1s; z-index: 999;}
#unfold:hover,#fold:hover{background: lightgreen; box-shadow: 0px 24px 16px rgba(0, 0, 0, 0.2); 
	cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'  width='80' height='96' viewport='0 0 100 100' style='fill:black;font-size:48px;'><text y='50%'>🎣</text></svg>") 0 32, auto;
	}
#unfold{display: none; transform:rotateY(180deg); top: 20px; left: 260px; }
#fold{transform: rotateY(0deg); top: 20px; left: 20px; }
.arrow {position: relative;}
.arrow::after {position: absolute;
    top: 8px; left: 5px;
    content: '';
    width: 12px;
    height: 12px;
    border-top: 4px solid white;
    border-right: 4px solid white;
    transform: rotate(45deg);}
#navunfold{display: none; background: white; position: fixed; top: 0; left: 0; 
	width: 240px; height: 100vh; padding: 80px 0px 80px 0px;
		box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.2);
		z-index: 999;}
a{display: block; text-decoration: none; color: black; transition: 0.3s; padding-top: 4px; margin-bottom: 80px;}
a:hover{background: rgba(0, 0, 0, 0.1);
	cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'  width='80' height='96' viewport='0 0 100 100' style='fill:black;font-size:48px;'><text y='50%'>🎣</text></svg>") 0 32, auto;
	}



#hero{background: linear-gradient(to bottom,
            rgba(0, 60, 255, 100) 0%,
            rgba(0, 60, 255, 100) 15%,
            rgba(0, 60, 255, 0) 100%); 
	height: 100vh; padding-top: 300px; margin: auto;
	z-index: 900;}



main img{filter: drop-shadow(0px 4px 8px rgba(0, 0, 0, 0.4)); width: 100%}
#lures img{display: block; filter: drop-shadow(0px 64px 18px rgba(0, 0, 0, 0.2)); background: transparent; 
	border:none; padding: 0; margin: 0; transition: 0.3s; 
	cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'  width='80' height='96' viewport='0 0 100 100' style='fill:black;font-size:48px;'><text y='50%'>🎣</text></svg>") 0 32, auto;
}

#lures img:hover{filter: drop-shadow(0px 86px 36px rgba(0, 0, 0, 0.15)) brightness(1.3); scale: 1.2; }

.vh2{height: 6vh; width: auto;}
.vh4{height: 12vh; width: auto;}
.vh6{height: 18vh; width: auto;}
.vh7{height: 21vh; width: auto;}
.vh8{height: 24vh; width: auto;}
.vh9{height: 27vh; width: auto;}


.wrapper{margin: auto; margin-bottom: 40px;}
.flex{display: flex; position: relative; gap: 8%;}
.col2{width: 46%; vertical-align: bottom; }
.button-bg{box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.2);}


.blink{z-index: 700; width: 240px; padding: 8px; padding-top: 12px; background: rgb(0, 60, 255); margin: auto;
	animation: blink 1s infinite alternate;}
@keyframes blink{
  0%	{filter: drop-shadow(0px 32px 16px rgba(0, 0, 0, 0.2));}
  10% {filter: drop-shadow(0px 32px 16px rgba(0, 0, 0, 0.2));}
  50% {filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.3));}
  60% {filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.3));}
  100%{filter: drop-shadow(0px 32px 16px rgba(0, 0, 0, 0.2));}
}



#lures{position: fixed; left:0vw; top:1vw; z-index: 800;}

.fast{position: relative; animation: go 53s infinite; animation-timing-function: linear; opacity: 0}
.slow{position: relative; animation: go 87s infinite; animation-timing-function: linear; opacity: 0}
.sslow{position: relative; animation: go 103s infinite; animation-timing-function: linear; opacity: 0}
@keyframes go{
  0%   {left:-80vw; opacity: 100%}
  100% {left:140vw; opacity: 100%}
}

.re{animation-direction: reverse; transform: scaleX(-1);}
.delay1{animation-delay: 25s}
.delay2{animation-delay: 50s}


.anim2{animation: wabble 2s infinite; animation-timing-function: linear;}
@keyframes wabble{
	0% {transform: rotateY(20deg); filter: drop-shadow(0px 16px 32px rgba(0, 0, 0, 0.1));}
	50% {transform: rotateY(-20deg); filter: drop-shadow(0px 4px 8px rgba(0, 0, 0, 0.4));}
	100% {transform: rotateY(20deg); filter: drop-shadow(0px 16px 32px rgba(0, 0, 0, 0.1));}
}

.animaaa{width: 1280px; animation: aaa 8s infinite; position: absolute;}
@keyframes aaa{
	0% {padding-top: 0px;}
	25% {transform: rotateZ(-10deg);}
	50% {padding-top: 400px;}
	75% {transform: rotateZ(10deg);}
}

.movie{width: 1280px; height: 720px; border: solid white 4px; filter: drop-shadow(0px 4px 8px rgba(0, 0, 0, 0.4));}
footer{z-index: 998; padding-top: 20px; filter: drop-shadow(0px 80px 160px rgba(0, 0, 0, 0.6));}
.container{display: flex; gap: 40px 40px; flex-wrap: wrap;}
.credit{display: block; width: 220px; margin-bottom: 48px; gap: 40px;}
.credit img{width: 100%; filter: drop-shadow(0px 4px 8px rgba(0, 0, 0, 0.2)); background: transparent; 
	border:none; padding: 0; margin: 0; transition: 0.3s; 
	cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'  width='80' height='96' viewport='0 0 100 100' style='fill:black;font-size:48px;'><text y='50%'>🎣</text></svg>") 0 32, auto;
}
 .credit img: hover{filter: drop-shadow(0px 16px 16px rgba(0, 0, 0, 0.15)) brightness(1.3); scale: 1.2; }