body{background:url(/resources/images/layout-bg-pattern.png)}

#wrap{}

:root{
  --color-primary: #ffc000;
  --color-gray: #787878;
  --color-red: #ff0000;
  --color-green: #00ff00;
  --color-yellow: #ffc000;
  --color-blue: #00bff3;
  --color-default: #fff;
  --font-default: 'DungGeunMo', sans-serif;
}

.disable-scroll{position:absolute;width:100%;overflow:hidden}


*{font-weight: 400;font-family: var(--font-default)}
h1, h2, h3, h4 ,h5 ,h6{line-height:120%;font-weight: 400;font-family: var(--font-default)}
a, button{font-weight: 400;font-family: var(--font-default);background:transparent;border:0;cursor:pointer}

input:autofill{
  -webkit-text-fill-color:#fff;
  box-shadow: 0 0 0 1000px transition inset;
  transition: background-color 5000s ease-in-out 0s;
}

input[type=text],input[type=tel],input[type=number],input[type=email],input[type=password]{height:82px;background-color:#081c37;border:0}
input[type="number"]::-webkit-outer-spin-button,input[type="number"]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

.checked-circle{position:relative;display:flex;align-items:center;color:var(--color-gray)}
.checked-circle input{display:none}
.checked-circle span{display:inline-block;width:34px;height:34px;border:4px solid #5a5e6a;border-radius:100%;margin-right:14px}
.checked-circle input:checked + span{border-color:var(--color-blue);padding:7px}
.checked-circle input:checked + span::before{content:'';display:block;height:100%;background-color:var(--color-blue);border-radius:100%}
.checked-circle i{margin-left:10px;padding-top:13px;font-size:var(--font-size-field) }

.valid-wrapper{width:100%;margin-top:15px}
  .valid-success{font-size:var(--font-size-field-text);color:var(--color-blue)}
  .valid-error{font-size:var(--font-size-field-text);color:var(--color-red)}


.button-submit{width: 288px;height: 100px;font-size:50px;background: url(/resources/images/form-submit.png) no-repeat;color: #ff0000}
.button-submit ~ button{margin-left:54px}
.button-cancel{width: 288px;height: 100px;font-size:50px;background: url(/resources/images/form-submit.png) no-repeat;color: #ffffff}
.button-default{width: 182px;height: 100px;font-size:30px;background: url(/resources/images/form-button.png) no-repeat;color: #ffffff}
.button-menu{width:448px;height:100px;font-size:38px;background:url(/resources/images/button-menu.png)}

.color-red{color:var(--color-red)}
.color-green{color:var(--color-green)}
.color-yellow{color:var(--color-yellow)}


.formbox{position:relative}
.formbox .inputbox{z-index: 1;position:relative}
.formbox .inputbox label{z-index: 1;position:absolute;top:0;left:0;width:100%;height:100%;display:flex;padding:10px 0;align-items:center;background-color:#081c37;color:#7b7b7b;font-size:38px}
.formbox .inputbox label.align-center{padding:0;justify-content:center}
.formbox .inputbox select,
.formbox .inputbox input{width:100%}
.formbox .inputbox input.align-center{padding:0 50px;text-align:center}
.formbox .inputbox select:focus,
.formbox .inputbox input:focus{outline:none}
.formbox .inputbox .require{position:absolute;top:30px;left:-40px;color:var(--color-gray);font-size:45px}

.formbox .use-button select,
.formbox .use-button input{padding-right: 260px}
.formbox .use-button button{z-index:1;position:absolute;top:0;right:0;width:182px;height:100%;font-size:48px;background:url(/resources/images/form-button.png ) no-repeat;color:#fff}


.formbox .tip-message{position:absolute;top:-35px;left:0;font-size:25px;font-weight:bold;color:#7b7b7b}

.formbox .valid-wrapper{position:absolute;top: 110px;left:0;padding-left:50px;text-align:initial;margin-top:0}

.formbox .inputbox .radio-wrapper{display:flex}
.formbox .inputbox .radio{flex:1}
.formbox .inputbox .radio ~ .radio{margin-left:35px}
.formbox .inputbox .radio button{width:100%;height:95px;background-color:#fff;background-color:#fff;border:0;font-size:var(--font-size-field);color:var(--color-gray)}
.formbox .inputbox .radio button.is-checked{background-color:var(--color-blue);color:var(--color-default)}
.formbox .inputbox .radio input{display:none}

.btn-primary-default{font-size:var(--font-size-button-default);background: rgb(105,61,185);background: linear-gradient(90deg, rgba(105,61,185,1) 0%, rgba(150,98,242,1) 100%);border-radius:45px}
.btn-primary-small{width:200px;height:69px;line-height:73px;font-size:var(--font-size-button-small);background: rgb(84,81,170);background: linear-gradient(90deg, rgba(84,81,170,1) 0%, rgba(65,108,150,1) 100%);border-radius:45px}

.bottom-buttons{text-align:center}
.bottom-buttons .btn-primary-default{width:660px;height: 105px;border-radius:50px}

.layout-container{position:relative;width:1080px;display: flex;padding-bottom: 213px;margin: auto}

.view-container{flex: 1;position:relative}

.gnb-container{z-index: 10;position:fixed;width:100%;height:213px;bottom:0;left:0;right:0;background-color:#000}

  .layout-gnb{display:flex;height:100%;width:1080px;margin:0 auto}
  .layout-gnb a{display:block;flex:1;text-align:center;background:no-repeat 50% 50% / auto 129px}

  .layout-gnb a:nth-child(1){background-image:url(/resources/images/layout-gnb-home.png)}
  .layout-gnb a:nth-child(1).active{background-image:url(/resources/images/layout-gnb-home-on.png)}

  .layout-gnb a:nth-child(2){background-image:url(/resources/images/layout-gnb-game.png)}
  .layout-gnb a:nth-child(2).active{background-image:url(/resources/images/layout-gnb-game-on.png)}

  .layout-gnb a:nth-child(3){background-image:url(/resources/images/layout-gnb-rank.png)}
  .layout-gnb a:nth-child(3).active{background-image:url(/resources/images/layout-gnb-rank-on.png)}

  .layout-gnb a:nth-child(4){background-image:url(/resources/images/layout-gnb-qr.png)}
  .layout-gnb a:nth-child(4).active{background-image:url(/resources/images/layout-gnb-qr-on.png)}


/* 뒤로가기 버튼 */
.history-back{position:absolute;top:107px;left:89px;width:94px;height:82px;background:url(/resources/images/history-back.png)}

/* home */
.home-container{position:relative;padding-top:200px;height:1707px;background:url(/resources/images/home-top.png) no-repeat 50% 47px }
.home-container .home-message{position:absolute;top:30px;right:540px;text-align:right;max-width:520px;font-weight:bold;font-size:50px;color:var(--color-primary);border:15px solid var(--color-primary);padding:20px 30px}
.home-container .home-message::after{content:'';position:absolute;bottom:-60px;right:-60px;width:45px;height:45px;background:url(/resources/images/home-message-tail.png)}
.home-container .home-message.is-session-empty{color:#ffffff}
@keyframes session-p-1 {0% {opacity:1} 50% {color:#ffffff} 100% {opacity:0}}
.home-container .home-message.is-session-empty .p-1{animation:session-p-1 600ms infinite}

  .home-title{position:absolute;top:520px;left:110px}
  .home-title h2{font-size: 188px;line-height:1;text-align: center}
  .home-title h2 i{display:block;line-height:inherit}
  .home-title h2 small{display:block;font-size: 30px;font-weight:lighter;line-height:150%;margin-top: -27px}

  .home-description{position:absolute;top:780px;left: 110px;font-size:53px}
  @keyframes description-p-1 {0% {color:#ffffff} 50% {color:#ffffff} 100% {color:#00ff00}}
  @keyframes description-p-2 {0% {color:#ffffff} 50% {color:#ffffff} 100% {color:#ffbf00}}
  @keyframes description-p-3 {0% {color:#ffffff} 50% {color:#ffffff} 100% {color:#ff0000}}
  .home-description .p-1{color:#ffffff;transition: none;animation:description-p-1 600ms infinite 300ms}
  .home-description .p-2{color:#ffffff;transition: none;animation:description-p-2 600ms infinite 0ms}
  .home-description .p-3{color:#ffffff;transition: none;animation:description-p-3 600ms infinite 300ms}

  .home-shortcut{position:absolute;top:951px;left:60px;width:966px;height:971px}
  .home-shortcut a{position:absolute;top:0;left:0;font-size:45px;color:#ffffff;text-align:center}

  .home-shortcut .shortcut-1{top: 170px;left: 62px}
  .home-shortcut .shortcut-1 .p-1{font-size:76px}
  .home-shortcut .shortcut-1 .p-2{display:block;margin-top:-7px}
  .home-shortcut .shortcut-2{top: 190px;left: 673px}
  .home-shortcut .shortcut-3{top: 376px;left: 134px}
  .home-shortcut .shortcut-4{top: 376px;left: 577px}

  @keyframes shortcut-1-p-1 {0% {color:#ffffff} 50% {color:#ffffff} 100% {color:#00ff00}}
  @keyframes shortcut-1-p-2 {0% {color:#000000} 50% {color:#ffffff} 100% {color:#ffffff}}
  .home-shortcut .shortcut-1 .p-1{color:#ffffff;transition: none;animation:shortcut-1-p-1 600ms infinite}
  .home-shortcut .shortcut-1 .p-2{color:#000000;transition: none;animation:shortcut-1-p-2 600ms infinite}

  @keyframes shortcut-2-p-1 {0% {color:#ffffff} 50% {color:#ffffff} 100% {color:#ffc000}}
  @keyframes shortcut-2-p-2 {0% {color:#ffffff} 50% {color:#ffffff} 100% {color:#ffffff}}
  .home-shortcut .shortcut-2 .p-1{color:#ffffff;transition: none;animation:shortcut-2-p-1 600ms infinite}
  .home-shortcut .shortcut-2 .p-2{color:#ffffff;transition: none;animation:shortcut-2-p-2 600ms infinite}

  @keyframes shortcut-3-p-1 {0% {color:#ff0000} 50% {color:#ffffff} 100% {color:#ffffff}}
  .home-shortcut .shortcut-3{color:#ff0000}
  .home-shortcut .shortcut-3 .p-1{color:#ff0000;transition: none;animation:shortcut-3-p-1 600ms infinite}

  @keyframes shortcut-4-p-1 {0% {color:#ffffff} 50% {color:#ffffff} 100% {color:#ffc000}}
  .home-shortcut .shortcut-4 .p-1{color:#ffffff;transition: none;animation:shortcut-4-p-1 600ms infinite}

/* M5 소개 */
.home-m5-container{padding-top:100px;height:1707px;background:url(/resources/images/home-m5-bg.png) no-repeat 50% 280px}
  .home-m5-head-warpper{display:flex;align-items:flex-end;padding:0 50px}
  .home-m5-head-warpper h1{flex:1}
    .home-m5-tags{color:#9b9b9b;font-size:34px;letter-spacing: 3.6px;padding-bottom:40px}
    .home-m5-tags .p-1{color:#ffc000}
    .home-m5-tags .p-2{color:#d1068c}
    .home-m5-tags .p-3{color:#00d100}
    .home-m5-tags .p-4{color:#ffffff}
  .home-m5-sns{display:flex;padding:1135px 0 0 100px}
  .home-m5-sns a ~ a{margin-left:18px}


/* 이용안내 */
.home-guide-container{padding-top:65px;height:1707px;background:url(/resources/images/home-guide-bg.png) no-repeat 50% 308px}
.home-guide-container h1{text-align:center}
.home-guide-container h2{text-align:center;margin-top:10px}
  .home-guide-description{padding:150px 0 0 140px}
  .home-guide-description h3{display:flex;align-items:flex-end;font-size:45px;line-height:200%}
  .home-guide-description h3 ~ h3{margin-top:70px}
  .home-guide-description p{font-size:36px}
  .home-guide-description p{margin-bottom:10px}
  .home-guide-contact{padding:150px 0 0 90px}
  .home-guide-contact p {margin-bottom:15px}

  .home-guide-description .pay{margin:10px 0 0}
  .home-guide-description .pay i{font-size:60px}
  .home-guide-description .pay span{display:inline-block}
  .home-guide-description .pay span:nth-child(1){width:470px}
  .home-guide-description .pay span:nth-child(2){width:190px;text-align:right;}
  .home-guide-description .pay span:nth-child(3){width:140px;text-align:right;}


.home-branches-container{padding-top:65px;min-height:1707px;margin:0 auto}
.home-branches-container h1{text-align:center}
.home-branches-container h2{text-align:center;margin-top:20px}
.home-branches-container .branches-list{position:relative;width:1080px;padding-top:30px}
.home-branches-container .branches-list button{z-index:10;position:absolute;top:55px;}
.home-branches-container .branches-list .prev{left:65px}
.home-branches-container .branches-list .next{right:65px}
.home-branches-container .branches-list .item-img{text-align:center}
.home-branches-container .branches-list .item-img img{box-shadow:0 0 50px rgba(255, 20, 242, 0.3)}
.home-branches-container .branches-list .item-img p{margin-top:20px}
.home-branches-container .branches-list .item-descpt{position:relative;width:992px;margin:0 auto;margin-top:75px}
.home-branches-container .branches-list .item-descpt h3{margin-top:70px}
.home-branches-container .branches-list .item-descpt .descpt-1 p{font-size:36px;word-spacing: -7px}
.home-branches-container .branches-list .item-descpt .descpt-1 p i{font-size:60px}
.home-branches-container .branches-list .item-descpt .descpt-1 p span{display:inline-block}
.home-branches-container .branches-list .item-descpt .descpt-1 p span:nth-child(1){width:500px}
.home-branches-container .branches-list .item-descpt .descpt-2 p{font-size:30px}
.home-branches-container .branches-list .item-descpt .descpt-2 p{margin-bottom:15px}
.home-branches-container .branches-list .item-descpt .color-yellow{color:#ffca00}
.home-branches-container .branches-list .item-descpt a{position:absolute;bottom:0;right:0}
.home-branches-container .branches-list .item-comingsoon{text-align:center;margin-top:100px}


/* QR */
.qrcode-contaainer{padding-top:150px}
.qrcode-contaainer h2{font-size:150px;font-weight:bold;color:#00ccff;text-align:center}
  .qrcode-massage{text-align: center;font-size:50px;margin-top:20px}
  .qrcode-view{height:853px;padding-top:80px;margin-top:135px;background:url(/resources/images/qrcode-dashed-border.png) no-repeat 50% 0}
  .qrcode-view svg{display:block;margin:0 auto;background-color:#fff;padding:20px;}



/* 로그인 */
.login-container{height:1707px;padding-top: 100px;background: url(/resources/images/login-bg.png) no-repeat 0 calc(100% + 30px);}
.login-container h1{text-align:center}
  .login-description{padding-top: 70px;color:#b8b9b9;font-size:38px;text-align:center}
  .login-form{position:relative;width:900px;height: 472px;margin:0 auto;margin-top:25px;padding:33px 381px 33px 71px;background:url(/resources/images/login-form-bg.png) no-repeat}
  .login-form .formbox ~ .formbox{margin-top:33px}
  .login-form .formbox{padding:9px 30px;background:url(/resources/images/login-form-text.png) no-repeat}
  .login-form .formbox input.is-usage + label,
  .login-form .formbox input:focus + label{display:none}
  .login-form .formbox label{font-size:60px}
  .login-form .form-signin{position:absolute;top:74px;right:72px;width:230px;height:151px;background:transparent url(/resources/images/login-form-signin.png) no-repeat;color:#fff;font-size:60px}
  
  .login-form .auto-login{margin-top:20px;display:flex;font-size:40px;align-items: center;}
  .login-form .auto-login input{display:none}
  .login-form .auto-login input+span{margin-right:20px;width:69px;height:68px;background:url(/resources/images/login-auto-off.png) no-repeat}
  .login-form .auto-login input:checked+span{background:url(/resources/images/login-auto-on.png) no-repeat}
  
  .login-form .find-link{position:absolute;bottom: 22px;left: 143px;display:flex}
  .login-form .find-link a{color:#7b7b7b}
  .login-form .find-link a:nth-child(1) i{color:#00ff00}
  .login-form .find-link a:nth-child(2) i{color:#ff0000}
  .login-form .find-link a:nth-child(3) i{color:#ffc000}
  .login-form .find-link a ~ a{margin-left: 82px}
  .login-terms-buttons{display:flex;width:900px;margin:0 auto;margin-top: 30px;}
  .login-terms-buttons span{font-size:31px;color:#7b7b7b;font-weight:bold}
  .login-terms-buttons span ~ span{margin-left:20px}
  .login-terms-buttons button{font:inherit;color:inherit}


  /* 아이디 찾기 */
.find-id-container{padding:100px 0}
.find-id-container h1{text-align:center;font-size:80px}
.find-id-container h2{text-align:center;font-size:50px;margin-top:120px}
  .find-id-form{margin-top:50px;width:1010px}
  .find-id-form .formbox ~ .formbox{margin-top:110px}
  .find-id-form .formbox .inputbox{position:relative;padding:9px 0;padding-left:341px;background:url(/resources/images/form-input.png) no-repeat 341px 0}
  .find-id-form .formbox .inputbox input{width:448px;padding:0 30px;background:transparent}
  .find-id-form .formbox .inputbox label{flex-wrap:wrap;width:341px;justify-content:flex-end;text-align:right;padding-right:30px;background:transparent;color:#fff}
  .find-id-form .formbox .inputbox label i{flex:0 0 100%;color:var(--color-red)}
  .find-id-form .formbox .tip-message{padding-left:375px;text-align: center}
  .find-id-form .formbox .valid-wrapper{padding-left:360px}

  .find-id-response{margin-top:65px}
  .find-id-response p{text-align:center}
  .find-id-response .response-message{font-size:48px;color:#4eff00}
  .find-id-response .response-email{font-size:35px;width:792px;height:100px;margin:0 auto;margin-top:35px;line-height:1;padding-top:30px;color:#ffffff;background:url(/resources/images/find-id-email.png) no-repeat}
    
/* 비밀번호 찾기 */
.find-pw-container{padding:100px 0}
.find-pw-container h1{text-align:center;font-size:80px}
  .find-pw-form{margin-top:170px;width:1010px}
  .find-pw-form .formbox ~ .formbox{margin-top:110px}
  .find-pw-form .formbox .inputbox{position:relative;padding:9px 0;padding-left:341px;background:url(/resources/images/form-input.png) no-repeat 341px 0}
  .find-pw-form .formbox .inputbox input{width:448px;padding:0 30px;background:transparent}
  .find-pw-form .formbox .inputbox label{flex-wrap:wrap;width:341px;justify-content:flex-end;text-align:right;padding-right:30px;background:transparent;color:#fff}
  .find-pw-form .formbox .inputbox label i{flex:0 0 100%;color:var(--color-red)}
  .find-pw-form .formbox .tip-message{padding-left:375px;text-align: center}
  .find-pw-form .formbox .valid-wrapper{padding-left:360px}

  .find-pw-response{margin-top:65px}
  .find-pw-response p{text-align:center}
  .find-pw-response .response-message{font-size:48px;color:#4eff00}


/* 회원가입 */
.signup-container{padding:100px 0 50px}
.signup-container h1{text-align:center;font-size:80px}
.signup-container .bottom-buttons{margin-top:70px}
  .signup-form{margin-top:70px;width:1010px}
  .signup-form .formbox ~ .formbox{margin-top:100px}
  .signup-form .formbox .inputbox{position:relative;padding:9px 0;padding-left:341px;background:url(/resources/images/form-input.png) no-repeat 341px 0}
  .signup-form .formbox .inputbox input{width:448px;padding:0 30px;background:transparent}
  .signup-form .formbox .inputbox label{flex-wrap:wrap;width:341px;justify-content:flex-end;text-align:right;padding-right:30px;background:transparent;color:#fff}
  .signup-form .formbox .inputbox label i{flex:0 0 100%;color:var(--color-red)}
  .signup-form .formbox .tip-message{padding-left:375px;text-align: center}
  .signup-form .formbox .tip-message.type-password{padding-left:340px}
  .signup-form .formbox .valid-wrapper{padding-left:360px}
  .signup-form .formbox .use-button button{font-size:32px;color:#ff0000}  
  .signup-form .formbox .radio-wrapper{display:flex;position:relative;padding-left:341px}
  .signup-form .formbox .radio-wrapper label{position: absolute;top: 12px;left: 0;width: 341px;height: 100%;font-size: 38px;text-align: right;padding-right: 30px;color: #fff}
  .signup-form .formbox .radio-wrapper label i{color:#ff0000}
  .signup-form .formbox .radio-wrapper .radio ~ .radio{margin-left:53px}
  .signup-form .formbox .radio-wrapper .radio button{width:196px;height:100px;background:url(/resources/images/form-radio.png) no-repeat}
  .signup-form .formbox .radio-wrapper .radio button.is-checked{background-image:url(/resources/images/form-radio-on.png)}
  .signup-form .formbox .radio-wrapper .radio input{position:fixed;top:0;left:0;width:1px;height:1px;visibility: hidden}
  .signup-form .termsuse{display:flex;align-items:center;padding-left:135px;margin-top:20px}
  .signup-form .termsuse .termsuse-input{flex:1}
  .signup-form .termsuse .termsuse-input label{color:#fff;font-size:36px}
  .signup-form .termsuse .termsuse-input label i{color:#ff0000;padding-top:0}
  .signup-form .termsuse .termsuse-input label input+span{border-radius:0;border:0;width:60px;height:60px;margin-right:30px;background: url(/resources/images/form-checkbox.png) no-repeat}
  .signup-form .termsuse .termsuse-input label input:checked+span{padding:15px}
  .signup-form .termsuse .termsuse-input label input:checked+span::before{border-radius:0;background-color:#00d100}
  .signup-form .termsuse .termsuse-button button{width:182px;height:100px;background:url(/resources/images/form-button.png ) no-repeat;color:#ff0000}


/* profile */
.profile-container{padding:100px 0 50px;height:1707px;background:url(/resources/images/m5-ci-large.png) no-repeat 50% 1320px}
.profile-container h1{text-align:center;font-size:80px}
.profile-container ul{width:448px;margin:0 auto;margin-top:220px}
.profile-container ul li ~ li{margin-top:100px}


/* delete */
.delete-container{text-align:center;padding:100px 0 50px;height:1707px;background:url(/resources/images/m5-ci-large.png) no-repeat 50% 1320px}
.delete-container h1{text-align:center;font-size:80px}
.delete-container h2{font-size:50px;text-align:center;margin-top:114px}
.delete-container .warning-container{margin-top:170px}
.delete-container .warning-container .warning-title{display:block;font-weight:400;font-size:100px;margin-bottom:55px;color:var(--color-red)}
.delete-container .warning-container .warning-text{line-height:150%;font-size:50px;color:var(--color-red)}
.delete-container .warning-container .warning-text ~ .warning-text{margin-top:75px}
.delete-container .warning-container .wartermark{position:absolute;top: 1320px;left:0;right:0}
.delete-container .bottom-buttons{display:flex;justify-content:center;position:absolute;top:1075px;left:0;right:0;width:775px;margin:0 auto}
.delete-container .bottom-buttons .btn-primary-default{flex:1}
.delete-container .bottom-buttons .btn-primary-default ~ .btn-primary-default{margin-left:38px}


/* edit password */
.edit-pw-container{padding:100px 0 50px;height:1707px;background:url(/resources/images/m5-ci-large.png) no-repeat 50% 1320px}
.edit-pw-container h1{text-align:center;font-size:80px}
.edit-pw-container h2{font-size:50px;text-align:center;margin-top:114px}
.edit-pw-container .bottom-buttons{margin-top:80px}
  .edit-form{margin-top:70px}
  .edit-form .formbox ~ .formbox{margin-top:100px}
  .edit-form .formbox .inputbox{position:relative;padding:9px 0;padding-left:442px;background:url(/resources/images/form-input.png) no-repeat 442px 0}
  .edit-form .formbox .inputbox input{width:448px;padding:0 30px;background:transparent}
  .edit-form .formbox .inputbox label{flex-wrap:wrap;width:442px;justify-content:flex-end;text-align:right;padding-right:30px;background:transparent;color:#fff}
  .edit-form .formbox .inputbox label i{flex:0 0 100%;color:var(--color-red)}
  .edit-form .formbox .tip-message{padding-left:442px;text-align: center}
  .edit-form .formbox .tip-message.type-password{padding-left:340px}
  .edit-form .formbox .valid-wrapper{padding-left:442px}


/* edit info */
.edit-info-container{padding:100px 0 50px;height:1707px;background:url(/resources/images/m5-ci-large.png) no-repeat 50% 1320px}
.edit-info-container h1{text-align:center;font-size:80px}
.edit-info-container h2{font-size:50px;text-align:center;margin-top:114px}
.edit-info-container .bottom-buttons{margin-top:80px}


/* complete */
.complete-container{margin-top:90px;text-align:center}
.complete-container .complete-text{font-size:48px;color:#4eff00}
.complete-container .bottom-buttons{margin-top:150px}



/* game */
.game-container{height:1707px;background:url(/resources/images/game-container.png) no-repeat 0 100%}
.game-container .game-item{display:flex;flex-wrap:wrap;padding-left:10px;}
.game-container .game-item button{flex: 0 0 33.33%;padding:20px 10px;text-align:left}
.game-container .game-item button img{border-radius:10px}
.game-container .game-item button span{display:block;font-size:27px}
.game-container .game-list{position:absolute;top:441px;left:49px;width:980px;height:1226px}
.game-container .game-description{position:absolute;top:335px;left: 110px;font-size:53px}
.game-container .game-description .p-1{color:#fff;transition: none;animation:description-p-1 600ms infinite 300ms}
.game-container .game-description .p-2{color:#fff;transition: none;animation:description-p-2 600ms infinite 0ms}
.game-container .game-description .p-3{color:#fff;transition: none;animation:description-p-3 600ms infinite 300ms}

.game-popup-container{z-index: 20;position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.7)}
.game-popup-container .game-poup{position:absolute;top:200px;left:128px;width:833px;height:1340px;background:url(/resources/images/game-popup.png) no-repeat}
.game-popup-container .game-close{position:absolute;top:0;right:0;width:130px;height:70px}
.game-popup-container .game-video{position:absolute;top:81px;left:28px;width:768px;height:432px;background-color:#000;overflow:hidden;border-radius:15px}
.game-popup-container .game-video button{z-index:1;position:absolute;top:0;left:0;width:100%;height:100%}
.game-popup-container .game-video video{width:100%;height:100%}
.game-popup-container .game-text{position:absolute;top:534px;left:27px;width:780px;height:620px}

.game-popup-container h3{font-size:45px;color:#1ad1ff}
.game-popup-container h4{font-size:60px;color:#1ad1ff;margin-top:15px}
.game-popup-container p{color:#d6d6d6;line-height:130%;font-size:30px}
.game-popup-container h3+p{margin-top:5px}
.game-popup-container h4+p{margin-top:5px}

.game-popup-container .text-warpper{padding: 40px 0 0 0;text-align: center;}
.game-popup-container .text-warpper .text-flex{display:flex;align-items:center;margin-top:15px}
.game-popup-container .text-warpper .text-flex h4{font-size:40px;margin-top:0}


/* missions */
.rank-container{height:1707px;padding-top:20px}
  .rank-menu{position:relative;display:flex;height:60px;margin-left:22px}
  .rank-menu button{display:flex;align-items:flex-start;padding:5px 20px;height:100px;font-size:45px;color:#0e0e0e;font-weight:bold;border-radius:15px 15px 0 0}
  .rank-menu button i{padding-top:2px;color:#fff;margin-left:10px}
  .rank-menu button ~ button{margin-left:20px}

  .rank-contents{position:relative;width:1035px;height:1588px;margin:0 auto}
  .rank-contents [class^="rank-mission"]{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:40px}

      .mission-select{z-index: 10;position:absolute;top:0;left:0;width:100%;padding:40px}
      .mission-select .mission-select-toggle button{line-height:0;width:100%;height:90px;padding:0 30px;background-color:#000;border-radius:20px;}
      .mission-select .mission-select-toggle button span{display:block;height:100%;font-size:60px;font-family: "A Goblin Appears!";line-height:85px;background:url(/resources/images/rank-select-arrow.png) no-repeat 100% 50%}
      .mission-select .mission-select-list{border-radius:40px;display:none}
      .mission-select .mission-select-list div{margin-top:5px}
      .mission-select .mission-select-list button{line-height:0;width:100%;height:90px;font-size:60px;font-family: "A Goblin Appears!";background-color:#000;border-radius:20px;}

      #mission-length-3{background:url(/resources/images/mission-3-path.png) no-repeat 50% 0}
      #mission-length-4{background:url(/resources/images/mission-4-path.png) no-repeat 50% 0}
      #mission-length-5{background:url(/resources/images/mission-5-path.png) no-repeat 50% 0}

      .mission-list-container{position:relative;margin-top:170px;height:408px}
      .mission-list-container .time-start{position:absolute;top:270px;left:44px;width:100px;text-align:center;font-weight:700;font-family:'DS-Digital', sans-serif;font-style:italic;font-size:36px;border-radius:25px;background-color:#000;color:#fff}
      .mission-list-container .game-item{position:absolute}
      .mission-list-container .game-item .image{position:relative;width:135px;padding-top:72%;margin:0 auto;overflow:hidden}
      .mission-list-container .game-item .image img{position:absolute;top:50%;left:50%;transform: translate(-50%, -50%);width:100%;border-radius:7px}
      .mission-list-container .game-item .name{position:absolute;top:143px;left:50%;font-size:25px;color:#000;transform:translateX(-50%);white-space:nowrap;font-weight:bold}

    #mission-length-5 .game-item:nth-child(1){top:5px;left:166px}
    #mission-length-5 .game-item:nth-child(2){top:306px;left:310px}
    #mission-length-5 .game-item:nth-child(2) .name{top:-80px}
    #mission-length-5 .game-item:nth-child(3){top:5px;left:449px}
    #mission-length-5 .game-item:nth-child(4){top:306px;left:597px}
    #mission-length-5 .game-item:nth-child(4) .name{top:-80px}
    #mission-length-5 .game-item:nth-child(5){top:5px;left:726px}

    #mission-length-4 .game-item:nth-child(1){top:5px;left: 169px;}
    #mission-length-4 .game-item:nth-child(2){top:306px;left: 358px;}
    #mission-length-4 .game-item:nth-child(2) .name{top:-80px}
    #mission-length-4 .game-item:nth-child(3){top:5px;left: 536px;}
    #mission-length-4 .game-item:nth-child(4){top:306px;left: 730px;}
    #mission-length-4 .game-item:nth-child(4) .name{top:-80px}

    #mission-length-3 .game-item:nth-child(1){top:5px;left: 188px;}
    #mission-length-3 .game-item:nth-child(2){top:306px;left: 454px;}
    #mission-length-3 .game-item:nth-child(2) .name{top:-80px}
    #mission-length-3 .game-item:nth-child(3){top:5px;left: 699px;}



  .rank-list-container{position:absolute;top:613px;left:0;width:100%}
    .rank-head{position:relative;display:flex;justify-content:center;align-items:center}
    .rank-head .head-range{margin-left:105px;display:flex}
    .rank-head .head-range button ~ button{margin-left:30px}
    .rank-head .head-category{position:absolute;top:130px;left:0;width:100%;;text-align:center}
    .rank-head .head-category button ~ button{margin-left:40px}

    .rank-body{width:942px;height:707px;margin:0 auto;margin-top:140px;background:url(/resources/images/rank-list.png) no-repeat}
    .rank-body .rank-me{height:107px;display:flex;align-items:center;justify-content:center}
    .rank-body .rank-me *{color:transparent}
    .rank-body .rank-me .label{
      font-size:80px;
      margin-right:50px;
      background: linear-gradient(to top , #ff1e00, #dee901, #ff1e00);
      background-clip:text;
    }
    .rank-body .rank-me .rank{
      font-family:'A Goblin Appears!';
      font-size:36px;
      border:7px solid transparent;
      background: linear-gradient(to top , #ff8a00, #dee901, #ff8a00);
      background-clip:text;
      border-image:linear-gradient(to top , #ff8a00, #dee901, #ff8a00);
      border-image-slice: 1;
      padding:6px 10px 12px 15px;
    }
    .rank-body .rank-me .name{
      font-size:35px;
      max-width:300px;
      margin:0 70px;
      line-height:1;
      background: linear-gradient(to top , #ff8a00, #dee901, #ff8a00);
      background-clip:text;
    }
    .rank-body .rank-me .name span{display:block;overflow:hidden;white-space: nowrap;text-overflow:ellipsis;font-weight:bold}
    .rank-body .rank-me .name span ~ span{margin-top:2px}
    .rank-body .rank-me .time{
      font-family:'A Goblin Appears!';
      font-size:40px;
      background: linear-gradient(to top , #ff8a00, #dee901, #ff8a00);
      background-clip:text
    }

    .rank-body .rank-list{margin-top:14px;display:flex;flex-wrap:wrap;padding:30px 30px}
    .rank-body .rank-list .rank-item{display:flex;align-items:center;flex:0 0 50%;margin:18px 0;padding-left:30px}
    .rank-body .rank-list .rank-item *{color:#ffbf00}
    .rank-body .rank-list .rank-item .label{width:70px;height:70px;text-align:center;font-size:47px;letter-spacing: -4px;text-indent: -6px;line-height:1.1;border:7px solid #ffbf00;margin-right:20px}
    .rank-body .rank-list .rank-item .name{font-size:30px;width:160px;line-height:1;margin-right:10px}
    .rank-body .rank-list .rank-item .name span {display:block;overflow:hidden;white-space: nowrap;text-overflow:ellipsis;font-weight:bold}
    .rank-body .rank-list .rank-item .name span ~ span{margin-top:2px}
    .rank-body .rank-list .rank-item .time{font-family:'A Goblin Appears!';font-size:30px;color:#ffffff;line-height:110%}

    .rank-body .rank-list .rank-item:nth-child(1) *{color:transparent}
    .rank-body .rank-list .rank-item:nth-child(1) .label{
      background: linear-gradient(350deg , #02ff1a, #dee901, #ff8a00);
      background-clip:text;
      border-image:linear-gradient(350deg , #02ff1a, #dee901, #ff8a00);
      border-image-slice: 1;
    }
    .rank-body .rank-list .rank-item:nth-child(1) .name span{
      background: linear-gradient(350deg , #02ff1a, #dee901, #ff8a00);
      background-clip:text;
    }
    .rank-body .rank-list .rank-item:nth-child(1) .time{
      background: linear-gradient(350deg , #02ff1a, #dee901, #ff8a00);
      background-clip:text;
    }


    /* animate */
    @keyframes rank-me-label { 
      0%{background: linear-gradient(to top , #dee901, #dee901, #dee901);background-clip:text} 
      50%{background: linear-gradient(to top , #ff1e00, #dee901, #ff1e00);background-clip:text} 
      100%{background: linear-gradient(to top , #dee901, #dee901, #dee901);background-clip:text} 
    }
    @keyframes rank-me-rank { 
      0%{
        background: linear-gradient(to top , #dee901, #dee901, #dee901);background-clip:text;
        border-image:linear-gradient(to top , #dee901, #dee901, #dee901);border-image-slice: 1;
      } 
      50%{
        background: linear-gradient(to top , #ff8a00, #dee901, #ff8a00);background-clip:text;
        border-image:linear-gradient(to top , #ff8a00, #dee901, #ff8a00);border-image-slice: 1;
      } 
      100%{
        background: linear-gradient(to top , #dee901, #dee901, #dee901);background-clip:text;
        border-image:linear-gradient(to top , #dee901, #dee901, #dee901);border-image-slice: 1;
      } 
    }
    @keyframes rank-me-name { 
      0%{background: linear-gradient(to top , #dee901, #dee901, #dee901);background-clip:text} 
      50%{background: linear-gradient(to top , #ff8a00, #dee901, #ff8a00);background-clip:text} 
      100%{background: linear-gradient(to top , #dee901, #dee901, #dee901);background-clip:text} 
    }
    @keyframes rank-me-time { 
      0%{background: linear-gradient(to top , #dee901, #dee901, #dee901);background-clip:text} 
      5%{background: linear-gradient(to top , #ff8a00, #dee901, #ff8a00);background-clip:text} 
      100%{background: linear-gradient(to top , #dee901, #dee901, #dee901);background-clip:text}
    }
    .rank-body .rank-me .label{animation:rank-me-label 400ms infinite}
    .rank-body .rank-me .rank{animation:rank-me-rank 400ms infinite}
    .rank-body .rank-me .name span{animation:rank-me-name 400ms infinite}
    .rank-body .rank-me .time{animation:rank-me-name 400ms infinite}

    @keyframes rank-list-label {
      0%{
        background: linear-gradient(350deg , #02ff1a, #02ff1a, #02ff1a);
        background-clip:text;
        border-image:linear-gradient(350deg , #02ff1a, #02ff1a, #02ff1a);
        border-image-slice: 1;
      }
      50%{
        background: linear-gradient(350deg , #02ff1a, #dee901, #ff8a00);
        background-clip:text;
        border-image:linear-gradient(350deg , #02ff1a, #dee901, #ff8a00);
        border-image-slice: 1;
      }
      100%{
        background: linear-gradient(350deg , #02ff1a, #02ff1a, #02ff1a);
        background-clip:text;
        border-image:linear-gradient(350deg , #02ff1a, #02ff1a, #02ff1a);
        border-image-slice: 1;
      }
    }
    @keyframes rank-list-name {
      0%{
        background: linear-gradient(350deg , #02ff1a, #02ff1a, #02ff1a);
        background-clip:text;
      }
      50%{
        background: linear-gradient(350deg , #02ff1a, #dee901, #ff8a00);
        background-clip:text;
      }
      100%{
        background: linear-gradient(350deg , #02ff1a, #02ff1a, #02ff1a);
        background-clip:text;
      }
    }
    @keyframes rank-list-time {
    0%{
      background: linear-gradient(350deg , #02ff1a, #02ff1a, #02ff1a);
      background-clip:text;
    }
    50%{
      background: linear-gradient(350deg , #02ff1a, #02ff1a, #02ff1a);
      background-clip:text;
    }
    100%{
      background: linear-gradient(350deg , #02ff1a, #dee901, #ff8a00);
      background-clip:text;
    }
    }
    .rank-body .rank-list .rank-item:nth-child(1) .label{animation:rank-list-label 400ms infinite}
    .rank-body .rank-list .rank-item:nth-child(1) .name span{animation:rank-list-name 400ms infinite}
    .rank-body .rank-list .rank-item:nth-child(1) .time{animation:rank-list-name 400ms infinite}



/* portal */
.layer-wrapper {
  z-index:100;
  position:fixed;
  top:0;
  left:0;
  right:0;
  height:100%;
  background-color: rgba(0, 0, 0, 0.8);
  padding: 220px 60px 0;
}
.layer-wrapper .layer-contents {
  height: calc(100% - 250px);
  max-height: 1390px;
  background-color:rgba(255, 255, 255, 0.2);
  border-radius: 45px;
  padding: 30px;
}
.layer-wrapper .layer-contents{font-style: italic}
.layer-wrapper .layer-contents h3{margin-bottom:50px;text-align:center;font-weight: bold;font-size:40px;}
.layer-wrapper .layer-contents h4{font-size:30px;font-weight: 400;margin-top:50px}
.layer-wrapper .layer-contents p{line-height:130%;opacity:0.7;margin-left:10px}
.layer-wrapper .layer-contents p ~ p{margin-top:30px}

.layer-wrapper .bottom-buttons{
  margin-top: 50px;
}


.table-style{table-layout:fixed;border-collapse:collapse;border-spacing:0;width:100%;text-align:center;border-top:2px solid #fff}
.table-style th, .table-style td{line-height:150%;padding:20px;vertical-align:middle;border:solid #d5d5d5;border-width:0 1px 1px 0}
.table-style th{background-color:rgba(255, 255, 255, 0.2);font-weight:bold}
.table-style td{opacity:0.7}
.table-style th:first-child, .table-style td:first-child{border-left-width:0}
.table-style th:last-child, .table-style td:last-child{border-right-width:0}
.table-style thead th{height:55px;border-bottom:1px solid #fff}
.table-style tbody th{font-weight:400;text-align:center;}
.table-style tfoot th{font-weight:500}
.table-style td[rowspan]{border-left-width:1px}
.table-style .left{text-align:left}


/**/
.reset-pw-container{padding:100px 0 50px}
.reset-pw-container h1{text-align:center;font-size:80px}
.reset-pw-container .bottom-buttons{margin-top:150px}
  .reset-pw-form{width:1000px;margin:0 auto;margin-top:150px;}
  .reset-pw-form .formbox ~ .formbox{margin-top:100px}
  .reset-pw-form .formbox .inputbox{position:relative;padding:9px 0;padding-left:400px;background:url(/resources/images/form-input.png) no-repeat 400px 0}
  .reset-pw-form .formbox .inputbox input{width:448px;padding:0 30px;background:transparent}
  .reset-pw-form .formbox .inputbox label{flex-wrap:wrap;width:400px;justify-content:flex-end;text-align:right;padding-right:30px;background:transparent;color:#fff}
  .reset-pw-form .formbox .inputbox label i{flex:0 0 100%;color:var(--color-red)}
  .reset-pw-form .formbox .valid-wrapper{padding-left:400px}


#standby{min-height:746px;height:100vh;display:flex;justify-content:center;align-items:center;background:url(/resources/images/login-bg.png) no-repeat 50% 100% / auto 400px}
#standby .standby-container{text-align:center;padding-bottom:400px}
#standby .standby-container h1{margin-bottom:50px}
#standby .standby-container .commingsoon{font-size:50px;background-color:#000}

#standby .standby-container .tel{margin-top:20px}
#standby .standby-container .sns{margin-top:50px}
#standby .standby-container .sns img{width:50px}
#standby .standby-container .sns a ~ a {margin-left:20px}


.event-container{z-index:10000;position: fixed;top:0;left:0;width:100%;height:100%;padding:50px;background-color:rgba(0, 0, 0, 0.7);display:flex;align-items: center;justify-content: center;flex-wrap:wrap}
  .event-warpper{margin-top: -200px}
  .event-warpper h3{text-align: center;margin-bottom:30px}
    .event-list-box{padding:30px;background-color:#ffc000;border-radius:25px;width: 900px;}
    .event-list-box .event-control{position:relative;display:flex;justify-content: center;align-items: center;margin-top:20px}
    .event-list-box .event-control div{display:flex;align-items: center;}
    .event-list-box .event-control div button{border-radius:15px;padding:20px;font-size: 35px;background-color:#000;height:90px}
    .event-list-box .event-control div button ~ button{margin-left:10px}
    .event-list-box .event-control div:nth-child(1){flex:1}
    .event-list-box .event-control div.empty button{width:100%}
    .event-list-box .event-control span{margin: 0 20px;font-size:45px;border-radius:15px;padding:20px;background-color:#000;height:90px}
    .event-list-box .event-control span i{color:#00ff00}
    .event-list-box .event-control .prev{border-radius:15px;padding:20px;background-color:#000;height:90px}
    .event-list-box .event-control .next{border-radius:15px;padding:20px;background-color:#000;height:90px}
    .event-list-box .item-thumb{width:100%;overflow:hidden;border-radius:15px;}
    .event-list-box .item-thumb img{width:100%;height:700px;display:block;list-style:100%;cursor:pointer}

.event-details {z-index:10010;position: fixed;top:0;left:0;width:100%;height:100%;padding:100px 0 50px;background:url(/resources/images/layout-bg-pattern.png);overflow-y:scroll}
.event-details h3{text-align: center;margin-bottom:50px}
.event-details .details-descript{text-align: center;padding:0 50px}
.event-details .details-descript img{width:100%}
.event-details .bottom-buttons{margin-top:50px}

.notice-container{padding-top:100px;padding-bottom:50px}
.notice-container h1{text-align: center;}
.notice-container h2{text-align: center;margin-top:100px}

  .notice-list{margin:50px auto 0;max-width:800px;padding-top:10px;border-top:7px solid #ddd;border-bottom:2px solid #aaa}
  .notice-list .notice-item ~ .notice-item{margin-top:10px;padding-top:10px;border-top:2px dashed #ddd}
  .notice-list .notice-item button{display:flex;width:100%;padding:30px 20px;font-size:35px;text-align:left}
  .notice-list .notice-item button strong{flex:1;overflow: hidden;text-overflow:ellipsis;white-space:nowrap}
  .notice-list .notice-item button span{margin-left:15px}

  .notice-details{padding-top:100px;padding-bottom:50px;margin:0 60px}
  .notice-details .details-date{font-size:35px}
  .notice-details .details-title{margin-top:20px;color:#00ccff;font-size:45px;}
  .notice-details .details-description{margin-top:20px;margin-left:40px;font-size:40px;line-height:150%}
  .notice-details .details-description p{font:inherit}
  .notice-details .details-description p i{font-size:60px}

.pagination-container{margin-top:50px}
.pagination-container .pagination{display:flex;justify-content:center;align-items:center}
.pagination-container .pagination li ~ li{margin-left:30px}
.pagination-container .pagination li a{overflow:hidden;display:block;text-align:center;line-height:50px;height:51px;width:51px;background:url(/resources/images/page-number.png) no-repeat 0 0;color:#fff;opacity:0.5}
.pagination-container .pagination li.active a{opacity:1}
.pagination-container .pagination li [aria-label="Go to previous page"]{text-indent: 100px;background:url(/resources/images/page-prev.png) no-repeat 50% 50%}
.pagination-container .pagination li [aria-label="Go to next page"]{text-indent: 100px;background:url(/resources/images/page-next.png) no-repeat 50% 50%}
.pagination-container .pagination li [aria-label="Go to first page"],
.pagination-container .pagination li [aria-label="Go to last page"]{display:none}