@charset "utf-8";
@import url("https://use.typekit.net/xav4tra.css");
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&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: 'proxima-soft', 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: 'proxima-soft';}
a {color: #fff; font-weight: 400; text-decoration: none; font-family: 'proxima-soft'; display: inline-block; outline: none; cursor: pointer; transition:all ease-in-out 0.2s;}
a:focus {outline: none;}

/* slick */
.slick-slider {position: relative; display: block; box-sizing: border-box;  -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -khtml-user-select: none;
-ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent;}
.slick-list {position: relative; display: block; overflow: hidden; margin: 0; padding: 0;}
.slick-list:focus {outline: none;}
.slick-list.dragging{cursor: pointer; cursor: hand;}
.slick-slider .slick-track,
.slick-slider .slick-list {-webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0); transition-delay: 10ms;}
.slick-track {position: relative; top: 0; left: 0; display: block;}
.slick-track:before, .slick-track:after {display: table; content: '';}
.slick-track:after {clear: both;}
.slick-loading .slick-track {visibility: hidden;}
.slick-slide {display: none; float: left; height: 100%; min-height: 1px;}
[dir='rtl'] .slick-slide {float: right;}
.slick-slide img {display: block;}
.slick-slide.slick-loading img {display: none;}
.slick-slide.dragging img {pointer-events: none;}
.slick-initialized .slick-slide {display: block;}
.slick-loading .slick-slide {visibility: hidden;}
.slick-vertical .slick-slide {display: block; height: auto; border: 1px solid transparent;}
.slick-arrow.slick-hidden {display: 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:1500px; 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;}
.cha_sc05 {top:18rem; right:13rem;}
.cha_sc05:before {animation: flicker-in-1 25s linear infinite; content:''; display:block; position:absolute; width: 86.115%; height: 52.924%; top: -12%; left: -3%; background:url('/images/common/event/2025/astel/cha_sc05_eft.png') 0 0 no-repeat; background-size:100% auto;}
.cha_sc06 {bottom:0; left:25rem;}
 
.animated .cha_sc05 {opacity:1; animation: fir 0.7s cubic-bezier(0.230, 1.000, 0.320, 1.000) both;}
.animated .cha_sc06 {opacity:1; animation: fil 0.7s cubic-bezier(0.230, 1.000, 0.320, 1.000) both;}
 
.container {overflow:hidden; position:relative; background:#b3a5ff;}
.all_wrap {overflow:hidden;}
.all_wrap > div:after, .all_wrap > div:before {content:''; display:block; position:absolute; }
.all_wrap > div:before {top:0; left:0; right:0; height:0.6rem; background: linear-gradient(to right, #3039f7, #b3a5ff, #6f62ed, #73d6ff, #3ff5f0, #9356df, #ffbbfd, #ce32f6, #3039f7); z-index:1;}
.all_wrap > div:after {content:''; display:block; position:absolute; left:0; width:400em; top:0; height:4.5rem; margin-top:-2.25rem; background:url('/images/common/event/2025/astel/line_wave.png') 0 center repeat-x; background-size:auto 100% !important; animation: cloudLoop 100s linear infinite alternate; z-index: 2;}

.bg_vod {width: 100%; position: absolute; top: 0; left: 0; bottom:0; right:0; overflow:hidden;}
.bg_vod:after {content:''; display:block; position:absolute; top: 0; left: 0; bottom:0; right:0; background-image:url('/images/common/event/2025/astel/cover.png'); background-position:center center; background-repeat: no-repeat; background-size:cover;}
.bg_vod video {min-width: 103%; min-height: 103%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

header { text-align:left; position:absolute; top:0; left:0; right:0; z-index: 20; padding:5rem 4.8rem 0;}
header .btn_today {transition:all ease-in-out 0.2s; font-size:0; position:absolute; top:4rem; right:4rem; padding:1.2rem; border-radius:3.5rem; background: linear-gradient(to right, rgba(255, 163, 248, 0.33), rgba(14, 116, 255, 0.33)); box-shadow:0 3px 0 rgba(26, 17, 126, 0.4);}
header .btn_today:before {width: auto; height: auto; top: 0; bottom: 0; left: 0; right: 0; content: ""; display: block; position: absolute; inset: 0; border-radius: 3.5rem; padding: 1px; background: linear-gradient(to right, #3039f7, #b3a5ff, #6f62ed, #73d6ff, #3ff5f0, #9356df, #ffbbfd, #ce32f6, #3039f7); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude;}
header .btn_today span {position:relative; background:url('/images/common/event/2025/astel/bg_today.jpg') center center no-repeat; background-size:100% auto; border-radius:3.5rem; padding:0 2rem 0 1.8rem; display:inline-flex; height:4.8rem; align-items:center; justify-content:center; font-size:17px; font-weight:900; color:#3f4eaf; text-transform:uppercase; text-shadow:0 1px 0 rgba(255, 255, 255, 0.8); box-shadow:0 0 3px rgba(30, 0, 73, 0.4);}
header .btn_today span:before {content:''; display:inline-block; vertical-align:middle; position:relative; width:16px; height:18px; background:url('/images/common/event/2025/astel/img_note.png') 0 0 no-repeat; margin-right:1rem;}
header .btn_today span:after {width: auto; height: auto; top: 0; bottom: 0; left: 0; right: 0; content: ""; display: block; position: absolute; inset: 0; border-radius: 3.5rem; padding: 1px; background: linear-gradient(to right, #3039f7, #b3a5ff, #6f62ed, #73d6ff, #3ff5f0, #9356df, #ffbbfd, #ce32f6, #3039f7); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude;}
header .btn_today font:before, header .btn_today font:after, header .btn_today:after {content:''; display:block; position:absolute; left:50%; top:-3.6rem; margin-left:-3.1rem; width:6.3rem; height:4.6rem; background-repeat:no-repeat; background-position:0 0; background-size:100% auto;}
header .btn_today:after {background-image:url('/images/common/event/2025/astel/deco_today01.png'); top:-2.5rem; }
header .btn_today font:before {background-image:url('/images/common/event/2025/astel/deco_today02.png');}
header .btn_today font:after {background-image:url('/images/common/event/2025/astel/deco_today03.png');}
header .btn_today:hover {background:url('/images/common/event/2025/astel/bg_today.jpg') center center no-repeat; background-size:100% auto;}
header .btn_today:hover span {background:none; color:#ff66fa;}
header .btn_today:hover font:before, header .btn_today:hover font:after, header .btn_today:hover:after {animation: up02 0.7s;}
header .btn_today:hover font:before {animation-delay:0.2s;}
header .btn_today:hover font:after {animation-delay:0.1s;}

header .nation_wrap {position:absolute; right:30.6rem; top:4.3rem;}
header .nation_wrap a {padding-bottom:2px; transition:none; font-size:20px; text-transform:uppercase; font-weight:800; width:13.6rem; height:6.4rem; 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/astel/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 {margin:0 1.2rem 0 1rem; 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 .sel_lang:after {position:relative; top:2px; content:''; display:inline-block; width:1.6rem; height:1.2rem; background-repeat:no-repeat; background-position:0 0; background-image:url('/images/common/event/2025/astel/nation_arr.png'); background-size:100% auto; }
header .nation_wrap .list {display:none;}
header .nation_wrap a:hover {background-position:0 100%;}
header .nation_wrap a:hover span {background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)); }

.item_wrap {position:relative;  z-index:4; margin-top:4rem;}
.item_wrap .swiper-pagination {position:relative; margin-top:1.2rem;}
.item_wrap .swiper-pagination-bullet {width:94px; height:44px; border-radius:0; padding-bottom:4px; display:inline-flex; align-items:center; justify-content:center; z-index:1;  position:relative; display:inline-flex; align-items:center; justify-content:center; margin:0 !important; background:none; opacity:1 !important;}
.item_wrap .swiper-pagination-bullet span {font-size:20px; font-weight:900; background: linear-gradient(to right, #3f4eaf, #3f4eaf);  -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; letter-spacing:0.03em;}
.item_wrap .swiper-pagination-bullet-active {background:url('/images/common/event/2025/astel/bullet_on.png') 0 0 no-repeat;}
.item_wrap .swiper-pagination-bullet-active span {background: linear-gradient(to right, #ebd5ff, #c6efff); filter: drop-shadow(0 -1px 0px rgba(0, 0, 0, 0.5)); }
.item_wrap .swiper-pagination-bullet:hover {background:url('/images/common/event/2025/astel/bullet_on.png') 0 0 no-repeat;}
.item_wrap .swiper-pagination-bullet:hover span {background: linear-gradient(to right, #ebd5ff, #c6efff); filter: drop-shadow(0 -1px 0px rgba(0, 0, 0, 0.5)); }
.item_wrap .swiper-pagination-bullet-active:hover {background:url('/images/common/event/2025/astel/bullet_on.png') 0 0 no-repeat;}
.item_wrap .swiper-button-next, .item_wrap .swiper-button-prev {background-image:url('/images/common/event/2025/astel/btn_item_arr.png'); z-index: 11;  background-size:100% auto !important; margin-top:0;  top:50%; margin-top: -7.7rem; font-size:0; display:block !important; background-color:rgba(255, 255, 255, 0); width:7.7rem; height:7.7rem; background-repeat:no-repeat; background-position:0 0; position:absolute; cursor:pointer;}
.item_wrap .swiper-button-prev {left:-4.8rem; }
.item_wrap .swiper-button-next {right:-4.8rem; transform:scaleX(-1);}
.item_wrap .swiper-button-next:hover, .swiper-button-prev:hover  {background-position:0 100%;}
.item_wrap .swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled {display:none !important;}
.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 .item_list li {width:20%;  position:relative;}
.item_wrap .item_list li .con {position:relative; padding: 1.8rem;}
.item_wrap .item_list li .con .item_box {position:relative; height:auto !important; z-index: 1;}
.item_wrap .item_list li .con .item_box:after {content:''; display: block; padding-bottom: 100%;}
.item_wrap .item_list li .con .item {padding-top:20%; position:absolute; top:0; bottom:0; left:0; right:0; border-radius:50%; background-repeat:no-repeat; background-position:0 0; background-image:url('/images/common/event/2025/astel/bg_free.png'); background-size:100% auto; box-shadow:inset 0 0 2rem rgba(250, 164, 253, 0.5) , 0 0.8rem 1rem rgba(72, 80, 131, 0.5); border:0.2rem solid #ff66fa;}
.item_wrap .item_list li .con .item:before, .item_wrap .item_list li .con .item:after {content:''; display:block; position:absolute; width: 114.64%; height: 107.32%; top:50%; left:50%; transform:translate(-50% , -50%); background-repeat:no-repeat; background-position:0 0; background-size:100% auto;}
.item_wrap .item_list li .con .item:before {background-image:url('/images/common/event/2025/astel/line_item_free.png'); z-index:-1;}
.item_wrap .item_list li .con .item:after {background-image:url('/images/common/event/2025/astel/parts_free.png');}
.item_wrap .item_list li .con .item .pic {border-radius:10px; overflow:hidden; margin:0 auto; text-align:center;   background:#725171;  width: 60.98%; height: 0; padding-bottom: 40.656%; position:relative;}
.item_wrap .item_list li .con .item .pic:before {z-index: 1; width: auto; height: auto; top: 0; bottom: 0; left: 0; right: 0; content: ""; display: block; position: absolute; inset: 0; border-radius: 10px; padding: 0.3rem; background: linear-gradient(to right, #3039f7, #b3a5ff, #6f62ed, #73d6ff, #3ff5f0, #9356df, #ffbbfd, #ce32f6, #3039f7); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude;}
.item_wrap .item_list li .con .item .pic span {position:absolute; top:0; bottom:0; left:0; right:0; display:flex; align-items:center; justify-content:center;}
.item_wrap .item_list li .con .item .pic img {max-width:100%; max-height:100%;}
.item_wrap .item_list li .con .item .name {word-break: break-word; font-size:14px; color:#42444d; font-family:'Roboto'; letter-spacing:0.02em; font-weight:700; height:42%; width:100%; padding:3% 10% 10%; display:table; line-height:1.2;}
.item_wrap .item_list li .con .item .name font {color:#4778ff;}
.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/astel/no_item.png') center center no-repeat, url('/images/common/event/2025/astel/bg_free.png') center center no-repeat; background-size:60% auto, 100% auto;}
.item_wrap .item_list li .con .level {padding: 16% 0;  position:relative; background:url('/images/common/event/2025/astel/chain_c.png') center 0 repeat-y; background-size:1.2rem auto;}
.item_wrap .item_list li .con .level:before {z-index: -1; left:32%; content:''; display:block; position:absolute; top:50%; width:150%; margin-top:-1.1rem; height:2.2rem; background:url('/images/common/event/2025/astel/chain_obj.png') center center no-repeat , url('/images/common/event/2025/astel/chain_r.png') 0 center repeat-x; background-size:auto 100% , 1.5rem auto; }
.item_wrap .item_list li .con .level:after {content:''; display:block; position:absolute; left:50%; top:50%; transform:translate(-50% , -50%); width:8.1rem; height:7.7rem; background:url('/images/common/event/2025/astel/bg_lv.png') 0 0 no-repeat; background-size:100% auto;}

.item_wrap .item_list li .con .level span {z-index:1; position:relative; line-height:1; font-size:30px; font-weight:900; text-transform:uppercase; letter-spacing:0.1em; background: linear-gradient(to right, #ff66fa , #6c80ff);  -webkit-background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(-0.2rem 0px #fff) drop-shadow(0px 0.2rem #fff) drop-shadow(0.2rem 0px #fff) drop-shadow(0px -0.2rem #fff);}

.item_wrap .item_list li:nth-child(5n) .con .level:before {display:none;}
.item_wrap .item_list li.on .con .level:before {display:block;}

.item_wrap .item_list li .con .prem .pic {background:#3f4eaf;}
.item_wrap .item_list li .con .prem .item:before {background-image:url('/images/common/event/2025/astel/line_item_prem.png');}
.item_wrap .item_list li .con .prem .item:after {background-image:url('/images/common/event/2025/astel/parts_prem.png');}
.item_wrap .item_list li .con .item_box.prem .item {box-shadow:inset 0 0 2rem rgba(108, 128, 255, 0.2) , 0 0.8rem 1rem rgba(72, 80, 131, 0.5); background-image:url('/images/common/event/2025/astel/bg_prem.png'); border-color:#6c80ff;}


.item_wrap .it_tit {padding-right: 5px; padding-top:5px; position:absolute;  display:inline-block; left:-7.2rem; font-size:18px; font-weight:700; text-shadow:0 0.2rem 0 rgba(114, 42, 85, 0.5); color:#fff; text-transform:uppercase;  transform-origin: top; width:5.6rem; height:17.9rem; background-repeat:no-repeat; background-position:0 0; background-size:100% auto; background-image:url('/images/common/event/2025/astel/bg_txt_free.png');}
.item_wrap .it_tit span {top:50%; left:0; right:0; display:inline-block; transform-origin: top; width:100%; position:relative; text-transform:uppercase; vertical-align: middle; transform:translate(0 , -50%) rotate(-90deg);}
.item_wrap .it_tit.free {transform: translate(0, 40%); top:0;}
.item_wrap .it_tit.pre {padding-top:4rem; top:auto; bottom:0;  background-image:url('/images/common/event/2025/astel/bg_txt_prem.png'); transform: translate(0, -28%);}

footer {width: 100%; padding:0 0 5rem; z-index: 3; position:absolute; bottom:0; left:0; right:0;}
footer > img {margin-bottom: 2rem;}
footer .footer {font-size: 14px; color:#fff; font-weight:500; position: relative; z-index: 2; letter-spacing:0.02em;}
footer .footer .cs > a {background: linear-gradient(to right, #ff4ef9 30%, #0044ff); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-weight:700;}
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 {transition:none; position:fixed; z-index:11; right:5rem; bottom:3rem; display:block; width:70px; height:66px; display:flex; align-items:center; justify-content:center; background-image:url('/images/common/event/2025/astel/btn_top.png'); background-repeat:no-repeat; background-position:0 0; background-size:100% auto;}
.btn_top span {color:#fff; font-size:16px; font-weight:800; text-transform:uppercase; background: linear-gradient(to right, #afaff5, #a7fafc, #dcb5f2, #ffdbfe, #ae98fa); -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; filter: drop-shadow(0 0.2rem 0 rgba(129, 0, 160, 0.5));}
.btn_top:hover {background-position:0 100%;}
.btn_top:hover span {background:#3f4eaf; filter:none;}

.fix_sns {position:fixed; z-index:11; left:5rem; bottom:3rem;} 
.fix_sns ul {width: max-content; margin: 0 auto; }
.fix_sns li {margin-bottom:5px;}
.fix_sns li:last-child {margin-bottom:0;}
.fix_sns li a {display:block; width:69px; height:72px; 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/astel/sns_pb.png');}
.fix_sns li.sns_fb a {background-image:url('/images/common/event/2025/astel/sns_fb.png');}
.fix_sns li.sns_yb a {background-image:url('/images/common/event/2025/astel/sns_yb.png');}
.fix_sns li.sns_dc a {background-image:url('/images/common/event/2025/astel/sns_dc.png');}
.fix_sns li.sns_tt a {background-image:url('/images/common/event/2025/astel/sns_tt.png');}
.fix_sns li.sns_it a {background-image:url('/images/common/event/2025/astel/sns_it.png');}
.fix_sns li a:hover {background-position:0 100%;}

.fix_sns .btn_sns {display:none; width:79px; height:79px; 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/astel/btn_sns.png');}
.fix_sns .btn_sns:hover {background-position:0 100%;}

/* 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:1280px; 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_video .pop-layout:before, .pop_video .pop-layout:after {content:''; display:block; position:absolute; border-radius: 3rem; top: 50%; left:50%; transform:translate(-50% , -50%);}
.pop_video .pop-layout:before {box-shadow:0 5px 0 rgba(0, 0, 0, 0.3); width: 104.688%; height: 108.334%; background: linear-gradient(to bottom, #3039f7, #b3a5ff, #6f62ed, #73d6ff, #3ff5f0, #9356df, #ffbbfd, #ce32f6, #3039f7);  opacity:0.4;}
.pop_video .pop-layout:after {width: 104.688%; height: 108.334%; inset: 0; padding: 0.5rem; background: linear-gradient(to bottom, #ff66fa , #4778ff); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude;  top: 50%; left: 50%;}
.pop-up .pop-close {font-size:0; color:transparent; position:absolute; border-radius:50%; top:50%; box-shadow:0 0 0.7rem rgba(255, 255, 255, 0.35); right:3rem; width:46px; height:46px; margin-top:-23px; background-repeat:no-repeat; background-position:0 0; background-image:url('/images/common/event/2025/astel/pop_close.png'); background-size:100% auto;}
.pop-up .pop-close:hover {background-position:0 100%;}
.pop-up .video_wrap {position:relative; background: #fff;}
.pop-up .video_wrap .video {overflow: hidden; position: relative;  height: 0;  padding-top:56.25%; width:100%; z-index:2;}
.pop-up .video_wrap .video iframe {position: absolute; top:0; left: 0; width: 100%; height:100%;}
.pop_video .obj {position:absolute; z-index: 11;}
.pop_video .obj01 {top:-3.7rem; left:-5.6rem; max-width:6.7rem;}
.pop_video .obj02 {top:24%; right:-5.4rem; transform:translate(0 , -50%); max-width:7.7rem;}
.pop_video .obj03 {bottom:-2rem; left:50%; transform:translate(-50% , 0); max-width:6rem;}
.pop_video .pop-close {margin-top:0; top:-8rem; right:-8rem; transform:none;}

.pop_item {max-width:660px; border-radius:3rem; border:0.5rem solid #fff; background:#4778ff url('/images/common/event/2025/astel/pop_ptn.png') 0 0 repeat; overflow:hidden;}
.pop_item:before {content:''; display:block; position:absolute; top:0; bottom:0; left:0; right:0;  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), #3f4eaf); border-radius:3rem;}
.pop-up .box h3 {position:relative; min-height:9.4rem; display:flex; align-items:center; justify-content:center; padding:1rem 9rem; text-align:center; background:url('/images/common/event/2025/astel/bg_pop_tit.jpg') center center no-repeat; background-size:cover; border-bottom:1px solid #b0caff;}
.pop-up .box h3 span {font-size:40px; font-weight:800; text-transform:uppercase; letter-spacing:0.02em; background: linear-gradient(to right, #ff66fa, #4778ff);  -webkit-background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(-0.3rem 0px #fff) drop-shadow(0px 0.3rem #fff) drop-shadow(0.3rem 0px #fff) drop-shadow(0px -0.3rem #fff) drop-shadow(0px 0.7rem 0px rgba(0, 0, 0, 0.4));  }
.pop-up .box .desc {padding:2rem 3rem 4rem; position:relative; text-align:center;}
.pop-up .box .desc:before {content:''; display:block; position:absolute; width:55rem; height:17rem; background:url('/images/common/event/2025/astel/pop_item_obj.png') 0 0 no-repeat; background-size:100% auto; top:50%; left:50%; transform: translate(-50%, -80%);}
.pop-up .box .desc .detail {font-size:20px; color:#ffffff; letter-spacing:0.02em; line-height:1.2; word-break: break-word; margin-top:6px;}
.pop-up .box .desc .detail span {color:#feff81;}
.pop-up .box .desc .detail .tit {min-width:38.7rem; padding:0 3rem; max-width:calc(100% - 43px); position:relative; width:max-content; margin:0 auto 6px; background:#ff66fa; height:30px; display:flex; align-items:center; justify-content:center; color:#fff; text-transform:uppercase; font-size:22px; font-weight:800; text-shadow:0 -2px 0 rgba(129, 0, 160, 0.5);}
.pop-up .box .desc .detail .tit font {color:#feff81; margin:0 0.6rem;}
.pop-up .box .desc .detail .tit:before, .pop-up .box .desc .detail .tit:after {content:''; display:block; position:absolute; top:0; bottom:0; background-repeat:no-repeat; background-position:0 0;}
.pop-up .box .desc .detail .tit:before {width:32px; background-image:url('/images/common/event/2025/astel/bar_pop_l.png'); left:-32px; }
.pop-up .box .desc .detail .tit:after {width:11px; background-image:url('/images/common/event/2025/astel/bar_pop_r.png'); right:-11px;}
.pop-up .box .desc .how {width:21.2rem; background:url('/images/common/event/2025/astel/bg_how.png') 0 0 no-repeat; background-size:100% auto;  display:flex; align-items:center; justify-content:center; height:4.5rem; padding-top:0.5rem; font-size:16px; font-weight:900; color:#fff; text-transform:uppercase; letter-spacing:0.02em; position:absolute; right:0; top:-3.9rem; transform:translate(50% , 0);}
.pop-up .box .desc.in_two {display:flex; align-items:flex-start; justify-content:space-between; padding:2rem 2rem;}
.pop-up .box .desc.in_two:before {display:none;}
.pop-up .box .desc.in_two .detail {letter-spacing:0; position:relative;}
.pop-up .box .desc.in_two .detail .tit {min-width:0; padding:0; width:100%;}
.pop-up .box .desc.in_two > .con {width:50%; padding:0 5px;}

.pop_character .box .desc {margin-top:-2rem; padding: 2rem 3rem 3rem;}
.pop_character .box .desc .detail {margin-top:-10rem;}

.pop_cha {max-width:810px; visibility: hidden; display: block; overflow:visible;}
.pop_cha .pop-layout {border-radius: 3rem; overflow: hidden;}
.pop_cha .box .desc .img span {display:block;}
.pop_cha .box .desc .img img {display:inline;}
.pop_cha .btn_pop_arr {position:absolute; top:50%; margin-top:-23px; border-radius:50%; box-shadow:0 2px 0 rgba(0, 0, 0, 0.3); background-position:0 0; background-size:100% auto; background-image:url('/images/common/event/2025/astel/btn_pop_arr.png'); background-repeat:no-repeat; background-color:rgba(255, 255, 255, 0); cursor:pointer; transition:all ease-in-out 0.2s;  background-position:0 0 ;  width:46px; font-size:0px; display:block; z-index:99; height:46px; border:none;}
.pop_cha .btn_pop_l {left:-80px;}
.pop_cha .btn_pop_r {right:-80px; transform:scaleX(-1);}
.pop_cha .btn_pop_arr.slick-disabled {display:none !important;}
.pop_cha .btn_pop_arr:hover {background-position:0 100%;}
.pop_cha .box .desc .detail {margin-top:-2.4rem;}
.pop_cha .box .desc .detail .coming {margin:7px auto 0; display:flex; width:max-content; height:3.2rem; align-items:center; justify-content:center; background:rgba(0, 0, 0, 0.5); border-radius:16px; border:1px solid #ff95fc; color:#ff66fa; font-size:16px; padding:0 1.3rem 2px;}

.pop_cha .cha_info01 .box .desc .detail {margin-top:-5rem;}
.pop_cha .cha_info04 .box .desc .detail {margin-top:-5.4rem;}

.sec_tit span {font-size:70px; font-weight:900; text-transform:uppercase; letter-spacing:0.02em; background: linear-gradient(to bottom, #ff4ef9 30%, #0044ff);  -webkit-background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(-0.3rem 0px #fff) drop-shadow(0px 0.3rem #fff) drop-shadow(0.3rem 0px #fff) drop-shadow(0px -0.3rem #fff) drop-shadow(0px 0.5rem 0px rgba(91, 96, 127, 0.5));  }
.sec_tit02 {color:#3f4eaf; font-size:28px; letter-spacing:0.02em; font-weight:800; line-height:1.4; text-transform:uppercase; text-shadow:0 0.2rem 0 rgba(255, 255, 255, 0.7); margin-top:1.2rem;}

.section01 {padding: 41.5rem 0 18.6rem; position:relative; text-align:center; background:url('/images/common/event/2025/astel/bg01.jpg') center 0 no-repeat; background-size:cover;}
.all_wrap > .section01:after, .all_wrap > .section01:before {display:none;}
.section01 .inner {position:relative; z-index:1;}
.section01 .title_wrap {display:inline-block;}
.section01 .title_wrap .title {position:relative; z-index:1;}
.section01 .title_wrap .date {margin-top:4rem; position:relative;}
.section01 .title_wrap .date:before {content:''; display:block; position:absolute; left:50%; top:-19rem; margin-left:-31.1rem; width:62.2rem; height:25.5rem; background:url('/images/common/event/2025/astel/obj_title.png') 0 0 no-repeat; background-size:100% auto;}
.section01 .title_wrap .date span {font-size:34px; font-weight:800; text-transform:uppercase; letter-spacing:0.04em; background: linear-gradient(to bottom, #ff4ef9 30%, #0044ff);  -webkit-background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(-0.2rem 0px #fff) drop-shadow(0px 0.2rem #fff) drop-shadow(0.2rem 0px #fff) drop-shadow(0px -0.2rem #fff) drop-shadow(0px 0.5rem 0px rgba(91, 96, 127, 0.5));  }
.section01 .idol_wrap {position:absolute; left:50%; top:16px; transform:translate(-50% , 0); width:max-content;}
.section01 .idol_wrap > img {animation: sway 2s infinite linear;}
.section01 .idol_wrap .idol01 {margin-right:-158px; }
.section01 .idol_wrap .idol02 {animation: sway02 2s infinite linear;}
.section01 .idol_wrap .idol03 {animation-delay:0.2s;}
.section01 .idol_wrap .idol04 {margin-left:-78px; animation: sway02 2s infinite linear;}
.section01 .parts_wrap {position:absolute; left:50%; top:8rem; transform:translate(-46% , 0); width:max-content;}
.section01 .parts_wrap .parts {position:absolute; top:0; left:0;  opacity:0;}
.section01 .parts_wrap .parts01 {position:relative;}

.animated .title_wrap { animation: slide-in-elliptic-top-fwd 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;}

.animated .parts_wrap .parts:nth-child(1) {animation: ghost 0.5s linear , float02 2s 0.5s ease-out infinite;}
.animated .parts_wrap .parts:nth-child(2) {animation: ghost 0.5s 0.3s linear , float02 2s 0.8s ease-out infinite;}
.animated .parts_wrap .parts:nth-child(3) {animation: ghost 0.5s 0.2s linear , float02 2s 0.7s ease-out infinite;}
.animated .parts_wrap .parts:nth-child(4) {animation: ghost 0.5s 0.1s linear , float02 2s 0.6s ease-out infinite;}
.animated .parts_wrap .parts:nth-child(5) {animation: ghost 0.5s linear , float02 2s 0.5s ease-out infinite;}
.animated .parts_wrap .parts:nth-child(6) {animation: ghost 0.5s 0.3s linear , float02 2s 0.8s ease-out infinite;}
.animated .parts_wrap .parts:nth-child(7) {animation: ghost 0.5s 0.2s linear , float02 2s 0.7s ease-out infinite;}
.animated .parts_wrap .parts:nth-child(8) {animation: ghost 0.5s 0.1s linear , float02 2s 0.6s ease-out infinite;}
.animated .parts_wrap .parts:nth-child(9) {animation: ghost 0.5s linear , float02 2s 0.5s ease-out infinite;}
.animated .parts_wrap .parts:nth-child(10) {animation: ghost 0.5s 0.3s linear , float02 2s 0.8s ease-out infinite;}
.animated .parts_wrap .parts:nth-child(11) {animation: ghost 0.5s 0.2s linear , float02 2s 0.7s ease-out infinite;}
.animated .parts_wrap .parts:nth-child(12) {animation: ghost 0.5s 0.1s linear , float02 2s 0.6s ease-out infinite;}


.section02 {background:url('/images/common/event/2025/astel/bg02.png') center 0 no-repeat; background-size:cover; padding:12.6rem 0 28rem; position:relative; margin-top:-9.1rem;}
.section02 .sec_tit br {display:none;}
.all_wrap > .section02:before {display:none;}
.all_wrap > .section02:after {background: url(/images/common/event/2025/astel/line_wave_sc02.png) 0 center repeat-x; height:10rem; margin-top:0;}
.section02 .inner:before {content:''; display:block; position:absolute; left:50%; top:20%; transform:translate(-50% , -50%); background:url('/images/common/event/2025/astel/parts_sc02.png') center center no-repeat; background-size:100% auto; animation: tp 5s infinite; max-width:201rem; width:100%; height:55.2rem;}
.section02 .con_lr {display: flex; align-items: flex-end; justify-content: space-between; margin-top:18.6rem; position:relative; z-index:1;}
.section02 .con_l .desc {text-align:right; text-transform:uppercase; letter-spacing:0.02em; margin-top:14.5rem; position: relative; z-index: 2;}
.section02 .con_l .desc .tit {line-height:1.04;}
.section02 .con_l .desc .tit span {font-size:48px; letter-spacing:0.02em; font-weight:900; background: linear-gradient(to right, #ff66fa, #4778ff);  -webkit-background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(-0.3rem 0px #fff) drop-shadow(0px 0.3rem #fff) drop-shadow(0.3rem 0px #fff) drop-shadow(0px -0.3rem #fff) drop-shadow(0px 0.7rem 0px rgba(91, 96, 127, 0.5));  }
.section02 .con_l .desc .txt {font-size:28px; font-weight:800; color:#4a63ff; margin-top:2.2rem;}
.section02 .con_l .desc .txt span {margin-right: 0; margin-left: auto; display:flex; position:relative; height:38px; align-items:center; justify-content:flex-end; padding:0 1rem 0 3rem; background:#fff; margin-top:3px;}
.section02 .con_l .desc .txt span:before {content:''; display:inline-block; width:30px; top:0; bottom:0; left:-30px; background:url('/images/common/event/2025/astel/bar_txt.png') 0 0 no-repeat; position:absolute; }
.section02 .con_l .desc .txt span:first-child {width: calc(100% - 11px);}
.section02 .vod {width:474px; height:478px; background:url('/images/common/event/2025/astel/bg_vod.png') 0 0 no-repeat; position:relative; margin-right: 0; margin-left: auto; background-size:100% auto; animation: float 3s ease-in-out infinite;}
.section02 .vod .img {width:100%; height:100%;}
.section02 .vod:before , .section02 .vod:after {content:''; display:block; position:absolute; }
.section02 .vod:before {top:0; bottom:0; left:0; right:0; background:url('/images/common/event/2025/astel/vod_img.png') center center no-repeat; border-radius:50%; /* animation: morph 3s linear infinite; */ background-size:100% auto;}
.section02 .vod:after {left:50%; top:50%; width:10.4rem; height:12.4rem; margin-top:-5.2rem; margin-left:-5.2rem; background-repeat:no-repeat; background-position:0 0; background-image:url('/images/common/event/2025/astel/btn_vod.png'); background-size:100% auto;}
.section02 .vod:hover:after {background-position:0 100%;}
.section02 .vod .vod_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;}
.section02 .pass .con {position:relative; display:flex; width:408px; height:408px; align-items:center; justify-content:center; background:url('/images/common/event/2025/astel/bg_pass.png') 0 0 no-repeat; background-size:100% auto; flex-direction: column; animation: float 3s ease-in-out infinite;}
.section02 .pass .con:before {content:''; display:block; position:absolute; left:50%; top:50%; background-repeat:no-repeat; background-position:0 0; background-size:100% auto;}
.section02 .pass .tit {margin-bottom:1.2rem; line-height:1; font-weight:800; position: relative; font-size:38px; text-transform:uppercase; color:#4778ff; text-shadow: -0.3rem 0px #fff, 0px 0.3rem #fff, 0.3rem 0px #fff, 0px -0.3rem #fff , 0 0.7rem 0 rgba(91, 96, 127, 0.5);}
.section02 .pass .for {width:100%; position: relative;}
.section02 .pass .for span {border-radius:14px; margin:3px auto; font-size:20px; font-weight:800; color:#fff; text-transform:uppercase; letter-spacing:0.02em; text-shadow:0 0.2rem 0 rgba(72, 80, 131, 0.5); max-width:24.8rem; display:flex; height:28px; align-items:center; justify-content:center; background-color:#4778ff; background-repeat:repeat; background-position:0 0; background-image:url('/images/common/event/2025/astel/ptn01.png');}
.section02 .pass .txt {position: relative; margin-top:1rem; font-size:19px; font-weight:600; color:#42444d; line-height:1.15;}
.section02 .pass .txt font {color:#b157df;}
.section02 .pass .free {margin-bottom:-6.6rem;}
.section02 .pass .free .con {animation-delay:0.7s;}
.section02 .pass .free .con:before {width: 97.06%; height: 84.314%; transform:translate(-50% , -50%); background-image:url('/images/common/event/2025/astel/line_pass01.png');}
.section02 .pass .prem {margin-left:15.6rem;}
.section02 .pass .prem .con:before {background-image:url('/images/common/event/2025/astel/line_pass02.png'); width: 99.02%; height: 79.66%; transform: translate(-55%, -46%);}
.section02 .pass .prem .tit {color:#b157df;}
.section02 .pass .prem .for span {background-color:#b157df;}
.section02 .con_r .desc_txt {font-size:22px; text-align:left; color:#3f4eaf; font-weight:600; line-height:1.45; text-shadow:0 0 0.7rem rgba(255, 255, 255, 0.7); margin-top:3rem;}
.section02 .con_r .desc_txt span {color:#6c80ff;}
.section02 .con_r .desc_txt font {color:#ff66fa;}
.section02 .con_lr .con_m {position:absolute; left:50%; bottom: -30%; margin-left:-477px; z-index:1;}
.section02 .con_lr .con_m:before {content:''; display:block; position:absolute; left:50%; bottom:0; width:93.4rem; height:46rem; background:url('/images/common/event/2025/astel/light_sc02.png') 0 0 no-repeat; transform:translate(-50% , 0); z-index:-1;}
.section02 .con_lr .con_m:after {z-index:-1; content:''; display:block; position:absolute; top:0; bottom:0; left:0; right:0; background:url('/images/common/event/2025/astel/cha_sc02_stage.png') 0 0 no-repeat; background-size:100% auto;}
.section02 .con_lr .con_m .btn_detail {font-size:0; color:transparent; box-shadow:0 0.3rem 0 rgba(62, 17, 126, 0.4); position:absolute; width:76px; height:76px; border-radius:50%; background-repeat:no-repeat; background-position:0 0; background-image:url('/images/common/event/2025/astel/btn_detail.png');}
.section02 .con_lr .con_m .btn_detail:hover {background-position:0 100%;}
.section02 .con_lr .con_m .btn_t {top: 9%; right: 33%;}
.section02 .con_lr .con_m .btn_m {top: 34%; left: 32%;}
.section02 .con_lr .con_m .btn_b {bottom: 23%; right: 24%;}
.section02 .bg {position:absolute; top:0; bottom:0; left:0; right:0; transform: translate(0, 15%);}
.section02 .bg .cube {position:absolute; animation: float 3s ease-in-out infinite;}
.section02 .bg .cube_l {top:0; left:6%;}
.section02 .bg .cube_r {top:7%; right:13%;}
.section02 .bg .cube02, .section02 .bg .cube06 {animation-delay:0.5s;}
.section02 .bg .cube03, .section02 .bg .cube04 {animation-delay:1s;}
.section02 .bg .cube07, .section02 .bg .cube08 {animation-delay:1.5s;}
.section02 .con_l, .section02 .con_r {position:relative;}
.section02 .con_l {display: flex; flex-direction: column-reverse;     z-index: 1;}
.section02 .con_l:before, .section02 .con_r:before {content:''; display:block; position:absolute; bottom:16rem; height:22.1rem; background-repeat:no-repeat; background-position:0 0; background-size:100% auto;}
.section02 .con_l:before {width:71.2rem; background-image:url('/images/common/event/2025/astel/txt_astel.png'); right:3%;}
.section02 .con_r:before {width:60.1rem; background-image:url('/images/common/event/2025/astel/txt_idol.png'); left:7%;}


.section03 {background:url('/images/common/event/2025/astel/bg03.jpg') center center no-repeat; background-size:cover; padding:14rem 0 2rem; position:relative; z-index:1;}
.section03 .inner:before, .section03 .inner:after {content:''; display:block; position:absolute; top:0; bottom:0; right:0; left:0; background-repeat: no-repeat; background-position: center center;}
.section03 .inner:before {background-image: url(/images/common/event/2025/astel/bg03_logo_l.png);}
.section03 .inner:after {background-image: url(/images/common/event/2025/astel/bg03_logo_r.png);}
.section03 .sec_tit {position:relative; z-index:2;}
.section03 .character {margin-top:-2.6rem;     position: relative; z-index: 1;}
.section03 .character .cha_slide {display:inline-block; position:relative;}
.section03 .character .con {position:relative; transition:all ease-in-out 0.2s; animation: up 3s infinite;}
.section03 .character:hover .con {animation:none;}
.section03 .character .on .con > img {animation:scaleUP 0.5s;transform-origin:bottom;     animation-fill-mode: forwards;}
.section03 .character .desc {position:absolute; top:50%; transform: translate(0, -64%);}
.section03 .character .desc .type {margin-bottom:7px; display:flex; align-items:center; justify-content:center; width:115px; height:35px; padding-bottom:3px; background-repeat:no-repeat; background-position:0 0; background-image:url('/images/common/event/2025/astel/type_blue.png'); background-size:100% auto;}
.section03 .character .desc .type span {font-weight:800; font-size:18px; color:#4778ff; letter-spacing:0.02em; text-transform:uppercase; filter: drop-shadow(-0.2rem 0px #fff) drop-shadow(0px 0.2rem #fff) drop-shadow(0.2rem 0px #fff) drop-shadow(0px -0.2rem #fff);}
.section03 .character .desc .type.red {background-image:url('/images/common/event/2025/astel/type_red.png');}
.section03 .character .desc .type.red span {color:#ff66fa;}
.section03 .character .btn_info {font-size:0; cursor:pointer; color:transparent; box-shadow:0 0.3rem 0 rgba(62, 17, 126, 0.4); width:76px; height:76px; border-radius:50%; background-repeat:no-repeat; background-position:0 0; background-image:url('/images/common/event/2025/astel/btn_detail.png'); background-size:100% auto;}
.section03 .character .btn_info:hover {background-position:0 100%;}
.section03 .character .name {z-index:1; position:absolute; display:flex; top:50%; align-items:center; justify-content:center; flex-direction:column; text-transform:uppercase; width:24rem; height:24rem; background-repeat:no-repeat; background-position:0 0; background-size:100% auto; background-image:url('/images/common/event/2025/astel/btn_cha.png');}
.section03 .character .name:before {animation: rotation 10s infinite linear; content:''; display:block; position:absolute; top:0; bottom:0; left:0; right:0; background:url('/images/common/event/2025/astel/btn_cha_line.png') 0 0 no-repeat; background-size:100% auto;}
.section03 .character .name .sort {transition:all ease-in-out 0.2s; border:1px solid #fff; border-radius:17px; padding:1px 1.8rem; display:inline-block; font-size:24px; font-weight:600; letter-spacing:0.04em; color:rgba(255 255, 255, 0.8); text-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.2); -webkit-text-stroke: 1px #fff;}
.section03 .character .name .txt {transition:all ease-in-out 0.2s; margin-top:0.7rem;}
.section03 .character .name .txt span {font-size: 36px; letter-spacing: 0.02em; font-weight: 700; background: linear-gradient(to right, #ff66fa, #4778ff); -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; filter: drop-shadow(-0.3rem 0px #fff) drop-shadow(0px 0.3rem #fff) drop-shadow(0.3rem 0px #fff) drop-shadow(0px -0.3rem #fff) drop-shadow(0px 0.6rem 0px rgba(0, 0, 0, 0.2));}
.section03 .character .name01 { transform:translate(78% , -55%);}
.section03 .character .name02 {right: 0; transform: translate(-88%, -55%);}
.section03 .character .name02:before {animation: rotation02 10s infinite linear; }
.section03 .character .name.on {background-position:0 100%;}
.section03 .character .name.on .sort {text-shadow:0 0 1rem rgba(255, 255, 255, 0.5); color:#fff;}
.section03 .character .name.on .txt span {background: linear-gradient(to right, #fff, #fff); filter: drop-shadow(-0.05rem 0px #fff) drop-shadow(0px 0.05rem #fff) drop-shadow(0.05rem 0px #fff) drop-shadow(0px -0.05rem #fff) drop-shadow(0px 0px 1rem rgba(255, 255, 255, 0.5));}
.section03 .slick-track {display:inline-block; width:auto !important;}
.section03 .cha_slide .slick-slide {width:auto !important; position:relative; z-index:1; animation-duration:0.7s;}
.section03 .cha_slide .slick-slide img {max-width:none;}
.section03 .cha_slide .cha01 {margin-right:-2.7rem;}
.section03 .cha_slide .cha01 .desc {transform: translate(50%, -64%);}
.section03 .cha_slide .cha02 {margin-right:3.2rem; animation-delay:0.2s;}
.section03 .cha_slide .cha02 .con {animation-delay:0.1s;}
.section03 .cha_slide .cha02 .desc {transform: translate(-64%, -64%); left:auto; right:0;}
.section03 .cha_slide .cha03 {margin-left:3.2rem; animation-delay:0.4s;}
.section03 .cha_slide .cha03 .con {animation-delay:0.2s;}
.section03 .cha_slide .cha03 .desc {transform: translate(22%, -64%);}
.section03 .cha_slide .cha04 {margin-left:-3rem; z-index:0; animation-delay:0.6s;}
.section03 .cha_slide .cha04 .con {animation-delay:0.3s;}
.section03 .cha_slide .cha04 .desc {transform: translate(130%, -64%);}
.section03 .bg_light {position:absolute; top:0; left:0; bottom:0; right:0; background:url('/images/common/event/2025/astel/bg_light.png') 0 0 repeat-x; background-size:auto 2.6rem; padding-top:2.6rem;}
.section03 .bg_light:before, .section03 .bg_light:after {content:''; display:block; position:absolute; width:20.393%; height:0; padding-bottom:11.238%; background-repeat:no-repeat; background-position:0 0; bottom:4.8rem; background-size:100% auto;}
.section03 .bg_light:before {left:8.2%; background-image:url('/images/common/event/2025/astel/guard_l.png');}
.section03 .bg_light:after {right:8.2%; background-image:url('/images/common/event/2025/astel/guard_r.png');}
.animated .inner:before, .section03 .inner:after {animation: bounce-top 0.9s both;}

.section04 {background:url('/images/common/event/2025/astel/bg04.jpg') center center no-repeat; background-size:cover; position:relative; padding:9.6rem 0 21.5rem;     z-index: 2;}
.section04 .bg_vod:after {background-image:url('/images/common/event/2025/astel/cover02.png');}
.section04 .inner { position:relative; max-width:1325px; z-index: 4;}
.section04 .motion_wrap {position:relative;}
.section04 .motion_wrap .desc {max-width:1060px; margin:0 auto; position:relative;}
.section04 .motion_wrap .item {width:100%; height:0; position:relative; padding-top:54.718%; z-index: 1; background:url('/images/common/event/2025/astel/bg_3d.png') center center no-repeat; background-size:cover; box-shadow:inset 0 2px 1px rgba(255, 255, 255, 0.5);}
.section04 .motion_wrap .item:before {width: 126.227%; height: 146.037%; content:''; display:block; position:absolute; top:50%; left:50%; transform:translate(-50% , -50%); background:url('/images/common/event/2025/astel/frame_3d.png') center center no-repeat; background-size:100% auto}
.section04 .motion_wrap .item > div {width:100% !important; height:100% !important; position:absolute; top:0; left:0; display:none !important;}
.section04 .motion_wrap .item img, .section04 .motion_wrap .item canvas { width:100% !important; height:100% !important; position:absolute; top:0; bottom:0; left:0; right:0;  display:none !important;}
.section04 .motion_wrap .swiper-slide {opacity:0 !important;  }
.section04 .motion_wrap .swiper-slide.swiper-slide-active {opacity:1 !important;  }
.section04 .motion_wrap .swiper-slide.swiper-slide-active .item img, .section04 .motion_wrap .swiper-slide.swiper-slide-active .item canvas {display:block !important;}
.section04 .motion_wrap .swiper-slide.swiper-slide-active .item > div {display:block !important;}
.section04 .motion_wrap .img_3d img {position:relative;}
.section04 .motion_wrap .con .name {box-shadow:inset 0 0.9rem 0.5rem rgba(0, 0, 0, 0.3); display:flex; height:96px; justify-content:center; align-items:center; background:url('/images/common/event/2025/astel/ptn02.jpg') 0 0 repeat; position:relative; margin-bottom:10%;}
.section04 .motion_wrap .con .name:before, .section04 .motion_wrap .con .name:after {content:''; display:block; position:absolute; top:0; bottom:0; left:0; right:0;}
.section04 .motion_wrap .con .name:before {opacity:0.8; background: linear-gradient(to right, #3039f7, #b3a5ff, #6f62ed, #73d6ff, #3ff5f0, #9356df, #ffbbfd, #ce32f6, #3039f7);}
.section04 .motion_wrap .con .name:after {background:url('/images/common/event/2025/astel/frame_tit_lt.png') 0 0 no-repeat, url('/images/common/event/2025/astel/frame_tit_rt.png') right 0 no-repeat, url('/images/common/event/2025/astel/frame_tit_lb.png') 0 bottom no-repeat, url('/images/common/event/2025/astel/frame_tit_rb.png') right bottom no-repeat, url('/images/common/event/2025/astel/frame_tit_t.png') 0 0 repeat-x , url('/images/common/event/2025/astel/frame_tit_b.png') 0 bottom repeat-x, url('/images/common/event/2025/astel/frame_tit_l.png') 0 0 repeat-y, url('/images/common/event/2025/astel/frame_tit_r.png') right 0 repeat-y;}
.section04 .motion_wrap .con .name span {position:relative; font-size:50px; letter-spacing: 0.03em; color:rgba(255, 255, 255, 0.8); font-weight:800; text-transform:uppercase; text-shadow: 0 0 0.5rem rgba(255, 255, 255, 0.2); -webkit-text-stroke: 1px #fff;}
.section04 .motion_wrap .info {z-index:11; position:absolute; top:4.5%; left:2.4rem; right:2.4rem; text-align:center; text-transform:uppercase; letter-spacing:0.02em;}
.section04 .motion_wrap .info .txt01 {font-size:36px; font-weight:800; text-transform:uppercase; letter-spacing:0.02em; background: linear-gradient(to bottom, rgba(71, 120, 255, 0.5), rgba(255, 102, 250, 0.5)) , #6c80ff;  -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; filter: drop-shadow(-0.3rem 0px #fff) drop-shadow(0px 0.3rem #fff) drop-shadow(0.3rem 0px #fff) drop-shadow(0px -0.3rem #fff);  }
.section04 .motion_wrap .info .txt02 {font-size:18px; font-weight:800; color:#3f4eaf; letter-spacing:0.02em; margin-top:1.5rem; line-height:1.33;}
.section04 .motion_wrap .info .txt02 span {color:#fff; background:#3f4eaf; border-top:1px solid #6c80ff; padding:0 0.5rem;}
.section04 .motion_wrap .info .txt02 a {font-weight:700; color:#b157df; display:inline-block; background:#fff; border-radius:13px; border:0.2rem solid #b157df; padding:0 1rem; box-shadow:0 0.2rem 0 rgba(172, 138, 189, 0.5); }
.section04 .motion_wrap .info .txt02 a:before {margin-right:0.7rem; content:''; display:inline-block; vertical-align:middle; position:relative; top:-2px; background-repeat:no-repeat; background-position:0 0; background-image:url('/images/common/event/2025/astel/icon_link.png'); width:14px; height:14px; background-size:100% auto;}
.section04 .motion_wrap .info .txt02 a:hover {background:#b157df; border-color:#b157df; color:#fff;}
.section04 .motion_wrap .info .txt02 a:hover:before {background-position:0 100%;}
.section04 .motion_wrap .img_3d {position:absolute; bottom:0; left:2.4rem; z-index:1; max-width:14.5rem;}
.animated .motion_wrap .con .name span, .motion_wrap .swiper-slide-active .con .name span {animation: flicker-in-1 2s 0.5s linear both;}

.section04 .stat {padding:2.4rem 2rem; position:absolute; bottom:3rem; right:3rem; z-index: 1; border-radius:5px; background:rgba(255, 255, 255, 0.3); border:1px solid #fff; box-shadow:inset 0 0 0.3rem rgba(255, 255, 255, 0.5) , 0 0.3rem 0 rgba(162, 128, 210, 0.5);}
.section04 .stat ul {position:relative;}
.section04 .stat li { position:relative;  font-size:0; margin-bottom:1rem; color:#3f4eaf;}
.section04 .stat li > div {display:inline-block; vertical-align:middle; letter-spacing:0.05em; font-weight:600; font-size:12px; text-align:left; text-transform:uppercase;}
.section04 .stat .txt {width:72px;}
.section04 .stat .num {color:#b157df; width:40px; padding-left:7px;}
.section04 .stat .graph { height:1.2rem; position:relative;  width:15rem;}
.section04 .stat li .bar {width:100%; height:100%; border:1px solid #fff; background:rgba(255, 255, 255, 0.5); border-radius:1.2rem; position:relative; overflow:hidden;}
.section04 .stat li .bar .on { height:1rem;  display:block; background:#6c80ff url('/images/common/event/2025/astel/ptn01.png') 0 0 repeat; border-radius:1.1rem;}
.section04 .stat li:last-child {margin-bottom:0;}
.section04 .stat li.no_graph {display:flex; align-items:center; justify-content:space-between;}
.section04 .stat li.no_graph .num {width:auto;}

.section04 .page02 .stat li .bar .on {background:url('/images/common/event/2025/astel/ptn02.jpg') 0 0 repeat;}
.section04 .page02 .info .txt01 { background: linear-gradient(to bottom, rgba(71, 120, 255, 0.5), rgba(255, 102, 250, 0.5)) , #ff66fa; }

.section04 .sc04_cha, .section04 .sc04_obj {position:absolute; bottom:0; z-index:11;}
.section04 .sc04_cha01 {left: 0; transform: translate(-83%, 42%);}
.section04 .sc04_cha02 {right: 0; transform: translate(83%, 42%);}
.section04 .sc04_obj01 {right: 0; transform: translate(56%, 65%);}
.section04 .sc04_obj02 {left: 0; transform: translate(-56%, 65%);}

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

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

.section04 .swiper-button-next, .section04 .swiper-button-prev {background-image: none; right:auto; left:auto; width:19.2rem; height:17.4rem; transition:none; text-align:center;  z-index: 11; margin-top:0; transform:translate(0 , calc(-50% + 9.6rem)); font-size:0; display:block !important; background-size:100% !important;  background-color:rgba(255, 255, 255, 0); background-repeat:no-repeat; background-position:0 0; background-image:url('/images/common/event/2025/astel/btn_item_bg.png'); position:absolute; cursor:pointer;}
.section04 .swiper-button-next:after, .section04 .swiper-button-prev:after {background-size:100% auto; border-radius:50%; box-shadow:0 0.3rem 0 rgba(62, 17, 126, 0.7); content:''; display:block; position:absolute; left:50%; bottom:-5.6rem; margin-left:-2.35rem; width:4.7rem; height:4.6rem; background-repeat:no-repeat; background-position:0 0; background-image:url('/images/common/event/2025/astel/btn_arr.png');}
.section04 .swiper-button-next img, .section04 .swiper-button-prev img {position:absolute; top:50%; left:50%; transform:translate(-50% , -54%);}
.section04 .swiper-button-next .name, .section04 .swiper-button-prev .name {transition:all ease-in-out 0.2s; position:absolute; left:0; right:0; bottom:18%; font-size:18px; text-transform:uppercase; color:#ff66fa; font-weight:900; letter-spacing:0.05em; line-height:1.1; text-shadow: -0.2rem 0px #fff, 0px 0.2rem #fff, 0.2rem 0px #fff, 0px -0.2rem #fff;}
.section04 .swiper-button-next {right:-17.6rem;}
.section04 .swiper-button-prev {left:-17.6rem;}
.section04 .swiper-button-prev:after {transform:scaleX(-1);}
.section04 .swiper-button-prev .name {color:#6c80ff;}

.section04 .swiper-button-next:hover, .section04 .swiper-button-prev:hover {background-position:0 100%;}
.section04 .swiper-button-next:hover:after, .section04 .swiper-button-prev:hover:after {background-position:0 100%;}
.section04 .swiper-button-next:hover .name {color:#fff; text-shadow: -0.2rem 0px #ff66fa, 0px 0.2rem #ff66fa, 0.2rem 0px #ff66fa, 0px -0.2rem #ff66fa;}
.section04 .swiper-button-prev:hover .name {color:#fff; text-shadow: -0.2rem 0px #4778ff, 0px 0.2rem #4778ff, 0.2rem 0px #4778ff, 0px -0.2rem #4778ff;}
.section04 .swiper-button-next.swiper-button-disabled, .section04 .swiper-button-prev.swiper-button-disabled {opacity:0; display:none;}
.section04 .swiper-pagination {display:none;}


.section05 {background:url('/images/common/event/2025/astel/bg05.jpg') center center no-repeat; background-size:cover; position:relative; padding:7.2rem 0 16rem;}
.section05 .inner { max-width:1430px;}
.section05 .sec_tit span {font-size:50px;}
.section05 .swiper {overflow:hidden; padding: 2.4rem 0;}
.section05 .swiper-scrollbar-drag {background:#d9f; border-radius:0; border-radius:0.8rem;}
.section05 .swiper-scrollbar {display:none;}
.section05.animated:after {animation:fil02 2s cubic-bezier(0.230, 1.000, 0.320, 1.000) both;}

.section06 {background:url('/images/common/event/2025/astel/bg06.jpg') center center no-repeat; background-size:cover; position:relative; padding:8rem 0 28rem;}
.section06 .inner {max-width:none; position:relative; z-index:2;}
.section06 .bg {position:absolute; top:0; bottom:0; left:0; right:0; overflow:hidden;}
.section06 .bg:after {content:''; display:block; position:absolute; top:0; bottom:0; left:0; right:0; background:url('/images/common/event/2025/astel/bg06_ticket.png') center center no-repeat; background-size:cover; }
.section06 .bg .float {position:absolute;     animation: float 3s ease-in-out infinite;}
.section06 .bg .float01 {top:0; left:0; animation: float02 3s ease-in-out infinite;}
.section06 .bg .float02 {bottom:31.5rem; left:3.3rem; animation-delay:2s;}
.section06 .bg .float03 {top:5.4rem; right:2rem; animation-delay:2s;}
.section06 .bg .float04 {right:32.4rem; bottom:0; animation-delay:1s;}
.section06 .bg .parts {position:absolute; animation: up 3s infinite;}
.section06 .bg .parts01, .section06 .bg .parts02, .section06 .bg .parts03 {top:0; left:15.7rem;}
.section06 .bg .parts04, .section06 .bg .parts05, .section06 .bg .parts06 {top:14rem; right:46.3rem;}
.section06 .bg .parts07  {bottom:193.3rem; left:128rem;}
.section06 .bg .parts08  {bottom:22.7rem; right:44.4rem;}
.section06 .bg .parts01, .section06 .bg .parts04, .section06 .bg .parts07 {animation-delay:0.1s;}
.section06 .bg .parts02, .section06 .bg .parts05, .section06 .bg .parts08 {animation-delay:0.2s;}
.section06 .bg .parts03, .section06 .bg .parts06 {animation-delay:0.3s;}

.section06 .shop_area {margin-top:7rem;}
.section06 .shop_area > ul {font-size:0; margin-left:-3rem;}
.section06 .shop_area > ul > li {display:inline-block; vertical-align:top; position:relative; padding-left:3rem; margin-bottom:3rem; animation: float 3s ease-in-out infinite;}
.section06 .shop_area .con {max-width:325px; height:56.2rem;} 
.section06 .shop_area .con .tkt_t {padding-top:3.6rem; height:136px; background-repeat:no-repeat; background-position:0 0; background-size:100% auto; background-image:url('/images/common/event/2025/astel/ticket_t01.png'); display: flex; align-items: center; justify-content: flex-start; flex-direction: column;}
.section06 .shop_area .con .tkt_t .name span {line-height:0.87; font-weight:800; text-transform:uppercase; font-size:32px; color:#000000; background: linear-gradient(to right, #754900, #2f1900); -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; filter: drop-shadow(0 0.2rem 0 rgba(255, 255, 255, 0.5));}
.section06 .shop_area .con .tkt_t .txt {padding: 0 1rem; margin-top:0.7rem; color:#5c3a00; font-size:16px; text-transform:uppercase; letter-spacing:0.02em; font-weight:700; line-height:1.2;}
.section06 .shop_area .con .tkt_t .txt span {color:#fff; display:inline-block; background: linear-gradient(to right, #ff66fa, #4778ff); border-radius:9px; padding:0 1.2rem;}
.section06 .shop_area .con .tkt_m {position:relative; height:0; overflow:hidden; transition: all ease-in-out 0.3s;}
.section06 .shop_area .con .tkt_m .sale {text-transform:uppercase; color:#fff; font-size:16px; font-weight:800; position:absolute; flex-direction:column; display:flex; top:1.1rem; right:0.5rem; width:98px; height:101px; align-items:center; justify-content:center; background:url('/images/common/event/2025/astel/bg_sale.png') 0 0 no-repeat; background-size:100% auto;}
.section06 .shop_area .con .tkt_m .sale font {margin-bottom:-0.3rem; text-shadow:0 0.3rem 0.5rem rgba(39, 8, 3, 0.5); font-family:'olivia'; font-size:40px; font-weight:400; color:#f0ff00; letter-spacing:-0.02em; line-height:1;}
.section06 .shop_area .con .tkt_b {position:relative; padding:0 12% 5px; display:flex; align-items:center; justify-content:flex-start; height:118px; overflow:hidden; background-repeat:no-repeat; background-position:0 0; background-size:100% auto; background-image:url('/images/common/event/2025/astel/ticket_b01.png');}
.section06 .shop_area .con .tkt_b:before {content:''; display:block; position:absolute; top:50%; right:6%; width:8.5rem; height:6rem; transform:translate(0 , -50%); background:url('/images/common/event/2025/astel/tkt_logo_img.png') 0 0 no-repeat; background-size:100% auto;}
.section06 .shop_area .con .tkt_b li {margin-bottom:0.6rem; position:relative; text-align:left; font-size:14px; color:#5c3900; font-family:'Roboto'; font-weight:700; line-height:1.1; text-transform:uppercase; padding-left:15px;}
.section06 .shop_area .con .tkt_b li:last-child {margin-bottom:0;}
.section06 .shop_area .con .tkt_b li:before {content:''; display:block; position:absolute; top:1px; left:0; width:12px; height:12px; background:url('/images/common/event/2025/astel/li_dot.png') 0 0 no-repeat; background-size:100% auto;}

.section06 .shop_area .bn02 {animation-delay:0.3s;}
.section06 .shop_area .bn02 .con .tkt_t {background-image:url('/images/common/event/2025/astel/ticket_t02.png'); justify-content:center; padding-top:0;}
.section06 .shop_area .bn02 .con .tkt_t .name span {background: linear-gradient(to right, #4778ff, #00217d);}
.section06 .shop_area .bn02 .con .tkt_t .txt {color:#2048b7;}
.section06 .shop_area .bn02 .con .tkt_m {transition: all ease-in-out 0.3s 0.2s;}
.section06 .shop_area .bn02 .con .tkt_b {background-image:url('/images/common/event/2025/astel/ticket_b02.png');}
.section06 .shop_area .bn02 .con .tkt_b li {color:#2048b7;}

.section06 .shop_area .bn03 {animation-delay:0.6s;}
.section06 .shop_area .bn03 .con .tkt_t {background-image:url('/images/common/event/2025/astel/ticket_t03.png'); justify-content:center; padding-top:0;}
.section06 .shop_area .bn03 .con .tkt_t .name span {background: linear-gradient(to right, #d100ca, #4d004c);}
.section06 .shop_area .bn03 .con .tkt_m {transition: all ease-in-out 0.3s 0.3s;}
.section06 .shop_area .bn03 .con .tkt_b {background-image:url('/images/common/event/2025/astel/ticket_b03.png');}
.section06 .shop_area .bn03 .con .tkt_b li {color:#7c1a7b;}

.section06 .shop_area .bn04 {animation-delay:0.9s;}
.section06 .shop_area .bn04 .con .tkt_t {background-image:url('/images/common/event/2025/astel/ticket_t04.png');}
.section06 .shop_area .bn04 .con .tkt_t .name span {background: linear-gradient(to right, #015171, #323232);}
.section06 .shop_area .bn04 .con .tkt_t .txt {color:#015171;}
.section06 .shop_area .bn04 .con .tkt_m {transition: all ease-in-out 0.3s 0.4s;}
.section06 .shop_area .bn04 .con .tkt_b {background-image:url('/images/common/event/2025/astel/ticket_b04.png');}
.section06 .shop_area .bn04 .con .tkt_b li {color:#015171;}

.animated .shop_area .con .tkt_m {height:30.8rem;}




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

@media screen and (max-width: 2400px) {	
.cha_sc06 {left:1rem;}
.cha_sc05 {right:-8rem;}
}

@media screen and (max-width: 2000px) {	
header {padding-left:3rem; padding-right:3rem;}
header .btn_today {right:3rem;}
	
.cha_sc05 {right:-14rem;}

.section02 .con_l:before, .section02 .con_r:before {height:18rem;}
.section02 .con_r:before {width:49rem;}
.section02 .con_l:before {width:58rem;}

.section03 .bg_light:before {left:2.4rem;}
.section03 .bg_light:after {right:2.4rem;}
	
.fix_sns {left:2.4rem; bottom:2.4rem;}	
.btn_top {right:2.4rem; bottom:2.4rem;}
}

@media screen and (max-width: 1800px) {
.cha_sc05 {display:none;}

.section02 .inner {max-width: 1420px;}

.section04 .swiper-button-next {right:-12.6rem;}
.section04 .swiper-button-prev {left:-12.6rem;}
}	

@media screen and (max-width: 1700px) {
.section02 .inner {max-width:1200px;}	
.section02 .con_lr {margin-top:6.4rem;}
.section02 .con_lr .con_m {margin-left:0; transform:translate(-50% , 0); width: max-content;}	
.section02 .con_lr .con_m > img {width:720px;}
.section02 .con_r {margin-right:-3rem;}
.section02 .pass .con {width:320px; height:320px;}
.section02 .pass .tit {font-size:30px;}
.section02 .pass .for span {font-size:16px; height:25px;}
.section02 .pass .txt {font-size:15px;}
.section02 .vod {width:370px; height:372px;}
.section02 .vod:before {background-size:100% auto;}
.section02 .con_l .desc .tit span {font-size:37px;}
.section02 .con_l .desc .txt {font-size:22px;}
.section02 .con_l .desc .txt span {height:33px;}
.section02 .con_lr .con_m .btn_detail {width:56px; height:56px; background-size:100% auto;}
.section02 .con_l:before, .section02 .con_r:before {height:130px; bottom:11rem;}
.section02 .con_r:before {width:354px;}
.section02 .con_l:before {width:419px;}
}	

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

.section03 .cha_slide .cha02 {margin-right:0;}
.section03 .cha_slide .cha03 {margin-left:0;}

.section04 .inner {max-width:1120px;}	
.section04 .motion_wrap .desc {margin: 0 11.2rem;}
.section04 .swiper-button-next {right:-14.6rem;}
.section04 .swiper-button-prev {left:-14.6rem;}
.section04 .sc04_cha {max-height:500px;}
.section04 .sc04_obj {max-height:303px;}
.section04 .stat {padding:2rem; bottom:2.4rem; right:2.4rem;}

.section06 .shop_area .con {max-width:270px; height: 467px;}
.section06 .shop_area .con .tkt_t {height:113px; padding-top:0; justify-content:center;}
.section06 .shop_area .con .tkt_t .name span {font-size:26px;}
.section06 .shop_area .con .tkt_t .txt {font-size:14px; margin-top:5px;}
.section06 .shop_area .con .tkt_m .sale {width:8rem; height:8.2rem; font-size:14px;}
.section06 .shop_area .con .tkt_m .sale font {font-size:33px;}
.section06 .shop_area .con .tkt_b {height:98px; padding: 0 7% 5px;}
.section06 .shop_area .con .tkt_b:before {width:7rem; height:4.9rem;}

.animated .shop_area .con .tkt_m {height:256px;}

}


@media screen and (max-width: 1560px) {	
.item_wrap {padding-left:13rem;}	
.item_wrap .swiper-button-next, .item_wrap .swiper-button-prev {top:53%;}
.item_wrap .swiper-button-prev {left:7.2rem;}
.item_wrap .swiper-button-next {right:-2.4rem;}

.pop_video {width: 60%;}

}
	
@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;}

.section03 .cha_slide .cha02 {margin-right:-3.2rem;}
.section03 .cha_slide .cha03 {margin-left:-3.2rem;}

.section04 {padding-bottom:20rem;}
.section04 .inner {padding:0 8.4rem;}
.section04 .motion_wrap .desc {margin:0 10%;}
.section04 .stat {position:relative; bottom:auto; left:auto; right:auto; text-align:left; min-height: auto; margin:15% auto 0;}
.section04 .stat .graph {width:calc(100% - 126px);}
.section04 .stat li {margin-bottom : 0.8rem;}
.section04 .stat li:last-child {margin-bottom: 0;}
.section04 .swiper-button-next, .section04 .swiper-button-prev {transform: none; top: 30rem;}
.section04 .swiper-button-next {right:-18rem;}
.section04 .swiper-button-prev {left:-18rem;}
.section04 .motion_wrap .info {top:2.5%;}
.section04 .motion_wrap .info .txt01 {font-size:30px;}
.section04 .motion_wrap .info .txt02 {font-size:16px; margin-top:1rem;}
.section04 .sc04_cha01 {transform: translate(-72%, 42%);}
.section04 .sc04_cha02 {transform: translate(72%, 42%);}
.section04 .sc04_obj01 {transform: translate(45%, 65%);}
.section04 .sc04_obj02 {transform: translate(-45%, 65%);}
}

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

@media screen and (max-width: 1360px) {	
.fix_sns .btn_sns {display:block;}
.fix_sns .btn_sns.open {background-position:0 100%;}
.fix_sns ul {display:none;}

.section01 {padding-top:36rem;}
.section01 .idol_wrap > img {height:960px;}

.section04 .swiper-button-next {right:-13rem;}
.section04 .swiper-button-prev {left:-13rem;}
}

@media screen and (max-width: 1280px) {
.section01 {padding-top:44rem;}	
.section01 .idol_wrap {top:0;  transform: translate(-50%, 10%);}
.section01 .title_wrap .title {max-width:540px; margin:0 auto;}

.section02 {padding-bottom:8rem;}
.section02 .sec_tit span {font-size:54px;}
.section02 .sec_tit br {display:block;}	
.section02 .con_lr {display:block; margin-top:10px;}
.section02 .con_l {display:block; position:static;}
.section02 .con_l .desc {text-align:center; margin-top:0; margin-bottom: 48rem;}
.section02 .con_l .desc .txt {display:inline-block; text-align:center;}
.section02 .con_l .desc .txt span {justify-content:center;}
.section02 .vod {margin:0 auto;}
.section02 .pass li {display:inline-block; vertical-align:top;}
.section02 .pass .free {margin-bottom:0;}
.section02 .pass .prem {margin-left:0;}
.section02 .con_lr .con_m {bottom:auto; transform: translate(-50%, 28%) !important;;}
.section02 .con_lr .con_m:after, .section02 .con_lr .con_m:before {display:none;}
.section02 .con_lr .con_m > img {width:500px;}
.section02 .vod {z-index: 1;}
.section02 .con_lr .con_m .btn_detail {flex-direction: column; min-width:134px; width:auto; height:72px; background:rgba(0, 0, 0, 0.5); border-radius:1.5rem; padding:0 10px; display:flex; align-items:center; justify-content:center;}
.section02 .con_lr .con_m .btn_detail:before {content:''; display:block; margin:0 auto; width:20px; height:22px; background:url('/images/common/event/2025/astel/icon_more.png') 0 0 no-repeat; background-size:100% auto;}
.section02 .con_lr .con_m .btn_detail:after {width: auto; height: auto; top: 0; bottom: 0; left: 0; right: 0; content: ""; display: block; position: absolute; inset: 0; border-radius: 1.5rem; padding: 0.5rem; background: linear-gradient(to right, #ebd5ff, #c6efff); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude;}
.section02 .con_lr .con_m .btn_detail span {font-size:18px; font-weight:900; text-transform:uppercase; background: linear-gradient(to right, #ebd5ff, #c6efff); -webkit-background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0px 0.3rem 0px rgba(62, 17, 126, 0.5));}
.section02 .con_lr .con_m .btn_t {right:10%;}
.section02 .con_lr .con_m .btn_m {left:11%;}
.section02 .con_lr .con_m .btn_b {right:10%; bottom:36%;}
.section02 .con_r {margin:0 -3rem;}
.section02 .con_l:before, .section02 .con_r:before {bottom: 47rem;}
.section02 .con_l:before {right: -7%;}
.section02 .con_r:before {left:0;}

.section03 .cha_slide .slick-slide img {height:730px;}
.section03 .character .name {width:16rem; height:16rem;}
.section03 .character .name .sort {font-size:19px;}
.section03 .character .name01 {transform: translate(100% , -63%);}
.section03 .character .name02 {right: 0; transform: translate(-115%, -63%);}
.section03 .character .name .txt span {font-size:25px;}
.section03 .character .btn_info {width:60px; height:60px;}
.section03 .cha_slide .cha04 .desc {transform: translate(96%, -64%);}	
	
.section04 .swiper-button-next, .section04 .swiper-button-prev {width: 14.1rem; height: 12.8rem;}	
.section04 .swiper-button-next {right:-7rem;}
.section04 .swiper-button-prev {left:-7rem;}
.section04 .swiper-button-next .name, .section04 .swiper-button-prev .name {bottom:12%; font-size:14px;}
	
.section05 .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 {padding-left:7.2rem;}
.item_wrap .swiper-pagination {display:none;}
.item_wrap .item_list li .con .level:before {left:0;}
.item_wrap .item_list li:nth-child(5n) .con .level:before {display:block;}

.item_wrap .item_list li .con .item .name br {display:none;}
.section05 .swiper-button-next, .section05 .swiper-button-prev {display:none !important;}
.pop_video {width: 60%;}
}  

@media screen and (max-width: 1150px) {
.section01 {padding-top:38rem;}	
.section01 .idol_wrap > img {height:840px;}
	
.section04 .swiper-button-next, .section04 .swiper-button-prev {top:38rem;}	
.section04 .motion_wrap .con .name {margin-bottom:2.4rem;}	
.section04 .motion_wrap .info {position:relative; margin: 0 -10% 15%; top:auto; left:auto; right:auto;}	
}
	
@media screen and (max-width: 1023px) {
header {padding-top:4rem;}	
header .btn_today {top:3rem;}
header .nation_wrap {top:3.3rem; right:29rem;}

.pop_cha .btn_pop_arr {left:50%; transform:translate(-50% , 0); top:auto; bottom:-7rem;}
.pop_cha .btn_pop_l {margin-left:-3rem;}
.pop_cha .btn_pop_r {margin-left:3rem; transform:translate(-50% , 0) scaleX(-1);}

.item_wrap .item_list .name {padding:0 7%;}

.section03 .cha_slide .slick-slide img {height:560px;} 
.section03 .character .desc .type {width:90px; height:27px; padding-bottom:0; margin-bottom:0.4rem;}
.section03 .character .desc .type span {font-size:14px;}
.section03 .character .btn_info {width:50px; height:50px;}
.section03 .character .name {width:12rem; height:12rem;}
.section03 .character .name .txt span {font-size:18px;}
.section03 .character .name .sort {font-size:15px;}
.section03 .character .name .txt {margin-top:3px;}

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

@media screen and (max-width: 900px) {
.section01 {padding-top:38rem;}	
.section01 .idol_wrap {transform: translate(-50%, 13%);}
.section01 .idol_wrap > img {height:750px;}
}

/*** max-width 768 ***/
@media screen and (max-width: 768px) {
html {font-size:32%;}	
.mobile {display:block;}
.btn_top {width:50px; height:47px;}
.btn_top span {font-size:2.5rem; }

.pop_video {width:75%;}
.pop-up .pop-close {width:30px; height:30px; margin-top:-15px;}

.pop_item {width:auto; left:2.5rem; right:2.5rem; transform:translate(0 , -50%);}
.pop-up .box h3 span {font-size:4.9rem;}
.pop-up .box .desc .detail {font-size:2rem;}
.pop-up .box .desc .detail .tit {font-size:2.2rem; height:25px;}
.pop-up .box .desc .img img {max-width:50%;}
.pop-up .box .desc.in_two .detail .tit {height:30px; flex-direction: column;}
.pop-up .box .desc.in_two .detail br {display:none;}
.pop_character .box .desc .detail {margin-top:-5%;}

.pop_cha .box h3 span {font-size:3.9rem;}
.pop-up .box .desc .how {font-size:2.1rem;}
.pop_cha .cha_info01 .box .desc .detail {margin-top:-3rem;}
.pop_cha .box .desc .detail .coming {font-size:2.1rem;}

.pop_cha .btn_pop_l {margin-left: -4rem;}
.pop_cha .btn_pop_r {margin-left:4rem;}

.pop_cha .btn_pop_arr {width:30px; height:30px;}

header .bi img {width:24rem;}
header .btn_today span {font-size:2.1rem;}
header .nation_wrap {right:40rem;}
header .nation_wrap a {font-size:2.3rem;}
header .nation_wrap a img {width:12px;}
header .nation_wrap a span {margin:0 0.8rem;}

.sec_tit span {font-size:6.9rem;}
.sec_tit02 {font-size:3.2rem;}


.fix_sns li a {width:43px; height: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 span {font-size:3.9rem;}
.item_wrap .it_tit:before, .item_wrap .it_tit:after {background-size:100% auto;}
.item_wrap .it_tit span {font-size:2rem; left:1px;}
.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.3rem;}
footer .logo img {max-width:16.8rem;}

.section01 {padding:50% 0 15%;}
.section01 .idol_wrap {width:100%; height:100%; left:auto; transform: translate(0, 13%);}
.section01 .idol_wrap > img {height:65%;}
.section01 .title_wrap .title {max-width:80%;}
.section01 .title_wrap .date span {font-size:4rem;}
.section01 .idol_wrap .idol01 {margin-right:-11.5%;}
.section01 .idol_wrap .idol04 {margin-left:-5.4%}

.section02 .bg .cube {width: calc(100% / 2);}
.section02 .sec_tit span {font-size:6.9rem;}
.section02 .con_l .desc {margin-bottom:84rem;}
.section02 .con_l .desc .tit span {font-size:4.6rem;}
.section02 .con_l .desc .txt {font-size:3.1rem;}
.section02 .con_l .desc .txt span {height:25px;}
.section02 .pass .tit {font-size:3.9rem;}
.section02 .pass .for span {font-size:2.5rem; height:20px;}
.section02 .pass .txt {font-size:2.5rem;}
.section02 .pass li {margin:0 -2rem;}
.section02 .pass .con {width:210px; height:210px;}
.section02 .vod {width:240px; height:241px;}
.section02 .con_lr .con_m {transform: translate(-50%, 22%);}
.section02 .con_lr .con_m > img {max-width:90%;}
.section02 .con_lr .con_m .btn_detail {height:50px; min-width:120px;}
.section02 .con_lr .con_m .btn_detail span {font-size:2.7rem;}
.section02 .con_lr .con_m .btn_detail:before {width:16px; height:18px;}
.section02 .con_lr .con_m .btn_t {top:12%; right:14%;}
.section02 .con_lr .con_m .btn_m {left:15%;}
.section02 .con_lr .con_m .btn_b {bottom:40%; right:14%;}
.section02 .con_l:before {bottom:65rem; right:auto; left:0;}
.section02 .con_r:before {bottom:48rem; left:auto; right:0;}
.section02 .vod:before {background-size:100% auto;}

.section03 .cha_slide .slick-slide img {height: 390px;} 	
.section03 .character .desc .type {width:70px; height:21px;}
.section03 .character .desc .type span {font-size:2.3rem;}
.section03 .character .name01 {transform: translate(158%, -63%);}
.section03 .character .name02 {transform: translate(-172%, -63%);}
.section03 .character .name .sort {font-size:2.4rem;}
.section03 .character .name .txt span {font-size:2.7rem;}
.section03 .character .btn_info {width:36px; height:36px;}
.section03 .cha_slide .cha01 .desc {transform: translate(36%, -64%);}
.section03 .cha_slide .cha02 .desc {transform: translate(-45%, -64%);}
.section03 .cha_slide .cha03 .desc {transform: translate(14%, -64%);}
.section03 .cha_slide .cha04 .desc {transform: translate(80%, -64%);}


.section04 .motion_wrap .con .name {height:48px;}
.section04 .motion_wrap .con .name:after {background-size:1.3rem auto, 1.3rem auto, 1.3rem auto, 1.3rem auto, 0.1rem auto, 0.1rem auto, 1.3rem auto, 1.3rem auto; }
.section04 .motion_wrap .con .name span {font-size:4.5rem;}
.section04 .motion_wrap .info {font-size:2.8rem;}
.section04 .motion_wrap .info .txt01 {font-size:3.9rem;}
.section04 .motion_wrap .info .txt02 {font-size:2.5rem;}
.section04 .motion_wrap .info .txt02 a:before {width:10px; height:10px;}
.section04 .stat li > div {font-size:1.9rem;}
.section04 .swiper-button-prev {top:44rem;}
.section04 .swiper-button-next .name, .section04 .swiper-button-prev .name {font-size:1.9rem;}
.section04 .sc04_cha {max-height: 200px;}
.section04 .sc04_obj {max-height:121px;}
.section04 .motion_wrap .img_3d {left:1.2rem; max-width:9.6rem;}


.section05 .sec_tit span {font-size:4.9rem;}

.section06 .shop_area .con {max-width:160px; height:278px;}
.section06 .shop_area .con .tkt_t {height:67px;}
.section06 .shop_area .con .tkt_t .name span {font-size:3rem;}
.section06 .shop_area .con .tkt_t .txt {font-size:2.1rem; margin-top:0;}
.section06 .shop_area .con .tkt_t .txt span {padding:1px 1rem;}
.section06 .shop_area .con .tkt_m .sale {font-size:2.1rem;}
.section06 .shop_area .con .tkt_m .sale font {font-size:3.8rem;}
.section06 .shop_area .con .tkt_b {height:58px; padding: 0 5% 3px;}
.section06 .shop_area .con .tkt_b:before {right:3%;}
.section06 .shop_area .con .tkt_b li {font-size:1.9rem; padding-left:12px;}
.section06 .shop_area .con .tkt_b li:before {width:9px; height:9px;}

.section06 .bg .float01 {max-width:29.6rem;}
.section06 .bg .float02 {max-width:23rem;}
.section06 .bg .float03 {max-width:16.8rem;}
.section06 .bg .float04 {max-width:25rem; right:48.4rem;}
.section06 .bg .parts01 {max-width:36rem;}
.section06 .bg .parts02 {max-width:36rem;}
.section06 .bg .parts03 {max-width:36rem;}
.section06 .bg .parts04 {max-width:22.8rem;}
.section06 .bg .parts05 {max-width:22.8rem;}
.section06 .bg .parts06 {max-width:22.8rem;}
.section06 .bg .parts07 {max-width:8.1rem;}
.section06 .bg .parts08 {max-width:14.9rem; bottom:11.7rem;}


.animated .shop_area .con .tkt_m {height:151px;}


}

@media screen and (max-width: 560px) {
header {padding-left:2rem; padding-right:2rem;}	
header .btn_today {right:1rem;}
header .btn_today span {font-size:2.1rem;}
header .nation_wrap {right:33rem;}
	
.section03 .cha_slide .slick-slide img {height: 280px;} 
.section03 .cha_slide .cha01 .desc {transform: translate(-7%, -64% );}
.section03 .cha_slide .cha04 .desc {transform: translate(48%, -64%);}
.section03 .character .name01 {transform: translate(80%, 30%);}
.section03 .character .name02 {transform: translate(-95%, 30%);}
}
	
@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: 380px) {
.section02 .vod {width:220px; height:221px;}
.section02 .pass .con {width:200px; height:200px;}
.section02 .pass .tit {font-size:3.3rem;}
.section02 .pass .for span {font-size:2.3rem;}
.section02 .pass .txt {font-size:2.1rem;}
}

@media screen and (max-width: 369px) {
.section04 .motion_wrap .con .name {font-size:4.6rem;}
.section03 .cha_slide .slick-slide img {height: 240px;}
.section03 .cha_slide .cha04 .desc {transform: translate(27%, -64%);}
.section03 .character .name01 {transform: translate(60%, 30%);}
.section03 .character .name02 {transform: translate(-80%, 30%);}

}

@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 float {
    0% {
        opacity: 1;
    }

    50% {
        transform: translate(0, 2rem);
        opacity: 1;
    }

    100% {
        opacity: 1;
    }
}

@keyframes float02 {
    0% {
        opacity: 1;
    }

    50% {
        transform: translate(0, -2rem);
        opacity: 1;
    }

    100% {
        opacity: 1;
    }
}


@keyframes up {
    70% {
        transform: translateY(0%);
    }

    80% {
        transform: translateY(-2%);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes up02 {
    70% {
        transform: translateY(0%);
    }

    80% {
        transform: translateY(-0.5rem);
    }

    100% {
        transform: translateY(0);
    }
}

 @keyframes morph{
  0%,100%{
  border-radius: 62% 78% 90% 50% / 55% 55% 65% 65%;
    transform: translate3d(0,0,0) rotateZ(0.01deg);
  }
  34%{
      border-radius: 90% 50% 66% 74% / 60% 59% 91% 90%;
    transform:  translate3d(0,0,0) rotateZ(0.01deg);
  }
  50%{
    transform: translate3d(0,0,0) rotateZ(0.01deg);
  }
  67%{
    border-radius: 100% 60% 90% 100% / 100% 100% 60% 60% ;
    transform: translate3d(0,0,0) rotateZ(0.01deg);
  }
} 

@keyframes tp {
0% {transform:translate(-50% , 0) scale(1);}
2%, 52% {transform:translate(-50% , 0) scale(1.001);}
8%, 58% {transform:translate(-50% , 0) scale(1.004);}
18%, 68%  {transform:translate(-50% , 0) scale(1);}
26%, 76% {transform:translate(-50% , 0) scale(1.01);}
36%, 86% {transform:translate(-50% , 0) scale(1.04);}
44%, 94%, to {transform:translate(-50% , 0) scale(1);}	
}

@keyframes scaleUP {
    100% {
        transform: scale(1.05);
    }
}

@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;
    }
}

@keyframes bg-move {
    0% {
        background-size: auto 110%;
    }

    to {
        background-size: auto 100%;
    }
}

@keyframes ghost {
  0% {
     transform:translate(0, 200%);
    opacity:1;
  }
  20% {
    transform: translate(0, 160%);
  }
  40% {
    transform: translate(0, 120%);
  }
  60% {
    transform: translate(0, 80%);
  }
  80% {
    transform: translate(0, 40%);
  }
  100% {
    transform: translate(0, 0);
    opacity: 0;
  }
}

@keyframes sway {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(1deg);
  }
  50% {
    transform: rotate(0deg);
  }
  75% {
    transform: rotate(-1deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

@keyframes sway02 {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(-1deg);
  }
  50% {
    transform: rotate(0deg);
  }
  75% {
    transform: rotate(1deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
 
 @keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

 @keyframes rotation02 {
  0% {
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

@keyframes slide-in-elliptic-top-fwd {
  0% {
    -webkit-transform: translateY(-600px) rotateX(-30deg) scale(0);
            transform: translateY(-600px) rotateX(-30deg) scale(0);
    -webkit-transform-origin: 50% 100%;
            transform-origin: 50% 100%;
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0) rotateX(0) scale(1);
            transform: translateY(0) rotateX(0) scale(1);
    -webkit-transform-origin: 50% 1400px;
            transform-origin: 50% 1400px;
    opacity: 1;
  }
}

@keyframes bounce-top {
  0% {
    -webkit-transform: translateY(-45px);
            transform: translateY(-45px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
    opacity: 1;
  }
  24% {
    opacity: 1;
  }
  40% {
    -webkit-transform: translateY(-24px);
            transform: translateY(-24px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  65% {
    -webkit-transform: translateY(-12px);
            transform: translateY(-12px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  82% {
    -webkit-transform: translateY(-6px);
            transform: translateY(-6px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  93% {
    -webkit-transform: translateY(-4px);
            transform: translateY(-4px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  25%,
  55%,
  75%,
  87% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    opacity: 1;
  }
}