@charset "utf-8";
/* reset */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;vertical-align:baseline}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
body{font-family:sans-serif;font-size:20px;line-height:1}
ol,ul{list-style:none}
blockquote,q{quotes:none}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}
table{border-collapse:collapse;border-spacing:0}
input,textarea,button,select{font-size:inherit;font-family:inherit}
img,fieldset,button{border:0}
em,address{font-style:normal}
a,a:hover,a:link,a:visited,a:active{text-decoration:none;background-color:transparent}
a,img{vertical-align:top}
hr{display:none}
button,label{cursor:pointer}
legend,.blind{position:absolute;top:0;left:0;width:0;height:0;font-size:0;line-height:0;overflow:hidden;visibility:hidden}

#background-video {
  width: 100vw;
  height: 100vh;
 
  position: relative;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: -1;
}

#content {
    position: fixed; 
    display: none; 
    width: 100%; 
    height: 100%; 
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.5); 
    z-index: 50; 
    cursor: pointer; 
}
#iFrameWindow{
    display: flex;
    justify-content: center;
	z-index: 999999999999999; 

}

/* header */
.header{position:fixed;top:0;left:0;width:100%;height:81px;z-index:30;opacity:0;visibility:hidden; } /* opacity:0;visibility:hidden; */
.header_bg{position:absolute;top:0;left:0;width:100%;height:81px;background-color:#ffffff;opacity:0.8}
.nav{position:relative;margin:0 auto;width:1202px}
.nav:after{content:"";display:table;clear:both}
.update_li{float:left;width:400px;height:81px}
.update_li.divider{width:1px;background:url(../images/spr_nav.png) -182px 1px no-repeat}
.update_li.on,
.update_li:hover{height:88px;background:url(../images/spr_nav.png) 0 -250px no-repeat}
.update_li a{display:block;width:400px;height:81px;background:url(../images/spr_nav.png) no-repeat;opacity:0.5}
.update_li.on a,
.update_li a:hover{opacity:1}
.update_li.update1 a{background-position:0 -77px}
.update_li.update2 a{background-position:0 -134px}
.update_li.update3 a{background-position:0 -191px}
h1 a{position:absolute;top:0;left:50px;width:182px;height:81px;background:url(../images/spr_nav.png) no-repeat;z-index:30}
.link{position:absolute;top:22px;right:38px;z-index:30}
.link ul{float:left;overflow:hidden}
.link li{float:left}
.link li a{display:block;width:40px;height:40px;background:url(../images/spr_nav.png) no-repeat}
.link li a:hover{opacity:0.7}
.link li.home a{background-position:-209px 0}
.link li.history a{margin-left:6px;background-position:-255px 0}
.link li.event a{margin-left:6px;background-position:-301px 0}
.btn_hide_7days{float:left;margin-right:18px;width:172px;height:40px;line-height:40px;background:url(../images/spr_nav.png) -209px -40px no-repeat}
.btn_hide_7days:hover{opacity:0.7}
@media all and (max-width:1250px) {
    .btn_hide_7days, .btn_floating{display:none}
}

/* common */
html{scroll-behavior:smooth}
.wrap{position:relative;min-width:1200px;width:100%;height:6678px;background-color:#08090e;letter-spacing:-1px;overflow:hidden;z-index:1}
.parallax_wrap{position:absolute;top:0;left:0;width:100%;height:100%}
.parallax{transition:transform 1s}
.bg{position:absolute;top:0;left:50%;margin-left:-960px;width:1920px;height:7114px;background-position:50% 0;background-size:auto 100%;background-repeat:no-repeat}
.bg_sunlight{height:2916px;background-image:url(../images/bg_sunlight.png);opacity:0.8;animation:sunlight 5s linear infinite;z-index:4}
.obj{position:absolute;background-position:100% 0;background-size:auto 100%;background-repeat:no-repeat}
.obj_cloud1{top:282px;left:50%;margin-left:-960px;width:1920px;height:2986px;background-image:url(../images/obj_cloud1.png);z-index:5}
.obj_cloud2{top:2972px;left:50%;margin-left:500px;width:575px;height:386px;background-image:url(../images/FlyingPlatform01.png);transition:transform 1.8s;z-index:20}
.obj_cloud3{top:2265px;left:50%;margin-left:-960px;width:1920px;height:5009px;background-image:url(../images/obj_cloud3.png);transition:transform 2s;z-index:7}
.obj_tree{bottom:0;left:50%;margin-left:-960px;width:1920px;height:3701px;background-image:url(../images/obj_tree.png);z-index:8}
.obj_bridge1{top:950px;right:50%;margin-right:-960px;width:650px;height:469px;background-image:url(../images/AibattDude01.png);z-index:20}
.obj_bridge2{padding-left:200px;top:2300px;left:50%;margin-left:-960px;width:322px;height:500px;background-image:url(../images/ShipRender01.png);z-index:20}
.obj_bridge3{top:2565px;right:50%;margin-right:-960px;width:395px;height:1249px;background-image:url(../images/obj_bridge3.png);z-index:20;visibility:hidden}
.obj_bridge4{top:4190px;left:50%;margin-left:-960px;width:248px;height:1036px;background-image:url(../images/obj_bridge4.png);z-index:20}
.anim{visibility:hidden;opacity:0;transition:opacity 0.6s, transform 0.7s}
.on .anim{visibility:visible;opacity:1;transform:translateY(0) rotate(0.001deg)}
#update1, #update2, #update3{position:relative}
.section{position:relative;min-width:1200px;width:100%}
.content{position:relative;margin:0 auto;width:1200px;height:100%;z-index:10}
.title{position:absolute;top:0;left:50%;margin-left:-500px;width:1000px;z-index:10}
.title p,
.title h3{margin:0 auto;width:1000px;background:url() no-repeat}
.title p{height:70px}
.title h3{height:100px}
#update1 .title p{margin-top:-12px}
#update1 .title h3{background-position:0 -26px}
#update2 .title p{margin-top:54px;background-position:0 -170px}
#update2 .title h3{margin-top:0;background-position:0 -144px}
#update3 .title h3{margin-top:0;background-position:0 -280px}
.box{position:absolute;top:0;left:50%;margin-left:-625px;width:1249px;background-position:50% 0;background-size:100% auto;background-repeat:no-repeat;transform:translateY(-20px)}
.on .box{transition-delay:0.2s}
/* Trailer Text begin */
.title_sub{position:relative;margin:0 auto;top:50px;width:1000px;height:41px;background:url(../images/spr_title.png) no-repeat;transform:translateY(24px)}
/* Trailer Text end */
.on .title_sub{transition-delay:0.5s}
.title_sub.t1{margin-top:81px;background-position:0 -340px}
.title_sub.t2{margin-top:25px;background-position:0 -402px}
.title_sub.t3{margin-top:-40px;background-position:0 -446px}
.title_sub.t4{margin-top:75px;background-position:0 -492px;top:-35px;}
.title_sub.t5{margin-top:81px;background-position:0 -504px}
.title_sub.t6{margin-top:75px;background-position:0 -538px}
.text_notice{position:absolute;bottom:200px;left:50%;margin-left:-500px;width:1000px;height:25px;background:url(../images/spr_title.png) 0 -604px no-repeat}
.dungeon_img li{position:relative}
.dungeon_img li a{transition:transform 500ms}
.inner_dungeon li a:hover{transform:translateY(-13px)}
.dungeon_monster li a:hover{transform:translateY(-11px)}
.field_monster li a:hover{transform:translateY(-6px)}
.dungeon_img .ico_zoom{position:absolute;top:0;left:2px;width:75px;height:75px;background:url(../images/spr_button.png) no-repeat;z-index:2}
.dungeon_monster .ico_zoom{top:7px;left:6px;background-position:0 -75px}
.field_monster .ico_zoom{top:7px;left:5px;background-position:0 -150px}

/* intro */
.section.intro{height:920px}
.section.intro .bg{height:920px;background-image:url(../images/TitleScreenBG.mp4)}
.intro_video{position:absolute;top:0;left:50%;margin-left:-960px;z-index:2}
.intro_title{position:absolute;top:108px;left:50%;margin-left:-250px;width:500px;height:296px;z-index:10}
.intro_title .part,
.intro_title .main_title,
.intro_title .date,

.intro_title .part{height:95px;transition:opacity 2s, transform 1s}
.intro_title .main_title{top:95px;height:339px;background-position:0 -95px}
.intro_title .date{top:434px;height:80px;background-position:0 -434px}
.intro_title .summary{top:514px;height:139px;background-position:0 -514px}
.on .intro_title .part{transition-delay:0.5s}

.on .intro_title .date{transition-delay:0.8s}
.on .intro_title .summary{transition-delay:1.2s}

.btn_Beta {
    position: absolute;
    top: 0px;
    left: 50%;
    margin-left: 360px;
    width: 553px;
    height: 85px;
    z-index: 100;
    transition: all 0.3s ease-in-out;
    overflow: hidden;
}

.btn_Beta a {
    display: block;
    width: 100%;
    height: 100%;
    background: url(../images/OpenBetaText.png) no-repeat center center;
    background-size: contain;
    transition: filter 0.3s ease-in-out, transform 0.3s ease-in-out;
    text-decoration: none;
}

.btn_Beta a:hover {
    filter: brightness(1.5);
    transform: scale(1.05);
}

.btn_Beta .blind {
    color: transparent;
    font-size: 0;
}


/* Smooth scroll behavior */
html {
    scroll-behavior: smooth;
}

.btn_Details {
    position: absolute;
    top: 950px;
    left: 349px;
    width: 100%;
    height: 100%;
    z-index: 100;
    transition: all 0.3s ease-in-out;
}

.btn_Details a {
    display: block;
    width: 242px;
    height: 74px;
    background: url(../images/Btn_Details.png) 0 0 no-repeat;
    transition: filter 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.btn_Details a:hover {
    filter: brightness(1.2);
    transform: scale(1.1);
}

.btn_Details2 {
    position: absolute;
    top: 950px;
    left: 609px;
    width: 100%;
    height: 100%;
    z-index: 100;
    transition: all 0.3s ease-in-out;
}

.btn_Details2 a {
    display: block;
    width: 242px;
    height: 74px;
    background: url(../images/Btn_Details2.png) 0 0 no-repeat;
    transition: filter 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.btn_Details2 a:hover {
    filter: brightness(1.2);
    transform: scale(1.1);
}
.btn_Details_Top {
    position: fixed;
    bottom: 0px;
    left: 50%;
    margin-left: -251px;
    width: 242px;
    height: 74px;
    z-index: 100;
    transition: all 0.3s ease-in-out;
}

.btn_Details_Top a {
    display: block;
    width: 242px;
    height: 74px;
    background: url(../images/Btn_Details.png) 0 0 no-repeat;
    transition: filter 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.btn_Details_Top a:hover {
    filter: brightness(1.2);
    transform: scale(1.1);
}

.btn_Details2_Top {
    position: fixed;
    bottom: 0px;
    left: 50%;
    margin-left: 9px;
    width: 242px;
    height: 74px;
    z-index: 100;
    transition: all 0.3s ease-in-out;
}

.btn_Details2_Top a {
    display: block;
    width: 242px;
    height: 74px;
    background: url(../images/Btn_Details2.png) 0 0 no-repeat;
    transition: filter 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.btn_Details2_Top a:hover {
    filter: brightness(1.2);
    transform: scale(1.1);
}
.btn_Discord {
    position: absolute;
    top: -100px;
    left: -700px;
    width: 100%;
    height: 100%;
    z-index: 100;
    transition: all 0.3s ease-in-out; /* Smooth transition for all changes */
}

.btn_Discord a {
    display: block;
    width: 145px;
    height: 48px;
    background: url(../images/Discord_Button.png) 0 0 no-repeat;
    transition: filter 0.3s ease-in-out, transform 0.3s ease-in-out; /* Transition for brightness and scaling */
}

.btn_Discord a:hover {
    filter: brightness(1.5); /* Increases brightness */
    transform: scale(1.1); /* Slightly enlarges the button */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Adds a shadow */
}

.btn_Youtube {
    position: absolute;
    top: -100px;
    left: -530px;
    width: 100%;
    height: 100%;
    z-index: 100;
    transition: all 0.3s ease-in-out; /* Smooth transition for all changes */
}

.btn_Youtube a {
    display: block;
    width: 145px;
    height: 48px;
    background: url(../images/Youtube_Button.png) 0 0 no-repeat;
    transition: filter 0.3s ease-in-out, transform 0.3s ease-in-out; /* Transition for brightness and scaling */
}

.btn_Youtube a:hover {
    filter: brightness(1.5); /* Increases brightness */
    transform: scale(1.1); /* Slightly enlarges the button */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Adds a shadow */
}

.btn_Facebook {
    position: absolute;
    top: -100px;
    left: -360px;
    width: 100%;
    height: 100%;
    z-index: 100;
    transition: all 0.3s ease-in-out; /* Smooth transition for all changes */
}

.btn_Facebook a {
    display: block;
    width: 145px;
    height: 48px;
    background: url(../images/Facebook_Button.png) 0 0 no-repeat;
    transition: filter 0.3s ease-in-out, transform 0.3s ease-in-out; /* Transition for brightness and scaling */
}

/* Hover effect */
.btn_Facebook a:hover {
    filter: brightness(1.5); /* Increases brightness */
    transform: scale(1.1); /* Slightly enlarges the button */
}

.btn_Website {
    position: absolute;
    top: -100px;
    left: -190px;
    width: 145px;
    height: 48px;
    z-index: 200;  /* Increase z-index further to ensure it’s above other elements */
    transition: all 0.3s ease-in-out;
}


.btn_Website a {
    display: block;
    width: 145px; /* Ensure anchor dimensions are correct */
    height: 48px;
    background: url(../images/Website_Button.png) 0 0 no-repeat;
    transition: filter 0.3s ease-in-out, transform 0.3s ease-in-out; /* Transition for brightness and scaling */
}

.btn_Website a:hover {
    filter: brightness(1.5); /* Increases brightness */
    transform: scale(1.1); /* Slightly enlarges the button */
}


.animated_rates_image {
    position: absolute;
    top: 0px;
    left: -30px;
    width: 100%;
    height: 100%;
    z-index: 100;
    transition: right 1s;
    background: url(../images/rates_info.png) 0 0 no-repeat;
}

.blind {
    display: none; /* Hides the text "Join our Discord!" visually */
}
.btnRegister {
    position: absolute;
    top: 1120px;
    left: 229px;
    width: 411px;
    height: 169px;
    z-index: 110;
    transition: right 1s;
    background: url(../images/Btn_Register.png) 0 0 no-repeat;
}

.btnRegister a {
    display: block; /* Ensures the <a> spans the parent */
    width: 100%;
    height: 100%;
    text-decoration: none; /* Removes underline from text */
    color: transparent; /* Hides the text visually while keeping it accessible */
}
.btnRegister:hover {
    filter: brightness(1.3); /* Increases brightness */
}
.btnDownload {
    position: absolute;
    top: 1120px;
    left: 529px;
    width: 429px;
    height: 169px;
    z-index: 110;
    transition: right 1s;
    background: url(../images/Btn_Download.png) 0 0 no-repeat;
}

.btnDownload a {
    display: block; /* Ensures the <a> spans the parent */
    width: 100%;
    height: 100%;
    text-decoration: none; /* Removes underline from text */
    color: transparent; /* Hides the text visually while keeping it accessible */
}
.btnDownload:hover {
    filter: brightness(1.3); /* Increases brightness */
}
.clickableStuff01 {
    position: absolute;
    top: 261px;
    left: 170px;
    width: 303px;
    height: 28px;
    z-index: 100;
    transition: right 1s;
    background: url(../images/Text_CreateAcc.png) 0 0 no-repeat;
}

.clickableStuff01 a {
    display: block; /* Ensures the <a> spans the parent */
    width: 100%;
    height: 100%;
    text-decoration: none; /* Removes underline from text */
    color: transparent; /* Hides the text visually while keeping it accessible */
}
.clickableStuff01:hover {
    filter: brightness(1.3); /* Increases brightness */
}
.clickableStuff02 {
    position: absolute;
    top: 268px;
    left: 756px;
    width: 361px;
    height: 21px;
    z-index: 100;
    transition: right 1s;
    background: url(../images/Text_DownloadClient.png) 0 0 no-repeat;
}

.clickableStuff02 a {
    display: block; /* Ensures the <a> spans the parent */
    width: 100%;
    height: 100%;
    text-decoration: none; /* Removes underline from text */
    color: transparent; /* Hides the text visually while keeping it accessible */
}
/* Hover effect for clickableStuff02 */
.clickableStuff02:hover {
    filter: brightness(1.3); /* Increases brightness */
}
/* section1 */
.section1{height:150px;}
.section1 .bg{height:150px;background-image:url(../images/bg_section1.jpg)}

/* section2 */
.section2{height:730px}
.section2 .bg{height:730px;background-image:url(../images/bg_section2.jpg)}
.section2 .box{margin-top:64px;height:595px;background-image:url(../images/section2_box.png)}
.dungeon_info{top:50px;position:relative;margin:38px auto 0;width:1053px;height:365px}
.dungeon_info .item .item_bg,
.dungeon_info .item .item_branch,
.dungeon_info .item .item_bubble,
.dungeon_info .text{position:absolute;top:0;left:0;width:360px;height:365px;background-image:url(../images/section2_content.png)}
.dungeon_info .item .item_branch{background-position:-360px 0}
.dungeon_info .item .item_bubble{background-position:-720px 0}
.dungeon_info .item .item_bg,
.dungeon_info .item .item_bubble{transition:opacity 0.8s linear, transform 0.4s ease;transform:translateX(30px)}
.on .dungeon_info .item .item_bg,
.on .dungeon_info .item .item_bubble{transform:translateX(0);transition-delay:0.8s}
.on .dungeon_info .item .item_bg{animation:animRotate 60s linear infinite 1.6s}
.dungeon_info .item .item_branch{transition:opacity 0.4s linear, transform 0.5s ease;transform:scale(0.4)}
.dungeon_info .text{top:18px;left:400px;width:669px;height:343px;background-position:-1120px -17px;transition:opacity 0.8s linear, transform 0.5s ease;transform:translateX(-30px)}
.on .dungeon_info .text{transform:translateX(0);transition-delay:0.8s}
.on .dungeon_info .item .item_branch{transform:scale(1);transition-delay:0.9s;animation:animFloating 3.9s linear infinite 1.8s}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {  /* IE10+ */  
    .on .dungeon_info .item .item_bg{animation:none}
    .on .dungeon_info .item .item_branch{animation:none}
}
@-moz-document url-prefix() { /* firefox only */
  .on .dungeon_info .item .item_bg{animation:none}
}



/* section3 */
.section3{height:1050px}
.section3 .bg{height:1050px;background-image:url(../images/bg_section3.jpg)}
.section3 .box{margin-top:380px;height:902px;background-image:url(../images/feature_warp.a1f4c412.png)}
.inner_dungeon{padding-left:168px;padding-top:60px;margin:58px auto 0;width:1156px;height:649px;z-index:30}
.inner_dungeon li{float:left;width:556px;height:311px;z-index:30}
.inner_dungeon li a{display:block;width:100%;height:100%;background:url(../images/spr_dungeon_inside.png) no-repeat;z-index:30}
.inner_dungeon .i1{transform:translateY(-30px)}
.inner_dungeon .i2{margin-left:44px;transform:translateX(30px)}
.inner_dungeon .i2 a{background-position:0 -311px}
.inner_dungeon .i3{margin-top:27px;transform:translateX(-30px);z-index:30}
.inner_dungeon .i3 a{background-position:0 -622px;z-index:30}
.inner_dungeon .i4{margin:27px 0 0 44px;transform:translateY(30px)}
.inner_dungeon .i4 a{background-position:0 -933px}
.on .inner_dungeon li{transform:translate(0, 0);transition:opacity 0.5s linear, transform 0.8s ease}
.on .inner_dungeon .i1,
.on .inner_dungeon .i2,
.on .inner_dungeon .i3,
.on .inner_dungeon .i4{transition-delay:1s;z-index:30}

/* section4 */
.section4{height:1250px}
.section4 .bg{height:1250px;background-image:url(../images/bg_section4.jpg)}
.section4 .box{margin-top:79px;height:1050px;background-image:url(../images/section4_box.png)}
.dungeon_monster{margin:62px auto 0;width:1158px;height:748px}
.dungeon_monster li{float:left;width:279px;height:370px}
.dungeon_monster li a{display:block;width:100%;height:100%;background:url(../images/spr_dungeon_monster.png) no-repeat}
.dungeon_monster .i2,
.dungeon_monster .i3,
.dungeon_monster .i4,
.dungeon_monster .i6,
.dungeon_monster .i7,
.dungeon_monster .i8{margin-left:14px;z-index:30}
.dungeon_monster .i5,
.dungeon_monster .i6,
.dungeon_monster .i7,
.dungeon_monster .i8{margin-top:18px}
.dungeon_monster .i2 a{background-position:-279px 0}
.dungeon_monster .i3 a{background-position:-558px 0;z-index:30}
.dungeon_monster .i4 a{background-position:-837px 0}
.dungeon_monster .i5 a{background-position:0 -370px}
.dungeon_monster .i6 a{background-position:-279px -370px}
.dungeon_monster .i7 a{background-position:-558px -370px}
.dungeon_monster .i8 a{background-position:-837px -370px}
.dungeon_monster .i1,
.dungeon_monster .i2,
.dungeon_monster .i3,
.dungeon_monster .i4{transform:translateY(-30px);z-index:30}
.dungeon_monster .i5,
.dungeon_monster .i6,
.dungeon_monster .i7,
.dungeon_monster .i8{transform:translateY(30px)}
.on .dungeon_monster li{transform:translateY(0);transition:opacity 0.5s linear, transform 0.8s ease}
.on .dungeon_monster .i1,
.on .dungeon_monster .i8{transition-delay:0.8s}
.on .dungeon_monster .i2,
.on .dungeon_monster .i7{transition-delay:1s}
.on .dungeon_monster .i3,
.on .dungeon_monster .i6{transition-delay:1.2s;z-index:30}
.on .dungeon_monster .i4,
.on .dungeon_monster .i5{transition-delay:1.4s}

/* section5 */
.section5{height:150px;display:block;}
.section5 .bg{height:150px;background-image:url(../images/bg_section5.jpg)}

/* section6 */
.section6{height:1080px}
.section6 .bg{height:1080px;background-image:url(../images/bg_section6.jpg)}
.section6 .box{margin-top:-220px;height:1190px;background-image:url(../images/section6_box.png)}
.section6 .explain{margin:30px auto 0;width:1000px;height:18px;background:url(../images/spr_title.png) 0 -586px no-repeat;transform:translateY(-10px)}
.section6.on .explain{transform:translateY(0);transition-delay:0.5s}
.field_monster{margin:350px auto 0;width:1184px;height:577px}
.field_monster li{float:left;width:232px;height:287px}
.field_monster li a{display:block;width:100%;height:100%;background:url(../images/spr_field_monster.png) no-repeat}
.field_monster .i2,
.field_monster .i3,
.field_monster .i4,
.field_monster .i5,
.field_monster .i7,
.field_monster .i8,
.field_monster .i9,
.field_monster .i10{margin-left:6px;z-index:30}
.field_monster .i6,
.field_monster .i7,
.field_monster .i8,
.field_monster .i9,
.field_monster .i10{margin-top:5px}
.field_monster .i2 a{background-position:-232px 0}
.field_monster .i3 a{background-position:-464px 0;z-index:30}
.field_monster .i4 a{background-position:-696px 0}
.field_monster .i5 a{background-position:-928px 0}
.field_monster .i6 a{background-position:0 -287px}
.field_monster .i7 a{background-position:-232px -287px}
.field_monster .i8 a{background-position:-464px -287px}
.field_monster .i9 a{background-position:-696px -287px}
.field_monster .i10 a{background-position:-928px -287px}
.field_monster .i1,
.field_monster .i2{transform:translateX(30px)}
.field_monster .i4,
.field_monster .i5{transform:translateX(-30px)}
.field_monster .i6,
.field_monster .i7{transform:translateX(30px)}
.field_monster .i9,
.field_monster .i10{transform:translateX(-30px)}
.on .field_monster li{transform:translateX(0);transition:opacity 0.8s linear, transform 1s ease}
.on .field_monster .i3,
.on .field_monster .i8{transition-delay:1s;z-index:30}
.on .field_monster .i2,
.on .field_monster .i4,
.on .field_monster .i7,
.on .field_monster .i9{transition-delay:1.3s}
.on .field_monster .i1,
.on .field_monster .i5,
.on .field_monster .i6,
.on .field_monster .i10{transition-delay:1.6s}

/* section7 */
.section7{height:1130px}
.section7 .bg{height:1259px;background-image:url(../images/bg_section7.jpg)}
.section7 .box{left:300px;margin-top:330px;height:966px;background-image:url(../images/CbtRegistBG.png)}
.new_items{position:relative;margin:138px auto 0;left:5px;}
.new_items .item .item_bg,
.new_items .item .item_branch,
.new_items .item .item_bubble,
.new_items .text{position:absolute;top:0;left:0;width:360px;height:365px;background-image:url(../images/section7_content.png)}
.new_items .item .item_branch{background-position:-360px 0}
.new_items .item .item_bubble{background-position:-720px 0}
.new_items .item .item_bg,
.new_items .item .item_bubble{transition:opacity 0.8s linear, transform 0.4s ease;transform:translateX(30px)}
.on .new_items .item .item_bg,
.on .new_items .item .item_bubble{transform:translateX(0);transition-delay:0.8s}
.on .new_items .item .item_bg{animation:animRotate 60s linear infinite 1.6s}
.new_items .item .item_branch{transition:opacity 0.4s linear, transform 0.5s ease;transform:scale(0.4)}
.new_items .text{top: 39px;left: 330px;width:1141px;height: 770px;background-position: -1184px 1px;transition:opacity 0.8s linear, transform 0.5s ease;}
.on .new_items .text{transform:translateX(0);transition-delay:0.8s}
.on .new_items .item .item_branch{transform:scale(1);transition-delay:0.9s;animation:animFloating 3.9s linear infinite 1.8s}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {  /* IE10+ */  
    .on .new_items .item .item_bg{animation:none}
    .on .new_items .item .item_branch{animation:none}
}
@-moz-document url-prefix() { /* firefox only */
  .on .new_items .item .item_bg{animation:none}
}

/*address*/
.footer{position:absolute;left:0;bottom:0;width:100%;height: 90px;line-height: 90px;text-align:center;background-color:#000;z-index:9;}
.footer p, .footer a{font-size:18px;color:#61646e}

.btn_floating{position:fixed;top:50%;right:-166px;margin-top:-170px;z-index:100;transition:right 1s;visibility:hidden}
.btn_floating a{display:block;width:166px;height:340px;background:url(../images/spr_button.png) -75px 0 no-repeat}



/* pop */
/*.dimmed{position:fixed;top:0;_top:10px;bottom:0;left:0;right:0;display:block;width:100%;height:100%;background-color:#000;filter:alpha(opacity=80);opacity:0.8;z-index:200}
.dimmed{_display:none !important}
.pop{display:none;position:fixed;left:50%;top:50%;width:1274px;height:724px;margin:-362px 0 0 -637px;z-index:300}
.pop .pop_img, .pop a{position:absolute;top:0}
.pop a{display:block;background:url(../images/spr_button.png) no-repeat}
.pop .pop_bg{position:relative;display:block;width:100%;height:100%}
.pop .deco_line{display:block;position:absolute;background:url(../images/pop_box.png) no-repeat;transition:all 1s ease;opacity:0}
.pop .deco_line.l1{top:0;left:0;width:40px;height:12px}
.pop .deco_line.l2{top:12px;right:0;width:9px;height:0;background-position:-1265px -12px}
.pop .deco_line.l3{bottom:0;right:0;width:40px;height:14px;background-position:100% -711px}
.pop .deco_line.l4{bottom:12px;left:0;width:9px;height:0;background-position:0 -12px}
.pop .close{top:4px;right:-40px;width:40px;height:40px;background-position:0 -283px}
.pop.on .deco_line.l1,
.pop.on .deco_line.l3{width:100%;opacity:1}
.pop.on .deco_line.l2,
.pop.on .deco_line.l4{height:699px;opacity:1}
.pop .pop_bg:hover .move{display:block}
.pop .move{display:none;position:absolute;top:50%;margin-top:-29px;width:26px;height:58px}
.pop .move.prev{left:-61px;background-position:0 -225px}
.pop .move.next{right:-61px;background-position:-26px -225px}
.pop .pop_img{top:6px;left:6px;width:1261px;height:710px}
.pop .pop_img img{width:100%;height:100%}
.loading{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#000;z-index:500}

@media all and (max-width:1280px) {
    .pop{margin:-285px 0 0 -500px;width:1000px;height:569px}
    .pop .pop_img{width:988px;height:556px}
    .pop .close{right:-45px}
    .pop .deco_line.l1{width:10px}
    .pop .deco_line.l2{top:5px;height:8px}
    .pop .deco_line.l3{width:10px}
    .pop .deco_line.l4{bottom:7px}
    .pop.on .deco_line.l1,
    .pop.on .deco_line.l3{width:994px}
    .pop.on .deco_line.l2,
    .pop.on .deco_line.l4{height:550px}
    .pop .move.prev{left:-50px}
    .pop .move.next{right:-50px}
}
*/
@keyframes sunlight{
    0%{opacity:0.2;transform:translateY(0)}
	50%{opacity:1;transform:translateY(-30px)}
	100%{opacity:0.2;transform:translateY(0)}
}
@keyframes flipInX{
  from{transform:perspective(400px) rotate3d(1, 0, 0, 90deg);animation-timing-function:ease-in;opacity:0}
  40%{transform:perspective(400px) rotate3d(1, 0, 0, -20deg);animation-timing-function:ease-in}
  60%{transform:perspective(400px) rotate3d(1, 0, 0, 10deg);opacity:1}
  80%{transform:perspective(400px) rotate3d(1, 0, 0, -5deg)}
  to{transform:perspective(400px)}
}
@keyframes animFloating{
	0%{transform:translateY(0)}
	50%{transform:translateY(-12px)}
	100%{transform:translateY(0)}
}
@keyframes animRotate{
	from{transform:rotate(0deg)}
	to{transform:rotate(360deg);transform-origin:center}
}
@-moz-keyframes animRotate{
	from{transform:rotate(0deg)}
	to{transform:rotate(360deg);transform-origin:center}
}

.countdown {
  display: flex;
  gap: 20px;
}

.time-unit {
  text-align: center;
}

.number {
  font-size: 3rem;
  font-weight: bold;
  display: inline-block;
  padding: 10px 20px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  animation: pulse 1s infinite;
}

.label {
  font-size: 1rem;
  margin-top: 5px;
  display: block;
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.8;
  }
}
/* Registration Toggle - Add 'registration-disabled' class to body to disable registration */
body.registration-disabled .btnRegister,
body.registration-disabled .btnDownload,
body.registration-disabled .clickableStuff01,
body.registration-disabled .clickableStuff02 {
    display: none !important;
}

body.registration-disabled .section6 .box {
    background-image: url(../images/section6_box_comingsoon.png) !important;
}
.comingSoonImage {
    position: absolute;
    top: 340px;
    left: 50%;
    margin-left: -210.5px;
    width: 421px;
    height: 263px;
    z-index: 100;
    background: url(../images/ComingSoonText01.png) no-repeat center center;
    background-size: contain;
    animation: glowFloat 3s ease-in-out infinite;
}

@keyframes glowFloat {
    0%, 100% {
        filter: brightness(1.2) drop-shadow(0 0 10px rgba(255, 255, 255, 0.6));
        transform: translateY(0px);
    }
    50% {
        filter: brightness(1.8) drop-shadow(0 0 40px rgba(255, 255, 255, 1)) drop-shadow(0 0 60px rgba(255, 255, 255, 0.9));
        transform: translateY(-10px);
    }
}