/*!
 *
 * Copyright 2015 CREATEC(www.createcdigital.com)
 *
 */

@charset "utf-8";

/* reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{margin:0;padding:0}
html,body{height:100%}
body,input,button,textarea,select{font:12px/1.5 "microsoft yahei",Tahoma,Helvetica,Arial;color:#333}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}
table{border-collapse:collapse;border-spacing:0}
fieldset,img{border:0}
li,dd{list-style:none}
a{color:#d30000;text-decoration:none}
a:hover,a:active{text-decoration:underline}
section,article,aside,header,footer,nav,dialog,figure,hgroup{display:block}
body{font-family: "SimHei";}
img{max-width:100%;}


/*-- index.html
====================================================== */
.swiper-container {width: 100%; height: 100%;background-color: rgb(35,31,32);}
.swiper-slide {text-align: center; font-size: 18px;background-color: rgb(35,31,32);}

/* p1 */
.p1{background-color: rgb(35,31,32);}
.p1 .logo{margin:20px 30px; width: 120px;}
.p1 .cover{margin:55% auto; width: 320px; text-align: center;}
.p1 .arrow-down { position: absolute; left: 220px; bottom: 20px; cursor: pointer;}

/* p2 */
.p2{background-color: rgb(35,31,32);}
.p2 .title{margin:15% auto 10% auto; text-align: center;  font-size: 28px; color:#ffffff;}
.p2 .part{width:400px; margin:20px auto; text-align: left;  font-size: 22px; color:#ffffff;}
.p2 .arrow-down {position: absolute; left: 220px; bottom: 15px; cursor: pointer;}

/* p3 */
.p3{background-color: rgb(255,255,255);}
.p3 .list{margin:10% auto;}
.p3 .title{margin:20px auto; text-align: center;  font-size: 28px; color:#333333;}
.p3 .item{margin: 20px auto; }
.p3 .arrow-down {position: absolute; left: 220px; bottom: 20px; cursor: pointer;}

/* p4 */
.p4{background-color: rgb(255,255,255); }
.p4 .list{margin:0px auto;}
.p4 .title{width:100%; padding-top:10%; text-align: center; font-size: 28px; color:#333333;}
.p4 .summary{width:100%; margin-top:0px; text-align: center; font-size: 16px; color: #666666;}
.p4 .item{margin: 10px auto; }
.p4 .btns{width:400px; position: relative; bottom:1%; left: 15%;}
.p4 .btns div{width:130px; margin: 0 20px; background-color: rgb(35,60,89); float: left;  text-align: center; font-size: 22px; color:#ffffff; border-radius:25px; line-height: 40px;}

/* audio */
.audio-icon {position: absolute; right: 20px; top: 20px; z-index: 200; display: block; width: 44px; height: 44px;background-repeat: no-repeat; background-image: url(../images/audio/music-icon.png); background-size: contain;}
.audio-icon-animation{animation: rotate 2s linear infinite;}
@keyframes rotate {0%,100% {transform: rotate(0deg);} 100% {transform: rotate(360deg);}}

/*-- game.html
====================================================== */
#tab01{position:relative; width:100%; height:100%;margin: 0 auto; background-color: #000000;}
#tab01 .controller {display: none;}

/* tab1 */
#tab01 .content .btn{width: 7%; position: absolute; cursor: pointer;}
#tab01 .tab1 .btn-1{top:35%; left: 80%;}
#tab01 .tab1 .btn-2{top:75%; left: 80%;}

/* tab2 */
#tab01 .tab2 .btn-1{top:78%; left: 1%;}
#tab01 .tab2 .btn-2{top:78%; left: 12%;}
#tab01 .tab2 .btn-3{top:78%; left: 22%;}
#tab01 .tab2 .btn-4{top:78%; left: 32%;}
#tab01 .tab2 .btn-5{top:78%; left: 41%;}
#tab01 .tab2 .btn-6{top:78%; left: 51%;}
#tab01 .tab2 .btn-7{top:78%; left: 61%;}
#tab01 .tab2 .btn-8{top:78%; left: 71%;}
#tab01 .tab2 .btn-9{top:78%; left: 81%;}
#tab01 .tab2 .btn-10{top:78%; left: 91%;}

/* tab3 */
#tab01 .tab3 .btn-1{top:20%; left: 60%;}
#tab01 .tab3 .btn-2{top:70%; left: 30%;}

/* tab4 */
#tab01 .tab4 p{width:35%; position: absolute; left:32%; top: 220px; font-size: 18px; color: #ffffff; text-align: center;}
#tab01 .tab4 .score{position: absolute; top:155px;}
#tab01 .tab4 .btn-go{left:32%; top:562px;}
#tab01 .tab4 .btn-replay{left:32%; top:626px;}
#tab01 .tab4 .btn-share{left:32%; top:692px;}