@charset "utf-8";

/*div{font-family:'GmarketSans'; }
p{font-family: 'Pretendard'; font-weight: 600}*/
/*******************************메인*******************************/
#wrap{width: 100%; overflow: hidden;}
.head{width: 100%;}
.head-inner{width: 780px; margin: 0 auto}
.visual{max-width: 1920px; margin: 0 auto; background: url('../images/01.png') center; background-size: cover;}
.visual .inner{max-width: 1280px; margin: 0 auto; position: relative; padding-top: 80px;}
.visual .inner img.main_img{display: block;}
.visual .inner img.main_img_m{display: none;}
.visual .inner img.coin2{
    position: absolute; 
    top: 20%; 
    right: 25%; 
    max-width:120px;
    animation: motion 0.8s 
               linear 0.5s 
               infinite alternate;
}
.visual .inner img.coin1{
    position: absolute; 
    top: 55%; 
    left: 26%; 
    max-width:120px;
    animation: motion 0.8s 
               linear 0.5s 
               infinite alternate;
}

.self01{max-width: 1920px; margin: 0 auto; background: url('../images/02.png') no-repeat center; clear: both; height: 100%; background-size: cover;}
.self01 .inner{padding: 200px 0; max-width: 1280px; margin: 0 auto;}
.g_main_txt{font-family:'GmarketSans'; text-align: center; font-size: 3.5em; font-weight: 500; letter-spacing: -1px; line-height: 1.2;}
.g_main_txt strong{font-family:'GmarketSans'; text-align: center; letter-spacing: -1.5px;}
.g_main_txt strong .sp-color{font-family:'GmarketSans'; text-align: center; }
.sp-color{color: #5900e5;}
.p_sub_txt{text-align: center; font-size: 2em; line-height: 1.2; letter-spacing: -0.5px;}
.self01 .inner .pt{padding-top: 2%;}
.self01 .inner .pb{padding-bottom: 60%}

.self02{background-color: #f5efff; max-width: 1920px; margin: 0 auto}
.self02 .inner{padding-top: 200px; max-width: 1280px; margin: 0 auto; padding-bottom: 150px;}
.self02 .inner .g_main_txt{font-family:'GmarketSans'; text-align: center; font-size: 3.5em; font-weight: bold; letter-spacing: -1px; line-height: 1.2;}
.self02 .inner .g_main_txt .sp-color{font-family:'GmarketSans'}
.message{text-align: center; margin: 0 auto;}
.message ul li{margin: 2%;}
.message ul li img{display: block; margin: 0 auto;}

.self03{max-width: 1920px; margin: 0 auto; background: url('../images/04_3.png') no-repeat center; padding: 0 0 180px; background-size: cover;} 
.self03 .inner{max-width: 1280px; margin: 0 auto; position: relative; padding: 80px 0 250px;}
.self03_box{width: 500px; height: auto; border: 3px solid #eaddff; border-radius: 18px; background: linear-gradient(#fcfaff, #f1e8ff); margin: 0 auto; text-align: center;padding: 3% 0 2%;}
.self03_box .g_main_txt{font-size: 2em; font-weight: 600; line-height: 1.3;}
.self03 .inner .g_main_txt{padding: 15% 0 2%;}
.self03 .inner .p_sub_txt{padding: 0% 0 6%;}
.self03 .inner .money{position: absolute; top: 10%; display: block;}
.self03 .inner .pb{padding-bottom: 25%;}

.self04{max-width: 1920px; margin: 0 auto; background: url('../images/05.png') no-repeat center; clear: both; height: 100%; background-size: cover;}
.self04 .inner{padding: 200px 0; max-width: 1280px; margin: 0 auto;}
.self04 .inner .g_main_txt{font-weight: 600; padding-bottom: 3%; padding-top: 5%}
.self04 .inner .p_sub_txt{line-height: 1.2;}
.self04 .inner .g_main_txt .sp-color{font-family:'GmarketSans';}
.self04 .inner .g_main_txt strong{font-family:'GmarketSans'; text-align: center; letter-spacing: -1.5px;}
.self04 .inner .g_main_txt strong .sp-color{font-family:'GmarketSans'; text-align: center; }
.self04 .inner .pb{padding-bottom: 55%;}

.self05{max-width: 1920px; margin: 0 auto; background: url('../images/06.png') no-repeat center; clear: both; background-size: cover;}
.self05 .inner{padding: 150px 0; max-width: 1280px; margin: 0 auto;}
.self05 .inner .g_main_txt{color: #fff;}
.self05 .inner .g_main_txt .s_txt{font-family:'GmarketSans'; font-size: 0.7em;}
.self05 .inner ul li{padding: 1% 0;}
.self05 .inner ul li:first-child{padding: 4% 0 1%;}
.self05 .inner ul li:last-child{padding-bottom: 0;}
.self05 .inner ul li img.wonder{margin: 0 auto; width: 500px;}

.self06{max-width: 1920px; margin: 0 auto; background: url('../images/07.png') no-repeat center; clear: both; background-size: cover;}
.self06 .inner{padding: 150px 0 30px; max-width: 1280px; margin: 0 auto;}
.self06 .inner .s_txt{font-family:'GmarketSans'; font-size:1.7em; text-align: center; line-height: 1.2; padding-bottom: 3%;}
.self06 .inner .g_main_txt{font-weight: 600;}
.self06 .inner .g_main_txt .sp-color{font-weight: 600; font-family:'GmarketSans';}
.self06 .inner .process{display: inline;}
.self06 .inner .process_m{display: none;}

.self07{max-width: 1920px; margin: 0 auto; background: url('../images/08_2.png') no-repeat center; clear: both; background-size: cover;}
.self07 .inner{padding: 150px 0 30px; max-width: 1280px; margin: 0 auto;}
.self07 .inner .event{text-align: center; color: #fff; font-family: 'GmarketSans'; font-size: 1.5em; width: 230px; margin: 0 auto; border: 1px solid #fff; border-radius: 30px; padding: 6px 0 3px;}
.self07 .inner .g_main_txt{color: #fff; font-weight: 600; padding: 3% 0 1%; }
.self07 .inner .g_main_txt .sp-box{font-family: 'GmarketSans'; background: #5900e5; padding: 7px 7px 0;}
.yellow{font-family: 'GmarketSans'; font-weight: 600; color:#fff100; }
.self07 .inner .m30{padding: 5% 0 2%;}
.self07 .inner .event_txt{color: #fff; text-align: center; padding-bottom: 5%;}
.self07 .inner .day_img{display: block;}
.self07 .inner .day_img_m{display: none;}
.self07 .inner .m30{display: block;}
.self07 .inner .evnet_m30{display: none;}



.self08{max-width: 1920px;  margin: 0 auto; background: url('../images/09.png') no-repeat center; clear: both; background-size: cover;}
.self08 .inner{padding: 150px 0 80px; max-width: 1280px; margin: 0 auto;position: relative;}
.self08 .inner .s_txt{text-align: center; color: #fff; font-family:'GmarketSans'; font-size: 2.5em; padding-bottom: 1%;}
.self08 .inner .p_txt{text-align: center; color: #fff; font-family:'GmarketSans'; font-size: 1.5em; padding: 3% 0 1%;}
.self08 .inner .g_main_txt{font-weight: 600; color: #fff; line-height: 1.3;}
.self08 .inner .g_main_txt .sp-box{font-weight: 600; color: #6900ff; font-family:'GmarketSans'; background: #00e2ff; padding: 7px 5px 0;}
.self08 .inner .logo_w{width: 200px; margin: 0 auto; padding: 2% 0 1%;}
.self08 .inner i{text-align: center; margin: 0 auto; display: block; color: #fff; font-size: 3em; padding: 3% 0 3%;}

.self08 .inner img.coin2{
    position: absolute; 
    top: 7%; 
    right: 25%; 
    max-width:120px;
    animation: motion 0.8s 
               linear 0.5s 
               infinite alternate;
}
.self08 .inner img.coin1{
    position: absolute; 
    top: 43%; 
    left: 26%; 
    max-width:120px;
    animation: motion 0.8s 
               linear 0.5s 
               infinite alternate;
}
.self08 .inner .download{margin: 0 auto;}
.self08 .inner .download ul{display: flex; flex-direction: row; margin: 0 auto; justify-content: center;}
.self08 .inner .download ul li{}
.self08 .inner .download ul li a img{width:250px;}



/*******************************플로팅 버튼*******************************/
.floating{position: fixed; bottom: 0; width: 100%; margin: 0 auto; text-align: center; background: #0076ff; padding: 2% 0 1.5%; }
.floating .s_link .btn{font-family: 'GmarketSans'; font-weight: bold; font-size: 2em; line-height: 1; color: #fff;}
.floating .s_link .btn i{font-size: 0.8em;}


/*******************************애니메이션*******************************/
@keyframes motion {
	0% {margin-top: 0px;} 
	100% {margin-top: 15px;} 
  }

/*******************************푸터*******************************/
footer{max-width: 1920px; margin: 0 auto; background: #000; color: #8b8b8b; padding: 4% 0 7%; text-align: center;}
footer .footer{width: 100%; margin: 0 auto;}
footer .footer ul li img.f-logo{width: 200px; margin: 0 auto; padding-bottom: 4%;}


/*******************************모바일*******************************/

@media (max-width: 1024px) {
    .visual .inner{max-width: 100%; padding-top: 7%;}
    .visual .inner img.coin2{
    top: 22%; 
    right: 28%; 
    max-width:80px;
    }
    .visual .inner img.coin1{
    position: absolute; 
    top: 55%; 
    left: 25%; 
    max-width:80px;
    }
    .g_main_txt{font-size: 2.8em;}
    .p_sub_txt{font-size: 1.9em;}
    .self01 .inner{max-width: 100%;}
    .self02 .inner{max-width: 100%;}
    .self02 .inner .g_main_txt{font-size: 2.8em;}
    .self05 .inner ul li img.wonder{width: 450px;}
    .message ul li img{width: 350px;}
    .self06 .inner .process{padding-top: 3%;}
    .self08 .inner img.coin2{
    top: 15%; 
    right: 25%; 
    max-width:80px;
    }
    .self08 .inner img.coin1{
    position: absolute; 
    top: 55%; 
    left: 28%; 
    max-width:80px;
    }
    
}

@media (max-width: 780px) {
    .visual .inner img.coin2{
    top: 20%; 
    right: 25%; 
    max-width:70px;
    }
    .visual .inner img.coin1{
    position: absolute; 
    top: 55%; 
    left: 25%; 
    max-width:70px;
    }
    .self03 .inner{max-width: 100%; }
    .self03_box{width: 400px; height: auto; padding: 3% 0 2%;}
    .self03_box .g_main_txt{font-size: 1.8em;}
    .self05 .inner ul li img.wonder{width: 400px;}
    .self06 .inner .process{padding-top: 4%;}
    .self07{background-size: cover;}
    .self07 .inner .event{font-size: 1.2em; width: 180px;}
    .self07 .inner .g_main_txt{font-size: 2.5em}
    .self07 .inner .g_main_txt .sp-box{padding: 6px 6px 0;}
    .self08 .inner .s_txt{font-size: 2em;}
    .self08 .inner .g_main_txt{font-size: 2.3em;}
    .self08 .inner .g_main_txt .sp-box{padding: 5px 5px 0;}
    .self08 .inner i{font-size: 2.3em;}
    .self08 .inner .logo_w{width: 170px;}
    .self08 .inner .download ul li a img{width: 180px;}
    .self08 .inner .p_txt{padding: 3% 0 2%;}
    .self08 .inner img.coin2{
    top: 15%; 
    right: 23%; 
    max-width:70px;
    }
    .self08 .inner img.coin1{
    position: absolute; 
    top: 55%; 
    left: 25%; 
    max-width:70px;
    }
    footer .footer ul li img.f-logo{width: 160px; padding-bottom: 4%;}
    .floating .s_link .btn{font-size: 1.5em;}
    .floating{padding: 3% 0 2%;}
}

@media (max-width: 550px) {
    .visual .inner img.main_img{display: none;}
    .visual .inner img.main_img_m{display: block;}
    .visual .inner{max-width: 100%; overflow: hidden;}    
    .visual .inner img.coin2{
    top: 25%; 
    right: -6%; 
    max-width:100px;
    }
    .visual .inner img.coin1{
    position: absolute; 
    top: 58%; 
    left: -4%; 
    max-width:100px;
    }
    .g_main_txt{font-size: 2.6em;}
    .p_sub_txt{font-size: 1.7em;}
    .self01 .inner .g_main_txt{padding: 0 0 3%;}
    .self01 .inner {padding: 140px 0 200px;}
    .self02 .inner{padding-top: 120px; padding-bottom: 110px;}
    .self02 .inner .g_main_txt{font-size:2.3em; padding-bottom: 3%;}
    .message ul li img{width: 330px;}
    .message ul li{margin: 4%;}
    .self04 .inner .g_main_txt{padding-top: 0; padding-bottom: 5%;}
    .self04 .inner {padding: 140px 0 200px;}
    .self05 .inner ul li img.wonder{width: 350px;}
    .self06 .inner .process{display: none;}
    .self06 .inner .process_m{display: block;}
    .self07{max-width: 100%; margin: 0 auto; background: url('../images/08_m.png') no-repeat center; clear: both; background-size: cover;}
    .self07 .inner {padding: 150px 0 80px; max-width: 100%;}
    .self07 .inner .day_img{display: none;}
    .self07 .inner .day_img_m{display: block;}
    .self07 .inner .m30{display: none;}
    .self07 .inner .evnet_m30{display: block; padding: 10% 0 0;}
    .self07 .inner .g_main_txt{font-size: 2.4em; padding: 5% 0;}
    .self08 .inner img.coin2{
    top: 13%; 
    right: -5%; 
    max-width:90px;
    }
    .self08 .inner img.coin1{
    position: absolute; 
    top: 57%; 
    left: -5%; 
    max-width:90px;
    }
    .self08 .inner .download ul li a img{width: 160px;}
    footer{padding: 6% 0 12%;}
    footer .footer ul li{font-size: 13px; line-height: 1.5;}
    
    .self03_box{width: 330px; margin-top: 5%; padding: 6% 0 4%;}
    .self03 .inner{padding: 130px 0 250px;}
    .self03 .inner .g_main_txt{font-size: 2em; padding-top: 0;}
    .self03 .inner .p_sub_txt{font-size: 1.5em;}
    .self03 .inner  .self03_box .g_main_txt{font-size: 1.5em;}
    .self03 .inner .pb{padding-bottom: 0%;}
    .self08 .inner{max-width: 100%; overflow: hidden;}
    .self08 .inner .logo_w{width: 130px;}
    .self08 .inner i{font-size: 2em; padding: 10% 0;}
    .self08 .inner .p_txt{padding: 10% 0 2%;}
    .floating {padding: 5% 0 4%;}
    .self03{max-width: 1920px; margin: 0 auto; background: url('../images/04_2_m.png') no-repeat center; padding: 0 0 200px; background-size: cover;} 
    .self03 .inner .money{display: none;}
}

@media (max-width: 400px) {
    .visual .inner img.coin2{
    top: 25%; 
    right: -6%; 
    max-width:90px;
    }
    .visual .inner img.coin1{
    position: absolute; 
    top: 58%; 
    left: -4%; 
    max-width:85px;
    }
    .g_main_txt{font-size: 2em;}
    .p_sub_txt{font-size: 1.4em;}
    .self02 .inner .g_main_txt{font-size: 2em;}
    .message ul li img{width: 270px;}
    .self03 .inner .p_sub_txt{font-size: 1.4em;}
    .self03_box{width: 290px; border: 2px solid #eaddff; border-radius: 10px;}
    .self03 .inner  .self03_box .g_main_txt{font-size: 1.3em;}
    .self03 .inner{padding: 130px 0 250px;}
    .self05 .inner ul li img.wonder{width: 290px;}
    .self07 .inner .event {font-size: 1em; width: 140px;}
    .self07 .inner .g_main_txt{font-size: 2em;}
    .self08 .inner .g_main_txt{font-size: 2em;}
    .self08 .inner .s_txt{font-size: 1.7em;}
    .self08 .inner .logo_w{width: 120px;}
    .self08 .inner .download ul li a img{width: 140px;}
    footer .footer ul li img.f-logo {width: 120px; padding-bottom: 6%; }
    footer .footer ul li{font-size: 11px;}
    .self08 .inner img.coin2{
    top: 13%; 
    right: -5%; 
    max-width:90px;
    }
    .self08 .inner img.coin1{
    position: absolute; 
    top: 57%; 
    left: -5%; 
    max-width:90px;
    }
    .floating .s_link .btn {font-size: 1.2em;}
}

@media (max-width: 320px) {
    .visual .inner img.coin2{
    top: 22%; 
    right: -8%; 
    max-width:90px;
    }
    .visual .inner img.coin1{
    position: absolute; 
    top: 56%; 
    left: -7%; 
    max-width:85px;
    }
    .self05 .inner{padding: 100px 0;}
    .self06 .inner{padding: 120px 0 30px;}
    .self08 .inner img.coin2{
    top: 4%; 
    right: -7%; 
    max-width:90px;
    }
    .self08 .inner img.coin1{
    position: absolute; 
    top: 46%; 
    left: -7%; 
    max-width:85px;
    }
    .self08 .inner{padding: 100px 0 80px;}
}