@charset "UTF-8";

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

.game-area {
    background-color: #c32649;
    padding: 0 10% 2% 10%;
	margin: 0 auto;
    overflow: hidden;
}
.game-header { width: 70%; margin: 0 auto 2% auto; }
.game-header img { width: 100%; }
.game-header ul { overflow: hidden; }
.game-header li { float: left; }
.game-header li:nth-child(1) { float: none; width: 45%; padding: 0; margin: 0 auto; }
.game-header li:nth-child(2) { width: 45%; margin: 0 1.5% 0 3.5%; }
.game-header li:nth-child(3) { width: 45%; margin: 0 1.5% 0 3.5%; }

.game-box { overflow: hidden; }
.game-box h2 { position: relative; text-align: center; }
.game-box h2 img { width: 60%; }
.game-box h2 span {
    position: absolute; bottom: 1%; left: 37.8%;
    width: 100px;
    font-size: 6em;
    font-weight: bold;
    text-align: center;
    color: #ffff00;
}
.slot-box {
    border: 8px solid #ff7eb1;
    border-radius: 50px;
    padding: 2% 10% 0 10%;
    margin: 0 0 50px 0;
    background-image: url(../images/game/game-bg.png);
	background-repeat: no-repeat;
	background-position: center bottom;
    background-size: cover;
    overflow: hidden;
}
.slot-gift {
    float: left;
    width: 40%;
    margin: 3% 5% 0 0;
}
.slot-gift h3 { width: 100%; text-align: center; }
.slot-gift h3 img:nth-child(2)  { display: none; }
.slot-gift h3 img { width: 60%; }
.slot-gift p {
    width: 100%;
    font-size: 2.3em;
    font-weight: bolder;
    text-align: center;
    line-height: 100%;
    border-radius: 20px;
    border: 10px solid #990008;
    padding: 10% 2%;
    color: #333;
    background: #ffffff;
    background: -moz-linear-gradient(top, #ffffff 0%, #f4f6b5 20%, #e6b559 100%);
    background: -webkit-linear-gradient(top, #ffffff 0%,#f4f6b5 20%,#e6b559 100%);
    background: linear-gradient(to bottom, #ffffff 0%,#f4f6b5 20%,#e6b559 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e6b559',GradientType=0 );
}
.slot-gift p span { font-size: 0.6em; font-weight: normal; color: #666; }

/*slotmachine*/
.slot {
    position: relative; 
    float: left;
/*    width: 633px;*/
    width: 533px;
}
.slotwrapper {
    position: absolute; top: 27%; left: 16.8%;
    height: 185px;
    overflow: hidden;
    display: inline-block;
}
.slotwrapper ul {
    float: left;
    position: relative;
/*
    width: 145.5px;
    height: 210px;
*/
    width: 121.5px;
    height: 185px;
    text-align: left;
    padding: 0;
    margin: 0;
}
.slotwrapper ul li img {
    vertical-align: top;
    width: auto;
/*    height: 100%;*/
    height: 185px;
}
.btn-play {
    position: absolute; top: 71%; left: 36%;
    width: 150px;
    height: 96px;
    cursor: pointer;
    background-image: url(../images/game/game-btnplay1.png);
	background-repeat: no-repeat;
	background-position: center center;
    background-size: 100% 100%;
}
.btn-play:active, .btn-play:focus {
    background-image: url(../images/game/game-btnplay2.png);
	background-repeat: no-repeat;
	background-position: center center;
    background-size: 100% 100%;
}
.btn-play-none {
    position: absolute; top: 71%; left: 36%;
/*
    width: 200px;
    height: 128px;
*/
    width: 150px;
    height: 96px;
    background-image: url(../images/game/game-btnplay3.png);
	background-repeat: no-repeat;
	background-position: center center;
    background-size: 100% 100%;
}
.btn-play-log {
    position: absolute; top: 71%; left: 36%;
    width: 150px;
    height: 96px;
    cursor: pointer;
    background-image: url(../images/game/game-btnplay1.png);
	background-repeat: no-repeat;
	background-position: center center;
    background-size: 100% 100%;
}
/*login*/
.login-box {
    border: 8px solid #b8fcff;
    border-radius: 50px;
    padding: 2% 5% 3% 5%;
    margin: 0 0 5% 0;
    overflow: hidden;
}
.btn-login { width: 35%; margin: 20px auto 30px auto; }
.btn-login img { width: 100%; }

/*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: 25%;
    font-size: 2.2em;
    text-align: center;
    color: #FFF;
    border-bottom: 1px dashed #FFF;
    padding: 0 0 0.7% 0;
    margin: 0 auto 1% auto;
    display: block;
}
.day-list {
    width: 50%;
    background-color: #EAEAEA;
    border-radius: 15px;
    padding: 1.5% 4%;
    margin: 0 auto;
    display: none;
}
.day-list h2 {
    font-size: 1.5em;
    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 2% 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-area {
    background-color: #FFF;
	padding: 0;
	margin: 0 auto;
}
.game-rule-area h2 {
	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;   
}
.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: 120%;
    color: #333;
    border: 1px solid #ccc;
    padding: 5px 20px;
}
.gift-tb td span {
    font-size: 0.9em;
    color: #808080;
}
.gift-tb td b { color: #FF0000; }
.gift-tb td img { width: auto; height: 60px; }


/*---------------------------------------------------------------
----------------------------------------------------------------*/

@media screen and (max-width: 1680px) {    
    .game-area { padding: 0 5% 2% 5%; }
    .slot-box { padding: 2% 12% 0 12%; }
}


@media screen and (max-width: 1600px) {
    .slot-box { padding: 2% 10% 0 10%; }
}


@media screen and (max-width: 1440px) {    
    .game-area { padding: 0 5% 2% 5%; }
    .slot-box { padding: 2% 6% 0 6%; }
    .game-box h2 span { bottom: 1%; left: 37.5%; font-size: 5em; }
    .day-btn a { width: 30%; font-size: 2.2em; } 
}


@media screen and (max-width: 1400px) {    
    .game-area { padding: 0 5% 2% 5%; }
    .day-btn a { width: 30%; font-size: 2.2em; }    
}


@media screen and (max-width: 1366px) {    
    .game-header { width: 90%; }
    
    .slot-box { padding: 2% 10% 0 10%; }
    .slot-gift p { font-size: 2.2em; }
    
    .slot { width: 395px; }
    .slotwrapper { top: 27%; left: 17.2%; height: 130px; }
    .slotwrapper ul { width: 90.5px; height: 130px; }
    .slotwrapper ul li img { height: 130px; }
    .btn-play, .btn-play-none, .btn-play-log { top: 69.5%; left: 34%; width: 130px; height: 83px; }
}


@media screen and (max-width: 1288px) {    
    .game-box h2 span { bottom: 1%; left: 37.1%; font-size: 5em; }
}


@media screen and (max-width: 1024px) {    
    .game-header { width: 100%; }
    .game-header li:nth-child(2), .game-header li:nth-child(3) { width: 48%; margin: 0 1%; }
    
    .slot-gift { float: none; width: 80%; margin: 0 auto 3% auto; overflow: hidden; display: flex; }
    .slot-gift h3 { float: left; width: auto; height: 130px; display: flex; }
    .slot-gift h3 img:nth-child(1) { display: none; }
    .slot-gift h3 img:nth-child(2) { height: 100%; display: block; }
    .slot-gift h3 img { width: auto; }
    .slot-gift p { float: left; width: 75%; height: 130px; font-size: 2.5em; line-height: 1; border: 5px solid #990008; border-radius: 10px; padding: 3% 5%; margin: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; }
    .slot-gift p span { width: 100%; }
    
    .slot { float: none; margin: 0 auto; }
    
    .game-box h2 span { bottom: 1%; left: 36%; font-size: 4em; }
    .login-box { padding: 1% 4% 3% 4%; }
    .btn-login { width: 45%; margin: 20px auto 30px auto; }
    .login-gift { width: 100%; }    
    .day-btn a { width: 40%; font-size: 2.2em; }
    .day-list { width: 90%; padding: 1.5% 4%; display: none; }
}


@media screen and (max-width: 834px) {
    #g1, #g2, #g3, #g4, #g5 { padding-top: 73px; margin-top: -73px; }
    .game-area { padding: 0 3% 2% 3%; }
    .game-header { width: 100%; margin: 0 auto 15px auto; }
    .game-header li:nth-child(2), .game-header li:nth-child(3) { width: 49%; margin: 0 0.5%; }
    
    .game-box h2 img { width: 90%; }

    .slot-box { padding: 2% 0 0 0; }
    .slot-gift { width: 70%; }
    
    .game-box h2 span { font-size: 5em; bottom: 1%; left: 31.5%; }
    .btn-login { width: 60%;}
    .day-btn a { width: 50%; font-size: 2.5em; margin: 0 auto 2% auto; }
    .login-gift li { width: 31.3333%; margin: 0 1% 2% 1%; }
    .day-list { width: 100%; padding: 1.5% 4%; display: none; }
    .gift-tb td img { width: auto; height: auto; }    
}


@media screen and (max-width: 768px) {    
    .slot-gift { width: 80%; }
}


@media screen and (max-width: 667px) {
    .game-box h2 span { font-size: 4em; bottom: 2%; left: 29.5%; }
    .day-btn a { width: 50%; font-size: 2em; }
}


@media screen and (max-width: 480px) {    
    .game-area { padding: 0 2% 2% 2%; }
    .game-header li:nth-child(1) { width: 60%; }
    
    .slot-box, .login-box { border-width: 5px; border-radius: 10px; margin: 0 0 30px 0; }    
    .game-box h2 img { width: 95%; }
    .game-box h2 span { bottom: 1.5%; left: 26%; font-size: 3em; }
    
    .slot-gift { width: 95%; }
    .slot-gift h3, .slot-gift p { height: 90px; }
    .slot-gift p { font-size: 1.8em; border: 5px solid #990008; border-radius: 10px; }
    
    .btn-login { width: 75%; }
    .day-btn a { width: 60%; font-size: 1.8em; }
    
    .game-rule { padding: 0 10px 20px 10px; }
    .gift-tb th, .gift-tb td { font-size: 1em; padding: 5px; }
}


@media screen and (max-width: 430px) {
    .slot { width: 355px; }
    .slotwrapper { top: 27%; left: 17%; height: 120px; }
    .slotwrapper ul { width: 81.5px; height: 120px; }
    .slotwrapper ul li img { height: 120px; }
    .btn-play, .btn-play-none, .btn-play-log { top: 69.5%; left: 34%; width: 120px; height: 77px; } 
    
    .game-box h2 span { bottom: 1.5%; left: 24.5%; font-size: 2.8em; }
}


@media screen and (max-width: 414px) {
    .slot-gift p { font-size: 1.5em; border: 5px solid #990008; border-radius: 10px; }
    .game-box h2 span { bottom: 1%; left: 24%; font-size: 2.6em; }
}


@media screen and (max-width: 390px) {    
    .slot-gift p { font-size: 1.5em; border: 5px solid #990008; border-radius: 10px; }
    .game-box h2 span { bottom: 1%; left: 23%; font-size: 2.5em; }
    .game-rule-area h2 { font-size: 1.5em; }
    
    .slot { width: 300px; }
    .slotwrapper { top: 27%; left: 16.6%; height: 102px; }
    .slotwrapper ul { width: 69.5px; height: 102px; }
    .slotwrapper ul li img { height: 102px; }
    .btn-play, .btn-play-none, .btn-play-log { top: 69.5%; left: 34%; width: 100px; height: 64px; }
}


@media screen and (max-width: 375px) {
    .slot-gift h3, .slot-gift p { height: 80px; }
    .slot-gift p { border: 5px solid #990008; border-radius: 10px; font-size: 1.4em; }
    .game-box h2 span { bottom: 1%; left: 22%; font-size: 2.4em; }
    .day-btn a { width: 70%; font-size: 1.6em; }
}


@media screen and (max-width: 320px) {    
    .slot-gift { width: 100%; }    
    .game-box h2 span { bottom: 1.5%; left: 20%; font-size: 2em; }
    .day-btn a { width: 70%; font-size: 1.5em; }
    .gift-tb th, .gift-tb td { font-size: 0.9em; padding: 5px; }    
}