@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Thai:wght@100;200;300;400;500;600;700&family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Roboto:ital,wght@0,100..900;1,100..900&family=Stick+No+Bills:wght@200..800&display=swap');
*, *::before, *::after {box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box;}

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, input, select, textarea, button, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, header, footer, hgroup, menu, nav, output, 
ruby, section, summary, time, mark, audio, video {margin: 0; padding: 0; vertical-align: baseline; border: 0;}
article, aside, hgroup, header, footer, figure, figcaption, nav, section,time, mark, canvas, video, audio, details, summary {display: block;}

html {
/* Prevent font scaling in landscape */
-webkit-text-size-adjust: none; /*Chrome, Safari, newer versions of Opera*/
-moz-text-size-adjust: none; /*Firefox*/
-ms-text-size-adjust: none; /*Ie*/
-o-text-size-adjust: none; /*old versions of Opera*/
}

html {width: 100%; height: 100%; font-size: 62.5%; scroll-behavior: smooth;}
body {width: 100%; height: 100%; font-size: 1.4rem; color: #000; font-weight: 400; line-height: 1.1; text-align: center; font-family: 'IBM Plex Sans Thai', sans-serif; background:#000;}
menu, ol, ul, li {list-style: none; list-style-image: none; vertical-align: top;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after, q:before, q:after {content: none;}
table {table-layout: fixed; word-break: break-all; white-space: pre-wrap; border-collapse: collapse; border-spacing: 0;}
table caption {display: none;}
ul {font-size: 0;}
li {font-size: 1.6rem; letter-spacing: 0;}
img {line-height: inherit; vertical-align: top; -ms-interpolation-mode: bicubic !important; max-width:100%;}
h1, h2, h3, h4, h5, h6 {color: #fff; font-weight: 700;  font-family: 'IBM Plex Sans Thai';}
a {color: #fff; font-weight: 400; text-decoration: none; font-family: 'IBM Plex Sans Thai'; display: inline-block; outline: none; cursor: pointer; transition:all ease-in-out 0.2s;}
a:focus {outline: none;}

.mobile {display:none;} 
.s_link {position:absolute; left:0; bottom:0; right:0; top:0; text-indent:-99999px; z-index:10; background:#ffffff; opacity: 0; filter: alpha(opacity=0); font-size:0;}

.inner {max-width:1200px; margin-left:auto; margin-right:auto;}
.dst {display:table; width:100%; height:100%;}
.dstc {display:table-cell; vertical-align: middle;}

.cha {position:absolute; animation-fill-mode: forwards !important; /* opacity:0; */ } 
.obj {position:absolute;}
.light {position:absolute; background:url('/images/common/event/2025/hydra/ef_line.png') center center no-repeat; top:-48.7rem; left:0; right:0; height:57.4rem; background-size:auto 100%;}
.light > img {position:absolute; max-width:none; left:50%; top:0; transform:translate(-50% , 0);}
.animated .light > img {animation: vibrate-2 0.3s 4;}
.animated .light > img:nth-child(2) {animation-delay:0.4s;}

.sc02_ef {/* top:-10.6%; */ top:-1126px; left:50%; /* width:83.37%; */ position:absolute; opacity:0; z-index:-1; transform: translate(-80%, 0);}
.sc02_ef img {max-width:none;}
.smoke {animation: smoke 20s 0.4s linear infinite; position: absolute; width: 780px; height: 640px; position:absolute; bottom:0; right:-20px; mix-blend-mode: screen;}
.animated .sc02_ef {opacity:1; animation: fil03 0.7s cubic-bezier(0.230, 1.000, 0.320, 1.000) both;}

.sec_tit {position:relative; z-index:2;     font-family: 'Playfair Display';}
.sec_tit02 { position:relative; z-index:2;}

.cha03 {right:0; bottom:0; z-index: 3; max-width:1200px; width:46.7%}
.animated .cha03 {animation: fir 0.7s cubic-bezier(0.230, 1.000, 0.320, 1.000) both;}

.cha04 {left:-8.4%; bottom:-9.4rem;}
.animated .cha04 {opacity:1; animation: fil 0.7s cubic-bezier(0.230, 1.000, 0.320, 1.000) both;}

.scratch {position:absolute; right:-3.6%; top:18.6rem;}
.animated .scratch {animation: slide-bl 0.2s 0.2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;}

.thunder {position:absolute; top:50.5%; transform:translate(0 , -50%); mix-blend-mode: screen; max-height:102%; animation: vibrate-1 0.3s 3; }
.thunder01 {left:0;}
.thunder02 {right:0;}

.animated.thunder {animation: vibrate-1 0.3s 10;}
.animated.thunder02 {animation-delay:0.2s;}

.container {overflow:hidden; position:relative; background:#000000;}
.all_wrap {overflow:hidden;}

header { text-align:left; position:absolute; top:0; left:0; right:0; z-index: 20; padding:4rem 3.6rem 0;}
header .btn_today {transition:none; font-family:'Playfair Display'; position:absolute; top:3rem; right:3rem; width:25.6rem; height:6rem; display:flex; align-items:center; justify-content:center; font-size:17px; font-weight:700; background-repeat:no-repeat; background-position:0 0; background-image:url('/images/common/event/2025/hydra/btn_today.png'); color:#ffffff; background-size:100% auto; }
header .btn_today span {filter: drop-shadow(0 0.2rem 0.4rem rgba(0, 0, 0, 1)) drop-shadow(0 0.1rem 0.1rem rgba(0, 0, 0, 1)); background: linear-gradient(to bottom, #fff , #aaaaaa); -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; }
header .btn_today span:before {position:relative; top:-2px; margin-right:0.7rem; content:''; display:inline-block; vertical-align:middle; width:2.2rem; height:1.6rem; background-repeat:no-repeat; background-position:0 0; background-image:url('/images/common/event/2025/hydra/btn_today_close.png'); background-size:100% auto;}
header .btn_today:hover {background-position:0 -6rem;}
header .btn_today:hover span {background: linear-gradient(to bottom, #fff , #ccaaff);}
header .btn_today:hover span:before {background-position:0 -1.6rem;}

header .nation_wrap {position:absolute; right:29rem; top:3.6rem;}
header .nation_wrap:before, header .nation_wrap:after {content:''; display:block; position:absolute; left:50%; transform:translate(-50% , 0); width:4.8rem; height:0.6rem; background:url('/images/common/event/2025/hydra/obj_nation.png') 0 0 no-repeat; background-size:100% auto;}
header .nation_wrap:before {top:-0.6rem;}
header .nation_wrap:after {bottom:-0.6rem; transform:translate(-50% , 0) scaleY(-1);}
header .nation_wrap a {padding-bottom:2px; transition:none; font-family:'Playfair Display'; font-size:17px; text-transform:uppercase; font-weight:700; width:12.1rem; height:4.8rem; text-align:center; display:flex; align-items:center; justify-content:center; background-repeat:no-repeat; background-position:0 0; background-image:url('/images/common/event/2025/hydra/bg_nation.png'); background-size:100% auto;}
header .nation_wrap a img {top:1px; margin-right:2px; position:relative; z-index:1;}
header .nation_wrap a span {position:relative; z-index:1; background: linear-gradient(to bottom, #aaa, #fff, #aaa); -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important;}
header .nation_wrap .list {display:none;}
header .nation_wrap a:hover {background-position:0 -4.8rem;}
header .nation_wrap a:hover span {background: linear-gradient(to bottom, #dd99ff, #fff, #dd99ff); }

.item_wrap {position:relative;  z-index:4; padding-top:3rem;}
.item_wrap .swiper-pagination {position:relative; margin-top:2rem;}
.item_wrap .swiper-pagination-bullet {padding-top:2px; border-radius: 0; z-index:1; font-size:16px; color:#999999; font-weight:600; letter-spacing:0.06em; position:relative; width:8.2rem; height:3.2rem; display:inline-flex; align-items:center; justify-content:center; margin:0 1px !important; background:none; opacity:1 !important;}
.item_wrap .swiper-pagination-bullet span {background: linear-gradient(to bottom, #fff, #999); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.item_wrap .swiper-pagination-bullet-active {background:url('/images/common/event/2025/hydra/bg_bullet.png') 0 0 no-repeat;}
.item_wrap .swiper-pagination-bullet-active span {background: linear-gradient(to bottom, #fff, #dd99ff); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.item_wrap .swiper-pagination-bullet:hover {background:url('/images/common/event/2025/hydra/bg_bullet.png') 0 0 no-repeat;}
.item_wrap .swiper-pagination-bullet:hover span {background: linear-gradient(to bottom, #fff, #dd99ff); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.item_wrap .swiper-pagination-bullet-active:hover {background:url('/images/common/event/2025/hydra/bg_bullet.png') 0 0 no-repeat;}
.item_wrap .swiper-pagination-bullet-active:hover span {background: linear-gradient(to bottom, #fff, #dd99ff); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.item_wrap .swiper-button-next, .item_wrap .swiper-button-prev {z-index: 11; background-image:url('/images/common/event/2025/hydra/btn_arr2.png'); background-size:100% auto !important; margin-top:0;  top:50%; margin-top: -4.8rem; font-size:0; display:block !important; background-color:rgba(255, 255, 255, 0); width:7.2rem; height:9.6rem; background-repeat:no-repeat; background-position:0 -9.6rem; position:absolute; cursor:pointer;}
.item_wrap .swiper-button-prev {left:-11.4rem; }
.item_wrap .swiper-button-next {right:-11.4rem; transform:scaleX(-1);}
.item_wrap .swiper-button-next:hover, .swiper-button-prev:hover  {background-position:0 -19.2rem;}
.item_wrap .swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled {background-position:0 0; opacity:1;}
.item_wrap .swiper-container-horizontal>.swiper-scrollbar {display:none; overflow: visible; border-radius:0; background:rgba(0, 0, 0, 0.5); bottom:0; height:3rem; border-top:1px solid rgba(246, 199, 214, 0.5); border-bottom:1px solid rgba(246, 199, 214, 0.5); padding:.4rem 0.2rem;  margin-right:2px; left:20%; width:59%;}

.item_wrap .swiper_wrap {position:relative;} 
.item_wrap .swiper_wrap:before, .item_wrap .swiper_wrap:after {content:''; display:block; position:absolute; width:4.8rem; height:14rem; background-repeat:no-repeat; background-position:0 0; right:-5.4rem;}
.item_wrap .swiper_wrap:before {background-image:url('/images/common/event/2025/hydra/obj_free.png'); top:14.4%;}
.item_wrap .swiper_wrap:after {background-image:url('/images/common/event/2025/hydra/obj_prem.png'); bottom:14.4%;}
.item_wrap .item_list li {width:20%;  position:relative; padding:0 1.8rem;}
.item_wrap .item_list li .con {position:relative;}
.item_wrap .item_list li .con .item_box {position:relative; height:auto !important;}
.item_wrap .item_list li .con .item_box:after {content:''; display: block; padding-bottom: 123.334%;}
.item_wrap .item_list li .con .item {padding-top:43%; position:absolute; top:0; bottom:0; left:0; right:0; background-repeat:no-repeat; background-position:0 0; background-image:url('/images/common/event/2025/hydra/bg_free.png'); background-size:100% auto;}
.item_wrap .item_list li .con .item .pic {overflow:hidden; margin:0 auto; text-align:center; width: 62.5%; position:relative;}
.item_wrap .item_list li .con .item .pic img {max-width:100%;}
.item_wrap .item_list li .con .item .name {font-size:14px; color:#eeccff; font-weight:500; letter-spacing:0.02em; height:42%; width:100%; padding:0 12% 10%; display:table; line-height:1.28;}
.item_wrap .item_list li .con .item .name font {color:#3399ff;}
.item_wrap .item_list li .con .item_box.no_item {position:relative;}
.item_wrap .item_list li .con .item_box.no_item > div {position:absolute; top:0; bottom:0; left:0; right:0; background:url('/images/common/event/2025/hydra/no_item.png') center 60% no-repeat, url('/images/common/event/2025/hydra/bg_free.png') center center no-repeat; background-size:auto, 100% auto;}
.item_wrap .item_list li .con .level {font-variant-numeric: lining-nums; font-family:'Playfair Display'; font-size:25px; color:#aaaaaa; font-weight:900; text-transform:uppercase; letter-spacing:0.02em; height:6rem; display:flex; align-items:center; justify-content:center; background: linear-gradient(to bottom, #aaaaaa, #fff, #aaaaaa); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.item_wrap .item_list li .con .level span { background: linear-gradient(to bottom, #dd99ff, #fff, #dd99ff); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-left:0.6rem;}

.item_wrap .item_list li .con .item_box.prem .item {padding-top:22.5%; background-image:url('/images/common/event/2025/hydra/bg_prem.png');}
.item_wrap .item_list li .con .item_box.prem .item .name {color:#88ffdd;}

.item_wrap .it_tit {position:absolute; top:7.2%; display:inline-block; left:-2rem; font-size:15px; color:#bbffaa; text-transform:uppercase;  transform-origin: top; height:calc((100% - 22%) / 2); width:0.6rem; background:#dd99ff;}
.item_wrap .it_tit:before, .item_wrap .it_tit:after {content:''; display:block; position:absolute; width:3.6rem; height:4.8rem; background-repeat:no-repeat; background-position:0 0; background-image:url('/images/common/event/2025/hydra/ogj_dia_p.png'); left:50%; transform:translate(-50% , 0);}
.item_wrap .it_tit:before {top:-2.4rem;}
.item_wrap .it_tit:after {bottom:-2.4rem;}
.item_wrap .it_tit span {top:50%; left:50%; display:inline-block; transform-origin: center; font-family:'Playfair Display'; position:relative; background:#3b3b39; padding:0 1.2rem; color:#dd99ff; font-size:16.5px; font-weight:500; text-transform:uppercase; letter-spacing:0.1em; vertical-align: middle; height: 1.2rem; line-height: 1.1rem; transform:translate(-50% , -50%) rotate(-90deg); background:#000000;}
.item_wrap .it_tit.pre { top:auto; bottom:5%; background:#44ffcc; }
.item_wrap .it_tit.pre:before, .item_wrap .it_tit.pre:after {background-image:url('/images/common/event/2025/hydra/ogj_dia_g.png');}
.item_wrap .it_tit.pre span {color:#44ffcc;}

footer {width: 100%; padding:10rem 0; z-index: 3;  position:relative; background:#000000;}
footer > img {margin-bottom: 2rem;}
footer .footer {font-size: 14px; color:#aaa; font-family:'Roboto'; position: relative; z-index: 2; letter-spacing:0.02em;}
footer .footer .cs > a {color:#ffee00;}
footer .footer .cs > a:hover {text-decoration: underline;}
footer .footer .copy {margin-top: 0.8rem;}
footer .logo {font-size:0; margin-bottom:2.4rem;}
footer .logo img {vertical-align:middle; margin:0 2rem;}

.btn_top {font-size:14px; color:#aaaaaa; padding-top:3.2rem; font-weight:700; font-family: 'Playfair Display'; text-align:center; transition:none; position:fixed; z-index:11; right:3rem; bottom:3rem; display:block; width:9rem; height:7.2rem; background-image:url('/images/common/event/2025/hydra/btn_top.png'); background-repeat:no-repeat; background-position:0 0; background-size:100% auto;}
.btn_top span {background: linear-gradient(to bottom, #aaa, #fff); -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; filter: drop-shadow(0 0.2rem 0.4rem rgba(0, 0, 0, 1)) drop-shadow(0 0.1rem 0.1rem rgba(0, 0, 0, 1));}
.btn_top:hover {background-repeat:no-repeat; background-position:0 -7.2rem; color:#ffbebe;}
.btn_top:hover span {background: linear-gradient(to bottom, #fff, #ccaaff);}

.fix_sns {position:fixed; z-index:11; left:3rem; bottom:3rem;} 
.fix_sns ul {width: max-content; margin: 0 auto; }
.fix_sns li {margin-bottom:1.2rem;}
.fix_sns li a {display:block; width:60px; height:60px; background-repeat:no-repeat; background-position:0 0; background-size:100% auto; font-size:0; color:transparent; transition:none;}
.fix_sns li.sns_pb a {background-image:url('/images/common/event/2025/hydra/sns_pb.png');}
.fix_sns li.sns_fb a {background-image:url('/images/common/event/2025/hydra/sns_fb.png');}
.fix_sns li.sns_yb a {background-image:url('/images/common/event/2025/hydra/sns_yb.png');}
.fix_sns li.sns_dc a {background-image:url('/images/common/event/2025/hydra/sns_dc.png');}
.fix_sns li.sns_tt a {background-image:url('/images/common/event/2025/hydra/sns_tt.png');}
.fix_sns li.sns_it a {background-image:url('/images/common/event/2025/hydra/sns_it.png');}
.fix_sns li a:hover {background-position:0 -60px;}

.fix_sns .btn_sns {display:none; width:72px; height:72px; background-repeat:no-repeat; background-position:0 0; background-size:100% auto; font-size:0; color:transparent; transition:none; background-image:url('/images/common/event/2025/hydra/bnt_sns.png');}
.fix_sns .btn_sns:hover {background-position:0 -72px;}

/* pop-up */
.dimmed {display:none; width: 100%; height: 100%;  background:#000; opacity: 0.7; filter: alpha(opacity=70); position: fixed; left: 0;  top: 0;     z-index: 99;}
.pop-up {display:none; left:50%; top:50%; width:100%;  max-width:450px; transform:translate(-50%, -50%); position: fixed;  z-index:100;}
.pop-up .pop-layout {position:relative; height:100%;}
.pop-up .pop-layout > h2 {letter-spacing:0.01rem; position:relative; color:#fff; font-size:20px; font-weight:700; padding:1.7rem; background:#689aff; top: -1px;}
.pop-up .pop-close {z-index:1; position:absolute; right: -12.2rem; top: -2.4rem; transition:none; width:7.2rem; height:7.2rem; font-size:0; background-repeat:no-repeat; background-position:0 0; background-image:url('/images/common/event/2025/hydra/pop_close.png'); background-size:100% auto;}
.pop-up .pop-close:hover {background-position:0 -7.2rem;}
.pop-up .video_wrap {position:relative; background: #fff;}
.pop-up .video_wrap:before {content:''; display:block; position:absolute; width: 197.334%; height: 108%; background:url('/images/common/event/2025/hydra/pop_bg02.png') 0 0 no-repeat; background-size:100% 100%; top: 50%; left:50%; transform:translate(-50% , -50%);}
.pop-up .video_wrap:after {content:''; display:block; position:absolute; width: 122.223%; height: 106%; background:url('/images/common/event/2025/hydra/pop_frame02.png') 0 0 no-repeat; background-size:100% 100%; top: 50%; left:50%; transform:translate(-50% , -50%);}

.pop-up .video_wrap .video {overflow: hidden; position: relative;  height: 0;  padding-top: 177.78%; width:100%; z-index:2;}
.pop-up .video_wrap .video iframe {position: absolute; top:0; left: 0; width: 100%; height:100%;}


.section01 {padding: 64rem 0 20.4rem; position:relative; text-align:center;}
.section01:before {content:''; display:block; position:absolute; top:0; bottom:0; left:0; right:0; background:url('/images/common/event/2025/hydra/bg01.jpg') center 0 no-repeat; background-size:cover; background-position: 50% -60px; animation: waveMotion 12s infinite ease-in-out;}
.section01:after {content:''; display:block; position:absolute; left:0; width:400em; top:0; bottom:0; background:url('/images/common/event/2025/hydra/bg01_ef.png') 0 bottom no-repeat; animation: cloudLoop 200s linear infinite alternate; z-index: 2;}
.section01 .img { display:inline-block; position:absolute; z-index:2; left:50%; top: 3.6rem; margin-left: -980px;}
.section01 .img img {max-width:none; width: 1960px;}
.section01 .title { z-index:4; display:inline-block; position:relative; text-align:center; max-width:100%;     animation: flicker-in-1 2s linear both;}
.section01 .title .date {display:block; font-size:34px; font-weight:700; color:#ccbbff; font-family: 'Playfair Display'; text-transform:uppercase; position:absolute; left:0; right:0; bottom:-2.6rem; font-variant-numeric: lining-nums;}
.section01 .title .date font {color:#44ffbb;}
.section01 .inner:before {content:''; display:block; position:absolute; top:0; height:134%; left:0; right:0; background:url('/images/common/event/2025/hydra/ef_blur.png') center 0 no-repeat; z-index:3; }
.section01 .inner:after {content:''; display:block; position:absolute; top:0; bottom:0; left:0; right:0; background:url('/images/common/event/2025/hydra/bg01_shd.png') center bottom no-repeat; z-index:2; }


.section02 {background:url('/images/common/event/2025/hydra/bg02.jpg') center 0 no-repeat; background-size:cover; padding:19rem 0; position:relative; z-index:2;}
.section02:after {content:''; display:block; position:absolute; left:0; width:400em; top:0; bottom:0;  background:url('/images/common/event/2025/hydra/bg02_ef.png') 0 bottom no-repeat; animation: cloudLoop 200s linear infinite;}
.section02 .tit_bp .txt_bp {font-family: 'Playfair Display'; width:91.2rem; height:8rem; background:url('/images/common/event/2025/hydra/bg_battlepass.png') 0 0 no-repeat; margin:0.7rem auto 0; display:flex; align-items:center; justify-content:center; text-transform:uppercase; letter-spacing:1.6rem; font-size:34px; color:#b0b6ff; font-weight:700;}
.section02 .tit_bp .txt_bp span {margin:0 4.2rem;}
.section02 .inner {position: relative; z-index: 1;}

.section02 .desc {position:relative; display:flex; align-items:flex-start; justify-content:center; flex-wrap: wrap; word-break: break-word; margin:5rem auto 0; z-index: 2;}
.section02 .desc > div {width: 50%; flex-grow: 0;}
.section02 .desc .vod {padding:0 4.8rem; position:relative;}
.section02 .desc .vod .img {position:relative;  max-width:504px; max-height: 408px; margin-right: 0; margin-left: auto;}
.section02 .desc .vod .img:after {content: ''; display: block; padding-bottom: 80.953%;}
.section02 .desc .vod .img .vod_link {transition:none; position:absolute; left:0; top:0; height:100%; width:100%; background-repeat:no-repeat; background-position:0 0; background-image:url('/images/common/event/2025/hydra/bg_vod.png');}
.section02 .desc .vod .img .vod_link:hover {background-position:0 100%;}
.section02 .desc .vod .txt {padding-top:6px; font-size:12.5px; color:#ffffff; font-family: 'Playfair Display'; font-weight:600; text-transform:uppercase; letter-spacing:0.24em; position:absolute; bottom:8.4%; left:17.7%; right:17.7%; border-top:1px solid rgba(255, 255, 255, 0.5);}
.section02 .desc .vod .txt span {color:#ee77ff;}
.section02 .desc .con {padding:4.8rem 2.4rem 4.8rem 7.2rem; text-align:left; position:relative;}
.section02 .desc .con:before, .section02 .desc .con:after {content:''; display:block; position:absolute; width:2rem; height:19.2rem; background:url('/images/common/event/2025/hydra/ogj_line_w.png') 0 0 no-repeat; left:-1rem;}
.section02 .desc .con:before {top:-1.2rem;}
.section02 .desc .con:after {transform:scaleY(-1); bottom:-1.2rem;}
.section02 .desc .con .tit {font-size:30.5px; font-weight:700; font-family: 'Playfair Display'; letter-spacing:0.01em; line-height:1.3;}
.section02 .desc .con .tit span {display:block; background: linear-gradient(to right, #ddbbff , #88ffee); -webkit-background-clip: text; -webkit-text-fill-color: transparent;     filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.2));}
.section02 .desc .con .txt {margin-top:3rem; font-size:19px; color:#ffffff; letter-spacing:0.03em; line-height:1.78; text-shadow:0 0.1rem 0.4rem #003388;}
.section02 .desc .con .txt:before {content:''; display:block; position:absolute; top:50%; left:-2.8rem; margin-top:-3.6rem; width:5.6rem; height:7.2rem; background:url('/images/common/event/2025/hydra/obj_dragon.png') 0 0 no-repeat; }
.section02 .pass {margin-top:9.6rem; position:relative;}
.section02 .pass:before {background:url('/images/common/event/2025/hydra/bg_pass.png') center center no-repeat; left:50%; top:50%; content:''; display:block; position:absolute; transform:translate(-50% , -50%); width:72rem; height:72rem; background-size:100% auto; z-index: -2;}
.section02 .pass li {text-align:right;}
.section02 .pass .con {background: linear-gradient(to right, rgba(0, 85, 68, 0.9) , transparent); min-height:26.4rem; max-width:442px; display:inline-flex; align-items:flex-start; justify-content:center; padding:3rem 3.6rem; text-align:left; flex-direction:column; position:relative;}
.section02 .pass .con:before , .section02 .pass .con:after {content:''; display:block; position:absolute; }
.section02 .pass .con:before {width:3.6rem; top:-3.6rem; bottom:-3.6rem;}
.section02 .pass .con:after {width:4.8rem; height:9.6rem; top:50%; margin-top:-4.8rem;}
.section02 .pass .con .tit {font-size:41px; letter-spacing:0.01em; font-weight:800; font-family: 'Playfair Display'; text-transform:uppercase;}
.section02 .pass .con .tit span {background: linear-gradient(to bottom, #44ffcc, #fff); -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important;}
.section02 .pass .con .for {font-size:27px; font-weight:500; color:#44ffcc; font-family: 'Playfair Display'; margin:0.5rem 0 1.2rem; }
.section02 .pass .con .txt {color:#ffffff; font-size:17px; letter-spacing:0.02em; line-height:1.76; }
.section02 .pass .con .txt font {color:#ffff00;}
.section02 .pass li.free {text-align:left; margin-top:9.2rem;}
.section02 .pass li.free .con {border-right:0.6rem solid #dd99ff; background: linear-gradient(to right, transparent , rgba(68, 34, 102, 0.9)); text-align:right; align-items:flex-end;}
.section02 .pass li.free .con:before {right:-2.1rem; background:url('/images/common/event/2025/hydra/ogj_dia_p.png') center 0 no-repeat , url('/images/common/event/2025/hydra/ogj_dia_p.png') center bottom no-repeat;}
.section02 .pass li.free .con:after {background:url('/images/common/event/2025/hydra/ogj_line_p.png') center 0 no-repeat; right:-4.8rem;}
.section02 .pass li.free .con .tit span {background: linear-gradient(to bottom, #dd99ff, #fff);}
.section02 .pass li.free .con .for {color:#dd99ff;}
.section02 .pass li.prem .con {border-left:0.6rem solid #44ffcc;}
.section02 .pass li.prem .con:before {left:-2.1rem; background:url('/images/common/event/2025/hydra/ogj_dia_g.png') center 0 no-repeat , url('/images/common/event/2025/hydra/ogj_dia_g.png') center bottom no-repeat;}
.section02 .pass li.prem .con:after {background:url('/images/common/event/2025/hydra/ogj_line_g.png') center 0 no-repeat; left:-4.8rem;}

.section03 {background:url('/images/common/event/2025/hydra/bg03.jpg') center center no-repeat; background-size:cover; position:relative; padding:17rem 0 21rem;     z-index: 2;}
.section03:before {z-index:1; content:''; display:block; position:absolute; top:0; left:0; right:0; height:0.4rem; background:#fff; box-shadow:inset 0 0 0 0.1rem #dd99ff , 0 0 2rem rgba(221, 0, 255, 0.3);}
.section03:after {z-index:2; content:''; display:block; position:absolute; top:-6.6rem; bottom:0; right:0; left:0; height:11rem; background:url('/images/common/event/2025/hydra/line_lighting01.png') -42rem 0 repeat-x; background-size:auto 100%;}
.section03 .inner {max-width:1152px; position:relative;     z-index: 4;}
.section03 .motion_wrap {position:relative;}
.section03 .motion_wrap .item {box-shadow:0 3rem 6rem rgba(0, 0, 0, 0.2) , inset 0 0 0 1px #fff; width:100%; height:0; position:relative; padding-top:46.875%; z-index: 1; border-radius:4rem; background:url('/images/common/event/2025/hydra/bg_item.jpg') center center no-repeat; background-size:cover;}
.section03 .motion_wrap .item:before {width: 106.424%; height: 113.704%; content:''; display:block; position:absolute; top:50%; left:50%; transform:translate(-50% , -50%); background:url('/images/common/event/2025/hydra/frame_item.png') center center no-repeat; background-size:100% auto}
.section03 .motion_wrap .item > div {width:100% !important; height:100% !important; position:absolute; top:0; left:0; display:none !important;}
.section03 .motion_wrap .item img, .section03 .motion_wrap .item canvas { width:100% !important; height:100% !important; position:absolute; top:0; bottom:0; left:0; right:0;  display:none !important;}
.section03 .motion_wrap .swiper-slide {opacity:0 !important;  }
.section03 .motion_wrap .swiper-slide.swiper-slide-active {opacity:1 !important;  }
.section03 .motion_wrap .swiper-slide.swiper-slide-active .item img, .section03 .motion_wrap .swiper-slide.swiper-slide-active .item canvas {display:block !important;}
.section03 .motion_wrap .swiper-slide.swiper-slide-active .item > div {display:block !important;}
.section03 .motion_wrap .img_3d img {position:relative;}
.section03 .motion_wrap .con .name {font-size:61px; letter-spacing: 0.01em; color:#777788; font-weight:800; text-transform:uppercase; font-family: 'Playfair Display';}
.section03 .motion_wrap .con .name span {background: linear-gradient(to bottom, #fff, #777788);  -webkit-background-clip: text; -webkit-text-fill-color: transparent;     font-variant-numeric: lining-nums;}
.section03 .motion_wrap .con .name span:before { background:linear-gradient(to bottom, #ddaaff, #fff); -webkit-background-clip: text; -webkit-text-stroke: 0.15rem transparent; content: attr(data-text);  position: absolute; z-index: -1;}
.section03 .motion_wrap .info {font-size:19px; color:#dddddd; letter-spacing:0.02em; line-height:1.57; text-shadow:0 0.1rem 0.4rem rgba(0, 0, 0, 0.5); margin:1rem 0 7.6rem;}
.section03 .motion_wrap .info font {color:#ee88ff; }
.section03 .motion_wrap .img_3d {position:absolute; top: 4.2%; right: 2.4%; z-index:1;}

.section03 .stat {position:absolute; bottom: 6.8%; left: 4.2%; z-index: 1;}
.section03 .stat ul {position:relative;}
.section03 .stat li { position:relative;  font-size:14px; letter-spacing:0.04em; font-weight:500; margin-bottom:0.6rem;}
.section03 .stat li > div {display:inline-block; vertical-align:middle;}
.section03 .stat .txt {color:#330077; letter-spacing:0.02em; width:78px; text-align:left; text-transform: capitalize;}
.section03 .stat .num {color:#000000; text-align:right; width:40px;}
.section03 .stat .num font {color:#330077;}
.section03 .stat .graph { height:1px; position:relative;  width:17.8rem;}
.section03 .stat li .bar {width:100%; height:100%; background:rgba(113, 38, 208, 0.3); position:relative;}
.section03 .stat li .bar:before {content:''; display:block; position:absolute; top:0; bottom:0; right:0; width:4px; background:#330077;}
.section03 .stat li .bar .on { height:1.2rem;  display:block; background:url('/images/common/event/2025/hydra/bar.png') 0 0 repeat-x; transform: translate(0, -50%);}
.section03 .stat li .bar .on:before, .section03 .stat li .bar .on:after {content:''; display:block; width:0.4rem; height:1.2rem; position:absolute; top:0; bottom:0; background-size:100% auto !important;}
.section03 .stat li .bar .on:before {background:url('/images/common/event/2025/hydra/bar_l.png') 0 0 no-repeat; left:-0.4rem;}
.section03 .stat li .bar .on:after {background:url('/images/common/event/2025/hydra/bar_r.png') 0 0 no-repeat; right:-0.4rem;}
.section03 .stat li:last-child {margin-bottom:0;}
.section03 .stat li.no_graph {display:flex; align-items:center; justify-content:space-between;}
.section03 .stat li.no_graph .num {width:auto;}

.section03.animated .stat li .bar .on {animation: animate-width cubic-bezier(0.35, 0.95, 0.67, 0.99) 0.4s forwards;}
.section03.animated .stat li:nth-child(2) .bar .on {animation-delay:0.1s;}
.section03.animated .stat li:nth-child(3) .bar .on {animation-delay:0.2s;}
.section03.animated .stat li:nth-child(4) .bar .on {animation-delay:0.3s;}
.section03.animated .stat li:nth-child(5) .bar .on {animation-delay:0.4s;}
.section03.animated .stat li:nth-child(6) .bar .on {animation-delay:0.5s;}
.section03.animated .stat li:nth-child(7) .bar .on {animation-delay:0.6s;}
.section03.animated .stat li:nth-child(8) .bar .on {animation-delay:0.7s;}

.section03.animated:after {animation:fil02 2s cubic-bezier(0.230, 1.000, 0.320, 1.000) both;}

.section03 .swiper-button-next, .section03 .swiper-button-prev {    background-image: none; right:auto; left:-36rem; width: max-content; height: max-content; transition:none; text-align:center;  z-index: 11; margin-top:0;  top:calc(50% + 7.2rem); transform:translate(0 , -50%); font-size:0; display:block !important; background-size:100% !important;  background-color:rgba(255, 255, 255, 0); position:absolute; cursor:pointer;}
.section03 .swiper-button-next:before, .section03 .swiper-button-prev:before {width:21.5rem; height:21.6rem; content:''; display:block; background-repeat:no-repeat; background-position:0 0; background-image:url('/images/common/event/2025/hydra/btn_arr.png'); background-size:100% auto;}
.section03 .swiper-button-next:after, .section03 .swiper-button-prev:after {content:''; display:block; position:absolute; right:-8.3rem; top:50%; width:7rem; height:5.6rem; background:url('/images/common/event/2025/hydra/img_arr.png') 0 0 no-repeat;}
.section03 .swiper-button-next img , .section03 .swiper-button-prev img {position:absolute; top:50%; left:50%; transform:translate(-50% , -50%);}

.section03 .swiper-button-next .name, .section03 .swiper-button-prev .name {font-variant-numeric: lining-nums; font-family:'Playfair Display'; font-size:15px; font-weight:500; letter-spacing:0.02rem; position:absolute; left:50%; bottom:-7.2rem; transform:translate(-50% , 0); width:16.8rem; height:7.6rem; display:flex; align-items:center; justify-content:center; background-image:url('/images/common/event/2025/hydra/btn_arr_naem.png'); background-position: 0 0; background-repeat: no-repeat; background-size:100% auto; }
.section03 .swiper-button-next .name span, .section03 .swiper-button-prev .name span {color: #eee; backdrop-filter: blur(10px); width: 100%; height: 32px; line-height: 31px; text-shadow: 0 0 2px #000;}
.section03 .swiper-button-next:hover:before, .section03 .swiper-button-prev:hover:before {background-position:0 -21.6rem;}
.section03 .swiper-button-next:hover .name, .section03 .swiper-button-prev:hover .name {background-position: 0 -7.6rem;}
.section03 .swiper-button-next:hover .name span, .section03 .swiper-button-prev:hover .name span {color: #fde;}
.section03 .swiper-button-next.swiper-button-disabled, .section03 .swiper-button-prev.swiper-button-disabled {opacity:0; display:none;}
.section03 .swiper-pagination {left:50%; transform:translate(-50% , 0); text-align:center; margin-top:3rem;} 
.section03 .swiper-pagination-bullet {width:4.8rem; height:3.6rem; background-repeat:no-repeat; background-color:rgba(255, 255, 255, 0); background-position:0 0; background-image:url('/images/common/event/2025/hydra/bullet.png');  margin:0 0.6rem; border-radius:0; opacity: 1; background-size:100% auto;}
.section03 .swiper-pagination-bullet-active {background-image:url('/images/common/event/2025/hydra/bullet_on.png');}

.section04 {background:url('/images/common/event/2025/hydra/bg04.jpg') center center no-repeat; background-size:cover; position:relative; padding:18.6rem 0 19.2rem;}
.section04:before {z-index:1; content:''; display:block; position:absolute; top:0; left:0; right:0; height:0.4rem; background:#fff; box-shadow:inset 0 0 0 0.1rem #dd99ff , 0 0 2rem rgba(221, 0, 255, 0.3);}
.section04:after {z-index:2; content:''; display:block; position:absolute; top:-6.6rem; bottom:0; right:0; left:0; height:11rem; background:url('/images/common/event/2025/hydra/line_lighting02.png') 0 0 repeat-x; background-size:auto 100%;}
.section04 .inner {max-width:1380px;}
.section04 .sec_tit {font-size:35px; color:#aaa; line-height:1.23; font-weight:900; text-transform:uppercase; background: linear-gradient(to bottom, #fff 30%, #aaa); -webkit-background-clip: text; -webkit-text-fill-color: transparent; -webkit-text-stroke: 0.2px #bbb;}
.section04 .sec_tit font {background: linear-gradient(to bottom, #fff 30%, #d9f); -webkit-background-clip: text; -webkit-text-fill-color: transparent; -webkit-text-stroke: 0.2px #ecf;}
.section04 .swiper {overflow:hidden;}
.section04 .swiper-scrollbar-drag {background:#d9f; border-radius:0; border-radius:0.8rem;}
.section04 .swiper-scrollbar {display:none;}
.section04.animated:after {animation:fil02 2s cubic-bezier(0.230, 1.000, 0.320, 1.000) both;}

.section05 {background:url('/images/common/event/2025/hydra/bg05.jpg') center center no-repeat; background-size:cover; position:relative; padding:17rem 0 13.6rem;}
.section05:before {z-index:1; content:''; display:block; position:absolute; top:0; left:0; right:0; height:0.4rem;     background: linear-gradient(to bottom, #aaaaaa, #fff); box-shadow:inset 0 0 0 0.1rem #cccccc , 0 0 2rem rgba(153, 1535, 153, 0.3);}
.section05:after {content:''; display:block; position:absolute; left:0; width:400em; top:0; bottom:0;  background:url('/images/common/event/2025/hydra/bg05_ef.png') 0 bottom no-repeat; animation: cloudLoop 200s linear infinite;}
.section05 .inner {max-width:none; position:relative; z-index:2;}
.section05 .sec_tit {letter-spacing: 0.01em; font-size:61px; color:#777788; font-weight:800; text-transform:uppercase; font-family: 'Playfair Display';}
.section05 .sec_tit span {background: linear-gradient(to bottom, #fff, #777788);  -webkit-background-clip: text; -webkit-text-fill-color: transparent;     font-variant-numeric: lining-nums;}
.section05 .sec_tit span:before { background:linear-gradient(to bottom, #55ffee, #fff); -webkit-background-clip: text; -webkit-text-stroke: 0.15rem transparent; content: attr(data-text);  position: absolute; z-index: -1;}
.section05 .sec_tit br {display:none;}
.section05 .sec_tit02 {font-size:19px; color:#cccccc; letter-spacing:0.02em; line-height:1.57; margin:1rem 0 3.2rem;}
.section05 .shop_area ul {font-size:0;}
.section05 .shop_area ul li {animation: float 8s ease-in-out infinite; height:62.4rem; display:inline-block; vertical-align:top; margin:4.4rem 1.2rem; width:36rem; position:relative;}
.section05 .shop_area ul li:before {content:''; display:block; width:100%; height:1.7rem; background-repeat:no-repeat; background-position:0 0;}
.section05 .shop_area ul li:after {content:''; display:block; position:absolute; width:5.6rem; height:7.2rem; background:url('/images/common/event/2025/hydra/obj_dragon.png') 0 0 no-repeat; top:-3.2rem; left:50%; margin-left:-2.8rem;}
.section05 .shop_area .con {width:100%; /*  height:60.7rem; */ height:0; overflow:hidden; background-repeat:no-repeat; background-position:0 0; }
.section05 .shop_area .con .txt {font-variant-numeric: lining-nums; width:100%; line-height:1.3; font-family: 'Playfair Display'; font-size:24px; color:#fff; font-weight:700; height:28%; display:table; padding:0 14%;}
.section05 .shop_area .con .txt .dstc {vertical-align:top; padding-top:20%;}
.section05 .shop_area .con .txt font {color:#ffff33;}

.section05 .shop_area .bn01 {animation-delay:0.3s;}
.section05 .shop_area .bn01:before {background-image:url('/images/common/event/2025/hydra/flag_t01.png');}
.section05 .shop_area .bn01 .con {background-image:url('/images/common/event/2025/hydra/flag_b01.png');  transition: all ease-in-out 0.5s 0.2s;}
.section05 .shop_area .bn02 {animation-delay:0.6s;}
.section05 .shop_area .bn02:before {background-image:url('/images/common/event/2025/hydra/flag_t02.png');}
.section05 .shop_area .bn02 .con {background-image:url('/images/common/event/2025/hydra/flag_b02.png'); transition: all ease-in-out 0.5s 0.3s;}
.section05 .shop_area .bn02 .con .txt {padding-bottom:8.4%;}
.section05 .shop_area .bn03 {animation-delay:0.9s;}
.section05 .shop_area .bn03:before {background-image:url('/images/common/event/2025/hydra/flag_t03.png');}
.section05 .shop_area .bn03 .con {background-image:url('/images/common/event/2025/hydra/flag_b03.png'); transition: all ease-in-out 0.5s 0.4s;}
.section05 .shop_area .bn04 {animation-delay:1.2s;}
.section05 .shop_area .bn04:before {background-image:url('/images/common/event/2025/hydra/flag_t04.png');}
.section05 .shop_area .bn04 .con {background-image:url('/images/common/event/2025/hydra/flag_b04.png'); transition: all ease-in-out 0.5s 0.5s;}

.animated .shop_area .con {height:60.7rem;}

/**** ie *****/
.ie .item_wrap .swiper-pagination {left:0; right:0;}

@media screen and (max-width: 2400px) {	

}

@media screen and (max-width: 2000px) {	
.section03 .swiper-button-next, .section03 .swiper-button-prev {left:-32rem;}
.cha03 {right:-3%;}
.cha04 {left:-15.4%;}
}

@media screen and (max-width: 1800px) {
.section03 .inner {max-width:1000px;}	
.section03 .swiper-button-next, .section03 .swiper-button-prev {left:-28rem;}
.section03 .swiper-button-next:before, .section03 .swiper-button-prev:before {width:18.5rem; height:18.6rem; }
.section03 .swiper-button-next:hover:before, .section03 .swiper-button-prev:hover:before {background-position: 0 -18.6rem;}
.section03 .swiper-button-next:after, .section03 .swiper-button-prev:after {width:6.8rem; height:5.4rem; background-size:100% auto; right:-7.2rem;}
	
}	

@media screen and (max-width: 1668px) {
.item_wrap {padding-left:9.6rem; padding-right:7.2rem;}
.item_wrap .swiper-button-next {right:-4.8rem;}
.item_wrap .swiper-button-prev {left:-4.8rem;}
}
 
@media screen and (max-width: 1600px) {

.swiper-button-prev {left:3.6rem;}
.swiper-button-next {right:0;}
}


@media screen and (max-width: 1560px) {	
.item_wrap .swiper-button-next {right:-3.6rem;}
.item_wrap .swiper-button-prev {left:-3.6rem;}	
.item_wrap .item_list li {padding:0 1.2rem;}

.section03 .swiper-button-next, .section03 .swiper-button-prev {left:-18rem;}
.section03 .swiper-button-next:before, .section03 .swiper-button-prev:before {width:12.5rem; height:12.55rem;}
.section03 .swiper-button-next:hover:before, .section03 .swiper-button-prev:hover:before {background-position:0 -12.55rem;}
.section03 .swiper-button-next:after, .section03 .swiper-button-prev:after {width:4rem; height:3.2rem; right: -3.6rem;}

.section05 .shop_area ul li {width:28rem; margin:4.4rem 1rem; height: 48.5rem;}
.section05 .shop_area ul li:before {height:1.3rem; background-size:100% auto;}
.section05 .shop_area .con {background-size:100% auto; }
.section05 .shop_area .con .txt {font-size:18.5px;}

.animated .shop_area .con {height:47.2rem;}

.sc02_ef {animation:none !important; top: -4%; left: 72.8%;}
.sc02_ef img {width:772px;}

.cha04 {display:none;}
}
	
@media screen and (max-width: 1440px) {	
header .bi img {width:200px;}
.inner {max-width:100%; padding-left:3rem; padding-right:3rem;}
.cha03 {width: 36%;}

.section02 .desc .vod .img .vod_link {background-size:100% auto;}

.item_wrap .swiper-button-next {right:-1.2rem;}
.item_wrap .swiper-button-prev {left:-1.2rem;}
}

@media screen and (min-width: 1361px) {
.fix_sns ul {display:inline-block !important;}	
}	

@media screen and (max-width: 1360px) {	
.section03 {padding-bottom: 24rem;}	
.section03 .stat {position:relative; bottom:auto; left:auto; text-align:left; min-height: auto; background: #bbf; margin:4.8rem auto 0; padding:3rem 3.6rem; border-radius: 4rem;}
.section03 .page02 .stat {left:auto; text-align:left;}
.section03 .stat .graph {width:calc(100% - 126px);}
.section03 .stat li {margin-bottom: 0.8rem;}
.section03 .stat li:last-child {margin-bottom: 0;}
.section03 .swiper-button-next, .section03 .swiper-button-prev { top: auto;  bottom:-15rem;  left:0; right:auto; transform: none;}
.section03 .swiper-button-next:after, .section03 .swiper-button-prev:after {display:none;}

.thunder {top: 0%; transform: none; display: none;}
.thunder.thunder02 {top: auto; bottom: -3rem; right: -19rem;}

.fix_sns .btn_sns {display:block;}
.fix_sns .btn_sns.open {background-position:0 -72px;}
.fix_sns ul {display:none;}
}

@media screen and (max-width: 1280px) {	
.cha03 {display:none;}	
	
.section04 .swiper-scrollbar {display:block; height:2rem; bottom:-4rem;  background:#000; border:0.2rem solid #dd99ff; position:relative; border-radius:1.5rem;    overflow:hidden;    z-index: 1; padding:0.3rem;}
.item_wrap .swiper-pagination {display:none;}
.item_wrap {padding:0 5.6rem;}

.item_wrap .item_list li .con .item .name br {display:none;}
.section04 .swiper-button-next, .section04 .swiper-button-prev {display:none !important;}
.pop-up {width: 50%;}
}

@media screen and (max-width: 1150px) {
}
	
@media screen and (max-width: 1023px) {
header {padding-left:3rem; padding-right:3rem;}	
.item_wrap .item_list .name {padding:0 7%;}

.light > img {height:100%;}

.cha03 {right:0;}

.section01 {padding:79% 0 22%;}
.section01:before {background-position:center 0;}
.section01 .img {top:7.4%; margin-left:-100%;}
.section01 .img img {width:133%;}

.sc02_ef {display:none;}
.section02 .desc .con {padding:0 3rem; margin-top:15.6rem;}
.section02 .desc .vod .img {margin:0 auto;}
.section02 .desc {display:block;}
.section02 .desc > div {width:auto;}
.section02 .desc .con:before, .section02 .desc .con:after {top:-7.5rem; left:auto; background-size: 100% auto;}
.section02 .desc .con:before {left:calc((100% - 48rem) / 2);  transform: rotate(-90deg);  transform-origin: top; }
.section02 .desc .con:after {right:calc((100% - 48rem) / 2);  transform: rotate(90deg);  transform-origin: top;}
.section02 .desc .con .txt:before {left:50%; top:-7.8rem; margin-left:-2.8rem; background-size: 100% auto;}
.section02 .pass {padding:0 3rem;}
.section02 .pass .con {width: 60%;}
.section02 .desc .vod .txt {left: calc((100% - 40rem) / 2); right: calc((100% - 40rem) / 2);}

.section02 .tit_bp > img {width:56rem;}
.section02 .tit_bp .txt_bp {font-size:26px; width:68rem; height:6rem;  background-size:100% auto;}

.section05 .sec_tit br {display:block;} 
}

/*** max-width 768 ***/
@media screen and (max-width: 768px) {
html {font-size:32%;}	
.mobile {display:block;}
.btn_top {font-size:2rem; padding-top: 3.6rem; width:50px; height:40px;}
.btn_top:hover {background-position:0 -40px;}

header .bi img {width:24rem;}
header .btn_today {font-size:2.1rem; padding-bottom:2px;}
header .btn_today span:before {top:0;}
header .nation_wrap a {font-size:2.3rem;}
header .nation_wrap a img {width:12px;}

.light {height:31rem; top:-27rem;}
.thunder01 {left: -24%;}
.thunder02 {right:-24%;}

.fix_sns li a {width:45px; height:45px;}
.fix_sns li a:hover {background-position:0 -45px;}
.fix_sns .btn_sns {width:50px; height:50px; background-size:100% auto;}
.fix_sns .btn_sns:hover , .fix_sns .btn_sns.open {background-position:0 -50px;}

.item_wrap .item_list li .con .item .name {font-size:1.9rem;}
.item_wrap .item_list li .con .item .name br {display:none;}
.item_wrap .item_list li .con .level {font-size:3.3rem;}
.item_wrap .it_tit:before, .item_wrap .it_tit:after {background-size:100% auto;}
.item_wrap .it_tit span {font-size:2rem;}
.item_wrap .swiper_wrap:before, .item_wrap .swiper_wrap:after {background-size:100% auto;}

footer > img {width:100px; }
footer .footer {position: relative; z-index: 2; font-size:2.1rem;}
footer .logo img {max-width:16.8rem;}

.section01 {padding-top:70%;}
.section01 .title .date {font-size:3.4rem;}
.section01:after {    background-size: auto 100%;}
.section01 .inner:after {background-size:100% auto;}

.section02 .desc .con {padding: 0 2rem;}
.section02 .desc .con .tit {font-size:4.05rem; line-height: 1.1;}
.section02 .desc .con .txt {font-size:2.8rem; line-height:1.5;}
.section02 .pass .con:before, .section02 .pass .con:after {background-size:100% auto !important;}
.section02 .tit_bp .txt_bp {font-size:3rem;}
.section02 .tit_bp .txt_bp span {margin:0 2rem;}
.section02 .pass .con {width: 100%;}
.section02 .pass .con .tit {font-size:5.3rem;}
.section02 .pass .con .for {font-size:3.6rem;}
.section02 .pass .con .txt {font-size:2.6rem;}
.section02:after {background-size: auto 100%;}
.section02 .desc .vod .txt {font-size:1.9rem; left: calc((100% - 40rem) / 2); right: calc((100% - 40rem) / 2);}

.section03 .motion_wrap .con .name {font-size:5.5rem;}
.section03 .motion_wrap .info {font-size:2.8rem;}
.section03 .stat li {font-size:2.3rem;}
.section03 .swiper-button-next, .section03 .swiper-button-prev {left:5rem;}
.section03 .swiper-button-next .name, .section03 .swiper-button-prev .name {font-size:2.3rem; width:24.1rem; height:10.9rem;}
.section03 .swiper-button-next .name span, .section03 .swiper-button-prev .name span {height: 24px; font-size: 2.4rem; line-height: 4.4rem;}
.section03 .swiper-button-next:hover .name, .section03 .swiper-button-prev:hover .name {background-position: 0 -10.9rem;} 
.section03 .motion_wrap .img_3d img {width: 64px !important; height: 50px !important;}

.section04 .sec_tit {font-size:4.3rem; font-weight: 800; margin-bottom: 1.2rem;}

.section05:after {background-size: auto 100%;}
.section05 .sec_tit {font-size: 5.7rem;}
.section05 .sec_tit02 {font-size:2.8rem; line-height:1.3;}

.section05 .shop_area ul li {width:31rem; margin: 2.4rem 1rem; height:276px;}
.section05 .shop_area ul li:before {height:1.5rem;}
.section05 .shop_area .con .txt {padding:0 10%; font-size:2.2rem;}
.section05 .shop_area ul li:after {background-size:100% auto;}
.section05 .shop_area .con .txt .dstc {padding-top:12%;}

.animated .shop_area .con {height:52.3rem;}
}

@media screen and (max-width: 560px) {
	
}
	
@media screen and (max-width: 500px) {

.sec_tit , .sec_tit02 {word-break: break-word;}
.sec_tit br , .sec_tit02 br {display:none;}
}	

@media screen and (max-width: 360px) {
.section03 .motion_wrap .con .name {font-size:4.6rem;}
}

@media screen and (min-width:769px) and (max-height: 940px) {
.pop-up {width: 18.386%;}
} 
@keyframes fil {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
     filter: blur(40px);
    opacity: 0;
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
     filter: blur(0);
    opacity: 1;
  }
}

@keyframes fil02 {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fil03 {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-180%, 0, 0);
    transform: translate3d(-180%, 0, 0);
     filter: blur(40px);
    opacity: 0;
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(-80%, 0, 0);
    transform: translate3d(-80%, 0, 0);
     filter: blur(0);
    opacity: 1;
  }
}


@keyframes fir {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
     filter: blur(40px);
    opacity: 0;
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
     filter: blur(0);
    opacity: 1;
  }
}

@keyframes cloudLoop {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-50%, 0, 0);
  }
} 

@keyframes animate-width {
    0% {
        width: 0;
        opacity: 0;
    }

    100% {
        visibility: visible;
        opacity: 1;
    }
}

@keyframes smoke {
    0%{
        width: 0;
        height: 0;
        opacity: 0;
        bottom: 20px;
    }
    2%{
    	width: 800px;
        height: 640px;
        opacity: 1;
        bottom: 30px;
        right: -2px;
    }
    10%{
        width: 720px;
        bottom: 10px;
        right: 2px;
    }
    30%{
    	width: 760px;
        opacity: 0;
        bottom: 10px;
        right: -2px;
    }
    40%{
    	width: 800px;
        height: 640px;
        opacity: 1;
        bottom: 30px;
        right: -2px;
    }
    50%{
        width: 720px;
        bottom: 10px;
        right: 2px;
    }
    60%{
    	width: 760px;
        opacity: 0;
        bottom: 10px;
        right: -2px;
	}
    70%{
    	width: 800px;
        height: 640px;
        opacity: 1;
        bottom: 30px;
        right: -2px;
    }
    80%{
        width: 720px;
        bottom: 10px;
        right: 2px;
    }
    100%{
    	width: 760px;
        opacity: 0;
        bottom: 10px;
        right: -2px;
	}
}

@keyframes vibrate-2 {
   0% {
    -webkit-transform: translate(-50% , 0);
            transform: translate(-50% , 0);
  }
  20% {
    -webkit-transform: translate(calc(-50% - 2px) , 8px);
            transform: translate(calc(-50% - 2px) , 8px);
  }
  40% {
    -webkit-transform: translate(calc(-50% - 2px) , -8px);
            transform: translate(calc(-50% - 2px) , -8px);
  }
  60% {
    -webkit-transform: translate(calc(-50% + 2px) , 8px);
            transform: translate(calc(-50% + 2px) , 8px);
  }
  80% {
    -webkit-transform: translate(calc(-50% + 2px) , -8px);
            transform: translate(calc(-50% + 2px) , -8px);
  }
  100% {
    -webkit-transform: translate(-50% , 0);
            transform: translate(-50% , 0);
  }
}

@keyframes realWaveMotion {
      0%   { transform: translateY(0px) rotate(0deg) scale(1); }
      10%  { transform: translateY(-3px) rotate(0.5deg) scale(1.01); }
      20%  { transform: translateY(-6px) rotate(1deg) scale(1.02); }
      30%  { transform: translateY(-4px) rotate(0.5deg) scale(1.01); }
      40%  { transform: translateY(0px) rotate(0deg) scale(1); }
      50%  { transform: translateY(4px) rotate(-0.5deg) scale(0.99); }
      60%  { transform: translateY(6px) rotate(-1deg) scale(0.98); }
      70%  { transform: translateY(4px) rotate(-0.5deg) scale(0.99); }
      80%  { transform: translateY(0px) rotate(0deg) scale(1); }
      90%  { transform: translateY(-2px) rotate(0.3deg) scale(1.005); }
      100% { transform: translateY(0px) rotate(0deg) scale(1); }
    }

 @keyframes waveMotion {
      0%   { transform: translateY(0px) scale(1.02); }
      25%  { transform: translateY(-5px) scale(1.03); }
      50%  { transform: translateY(0px) scale(1.02); }
      75%  { transform: translateY(-6px) scale(1); }
      100% { transform: translateY(0px) scale(1.02); }
    }


@keyframes flutter {
      0% { transform: rotateZ(0deg) skewY(0deg); }
      25% { transform: rotateZ(2deg) skewY(2deg); }
      50% { transform: rotateZ(0deg) skewY(0deg); }
      75% { transform: rotateZ(-2deg) skewY(-2deg); }
      100% { transform: rotateZ(0deg) skewY(0deg); }
    }



@keyframes vibrate-1 {
  0% {
    -webkit-transform: translate(0 , -50%);
            transform: translate(0 , -50%);
  }
  20% {
    -webkit-transform: translate(-2px, calc(-50% + 2px));
            transform: translate(-2px, calc(-50% + 2px));
  }
  40% {
    -webkit-transform: translate(-2px, calc(-50% - 2px));
            transform: translate(-2px, calc(-50% - 2px));
  }
  60% {
    -webkit-transform: translate(2px, calc(-50% + 2px));
            transform: translate(2px, calc(-50% + 2px));
  }
  80% {
    -webkit-transform: translate(2px, calc(-50% - 2px));
            transform: translate(2px, calc(-50% - 2px));
  }
  100% {
    -webkit-transform: translate(0 , -50%);
            transform: translate(0 , -50%);
  }
}

@keyframes slide-bl {
 
  0% {
    -webkit-transform: translateY(-100%) translateX(100%);
            transform: translateY(-100%) translateX(100%);
  }
  100% {
    -webkit-transform: translateY(0) translateX(0);
            transform: translateY(0) translateX(0);
  }
}

@keyframes float {
  0% {
    transform: translatey(0px);
  }
  6% {
    transform: translatey(-2rem);
  }
  12% {
    transform: translatey(0px);
  }
  100% {
    transform: translatey(0px);
  }
}


@keyframes flicker-in-1 {
    0% {
        opacity: 1;
    }

    4% {
        opacity: 0;
    }

    8% {
        opacity: 1;
    }

    12% {
        opacity: 0;
    }

    14% {
        opacity: 1;
    }

    16% {
        opacity: 1;
    }

    20% {
        opacity: 0.5;
    }

    22% {
        opacity: 1;
    }

    24% {
        opacity: 0;
    }

    28% {
        opacity: 1;
    }

    30% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}