@charset "UTF-8";@import url(reset.css); @import url(font.css);

.blank {text-align: center; padding-top: 20px;}
.dark {}
body {min-width: 1920px;min-height: 1080px;background: #000; overflow: hidden; } 
body:before {content: "1920x1080모니터에 최적화되있습니다."; position: absolute; background: #000; color: #fff; padding: 5px; z-index: 10;}
section {min-width: 1920px;min-height: 1080px; height: 100vh; overflow: hidden; position: absolute; /* left: 50%; top: 50%; transform: translate(-50%,-50%); */ display: none; } 

#section1 { display: block; }

#section3 { display: block; }

#section4 { display: block; }

#section6 { display: block; } 

#section8 { display: block; } 

.gogogo {}
.gogogo:hover {position: relative;}
.gogogo:before {content: "NEXT"; position: absolute; color: #fff; }
.gogogo:before {}



/* 유성 */
/* 별들 배경 */
.star { position: absolute; background: white; border-radius: 50%; opacity: 0.8; animation: twinkle 0.2s infinite alternate; } 

@keyframes twinkle { 
 0% { opacity: 0.1; } 
 100% { opacity: 1; } 
 }

/* 유성 컨테이너 */
.meteor { position: absolute; opacity: 0; } 

/* 유성 본체 */
.meteor-head { width: 10px; height: 10px; background: radial-gradient(circle, #ffffff 0%, #87ceeb 50%, transparent 100%); border-radius: 50%; box-shadow: 0 0 10px #87ceeb, 0 0 20px #4169e1, 0 0 30px #1e90ff; } 

/* 유성 꼬리 */
.meteor-tail { position: absolute; top: 50%; left: 50%; transform-origin: 0 0; background: linear-gradient(90deg, 
 rgba(255,255,255,0.8) 0%, 
 rgba(135,206,235,0.6) 30%, 
 rgba(65,105,225,0.4) 60%, 
 transparent 100%); height: 1px; border-radius: 1px; } 

/* 거리감에 따른 크기 및 속도 변화 */
.meteor.far { transform: scale(0.3); } 

.meteor.medium { transform: scale(0.6); } 

.meteor.near { transform: scale(1); } 

.meteor.falling { animation: meteorFall linear; } 

@keyframes meteorFall { 
 0% { opacity: 0; transform: translateX(0) translateY(0) scale(var(--scale)); } 
 10% { opacity: 1; } 
 90% { opacity: 1; } 
 100% { opacity: 0; transform: translateX(var(--end-x)) translateY(var(--end-y)) scale(var(--scale)); } 
 }










section img.bg { position: absolute; min-width: 1920px;  top: 0px; left: 0%; } 
#section1 img.bg {top: -160px; } 
#section2 img.bg {top: -0px;} 
#section3 {top: 0px; height: 1602px;} 
#section3 img.bg {width: 1920px; height: 1602px; } 
#section5 img.bg {top: -160px;} 
#section6 img.bg {top: -60px;} 
#section8 img.bg {width: 1920px; opacity: 0.5;} 

/* #section2 img.bg { margin-top: -250px; position: relative; left: 50%; } */

#section1 .daram_box { position: absolute; z-index: 2; top: 650px; left: 50%; } 
#section1 .daram_box img.daram { } 
#section1 .daram_box img.daram2 { display: none; } 

#section1 .daram_box.active { animation: daramMove1 3s forwards linear; } 
@keyframes daramMove1 { 
 0% { transform: translate(0,0) scale(1); } 
 50% { transform: translate(-100px,-50px) scale(0.8); opacity: 1; } 
 100% { transform: translate(-200px,-50px) scale(0.5); opacity: 0; } 
 }
#section1 .daram_box.active img.daram { display: none; } 
#section1 .daram_box.active img.daram2 { display: block; animation: jump 0.4s infinite alternate ease-in; position: relative; } 
@keyframes jump { 
 0% { top: -50px; } 
 100% { top: 0; } 
 }

.enter-btn-wrap { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 77; } 

.enter-btn { background: linear-gradient(145deg, #ffeeb5, #ffd86b); color: #4b2e05; font-size: 1.5rem; font-weight: bold; padding: 15px 40px; border: none; border-radius: 50px; box-shadow: 0 0 15px rgba(255, 230, 150, 0.8),
 0 0 30px rgba(255, 220, 120, 0.6); cursor: pointer; animation: glow 2s infinite alternate; font-family: 'Cafe24Ssurround', 'DungGeunMo', sans-serif; border: 1px solid #fff; } 

.enter-btn:hover { transform: scale(1.05); box-shadow: 0 0 25px rgba(255, 240, 180, 1),
 0 0 40px rgba(255, 200, 120, 0.8); } 

@keyframes glow { 
 from { box-shadow: 0 0 10px rgba(255, 230, 150, 1),
 0 0 20px rgba(255, 220, 120, 1); } 

 to { box-shadow: 0 0 20px rgba(255, 250, 200, 1),
 0 0 40px rgba(255, 210, 120, 1); } 
 }


.particle-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10; pointer-events: none; } 

.particle { position: absolute; border-radius: 50%; pointer-events: none; animation: fall linear infinite; } 

.firefly { background: radial-gradient(circle, #ffd700 0%, #ffeb3b 30%, transparent 70%); box-shadow: 0 0 20px #ffd700, 0 0 40px #ffd700, 0 0 60px #ffd700; opacity: 0.8; } 

.dust { background: radial-gradient(circle, #ffffff 0%, #e3f2fd 50%, transparent 80%); box-shadow: 0 0 10px #ffffff, 0 0 20px #e3f2fd; opacity: 0.6; } 

.magic { background: radial-gradient(circle, #00ff88 0%, #00bcd4 50%, transparent 70%); box-shadow: 0 0 15px #00ff88, 0 0 30px #00bcd4; opacity: 0.7; } 

@keyframes fall { 
 0% { transform: translateY(-100px) translateX(0px) rotate(0deg); opacity: 0; } 

 10% { opacity: 1; } 

 90% { opacity: 1; } 

 100% { transform: translateY(calc(100vh + 100px)) translateX(var(--drift)) rotate(360deg); opacity: 0; } 
 }

@keyframes twinkle { 0%,
 100% { opacity: 0.3; transform: scale(2.8); } 

 50% { opacity: 1; transform: scale(1.2); } 
 }

.twinkle { animation: twinkle 2s ease-in-out infinite, fall linear infinite; } 

.forest-silhouette { position: absolute; bottom: 0; left: 0; width: 100%; height: 40%; background: linear-gradient(to top, #000000 0%, transparent 100%); z-index: 5; } 

.tree { position: absolute; bottom: 0; background: #000; border-radius: 50% 50% 0 0; } 

.tree1 { left: 10%; width: 80px; height: 200px; } 

.tree2 { left: 25%; width: 120px; height: 250px; } 

.tree3 { right: 15%; width: 100px; height: 220px; } 

.tree4 { right: 35%; width: 90px; height: 180px; } 

.controls { position: fixed; top: 20px; right: 20px; z-index: 100; background: rgba(0, 0, 0, 0.7); padding: 15px; border-radius: 10px; color: white; font-family: Arial, sans-serif; } 

.control-button { background: #4CAF50; color: white; border: none; padding: 8px 15px; margin: 5px; border-radius: 5px; cursor: pointer; transition: background 0.3s; } 

.control-button:hover { background: #45a049; } 

.info { position: fixed; bottom: 20px; left: 20px; z-index: 100; background: rgba(0, 0, 0, 0.7); padding: 15px; border-radius: 10px; color: white; font-family: Arial, sans-serif; font-size: 14px; } 




/* section2 */
#section2 .frame { width: 623px; height: 539px; position: relative; z-index: 1; background: url('../images/part2-figure.png') no-repeat; 
    top: 50%; left: 50%; transform: translate(-750px,-70%); perspective: 800px; } 
#section2 .thumb { position:absolute; left:55%; top:50%;
  transform:translate(-50%,-50%);width:250px;text-align:center;} 
/* #section2 .thumb:before { content: ""; position: absolute; width: 100%; height: 100%; background: rgba(239,228,202,0.2);; } */
#section2 .thumb figcaption { position: static !important;transform: rotate(1deg) !important;;margin-top: 10px;white-space: nowrap;         
  text-align: center;display: block;white-space: nowrap; overflow: hidden;text-overflow: ellipsis; } 
#section2 .thumb img { width:250px; height:250px;display:block; } 
#section2 .circle_box {position: absolute; top: 600px; left: 0; width: 100%; height: 300px; z-index: 10;transform: rotate(1deg) !important } 
#section2 .circle_box li {position: absolute; width: 80px; height: 80px; border-radius: 50%; background: #fff; 
    border: 3px solid #F9C713; box-shadow: 0 0 20px rgba(250,200,20,0.8), 0 0 50px rgba(250,200,20,0.8),0 0 50px rgba(250,200,20,0.8); 
    left: 50%; bottom: 10px; animation: circle_box 1s infinite linear alternate; transition: .2s; cursor: pointer; } 

#section2 .circle_box li:before { content: ""; position: absolute; width: 100%; height: 100%; left: 0; top: 0; z-index: 1; 
    transform: scale(1.3); border-radius: 50%; border-top: 2px solid rgba(250,250,20,0.8); 
    border-bottom: 2px solid rgba(250,200,20,0.8); transition: 1s; box-shadow: 0 0 20px rgba(250,200,20,0.8) } 

#section2 .circle { position: absolute; border-radius: 50%; overflow: hidden; width: 80px; height: 80px; } 
@keyframes circle_box { 
 0% { bottom: 20px; } 
 100% { bottom: 0px; } 
 }
#section2 .circle_box li img { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); } 

#section2 .circle_box li:nth-child(1) { transform: translate(-900px, -50px) scale(0.7); animation-delay: 0s; } 
#section2 .circle_box li:nth-child(2) { transform: translate(-400px, -150px); animation-delay: 0.6s; } 
#section2 .circle_box li:nth-child(3) { transform: translate(-300px, 0px) scale(0.9); animation-delay: 0.5s; } 
#section2 .circle_box li:nth-child(4) { transform: translate(-100px, -20px) scale(0.6); animation-delay: 0.8s; } 
#section2 .circle_box li:nth-child(5) { transform: translate(50px, -80px) scale(0.6); animation-delay: 0.2s; } 
#section2 .circle_box li:nth-child(6) { transform: translate(250px, -50px) scale(0.8); animation-delay: 0.6s; } 
#section2 .circle_box li:nth-child(1):hover { transform: translate(-900px, -50px) scale(1.1); } 
#section2 .circle_box li:nth-child(1):hover:before { transform: scale(1.3) rotate(3600deg); transition: 6s;; } 
#section2 .circle_box li:nth-child(2):hover { transform: translate(-400px, -150px) scale(1.1); } 
#section2 .circle_box li:nth-child(2):hover:before { transform: scale(1.3) rotate(3600deg); transition: 6s;; } 
#section2 .circle_box li:nth-child(3):hover { transform: translate(-300px, 0px) scale(1.1); } 
#section2 .circle_box li:nth-child(3):hover:before { transform: scale(1.3) rotate(3600deg); transition: 6s;; } 
#section2 .circle_box li:nth-child(4):hover { transform: translate(-100px, -20px) scale(1.1); } 
#section2 .circle_box li:nth-child(4):hover:before { transform: scale(1.3) rotate(3600deg); transition: 6s;; } 
#section2 .circle_box li:nth-child(5):hover { transform: translate(50px, -80px) scale(1.1); } 
#section2 .circle_box li:nth-child(5):hover:before { transform: scale(1.3) rotate(3600deg); transition: 6s;; } 
#section2 .circle_box li:nth-child(6):hover { transform: translate(250px, -50px) scale(1.1); } 
#section2 .circle_box li:nth-child(6):hover:before { transform: scale(1.3) rotate(3600deg); transition: 6s;; } 

/* #section2 .thumb figcaption.minFont {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%) rotate(1deg); /* 중심 잡고 회전 */
  
 #section2 .thumb figcaption.minFont
 { transform-origin: center;
font-size: 28px;
  text-align: center;
  display: inline-block; }

#section2 .daram_box { position: absolute; z-index: 20; top: 640px; left: 1300px; width: 312px; height: 277px; background: url('../images/2-0.png'); } 
#section2.on .daram_box { animation: daram_swing 0.2s steps(3); } 
@keyframes daram_swing { 
 0% { background-position: 0px 0; } 
 100% { background-position: -936px 0; } 
 }

#section2 .daram_box img.daram { display: block; } 
#section2 .daram_box img.daram2 { display: none; } 
#section2 .dotory { position: absolute; width: 1500px; height: 1500px; top: 400px; right: 350px; border-radius: 50%; z-index: 7; opacity: 0; border: 0px solid #000; } 
#section2.on .frame { animation: frame 0.2s forwards; transform-origin: top; animation-delay:0.4s; } 
@keyframes frame { 
 0% { transform:translate(-750px,-70%) rotate(0); } 
 25% { transform:translate(-750px,-70%) rotate(5deg); } 
 50% { transform:translate(-750px,-70%) rotate(0deg); } 
 75% { transform:translate(-750px,-70%) rotate(2deg); } 
 100% { transform:translate(-750px,-70%) rotate(0deg); } 
 }
#section2.on .dotory { animation: dotory 0.3s forwards linear; animation-delay: 0.1s; } 
@keyframes dotory { 
 0% { transform: rotate(0); } 
 10% { transform: rotate(0); opacity: 1; } 
 80% { transform: rotate(-50deg); opacity: 1; } 
 100% { transform: rotate(-60deg); opacity: 0; } 
 }
#section2 .dotory img { position: absolute; right: 60px; top: 250px; } 

#section2 .dotory2 { position: absolute; right: 50px; top: 780px; opacity: 0;z-index: 30;} 
#section2 .dotory2.on { animation: dotory2 1s forwards; animation-delay: 0.6s; } 
@keyframes dotory2 { 
 0% { top: 0; animation-timing-function: ease-in; transform: rotate(45deg); } 
 40% { top: 790px; animation-timing-function: ease-out; transform: rotate(-145deg); opacity: 1; } 
 60% { top: 740px; animation-timing-function: ease-in; transform: rotate(125deg); } 
 80% { top: 795px; animation-timing-function: ease-out; transform: rotate(10deg); } 
 90% { top: 760px; animation-timing-function: ease-in; transform: rotate(10deg); } 
 100% { top: 795px; animation-timing-function: ease-out; transform: rotate(0deg); opacity: 1; } 
 }




/* section3 */
#section3 { min-height:100vh; } 
/* #section3 img.bg { height: auto; object-fit: contain; }  */

#section3 .dotory_dongdong { position: absolute; z-index: 4; left: 1650px; top: 550px; width: 133px; height: 140px; opacity: 0; } 
#section3 .dotory_dongdong.on { animation: dongdong .2s forwards linear; } 
@keyframes dongdong { 
 0% { opacity: 0; } 
 100% { opacity: 1; } 
 }
#section3 .dotory_dongdong img { position: absolute; bottom: 0; } 
#section3 .dotory_dongdong img.dotory_water { position: absolute; left: -20px; bottom: 10px; animation: dotoryWater 1s infinite alternate linear; } 
@keyframes dotoryWater { 
 0% { top: 20px; } 
 100% { top: 0px; } 
 }

#section3 .btn_click { width: 133px; height: 112px; position: absolute; left: 150px; top: 650px; z-index: 4; background: url('../images/btn_click_down.png'); animation: btnDown .2s infinite steps(2); } 
@keyframes btnDown { 
 0% { background-position: 0 0; } 
 100% { background-position: -266px 0; } 
 }

#section3 .daram_box .daram1 { position: absolute; } 
#section3 .daram_box .daram2 { display: none; } 
#section3 .daram_box.on img.daram1 { display: none; } 
#section3 .daram_box.on img.daram2 { display: block; } 

#section3 .daram_box { width: 427px; height: 427px; position: absolute; top: -150px; left: 1000px; transform: translate(-240px,30px) scale(0.5) rotateY(180deg); z-index: 3; transform-origin: top; } 
#section3 .daram_box:before { content: ""; position: absolute; width: 50%; height: 40px; border-radius: 50%; background: #000; bottom: 50px; left: 50%; transform: translateX(-50%); filter: blur(3px); z-index: -1; } 

/* 1 */
#section3 img.bg { transition: .3s; } 
#section3 .daram_box.on1 { animation: part3_daram_box1 1s forwards; } 
#section3 .daram_box.on1 .daram1 { animation: part3_daramji1 0.6s forwards; } 
#section3 .daram_box.on1:before { animation: part3_shadow1 1s forwards } 
#section3 img.bg.on1 { top: -40px; } 
#section3 img.bg.on2 { top: -200px; } 
#section3 img.bg.on3 { top: -300px; } 
#section3 img.bg.on4 { top: -400px; } 
#section3 img.bg.on5 { top: -500px; } 
#section3 img.bg.on6 { top: -650px; } 
@keyframes part3_daram_box1 { 
 0% { transform: translate(-240px,30px) scale(0.5) rotateY(180deg); } 
 100% { transform: translate(-100px,80px) scale(0.55) rotateY(180deg); } 
 }

@keyframes part3_daramji1 { 
 0% { top: 0px; transition-timing-function: ease-in; } 
 50% { top: -100px; transition-timing-function: ease-out; } 
 99% { top: 0px; transition-timing-function: ease-in; transform: rotateY(0deg); } 
 100% { top: 0px; transition-timing-function: ease-in; transform: rotateY(-180deg); } 
 }

@keyframes part3_shadow1 { 
 0% { bottom: 90px; transition-timing-function: ease-in; } 
 50% { bottom: 50px; transition-timing-function: ease-out; } 
 100% { bottom: 50px; transition-timing-function: ease-in; } 
 }

/* 2 */
#section3 .daram_box.on2 { animation: part3_daram_box2 1s forwards; transform: translate(-150px,100px) scale(0.55) rotateY(180deg) } 
#section3 .daram_box.on2 .daram1 { animation: part3_daramji2 0.6s forwards; top: 0px; transition-timing-function: ease-in; transform: rotateY(-180deg); } 
#section3 .daram_box.on2:before { animation: part3_shadow2 1s forwards } 

@keyframes part3_daram_box2 { 
 0% { transform: translate(-100px,80px) scale(0.55) rotateY(180deg); } 
 100% { transform: translate(-250px,60px) scale(0.65) rotateY(180deg); bottom: 90px; transition-timing-function: ease-in; } 
 }

@keyframes part3_daramji2 { 
 0% { top: 0px; transition-timing-function: ease-in; transform: rotateY(-180deg); } 
 50% { top: -100px; transition-timing-function: ease-out; transform: rotateY(-180deg); } 
 100% { top: 0px; transition-timing-function: ease-in; transform: rotateY(0deg); } 
 }

@keyframes part3_shadow2 { 
 0% { bottom: 90px; transition-timing-function: ease-in; } 
 50% { bottom: 50px; transition-timing-function: ease-out; } 
 100% { bottom: 50px; transition-timing-function: ease-in; } 
 }

/* 3 */
#section3 .daram_box.on3 { animation: part3_daram_box3 1s forwards; transform: translate(-150px,100px) scale(0.55) rotateY(180deg) } 
#section3 .daram_box.on3 .daram1 { animation: part3_daramji3 0.6s forwards; top: 0px; transition-timing-function: ease-in; transform: rotateY(-180deg); } 
#section3 .daram_box.on3:before { animation: part3_shadow3 1s forwards } 

@keyframes part3_daram_box3 { 
 0% { transform: translate(-250px,60px) scale(0.65) rotateY(0deg); } 
 100% { transform: translate(-50px,40px) scale(0.75) rotateY(0deg); bottom: 90px; transition-timing-function: ease-in; } 
 }

@keyframes part3_daramji3 { 
 0% { top: 0px; transition-timing-function: ease-in; transform: rotateY(-180deg); } 
 50% { top: -100px; transition-timing-function: ease-out; transform: rotateY(-180deg); } 
 100% { top: 0px; transition-timing-function: ease-in; transform: rotateY(0deg); } 
 }

@keyframes part3_shadow3 { 
 0% { bottom: 90px; transition-timing-function: ease-in; } 
 50% { bottom: 50px; transition-timing-function: ease-out; } 
 100% { bottom: 50px; transition-timing-function: ease-in; } 
 }

/* 4 */
#section3 .daram_box.on4 { animation: part3_daram_box4 1s forwards; transform: translate(-150px,100px) scale(0.55) rotateY(180deg) } 
#section3 .daram_box.on4 .daram1 { animation: part3_daramji4 0.6s forwards; top: 0px; transition-timing-function: ease-in; transform: rotateY(-180deg); } 
#section3 .daram_box.on4:before { animation: part3_shadow4 1s forwards } 

@keyframes part3_daram_box4 { 
 0% { transform: translate(-50px,40px) scale(0.75) rotateY(0deg); } 
 100% { transform: translate(-320px,150px) scale(0.8) rotateY(0deg); bottom: 90px; transition-timing-function: ease-in; } 
 }

@keyframes part3_daramji4 { 
 0% { top: 0px; transition-timing-function: ease-in; transform: rotateY(0deg); } 
 50% { top: -100px; transition-timing-function: ease-out; transform: rotateY(0deg); } 
 100% { top: 0px; transition-timing-function: ease-in; transform: rotateY(-180deg); } 
 }

@keyframes part3_shadow4 { 
 0% { bottom: 90px; transition-timing-function: ease-in; } 
 50% { bottom: 50px; transition-timing-function: ease-out; } 
 100% { bottom: 50px; transition-timing-function: ease-in } 
 }

/* 5 */
#section3 .daram_box.on5 { animation: part3_daram_box5 1s forwards; transform: translate(-150px,100px) scale(0.55) rotateY(180deg) } 
#section3 .daram_box.on5 .daram1 { animation: part3_daramji5 0.6s forwards; top: 0px; transition-timing-function: ease-in; transform: rotateY(-180deg); } 
#section3 .daram_box.on5:before { animation: part3_shadow5 1s forwards } 

@keyframes part3_daram_box5 { 
 0% { transform: translate(-320px,150px) scale(0.8) rotateY(0deg); } 
 100% { transform: translate(-120px,300px) scale(0.9) rotateY(0deg); bottom: 90px; transition-timing-function: ease-in; } 
 }

@keyframes part3_daramji5 { 
 0% { top: 0px; transition-timing-function: ease-in; transform: rotateY(-180deg); } 
 50% { top: -100px; transition-timing-function: ease-out; transform: rotateY(-180deg); } 
 100% { top: 0px; transition-timing-function: ease-in; transform: rotateY(-180deg); } 
 }

@keyframes part3_shadow5 { 
 0% { bottom: 90px; transition-timing-function: ease-in; } 
 50% { bottom: 50px; transition-timing-function: ease-out; } 
 100% { bottom: 50px; transition-timing-function: ease-in } 
 }

/* 6 */
#section3 .daram_box.on6 { animation: part3_daram_box6 1s forwards; transform: translate(-150px,100px) scale(0.55) rotateY(180deg); } 
#section3 .daram_box.on6 .daram1 { animation: part3_daramji6 0.6s forwards; top: 0px; transition-timing-function: ease-in; transform: rotateY(-180deg); } 
#section3 .daram_box.active .daram2 { top: 50px; left: 100px; position: relative; z-index: 2; } 
#section3 .daram_box.on6:before { animation: part3_shadow6 1s forwards } 

@keyframes part3_daram_box6 { 
 0% { transform: translate(-120px,300px) scale(0.9) rotateY(0deg); } 
 100% { transform: translate(180px,450px) scale(1) rotateY(0deg); bottom: 90px; transition-timing-function: ease-in; } 
 }

@keyframes part3_daramji6 { 
 0% { top: 0px; transition-timing-function: ease-in; transform: rotateY(-180deg); } 
 50% { top: -100px; transition-timing-function: ease-out; transform: rotateY(-180deg); } 
 100% { top: 0px; transition-timing-function: ease-in; transform: rotateY(0deg); } 
 }

@keyframes part3_shadow6 { 
 0% { bottom: 90px; transition-timing-function: ease-in; } 
 50% { bottom: 50px; transition-timing-function: ease-out; } 
 100% { bottom: 20px; transition-timing-function: ease-in } 
 }


#section3 .box { position: absolute; top: 1000px; left: 840px; z-index: 5; transition: .3s; } 
#section3 .box .box_open { display: none; } 
#section3 .box .box1.on6 { display: none; } 
#section3 .box .box_open.on6 { display: block; animation: zizin 0.1s linear forwards alternate; animation-iteration-count:10;  } 
@keyframes zizin { 
 0% { transform: translateX(-50px); display: block; } 
 100% { transform: translateX(0px); display: block; } 
 }
 #section3 .box.on3 { top: 600px; } 
#section3 .box.on4 { top: 500px; } 
#section3 .box.on5 { top: 400px; } 
#section3 .box.on6 { top: 260px; } 

#section3 .dotory_pre { position: absolute; top: 1200px; left: 900px; z-index: 6; transition: .3s; } 
#section3 .dotory_pre.on3 { top: 800px; } 
#section3 .dotory_pre.on4 { top: 700px; } 
#section3 .dotory_pre.on5 { top: 600px; } 
#section3 .dotory_pre.on6 { top: 460px; } 


#section3 .banner_box { position: absolute; left: 200px; top: 50px; transform: translate(0px,0); width: 1000px; z-index: 6; } 
#section3 .banner_box ul { display: flex; gap: 50px; flex-wrap: wrap; } 
#section3 .banner_box ul li { position: absolute; background: #fff; width: 0px; height: 0px; transition: 0.5s; left: 700px; top: 600px; opacity: 0; } 
#section3 .banner_box.on6 ul li:nth-child(1) { width: 360px; height: 150px; opacity: 1; left: 0px; top: 0; transition-delay:0s; } 
#section3 .banner_box.on6 ul li:nth-child(2) { width: 360px; height: 150px; opacity: 1; left: 400px; top: 0; transition-delay:0.1s; } 
#section3 .banner_box.on6 ul li:nth-child(3) { width: 360px; height: 150px; opacity: 1; left: 800px; top: 0; transition-delay:0.2s; } 
#section3 .banner_box.on6 ul li:nth-child(4) { width: 360px; height: 150px; opacity: 1; left: 0px; top: 200px; transition-delay:0.3s; } 
#section3 .banner_box.on6 ul li:nth-child(5) { width: 360px; height: 150px; opacity: 1; left: 400px; top: 200px; transition-delay:0.4s; } 
#section3 .banner_box.on6 ul li:nth-child(6) { width: 360px; height: 150px; opacity: 1; left: 800px; top: 200px; transition-delay:0.5s; } 
#section3 .banner_box.on6 ul li:nth-child(7) { width: 360px; height: 150px; opacity: 1; left: 0px; top: 400px; transition-delay:0.6s; } 
#section3 .banner_box.on6 ul li:nth-child(8) { width: 360px; height: 150px; opacity: 1; left: 400px; top: 400px; transition-delay:0.7s; } 



/* section4 */
#section4 .daram4 { position: absolute; z-index: 11; left: 400px; top: 500px;/*  transform: translate(-500px,-50px);  */} 
#section4 .daram4 { animation: daram4 5s forwards; transform: scale(1.5); animation-delay: 2s}
@keyframes daram4 {
    0% {left: 400px; top: 500px; transform: scale(1.5);}
    100% {left: 550px; top: 620px; transform: scale(1);}
}
#section4 .daram4 .ddo  {perspective: 330px;}
#section4 .daram4.on .ddo {animation: ddo 3s forwards; position: absolute; }
@keyframes ddo {
    0% {left: 0;}
    80% {left: -450px; transform: scale(0.4); opacity: 1;}
    100% {left: -450px; transform: scale(0.4); opacity: 0;}
}
#section4 .daram4 .ddo .daramji4 {position: relative;opacity: 1;z-index: 3;}
#section4 .daram4.on .ddo .daramji4 {opacity: 0;}
#section4 .daram4 .ddo .daramji4-2 {width: 250px; position: absolute; left: 0; top: -30px; opacity: 0;z-index: 3;}
#section4 .daram4.on .ddo .daramji4-2 {animation: goDaram 0.2s infinite alternate; opacity: 1;transition-timing-function: ease-out; top: -20px;}
@keyframes goDaram {
    0% {top: -20px; }
    100% {top: -90px; }
}
#section4 .ddo  {}
#section4 .ddo .ddo_shadow {position: absolute; bottom: -20px; right: 70px;width: 80px; height: 40px; transform-origin: top; transform: rotate(0deg); background: #000; border-radius: 50%; z-index: 1;opacity: 0; }
#section4 .ddo.on .ddo_shadow {animation: ddoShadow 0.2s infinite alternate;}
@keyframes ddoShadow {
    0% {transform: rotate(0deg) scale(1); opacity: .2;}
    100% {transform: rotate(0deg) scale(0.5); opacity: .5}
}

#section4 .textbox { position: absolute; z-index: 4; left: 50%; top: 50%; transform: translate(300px,-300px); color: #fff; font-size: 24px; z-index: 11; perspective: 500px;}
#section4 .textbox p { animation: part4Text 3s forwards cubic-bezier(.24,.58,.46,1.01); transform-origin: right; opacity: 0; position: relative;line-height: 2.5}
@keyframes part4Text {
    0% {transform: rotateY(-90deg) skewY(30deg); opacity: 0; top: 200px; line-height: 2.5;}
    100% {transform: rotateY(0) skewY(0deg); opacity: 1; top: 0; line-height: 1.4;}
}
#section4 .textbox p:nth-child(1) {animation-delay: 0s;}
#section4 .textbox p:nth-child(2) {animation-delay: 0.2s;}
#section4 .textbox p:nth-child(3) {animation-delay: 0.4s;}
#section4 .textbox p:nth-child(4) {animation-delay: 0.6s;}


.yusung {z-index: 5; position: absolute; top: 0; left: 0; width: 100%; height: 100vh; pointer-events: none; }
#section4 .bg_hill { position: absolute; z-index: 10; left: 0%;  transform: translate(0,0); } 
#section4 .bg5 {animation: section4Bg 5s linear forwards; object-fit: none; z-index: 4;animation-delay: 2s}
@keyframes section4Bg {
    0% {transform: scale(1.2);}
    100% {transform: scale(1.5);}
}

#section4 .bg_hill {animation: bg_hill 5s forwards;transform: scale(2.1);animation-delay: 2s; top: 0px;}
@keyframes bg_hill {
    0% {transform: scale(2.1); top: -4zzzzzzzzzzz0px;}
    100% {transform: scale(1); top: 210px;}
}

#section4 .textbox .go_home {display: inline-block; animation: goHome 3s forwards; border-radius: 50px; animation-delay: 7s; cursor: pointer;}
#section4 .textbox .go_home:hover {transform: scale(1.05);}
@keyframes goHome {
    0% {padding: 0;}
    40% {padding: 10px 20px; background: #fff; color: #000; transform: rotateY(0); pointer-events: fill;}
    100% {padding: 10px 20px; background: #000; color: #fff; transform: rotateY(720deg); }
}




 /* section5 */
 #section5 {}
 #section5 .door{position: absolute; width: 110px; height: 300px; z-index: 3; left: 777px; top: 450px;}
 #section5 .door:before {content: ""; width: 60px; height: 70px; border-radius: 50%; background: rgba(255,255,255,0);  position: absolute; left: 24px; top: 48px; box-shadow: 0 0 30px rgba(255,255,255,0);}
 #section5 .door:hover:before {background: rgba(255,255,255,0.3);box-shadow: 0 0 40px rgba(255,255,255,1);}
 #section5 .door.on:before {background: rgba(255,255,255,0.4);box-shadow: 0 0 40px rgba(255,255,255,1),0 0 60px rgba(255,255,0,1);}
 #section5 .daram5 {}
 #section5 .daram5 {position: absolute; z-index: 3; right: 0px; top: 650px; }
 #section5 .daram5 .daramji5 {}
 #section5 .daram5 .daramji5-2 {width: 300px; display: none; position: relative;}
 #section5 .daram5.on {animation:daram5 2s forwards linear;}
 @keyframes daram5 {
    0% { right: 0px; }
    80% { right: 800px; opacity: 1;}
    100% { right: 800px; opacity: 0;}
}
#section5 .daram5.on .daramji5-2 {animation:daram5-2 .2s alternate infinite;}
@keyframes daram5-2 {
   0% { top: 0px; }
   100% { top:-50px; }
}

 


/* section6 */
#section6 .bg.on {animation:section6 .1s forwards; animation-delay: .3s;}
@keyframes section6 {
    0% {margin-top: 0;}
    50% {margin-top: -8px;}
    80% {margin-top: 0px;}
    90% {margin-top: -6px;}
    100% {margin-top: 0px;}
}
#section6 .yusung {transform: rotate(40deg); top: 200px; left: -500px;}

#section6 .daram6 {position: absolute; z-index: 3; left: 270px; top: 315px; transition: 0.5s; }
#section6 .daram6 .daram6_box:before {content:"?"; position: absolute; background: #000; color: #fff; padding: 5px; z-index: 5; width: 20px; height: 20px; border-radius: 50%; display: flex; justify-content: center; align-items: center; left: 70%; top: 60px; }
#section6 .daram6.on {left:640px; top:465px; }
#section6 .daram6.on .daram6_box {animation:daram6_box .4s forwards; position: relative;}
@keyframes daram6_box {
    0% {top: 0;}
    50% {top: -100px;}
    80% {top: 0px;}
    90% {top: -15px;}
    100% {top: 0px;}
}
#section6 .daram6 .daram6_box .daramji6 {transform: rotateY(180deg) scale(0.7);cursor: pointer;}
#section6 .daram6 .daram6_box .daramji6-2 {display: none; position: relative; left: 60px; top: 50px; width: 200px; }
/* #section6 .daram6 .ddo_shadow {position: absolute; width: 100px; height: 20px; background: #000; bottom: 30px; left: 40%; border-radius: 50%; z-index: -1; filter: blur(10px);} */
/* #section6 .daram6.on .ddo_shadow {position: absolute; width: 100px; height: 20px; background: #000; bottom:-40px; left: 40%; border-radius: 50%; z-index: -1; filter: blur(10px);} */

#section6 .screen_box {position: absolute; width: 800px; height: 450px; left: 850px; top:430px; transform-origin: left top; perspective: 800px; transform-style: preserve-3d; }
#section6 .screen_box.on {animation:section6 .1s forwards; animation-delay: .3s;}

#section6 .screen_box .screen {position: relative;}
#section6 .screen_box img {width: 100%; position: absolute;left: 0;top: 0; transition: 4s;}
#section6 .screen_box figure { opacity: 0;}
#section6 .screen_box.on figure {animation: part6Img 0.2s forwards; animation-delay: .3s;}
/* #section6 .screen_box .screen {border: 1px solid lime;} */
#section6 .screen_box.on .screen1 img {animation-delay: .4s;}
#section6 .screen_box.on .screen2 img {animation-delay: .5s;}
@keyframes part6Img {
    0% {opacity: 0;}
    30% {opacity: 1;}
    40% {opacity: 0;}
    100% {opacity: 1;}
}

#section6 .screen_box .screen1 {position: absolute; width: 275px; height: 170px; left: 37px; top: 52px; background: rgba(0,0,0,1); border-radius: 3px; transform: rotate(8deg) rotateY(-10deg); }
#section6 .screen_box .mobile1 {position: absolute; width: 63px; height: 110px; left: 347px; top: 135px; background: rgba(0,0,0,1); border-radius: 3px; transform: rotate(11.5deg) rotateY(-10deg); }

#section6 .screen_box .screen2 {position: absolute; width: 262px; height: 190px; left: 445px; top: 98px; background: rgba(0,0,0,1); border-radius: 3px; transform: rotate(10.6deg) rotateY(-12deg); }
#section6 .screen_box .mobile2 {position: absolute; width: 109px; height: 40px; /* left: 645px; top: 340px; */ background: rgba(0,0,0,1); border-radius: 3px; transform: skewX(-62deg) rotate(10deg) translate(1398px,139px); }

#section6 .screen_box .screen figure {width: 100%; height: 100%; overflow: hidden;  position: relative; border: 1px solid #000;}
#section6 .screen_box .screen figure img {}

.screen_box .screen .ex {position: absolute; width: 100%; height: 30px; z-index: 7; bottom:100%; color: #fff; display: flex; align-items: center; padding: 20px; box-sizing: border-box;background: rgba(0,0,0,0.3); backdrop-filter: blur(4px); opacity: 0;}
.screen_box .screen .ex.on {animation:ex 0.5s forwards; animation-delay: .3s;}
@keyframes ex {
    0% {bottom: 100%; opacity: 0;}
    80% {bottom: 110%; opacity: 1;}
    100% {bottom: 110%; opacity: 1;}
}

.pagination {position: absolute; z-index: 10; display: flex; left: 960px; top: 740px; transform: rotate(12deg); justify-content: center; /* background: rgba(255,255,255,0.3); backdrop-filter: blur(4px);  */transform: skewY(13deg);transform-style:preserve-3d; perspective: 800px; overflow: hidden; padding-right: 100px; padding-top: 30px; }
.pagination:before {content: ""; position: absolute; width: 70%; height: 100%; background: rgb(0,0,0,0); backdrop-filter: blur(10px); transform-origin: left bottom; transform: rotateX(70deg) skewX(-30deg); z-index: -1;bottom: 0;}
.pagination span {width: 50px; position: relative; top: 50px; cursor: pointer;}
.pagination.on span {animation: dotos 1s forwards; }
@keyframes dotos {
    0% {top:50px; transform: rotate(0deg); animation-timing-function: ease-out;}
    80% {top:-10px; transform: rotate(900deg); animation-timing-function: ease-in;}
    100% {top:0px; transform: rotate(900deg);}
}
.pagination span:nth-child(1) {animation-delay: 0.2s; margin-left: 40px;}
.pagination span:nth-child(2) {animation-delay: 0.4s;}
.pagination span:nth-child(3) {animation-delay: 0.5s;}
.pagination span:nth-child(4) {animation-delay: 0.65s;}
.pagination span img {width: 100%;}
.pagination span.on img {transform: rotate(0deg) scale(1.5);}
.pagination.on:before { animation: dotos2 0.2s forwards; animation-delay: .3s;}

@keyframes dotos2 {
    0% {top:50px; background: rgb(255,255,255,0);}
    60% {top:-20px; background: rgb(255,255,255,0.4);}
    100% {top:0px; background: rgb(255,255,255,0.4);backdrop-filter: blur(10px);}
}

.pagination .web {display: none;}




#section6 .dotory_pre { position: absolute; top: 750px; left: 1650px; z-index: 16; transition: .3s; transform: rotate(10deg); cursor: pointer;} 



/* section7 */
#section7 {}
#section7 .daram_box {position: absolute; z-index: 2; top: 550px; left: 510px;  width: 530px; height: 700px;  transform: rotate(32deg); overflow: hidden;}
#section7 .daram_box .daram7 {transform:rotate(-32deg); position: relative; left: 100px; top: 300px; }
#section7 .daram_box.on .daram7 {animation: daram7 2.3s forwards linear; animation-delay: 1s;}
@keyframes daram7 {
    0% {top: 300px; left: 100px;transform:rotate(-32deg) scale(1)}
    80% {top: 50px; left: 200px;transform:rotate(-32deg) scale(0.8); opacity: 1;}
    100% {top: 0px; left: 350px;transform:rotate(-32deg) scale(0.6); opacity: 0;}
}

#section7 .daram_box .daram7 img {transform:rotateY(180deg); animation: daram7Img .6s infinite; position: relative; animation-delay: 1s; }
@keyframes daram7Img {
    0% { top: 0px; transition-timing-function: ease-in; } 
    50% { top: -100px; transition-timing-function: ease-out; } 
    100% { top: 0px; }
}




/* section8 */

#section8 {}
#section8 .daram8 {position: absolute; z-index: 2; top: 570px; left: 880px;}
#section8 .text {border: 1px solid #000; position: absolute; z-index: 2; left: 50%; top: 400px; font-size: 24px; color: #fff; text-align: center; line-height: 2; padding: 30px; background: rgba(0,0,0,0.7); backdrop-filter: blur(10px); opacity: 0; transform: translateX(-50%);}
#section8 .text {animation: part8Text 5s forwards; animation-delay: 2s;}
@keyframes part8Text {
    0% {top: 400px; opacity: 0;}
    100% {top: 200px; opacity: 1;}
}

#section8 .photo_box {position: absolute; z-index: 2; left: 50%; width: 1400px;transform: translateX(-50%);}
#section8 .photo_box ul {display: flex; flex-wrap: wrap; justify-content: space-between; transform-style: preserve-3d; perspective: 800px; text-align: left; gap: 20px;}
#section8 .photo_box ul li {width: 34%; background: rgba(255,255,255,0.1); backdrop-filter: blur(10px); }
#section8 .photo_box ul li:nth-child(odd) {text-align: center; transform-origin: left bottom; transform: rotateY(85deg);
    animation: part8Li 2s forwards;}
#section8 .photo_box ul li:nth-child(even) {text-align: center;transform-origin: right bottom; transform: rotateY(-85deg);
    animation: part9Li 2s forwards;}
#section8 .photo_box ul li img {width: 200px;}

@keyframes part8Li {
    0% {transform: rotateY(85deg) translateY(1000px); opacity: 0; }
    100% {transform: rotateY(85deg) translateY(0px); opacity: 1; }
}
@keyframes part9Li {
    0% {transform: rotateY(-85deg) translateY(1000px); opacity: 0; }
    100% {transform: rotateY(-85deg) translateY(0px); opacity: 1; }
}

#section8 .photo_box ul li:hover {background: rgba(255,255,255,1);}



#section8 .daram8 {width: 376px; height: 376px; background: url(../images/10.png); animation: bg9 0.2s steps(4) infinite; } 
@keyframes bg9 {
 0% { background-position: 0 0; }
 100% { background-position: -1504px 0; }
 }