@charset "UTF-8";

/*common.css*/

html,
body {
    position: relative;
    height: 100%;
}

body {
    background-color: #000;
    font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
    font-weight: 500;
    font-size: 16px;
    color: #fff;
    margin: 0;
    padding: 0;
}

a {
    text-decoration: underline;
    color: #0d4aae;
}

a:hover,
a:visited {
    text-decoration: none;
    color: #db1188;
}

#contsWrap {
    background: url('../../common/img/bg_ptrn_body.png') repeat left top #000;
}


/*============================
#header
============================*/

#header {
    position: absolute;
    top: 0;
    left: 0;
    height: 130px;
    width: 100%;
    min-width: 1200px;
    z-index: 100;
}

#header #gNav {
    background: url('../img/bg_header.png') repeat-x center top;
    height: 117px;
}

#header #gNav h1.logo {
    position: absolute;
    top: 9px;
    left: 0;
    right: 0;
    width: 348px;
    margin: auto;
    z-index: 10;
}

#header #gNav .nav {
    width: 1200px;
    height: 88px;
    margin: 0 auto;
    position: relative;
}

#header #gNav .nav ul li a {
    width: 114px;
    height: 38px;
    position: absolute;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}

#header #gNav .nav ul li.n1 a {
    background-image: url('../img/sprite.png');
    background-position: -1086px -203px;
    width: 114px;
    height: 38px;
    left: -4px;
    bottom: 0px;
}

#header #gNav .nav ul li.n2 a {
    background-image: url('../img/sprite.png');
    background-position: -1204px -161px;
    width: 114px;
    height: 38px;
    left: 102px;
    bottom: 4px;
}

#header #gNav .nav ul li.n3 a {
    background-image: url('../img/sprite.png');
    background-position: -850px -203px;
    width: 114px;
    height: 38px;
    left: 208px;
    bottom: 8px;
}

#header #gNav .nav ul li.n4 a {
    background-image: url('../img/sprite.png');
    background-position: -732px -161px;
    width: 114px;
    height: 38px;
    left: 314px;
    bottom: 12px;
}

#header #gNav .nav ul li.n5 a {
    background-image: url('../img/sprite.png');
    background-position: -968px -161px;
    width: 114px;
    height: 38px;
    right: 314px;
    bottom: 12px;
}

#header #gNav .nav ul li.n6 a {
    background-image: url('../img/sprite.png');
    background-position: -1440px -161px;
    width: 114px;
    height: 38px;
    right: 208px;
    bottom: 8px;
}

#header #gNav .nav ul li.n7 a {
    background-image: url('../img/sprite.png');
    background-position: -496px -161px;
    width: 114px;
    height: 38px;
    right: 102px;
    bottom: 4px;
}

#header #gNav .nav ul li.n8 a {
    background-image: url('../img/sprite.png');
    background-position: -614px -203px;
    width: 114px;
    height: 38px;
    right: -4px;
    bottom: 0;
}

#header #gNav .nav ul li.n1 a:hover {
    background-position: -1204px -203px;
}

#header #gNav .nav ul li.n2 a:hover {
    background-position: -1322px -161px;
}

#header #gNav .nav ul li.n3 a:hover {
    background-position: -968px -203px;
}

#header #gNav .nav ul li.n4 a:hover {
    background-position: -850px -161px;
}

#header #gNav .nav ul li.n5 a:hover {
    background-position: -1086px -161px;
}

#header #gNav .nav ul li.n6 a:hover {
    background-position: -496px -203px;
}

#header #gNav .nav ul li.n7 a:hover {
    background-position: -614px -161px;
}
#header #gNav .nav ul li.n8 a:hover {
    background-position: -732px -203px;
}

.subNav {
    width: 1200px;
    height: 30px;
    margin: 0 auto;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
}

/* #bgm #bgm-switch .current::before {
    content: " ";
    display: inline-block;
    width: 22px;
    height: 14px;
    background-image: url('../img/bgm_icon_bg.png');
    background-position: 0 0;
    background-repeat: no-repeat;
    vertical-align: middle;
    position: absolute;
    top: -3px;
    left: -31px;
    cursor: default;
} */
/* #bgm #bgm-switch .on.current::before { */
/*     background-position: 0 0;
    background-repeat: repeat-x;
    -webkit-animation: bgroop 2s linear infinite;
    animation: bgroop 2s linear infinite;
    opacity: 0.6; */
/* } */

/* #bgm #bgm-switch .off.current::before {
    left: -53px;
    opacity: 0.2;
} */
/* @-webkit-keyframes bgroop {
    from {
        background-position: 0  0;
    }
    to {
        background-position: -36px 0;
    }
}
@keyframes bgroop {
    from {
        background-position: 0 0;
    }
    to {
        background-position: -36px 0;
    }
} */
/* #bgm #bgm-switch {
    width: 80px;
    height: 14px;
    position: relative;
} */

/* #bgm #bgm-switch .on,
#bgm #bgm-switch .off {
    position: absolute;
    top: 0;
} */
#bgm {
    position: absolute;
    left: 0;
    top: 5px;
}
#bgm #bgm-switch {
    position: relative;
}

#bgm #bgm-switch .on {
    width: 42px;
    height: 40px;
    /* background: red; */
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
    background-image: url(../img/icon_sound_off.png);
    background-repeat: no-repeat;
    background-size: 42px 40px;
}
#bgm #bgm-switch .on.current {
    z-index: 1;
}


#bgm #bgm-switch .off {
    width: 42px;
    height: 40px;
    /* background: green; */
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    background-image: url(../img/icon_sound_on.png);
    background-repeat: no-repeat;
    background-size: 42px 40px;
}
#bgm #bgm-switch .off.current {
    /* background-position: -23px -14px; */
    z-index: 1;
}
#bgm-attention {
    display: none;
}





/* #bgm #bgm-switch li {
    display: inline-block;
    display: block;
    width: 24px;
    height: 10px;
    background-image: url('../img/bgm_switch.png');
    background-repeat: no-repeat;
    text-indent: 100%;
    cursor: pointer;
}

#bgm #bgm-switch li:hover {
    cursor: pointer;
}

#bgm-attention {
    display: none;
    background: url('../img/logo_pc.png') no-repeat center 40%;
    background-color: rgba(0, 0, 0, 0.9);
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    z-index: 99999;
}

#bgm-attention .attent {
    position: absolute;
    width: 100%;
    text-align: center;
    top: calc(40% + 114px);
} */


.subNav .sns {
    position: absolute;
    right: 0;
    width: 110px;
    height: 30px;
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    -ms-flex-pack: distribute;
    justify-content: space-around;
}

.subNav .sns li a {
    width: 30px;
    height: 30px;
    display: block;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}


/* TODO:スプライト画像化する */

.subNav .sns li.fb a {
    background-image: url('../img/ico_fb.png?170825');
}

.subNav .sns li.tw a {
    background-image: url('../img/ico_tw.png?170825');
}

.subNav .sns li.line a {
    background-image: url('../img/ico_line.png?170825');
}


/*=====================================================================================================*/


/*============================
コンテンツ部
============================*/

.contsInner {
    width: 100%;
    min-width: 1200px;
    max-width: 1920px;
    height: 768px;
    margin-left: auto;
    margin-right: auto;
    background-color: #fff;
    position: relative;
    background-image: url('../img/bg_container.jpg');
    background-repeat: no-repeat;
    background-position: center 60px;
}


/*
.swiper-container {
    background-image: url('../img/bg_container.jpg');
    background-repeat: no-repeat;
    background-position: center 60px;
}*/
/*
.contsInner::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    z-index: 100;
    background-image: url('../img/sprite.png');
    background-position: 0px -161px;
    width: 114px;
    height: 118px;
}

.contsInner::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -2px;
    z-index: 100;
    background-image: url('../img/sprite.png');
    background-position: -118px -161px;
    width: 114px;
    height: 118px;
}
*/
.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: rgba(255, 255, 255, 0.7);
    /* Center slide text vertically */
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    -ms-flex-pack: center;
    -webkit-box-pack: center;
            justify-content: center;
}

.overlay {
    background: rgba(255, 255, 255, 0.7);
    height: 100%;
}

.innerWrap {
    width: 1200px;
    height: 540px;
    margin: 130px 0 0;
    position: relative;
}

.no_swipe {
    width: 1200px;
    height: 540px;
    margin: 0 auto;
    position: relative;
    top: 130px;
}

.conts-ttl {
    position: absolute;
    top: 0;
    left: 36px;
}

.baseBox {
    background: rgba(255, 255, 255, 0.4);
    border-radius: 15px;
    margin: 0 auto;
    text-align: center;
    -webkit-box-shadow: 0 0px 5px 0px #d89b08;
            box-shadow: 0 0px 5px 0px #d89b08;
    position: absolute;
    left: 0;
    right: 0;
}

.baseBox.short {
    width: 1006px;
}

.baseBox.long {
    width: 1120px;
}


/*============================
Swiper.css上書き（直接swiper.cssを修正する）
============================*/

.swiper-button-prev {
    background-image: url('../img/sprite.png') !important;
    background-position: -236px -161px !important;
    width: 61px !important;
    height: 103px !important;
    background-size: inherit !important;
}

.swiper-button-next {
    background-image: url('../img/sprite.png') !important;
    background-position: -301px -161px !important;
    width: 61px !important;
    height: 103px !important;
    background-size: inherit !important;
}

.swiper-button-next:hover {
    background-position: -366px -161px !important;
}

.swiper-button-prev:hover {
    background-position: -431px -161px !important;
}

.swiper-pagination {
    background: url('../img/bg_pagenation.png') no-repeat center center !important;
}

.swiper-pagination span:nth-child(1) {
    background-image: url('../img/sprite.png') !important;
    background-position: -57px -283px !important;
    width: 53px !important;
    height: 53px !important;
}

.swiper-pagination span:nth-child(2) {
    background-image: url('../img/sprite.png') !important;
    background-position: -114px -283px !important;
    width: 53px !important;
    height: 53px !important;
}

.swiper-pagination span:nth-child(3) {
    background-image: url('../img/sprite.png') !important;
    background-position: -228px -283px !important;
    width: 53px !important;
    height: 53px !important;
}

.swiper-pagination span:nth-child(4) {
    background-image: url('../img/sprite.png') !important;
    background-position: 0px -283px !important;
    width: 53px !important;
    height: 53px !important;
}

.swiper-pagination span:nth-child(5) {
    background-image: url('../img/sprite.png') !important;
    background-position: -456px -283px !important;
    width: 53px !important;
    height: 53px !important;
}

.swiper-pagination span:nth-child(6) {
    background-image: url('../img/sprite.png') !important;
    background-position: -570px -283px !important;
    width: 53px !important;
    height: 53px !important;
}

.swiper-pagination span:nth-child(7) {
    background-image: url('../img/sprite.png') !important;
    background-position: -686px -283px !important;
    width: 53px !important;
    height: 53px !important;
}

.swiper-pagination span:nth-child(1):hover,
.swiper-pagination span:nth-child(1).swiper-pagination-bullet-active {
    background-position: -342px -283px !important;
}

.swiper-pagination span:nth-child(2):hover,
.swiper-pagination span:nth-child(2).swiper-pagination-bullet-active {
    background-position: -171px -283px !important;
}

.swiper-pagination span:nth-child(3):hover,
.swiper-pagination span:nth-child(3).swiper-pagination-bullet-active {
    background-position: -285px -283px !important;
}

.swiper-pagination span:nth-child(4):hover,
.swiper-pagination span:nth-child(4).swiper-pagination-bullet-active {
    background-position: -399px -283px !important;
}

.swiper-pagination span:nth-child(5):hover,
.swiper-pagination span:nth-child(5).swiper-pagination-bullet-active {
    background-position: -513px -283px !important;
}

.swiper-pagination span:nth-child(6):hover,
.swiper-pagination span:nth-child(6).swiper-pagination-bullet-active {
    background-position: -627px -283px !important;
}

.swiper-pagination span:nth-child(7):hover,
.swiper-pagination span:nth-child(7).swiper-pagination-bullet-active {
    background-position: -744px -283px !important;
}

.swiper-pagination-bullet {
    width: 53px !important;
    height: 53px !important;
    opacity: 1 !important;
    background-color: transparent !important;
}

.swiper-container-horizontal>.swiper-pagination-bullets,
.swiper-pagination-custom,
.swiper-pagination-fraction {
    margin-bottom: 20px !important;
}

.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0 10px !important;
}


/*=====================================================================================================*/


/*============================
#newsList backnumber
============================*/

.listBox {
    height: 400px;
    overflow-y: scroll;
    text-align: left;
    padding: 30px;
}

.listBox li {
    padding: 15px 0;
    border-bottom: 1px solid #aaa;
}

.listBox li dl dt {
    color: #000;
    width: 210px;
}

.listBox li dl dt span {
    border: 1px solid #333;
    border-radius: 5px;
    font-size: 13px;
    padding: 5px;
    display: inline-block;
    width: 7em;
    margin-right: 1em;
    text-align: center;
    position: relative;
    top: -1px;
}

.listBox li dl dt .event {
    background-color: #fdc354;
}

.listBox li dl dt .failure {
    background-color: #89d7f4;
}

.listBox li dl dt .campaign {
    background-color: #a3db7d;
}

.listBox li dl dt .update {
    background-color: #fd8484;
}

.listBox li dl dt .info {
    background-color: #9e84fd;
}
.listBox li dl dt .importance {
    background-color: #fff;
    font-weight:bold;
    color: #CC0000;
}

.listBox li dl dd {
    height: 25px;
    line-height: 23px;
    padding: 0 10px;
    width: calc(100% - 210px);
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #0d4aae;
}

.listBox li dl dd:hover,
.listBox li dl dd:visited {
    color: #db1188
}


/*============================
#footer
============================*/

#footer {
    min-width: 1200px;
    background-image: url('../img/line_ptrn.png');
    background-repeat: repeat-x;
    background-position: left top;
    background-color: #000;
    color: #b3ad90;
    text-align: center;
    padding: 2em 0;
    font-size: 13px;
}

#footer .footLinks {
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    -ms-flex-pack: center;
    -webkit-box-pack: center;
            justify-content: center;
    margin-bottom: 1em;
}

#footer .footLinks li {
    padding: 0.2em 1em;
}

#footer .footLinks li a:nth-child(2) {
    border-left: 1px solid #b3ad90;
    border-right: 1px solid #b3ad90;
}

#footer .footLinks li a {
    color: #b3ad90;
    text-decoration: none;
}

#footer .footLinks li a:hover {
    text-decoration: underline;
}


/*============================
baseCSS的な
============================*/

.basicFlx {
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.basicFlx.sb {
    -ms-flex-pack: justify;
    -webkit-box-pack: justify;
            justify-content: space-between;
}

.basicFlx.sa {
    -ms-flex-pack: distribute;
    justify-content: space-around;
}

.basicFlx.ctr {
    -ms-flex-pack: center;
    -webkit-box-pack: center;
            justify-content: center;
}


/*============================
アニメーション(使用するものだけにする)
============================*/

.animated {
    -webkit-animation-duration: 1.5s;
            animation-duration: 1.5s;
    -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
    opacity: 0;
}

.animated.infinite {
    -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
}

@-webkit-keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.fadeIn {
    -webkit-animation-name: fadeIn;
            animation-name: fadeIn;
}

@-webkit-keyframes fadeInSlow {
    from {
        opacity: 0;
    }
    20% {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fadeInSlow {
    from {
        opacity: 0;
    }
    20% {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.fadeInSlow {
    -webkit-animation-name: fadeInSlow;
            animation-name: fadeInSlow;
    -webkit-animation-duration: 4s;
            animation-duration: 4s;
}

@-webkit-keyframes fadeInDown {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, -6%, 0);
                transform: translate3d(0, -6%, 0);
    }
    to {
        opacity: 1;
        -webkit-transform: none;
                transform: none;
    }
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, -6%, 0);
                transform: translate3d(0, -6%, 0);
    }
    to {
        opacity: 1;
        -webkit-transform: none;
                transform: none;
    }
}

.fadeInDown {
    -webkit-animation-name: fadeInDown;
            animation-name: fadeInDown;
}

@-webkit-keyframes fadeInLeft {
    from {
        opacity: 0;
        -webkit-transform: translate3d(-10%, 0, 0);
                transform: translate3d(-10%, 0, 0);
    }
    to {
        opacity: 1;
        -webkit-transform: none;
                transform: none;
    }
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        -webkit-transform: translate3d(-10%, 0, 0);
                transform: translate3d(-10%, 0, 0);
    }
    to {
        opacity: 1;
        -webkit-transform: none;
                transform: none;
    }
}

.fadeInLeft {
    -webkit-animation-name: fadeInLeft;
            animation-name: fadeInLeft;
}

@-webkit-keyframes fadeInRight {
    from {
        opacity: 0;
        -webkit-transform: translate3d(6%, 0, 0);
                transform: translate3d(6%, 0, 0);
    }
    to {
        opacity: 1;
        -webkit-transform: none;
                transform: none;
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        -webkit-transform: translate3d(6%, 0, 0);
                transform: translate3d(6%, 0, 0);
    }
    to {
        opacity: 1;
        -webkit-transform: none;
                transform: none;
    }
}

.fadeInRight {
    -webkit-animation-name: fadeInRight;
            animation-name: fadeInRight;
}

@-webkit-keyframes fadeInUp {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 10%, 0);
                transform: translate3d(0, 10%, 0);
    }
    to {
        opacity: 1;
        -webkit-transform: none;
                transform: none;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 10%, 0);
                transform: translate3d(0, 10%, 0);
    }
    to {
        opacity: 1;
        -webkit-transform: none;
                transform: none;
    }
}

.fadeInUp {
    -webkit-animation-name: fadeInUp;
            animation-name: fadeInUp;
}

@-webkit-keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

.fadeOut {
    -webkit-animation-name: fadeOut;
            animation-name: fadeOut;
}

@-webkit-keyframes fadeOutDown {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(0, 10%, 0);
                transform: translate3d(0, 10%, 0);
    }
}

@keyframes fadeOutDown {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(0, 10%, 0);
                transform: translate3d(0, 10%, 0);
    }
}

.fadeOutDown {
    -webkit-animation-name: fadeOutDown;
            animation-name: fadeOutDown;
}

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

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

.fadeOutLeft {
    -webkit-animation-name: fadeOutLeft;
            animation-name: fadeOutLeft;
}

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

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

.fadeOutRight {
    -webkit-animation-name: fadeOutRight;
            animation-name: fadeOutRight;
}

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

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

.fadeOutUp {
    -webkit-animation-name: fadeOutUp;
            animation-name: fadeOutUp;
}

@-webkit-keyframes zoomIn {
    from {
        opacity: 0;
        -webkit-transform: scale3d(.3, .3, .3);
                transform: scale3d(.3, .3, .3);
    }
    50% {
        opacity: 1;
    }
}

@keyframes zoomIn {
    from {
        opacity: 0;
        -webkit-transform: scale3d(.3, .3, .3);
                transform: scale3d(.3, .3, .3);
    }
    50% {
        opacity: 1;
    }
}

.zoomIn {
    -webkit-animation-name: zoomIn;
            animation-name: zoomIn;
}

@-webkit-keyframes zoomInDown {
    from {
        opacity: 0;
        -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
                transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
        -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
                animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    }
    60% {
        opacity: 1;
        -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
                transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
                animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    }
}

@keyframes zoomInDown {
    from {
        opacity: 0;
        -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
                transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
        -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
                animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    }
    60% {
        opacity: 1;
        -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
                transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
                animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    }
}

.zoomInDown {
    -webkit-animation-name: zoomInDown;
            animation-name: zoomInDown;
}

@-webkit-keyframes zoomInLeft {
    from {
        opacity: 0;
        -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
                transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
                animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    }
    60% {
        opacity: 1;
        -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
                transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
                animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    }
}

@keyframes zoomInLeft {
    from {
        opacity: 0;
        -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
                transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
                animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    }
    60% {
        opacity: 1;
        -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
                transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
                animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    }
}

.zoomInLeft {
    -webkit-animation-name: zoomInLeft;
            animation-name: zoomInLeft;
}

@-webkit-keyframes zoomInRight {
    from {
        opacity: 0;
        -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
                transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
                animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    }
    60% {
        opacity: 1;
        -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
                transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
                animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    }
}

@keyframes zoomInRight {
    from {
        opacity: 0;
        -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
                transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
                animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    }
    60% {
        opacity: 1;
        -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
                transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
                animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    }
}

.zoomInRight {
    -webkit-animation-name: zoomInRight;
            animation-name: zoomInRight;
}

@-webkit-keyframes zoomInUp {
    from {
        opacity: 0;
        -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
                transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
        -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
                animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    }
    60% {
        opacity: 1;
        -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
                transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
                animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    }
}

@keyframes zoomInUp {
    from {
        opacity: 0;
        -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
                transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
        -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
                animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    }
    60% {
        opacity: 1;
        -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
                transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
                animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    }
}

.zoomInUp {
    -webkit-animation-name: zoomInUp;
            animation-name: zoomInUp;
}

@-webkit-keyframes zoomOut {
    from {
        opacity: 1;
    }
    50% {
        opacity: 0;
        -webkit-transform: scale3d(.3, .3, .3);
                transform: scale3d(.3, .3, .3);
    }
    to {
        opacity: 0;
    }
}

@keyframes zoomOut {
    from {
        opacity: 1;
    }
    50% {
        opacity: 0;
        -webkit-transform: scale3d(.3, .3, .3);
                transform: scale3d(.3, .3, .3);
    }
    to {
        opacity: 0;
    }
}

.zoomOut {
    -webkit-animation-name: zoomOut;
            animation-name: zoomOut;
}

@-webkit-keyframes zoomOutDown {
    40% {
        opacity: 1;
        -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
                transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
        -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
                animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    }
    to {
        opacity: 0;
        -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
                transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
        -webkit-transform-origin: center bottom;
                transform-origin: center bottom;
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
                animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    }
}

@keyframes zoomOutDown {
    40% {
        opacity: 1;
        -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
                transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
        -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
                animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    }
    to {
        opacity: 0;
        -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
                transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
        -webkit-transform-origin: center bottom;
                transform-origin: center bottom;
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
                animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    }
}

.zoomOutDown {
    -webkit-animation-name: zoomOutDown;
            animation-name: zoomOutDown;
}

@-webkit-keyframes zoomOutLeft {
    40% {
        opacity: 1;
        -webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
                transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
    }
    to {
        opacity: 0;
        -webkit-transform: scale(.1) translate3d(-2000px, 0, 0);
                transform: scale(.1) translate3d(-2000px, 0, 0);
        -webkit-transform-origin: left center;
                transform-origin: left center;
    }
}

@keyframes zoomOutLeft {
    40% {
        opacity: 1;
        -webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
                transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
    }
    to {
        opacity: 0;
        -webkit-transform: scale(.1) translate3d(-2000px, 0, 0);
                transform: scale(.1) translate3d(-2000px, 0, 0);
        -webkit-transform-origin: left center;
                transform-origin: left center;
    }
}

.zoomOutLeft {
    -webkit-animation-name: zoomOutLeft;
            animation-name: zoomOutLeft;
}

@-webkit-keyframes zoomOutRight {
    40% {
        opacity: 1;
        -webkit-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
                transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
    }
    to {
        opacity: 0;
        -webkit-transform: scale(.1) translate3d(2000px, 0, 0);
                transform: scale(.1) translate3d(2000px, 0, 0);
        -webkit-transform-origin: right center;
                transform-origin: right center;
    }
}

@keyframes zoomOutRight {
    40% {
        opacity: 1;
        -webkit-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
                transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
    }
    to {
        opacity: 0;
        -webkit-transform: scale(.1) translate3d(2000px, 0, 0);
                transform: scale(.1) translate3d(2000px, 0, 0);
        -webkit-transform-origin: right center;
                transform-origin: right center;
    }
}

.zoomOutRight {
    -webkit-animation-name: zoomOutRight;
            animation-name: zoomOutRight;
}

@-webkit-keyframes zoomOutUp {
    40% {
        opacity: 1;
        -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
                transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
        -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
                animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    }
    to {
        opacity: 0;
        -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
                transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
        -webkit-transform-origin: center bottom;
                transform-origin: center bottom;
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
                animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    }
}

@keyframes zoomOutUp {
    40% {
        opacity: 1;
        -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
                transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
        -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
                animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    }
    to {
        opacity: 0;
        -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
                transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
        -webkit-transform-origin: center bottom;
                transform-origin: center bottom;
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
                animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    }
}

.zoomOutUp {
    -webkit-animation-name: zoomOutUp;
            animation-name: zoomOutUp;
}

@-webkit-keyframes slideInDown {
    from {
        -webkit-transform: translate3d(0, -100%, 0);
                transform: translate3d(0, -100%, 0);
        visibility: visible;
    }
    to {
        -webkit-transform: translate3d(0, 0, 0);
                transform: translate3d(0, 0, 0);
    }
}

@keyframes slideInDown {
    from {
        -webkit-transform: translate3d(0, -100%, 0);
                transform: translate3d(0, -100%, 0);
        visibility: visible;
    }
    to {
        -webkit-transform: translate3d(0, 0, 0);
                transform: translate3d(0, 0, 0);
    }
}

.slideInDown {
    -webkit-animation-name: slideInDown;
            animation-name: slideInDown;
}

@-webkit-keyframes slideInLeft {
    from {
        -webkit-transform: translate3d(-100%, 0, 0);
                transform: translate3d(-100%, 0, 0);
        visibility: visible;
    }
    to {
        -webkit-transform: translate3d(0, 0, 0);
                transform: translate3d(0, 0, 0);
    }
}

@keyframes slideInLeft {
    from {
        -webkit-transform: translate3d(-100%, 0, 0);
                transform: translate3d(-100%, 0, 0);
        visibility: visible;
    }
    to {
        -webkit-transform: translate3d(0, 0, 0);
                transform: translate3d(0, 0, 0);
    }
}

.slideInLeft {
    -webkit-animation-name: slideInLeft;
            animation-name: slideInLeft;
}

@-webkit-keyframes slideInRight {
    from {
        -webkit-transform: translate3d(100%, 0, 0);
                transform: translate3d(100%, 0, 0);
        visibility: visible;
    }
    to {
        -webkit-transform: translate3d(0, 0, 0);
                transform: translate3d(0, 0, 0);
    }
}

@keyframes slideInRight {
    from {
        -webkit-transform: translate3d(100%, 0, 0);
                transform: translate3d(100%, 0, 0);
        visibility: visible;
    }
    to {
        -webkit-transform: translate3d(0, 0, 0);
                transform: translate3d(0, 0, 0);
    }
}

.slideInRight {
    -webkit-animation-name: slideInRight;
            animation-name: slideInRight;
}

@-webkit-keyframes slideInUp {
    from {
        -webkit-transform: translate3d(0, 100%, 0);
                transform: translate3d(0, 100%, 0);
        visibility: visible;
    }
    to {
        -webkit-transform: translate3d(0, 0, 0);
                transform: translate3d(0, 0, 0);
    }
}

@keyframes slideInUp {
    from {
        -webkit-transform: translate3d(0, 100%, 0);
                transform: translate3d(0, 100%, 0);
        visibility: visible;
    }
    to {
        -webkit-transform: translate3d(0, 0, 0);
                transform: translate3d(0, 0, 0);
    }
}

.slideInUp {
    -webkit-animation-name: slideInUp;
            animation-name: slideInUp;
}

@-webkit-keyframes slideOutDown {
    from {
        -webkit-transform: translate3d(0, 0, 0);
                transform: translate3d(0, 0, 0);
    }
    to {
        visibility: hidden;
        -webkit-transform: translate3d(0, 100%, 0);
                transform: translate3d(0, 100%, 0);
    }
}

@keyframes slideOutDown {
    from {
        -webkit-transform: translate3d(0, 0, 0);
                transform: translate3d(0, 0, 0);
    }
    to {
        visibility: hidden;
        -webkit-transform: translate3d(0, 100%, 0);
                transform: translate3d(0, 100%, 0);
    }
}

.slideOutDown {
    -webkit-animation-name: slideOutDown;
            animation-name: slideOutDown;
}

@-webkit-keyframes slideOutLeft {
    from {
        -webkit-transform: translate3d(0, 0, 0);
                transform: translate3d(0, 0, 0);
    }
    to {
        visibility: hidden;
        -webkit-transform: translate3d(-100%, 0, 0);
                transform: translate3d(-100%, 0, 0);
    }
}

@keyframes slideOutLeft {
    from {
        -webkit-transform: translate3d(0, 0, 0);
                transform: translate3d(0, 0, 0);
    }
    to {
        visibility: hidden;
        -webkit-transform: translate3d(-100%, 0, 0);
                transform: translate3d(-100%, 0, 0);
    }
}

.slideOutLeft {
    -webkit-animation-name: slideOutLeft;
            animation-name: slideOutLeft;
}

@-webkit-keyframes slideOutRight {
    from {
        -webkit-transform: translate3d(0, 0, 0);
                transform: translate3d(0, 0, 0);
    }
    to {
        visibility: hidden;
        -webkit-transform: translate3d(100%, 0, 0);
                transform: translate3d(100%, 0, 0);
    }
}

@keyframes slideOutRight {
    from {
        -webkit-transform: translate3d(0, 0, 0);
                transform: translate3d(0, 0, 0);
    }
    to {
        visibility: hidden;
        -webkit-transform: translate3d(100%, 0, 0);
                transform: translate3d(100%, 0, 0);
    }
}

.slideOutRight {
    -webkit-animation-name: slideOutRight;
            animation-name: slideOutRight;
}

@-webkit-keyframes slideOutUp {
    from {
        -webkit-transform: translate3d(0, 0, 0);
                transform: translate3d(0, 0, 0);
    }
    to {
        visibility: hidden;
        -webkit-transform: translate3d(0, -100%, 0);
                transform: translate3d(0, -100%, 0);
    }
}

@keyframes slideOutUp {
    from {
        -webkit-transform: translate3d(0, 0, 0);
                transform: translate3d(0, 0, 0);
    }
    to {
        visibility: hidden;
        -webkit-transform: translate3d(0, -100%, 0);
                transform: translate3d(0, -100%, 0);
    }
}

.slideOutUp {
    -webkit-animation-name: slideOutUp;
            animation-name: slideOutUp;
}