@charset "UTF-8";
/*
 *  File Name : /event/resources/css/responsive/layout.css
 *  Description : [공통] 레이아웃 스타일
 *  ====================================
 *  1) 헤더 & 푸터 
 *  2) 콘텐츠 
 *  ====================================
 */

/* common */
:root {
	--header-height: 60px;    
    --footer-height: 320px;
	--inner-padding: 0 40px;
	--inner-padding-side: 40px;
}
.container {position: relative; width: 100%; background: url(../../../resources/images/bg_main.png) no-repeat center top, linear-gradient(0deg, #1A0057 0%, #1A0057 100%); background-size: 100% auto; background-repeat: no-repeat; background-position: center top;}
.layout-inner {overflow: hidden; position: relative; width: 768px; height: 100%; padding: 0; margin: 0 auto; box-sizing: border-box;}

/* header */
.header-wrap {position: relative; width: 100%; height: var(--header-height); background: linear-gradient(0deg, #4C17E4 0%, #4C17E4 100%), #D9D9D9;}
.header-wrap .header {display: flex; justify-content: center; align-items: center; position: relative; height: 100%; box-sizing: border-box;}
.header-wrap .header .logo {color: #1398FF; font-family: var(--ft-family_Poppins-700); font-size: 34px;}

/* contents */
.contents-wrap {border-top: 3px solid #1398FF; box-shadow: 0 9px 35.6px 13px rgba(0, 0, 0, 0.30);}
.contents-wrap > [class^=section-] {min-height: calc(100svh - var(--header-height) - var(--footer-height)); padding-top: 40px; padding-bottom: 80px; box-sizing: border-box; background: linear-gradient(180deg, #4C17E4 0%, #3811AE 80%);}
.contents-wrap .title-area {margin-bottom: 40px; text-align: center;}
.contents-wrap .title-area .bold {color: #FED800;}
.contents-wrap .title-area .title {margin-bottom: 10px; color: #fff; font-family: var(--ft-family_Poppins-700); font-size: 50px;}
.contents-wrap .title-area .subtitle {color: #DBD4EC; font-family: var(--ft-family_Poppins-300); line-height: 1.2; font-size: 28px;}
/* contents - section-game-panel */
.section-game-panel {background: linear-gradient(180deg, #4C17E4 0%, rgba(56,17,174,0.7) 60%, rgba(56,17,174,0) 100%), #000 url(../../../resources/images/bg_game_frame.png) center bottom/100% auto no-repeat !important;}
.section-game-panel .game-frame {padding-left: 20px; padding-right: 20px; border-radius: 10px; border: 3px solid #5320E8; background: #1A0057; box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.25); box-sizing: border-box;}
/* contents - section-email-panel */
.section-email-panel .title-area .title {line-height: 1.2; font-size: 45px;}
.section-email-panel .title-area .title > * {display: block;}
.section-email-panel .title-area .tit-main {color: #FAFAFA; font-size: 50px;}
.section-email-panel .title-area .tit-reward {font-size: 42px;}
.section-email-panel .title-area .tit-reward .bold {font-size: 50px;}
.section-email-panel .title-area .subtitle {font-size: 20px;}
.section-email-panel .email-form > * {margin-bottom: 40px;}
/* .section-email-panel .email-form > *:last-child {margin-bottom: 0 !important;} */
.section-email-panel .email-form:has(.form-area:not(.dis-none)) .btn-email-toggle {margin-bottom: 20px;}
.section-email-panel .email-form .btn-email-toggle .txt-area .bold {margin-top: -8px; margin-right: 8px; color: #FED800; font-size: 52px;}
.section-email-panel .email-form [class*=msg-] {display: none;}
.section-email-panel .email-form [class*=msg-error] {color: #FF4040 !important; font-family: var(--ft-family_Poppins-400) !important; transition: all 0.1s;}
.section-email-panel .form-area {position: relative; padding: 50px 30px 30px; background: #21016C; border: 3px solid #5320E8; border-radius: 10px; border-top-right-radius: 0 !important;}
.section-email-panel .form-area .btn-close-email-form {position: absolute; right: 0; top: 0; padding: 15px;}
.section-email-panel .form-area .btn-close-email-form::before,
.section-email-panel .form-area .btn-close-email-form::after {content: ''; display: inline-block;}
.section-email-panel .form-area .btn-close-email-form::after {width: 30px; height: 30px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36' fill='none'%3E%3Cpath d='M3 3L33 33M33 3L3 33' stroke='%23FED800' stroke-width='6' stroke-linecap='round'/%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat;}
.section-email-panel .form-area .field-list {margin-bottom: 20px;}
.section-email-panel .form-area .field-item {margin-bottom: 25px;}
.section-email-panel .form-area .field-item:last-child {margin-bottom: 0 !important;}
.section-email-panel .form-area .field-item .lb-field {display: block; margin-bottom: 12px; color: #fff; font-family: var(--ft-family_Poppins-600); font-size: 25px; line-height: 1;}
.section-email-panel .form-area .field-item .lb-field .name {position: relative;}
.section-email-panel .form-area .field-item .inp-field-box {display: block; position: relative; width: 100%; height: 70px;}
.section-email-panel .form-area .field-item .inp-field {width: 100%; height: 100%; padding: 0 60px 0 20px; box-sizing: border-box; border: 1px solid #DBD4EC; border-radius: 4px; color: #333; font-family: var(--ft-family_Poppins-400); font-size: 30px;}
.section-email-panel .form-area .field-item .inp-field::placeholder {color: #999; font-size: 30px;}
.section-email-panel .form-area .field-item .inp-field:focus {border-color: #1398FF;}
.section-email-panel .form-area .field-item .inp-field:focus {outline: 0;}
.section-email-panel .form-area .field-item.required-value .lb-field .name::after {content: ""; display: inline-block; position: absolute; right: -15px; width: 10px; height: 10px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='5' viewBox='0 0 6 5' fill='none'%3E%3Cpath d='M4.45308 0.757979L5.05469 1.82181L3.22314 2.5L5.05469 3.17819L4.43971 4.26862L2.91565 3.07181L3.1964 5H1.96645L2.22046 3.07181L0.696399 4.29521L0.0546875 3.16489L1.87287 2.4867L0.0546875 1.83511L0.669661 0.744681L2.23383 1.94149L1.96645 0H3.20977L2.91565 1.94149L4.45308 0.757979Z' fill='%23FF4040'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: cover;}
.section-email-panel .form-area .field-item[class*=check-] .inp-field {border-width: 3px;}
.section-email-panel .form-area .field-item[class*=check-] [class*=msg-] {margin-top: 8px; font-size: 22px;}
.section-email-panel .form-area .field-item[class*=check-] .inp-field-box::after {content: ""; display: inline-block; position: absolute; right: 15px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; background-size: contain; background-repeat: no-repeat;}
.section-email-panel .form-area .field-item.check-error .inp-field {border-color: #FF4040;}
.section-email-panel .form-area .field-item.check-error .msg-error {display: block;}
.section-email-panel .form-area .field-item.check-error .inp-field-box::after {background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30' fill='none'%3E%3Cg clip-path='url(%23clip0_3104_2206)'%3E%3Cpath d='M15 0C6.72 0 0 6.72 0 15C0 23.28 6.72 30 15 30C23.28 30 30 23.28 30 15C30 6.72 23.28 0 15 0ZM16.5 23.25H13.5V20.25H16.5V23.25ZM16.5 18H13.5V6.75H16.5V18Z' fill='%23FF4040'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_3104_2206'%3E%3Crect width='30' height='30' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");}
.section-email-panel .form-area .field-item.check-correct .inp-field {border-color: #31DF21;}
.section-email-panel .form-area .field-item.check-correct .inp-field-box::after {background-image: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15 0C6.72 0 0 6.72 0 15C0 23.28 6.72 30 15 30C23.28 30 30 23.28 30 15C30 6.72 23.28 0 15 0ZM12 22.5L4.5 15L6.615 12.885L12 18.255L21.885 8.37L24 10.5L12 22.5Z' fill='%2331DF21'/%3E%3C/svg%3E%0A");}
.section-email-panel .form-area .field-item.check-correct-all .msg-check {display: block; color: #31DF21;}
.section-email-panel .form-area .checkbox-area {margin-bottom: 30px;}
.section-email-panel .form-area .checkbox-area * {color: #BBB; font-family: var(--ft-family_Poppins-400); font-size: 20px;}
.section-email-panel .form-area .checkbox-area input[type=checkbox] + label {display: block; position: relative; width: 100%; padding-left: 55px; cursor: pointer; line-height: 1.3; box-sizing: border-box;}
.section-email-panel .form-area .checkbox-area input[type=checkbox] + label::before {content: ''; display: inline-block; position: absolute; left: 0; top: 0; width: 40px; height: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40' fill='none'%3E%3Crect x='1' y='1' width='38' height='38' rx='3' fill='white'/%3E%3Crect x='1' y='1' width='38' height='38' rx='3' stroke='%23DBD4EC' stroke-width='2'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: cover;}
.section-email-panel .form-area .checkbox-area input[type=checkbox]:checked + label:before {background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40' fill='none'%3E%3Crect x='1' y='1' width='38' height='38' rx='3' fill='white'/%3E%3Crect x='1' y='1' width='38' height='38' rx='3' fill='%2331DF21'/%3E%3Crect x='1' y='1' width='38' height='38' rx='3' stroke='%23DBD4EC' stroke-width='2'/%3E%3Crect x='1' y='1' width='38' height='38' rx='3' stroke='%2331DF21' stroke-width='2'/%3E%3Cpath d='M7 21L16.36 30L33 10' stroke='white' stroke-width='6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");}
.section-email-panel .form-area .checkbox-area .link {color: #1398FF; font-size: 20px; text-decoration: underline;}
.section-email-panel .form-area .form-notice {padding: 25px 20px; background: rgba(56, 17, 174, 0.50); border: 2px solid #4C17E4; border-radius: 10px; box-sizing: border-box;}
.section-email-panel .form-area .form-notice .noti-cont {color: #DBD4EC; font-family: var(--ft-family_Poppins-300); font-size: 24px; line-height: 1.25; text-align: center;}
.section-email-panel .form-area .form-notice .noti-cont::before {content: ""; display: inline-block; width: 24px; height: 24px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M13 8C13 8.55228 12.5523 9 12 9C11.4477 9 11 8.55228 11 8C11 7.44772 11.4477 7 12 7C12.5523 7 13 7.44772 13 8Z' fill='white'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2 7C2 4.23858 4.23858 2 7 2H17C19.7614 2 22 4.23858 22 7V17C22 19.7614 19.7614 22 17 22H7C4.23858 22 2 19.7614 2 17V7ZM7 4C5.34315 4 4 5.34315 4 7V17C4 18.6569 5.34315 20 7 20H17C18.6569 20 20 18.6569 20 17V7C20 5.34315 18.6569 4 17 4H7ZM12 11C12.5523 11 13 11.4477 13 12V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V12C11 11.4477 11.4477 11 12 11Z' fill='white'/%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat; vertical-align: middle;}
.section-email-panel .form-area .form-notice .noti-cont .bold {color: #FFBC2C;}
.section-email-panel .reward-notice {padding: 24px; background: #2E0A98; text-align: center;}
.section-email-panel .reward-notice .noti-tit {margin-bottom: 10px; color: #1398FF; font-family: var(--ft-family_Poppins-500); font-size: 26px;}
.section-email-panel .reward-notice .noti-tit::before {content: ''; display: inline-block; width: 28px; height: 25px; margin-right: 5px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='25' viewBox='0 0 28 25' fill='none'%3E%3Cpath d='M14.9881 20C14.9881 20.6904 14.6946 21 14 21C13.3054 21 13.0119 20.6904 13.0119 20C13.0119 19.3096 13.3054 19 14 19C14.6946 19 14.9881 19.3096 14.9881 20Z' fill='white'/%3E%3Cpath d='M14.9881 20C14.9881 20.6904 14.6946 21 14 21C13.3054 21 13.0119 20.6904 13.0119 20C13.0119 19.3096 13.3054 19 14 19C14.6946 19 14.9881 19.3096 14.9881 20Z' fill='%231398FF'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M14 0C14.4567 0 14.7663 0.603169 14.9881 1L27.8341 23C28.0505 23.3872 28.0601 23.6183 27.8341 24C27.6081 24.3817 27.2915 25 26.8459 25H1.15406C0.708455 25 0.391895 24.3817 0.165914 24C-0.0600658 23.6183 -0.0504921 23.3872 0.165914 23L13.0119 1C13.2337 0.603169 13.5433 0 14 0ZM3.13036 23H24.8696L14 4L3.13036 23ZM14 9C14.6946 9 14.9881 9.30964 14.9881 10V15C14.9881 15.6904 14.6946 16 14 16C13.3054 16 13.0119 15.6904 13.0119 15V10C13.0119 9.30964 13.3054 9 14 9Z' fill='white'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M14 0C14.4567 0 14.7663 0.603169 14.9881 1L27.8341 23C28.0505 23.3872 28.0601 23.6183 27.8341 24C27.6081 24.3817 27.2915 25 26.8459 25H1.15406C0.708455 25 0.391895 24.3817 0.165914 24C-0.0600658 23.6183 -0.0504921 23.3872 0.165914 23L13.0119 1C13.2337 0.603169 13.5433 0 14 0ZM3.13036 23H24.8696L14 4L3.13036 23ZM14 9C14.6946 9 14.9881 9.30964 14.9881 10V15C14.9881 15.6904 14.6946 16 14 16C13.3054 16 13.0119 15.6904 13.0119 15V10C13.0119 9.30964 13.3054 9 14 9Z' fill='%231398FF'/%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat; vertical-align: middle;}
.section-email-panel .reward-notice .noti-cont {color: #fff; font-family: var(--ft-family_Poppins-300); font-size: 22px; line-height: 1.27;}

/* footer */
.footer-wrap {position: relative; height: var(--footer-height); background:#240075;}
.footer-wrap .footer {display: flex; flex-direction: column; justify-content: space-between; align-items: center; height: 100%; padding: 30px 0 50px; box-sizing: border-box;}
.footer-wrap .footer * {color: #fff; font-family: var(--ft-family_Poppins-300); letter-spacing: 0;}
.footer-wrap .footer .logo {display: flex; flex-direction: column; align-items: center;}
.footer-wrap .footer .logo .link {display: inline-block; width: 80px; font-size: 0;}
.footer-wrap .footer .logo .link img {width: 100%;}
.footer-wrap .footer .inner {display: flex; flex-direction: column; justify-content: space-between; align-items: center; height: 100%; margin-top: 20px;}
.footer-wrap .footer .site-links {display: flex;}
.footer-wrap .footer .site-links > * {display: inline-block; position: relative; padding: 0 10px; color: #fff; font-size: 20px;}
.footer-wrap .footer .site-links > *::after {content: ""; display: inline-block; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 2px; height: 17px; background: #D5D5D5;}
.footer-wrap .footer .site-links > *:last-child::after {display: none; width: 0;}
.footer-wrap .footer .download-links {display: flex;}
.footer-wrap .footer .download-links [class*=btn-item] {height: 50px; margin-right: 13px; background-size: contain; background-repeat: no-repeat;}
.footer-wrap .footer .download-links [class*=btn-item]:last-child {margin-right: 0;}
.footer-wrap .footer .download-links .btn-item-google {width: 169px; background-image: url(../../../resources/images/btn_app-google.png);}
.footer-wrap .footer .download-links .btn-item-apple {width: 150px; background-image: url(../../../resources/images/btn_app-apple.png);}
.footer-wrap .footer .download-links .btn-item-amazon {width: 172px; background-image: url(../../../resources/images/btn_app-amazon.png);}
.footer-wrap .footer .copyright {color: #DBD4EC; font-family: var(--ft-family_Poppins-200); font-size: 14px;}

@media (min-width: 1921px) {
    /* contents */
    .container::before {top: 80vh;}
}

/* 
 *  [해상도 481px ~ 768px] *
 *  1. 481px ~ 768px
 *  - 모바일 가로모드
 *  - 태블릿 세로모드 *
 *  2. 768 기준 / DPR 1 / 7.68
 */
@media all and (max-width:768px) {
    /* common */
    :root {
        --header-height: 7.813vw;    
        --footer-height: 41.667vw;
        --inner-padding: 0 5.208vw;
        --inner-padding-side: 5.208vw;
    }
    .container {background-image: none;}
    .container::before {display: none; width: 0; height: 0;}
    .layout-inner {width: 100%;}

    /* header */
    .header-wrap .header .logo {font-size: 4.427vw;}

    /* contents */
    .contents-wrap {border-width: 0.391vw; box-shadow: 0 1.172vw 4.635vw 1.693vw rgba(0, 0, 0, 0.30);}
    .contents-wrap > [class^=section-] {padding-top: 5.208vw; padding-bottom: 10.417vw;}
    .contents-wrap .title-area {margin-bottom: 5.208vw;}
    .contents-wrap .title-area .title {margin-bottom: 1.302vw; font-size: 6.51vw;}
    .contents-wrap .title-area .subtitle {margin-bottom: 1.302vw; font-size: 3.646vw;}
    /* contents - section-game-panel */
    .section-game-panel .game-frame {padding-left: 2.604vw; padding-right: 2.604vw; border-radius: 1.302vw; border-width: 0.391vw; box-shadow: 0 0.521vw 0.781vw 0 rgba(0, 0, 0, 0.25);}
    /* contents - section-email-panel */
    .section-email-panel .title-area .title {font-size: 5.86vw;}
    .section-email-panel .title-area .tit-main {font-size: 6.51vw;}
    .section-email-panel .title-area .tit-reward {font-size: 5.469vw;}
    .section-email-panel .title-area .tit-reward .bold {font-size: 6.51vw;}
    .section-email-panel .title-area .subtitle {font-size: 2.604vw;}
    .section-email-panel .email-form > * {margin-bottom: 5.208vw;}
    .section-email-panel .email-form:has(.form-area:not(.dis-none)) .btn-email-toggle {margin-bottom: 2.604vw;}
    .section-email-panel .email-form .btn-email-toggle .txt-area .bold {margin-top: -1.042vw; margin-right: 1.042vw; font-size: 6.771vw;}
    .section-email-panel .form-area {padding: 6.51vw 3.906vw 3.906vw; border-width: 0.391vw; border-radius: 1.302vw;}
    .section-email-panel .form-area .btn-close-email-form {padding: 1.953vw;}
    .section-email-panel .form-area .btn-close-email-form::before,
    .section-email-panel .form-area .btn-close-email-form::after {width: 3.906vw; height: 3.906vw;}
    .section-email-panel .form-area .field-list {margin-bottom: 2.604vw;}
    .section-email-panel .form-area .field-item {margin-bottom: 3.255vw;}
    .section-email-panel .form-area .field-item .lb-field {margin-bottom: 1.563vw; font-size: 3.255vw;}
    .section-email-panel .form-area .field-item .inp-field-box {height: 9.115vw;}
    .section-email-panel .form-area .field-item .inp-field {padding: 0 7.8125vw 0 2.604vw; border-radius: 0.521vw; font-size: 3.906vw;}
    .section-email-panel .form-area .field-item .inp-field::placeholder {font-size: 3.906vw;}
    .section-email-panel .form-area .field-item.required-value .lb-field .name::after {right: -1.953vw; width: 1.302vw; height: 1.302vw;}
    .section-email-panel .form-area .field-item[class*=check-] .inp-field {border-width: 0.391vw;}
    .section-email-panel .form-area .field-item[class*=check-] [class*=msg-] {margin-top: 1.5vw; font-size: 2.865vw;}
    .section-email-panel .form-area .field-item[class*=check-] .inp-field-box::after {right: 1.953vw; width: 3.906vw; height: 3.906vw;}
    .section-email-panel .form-area .checkbox-area {margin-bottom: 3.906vw;}
    .section-email-panel .form-area .checkbox-area * {font-size: 2.604vw;}
    .section-email-panel .form-area .checkbox-area input[type=checkbox] + label {padding-left: 7.161vw;}
    .section-email-panel .form-area .checkbox-area input[type=checkbox] + label::before {width: 5.208vw; height: 5.208vw;}
    .section-email-panel .form-area .checkbox-area .link {font-size: 2.604vw;}
    .section-email-panel .form-area .form-notice {padding: 3.255vw 2.604vw; border-width: 0.26vw; border-radius: 1.302vw;}
    .section-email-panel .form-area .form-notice .noti-cont {font-size: 3.125vw;}
    .section-email-panel .form-area .form-notice .noti-cont::before {width: 3.125vw; height: 3.125vw;} 
    .section-email-panel .reward-notice {padding: 3.125vw;}
    .section-email-panel .reward-notice .noti-tit {margin-bottom: 1.302vw; font-size: 3.385vw;}
    .section-email-panel .reward-notice .noti-tit::before {width: 3.646vw; height: 3.255vw; margin-right: 0.651vw;}
    .section-email-panel .reward-notice .noti-cont {font-size: 2.865vw;}

    /* footer */
    .footer-wrap .footer {padding: 3.906vw 0 6.51vw;}
    .footer-wrap .footer .logo .link {width: 10.417vw;}
    .footer-wrap .footer .inner {padding: 0; margin-top: 2.605vw;}
    .footer-wrap .footer .site-links > * {padding: 0 1.302vw; font-size: 2.604vw;}
    .footer-wrap .footer .site-links > *::after {width: 0.26vw; height: 2.214vw;}
    .footer-wrap .footer .download-links [class*=btn-item] {height: 6.51vw; margin-right: 1.693vw;}
    .footer-wrap .footer .download-links .btn-item-google {width: 22.01vw;}
    .footer-wrap .footer .download-links .btn-item-apple {width: 19.531vw;}
    .footer-wrap .footer .download-links .btn-item-amazon {width: 22.396vw;}
    .footer-wrap .footer .copyright {font-size: 1.823vw;}
}