@charset "UTF-8";

#g1, #g2, #g3, #g4, #g5 { padding-top: 35px; margin-top: -35px; }

.game-area {
    background-color: #ff9700;
    background-image: url(../images/game/bg-game.jpg);
	background-repeat: no-repeat;
	background-position: center top;
    background-size: 100% auto;
}
.game-box {    
    padding: 0 10%;
	margin: 0 auto;
    overflow: hidden;
}
.game-header { width: 100%; margin: 0 auto; }
.game-header li img { width: 100%; }
.game-header ul { display: flex; overflow: hidden; }
.game-header li {
    float: left;
    margin: 0 0.5%; 
    display: flex;
    justify-content: center;
    align-items: center; 
}
.game-header li:nth-child(1) { width: 36%; }
.game-header li:nth-child(2) { width: 30%; }
.game-header li:nth-child(3) { width: 30%; }

.game-box { overflow: hidden; }
.game-box h2 { position: relative; width: 70%; margin: 0 auto; }
.game-box h2 img { width: 100%; }
.game-box h2 span {
    position: absolute; top: 15%; left: 48.5%;
    font-size: 6.3em;
    font-weight: bolder;
    width: 50px;
    text-align: right;
    color: #ed1c24;
}

/*九宮格*/
.lottery {
    position: relative;
    width: 65%;
    margin: -4.5% auto 0 auto;
}
.lottery img { width: 100%; }
.lottery ul {
    width: 100%;
    position: absolute;
    top: 0; left: 0;
    padding: 9%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.lottery li {
    width: 30%;
    margin-bottom: 2%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}
.lottery li.begin {
	transition: all 0.1s linear;
	user-select: none;
    cursor: pointer; 
}
.lottery li.begin.clicked {
    transform: scale(.9);
    transition: all 0.1s linear;
}
.lottery li.active { opacity: 0.6; }
.lottery-gift {
    width: 50%;
    font-size: 1.8em;
    font-weight: bolder;
    text-align: center;
    background: linear-gradient(to bottom,  #ffffff 0%,#f4f6b5 80%,#e6b559 100%);
    color: #333;
    border: 4px solid #a4102a;
    border-radius: 50px;
    padding: 1.5% 2%;
    margin: 0.5% auto 7% auto;
}
.lottery-gift b {
    font-size: 1.2em;
    color: #a4102a;
}

/*login*/
.login-box {
    border: 5px solid #FFF;
    border-radius: 50px;
    padding: 2% 5% 3% 5%;
    margin: 0 0 5% 0;
    overflow: hidden;
}
.btn-login, .btn-login-ok { width: 40%; margin: 0 auto 3% auto; }
.btn-login img, .btn-login-ok img { width: 100%; }
.btn-login:active {
    position: relative; top: 1px;  left: 1px;

}

/*gift*/
.login-gift { width: 100%; margin: 0 auto 3% auto; }
.login-gift ul { overflow: hidden; }
.login-gift li {
    float: left;
    width: 15.6666%;
    margin: 0 0.5%;
}
.login-gift li img { width: 100%; }

/*day*/
.day-box { width: 100%; margin: 3% auto 0 auto; padding: 0; overflow: hidden; position: relative; }
.day-btn a {
    width: 30%;
    font-size: 2em;
    text-align: center;
    color: #2e3192;
    border-bottom: 1px dashed #2e3192;
    padding: 0 0 0.7% 0;
    margin: 0 auto 1% auto;
    display: block;
}
.day-list {
    width: 60%;
    background-color: #EAEAEA;
    border-radius: 15px;
    padding: 2% 4% 1.5% 4%;
    margin: 3% auto 0 auto;
    display: none;
}
.day-list h2 {
    width: 100%;
    font-size: 1.5em;
    text-align: center;
    color: #007FCE;
    border-bottom: 1px solid #007FCE;
    padding: 0 0 3px 0;
    margin: 0 auto 3% auto;
}
.day-list ul { overflow: hidden; margin: 0 0 5% 0; }
.day-list li {
    float: left;
    width: 13.285%;
    font-size: 1.125em;
    text-align: center;
    color: #B3B3B3;
    background-color: #FFF;
    border-radius: 5px;
    padding: 1% 2%;
    margin: 0 0.5% 1% 0.5%;
}
.day-list li.none { background-color: transparent; }
.day-list li.login {
    color: #FFF;
    background-color: #007FCE;
}

/*game-rule*/
.game-rule {
    background-color: #FFF;
	padding: 0;
	margin: 0 auto;
}
.game-rule h3 {
    width: 100%;
	font-size: 2em;
	font-weight: 600;
    text-align: center;
	color: #FFF;
    background-color: #999;
    padding: 10px;
	margin: 0;
}

/*gift-tb*/
.gift-tb {
    width: 100%;
    background-color: #FFF;
    border-collapse: collapse;
    border: 1px solid #0071bc;
    margin: 10px auto 0 0;   
}
.gift-tb tr:nth-child(odd) { background-color: #EAEAEA; }
.gift-tb th {
    font-size: 1.125em;
    text-align: center;
    white-space: nowrap;
    color: #FFF;
    border: 1px solid #0071bc;
    padding: 5px 20px;
    background-color: #0071bc;
}
.gift-tb td {
    font-size: 1.125em;
    line-height: 130%;
    color: #333;
    border: 1px solid #ccc;
    padding: 5px 20px;
}
.gift-tb td span {
    font-size: 0.9em;
    color: #808080;
}
.gift-tb td b { font-weight: bolder; }
.gift-tb td img { width: auto; height: 60px; }


/*---------------------------------------------------------------
----------------------------------------------------------------*/
@media screen and (max-width: 1680px) {
    .game-box h2 span { top: 14%; left: 48%; font-size: 6em; }
}

@media screen and (max-width: 1600px) {
    .game-box h2 span { top: 15%; left: 48.5%; font-size: 5.5em; }
}


@media screen and (max-width: 1440px) {
    .game-box h2 span { top: 14%; left: 48%; font-size: 5.5em; }
    .day-btn a { width: 30%; font-size: 1.6em; }
}

@media screen and (max-width: 1400px) {
    .game-box h2 span { top: 13%; left: 48%; font-size: 5.5em; }
}

@media screen and (max-width: 1366px) {   
}


@media screen and (max-width: 1280px) {
    .game-box h2 span { top: 13%; left: 48%; font-size: 5em; }
}


@media screen and (max-width: 1180px) {
    .game-box { padding: 0 5%; }
    .login-gift { width: 100%; }
    .game-box h2 span { top: 13%; left: 48%; font-size: 5.5em; }
}


@media screen and (max-width: 834px) {
    #g1, #g2, #g3, #g4, #g5 { padding-top: 73px; margin-top: -73px; }
    
    .game-box { padding: 0 2%; }
    .game-box h2 { width: 95%; }
    .lottery { width: 100%; }
    .lottery-gift { width: 80%; font-size: 2.5em; }
    .day-btn a { width: 45%; font-size: 2.2em; }
    
    .game-box h2 span { top: 13%; left: 48%; font-size: 6.5em; }
    
    .login-box { border-radius: 10px 10px 30px 30px; }
    .btn-login, .btn-login-ok { width: 60%; }
    .login-gift li { width: 31.3333%; margin: 0 1% 2% 1%; }
    .day-list { width: 100%; }
    .gift-tb td img { width: auto; height: auto; }    
}


@media screen and (max-width: 736px) {
    .game-box h2 span { top: 13%; left: 48%; font-size: 5.5em; }
}


@media screen and (max-width: 667px) {
    .lottery-gift { width: 80%; font-size: 2em; }
    .day-btn a { width: 50%; font-size: 2em; }
}


@media screen and (max-width: 480px) {    
    .game-area { background-size: 180% auto; }
    .game-header ul { flex-wrap: wrap; margin: 0 auto 3% auto; }
    .game-header li:nth-child(1) { float: none; width: 60%; margin: 0 auto; }
    .game-header li:nth-child(2) { float: none; width: 48%; margin: -2% 1% 0 1%; }
    .game-header li:nth-child(3) { width: 48%; margin: -2% 1% 0 1%; }
    
    .lottery-gift { width: 95%; font-size: 1.6em; }
    .game-box h2 span { top: 13%; left: 48%; font-size: 3.8em; }
    .btn-login, .btn-login-ok { width: 90%; margin: 3% auto 5% auto; }
    .day-btn a { width: 50%; font-size: 1.6em; }
    .day-list { width: 100%; border-radius: 10px; padding: 4% 4% 2% 4%; }
    .day-list h2 { font-size: 1.3em; }
    
    .game-rule h3 { font-size: 1.8em; }
    .gift-tb th, .gift-tb td { font-size: 1em; padding: 5px; }
}


@media screen and (max-width: 440px) {
    .game-box h2 span { top: 13%; left: 48%; font-size: 3.5em; }
    .day-btn a { width: 60%; font-size: 1.5em; }
}


@media screen and (max-width: 414px) {
    .game-box h2 span { top: 13%; left: 48%; font-size: 3em; }
}


@media screen and (max-width: 390px) {   
    .game-rule h3 { font-size: 1.5em; }    
}


@media screen and (max-width: 375px) {
    .lottery-gift { width: 95%; font-size: 1.4em; }
    .game-box h2 span { top: 13%; left: 48%; font-size: 3em; }
}


@media screen and (max-width: 360px) {
    .game-box h2 span { top: 13%; left: 48%; font-size: 2.8em; }
    .day-btn a { width: 70%; font-size: 1.5em; }
}


@media screen and (max-width: 320px) {
    .lottery-gift { width: 95%; font-size: 1.2em; }
    .game-box h2 span { top: 13%; left: 47%; font-size: 2.5em; }
    .gift-tb th, .gift-tb td { font-size: 0.9em; padding: 5px; }    
}