/* Modal */
@keyframes fade-down {
    from { opacity: 0; -webkit-transform: translateY(-50px); transform: translateY(-50px); }
    to { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); }
}


.sub-footer { display: flex; align-items: center; justify-content: center; position: absolute; bottom: 0; left: 0; width: 100%; height: 50px; }
.sub-footer .logo { width: auto; height: 19px; }


.contents { overflow: hidden; margin: -50px 0; padding: 85px 0; min-height: calc(100vh); }
.contents--menu { background: #000000; }
.contents--intro { background: #000000; }
.contents--eventmenu { background: #000000; }
.contents--event1 { padding: 0; }
.contents--event2 { padding: 0; background: #ffffff; }
.contents--teaser { padding-top: 50px; background: #000000; }
.contents--live { background: #000000; }
/* .contents--live::before { content: ''; z-index: 1; position: absolute; top: 0; left: 0; width: 100%; height: 50px; background: #1b1b1b; } */

.form .input,
.form .textarea { padding-left: 14px; padding-right: 14px; width: 100%; min-height: 34px; line-height: 1.3; font-family: KB; font-size: 14px; color: #333333; border-radius: 5px; }
.form .textarea { padding-top: 10px; padding-bottom: 10px; height: 100px; }

.upload-preview { overflow: hidden; position: relative; padding-top: calc(284 / 454 * 100%); width: 100%; height: 0; border-radius: 10px; border: 1px solid #3c3c3c; }
.upload-preview .label { display: block; position: absolute; top: 50%; left: 50%; height: 70%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
.upload-preview .image-preview { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; background-color: #000; }
.upload-preview .input { position: absolute; top: 0; left: 0; width: 1px; height: 1px; opacity: 0; visibility: hidden; }
.upload-preview .prev { z-index: 2; position: absolute; top: 0; bottom: 0; left: 10px; margin: auto; width: 30px; height: 40px; background: url('/child/img/icon/arrow-prev.png') no-repeat center / auto 30px; }
.upload-preview .next { z-index: 2; position: absolute; top: 0; bottom: 0; right: 10px; margin: auto; width: 30px; height: 40px; background: url('/child/img/icon/arrow-next.png') no-repeat center / auto 30px; }

.upload-voice { display: flex; align-items: center; justify-content: center; margin-bottom: 22px; height: 280px; border-radius: 10px; border: 1px solid #3c3c3c; }
.upload-voice .button { overflow: hidden; position: relative; }
.upload-voice .button input[type="file"] { position: absolute; top: 0; left: 0; width: 1px; height: 1px; opacity: 0; visibility: hidden; }
.upload-voice .button .up img { width: auto; height: 70px; }
.upload-voice .input { position: absolute; top: 0; left: 0; width: 1px; height: 1px; opacity: 0; visibility: hidden; }
.upload-voice .up img { max-width: 200px; }


.box { margin: 10px 0; }
.box:first-child { margin-top: 0; }
.box:last-child { margin-bottom: 0; }
.box .grid { display: flex; align-items: center; margin: 0 -5px; }
.box .grid-12 { margin: 0 5px; width: 45%; }
.box .grid-12:last-child { width: 55%; }
.box h2 { line-height: 1; margin: 18px 0 10px; font-family: KB; font-size: 15px; color: #ffffff; font-weight: 400; }
.box > h2:first-child { margin-top: 0; }

.box-title { margin-left: -15px; margin-right: -15px; margin-bottom: 20px; padding: 8px; line-height: 1; text-align: center; font-size: 16px; color: #f8b500; background: #212121; border-radius: 10px; }
/* .box-title .img { display: inline-block; padding: 0 10px; line-height: 1; text-align: center; }
.box-title .img::before { content: ''; position: absolute; bottom: 15px; left: 0; width: 100%; height: 2px; background: rgb(253 242 213); }
.box-title .img img { z-index: 2; position: relative; width: auto; height: 32px; }

.box--purple .box-title .img::before { background: #edecf9; } */



/* 메인 메뉴 */
.page-menu-lists { display: flex; align-items: center; padding: 0 20px; }
.page-menu-lists ul { width: 100%; }
.page-menu-lists li { padding: 6px 0; animation-name: fade-down; animation-timing-function: cubic-bezier(0.44, 0, 0.58, 1.6); animation-duration: .65s; animation-fill-mode: forwards; opacity: 0; }
.page-menu-lists li:nth-child(1) { animation-delay: 0s; padding-top: 0; }
.page-menu-lists li:nth-child(2) { animation-delay: .15s; }
.page-menu-lists li:nth-child(3) { animation-delay: .3s; }
.page-menu-lists li:nth-child(4) { animation-delay: .45s; }
.page-menu-lists li:nth-child(5) { animation-delay: .6s; }
.page-menu-lists a { display: block; }
.page-menu-lists img { display: block; width: 100%; height: auto; }


/* 행사안내 */
.introduction-container { margin: -15px; }
.introduction-container img { display: block; width: 100%; height: auto; }


/* 참여이벤트 */
.event-main-container img { display: block; width: 100%; height: auto; }
.event-main-lists li { padding: 30px 40px; text-align: center; border-bottom: 1px solid #555555; animation-name: fade-down; animation-timing-function: cubic-bezier(0.44, 0, 0.58, 1.6); animation-duration: .65s; animation-fill-mode: forwards; opacity: 0; }
.event-main-lists li:first-child { padding-top: 0; }
.event-main-lists li:last-child { padding-bottom: 0; border-bottom: none; }
.event-main-lists li:nth-child(1) { animation-delay: 0s; }
.event-main-lists li:nth-child(2) { animation-delay: .15s; }
.event-main-lists li:nth-child(3) { animation-delay: .3s; }
.event-main-lists li:nth-child(4) { animation-delay: .45s; }
.event-main-lists li:nth-child(5) { animation-delay: .6s; }
.event-main-lists .button { margin-top: 20px; }
.event-1-container .intro { margin-left: -20px; margin-right: -20px; }
.event-1-container .intro img { display: block; width: 100%; height: auto; }
.event-1-container .join { position: relative; margin-left: -20px; margin-right: -20px; }
.event-1-container .join img { display: block; width: 100%; height: auto; }
.event-1-container .join .choose { position: absolute; bottom: 22%; left: 34%; width: 32%; height: 20%; }
.event-1-container .join .submit { position: absolute; bottom: 20%; left: 26%; width: 48%; height: 9%; }
.event-1-container .join .submit2 { position: absolute; bottom: 9%; left: 26%; width: 48%; height: 9%; }
.event-1-container .listing { margin: -14px -20px; padding: 14px 20px 80px; background: #fef2d6; }
.event-1-container .listing .top { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; }
.event-1-container .listing .search { display: inline-flex; height: 26px; border: 1px solid #bbb09b; }
.event-1-container .listing .search input { width: 130px; height: 100%; font-size: 12px; border: none !important; border-right: 1px solid #bbb09b !important; border-radius: 0 !important; }
.event-1-container .listing .search button { width: 60px; height: 100%; background: #f8b500; font-size: 12px; }
.event-1-container .listing .more { display: block; margin: 25px auto 0; width: 70px; height: 25px; background: url('/child/img/icon/more.png') no-repeat center / auto 23px; }
.event-1-container .gallery .context .pr { height: 30px; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 2; -webkit-box-orient:vertical; display: -webkit-box; }

.event-2-container .intro { margin-left: -20px; margin-right: -20px; }
.event-2-container .intro img { display: block; width: 100%; height: auto; }
.event-2-container .join { position: relative; margin-left: -20px; margin-right: -20px; }
.event-2-container .join img { display: block; width: 100%; height: auto; }
.event-2-container .join .choose { position: absolute; bottom: 26%; left: 34%; width: 32%; height: 21%; }
.event-2-container .join .submit { position: absolute; bottom: 6%; left: 26%; width: 47%; height: 7%; }
.event-2-container .current { margin-left: -20px; margin-right: -20px; }
.event-2-container .current .text { z-index: 3; position: absolute; top: 64.5%; left: 0; right: 0; margin: auto; width: 78%; line-height: 1; text-align: center; }
.event-2-container .current .text em { display: inline-block; font-style: normal; font-size: 8vw; color: #231815; font-weight: 700; }
.event-2-container .current .text img { width: auto; height: 6vw; max-height: 40px; }
.event-2-container .current .back { display: block; width: 100%; height: auto; }
.event-2-container .listing { margin: -14px -20px; padding: 14px 20px 80px; background: rgba(202,192,235,.95) url('/child/img/sub/event/pattern.png') repeat top 20px left / 100% auto; }
.event-2-container .listing .top { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; }
.event-2-container .listing .search { display: inline-flex; height: 26px; border: 1px solid #bbb09b; }
.event-2-container .listing .search input { width: 130px; height: 100%; font-size: 12px; border: none !important; border-right: 1px solid #bbb09b !important; border-radius: 0 !important; }
.event-2-container .listing .search button { width: 60px; height: 100%; background: #8b83d7; font-size: 12px; }
.event-2-container .listing .more { display: block; margin: 25px auto 0; width: 70px; height: 25px; background: url('/child/img/icon/more.png') no-repeat center / auto 23px; }

.filter { position: relative; width: 110px; }
.filter .toggle { z-index: 3; display: flex; align-items: center; position: relative; padding: 4px 10px 4px; width: 100%; height: 25px; line-height: 1; font-size: 13px; background: #f8b500; border: 2px solid #ffffff; border-radius: 5px; }
.filter .toggle i { display: block; margin-right: 5px; width: 10px; height: 10px; background: url('/child/img/icon/arrow.png') no-repeat center / 10px auto; }
.filter .lists { z-index: 2; position: absolute; top: 0; left: 0; padding-top: 18px; width: 100%; height: auto; border: 2px solid #ffffff; border-radius: 5px; }
.filter .lists li:first-child { padding-top: 10px; }
.filter .lists li { padding: 0 4px 4px; width: 100%; background: #f8b500; }
.filter .lists .button { display: block; padding: 4px; min-width: auto; width: 100%; height: auto; line-height: 1; font-size: 11px; color: #000000; background: #ffffff; border-radius: 0; }

.filter--purple .toggle,
.filter--purple .lists li { background: #8b83d7; }

.gallery-lists { display: flex; flex-wrap: wrap; margin: 10px -5px -5px; }
.gallery-lists > li { padding: 5px; width: 50%; }
.gallery { padding: 5px; height: 100%; background: #ffffff; border-radius: 10px; }
.gallery .thumb { overflow: hidden; position: relative; padding-top: 100%; width: 100%; height: 0; background-color: #2e2623; border-radius: 8px; }
.gallery .thumb img,
.gallery .thumb video { position: absolute; top: 0; left: 0; width: 100%; min-height: 100px; object-fit: cover; }
.gallery .thumb video { height: 100%; }
.gallery .prev { z-index: 2; position: absolute; top: 0; bottom: 0; left: 10px; margin: auto; width: 30px; height: 40px; background: url('/child/img/icon/arrow-prev.png') no-repeat center / auto 30px; }
.gallery .next { z-index: 2; position: absolute; top: 0; bottom: 0; right: 10px; margin: auto; width: 30px; height: 40px; background: url('/child/img/icon/arrow-next.png') no-repeat center / auto 30px; }
.gallery .context { position: relative; padding-right: 56px; min-height: 60px; font-family: KB; }
.gallery .context .name { display: block; margin-top: 5px; font-size: 13px; font-weight: 600; }
.gallery .context .pr { line-height: 1.4; font-size: 12px;}

.gallery .context .like,
.gallery .context .comment { display: block; position: absolute; top: 5px; right: 0; width: 30px; height: 30px; line-height: 1; font-style: normal; text-align: center; font-size: 10px; }
.gallery .context .comment { right: 26px; }
.gallery .context .like img,
.gallery .context .comment img { display: block; margin: 0 auto 2px; width: auto; height: 18px; }
.gallery .context .button-delete { margin-top: 14px; padding: 0 12px; min-width: auto; height: 24px; font-size: 11px; }
.gallery .comment-area { margin-top: 20px; margin-right: -56px; padding-top: 14px; border-top: 1px solid #efedec; }
.gallery .comment-area .title { display: block; font-size: 14px; color: #7c7365; font-weight: 500; }
.gallery .comment-lists { margin-top: 8px; }
.gallery .comment-lists li { font-size: 12px; }
.gallery .write { display: flex; margin-top: 10px; height: 26px; border: 1px solid #bbb09b; }
.gallery .write input { width: 100%; height: 100%; font-size: 12px; border: none !important; border-right: 1px solid #bbb09b !important; border-radius: 0 !important; }
.gallery .write button { width: 60px; height: 100%; background: #f8b500; font-size: 12px; }

.modal .gallery .context .like,
.modal .gallery .context .comment { width: 34px; font-size: 12px; }
.modal .gallery .context .like img,
.modal .gallery .context .comment img { height: 24px; }
.modal .gallery .context .comment { right: 34px; }

.voice-record-lists { margin: 15px 0 0; }
.voice-record-lists li { margin-bottom: 10px; }
.voice-record-lists li:last-child { margin-bottom: 0; }
.voice-record { padding: 7px 15px; font-family: KB; background: #ffffff; border-radius: 10px; }
.voice-record-head { display: flex; align-items: center; background: url('/child/img/sub/event/02/voice-record-pulse.png') no-repeat center / auto 24px; }
.voice-record ~ audio { width: 100%; }
.voice-record .icon { display: flex; align-items: center; width: 50px; }
.voice-record .icon img { display: block; }
.voice-record .info { padding: 0 15px; width: calc(100% - 90px); }
.voice-record .info p { line-height: 1.4; font-size: 14px; }
.voice-record .like,
.voice-record .comment { width: 36px; height: 25px; line-height: 1; text-align: center; font-size: 10px; }
.voice-record .like img,
.voice-record .comment img { display: block; margin: 0 auto 2px; width: auto; height: 20px; }
.voice-record-body audio { margin-top: 15px; width: 100%; max-height: 30px; }
.voice-record .comment-area { margin-top: 20px; padding-top: 14px; border-top: 1px solid #efedec; }
.voice-record .comment-area .title { display: block; font-size: 14px; color: #7c7365; font-weight: 500; }
.voice-record .comment-lists { margin-top: 8px; }
.voice-record .comment-lists li { font-size: 12px; }
.voice-record .write { display: flex; margin-top: 10px; height: 26px; border: 1px solid #bbb09b; }
.voice-record .write input { width: 100%; height: 100%; font-size: 12px; border: none !important; border-right: 1px solid #bbb09b !important; border-radius: 0 !important; }
.voice-record .write button { width: 60px; height: 100%; background: #8b83d7; font-size: 12px; }
.voice-record .pagination .current { background-color: #8b83d7; border-color: #8b83d7; }

.modal .voice-record { padding: 10px 15px 16px; }

.event1-upload { padding: 0 15px; }
.event1-upload .complete img { display: block; margin: 100px auto 0; width: 50%; }
.event1-upload .submit { display: block; margin: 25px auto 0; min-width: 220px; }
.event1-upload .submit img { width: auto; height: 36px; }

.event2-upload { padding: 0 20px; }
.event2-upload .complete img { display: block; margin: 100px auto 0; width: 50%; }
.event2-upload .submit { display: block; margin: 25px auto 0; padding-bottom: 2px; min-width: 220px; }
.event2-upload .submit img { width: auto; height: 36px; }


/* 티저영상 */
.media-container { position: relative; margin: 0 -15px; }
.media-container .swiper-pagination-bullets { position: absolute; top: 22px; left: 0; width: 100%; text-align: center; font-size: 0; }
.media-container .swiper-pagination-bullet { vertical-align: top; margin: 0 6px; width: 10px; height: 10px; background: #595757; opacity: 1; -webkit-transform: scale(.8); transform: scale(.8); }
.media-container .swiper-pagination-bullet-active { background: #ffffff; opacity: 1; -webkit-transform: scale(1); transform: scale(1); }
.media-container img,
.media-container iframe { display: block; width: 100%; height: auto; }
.media-container .media { padding: 10px 0; border-top: 2px solid #f8b500; border-bottom: 2px solid #f8b500; }
.media-container .media--frame iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }


/* 라이브 스트리밍 */
.live-container .player { position: relative; border-top: 2px solid #f8b500; border-bottom: 2px solid #f8b500; }
.live-container .player--frame { padding-bottom: 56.25%; }
.live-container .player--frame iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.live-container .player img { display: block; margin: auto; width: 100%; height: auto; }
.live-container .info { position: relative; padding: 30px 0 0; }
.live-container .info img { display: block; z-index: 2; position: relative; width: 100%; height: auto; }
.live-container .info .temp { z-index: 1; position: absolute; top: 0; left: 0; width: 100%; height: auto; }

/*  */
@media(min-width:651px){
	.event-2-container .current .text em { font-size: 52px; }
}