/* 레이아웃 */
#wrap{margin:0 auto; background: #000; overflow: hidden; }
section{box-sizing: border-box;}
section .title, section .img{margin: 0 auto; text-align: center; max-width: 1024px;}

/* 메인01 */
#main01{background: url(../image/bg_main01.jpg) no-repeat center / cover; padding: 3em 0; position: relative;}
#main01 .light{position: absolute; top: 0; left: 50%; transform: translateX(-48.5%); width: 120%; max-width: 1424px;
animation: light_ani 5.5s ease-in-out infinite; transition: opacity 0.3s ease-in-out; opacity: 0.2;}
#main01 .title{position: relative; z-index: 1;}
#main01 .ctn_wrap .ctn{position: absolute; z-index: 1;}
#main01 .ctn_wrap .ctn img{animation-timing-function: ease-in-out;}
#main01 .ctn_wrap .ctn:nth-child(1) img{animation: float1 3s infinite;}
#main01 .ctn_wrap .ctn:nth-child(2) img{animation: float2 2s infinite;}
#main01 .ctn_wrap .ctn:nth-child(1){width: 34%; top: 25.5%; left: 82.5%; max-width: 338px;}
#main01 .ctn_wrap .ctn:nth-child(2){width: 20%; top: 35%; left: -9%; max-width: 195px;}

@keyframes light_ani {
  0%   { opacity: 0.2; }
  8%   { opacity: 1; }
  15%  { opacity: 0.3; }
  25%  { opacity: 0.8; }
  35%  { opacity: 0.25; }
  45%  { opacity: 0.6; }
  60%  { opacity: 0.2; }
  80%  { opacity: 0.5; }
  100% { opacity: 0.7; }
}
@keyframes float1 {
	0% { transform: translateY(0px); }
	50% { transform: translateY(-20px); }
	100% { transform: translateY(0px); }
}
@keyframes float2 {
	0% { transform: translateY(0px); }
	50% { transform: translateY(15px); }
	100% { transform: translateY(0px); }
}

/* 메인02 */
#main02{background: url(../image/bg_main02.jpg) no-repeat center / cover; padding-top: 3em; padding-bottom: 3em;}
#main02 .title{margin-bottom: 1em;}

/* 메인03 */
#main03{background: url(../image/bg_main03.jpg) no-repeat center / cover; padding: 3em 0; border-top-left-radius: 25px; border-top-right-radius: 25px;
overflow: hidden; margin-top: -2em;}
#main03 .title{margin-bottom: 1.5em;}

/* 메인04 */
#main04{background: #e7d2b3; padding: 3em 0; position: relative;}
#main04 .title01{margin-bottom: 3em;}
#main04 .ctn{position: absolute; width: 67.5%; max-width: 681px; top: 32.5%; left: -40%;}

/* 메인05 */
#main05{background: url(../image/bg_main05.jpg) no-repeat center / cover; padding: 3em 0 2em; margin-top: -5px;}
#main05 .title{margin-bottom: 1em;}
#main05 .main05_btn{background: none; border: none; margin: 0 auto; display: block; transition: 0.3s; cursor: pointer;}
#main05 .main05_btn:hover{filter: brightness(1.2);}

/* 메인06 */
#main06{background: url(../image/bg_main06.jpg) no-repeat center / cover; padding: 3em 0 5em; margin-top: -5px;}
#main06 .img{position: relative; margin: 2em auto 2.5em;}
#main06 .img img:nth-child(1){position: relative; z-index: 1;}
#main06 .img img:nth-child(2){position: absolute; mix-blend-mode: color-dodge; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: 1567px; width: 150%;}
#main06 .btn_wrap .text{margin-bottom: 7px; text-align: center;}
#main06 .btn_wrap .main06_btn{background: none; border: none; margin: 0 auto; display: block; filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.7));}
#main06 .btn_wrap .main06_btn img{cursor: pointer; transition: 0.3s;}
#main06 .btn_wrap .main06_btn img:hover{filter: brightness(1.2);}

/* 팝업 전체*/
.event_pop{width: 100%; top: 0; left: 50%; transform: translateX(-50%); z-index: 9999;  height: 100%; background: rgba(0, 0, 0, 0.7); display: none;
align-items: center; justify-content: center;}
.event_pop .pop_inner{margin: 0 auto; background: #121236; max-width: 500px; padding: 3em 0 0; overflow-Y: scroll; height: 90%;}
.event_pop .pop_inner::-webkit-scrollbar{width: 2px;}
.event_pop .pop_inner::-webkit-scrollbar-track{background:#fff;}
.event_pop .pop_inner::-webkit-scrollbar-thumb{background-color: #f7e500; border-radius:100px;}
.event_pop .pop_inner .close{color: #fff; position: fixed; top: 10px; right: 10px; font-size: 30px; line-height: 1; cursor: pointer;}

/* 이미지 영역 */
.pop_img{max-width: 1024px; margin: 0 auto 3em;}

/* 업로드 영역 */
.pop_upload{width: 100%; aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden;
background-color: #fff;}
.pop_upload img{max-width: 100%; max-height: 100%; display: block;}
.pop_upload input[type="file"]{position: absolute; width: 100%; height: 100%; opacity: 0; pointer-events: none;}
.upload_btn_wrap{background: #ece4db; width: 100%; text-align: center; padding: 1.5em 0 2em; margin-top: -1px;}
.upload_btn_wrap button{background-color: #c59d6a; border: none; color: #fff; width: 80%; padding: 0.8em 0; border-radius: 50px; font-size: 20px;
font-weight: bold; letter-spacing: -0.02em; font-family: "Min Sans"; display: flex; justify-content: center; align-items: center; gap: 5px;
margin: 0 auto; cursor: pointer;}

/* db 영역 */
.db_wrap{background: #ece4db; margin-top: -1px;  padding: 0 0 6em; box-sizing: border-box;}
.db_wrap ul{background: #f6f3ef; width: 85%; margin: 0 auto; padding: 2em; box-sizing: border-box; border-radius: 16px;}
.db_wrap ul li{display: flex; flex-direction: column;}
.db_wrap ul li+li{margin-top: 1em;}
.db_wrap ul li label{font-size: 18px; color: #000039; font-weight: bold; margin-bottom: 5px; font-family: "Min Sans"}
.db_wrap ul li input[type="text"]{border: 1px solid #c59d6a; padding: 15px; border-radius: 10px; font-size: 16px; box-sizing: border-box;}
.db_wrap ul li input[type="text"]::placeholder{color: #cbc0b2 !important; font-family: "Min Sans"}

.db_wrap .agree{font-size: 15px; color: #baa68d; width: 100%; border-radius: 0;
display: flex; justify-content: center; align-items: center; padding: 1em 0 1.5em;}
.db_wrap .agree span{font-family: "Min Sans";}
.db_wrap .agree a{text-decoration:underline;  font-weight: 600; cursor: pointer;}
.db_wrap .agree input[type="checkbox"]{width:18px; height:18px; margin-top: 1px; margin-right: 4px; border-radius: 0; accent-color: #baa68d;}

.db_wrap .db_submit{text-align: center; }
.db_wrap .db_submit input[type="submit"]{background: #000039; color: #fff; width: 80%; padding: 0.8em 0; border-radius: 50px; font-size: 22px;
font-weight: bold; letter-spacing: -0.02em; font-family: "Min Sans"; border: none; cursor: pointer;}

.layer{position: fixed; left:50%; top: 50%; transform: translate(-50%, -50%); display:none; z-index:3000000; width: 95%; font-family: "Min Sans";}
.layer .close_btn{position:absolute; overflow: hidden; right:0; top:0;background:#aa0000; 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; background:rgba(0,0,57,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:14px;}
.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:15px; }
.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; 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;}

/* 퀴즈 영역 */
.event_quiz{margin: 0 auto; display: none; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); }
.event_quiz .close{color: #fff; position: fixed; top: 10px; right: 10px; font-size: 30px; line-height: 1; cursor: pointer;}
.event_quiz .quiz_inner{margin: 0 auto; background: url(../image/bg_quiz.jpg) no-repeat center / cover; padding: 3.5em 0; max-width: 500px;
position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100%;}
.event_quiz .quiz_inner .title{text-align: center; max-width: 640px; margin: 0 auto;}
.event_quiz .quiz_inner .title h1{margin: 1em 0;}

.event_quiz .quiz_inner .input_area{background: #fff; width: 80%; margin: 0 auto; padding: 2em; box-sizing: border-box; border-radius: 16px;}
.event_quiz .quiz_inner .input_area h2{font-weight: bold; font-size: 20px; color: #b98956; text-align: center; font-family: "Min Sans"; margin-bottom: 1em;}
.event_quiz .quiz_inner .input_area ul{display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 15px;}
.event_quiz .quiz_inner .input_area ul li{position: relative; border-radius: 50px; overflow: hidden; width: 100%;}
.event_quiz .quiz_inner .input_area ul li input{position: absolute; top: 0; left: 0; width: 0; height: 0;}
.event_quiz .quiz_inner .input_area ul li label{width: 100%; height: 100%; cursor: pointer; background: #e7e6e6; padding: 1em 0; text-align: center;
font-family: "Min Sans"; font-weight: bold; color: #121235; position: relative; display: block;}

.event_quiz .quiz_inner .input_area ul li input[type="radio"]:checked+label{background: #c1c1c1; color: #fff;}
.event_quiz .quiz_inner .input_area ul li input[type="radio"]:checked+label::before { content: ''; position: absolute; left: 7px; top: 50%; transform: translateY(-50%);
width: 36px; height: 36px; background-image: url('../image/quiz_check02.png'); background-size: cover; background-repeat: no-repeat;}

.event_quiz .quiz_inner .input_area ul li label.dimmed{opacity: 0.4; transition: opacity 0.3s ease;}
.event_quiz .wrong_text{font-size: 14px; color: #dfdede; text-align: center; margin-top: 7px; display: none;}

.event_quiz .quiz_inner01 .input_area ul li:first-child input[type="radio"]:checked+label{background: #f8ea00; color: #000039;}
.event_quiz .quiz_inner01 .input_area ul li:first-child input[type="radio"]:checked+label::before { content: ''; position: absolute; left: 7px; top: 50%; transform: translateY(-50%);
width: 36px; height: 36px; background-image: url('../image/quiz_check01.png'); background-size: cover; background-repeat: no-repeat;}

.event_quiz .quiz_inner02{display: none;}
.event_quiz .quiz_inner02 .input_area ul li:last-child input[type="radio"]:checked+label{background: #f8ea00; color: #000039;}
.event_quiz .quiz_inner02 .input_area ul li:last-child input[type="radio"]:checked+label::before { content: ''; position: absolute; left: 7px; top: 50%; transform: translateY(-50%);
width: 36px; height: 36px; background-image: url('../image/quiz_check01.png'); background-size: cover; background-repeat: no-repeat;}

.event_quiz .quiz_inner03{display: none; max-width: 500px; margin: 0 auto;}
.event_quiz .quiz_inner03 .img{position: relative;}
.event_quiz .quiz_inner03 .img .secret_event_link_btn{position: absolute; bottom: 10%;}



@media all and (min-width:1024px){
#main01 .ctn_wrap .ctn:nth-child(1){left: 50%; margin-left: 330px;}
#main01 .ctn_wrap .ctn:nth-child(2){left: 50%; margin-left: -600px;}

#main03{border-top-left-radius: 50px; border-top-right-radius: 50px; margin-top: -3em;}

#main04 .ctn{left: 50%; margin-left: -920px;}
}

@media all and (max-width:768px){
.event_pop .pop_inner{height: 100%; position: relative;}
.event_pop .pop_inner .close{position: absolute; top: 30px;}
}

@media all and (max-width: 500px){
.event_quiz .quiz_inner{width: 90%; padding: 4em 0;}
.event_quiz .quiz_inner .input_area{width: 90%;}

}