@charset "utf-8";
*{ font-family: "NanumSquareNeo", 맑은 고딕, 微软雅黑, sans-serif;}
html{ overflow-y: scroll; width: 100%; height: 100%; background: #000;}
body{ background: none; -webkit-text-size-adjust: none; word-break: keep-all; font-weight: 200; letter-spacing: 0; color: #000;}



.header{ position: fixed; z-index: 100; top: 0; bottom: 0; left: 0; transition: left .3s, opacity .3s, width .3s, padding .3s, background .3s;}
.header .row{ overflow: hidden; position: absolute; z-index: 10; top: 0; bottom: 0; left: 0; padding: 0 40px; width: 300px; background: rgba(18 23 47/50%); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); transition: left .3s, opacity .3s, width .3s, padding .3s, background .3s;}
.header .mCustomScrollBox{ overflow: visible;}
.header .mCSB_container{ overflow: visible; margin: 0; padding: 0 0 50px 0;}
.header .mCSB_scrollTools{ right: -70px; opacity: 0;}
.header .logo{ display: flex; justify-content: center; align-items: center; padding: 50px 0; transition: all .3s;}
.header .logo a{ display: flex; justify-content: center; align-items: center; height: 80px; transition: all .3s;}
.header .logo img{ display: block; width: auto; height: 100%; transition: all .3s;}
.header .tit{ overflow: hidden; padding: 40px 0 20px 0; height: 75px; line-height: 15px; font-size: 15px; font-weight: 400; color: #fcd600; transition: all .3s;}
.header .menu{ display: flex; align-items: center; position: relative; padding: 5px 0; cursor: pointer; transition: all .3s;}
.header .menu:before{ content: ""; display: none; position: absolute; z-index: 20; top: 50%; right: 0; margin: -5px 0 0 0; width: 10px; height: 10px; border-radius: 4px; background: #fcd600; transition: all .3s;}
.header .menu.new:before{ display: block;}
.header .menu:after{ content: ""; display: block; position: absolute; top: 5px; left: 0; width: 40px; height: 40px; border-radius: 15px; background: rgba(255 255 255/10%); transition: all .3s;}
.header .menu .icon{ flex: 0 0 40px; display: flex; justify-content: center; align-items: center; position: relative; z-index: 10; width: 40px; height: 40px;}
.header .menu .icon img{ display: block; width: auto; height: 16px; opacity: .5;}
.header .menu .img{ flex: 0 0 40px; width: 40px; height: 40px;}
.header .menu .img img{ display: block; width: auto; height: 100%; border-radius: 15px; opacity: .7;}
.header .menu p{ overflow: hidden; display: flex; align-items: center; position: absolute; z-index: 10; top: 10px; left: 55px; width: 165px; height: 30px; font-size: 13px; color: rgba(255 255 255/50%); transition: all .3s;}
.header .menu.game:after{ display: none;}
.header .menu.about:hover:after{ width: 100%;}
.header .menu.about:hover p{ color: rgba(255 255 255/100%);}
.header .menu.game:hover p{ color: rgba(255 255 255/100%);}
.header .menu.game.on p{ color: rgba(255 255 255/100%);}
.header .menu.sns:hover{ opacity: 0.5;}
.header .menu.on:after{ width: 100%; background: #ff002a;}
.header .menu.on .icon img{ opacity: 1;}
.header .menu.on p{ font-weight: 400; color: rgba(255 255 255/100%);}
.header .close{ position: fixed; top: 0; right: 100%; bottom: 0; left: 0; background: rgba(0 0 0/0); transition: background .3s;}
.header.on_m{ left: 0; opacity: 1;}
.header.on_m .close{ right: 0; background: rgba(0 0 0/30%);}

.header.min .row{ padding: 0 30px; width: 100px; background: rgba(0 0 0/80%);}
.header.min .logo{ margin: 0 -10px;}
.header.min .logo a{ width: 60px; height: 60px; border-radius: 15px; background: rgba(255 255 255/15%);}
.header.min .logo a img{ height: 40%;}
.header.min .tit{ padding: 0; height: 0; opacity: 0;}
.header.min .menu{ padding: 10px 0;}
.header.min .menu:before{ top: 6px; right: -4px; margin: 0;}
.header.min .menu:after{ top: 10px;}
.header.min .menu p{ padding: 0; height: 0; opacity: 0;}

.header_sub{ overflow: hidden; position: fixed; z-index: 80; top: 0; bottom: 0; left: 100px; width: 300px; background: rgba(18 23 47/50%); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); transition: top .3s, left .3s, opacity .3s;}
.header_sub .logo{ display: flex; justify-content: center; align-items: center; height: 200px; transition: all .3s;}
.header_sub .logo img{ display: block; max-width: 60%; max-height: 50%; transition: all .3s;}
.header_sub .menu{ display: flex; align-items: center; position: relative; padding: 5px 40px; cursor: pointer; transition: all .3s;}
.header_sub .menu img{ display: block; width: auto; height: 20px; opacity: .4;}
.header_sub .menu p{ padding: 0 20px; width: 100%; border-radius: 15px; line-height: 50px; font-size: 13px; font-weight: 200; color: rgba(255 255 255/40%); transition: all .2s;}
.header_sub .menu.on img{ opacity: 1;}
.header_sub .menu.on p{ font-weight: 400; color: #FFF;}
.header_sub .menu:hover{ background: rgba(255 255 255/10%);}
.header_sub.off{ left: -300px; opacity: 0;}
.header_sub.on_m{ top: -200px; opacity: 0;}
@media(min-width: 1600px){
}
@media(max-width: 1600px){
    .header{ left: -300px; opacity: 0;}

    .header_sub{ display: flex; flex-wrap: wrap; justify-content: center; padding: 0 0 10px 0; top: 80px; right: 0; bottom: initial; left: 0; width: auto;}
    .header_sub .logo{ width: 100%; height: 80px;}
    .header_sub .logo img{ max-width: auto; max-height: 50px;}
    .header_sub .menu{ justify-content: center; padding: 0 25px; width: auto;}
    .header_sub .menu img{ display: block; width: auto; height: 20px; opacity: .4;}
    .header_sub .menu p{ padding: 0 0 0 10px; width: auto;}
}
@media(max-width: 767px){
    .header_sub{ top: 70px; padding: 0 0 15px 0;}
    .header_sub .logo{ height: 70px;}
    .header_sub .logo img{ max-height: 40px;}
    .header_sub .menu{ flex-direction: column; align-items: center; padding: 0 10px;}
    .header_sub .menu img{ height: 16px;}
    .header_sub .menu p{ padding: 5px 0 0 0; line-height: 15px; font-size: 10px;}
}


.header_m{ display: flex; align-items: center; position: fixed; z-index: 90; top: -80px; right: 0; left: 0; padding: 0 50px; height: 80px; background: rgba(18 23 47/70%); opacity: 0; -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); transition: all .3s;}
.header_m i{ font-size: 30px; color: #FFF;}
.header_m img{ display: block; margin: 0 0 0 50px; width: auto; height: 50px;}
.header_m.on_m{ top: -80px;}
@media(max-width: 1600px){
    .header_m{ top: 0; opacity: 1;}
}
@media(max-width: 767px){
    .header_m{ padding: 0 20px; height: 70px;}
    .header_m i{ font-size: 25px;}
    .header_m img{ margin: 0 0 0 20px; height: 40px;}
}


.visual{ overflow: hidden;}
.visual .rolling{ position: relative; overflow: hidden;}
.visual .rolling .bx-wrapper{ overflow: hidden; margin: 0;}
.visual .rolling .bx-viewport{ left: 0; border: none; background: none; box-shadow: none;}
.visual .rolling ul{}
.visual .rolling ul li{}
.visual .rolling ul li .row{ position: relative;}
.visual .rolling ul li .row .text{ display: flex; flex-direction: column; align-items: flex-start; position: absolute; z-index: 30; bottom: 180px; left: 450px;}
.visual .rolling ul li .row .text img{ display: block; width: auto; height: 200px; opacity: 0; transform: scale(1) rotate(0deg) translate(0,-100px); transition: all .8s;}
.visual .rolling ul li .row .text .t1{ margin: 40px 0 0 0; line-height: 1; font-size: 60px; font-weight: 500; color: #FFF; opacity: 0; transform: scale(1) rotate(0deg) translate(0,-100px); transition: all .6s;}
.visual .rolling ul li .row .text .t2{ margin: 20px 0 0 0; line-height: 1; font-size: 13px; color: rgba(255 255 255/50%); opacity: 0; transform: scale(1) rotate(0deg) translate(0,-100px); transition: all .4s;}
.visual .rolling ul li .row .text .t2 span{ margin: 0 10px 0 0; font-size: 15px; font-weight: 300; color: rgba(255 255 255/80%);}
.visual .rolling ul li .row .text .btn{ display: flex; align-items: center; margin: 40px 0 0 0; padding: 0 50px; height: 50px; border-radius: 15px; background: #1b4fe0; opacity: 0; transform: scale(1) rotate(0deg) translate(0,-100px); transition: all .2s;}
.visual .rolling ul li .row .text .btn p{ font-size: 13px; color: #FFF; letter-spacing: .5px;}
.visual .rolling ul li .row .text .btn i{ margin: 0 0 0 10px; font-size: 13px; color: #FFF;}
.visual .rolling ul li .row .img{ position: absolute; top: 0; right: 0; bottom: 0; left: 0;}
.visual .rolling ul li .row .img .img01{ display: block; position: absolute; z-index: 20; right: 0; bottom: 0; height: 90%; transform: scale(1.1) rotate(0deg) translate(0,0); transition: all 5s;}
.visual .rolling ul li .row .img .img02{ display: block; position: absolute; z-index: 20; top: 50%; right: 20%; width: 40%; transform: scale(1.1) rotate(0deg) translate(0,-60%); transition: all 5s;}
.visual .rolling ul li .row .img .bg{ position: absolute; z-index: 10; top: 0; right: 0; bottom: 0; left: 0; background: linear-gradient(to bottom, rgba(0 0 0/0%), rgba(0 0 0/100%));}
.visual .rolling ul li .row .img .bg01{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; -webkit-filter: blur(10px); background: url(/images/game_ExtremeArena_bg.jpg) top center/cover; transition: all 5s;}
.visual .rolling ul li .row .img .bg02{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; -webkit-filter: blur(10px); background: url(/images/game_BattleZone_bg.jpg) top center/cover; transition: all 5s;}
.visual .rolling ul li .row .img .bg03{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; -webkit-filter: blur(0); transition: all 5s;}
.visual .rolling ul li .row .img .bg03 video{ position:absolute; z-index:10; top:50%; left:50%; min-width:100%; min-height:100%; width:auto; height:auto; transform:translate(-50%, -50%);}
.visual .rolling ul li .row.on .text img{ opacity: 1; transform: scale(1) rotate(0deg) translate(0,0);}
.visual .rolling ul li .row.on .text .t1{ opacity: 1; transform: scale(1) rotate(0deg) translate(0,0);}
.visual .rolling ul li .row.on .text .t2{ opacity: 1; transform: scale(1) rotate(0deg) translate(0,0);}
.visual .rolling ul li .row.on .text .t3{ opacity: 1; transform: scale(1) rotate(0deg) translate(0,0);}
.visual .rolling ul li .row.on .text .btn{ opacity: 1; transform: scale(1) rotate(0deg) translate(0,0);}
.visual .rolling ul li .row.on .img01{ transform: scale(1) rotate(0deg) translate(0,0);}
.visual .rolling ul li .row.on .img02{ transform: scale(1) rotate(0deg) translate(0,-60%);}
.visual .rolling ul li .row.on .bg01{ -webkit-filter: blur(0); transform: scale(1.1) rotate(0deg) translate(0,0);}
.visual .rolling ul li .row.on .bg02{ -webkit-filter: blur(0); transform: scale(1.1) rotate(0deg) translate(0,0);}
.visual .rolling .bx-controls{ display: flex; justify-content: space-between; align-items: center; position: absolute; z-index: 10; right: 150px; bottom: 80px; left: inherit; width: 190px; height: 40px; border-radius: 20px; background: rgba(255 255 255/0%);}
.visual .rolling .bx-controls .bx-pager{ display: flex; justify-content: center; align-items: center; position: static; bottom: inherit; margin: 0; padding: 0; width: 140px !important; height: 40px; font-size: 14px; font-weight: 200; color: rgba(255 255 255/50%);}
.visual .rolling .bx-controls .bx-pager font{ margin: 0 5px 0 0; font-size: 14px; color: rgba(255 255 255/100%);}

.visual .rolling .bx-controls .bx-controls-auto{ position: initial; width: 40px !important; height: 40px; border-radius: 50%; background: #1b4fe0;}
.visual .rolling .bx-controls .bx-controls-auto .bx-controls-auto-item{ display: flex; justify-content: center; height: 0 !important;}
.visual .rolling .bx-controls .bx-controls-auto a{ display: flex !important; justify-content: center; align-items: center; width: 40px; height: 40px;}
.visual .rolling .bx-controls .bx-controls-auto a.bx-start{ background: url(/images/v_play.png) no-repeat center;}
.visual .rolling .bx-controls .bx-controls-auto a.bx-stop{ background: url(/images/v_stop.png) no-repeat center;}
.visual .rolling .bx-controls .bx-controls-auto a.active{ display: none !important;}

.visual .rolling #visual_btn_L{ display: flex; justify-content: center; align-items: center; position: absolute; z-index: 11; bottom: 80px; right: 300px; width: 40px; height: 40px; background: none; font-size: 15px; color: rgba(255 255 255/50%); transition: all .3s;}
.visual .rolling #visual_btn_L a{ overflow: hidden; position: absolute; z-index: 10; top: 0; right: 0; bottom: 0; left: 0; line-height: 500px;}
.visual .rolling #visual_btn_L:hover{ color: #FFF;}
.visual .rolling #visual_btn_R{ display: flex; justify-content: center; align-items: center; position: absolute; z-index: 11; bottom: 80px; right: 200px; width: 40px; height: 40px; background: none; font-size: 15px; color: rgba(255 255 255/50%); transition: all .3s;}
.visual .rolling #visual_btn_R a{ overflow: hidden; position: absolute; z-index: 10; top: 0; right: 0; bottom: 0; left: 0; line-height: 500px;}
.visual .rolling #visual_btn_R:hover{ color: #FFF;}
.visual .rolling .line{ position: absolute; z-index: 50; right: 360px; bottom: 99px; left: 450px; height: 2px; background: rgba(255 255 255/10%);}
.visual .rolling .line span{ display:block; width:0; height: 2px; background: #1b4fe0;}
@media(max-width: 1800px){
    .visual .rolling ul li .row .text{ left: 400px;}
    .visual .rolling .bx-controls{ right: 100px;}
    .visual .rolling #visual_btn_L{ right: 250px;}
    .visual .rolling #visual_btn_R{ right: 150px;}
    .visual .rolling .line{ right: 310px; left: 400px;}
}
@media(max-width: 1600px){
    .visual .rolling ul li .row .text{ left: 50px; bottom: 140px;}
    .visual .rolling ul li .row .text img{ height: 150px;}
    .visual .rolling ul li .row .text .t1{ font-size: 50px;}
    .visual .rolling ul li .row .text .t2{ font-size: 13px;}
    .visual .rolling ul li .row .text .t2 span{ font-size: 15px;}
    .visual .rolling ul li .row .text .btn{ padding: 0 30px; height: 45px;}
    .visual .rolling ul li .row .img .img01{ height: 70%;}
    .visual .rolling .bx-controls{ right: 50px; bottom: 50px;}
    .visual .rolling #visual_btn_L{ right: 200px; bottom: 50px;}
    .visual .rolling #visual_btn_R{ right: 100px; bottom: 50px;}
    .visual .rolling .line{ right: 260px; left: 50px; bottom: 70px;}
}
@media(max-width: 1025px){
    .visual .rolling ul li .row .img .img01{ z-index: 9; right: -25%;}
    .visual .rolling ul li .row .img .img02{ top: 50%; right: 10%; width: 60%;}
}
@media(max-width: 767px){
    .visual .rolling ul li .row .text{ left: 20px; bottom: 80px;}
    .visual .rolling ul li .row .text img{ height: 100px;}
    .visual .rolling ul li .row .text .t1{ margin: 20px 0 0 0; font-size: 35px;}
    .visual .rolling ul li .row .text .t2{ margin: 15px 0 0 0; font-size: 10px;}
    .visual .rolling ul li .row .text .t2 span{ font-size: 12px;}
    .visual .rolling ul li .row .text .btn{ margin: 20px 0 0 0; padding: 0 25px; height: 40px; border-radius: 10px;}
    .visual .rolling ul li .row .text .btn p{ font-size: 11px;}
    .visual .rolling ul li .row .text .btn i{ font-size: 11px;}
    .visual .rolling ul li .row .img .img01{ right: -50%; height: 80%;}
    .visual .rolling ul li .row .img .img02{ top: 40%; right: 10%; width: 80%;}
    .visual .rolling .bx-controls{ right: 20px; bottom: 30px;}
    .visual .rolling #visual_btn_L{ right: 170px; bottom: 30px;}
    .visual .rolling #visual_btn_R{ right: 70px; bottom: 30px;}
    .visual .rolling .line{ right: 230px; left: 20px; bottom: 48px;}
}


.sub_max{ overflow: hidden; position: relative; padding: 0 150px 0 450px;}
.sub_max .sub{ position: relative; z-index: 10;}
.sub_max .bg{ position: fixed; top: 0; right: 0; bottom: 0; left: 0;}
.sub_max .bg span{ display: block; position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: linear-gradient(to bottom, rgba(0 0 0/20%), rgba(0 0 0/80%));}


.sub_min{ overflow: hidden; position: relative; padding: 0 150px 0 550px;}
.sub_min .sub{ position: relative; z-index: 10;}
.sub_min .bg{ position: fixed; top: 0; right: 0; bottom: 0; left: 0;}
.sub_min .bg span{ display: block; position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: linear-gradient(to bottom, rgba(0 0 0/20%), rgba(0 0 0/80%));}
@media(max-width: 1800px){
    .sub_max{ padding: 0 100px 0 400px;}
    .sub_min{ padding: 0 100px 0 500px;}
}
@media(max-width: 1600px){
    .sub_max{ padding: 0 50px;}
    .sub_min{ padding: 0 50px;}
}
@media(max-width: 767px){
    .sub_max{ padding: 0 20px;}
    .sub_min{ padding: 0 20px;}
}


.about_culture .bg{ background: url(/images/3kds_bi_bg.png) top center/cover;}
.about_culture .sub{ padding: 8vw 0 10vw 0;}
.about_culture .t1{ text-align: center; font-size: 60px; font-weight: 500; color: #FFF; text-shadow: 0 5px 20px rgba(0 0 0/100%);}
.about_culture .t2{ margin: 50px 0 0 0; text-align: center; line-height: 1.8; font-size: 25px; font-weight: 300; color: #FFF;}
.about_culture .img{ margin: 40px 0; padding: 10px; border-radius: 10px; background: url(/images/about_culture_BI_PC.png) top center/cover;}
.about_culture .img img{ display: block; margin: 0 auto; max-width: 100%; height: auto;}
.about_culture .img img.m{ display: none; }
.about_culture .t3{ line-height: 1.8; font-size: 18px; color: rgba(255 255 255/80%);}
@media(max-width: 1600px){
    .about_culture .sub{ padding: 180px 0 100px 0;}
    .about_culture .img{ padding: 50px;}
}
@media(max-width: 767px){
    .about_culture .sub{ padding: 140px 0 70px 0;}
    .about_culture .t1{ font-size: 30px;}
    .about_culture .t2{ margin: 20px 0 0 0; font-size: 15px;}
    .about_culture .img{ margin: 30px 0; padding: 30px;}
    .about_culture .img img.p{ display: none;}
    .about_culture .img img.m{ display: block;}
    .about_culture .t3{ font-size: 12px;}
}


.about_social .bg{ background: url(/images/3kds_bi_bg.png) top center/cover;}
.about_social .sub{ padding: 8vw 0 10vw 0;}
.about_social .t1{ text-align: center; font-size: 60px; font-weight: 500; color: #FFF; text-shadow: 0 5px 20px rgba(0 0 0/100%);}
.about_social .t2{ padding: 50px 0 0 0; text-align: center; font-size: 25px; color: #FFF;}
.about_social .img{ margin: 50px 0;}
.about_social .img ul{ display: flex; flex-wrap: wrap; margin: -10px -5px 0 -5px;}
.about_social .img ul li{ margin: 10px 0 0 0; width: 10%;}
.about_social .img ul li a{ display: block; margin: 0 5px;}
.about_social .img ul li a img{ display: block; width: 100%;}
.about_social .t3{ line-height: 2; font-size: 15px; color: #FFF;}
.about_social .btn{ display: flex; justify-content: center; align-items: center; margin: 40px auto 0 auto; width: 200px; height: 60px; border-radius: 25px; background: #1b4fe0; font-size: 18px; color: #FFF;}
@media(max-width: 1600px){
    .about_social .sub{ padding: 180px 0 100px 0;}
}
@media(max-width: 767px){
    .about_social .sub{ padding: 140px 0 70px 0;}
    .about_social .t1{ font-size: 30px;}
    .about_social .t2{ padding: 20px 0 0 0; font-size: 15px;}
    .about_social .img{ margin: 30px 0;}
    .about_social .img ul{ margin: -5px -2.5px 0 -2.5px;}
    .about_social .img ul li{ margin: 5px 0 0 0; width: 20%;}
    .about_social .t3{ font-size: 12px;}
    .about_social .btn{ margin: 30px auto 0 auto; height: 45px; border-radius: 15px; font-size: 15px;}
}


.about_roadmap .bg{ background: url(/images/3kds_bi_bg.png) top center/cover;}
.about_roadmap .sub{ padding: 8vw 0 10vw 0;}
.about_roadmap .t1{ text-align: center; font-size: 60px; font-weight: 500; color: #FFF; text-shadow: 0 5px 20px rgba(0 0 0/100%);}
/* .about_roadmap .img{ margin: 50px 0; padding: 100px; border-radius: 20px; background: rgba(0 0 0/70%);} */
/* 20240304 padding 값 수정 */
.about_roadmap .img{ margin: 50px 0; padding: 100px; border-radius: 20px; background: rgba(0 0 0/50%); backdrop-filter: blur(10px); border: 1px solid rgba(255 255 255/10%);}
.about_roadmap .img img{ display: block; margin: 0 auto; max-width: 100%; height: auto;}
.about_roadmap .img img.m{ display: none;}
@media(max-width: 1600px){
    .about_roadmap .sub{ padding: 180px 0 100px 0;}
    .about_roadmap .img{ padding: 50px;}
}
@media(max-width: 767px){
    .about_roadmap .sub{ padding: 140px 0 70px 0;}
    .about_roadmap .t1{ font-size: 30px;}
    .about_roadmap .img{ margin: 30px 0; padding: 30px;}
    .about_roadmap .img img.p{ display: none;}
    .about_roadmap .img img.m{ display: block;}
}


.about_vtuber .bg{ background: url(/images/v_tuber_bg.png) top center/cover;}
.about_vtuber .sub{ padding: 8vw 0 10vw 0;}
.about_vtuber .t1{ text-align: center; font-size: 60px; font-weight: 500; color: #FFF; text-shadow: 0 5px 20px rgba(0 0 0/100%);}
.about_vtuber .t2{ margin: 50px 0 0 0; text-align: center; line-height: 1.8; font-size: 25px; font-weight: 300; color: #FFF;}
.about_vtuber .img{ margin: 40px 0; padding: 10px; border-radius: 10px;}
.about_vtuber .img img{ display: block; margin: 0 auto; max-width: 100%; height: auto;}
.about_vtuber .img img.m{ display: none; }
.about_vtuber .t3{ line-height: 1.8; font-size: 18px; color: rgba(255 255 255/80%);}
@media(max-width: 1600px){
    .about_vtuber .sub{ padding: 180px 0 100px 0;}
    .about_vtuber .img{ padding: 50px;}
}
@media(max-width: 767px){
    .about_vtuber .sub{ padding: 140px 0 70px 0;}
    .about_vtuber .t1{ font-size: 30px;}
    .about_vtuber .t2{ margin: 20px 0 0 0; font-size: 15px;}
    .about_vtuber .img{ margin: 30px 0; padding: 30px;}
    .about_vtuber .img img.p{ display: none;}
    .about_vtuber .img img.m{ display: block;}
    .about_vtuber .t3{ font-size: 12px;}
}


.game_BattleZone .bg{ background: url(/images/game_BattleZone_bg_02.jpg) top center/cover;}
.game_BattleZone .sub{ position: relative;}
.game_BattleZone .text{ padding: 8vw 40% 10vw 0;}
.game_BattleZone .t1{ font-size: 60px; font-weight: 500; color: #FFF; text-shadow: 0 5px 20px rgba(0 0 0/100%);}
.game_BattleZone img{ display: block; margin: 10px 0 0 -50px; width: auto; height: 700px;}
.game_BattleZone .t2{ padding: 50px 0 0 0; line-height: 1.8; font-size: 25px; font-weight: 400; color: #FFF;}
.game_BattleZone .t3{ padding: 30px 0 0 0; line-height: 1.8; font-size: 18px; color: rgba(255 255 255/80%);}
.game_BattleZone .img{ display: block; position: absolute; z-index: 10; top: 50%; right: 0; width: 30%; transform: translate(0,-50%);}
@media(max-width: 1600px){
    .game_BattleZone .text{ padding: 320px 0 100px 0;}
}
@media(max-width: 1025px){
    .game_BattleZone img{ margin: 10px 0 0 -40px; height: 500px;}
}
@media(max-width: 767px){
    .game_BattleZone .text{ padding: 260px 0 70px 0;}
    .game_BattleZone .t1{ font-size: 30px;}
    .game_BattleZone img{ margin: 0 0 0 -20px; height: 250px;}
    .game_BattleZone .t2{ padding: 30px 0 0 0; font-size: 18px;}
    .game_BattleZone .t3{ padding: 20px 0 0 0; font-size: 12px;}
}


.game_IdleHero .bg{ background: url(/images/game_IdleHero_bg2.png) top center/cover;}
.game_IdleHero .sub{ position: relative;}
.game_IdleHero .text{ padding: 8vw 40% 10vw 0;}
.game_IdleHero .t1{ font-size: 60px; font-weight: 500; color: #FFF; text-shadow: 0 5px 20px rgba(0 0 0/100%);}
.game_IdleHero .t2{ padding: 50px 0 0 0; line-height: 1.8; font-size: 25px; font-weight: 400; color: #FFF;}
.game_IdleHero .t3{ padding: 30px 0 0 0; line-height: 1.8; font-size: 18px; color: rgba(255 255 255/80%);}
.game_IdleHero .img{ display: block; position: absolute; z-index: 10; top: 50%; right: 0; width: 30%;  transform: translate(0,-50%);}
.game_IdleHero .img2{ display: block; margin: 200px 0 0 0; max-width: 100%; height: auto;}
.game_IdleHero .img2 img2{ display: block; margin: 0 auto; max-width: 100%; height: auto;}
@media(max-width: 1600px){
    .game_IdleHero .text{ padding: 320px 35% 100px 0;}
}
@media(max-width: 767px){
    .game_IdleHero .text{ padding: 260px 0 70px 0;}
    .game_IdleHero .t1{ margin: 0 30% 0 0; font-size: 30px;}
    .game_IdleHero .t2{ padding: 30px 30% 0 0; font-size: 18px;}
    .game_IdleHero .t3{ padding: 20px 0 0 0; font-size: 12px;}
    .game_IdleHero .img{ top: 41%;}
}


.game_ExtremeArena .bg{ background: url(/images/game_ExtremeArena_bg.jpg) top center/cover;}
.game_ExtremeArena .sub{ position: relative;}
.game_ExtremeArena .text{ padding: 8vw 50% 10vw 0;}
.game_ExtremeArena .t1{ font-size: 60px; font-weight: 500; color: #FFF; text-shadow: 0 5px 20px rgba(0 0 0/100%);}
.game_ExtremeArena .t2{ padding: 50px 0 0 0; line-height: 1.8; font-size: 25px; font-weight: 400; color: #FFF;}
.game_ExtremeArena .t3{ padding: 30px 0 0 0; line-height: 1.8; font-size: 18px; color: rgba(255 255 255/80%);}
.game_ExtremeArena .img{ display: block; position: absolute; z-index: 10; bottom: 0; left: 50%; height: 90%;}
@media(max-width: 1600px){
    .game_ExtremeArena .text{ padding: 320px 50% 100px 0;}
    .game_ExtremeArena .img{ height: 70%;}
}
@media(max-width: 1025px){
    .game_ExtremeArena .text{ padding: 320px 0 100px 0;}
    .game_ExtremeArena .t3{ margin: 0 50% 0 0;}
    .game_ExtremeArena .img{ left: 45%; height: 50%;}
}
@media(max-width: 767px){
    .game_ExtremeArena .text{ padding: 260px 0 70px 0;}
    .game_ExtremeArena .t1{ font-size: 30px;}
    .game_ExtremeArena .t2{ padding: 30px 0 0 0; font-size: 18px;}
    .game_ExtremeArena .t3{ margin: 0; padding: 20px 0 0 0; font-size: 12px;}
    .game_ExtremeArena .t3:last-child{ margin: 0 50% 0 0;}
    .game_ExtremeArena .img{ height: 35%;}
}


.game_InfiniteShooting .bg{ background: url(/images/Critadel_M_bg.png) top center/cover;}
.game_InfiniteShooting .sub{ position: relative;}
.game_InfiniteShooting .text{ padding: 8vw 60% 10vw 0;}
.game_InfiniteShooting .t1{ font-size: 45px; font-weight: 500; color: #FFF; text-shadow: 0 5px 20px rgba(0 0 0/100%);}
.game_InfiniteShooting .t2{ padding: 50px 0 0 0; line-height: 1.8; font-size: 25px; font-weight: 400; color: #FFF;}
.game_InfiniteShooting .t3{ padding: 30px 0 0 0; line-height: 1.8; font-size: 18px; color: rgba(255 255 255/80%);}
.game_InfiniteShooting .img{ display: block; position: absolute; z-index: 10; top: 50%; right: 0; width: 60%; transform: translate(0,-50%);}
.game_InfiniteShooting .img2{ display: block; margin: 160px 0 0 0; max-width: 100%; height: auto;}
.game_InfiniteShooting .img2 img2{ display: block; margin: 0 auto; max-width: 100%; height: auto;}
@media(max-width: 1600px){
    .game_InfiniteShooting .text{ padding: 320px 50% 100px 0;}
    .game_InfiniteShooting .img{ top: 60%; width: 50%;}
}
@media(max-width: 1025px){
    .game_InfiniteShooting .text{ padding: 320px 0 100px 0;}
    .game_InfiniteShooting .img{ position: initial; margin: 30px 0 0 0; width: 80%; transform: translate(0,0);}
}
@media(max-width: 767px){
    .game_InfiniteShooting .text{ padding: 260px 0 70px 0;}
    .game_InfiniteShooting .t1{ font-size: 30px;}
    .game_InfiniteShooting .t2{ padding: 30px 0 0 0; font-size: 18px;}
    .game_InfiniteShooting .t3{ margin: 0; padding: 20px 0 0 0; font-size: 12px;}
    .game_InfiniteShooting .t3:last-child{ margin: 0 50% 0 0;}
    .game_InfiniteShooting .img{ height: 35%;}
}


.game_InfiniteRush .bg{ background: url(/images/RUSH_bg.png) top center/cover;}
.game_InfiniteRush .sub{ position: relative;}
.game_InfiniteRush .text{ padding: 8vw 0 10vw 0;}
.game_InfiniteRush .t1{ font-size: 60px; font-weight: 500; color: #FFF; text-shadow: 0 5px 20px rgba(0 0 0/100%);}
.game_InfiniteRush .t2{ padding: 50px 0 0 0; line-height: 1.8; font-size: 25px; font-weight: 400; color: #FFF;}
.game_InfiniteRush .t3{ padding: 30px 0 0 0; line-height: 1.8; font-size: 18px; color: rgba(255 255 255/90%);}
.game_InfiniteRush img{ display: block; margin: 50px 0 0 0; max-width: 100%; height: auto;}
.game_InfiniteRush .img2{ display: block; margin: 200px 0 0 0; max-width: 100%; height: auto;}
.game_InfiniteRush .img2 img2{ display: block; margin: 0 auto; max-width: 100%; height: auto;}
@media(max-width: 1600px){
    .game_InfiniteRush .text{ padding: 320px 0 100px 0;}
}
@media(max-width: 767px){
    .game_InfiniteRush .text{ padding: 260px 0 70px 0;}
    .game_InfiniteRush .t1{ font-size: 30px;}
    .game_InfiniteRush .t2{ padding: 30px 0 0 0; font-size: 18px;}
    .game_InfiniteRush .t3{ padding: 20px 0 0 0; font-size: 12px;}
    .game_InfiniteRush img{ margin: 30px 0 0 0;}
}