@charset "utf-8";
@import url(https://unpkg.com/@kfonts/nexon-lv2-gothic/index.css);
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');
@import url('https://fastly.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-8ExtraBold.css');


:root {
    --body : #111 ;
    --darknavy : #091C4E ;
    --darkgray : #2B2F36; 
    --gray : #666666;
    --blue : #4777F5;
    --orange : #F55C36 ;

    --bg-navy: #133CA8 ;
    --bd-blue: #7199F2;
}
img {-webkit-touch-callout:none;}
/* reset with bootstrap */
body{position:relative;-webkit-text-size-adjust:none;}
body,input,textarea,select,button,table{font-weight: 400;font-family: 'NEXON Lv2 Gothic',sans-serif;line-height: 1.3;color: #111}
a,input,textarea,select,button{text-decoration:none;color:#231f20;outline:0 ;-webkit-transition:color .2s,border-color .2s,background .2s,box-shadow .2s,opacity .2s;transition:color .2s,border-color .2s,background .2s,box-shadow .2s,opacity .2s}
a:hover,a:focus,a:active{color:inherit;text-decoration: none;}
[role=button]{outline:0 !important}
a:focus:not(:focus-visible),input:focus:not(:focus-visible),textarea:focus:not(:focus-visible),select:focus:not(:focus-visible),button:focus:not(:focus-visible),[role=button]:focus:not(:focus-visible){outline:0 !important}
body,p,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,table,th,td,form,fieldset,legend,input,textarea,button,select{margin:0;padding:0}
input{background: none; border: 0;box-shadow: none;}
input::-ms-clear,input::-ms-reveal{display:none;width:0;height:0;}
input::-webkit-search-decoration,input::-webkit-search-cancel-button,input::-webkit-search-results-button,input::-webkit-search-results-decoration{display:none;}
li{list-style:none}
label{cursor:pointer;margin: 0;}
table{width:100%;border-collapse:collapse}
a,button{cursor:pointer}
button{display: inline-block; border:0;box-shadow:none;background:none;font-family: inherit;}
i{font-style:normal;}
img{max-width:100%}
h1, h2, h3, h4, h5, h6{font-weight: 700 !important;font-size: inherit;line-height: inherit;}
textarea{resize: none;overflow: hidden}


/* html, body{width: 100%; height: 100%;} */
html, body{width: 100%;  height: auto;}
@font-face {
    font-family: 'ONE-Mobile-POP';
    src: url("../font/ONE\ Mobile\ POP.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}


@keyframes bearAni {
    0% {
        transform: translate(100%, -50%);
    }
    60% {
        transform: translate(0, 0);
    }
    75% {
        transform: translate(4%, -4%);
    }
    100% {
        transform: translate(0, 0);
    }
}
/* main */
.flex-column {flex-direction: column;}
.flex-center {display: flex; align-items: center; justify-content: center; height: 100%;}
.bg {background: url(../images/main/pc/sect05-bg2.png) no-repeat 0px 0px / cover; width: 100%; height: 100%; }
.main{position: relative;width: 100%; padding-bottom: 120px; overflow-x:hidden ;}
.container {position: relative; width: 100%; height: 100%; margin: 0 auto;  max-width: 1024px; }
section{position: relative;width: 100%; margin: 0 auto; text-align: center; }  
.contents {width: 100%; position: relative;}
.btn {width: 420px; height: 115px; background: url(../images/main/pc/btn-sns.png) no-repeat 0px 0px/ 100% auto; }

.sect01 {position: relative; background: url(../images/main/pc/main-bg.jpg) no-repeat center / 2560px auto; width: 100%; height: 670px;  overflow: hidden;}
.sect01  .container > * {position: absolute;}
.sect01-title {top: 50%; left: 50%; transform: translate(-50%, -50%);}
.sect01-ch {width: 31.128%;right: 0px;bottom: 30px} 
.sect01.slide .sect01-ch {animation: bearAni 1.5s ease-out; right: 0; position: absolute;  width: 27.128%;} 
.sect01-logo {right: 20px; top:20px; z-index: 10;}

.sect02 nav {position: absolute;top: 0;z-index: 99; background: #051A53; width: 100%;}
.sect02 nav ul {display: inline-flex;justify-content: center;align-items: center; max-width: 1024px;}
.sect02 nav ul li {flex: 1;background: #051A53;}
.sect02 nav ul li.active {background-color: #4A78F4;}
.is-scroll .sect02 nav {position: fixed; left: 50%; transform: translateX(-50%);}

.sect02-1 .bg01{background: #4777F5; background: url(../images/main/pc/bg.jpg) top center; background-size: cover; padding: 160px 0 200px 0; margin-top: -1px;}
.sect02-1 iframe {width: 100%; height: 804px;}
.sect02-1 .game-frame {width: 402px;height: 773px;border-radius: 24px;overflow: hidden;background-color: #4A78F4;border: 4px solid #fff; margin-top: 60px;}

.sect02-1 .bg02 {background : #2B5FE5; padding-bottom: 10%; margin-top: -1px;}
.sect02-1 .bg02 .container {padding-top: 100px;}
.sect02-1 .bg02 .deco {position: absolute; left: 50%; top: 30%; transform: translate(-50%, -50%); width: 1200px; display: none;}

.cloud {position: relative; }
.cloud::before {content: '';display: block;position: absolute;background: url(../images/main/pc/bg-blue.png) no-repeat 0px 0px / cover;background-position: center;background-size: 1920px auto;width: 100%; height: 384px;top: -182px;}


.sect02-1 .bg03 {background-color: #4777F5;  background-image: url(../images/main/pc/bg-btm.png); background-position: bottom; background-size: contain;}
.sect02-1 .bg03.cloud::before {background-image: url(../images/main/pc/bg-sky.png);}
.sect02-1 .bg03 .container {padding: 0px 0 120px 0;}
.sect02-1 .bg03 .row {justify-content: center; gap: 16px; margin: -50px 0 64px 0;}
.sect02-1 .bg03 .row button:last-of-type {background-image: url(../images/main/pc/btn-share.png);}
.sect02-1 .bg03 .btn-toggle {display: block; margin: 0 auto; margin-bottom: 40px;}
.sect02-1 .bg03 .btn-toggle span{font-size: 24px; font-weight: 600; color: #fff;   font-family: 'Paperlogy-8ExtraBold', sans-serif;}  
.sect02-1 .bg03 .btn-toggle span img {width: 20px; margin-left: 5px; transition: .2s ease-in-out;}
.sect02-1 .bg03 .btn-toggle.active span img {rotate: -180deg;}
.sect02-1 .sect02-1-dropdown {height: 0;}
.sect02-1 .sect02-1-dropdown.show {height: auto;}

.sect02-2 .bg {background-image: url(../images/main/pc/sect04-bg.jpg); background-position: center; }
.sect02-2 .bg .container {padding-top: 50px;padding-bottom: 100px;}
.sect02-2 .bg .tit {margin-top: 100px;}
.sect02-2 .bg .item {position: absolute; top: 8.7%; left: 0;}
.sect02-2 .bg .btn {display: block; background-image: url(../images/main/pc/btn-sale.png) ; }

.sect02-3 {z-index: 2;} 
.sect02-3 .bg {background-position: center;}
.sect02-3 .bg .container {padding: 145px 0 315px 0;}
.sect02-3 .bg .btn {display: block; background-image: url(../images/main/pc/btn-video.png); margin-top: 36px;}

.sect03 {margin-top: -173px !important;}
.sect03 .container {padding: 120px 0 210px 0;}
.sect03 .bg {background-position: top center; background-image: url(../images/main/pc/sect06-bg2.png);}
.sect02-3 .video {width: 100%;height: 554px; max-width: 980px; border-radius: 14.8px;border: 3.7px solid #FFF;overflow: hidden;   aspect-ratio: 16 / 9;}
.sect02-3 .video iframe {width: 100%;height: 100%; }

.bottom-fixed {position: fixed;bottom: 0;left: 0;  width: 100%;opacity: 0;pointer-events: none;transition: opacity 0.3s; z-index: 20; background: url(../images/main/pc/bottom-fixed.png) no-repeat bottom center; height: 160px; cursor: pointer;}  
.bottom-fixed img {width: 100%;}
.bottom-fixed.show {opacity: 1;pointer-events: auto; overflow-x:hidden ;}
footer {margin: 0 auto; margin-top: -107px !important; padding-top: 50px; text-align: center;}

/* popup */
.popup {position: fixed;z-index: 999;top: 0;left: 0;width: 100%;height: 100%;display: none;}
.popup.show {display: block;}
.popup-bg {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.5);}
.popup-content {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 400px;border-radius: 40px;overflow: hidden;}
.popup .btn-close {position: absolute;width: 44px;height: 44px;top: 29px;right: 29px;text-indent: -999px;overflow: hidden;}
.sns-wrap {position: absolute;top: 118px;left: 50%;transform: translateX(-50%);display: flex;justify-content: center;align-items: center;gap: 4px;}
.sns-wrap > * {display: block;width: 60px;height: 60px;text-indent: -999px;overflow: hidden;}


@media screen and (min-width: 1025px){
    .sect01 .container {max-width: 100%;}
    .sect02-1 .bg02 .deco {display: block;}
    .sect03 .bg {background-size: 2560px 100%;}
    footer {padding-top: 0;}
} 

@media screen and (min-width: 1199px){
    .sect01.slide .sect01-ch {right: -240px;bottom: -2%; width: auto;}
    .sect02-1 .bg02 .deco {width: 100%; max-width: 1520px; top: 38%;}
}

@media screen and (min-width: 1599px){
    .sect01 .container {max-width: 1600px;}
    .sect01.slide .sect01-ch {right: -10%;}
}

@media screen and (min-width: 1921px){
    .sect01 .container {max-width: 1024px;}
    .sect01.slide .sect01-ch { right: -41%; bottom: -4%;}
    .sect02-1 {background-color: #4777F5;}
}

@media screen and (min-width: 2560px) {
    .sect01,
    .sect02,
    .sect03,
    footer{
        max-width: 100%;
        margin: 0 auto;
        background-size: 1920px 100%;
    }

    .container {max-width: 2560px; }
    .bg {width: 2560px; margin: 0 auto;}
    .cloud::before  {background-size: 2560px auto;}
    .sect01.slide .sect01-ch {right: -39%;bottom: -1%;width: 79%;}
    .sect02-1 .bg01 {background-size: auto;}
    .sect02-1 .bg03::after {content: '';width: 100%;height: 799px;position: absolute;bottom: 0;left: 0;background: url(../images/main/pc/bg-btm.png) no-repeat bottom;background-size: cover;z-index: 0;}
    .sect02-1 .bg03 .container {display: flex; flex-direction: column;justify-content: center;align-items: center;z-index: 2;}
    .sect02-2  {background-color: #58CFFF;}
    .sect02-3 .bg::after, .sect03 .bg::after {content: '';display: block;position: absolute;left: 0;top: 0;background: #EDF4FF;width: 100%;height: 89.5%;z-index: -1;}
    .sect02-2 .img {width: 90%;}
    .sect03 .bg::after {background-color: #3AB9F8; height:94.1%;}
    .bottom-fixed {background-size: 100%;}
}


@media screen and (max-width: 1200px){
    .btn {width: 420px; height: 80px; background-size: contain; background-position: center;}
    .sect02-1 .bg03 {background-size: auto 18%;}
    .sect02-1 .bg02 {padding-bottom: 23%;}
    
}