.pc
{
    display: none !important;
}

@-webkit-keyframes shake
{
    0%
    {
        -webkit-transform: translate3d(-6px, -2px, 0px);
        transform: translate3d(-6px, -2px, 0px);
    }

    10%
    {
        -webkit-transform: translate3d(3px, -3px, 0px);
        transform: translate3d(3px, -3px, 0px);
    }

    20%
    {
        -webkit-transform: translate3d(6px, 4px, 0px);
        transform: translate3d(6px, 4px, 0px);
    }

    30%
    {
        -webkit-transform: translate3d(-2px, 2px, 0px);
        transform: translate3d(-2px, 2px, 0px);
    }

    40%
    {
        -webkit-transform: translate3d(-5px, -4px, 0px);
        transform: translate3d(-5px, -4px, 0px);
    }

    50%
    {
        -webkit-transform: translate3d(5px, -2px, 0px);
        transform: translate3d(5px, -2px, 0px);
    }

    60%
    {
        -webkit-transform: translate3d(3px, 2px, 0px);
        transform: translate3d(3px, 2px, 0px);
    }

    70%
    {
        -webkit-transform: translate3d(-6px, 4px, 0px);
        transform: translate3d(-6px, 4px, 0px);
    }

    80%
    {
        -webkit-transform: translate3d(-3px, -2px, 0px);
        transform: translate3d(-3px, -2px, 0px);
    }

    100%
    {
        -webkit-transform: translate3d(3px, -4px, 0px);
        transform: translate3d(3px, -4px, 0px);
    }
}

@keyframes shake
{
    0%
    {
        -webkit-transform: translate3d(-6px, -2px, 0px);
        transform: translate3d(-6px, -2px, 0px);
    }

    10%
    {
        -webkit-transform: translate3d(3px, -3px, 0px);
        transform: translate3d(3px, -3px, 0px);
    }

    20%
    {
        -webkit-transform: translate3d(6px, 4px, 0px);
        transform: translate3d(6px, 4px, 0px);
    }

    30%
    {
        -webkit-transform: translate3d(-2px, 2px, 0px);
        transform: translate3d(-2px, 2px, 0px);
    }

    40%
    {
        -webkit-transform: translate3d(-5px, -4px, 0px);
        transform: translate3d(-5px, -4px, 0px);
    }

    50%
    {
        -webkit-transform: translate3d(5px, -2px, 0px);
        transform: translate3d(5px, -2px, 0px);
    }

    60%
    {
        -webkit-transform: translate3d(3px, 2px, 0px);
        transform: translate3d(3px, 2px, 0px);
    }

    70%
    {
        -webkit-transform: translate3d(-6px, 4px, 0px);
        transform: translate3d(-6px, 4px, 0px);
    }

    80%
    {
        -webkit-transform: translate3d(-3px, -2px, 0px);
        transform: translate3d(-3px, -2px, 0px);
    }

    100%
    {
        -webkit-transform: translate3d(3px, -4px, 0px);
        transform: translate3d(3px, -4px, 0px);
    }
}

.shake
{
    -webkit-animation: shake 0.09s linear 0s 2 normal;
    animation: shake 0.09s linear 0s 2 normal;
}

body
{
    background-color: #000;
    color: #FFF;
}

.root-bg
{
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 110%;
}

.alt
{
    position: absolute;
    left: 0;
    top: 0;
    width: 0px;
    height: 0px;
    display: block;
    overflow: hidden;
    text-indent: 110%;
    white-space: nowrap;
}

.clearfix:after
{
    content: ".";
    display: block;
    clear: both;
    height: 0;
    visibility: hidden;
}

.clearfix
{
    min-height: 1px;
}

* html .clearfix
{
    height: 1px;
  /*
	height: auto;
	overflow: hidden;
	*/
}

.cf
{
    clear: both;
    height: 0;
}

.video-thumb
{
    margin: 10px auto 0;
    width: 260px;
}

.video-thumb .thumb
{
    display: block;
    width: 260px;
    height: 143px;
    position: relative;
}

.video-thumb .thumb img
{
    display: block;
    width: 100%;
    height: 100%;
}

.video-thumb .thumb::after
{
    content: " ";
    display: block;
    width: 46.5px;
    height: 33px;
    background-image: url(./../img/sp/common/icon_youtube.png);
    background-repeat: no-repeat;
    background-size: 46.5px 33px;
    background-position: 0px 0px;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}

.slick-carousel .slick-prev, .slick-carousel .slick-next
{
    display: none !important;
}

.slick-carousel .slick-dots
{
    text-align: center;
    margin-top: 17px;
}

.slick-carousel .slick-dots li
{
    margin: 0 1px 0;
    display: inline-block !important;
    display: block;
    width: 14px;
    height: 14px;
    background-image: url("./../img/sp/common/bit.png");
    background-repeat: no-repeat;
    background-size: 14px 14px;
    background-position: 0px 0px;
}

.slick-carousel .slick-dots li.slick-active
{
    display: block;
    width: 14px;
    height: 14px;
    background-image: url("./../img/sp/common/bit_focus.png");
    background-repeat: no-repeat;
    background-size: 14px 14px;
    background-position: 0px 0px;
}

.slick-carousel .slick-dots button
{
    color: transparent;
}

.campaign-ui
{
    position: fixed;
    left: 0;
    top: 0;
    z-index: 100;
    pointer-events: none;
    width: 100%;
    height: 100%;
    display: none;
}

.campaign-ui.hide .ui-head
{
    -webkit-transform: translate(0, -77.5px);
    transform: translate(0, -77.5px);
    transition: -webkit-transform 0.2s cubic-bezier(0.55, 0.085, 0.68, 0.53) 0s;
    transition: transform 0.2s cubic-bezier(0.55, 0.085, 0.68, 0.53) 0s;
}

.campaign-ui.hide .ui-foot
{
    -webkit-transform: translate(0, 77.5px);
    transform: translate(0, 77.5px);
    transition: -webkit-transform 0.2s cubic-bezier(0.55, 0.085, 0.68, 0.53) 0s;
    transition: transform 0.2s cubic-bezier(0.55, 0.085, 0.68, 0.53) 0s;
}

.campaign-ui.show .ui-head
{
    -webkit-transform: translate(0, -1px);
    transform: translate(0, -1px);
    transition: -webkit-transform 0.2s cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
    transition: transform 0.2s cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
}

.campaign-ui.show .ui-foot
{
    -webkit-transform: translate(0, 1px);
    transform: translate(0, 1px);
    transition: -webkit-transform 0.2s cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
    transition: transform 0.2s cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
}

.campaign-ui .ui-head
{
    display: block;
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 67.5px;
    background-position: left bottom;
    background-size: 100% 3px;
    background-repeat: no-repeat;
}

.campaign-ui .ui-head .btn-nav-open
{
    position: absolute;
    cursor: pointer;
    pointer-events: auto;
    right: 0px;
    top: 0px;
    display: block;
    background-image: url("./../img/sp/ui/nav/open.png");
    background-repeat: no-repeat;
    background-size: 59px 59px;
    background-position: center;
    width: 80px;
    height: 80px;
    background-position: right 11px top 11px;
    overflow: hidden;
    text-indent: 110%;
    white-space: nowrap;
}

.campaign-ui .ui-foot
{
    display: block;
    position: fixed;
    left: 0px;
    bottom: 0px;
    width: 100%;
    height: 62px;
    background-position: left bottom;
    background-size: 100% 3px;
    background-repeat: no-repeat;
}

.campaign-ui .ui-foot .btn-sound
{
    display: block !important;
    position: absolute;
    cursor: pointer;
    pointer-events: auto;
    left: 5px;
    top: -6px;
    background-image: url(./../img/sp/ui/sound/btn.png);
    background-size: 59px 118px;
    width: 59px;
    height: 59px;
    overflow: hidden;
    text-indent: 110%;
    white-space: nowrap;
}

.campaign-ui .ui-foot .on
{
    background-position: 0 -59px;
}

nav .wrap-opened
{
    position: fixed;
    right: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.75);
    overflow: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    display: none;
    opacity: 0;
}

nav .wrap-opened .bg-layer
{
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: transparent;
    left: 0px;
    top: 0px;
}

nav .wrap-opened .nav-header
{
    width: 100%;
    height: 83px;
    position: relative;
    background-image: url(./../img/sp/ui/partition.png);
    background-position: left bottom;
    background-size: 100% 3px;
    background-repeat: no-repeat;
    pointer-events: none;
}

nav .wrap-opened .nav-header .logo-collabo
{
    display: block;
    width: 184px;
    height: 17px;
    background-image: url("./../img/sp/ui/logo_collabo.png");
    background-repeat: no-repeat;
    background-size: 184px 17px;
    background-position: 0px 0px;
    overflow: hidden;
    text-indent: 110%;
    white-space: nowrap;
    position: absolute;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    top: 0;
    bottom: 0;
    margin-top: auto;
    margin-bottom: auto;
}

nav .wrap-opened .nav-header .btn-nav-close
{
    display: block;
    background-image: url("./../img/sp/ui/close.png");
    background-repeat: no-repeat;
    background-size: 59px 59px;
    background-position: center;
    position: absolute;
    right: 0px;
    top: 0px;
    overflow: hidden;
    text-indent: 110%;
    white-space: nowrap;
    width: 80px;
    height: 80px;
    background-position: right 11px top 11px;
    pointer-events: auto;
}

nav .wrap-opened .push
{
    display: block;
    width: 260px;
    height: 44px;
    background-image: url("./../../index/img/sp/push/btn_push.png");
    background-repeat: no-repeat;
    background-size: 260px 44px;
    background-position: 0px 0px;
    overflow: hidden;
    text-indent: 110%;
    white-space: nowrap;
    margin: 24px auto 0;
    position: relative;
}

nav .wrap-opened .sns
{
    position: relative;
    width: 100%;
    padding: 24px 0;
    box-sizing: border-box;
    text-align: center;
}

nav .wrap-opened .sns ul.list-btn
{
    text-align: center;
}

nav .wrap-opened .sns ul.list-btn li
{
    display: inline-block;
    margin: 0 12.5px;
}

nav .wrap-opened .sns ul.list-btn li .line
{
    display: block;
    width: 54px;
    height: 54px;
    background-image: url("./../img/sp/sns/line.png");
    background-repeat: no-repeat;
    background-size: 54px 54px;
    background-position: 0px 0px;
    overflow: hidden;
    text-indent: 110%;
    white-space: nowrap;
}

nav .wrap-opened .sns ul.list-btn li .twitter
{
    display: block;
    width: 54px;
    height: 54px;
    background-image: url("./../img/sp/sns/twitter.png");
    background-repeat: no-repeat;
    background-size: 54px 54px;
    background-position: 0px 0px;
    overflow: hidden;
    text-indent: 110%;
    white-space: nowrap;
}

nav .wrap-opened .sns ul.list-btn li .facebook
{
    display: block;
    width: 54px;
    height: 54px;
    background-image: url("./../img/sp/sns/facebook.png");
    background-repeat: no-repeat;
    background-size: 54px 54px;
    background-position: 0px 0px;
    overflow: hidden;
    text-indent: 110%;
    white-space: nowrap;
}

nav ul.list-nav li
{
    position: relative;
    width: 100%;
    height: 83px;
    background-color: #000;
    background-image: url(./../img/sp/ui/partition.png);
    background-position: left bottom;
    background-size: 100% 3px;
    background-repeat: no-repeat;
}

nav ul.list-nav li a
{
    width: 100%;
    height: 100%;
}

nav ul.list-nav li a.top
{
    display: block;
    background-image: url("./../img/sp/ui/nav/to_top.png");
    background-repeat: no-repeat;
    background-size: 48px 45.5px;
    background-position: center;
}

nav ul.list-nav li a.movie
{
    display: block;
    background-image: url("./../img/sp/ui/nav/to_movie.png");
    background-repeat: no-repeat;
    background-size: 136.5px 46px;
    background-position: center;
}

nav ul.list-nav li a.character
{
    display: block;
    background-image: url("./../img/sp/ui/nav/to_charachter.png");
    background-repeat: no-repeat;
    background-size: 179.5px 48px;
    background-position: center;
}

nav ul.list-nav li a.campaign
{
    display: block;
    background-image: url("./../img/sp/ui/nav/to_campaign.png");
    background-repeat: no-repeat;
    background-size: 210px 47px;
    background-position: center;
}

nav ul.list-nav li a.potion
{
    display: block;
    background-image: url("./../img/sp/ui/nav/to_potion.png");
    background-repeat: no-repeat;
    background-size: 154.5px 48px;
    background-position: center;
}

#app::before
{
    display: block;
    content: " ";
    clear: both;
    height: 0px;
    border-top: transparent solid 1px;
    width: 100%;
    margin-bottom: -1px;
}

#app .wrap
{
    margin-top: 10px;
    z-index: 1;
    height: 140px;
    position: relative;
}

#app .wrap .icon
{
    display: block;
    width: 64px;
    height: 64px;
    background-image: url("//xflag.com/common/images/monsterstrike_appicon.png");
    background-repeat: no-repeat;
    background-size: 64px 64px;
    background-position: 0px 0px;
    position: absolute;
    left: 0px;
    right: 0px;
    top: 2px;
    margin: 0 auto;
    border-radius: 18%;
    overflow: hidden;
    text-indent: 110%;
    white-space: nowrap;
}

#app .wrap .btn-startup
{
    display: block;
    width: 160px;
    height: 62px;
    background-image: url("./../img/sp/app/btn_startup.png");
    background-repeat: no-repeat;
    background-size: 160px 62px;
    background-position: 0px 0px;
    position: absolute;
    left: 0;
    top: 77px;
    overflow: hidden;
    text-indent: 110%;
    white-space: nowrap;
}

#app .wrap .btn-install
{
    display: block;
    width: 160px;
    height: 62px;
    background-image: url("./../img/sp/app/btn_install.png");
    background-repeat: no-repeat;
    background-size: 160px 62px;
    background-position: 0px 0px;
    position: absolute;
    right: 0;
    top: 77px;
    overflow: hidden;
    text-indent: 110%;
    white-space: nowrap;
}

footer
{
    position: relative;
    width: 100%;
    z-index: 1;
}

footer .to-pagetop
{
    display: block;
    width: 64px;
    height: 64px;
    background-image: url("./../img/sp/footer/to_pagetop.png");
    background-repeat: no-repeat;
    background-size: 64px 64px;
    background-position: 0px 0px;
    margin: 40px auto 0;
}

footer .sns
{
    margin-top: 35px;
}

footer .sns ul
{
    text-align: center;
}

footer .sns ul li
{
    display: inline-block;
    margin: 0 11px;
}

footer .sns ul li .line
{
    display: block;
    width: 54px;
    height: 54px;
    background-image: url("./../img/sp/sns/line.png");
    background-repeat: no-repeat;
    background-size: 54px 54px;
    background-position: 0px 0px;
    overflow: hidden;
    text-indent: 110%;
    white-space: nowrap;
}

footer .sns ul li .weibo
{
    display: block;
    width: 54px;
    height: 54px;
    background-image: url("./../img/sp/sns/weibo.png");
    background-repeat: no-repeat;
    background-size: 54px 54px;
    background-position: 0px 0px;
    overflow: hidden;
    text-indent: 110%;
    white-space: nowrap;
}

footer .sns ul li .facebook
{
    display: block;
    width: 54px;
    height: 54px;
    background-image: url("./../img/sp/sns/facebook.png");
    background-repeat: no-repeat;
    background-size: 54px 54px;
    background-position: 0px 0px;
    overflow: hidden;
    text-indent: 110%;
    white-space: nowrap;
}

footer #external
{
    width: 100%;
    margin: 20px 0 0 0;
    padding: 20px 0 20px 0;
    text-align: center;
}

footer #external ul.banner
{
    text-align: center;
    line-height: 0;
}

footer #external ul.banner li
{
    display: block;
    line-height: 0;
    width: 200px;
    height: 80px;
    margin: 0 auto 15px auto;
}

footer #external ul.banner li .ff-30th
{
    display: block;
    width: 200px;
    height: 79px;
    background-image: url("./../img/sp/footer/bnr_ff_30th.jpg");
    background-repeat: no-repeat;
    background-size: 200px 79px;
    background-position: 0px 0px;
    overflow: hidden;
    text-indent: 110%;
    white-space: nowrap;
}

footer #external ul.banner li .ff-sharecp
{
    display: block;
    width: 200px;
    height: 79px;
    background-image: url("./../img/sp/footer/bnr_sharecp.png");
    background-repeat: no-repeat;
    background-size: 200px 79px;
    background-position: 0px 0px;
    overflow: hidden;
    text-indent: 110%;
    white-space: nowrap;
}

footer #external ul.sns-official
{
    text-align: center;
    margin-top: 39px;
    line-height: 0;
}

footer #external ul.sns-official li
{
    display: inline-block;
    line-height: 0;
    margin: 0 5px 0;
}

footer #external ul.sns-official li .twitter-official
{
    display: block;
    width: 135.5px;
    height: 36px;
    background-image: url("./../img/sp/footer/official_twitter.png");
    background-repeat: no-repeat;
    background-size: 135.5px 36px;
    background-position: 0px 0px;
    overflow: hidden;
    text-indent: 110%;
    white-space: nowrap;
}

footer #external ul.sns-official li .line-official
{
    display: block;
    width: 135px;
    height: 36px;
    background-image: url("./../img/sp/footer/official_line.png");
    background-repeat: no-repeat;
    background-size: 135px 36px;
    background-position: 0px 0px;
    overflow: hidden;
    text-indent: 110%;
    white-space: nowrap;
}

footer .socialcontents
{
    width: 100%;
    margin: 20px 0 0 0;
    padding: 20px 0 0 0;
    text-align: center;
    border-top: 1px #acacac solid;
}

footer .socialcontents ul.banner
{
    width: 280px;
    margin: 0 auto;
    text-align: center;
}

footer .socialcontents ul.banner li
{
    float: left;
    width: 136px;
    height: 42px !important;
    margin: 0 10px 10px 10px;
    padding: 0 !important;
}

footer .socialcontents ul.banner li:last-child
{
    margin: 0 0 0 78px;
}

footer .socialcontents ul.banner li a
{
    display: block;
    width: 136px;
    height: 42px !important;
    text-indent: -9999px;
}

footer .socialcontents ul.banner li.official
{
    display: block;
    width: 120px;
    height: 37px;
    background-image: url("../img/sp/footer/bn_offcial.png");
    background-repeat: no-repeat;
    background-size: 120px 37px;
    background-position: 0px 0px;
}

footer .socialcontents ul.banner li.youtube
{
    display: block;
    width: 120px;
    height: 37px;
    background-image: url("../img/sp/footer/bn_youtube.png");
    background-repeat: no-repeat;
    background-size: 120px 37px;
    background-position: 0px 0px;
}

footer .socialcontents ul.banner li.bnr_facebook
{
    display: block;
    width: 120px;
    height: 37px;
    background-image: url("../img/sp/footer/bn_facebook.png");
    background-repeat: no-repeat;
    background-size: 120px 37px;
    background-position: 0px 0px;
}

footer .download
{
    margin-top: 35px;
    background-color: #FFF;
    width: 100%;
    min-height: 103.5px;
}

footer .download::before
{
    display: block;
    content: " ";
    clear: both;
    height: 0px;
    border-top: transparent solid 1px;
    width: 100%;
    margin-bottom: -1px;
}

footer .download .app_icon
{
    margin: 14px 0px 0 8px;
    display: block;
    width: 36.5px;
    height: 36px;
    background-image: url("//xflag.com/common/images/monsterstrike_appicon.png");
    background-repeat: no-repeat;
    background-size: 36.5px 36px;
    background-position: 0px 0px;
    overflow: hidden;
    text-indent: 110%;
    white-space: nowrap;
    display: inline-block;
}

footer .download h4
{
    margin: 0px auto 2px;
    display: block;
    width: 263.5px;
    height: 31.5px;
    background-image: url("./../img/sp/footer/download_h4.png");
    background-repeat: no-repeat;
    background-size: 263.5px 31.5px;
    background-position: 0px 0px;
    overflow: hidden;
    text-indent: 110%;
    white-space: nowrap;
    display: inline-block;
}

footer .download ul
{
    text-align: center;
    line-height: 0px;
    margin: 6px auto 0;
}

footer .download ul li
{
    display: inline-block;
    line-height: 0;
    margin: 0 2px 0;
}

footer .download ul li .app-store
{
    display: block;
    width: 97px;
    height: 33.5px;
    background-image: url("./../img/sp/footer/download_app.png");
    background-repeat: no-repeat;
    background-size: 97px 33.5px;
    background-position: 0px 0px;
    overflow: hidden;
    text-indent: 110%;
    white-space: nowrap;
}

footer .download ul li .google
{
    display: block;
    width: 97px;
    height: 33.5px;
    background-image: url("./../img/sp/footer/download_google.png");
    background-repeat: no-repeat;
    background-size: 97px 33.5px;
    background-position: 0px 0px;
    overflow: hidden;
    text-indent: 110%;
    white-space: nowrap;
}

footer .download ul li .amazon
{
    display: block;
    width: 97px;
    height: 33.5px;
    background-image: url("./../img/sp/footer/download_amazon.png");
    background-repeat: no-repeat;
    background-size: 97px 33.5px;
    background-position: 0px 0px;
    overflow: hidden;
    text-indent: 110%;
    white-space: nowrap;
}

footer .xflag
{
    padding-bottom: 60px;
    border-top: 1px #acacac solid;
    margin: 20px 0 0 0;
}

footer .xflag .logo
{
    display: block;
    width: 85px;
    height: 99px;
    background-image: url("//xflag.com/tw/common/images/promotion_logo_xflag.png");
    background-repeat: no-repeat;
    background-size: 85px 99px;
    background-position: 0px 0px;
    margin: 30px auto 0;
    overflow: hidden;
    text-indent: 110%;
    white-space: nowrap;
}

footer .xflag ul
{
    margin: 30px auto 30px;
    text-align: center;
}

footer .xflag ul li
{
    display: inline-block;
    margin: 0 5px 0;
}

footer .xflag ul li a
{
    color: #FFF;
    text-decoration: underline;
    font-size: 0.9em;
}

footer .xflag .copyright
{
    margin: 5px 5px 0;
    display: block;
    text-align: center;
    font-family: Verdana,Arial,Geneva,Tahoma,sans-serif;
    color: #FFF;
    font-size: 1em;
}