@charset "utf-8";

main, section{position: relative;}

/* 메인 */
#main{background: #ff2792; height: 960px; overflow: hidden;}
#main .title{position: absolute; top: 267px; left: 50%; margin-left: -686px;}
#main .main_timer{background: #b70c47; padding: 35px 35px 35px 240px; position: absolute; left: 50%; margin-left: -690px; top: 540px;}
#main .main_timer h3{font-family: 'Tenada'; font-size: 38.5px; color: #fff;}
#main .main_timer h3 span{color: #fff8b5;}
#main .main_timer p{display: flex; align-items: center; align-items: center; gap: 5px;}
#main .main_timer p span{font-family: 'Tenada'; font-size: 52px; color: #fff; padding-top: 15px;}
#main .main_timer p .timer{display: inline-block; width: 90px; line-height: 75px; background: #ff2792; text-align: center; border-radius: 15px; overflow: hidden;}
#main .timer_img{position: absolute; top: 485px; left: 50%; margin-left: -747px; z-index: 1;}
#main .character{position: absolute; top: 170px; left: 50%; margin-left: -137px;z-index: 1;}
#main .logo{position: absolute; top: 270px; left: 50%; margin-left: 189px;}
.rolling .img{position: absolute;}
.rolling .img:nth-child(1){left: 50%; margin-left: -960px; top: 0; animation: rolling_ani 30s infinite alternate linear;}
.rolling .img:nth-child(2){right: 50%; margin-right: -960px; bottom: 0; animation: rolling_ani2 30s infinite alternate linear;}
@keyframes rolling_ani{0%{top: 0;} 100%{top: -4000px;}}
@keyframes rolling_ani2{0%{bottom: 0;} 100%{bottom: -4000px;}}

/* 섹션1 */
#s01{background: #fff; height: 925px;}
#s01 .ctn{position: absolute; top: 80px; left: 50%; margin-left: -747px;}
#s01 .ctn .img{position: absolute;}
#s01 .ctn .img:nth-child(2){height: 689px; overflow: hidden;}
#s01 .title{position: absolute; top: 185px; left: 50%; margin-left: 26px;}
#s01 .list{display: flex; text-align: center; gap: 35px; position: absolute; top: 475px; left: 50%; margin-left: 0;}
#s01 .list p{font-family: 'Tenada'; color: #32091d; font-size: 48px; margin-top: 15px;}
#s01 .rolling{background: url(../image/s01_rolling.jpg) center / cover; width: 1920px; height: 73px; animation: s01_rolling 30s 0s infinite linear; position: absolute; bottom: 0;}
@keyframes s01_rolling {0%{background: url(../image/s01_rolling.jpg) 0 0;} 100%{ background: url(../image/s01_rolling.jpg)  -3200px 0;}}

/* 섹션2 */
#s02{background: url(../image/s02_bg.jpg) no-repeat center / cover; height: 1125px;}
#s02 .title{position: absolute; top: 167px; left: 50%; margin-left: -720px;}
#s02 .ctn{position: absolute; top: 160px; left: 50%; margin-left: 160px;}
#s02 .video_wrap{display: flex; gap: 20px; position: absolute; top: 430px; left: 50%; transform: translateX(-50%);}
#s02 .video_wrap li{text-align: center;}
#s02 .video_wrap li .video{width: 533px; height: 533px; border-radius: 50px; overflow: hidden;}
#s02 .video_wrap li .video video{width: 100%; height: 100%; object-fit: cover; filter: brightness(120%);}
#s02 .video_wrap li p{font-family: 'Tenada'; font-size: 60px; color: #fff; margin-top: 15px;}   

/* 섹션3 */
#s03{background: url(../image/s03_bg.jpg) no-repeat center / cover; height: 1180px; width: 1920px; left: 50%; transform: translateX(-50%);}
#s03 .title{position: absolute; z-index: 11; background: #fff; left: 50%; margin-left: -670px; top: 109px; width: 640px; text-align: center;}
#s03 .title img:nth-child(2){position: absolute; top: 692px; left: 190px;}
#s03 .s03_swiper{top: 170px; width: 2500px;}
#s03 .title .left_arrow{position: absolute; top: 50%; transform: translateY(-50%); left: -41px; cursor: pointer; z-index: 11;}
#s03 .title .right_arrow{position: absolute; top: 50%; transform: translateY(-50%); right: -41px; cursor: pointer; z-index: 11;}
#s03 .rolling{background: url(../image/s03_rolling.png) center / cover; width: 1920px; height: 70px; animation: s03_rolling 30s 0s infinite linear; position: absolute; bottom: 80px;}
@keyframes s03_rolling {0%{background: url(../image/s03_rolling.png) 0 0;} 100%{ background: url(../image/s03_rolling.png)  -4500px 0;}}

/* 섹션4 */
#s04{background: url(../image/s04_bg.jpg) no-repeat center / cover; height: 2059px;}
#s04 .title{text-align: center; padding: 70px 0 25px; position: relative; width: 718px; margin: 0 auto;}
#s04 .title img:nth-child(2){position: absolute; right: -250px;}
#s04 .list{display: flex; justify-content: center; gap: 75px;}
#s04 .list li{text-align: center;}
#s04 .list li .img{margin-bottom: -45px; height: 528px; overflow: hidden;}
#s04 .list li .bt{width: 309px; height: 72px; border-radius: 50%; background: #9c0b3f; margin: 0 auto;}
#s04 .list li p{color: #fff; font-size: 58px; font-family: 'Tenada'; margin-top: 25px;}
#s04 .list li p span{color: #fff8b5;}
#s04 .ctn{display: flex; justify-content: center; gap: 40px; margin-top: 50px;}

/* 섹션5 */
#s05{overflow: hidden;}
#s05 .bg{background: url(../image/s05_bg.jpg) no-repeat center / cover; width: 1920px; height: 1467px;}
#s05 .s05_wrap{background: #fff; text-align: center; width: 1640px; height: 1240px; border-radius: 100px; border: 5px solid #b70c47;
			   position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}
#s05 .s05_wrap .title{position: absolute; left: 50%; transform: translateX(-50%); top: 260px;}
#s05 .s05_wrap .title img:nth-child(2){position: absolute; left: 50%; transform: translateX(-50%); top: -170px; animation: logo_ani 1s 0s infinite alternate linear;}
@keyframes logo_ani{0%{transform: translateX(-50%) rotate(-5deg);} 100%{transform: translateX(-50%) rotate(5deg);}}
#s05 .s05_wrap .text{position: absolute; left: 50%; transform: translateX(-50%); top: 430px;}
#s05 .s05_wrap .tab{display: flex; justify-content: center;  gap: 50px; width: 100%; position: absolute; top: 580px;}
#s05 .s05_wrap .tab li{font-family: 'Tenada'; font-size: 25px; color: #777; cursor: pointer;}
#s05 .s05_wrap .tab li.on{color: #b70c47;}
#s05 .s05_wrap .menu{width: 1400px; top: 670px;}
#s05 .s05_wrap .menu p{font-size: 21px; margin-top: 15px; font-weight: 500;}

/* 섹션6 */
#s06{background: url(../image/s06_bg.jpg) no-repeat center / cover; height: 1052px;}
#s06 .s06_wrap{display: flex; flex-direction: column; align-items: center; position: absolute; left: 50%; margin-left: -814px; top: 50%; transform: translateY(-50%);}
#s06 .s06_wrap .title{text-align: center;}
#s06 .s06_wrap .title .img:nth-child(2){margin: 15px 0 35px;}
#s06 .s06_wrap .list{display: flex; gap: 15px; position: relative;}
#s06 .s06_wrap .list .emoji{position: absolute; top: -40px; right: -40px;}

/* 섹션7 */
#s07{background: #fff; height: 1000px; color: #151515; overflow: hidden;}
#s07 .s07_wrap{position: absolute; left: 50%; margin-left: -760px; top: 50%; transform: translateY(-50%); text-align: center; width: 800px; height: 491px;}
#s07 .s07_wrap h3{font-size: 45px; font-family: 'Tenada'; color: #1e0713; margin: 70px 0 10px;}
#s07 .s07_wrap .textField{display: flex; justify-content: center;}
#s07 .s07_wrap .textField .text{font-size: 105px; color: #ff2792; font-family: 'Tenada'; letter-spacing: -2px;}
#s07 .s07_wrap .textField .cursor{height: 90px; width: 5px; background: #151515; margin-left: 10px;}
#s07 .video_wrap{position: absolute; top: 50%; transform: translateY(-50%); right: 50%; margin-right: -890px;}
#s07 .video_wrap .video{width: 689px; height: 829px; overflow: hidden; border-radius: 75px;}
#s07 .video_wrap .video video{width: 100%; height: 100%; object-fit: cover;}
#s07 .video_wrap .logo{position: absolute; left: -130px; top: 400px;}
#s07 .video_wrap .circle{position: absolute; left: 50%; transform: translateX(-50%); top: -55px; animation: circle_ani 1.5s infinite alternate linear;}
#s07 .video_wrap .circle span{display: block; border-radius: 50%;}
#s07 .video_wrap .circle .pink{width: 136px; height: 136px; background: #ff2792;}
@keyframes circle_ani{0%{top: -25px; left: 55%;} 100%{top: -55px; left: 50%;}}
#s07 .video_wrap .circle .orbit{width: 136px; height: 136px; position: absolute; top: 0; left: 0; animation: orbit 5s linear infinite;}
#s07 .video_wrap .circle .yellow{width: 37px; height: 37px; background: #fff8b5; position: absolute; top: 50%; left: 100%; transform: translate(-50%, -50%);}
@keyframes orbit{0%{transform: rotate(0deg);}100%{transform: rotate(360deg);}}
#s07 .ctn{position: absolute; left: 50%; margin-left: -880px; top: -120px; animation: orbit 10s linear infinite reverse;}

/* 섹션8 */
#s08{background: url(../image/s08_bg.jpg) no-repeat top center / cover; height: 3725px; overflow: hidden; background-attachment: fixed;}
#s08 .title{position: absolute; left: 50%; margin-left: -585px; top: 160px;}
#s08 .title img:nth-child(1){position: absolute; left: 265px; top: 45px;}
#s08 .s08_wrap{width: 1600px; height: 3200px; background: #fff; border-radius: 75px; position: absolute; left: 50%; transform: translateX(-50%); top: 390px; z-index: 1;}
#s08 .s08_wrap .list{position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}
#s08 .s08_wrap .list li{display: flex; justify-content: center; align-items: center; gap: 100px;}
#s08 .s08_wrap .list li+li{margin-top: 50px;}
#s08 .ctn img{position: absolute;}
#s08 .ctn img:nth-child(1){top: -225px; left: 50%; margin-left: 190px;}
#s08 .ctn img:nth-child(2){top: 1400px; left: 50%; margin-left: -1075px;}
#s08 .ctn img:nth-child(3){top: 3000px; left: 50%; margin-left: 475px; z-index: 1;}

/* 섹션9 */
#s09{text-align: center; padding: 150px 0 50px; box-sizing: border-box;}
#s09 .title{margin-bottom: 35px;}
#s09 .list{display: flex; gap: 10px; justify-content: center;}

/* 섹션10 */
#s10{background: url(../image/s10_bg.jpg) no-repeat top center / cover; height: 868px;}
#s10 .ctn{text-align: center; padding-top: 150px;}


/* 푸터 */
footer{background: #151515; padding: 100px 0 200px; text-align: center;}
footer p{color: #fff; font-size: 14px; line-height: 1.8;}

/* db */
.db_wrap{position: fixed; max-width: 1920px; width: 100%; bottom: -200px; background: url(../image/db_bg.jpg) no-repeat center / cover;
		 box-shadow:0 0 90px rgba(0,0,0,0.8); transition:0.8s; z-index: 9999;}
.db_wrap.scroll_on{bottom:0;}
.db_wrap .db{width:1280px; margin:0 auto; display: flex; justify-content: space-between; align-items: center;}
.db_wrap .db ul{display: flex; flex-wrap: wrap; margin: 0 20px 0 10px;}
.db_wrap .db ul li{width: 30%; margin: 0 1.5%;}
.db_wrap .db ul li a{text-decoration:underline; cursor: pointer;}
.db_wrap .db ul li input[type="text"]{width: 100%; padding:6px 5px; height:30px; background:#fff; border:1px solid #fff; font-size:15px;  border-radius: 5px;}
.db_wrap .db ul li input[type="text"]::placeholder{color: #333; font-size:14px; text-align: left; letter-spacing: -1px; font-family: pretendard; padding-left: 10px; font-weight: 500;}
.db_wrap .db .agree{margin-top: 10px; text-align: left;color: #fff; font-size:14px; letter-spacing:-1px; font-family: pretendard; font-weight: 500;}
.db_wrap .db .agree a{text-decoration:underline;}
.db_wrap .db .agree input[type="checkbox"]{width:15px; height:15px; margin-right: 5px; vertical-align: middle;}
.db_wrap .db .db_submit{animation:submit_btn 0.3s 0s infinite alternate ease-in;}
@keyframes submit_btn {0%{transform:translate(0,-4px)} 100%{transform:translate(0,0)}}
.db_wrap .db .db_submit input{transition:0.3s;}
.db_wrap .db .db_submit input:hover{filter:contrast(150%)}
.layer{position:fixed; display:none; left:0;top:180px; z-index:3000000; width:100%; font-family: pretendard;}
.layer .close_btn{position:absolute; overflow: hidden; right:0; top:0;background:#aa0000; border-radius:0 10px 0 10px; color: #fff;}
.layer .close_btn a{display: block;color: #fff;padding:14px 18px; font-size:20px; font-weight:bold;}
.layer .layer_wrap{position:relative;width:100%; max-width:700px; top:0px; margin:0 auto; border-radius:10px; background:rgba(0,0,0,0.95); text-align:left; letter-spacing:-0.5px; box-shadow:0 0 50px rgba(0,0,0,0.6);}
.layer .layer_wrap .DB_info_detail{width:100%;  margin:18px auto; padding-bottom:16px; line-height:1.6; color: #fff;font-size:12px;}
.layer .layer_wrap .DB_info_detail h2{padding:22px;border-bottom:1px solid #222; font-size:24px; font-weight:bold;}
.layer .layer_wrap .DB_info_detail .DB_info_detail_wrap p{padding:8px;margin-bottom:12px; font-size:13px; }
.layer .layer_wrap .DB_info_detail .DB_info_detail_wrap{width:98%; height:360px; padding:8px 16px; overflow:auto; box-sizing:border-box;}
.layer .layer_wrap .DB_info_detail .DB_info_detail_wrap dl dt{display:block; background: #fff;border-radius:3px; padding:7px 10px; font-weight: bold; color: #333;}
.layer .layer_wrap .DB_info_detail .DB_info_detail_wrap dl dd{margin-bottom:16px; padding:4px 12px; box-sizing:border-box;}

#fireworks-container{position: fixed; bottom: 0; width: 100%; height: 100vh; pointer-events: none; overflow: hidden;}
.firework{position: absolute; bottom: 0; width: 50px; height: 50px; opacity: 0;}
.firework.animate{animation: explode 1.5s forwards;}
@keyframes explode{0%{opacity: 1; transform: translateY(0) scale(1);} 100%{opacity: 0; transform: translateY(-80vh) scale(2);}}