@charset "utf-8";

html {boarder:0;font-size: 10px;height: 100%;}
body{-ms-overflow-style: none;}
::-webkit-scrollbar {display: none;}
section {position: relative;}
.container {width: 100%;max-width: 81.8rem;margin:0 auto;position: relative;}
.padding-box {padding:0 5rem;overflow: hidden}
.button-box{position: relative;width:100%;}
.button-box a{display: block;width: 100%;}
.button-box.nobg a{position: static;padding-bottom: 4.5rem;box-sizing: border-box;display: block;transform: translateX(0);}
.button {width: 100%;margin:0 auto;}
section.button-box a {bottom:4.5rem;}

.section-gif{position: relative;}
.section-gif .gif-box{;position: absolute;left: 50%;top:0;transform: translateX(-50%);}
.section-gif .gif-box .gif-frame {width:65.1rem;height: 36rem;overflow: hidden;border-radius: 30px;}

.section-gif .gif-box:nth-of-type(1){top:43rem;}
.section-gif .gif-box:nth-of-type(2){top:98rem;}
.section-gif .gif-box:nth-of-type(3){top:153rem;}
.section-gif .gif-box:nth-of-type(4){top:208rem;}
.section-gif .gif-box:nth-of-type(5){top:247rem;}

footer {height: 10rem;background-color: #4981e9;margin-bottom: 12.5rem;position: relative;}

.form-box{width:100%;padding:2rem 8rem 0 ;text-align: center;font-family: GmarketSans, sans-serif;position: absolute;top:30rem;}
.form-box .input-row {width:100%;display: flex;align-items: center;justify-content: center;margin:1rem auto 0;}
.form-box .input-row:first-of-type{margin-top: 0;}
.form-box .input-row.top{border-bottom: 0;height: 7rem;margin: 0 auto;}
.form-box button{width: 100%;margin-top: 20rem;}
.form-box input[type='text'],.form-box input[type='tel']{width: 100%;height: 7.8rem;box-sizing: border-box;font-family: GmarketSans;font-weight: 400;font-size: 3rem;color: #ffffff;border: 0.2rem solid #ffffff;padding: 0 4.5rem;background-color: #2840f0;}
.form-box input[type='text']::placeholder,.form-box input[type='tel']::placeholder{color:#efefef;}
.form-box input[type='checkbox']{width: 3rem;height: 3rem;margin-right: 1rem;}

.form-box label,.form-box .agree-popup{font-size: 3rem;text-align: center;color: #000000;font-family:GmarketSans;font-weight: 700;letter-spacing: -0.04em;cursor: pointer;}
.form-box .agree-popup{margin-left: 1rem;}

.timer{position: absolute;bottom:26.5rem;left: 50%;transform: translateX(-50%);font-family:KOFIHDrLEEJWOTF;font-size: 7rem;font-weight: 400;color: #ffffff;width: 100%;display: flex;justify-content: center;}
.timer > span{width: 10rem;display: inline-block;text-align: center;position: relative;}
.timer > i{margin: 0 1rem;font-weight: 300;}


#agree-popup{position: fixed;overflow-y: auto;left: 50%;max-width: calc(818px * 0.9);width: 90%;height: 90%;top: 50%;background-color: #ffffff;transform: translate(-50%, -50%);padding:3rem;display: none;flex-direction: column;border-radius: 5px;}
#agree-popup h2{font-size: 3.5rem;font-weight: 700;background-color: #1c263e;color: #ffffff;margin: 0;padding: 2rem;}
#agree-popup h3{font-size: 3rem;font-weight: 700;margin-top: 2rem;}
#agree-popup .check-box{display: flex;align-items: center;margin-top: 2rem;}
#agree-popup label{font-size:3rem;margin: 0 1rem;}
#agree-popup input[type='radio']{font-size:3rem;}
#agree-popup p{font-size:2.1rem;padding:3rem 1rem 1rem;}
#agree-popup .content-box{    height: calc(100% - 9rem);padding:2rem;font-size: 3rem;border: 0.4rem solid #efefef; }
#agree-popup .text-box{overflow-y: auto;height: calc(100% - 11rem);padding:2rem;font-size: 2.3rem;border: 0.4rem solid #efefef; margin-top: 1rem;}
#agree-popup .allCheck{ font-size:2.6rem;border: 0.4rem solid #efefef;width: 20rem;padding: 1rem;margin: 2rem 0 0 auto;}
#agree-popup .agree-popup-close{position: absolute;right: 2rem;top: 1rem;font-size: 5rem;padding: 3rem;}
#agree-popup .info-text{font-size:2.5rem;margin-top: 2rem;}
#agree-popup .button-box{display: flex;justify-content: center;margin-top: 2rem;}
#agree-popup .button-box button{width: 20rem;padding: 1rem;margin:0 1rem;box-sizing: border-box;font-size:2.6rem;}
#agree-popup .button-box button.okButton{background-color: #1962b2;border: 0.4rem solid #1962b2;color:#ffffff;}
#agree-popup .button-box button.cancelButton{border: 0.4rem solid #efefef;}
body.agreeOpen{height: 100%;overflow: hidden;}
body.agreeOpen::before{content:'';display: block;background-color: rgba(0,0,0,0.6);width: 100%;height: 100%;position: fixed;top:0;left: 0;z-index: 1;}
body.agreeOpen #agree-popup{display: flex;z-index: 2;}

@keyframes pageLoadHide{0%{opacity: 1;}20%{opacity: 1;} 99%{opacity: 0;width:100%}100% {opacity: 0;width:0%}}
#whiteWall{position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: white;justify-content: center;display: none;align-items:center;z-index: 1;}
#whiteWall .symbol{background-color: #ffe900;color: #fff;width: 30rem;height: 30rem;display: flex;justify-content: center;align-items: center;border-radius: 100%;opacity: 1;}
#whiteWall .symbol img{ width: 20rem;}
body.ready.load #whiteWall {animation: pageLoadHide 0.8s 1;animation-fill-mode:both;}
body.ready #whiteWall{display: flex;}

@keyframes pageLoad{0%{opacity: 1;} 100% {opacity: 0.3;}}
#ProcessingLayer {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0,0,0,0.75);display: none;justify-content: center;align-content: center;flex-wrap: wrap;z-index: 11;}
#ProcessingLayer .loading-img{background-color: #ffe900;color: #fff;width: 30rem;height: 30rem;;display: flex;justify-content: center;align-items: center;border-radius: 60%;opacity: 1;}
#ProcessingLayer .loading-img img{ width: 20rem;animation-name: pageLoad;animation-duration: 1.2s;animation-iteration-count: infinite;animation-direction: alternate;}
body.loading #ProcessingLayer {display: flex;background:rgba(0,0,0,0.75);}

body.ready,body.loading,body.completion{height: 100%;overflow: hidden;}

body.completion{display: flex;justify-content: center;align-items: center;}
body.completion .warp{position: relative;width: 75rem;margin:0 auto;}
body.completion .warp a{position: absolute;left: 50%;bottom: 26rem;transform: translateX(-50%);width: 30rem;}




@media screen and (max-width: 860px) {
    html {font-size: 1.222493887530562vw;}
}