@charset "utf-8";
/* CSS Document */

a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, caption, canvas, center, cite, code,
dd, del, details, dfn, dialog, div, dl, dt, em, embed, fieldset, figcaption, figure, form, footer, header, hgroup, h1, h2, h3, h4, h5, h6, html, i, iframe, img, ins, kbd, label, 
 legend, li, mark, menu, nav,object, ol, output, p, pre, q, ruby, s, samp, section, small, span, strike, strong, sub, summary, sup, tt, table, tbody, textarea, tfoot, thead, 
  time, tr, th, td, u, ul, var, video { 
	margin: 0; 
	padding: 0; 
}

img
{
	image-rendering: crisp-edges;
	image-rendering: -moz-crisp-edges;
	image-rendering: -o-crisp-edges;
	image-rendering: -webkit-optimize-contrast;
}


html, body{
    margin: 0;
	padding: 0;
}

body{
	background-image: url(../img/background-bk.jpg);
	background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
    background-attachment: fixed;

     
}

/*左logo簡略說明-*/
.computer-logo{
    width: 357px;
    position: fixed;
    left: 5%;
    top: 40%;
    z-index: 10;
}
.computer-logo img{
    max-width: 357px;
    width: 100%;
    height: auto;
}
/*------------*/



/*右icon-award*/
.best-award{
    width: 279px;
    position: fixed;
    right: 0;
    top: 35%;
    z-index: 11;  
}
.best-award img{
    max-width: 279px;
    width: 100%;
    height: auto; 
}
/*------------*/


/*右-上下移動icon-*/
.top-down-ex{
	width: 173px;
    position: fixed;
    right: 22%;
    top: 40%;
    z-index: 12; 	
}
.top-down-ex img{
	max-width: 173px;
	width: 100%;
	height: auto;
}
/*------------*/




/*------手機區域設定------------*/

/*------手機區域外框------------*/
.main-container-outside{
    width: 100%;
    display: block;
    left: 0;
	top: 0;
	position: fixed;   
}

/*------手機區域內置中框-------*/
.center-container-box{
    width: 549px;
    display: block;
	margin: 0 auto;
}

/*------內置中框之外框-related------*/
.main-content{
    width: 100%;
	position: relative;
	left: 0;
	top: 0;
	z-index: 20;
}

/*------手機圖片-當背景-----*/
.outside-iphone-pic{
    width: 100%;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 22;
}
.outside-iphone-pic img{
    max-width: 549px;
	width: 100%;
	height: auto
}




/*------手機圖片-置中的內容-----*/

/*------外框----*/
.iphone-inner-out-block{
    width: 100%;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 24;
}  

/*------內框-按414px除於原圖尺寸百分比-置中--*/
.iphone-inner-center-box{
	width: 75.40983606557377%;
	margin: 80px auto 0 auto;
	display: block;
}

/*------內框-按414px除於原圖尺寸百分比-置中--*/
.iphone-content-box{
	width: 100%;
	height: 736px;
	left: 0;
	top: 0;
	position: relative;
    z-index: 35;
	overflow: hidden;  
}

/*---手機中間內部的底圖-----*/
.bk-ground-ip{
	width: 100%;
	left: 0;
	top: 0;
	position: absolute;
	z-index: 30;	
	line-height: 0px;
}    
.bk-ground-ip img{
	max-width: 100%;
	width: 100%;
	height: auto;
} 


/*---手活動-按鈕----*/
.button-top{
	width: 27.777777%;
	display: flex;
	position: absolute;
	top: 11%;
	/* left: 3.87%; */
	z-index: 33;
}
.button-top img{
	max-width: 70px;
	width: 100%;
	height: auto;
} 
.button-down{
	width: 80%;
	display: block;
	position: absolute;
	top: 91%;
	/* left: 3.87%; */
	z-index: 33;
}
.ctrl-a1{
	left: 31.5%;
	top: 86%
}
.ctrl-a2{
	left: 10%;
	font-size: 0.8rem;
	font-family: 'Noto Sans TC', sans-serif;
	font-weight: 300;
	color: #000000;
	text-align: center;
	letter-spacing: 0px;
	top: 96%;
}  
.ctrl-a3{
	left: 68.116%;
}  
@media only screen and (max-width : 1880px){
.ctrl-a1{
	left: 31.5%;
	top: 86%
}
}
@media only screen and (max-width : 1366px){
.ctrl-a1{
	left: 28.5%;
	top: 86%
}
}
@media only screen and (max-width : 1280px){
.ctrl-a1{
	left: 30%;
	top: 86%
}
}
@media only screen and (max-width : 430px){
.ctrl-a1{
	left: 31.5%;
	top: 86%
}
}
@media only screen and (max-width : 420px){
.ctrl-a1{
	left: 35.5%;
	top: 85%
}
}
/*------------*/



/*---遊戲開始-按鈕-----*/
.bottom-button{
	width: 100%;	
	margin: auto;
	top: 42%;
	left: 10.5%;
	position: absolute;
	z-index: 35;
}
.bottom-button img{
	max-width: 325px;
	width: 80%;
	height: auto;
}



.logo{
	width: 25.84541062801932%;
	left: 0;
	right: 0;
	position: absolute;
	z-index: 34;
	margin: auto !important;
	top: 13px;
}  
.logo img{
	max-width: 107px;
	width: 100%;
	height: auto;
} 
.fb-like{
	position: absolute;
	left: 72%;
	top: 15px;
	z-index: 40;
}


.form {
    position: absolute;
    top: 45%;
    right: 24%;
}

.text {
    display: flex
;
    justify-content: center;
    color: #08365E;
    margin: 0 0 8% 0;
	font-weight: 700;
}

.td{
    border: #08365E;
}


.sentbtn {
    max-width: 200px;
    width: 100%;
    position: relative;
    display: block;
	right: -6%;
	}





@media only screen and (max-width : 1920px){
}
@media only screen and (max-width : 1680px){
}
@media only screen and (max-width : 1440px){
.computer-logo{
    width: 280px;
    left: 5%;
    top: 39%;
}
.best-award{
    width: 230px;
    right: 0;
    top: 34%;
}
.top-down-ex{
	width: 160px;
    right: 21%;
    top: 40%;	
}
.center-container-box{
    width: 414px;
	margin: 0 auto;
}
.iphone-inner-center-box{
	width: 100%;
	margin: 20px auto 0 auto;
	-webkit-transform: translate(1px,0);
	-moz-transform: translate(1px,0);
	-o-transform: translate(1px,0);
	transform: translate(1px,0);	
}
.iphone-content-box{
	width: 100%;
	height: 736px; 
}

}
@media only screen and (max-width : 1366px){
.computer-logo{
    width: 250px;
    left: 5%;
    top: 39%;
}
.best-award{
    width: 215px;
    right: 0;
    top: 34%;
}
.top-down-ex{
	width: 150px;
    right: 21%;
    top: 40%;	
}
.fb-like{
	left: 67%;
	top: 15px;
}		
.center-container-box{
    width: 370px;
	margin: 0 auto;
}
.iphone-inner-center-box{
	width: 100%;
	margin: 0px auto 0 auto;
	-webkit-transform: translate(1px,0);
	-moz-transform: translate(1px,0);
	-o-transform: translate(1px,0);
	transform: translate(1px,0);	
}
.iphone-content-box{
	width: 100%;
	height: 658px; 
}

.form {
    right: 21%;
}
}
@media only screen and (max-width : 1280px){

.center-container-box{
    width: 390px;
	margin: 0 auto;
}
.iphone-content-box{
	width: 100%;
	height: 690px; 
}
}
@media only screen and (max-width : 1024px){
 .computer-logo{
    width: 220px;
    left: 5%;
    top: 39%;
}
.best-award{
    width: 180px;
    right: 0;
    top: 34%;
}
.top-down-ex{
	width: 130px;
    right: 19%;
    top: 40%;	
}
.fb-like{
	left: 67%;
	top: 15px;
}
.center-container-box{
    width: 414px;
	margin: 15px auto;
}
.iphone-content-box{
	width: 100%;
	height: 736px; 
}
}
@media only screen and (max-width : 900px){
.computer-logo{
	 display: none;
}
.best-award{
 display: none;
}
.top-down-ex{
 display: none;	
}
.center-container-box{
    width: 549px;
	margin: 0 auto;
}
.iphone-content-box{
	width: 100%;
	height: 736px; 
}
.iphone-inner-center-box{
	width: 75.40983606557377%;
	margin: 111px auto 0 auto;
	-webkit-transform: translate(1px,0);
	-moz-transform: translate(1px,0);
	-o-transform: translate(1px,0);
	transform: translate(1px,0);	
}

.fb-like{
	left: 72%;
	top: 15px;
}
.form {
    right: 24%;
}
}
@media only screen and (max-width : 480px){
.outside-iphone-pic{
    display: none;
}
.center-container-box{
    width: 414px;
	margin: 0 auto;
}
.iphone-inner-center-box{
	width: 100%;
	margin: 20px auto 0 auto;
	-webkit-transform: translate(0,0);
	-moz-transform: translate(0,0);
	-o-transform: translate(0,0);
	transform: translate(0,0);	
}
.main-container-outside{
	position: absolute;   
}
.fb-like{
	left: 72%;
	top: 25px;
}
}
@media only screen and (max-width : 414px){
.center-container-box{
    width: 100%;
	margin: 0 auto;
}
.iphone-inner-center-box{
	margin: 0 auto 0 auto;
}

body{
    overflow: auto;
    background-image: none;
}

.button-top {
    top: 152.5vw;
	display: flex;
	justify-content: center; /* 如果要置中 */
	align-items: center;
}

.bottom-button{
    top: 75vw;
}

.iphone-content-box {
    height: 177.644vw;
}
.form {
    right: 22%;
}
}
@media only screen and (max-width : 375px){
.iphone-content-box{
	width: 100%;
	height: 667px; 
}
.fb-like{
	left: 72%;
	top: 20px;
}
}
@media only screen and (max-width : 360px){
	.button-down {
		top: 92%;
	}

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

.iphone-content-box{
	width: 100%;
	height: 568px; 
}

.fb-like{
	left: 68%;
	top: 15px;
}
.button-down {
	top: 92%;
}
.ctrl-a2 {
    font-size: 0.7rem;
}
}