﻿body {
    margin:0px;
    background-color:#eeeeee;
    width:100%;
    height:100%
}
#mainContainer {
    position:fixed;
    z-index:9999
}
#adContainer {
    position:absolute;
    top:0;
    left:0;
    background-color:black
}
#gameframediv {
    height:100%;
    width:100%;
    position:absolute;
    left:0;
    top:0
}
#top-banner {
    background-color:#eeeeee;
    width:100%;
    z-index:10;
    justify-content:center;
    display:flex;
    position:absolute;
flex-direction: column;
align-items: center;
}
.game-info{
    color: #ccc;
    font-size: 17px;
    line-height: 1.6;
}
.ad-mid {
    margin-right:0;
    margin-left:0;
    width:100%;
}


#timer_begin {
    color:#6F6F6F;
    text-align:right;
    font-size:13px;
    font-family:"Microsoft YaHei","微软雅黑","SimHei","黑体"
}
#play_btn_time {
    opacity:0.9;
    color:#F9F9F9;
    text-align:right;
    background-color:#000000;
    font-size:13px
}


#adpreloaderwrap {
   //background-color:#000;
    width:100%;
    text-align:center;
    position:absolute;
  //background:#000 50% 50% no-repeat;
    background-size:25px 25px;
    min-height:300px
}

#progText {
    color:#fff;
    line-height:16px;
    display:block;
    width:100%
}
#playnow {
    display:block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    margin-bottom: 20px;
    clear:both;
    width:40%;
    padding:3px 0;
    color:#fff;
    font-size:1.5em;
    //font-weight:700;
    border-radius:5px;
    text-align:center;
    background:#8b8682;
    border: 2px solid #fff;
    outline:0;
    //box-shadow:0 0 3px rgba(0,0,0,.5);
    position:relative;
}
#playnowprogress {
    background:#eef;
    font-size:17px;
    padding:8px 0;
    margin:0 auto;
    text-align:center;
    position:relative;
}

#playnowprogress-inner {
    border-radius:5px;
    position:absolute;
    left:0;
    top:0;
    margin:0 auto;
    background:#009a44;
    height:100%;
}

.preShadow {
    background: #000;
    width: 100%;
    height: 100vh;
    position: absolute;
    z-index: 100;
    top: 0;
    display: none
}

.preloadpacman {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%)
}

.preloadpacman>div:nth-child(2) {
    animation: preloadpacman-balls 1s -.99s infinite linear
}

.preloadpacman>div:nth-child(3) {
    animation: preloadpacman-balls 1s -.66s infinite linear
}

.preloadpacman>div:nth-child(4) {
    animation: preloadpacman-balls 1s -.33s infinite linear
}

.preloadpacman>div:nth-child(5) {
    animation: preloadpacman-balls 1s 0s infinite linear
}

.preloadpacman>div:first-of-type {
    width: 0;
    height: 0;
    border-right: 25px solid transparent;
    border-top: 25px solid #fff;
    border-left: 25px solid #fff;
    border-bottom: 25px solid #fff;
    border-radius: 25px;
    animation: rotate_preloadpacman_half_up .5s 0s infinite;
    position: relative;
    left: -30px
}

.preloadpacman>div:nth-child(2) {
    width: 0;
    height: 0;
    border-right: 25px solid transparent;
    border-top: 25px solid #fff;
    border-left: 25px solid #fff;
    border-bottom: 25px solid #fff;
    border-radius: 25px;
    animation: rotate_preloadpacman_half_down .5s 0s infinite;
    margin-top: -50px;
    position: relative;
    left: -30px
}

.preloadpacman>div:nth-child(3),.preloadpacman>div:nth-child(4),.preloadpacman>div:nth-child(5),.preloadpacman>div:nth-child(6) {
    background-color: #fff;
    border-radius: 100%;
    margin: 2px;
    width: 10px;
    height: 10px;
    position: absolute;
    transform: translate(0,-6.25px);
    top: 25px;
    left: 70px
}

@keyframes rotate_preloadpacman_half_up {
    0% {
        transform: rotate(270deg)
    }

    50% {
        transform: rotate(360deg)
    }

    100% {
        transform: rotate(270deg)
    }
}

@keyframes rotate_preloadpacman_half_down {
    0% {
        transform: rotate(90deg)
    }

    50% {
        transform: rotate(0deg)
    }

    100% {
        transform: rotate(90deg)
    }
}

@keyframes preloadpacman-balls {
    75% {
        opacity: .7
    }

    100% {
        transform: translate(-100px,-6.25px)
    }
}
@media screen and (orientation:portrait) {

    #beginView {
        position:fixed;
        padding-top: 10vh;
        height:100%;
        width:100%;
        /*background-color:#3d88d6;*/
        z-index:1000;
background: linear-gradient(-45deg,#ee7752,#e73c7e,#23a6d5,#23d5ab) 0 0/300% 300%;
        animation: pluto-gradient 60s ease 0s infinite normal none running;
    }

}@media screen and (orientation:landscape) {
    #beginView {
        position:fixed;
        height:100%;
        width:100%;
        /*background-color:#3d88d6;*/
        z-index:1000;
        overflow: auto;
background: linear-gradient(-45deg,#ee7752,#e73c7e,#23a6d5,#23d5ab) 0 0/300% 300%;
        animation: pluto-gradient 60s ease 0s infinite normal none running;
    }

}

.img_tap_game {

    opacity: 0.1;                                   /* 不透明度 */
    overflow: hidden;                               /* 溢出隐藏 */
   /* margin: 25% auto; */                              /* 外边距 */

    /* IE10、Firefox and Opera，IE9以及更早的版本不支持 */
    animation-name: breath;                         /* 动画名称 */
    animation-duration: 1200ms;                         /* 动画时长3秒 */
    animation-timing-function: ease-in-out;         /* 动画速度曲线：以低速开始和结束 */
    animation-iteration-count: infinite;            /* 播放次数：无限 */

    /* Safari and Chrome */
    -webkit-animation-name: breath;                 /* 动画名称 */
    -webkit-animation-duration: 1200ms;                 /* 动画时长3秒 */
    -webkit-animation-timing-function: ease-in-out; /* 动画速度曲线：以低速开始和结束 */
    -webkit-animation-iteration-count: infinite;    /* 播放次数：无限 */
}

@keyframes breath {
    from { opacity: 0.1; }                          /* 动画开始时的不透明度 */
    50%  { opacity:   1; }                          /* 动画50% 时的不透明度 */
    to   { opacity: 0.1; }                          /* 动画结束时的不透明度 */
}

@-webkit-keyframes breath {
    from { opacity: 0.1; }                          /* 动画开始时的不透明度 */
    50%  { opacity:   1; }                          /* 动画50% 时的不透明度 */
    to   { opacity: 0.1; }                          /* 动画结束时的不透明度 */
}
@keyframes pluto-gradient{0%{background-position:0 50%}50%{background-position:100% 50%}to{background-position:0 50%}}