@charset "utf-8";






@media (max-width: 1480px) {

}


/* **************************************** *
 * 1200px
 * **************************************** */
@media (max-width: 1200px){

}

/* **************************************** *
 * 1023px
 * **************************************** */
@media (max-width: 1023px){
    .main_content_section {margin-top:110rem;}
    .main_content_section_top {margin-bottom:50rem;}
    .main_content_section h2 {font-size: 55rem;}
    .btn_more_view {bottom:7rem;}

    .main_visual_wrap {width:100%;}
    .main_visual {height:auto;}
    .main_visual_content h2 {font-size:35rem;}
    .main_visual_content p {font-size:16rem;}
    .main_visual .main_visual_state {top:110rem;}
    .main_visual .btn_wrap {margin-top:25rem;}
    .main_visual .btn_wrap span,
    .main_visual .btn_more_view {font-size:13rem;}
    .main_visual .btn_wrap a:after {margin-top: -4rem;}

    .main_first_contents_right {width:100%;font-size: 0; display:flex;}
    .main_login_banner {width: calc(100% - 234rem);height: 214rem;display:flex; align-items: center; justify-content: center; margin-top:20rem;margin-right: 20rem;}
    .main_login_banner_inner {display:block;}
    .main_login_banner p {margin-top:5rem;}
    .main_login_banner .login_info b {display:block;}
    .main_ad_banner {display:inline-block;vertical-align:top;  margin-top:20rem;}
    .main_ad_banner p {font-size:18rem;}
    /* html[lang="zh-TW"] .main_ad_banner p {font-size:20rem;} */
    .main_login_banner .login_icon {display:block; margin-bottom:5rem;}
    .main_login_banner a {display:inline-block;max-width:inherit; padding: 8rem 30rem;margin-top: 15rem;}

    .game_info {padding:20rem;}
    .game_info h3 {font-size:20rem; margin-top:5rem;}


    .event_item figure {height:auto;}
    .event_info h3 {font-size:17rem;}
    .event_info h4 {font-size:23rem;}
 
    .main_notice_wrap { padding-bottom: 290rem;}
    .notice_slider { height: 50rem; line-height: 50rem; padding-left: 40rem; padding-right: 100rem; margin-right: 30rem;}
    .main_notice_item p {margin-right: 5%; font-size: 19rem;}
    .main_notice_item p span:before {width:calc(100% + 6rem); left:-3rem; bottom:-3rem;}
    .main_notice_item h3 {width:78%; font-size: 20rem;}
    .notice_slider .swiper-button-wrap {width:90rem; height: 40rem; line-height: 40rem;}
    .notice_slider .swiper-button-prev,
    .notice_slider .swiper-button-next { width: 40rem; height: 40rem;}

}


@media (max-width: 860px) {

    .main_content_section_top {margin-bottom:40rem;}
    .main_content_section h2 {font-size:47rem;}    

    .main_visual_item > figure img {height: 100%;object-fit: cover;}
    .main_visual .main_visual_state {opacity:0; width:auto; top: auto;bottom: 200rem;left: 30rem; transition opacity .3s;}
    .main_visual_content {width: 100%;padding: 30rem;position: relative; transition:none;}
    .main_visual_content:before {opacity:1;}
    .main_visual_content_inner {display:block;}
    .main_visual_content h2 {font-size:32rem;}
    .main_visual_content p {font-size:15rem; padding-top:10rem; color:#fff;}
    .main_visual_content p + p {padding-top:0;}
    .main_visual_content p br {display:none;}
    html.desktop .main_visual_content, html.desktop .main_visual .main_visual_state {opacity:1 !important; visibility: visible !important;}
    html.desktop .main_visual_state {opacity:1}

    .main_login_banner b {font-size:18rem;}
    .main_login_banner .login_icon {width:47rem; height:47rem; line-height:47rem;}
    .main_login_banner a {font-size:14rem; padding-top:6rem;}
    
    .game_item {width: calc(50% - 31rem);}
    .main_game_top .btn_more_view {bottom: auto; top: 13rem;}
    .main_game_tab_list {margin-top:30rem; margin-left:0; display:block;}
    .main_game_tab_list li {margin:0 22rem;}
    .main_game_tab_list li:after {right:-27rem;}
    .main_game_tab_list li button {font-size:18rem;}


    .event_info h4 {font-size:20rem;}
    .event_info h3 {font-size:16rem;}
    .event_info h3 span {font-size:13rem; padding:5rem 12rem 9rem;}
    .event_info p {font-size:16rem;}
    html.ios .event_info h3 span {padding-top:6rem; padding-bottom:8rem;}
    html[lang="zh-TW"] .event_info h3 { padding-left: 115rem;}
    html[lang="zh-TW"] .event_info h3 span { font-size:12rem;}

    .main_notice_item h3 {font-size:18rem;}
    .main_notice_item p {font-size:17rem;}
    
    .event_slider .swiper-wrapper {margin-bottom:40rem;}
    .event_slider .swiper-scrollbar {width: 100%;left: 0;bottom: 0; background:#333; display:block;}
    .event_slider .swiper-scrollbar-drag {background:#666;}
    .event_slide_wrap .swiper_navigation {display:none;}
    
}



@media(max-width: 680px) {

    .btn_more_view {padding-top: 5rem; padding-bottom: 5rem;}

    .main_login_banner {width: calc(100% - 234rem); margin-right:20rem;}
    .main_ad_banner {margin-top:20rem;}
    
    .main_game_tab_list li {margin:0 17rem;}
    .main_game_tab_list li:after {right:-22rem;}
    .game_list {margin:-10rem;}
    .game_item { width: calc(50% - 20rem); margin:10rem;}

    .event_info {padding-left:30rem;}
    .event_info p {font-size:15rem;}
    .event_info p:before {bottom:-4rem;}

    .main_notice_wrap {padding-bottom:220rem;}

}



@media (max-width: 540px){
    
    .body_main #container { padding-top: 90rem;}

    .main_content_section {margin-top:70rem;}

    .main_visual_item > figure img {object-fit: cover; }
    .main_visual .main_visual_state {bottom:215rem;}
    .main_visual .btn_wrap {margin-top:20rem;}
    .main_visual .btn_wrap a {padding-top:5rem; padding-bottom: 7rem;}

    .main_login_banner {padding-left:20rem; padding-right:20rem;}
    .main_login_banner .login_icon { width: 35rem; height: 35rem; line-height: 35rem;}
    .main_login_banner .login_icon:before {font-size:16rem;}
    .main_login_banner b {font-size:16rem;}
    .main_login_banner a { font-size:13rem;}

    .login_info li {margin-top:2rem; font-size:14rem;}

    .main_game_tab_list {margin-top:30rem;}
    .main_game_tab_list li:first-child {margin-left:0;}
    .main_game_tab_list li.active:before {width:80%; left:10%;bottom:2rem;}
    .game_item {border:none;background: none;box-shadow: none;border-radius: 0; }
    .game_item figure {border-width: 2rem;border-image-source: linear-gradient(to left, #23688e, #861f91);background: linear-gradient(#23688e,#23688e) padding-box, linear-gradient(to right, #861f91, #23688e) border-box;border: 2rem solid rgba(0,0,0,0);border-radius: 8rem;overflow: hidden;}
    .game_tag { font-size: 12rem; color: #fff; padding: 2rem 10rem 4rem;}
    .add_game { width: 25rem; height: 25rem;}
    .add_game:before {font-size:10rem; top:50%;}
    .game_info {padding: 0;position: static;background: none;margin-top: 10rem; margin-bottom:15rem;}
    .game_info h3 {font-size:17rem; margin-top:3rem; height:auto;}
    .game_info li {font-size:13rem;}
    .game_info .game_desc {height:auto; opacity:1; visibility:visible; color:#ddd; margin-top:5rem; font-size:15rem;}
    html.desktop .game_item:hover .game_info {background:none;}
    /* html.desktop .game_item:hover .game_desc {opacity:0;visibility:hidden} */
    html:not(.mobile) .game_item:hover .game_desc {margin-top:5rem; height:42rem;}

    .event_slider .swiper-wrapper {margin-bottom:30rem;}

    .notice_slider {padding-right:30rem;}
    .notice_slider .swiper-button-wrap {width:auto;}
    .notice_slider .swiper-button-prev, .notice_slider .swiper-button-next {width:30rem; height:20rem; border:none; position:static; display:block;}
    .notice_slider .swiper-button-prev {right:0;}
    .notice_slider .swiper-button-prev:after, .notice_slider .swiper-button-next:after {color:#aaa;}

}


@media (max-width: 480px){

    .body_main #container { padding-top: 70rem;}

    .main_content_section h2 {font-size:35rem;}
    .main_content_section_top {margin-bottom:30rem;}
    .btn_more_view {font-size:13rem;}

    .main_visual_content {padding:20rem;}
    .main_visual_content_inner {padding-top:35rem;}
    .main_visual_content h2 {font-size:26rem;}
    .main_visual_content p {font-size:14rem;}
    .main_visual .main_visual_state {left:17rem; bottom:230rem;}
    .main_visual_state .swiper_progress_wrap,
    .main_visual_state .swiper_progress_hidden_space {width:90rem;}
    .main_visual_state .swiper_navigation {width:70rem; left: 140rem; }
    .main_visual_state .swiper_navigation > button:after {font-size:10rem;}

    .main_login_banner {width: calc(100% - 162rem); height:150rem; padding-left: 5rem; padding-right: 5rem; margin-top:12rem; margin-right:12rem;}
    .main_login_banner .login_icon {display:block; margin-bottom:8rem;}
    .main_login_banner b {font-size:15rem; margin-left:0}
    .main_login_banner p {display:none;}
    .main_login_banner a {font-size:12rem; padding: 4rem 25rem 6rem; margin-top: 10rem;}

    .main_ad_banner {width:150rem; height:150rem; margin-top:12rem;}
    .main_ad_banner_logo {width: 90rem; height: 90rem;}
    .main_ad_banner p {margin-top:5rem;font-size:15rem;}
    .main_ad_banner a img {width:60rem;}
    .main_ad_banner_discord:before {font-size:50rem;}
    /* html[lang="zh-TW"] .main_ad_banner p {font-size:14rem;}
    html[lang="zh-TW"] .main_ad_banner a img {width:75rem;}
    html[lang="en"] .main_ad_banner a img {width:80rem;}
    html[lang="en"] .main_ad_banner p {font-size:13rem;} */

    .game_list { margin: -6rem;}
    .game_item {width: calc(50% - 12rem); margin:6rem;}
    .game_info h3 {font-size:15rem; line-height:1.3;}
    .game_info .game_desc {font-size:14rem;}
    .main_game_tab_list li {margin:0 10rem;}
    .main_game_tab_list li:after { right: -14rem;}
    .main_game_tab_list li button {font-size:17rem;}

    .main_notice_list {padding-top:15rem; padding-bottom:19rem;}
    .notice_slider {margin-right: 10rem;padding-left: 23rem;padding-right: 22rem;}
    .main_notice_item p {font-size:14rem; margin-right:5%;}
    .main_notice_item h3 {width: 75%;font-size: 15rem;}

}

@media (max-width: 375px){


}