/*  ================================================================================
 * 2016 Gamania Digital Entertainment Co., Ltd. All Rights Reserved.
================================================================================  */


/* CSS Document */


ul,
il {
    list-style-image: none;
    list-style-type: none;
}

html {
    overflow-y:auto;
	 overflow-x:auto;
			
	
}

*,
body,
html {

	margin: 0;
    padding: 0;
    text-decoration: none;



}

body {
			
	    background-color: #ececec;
	background-size: contain;
}
a {
    text-decoration: none;
    outline: none;
    /* for Firefox */
    outline: medium none;
}

a:visited {
    background: none;
    font-weight: normal;
}

.ie6 img {
    width: 100%;
}
body,
html {
	height: 100%;

	font-family: '微軟正黑體';
	font-weight: bold;
}

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

.header {
	width:1400px;
	height:117px;
    position: relative;
    margin: 0 auto;
	    background-image: url(../img/index_01.jpg);
    background-position: top;
    background-repeat: no-repeat;
}

.logo a{
    position: absolute;
	display: block;
	background-image: url(../img/Logo.png);
	background-position: center top;
    background-repeat: no-repeat;
	left: 11px;
    margin-top: 10px;
	width: 264px;
	height: 50px;
    cursor: pointer;
}


.title {
	position: absolute;
	display: block;
	left: 405px;
	top: 19px;
	width: 589px;
	height: 106px;
	z-index: 100;
    background-image: url(../img/ribbon.png);
	background-repeat: no-repeat;
    text-align: center;
	line-height: 75px;
    font-family: '微軟正黑體';
	font-size: 1.05cm;
	text-shadow: 3px 3px 6px #2e0a14 ;

}


.wrapper {
    position: relative;
    margin: 0 auto;
    background-image: url(../img/index_02.jpg);
    background-position: top;
    background-repeat: no-repeat;
}


	.main {
	width:1400px;
	height:578px;
    position: relative;
    margin: 0 auto;
    background-image: url(../img/MBG.png);
    background-position: center top;
    background-repeat: no-repeat;

	}

/*--------------------STEP1--------------------*/
		.sp1 {
			position: relative;
			width: 336px;
	    	height: 578px;
	    	margin-left: 5px;
			float: left; 
			display: table;
		}

		.O1 {
			position: absolute;
			display: block;
		    top:124px;
		    left:223px;
			z-index:4;
			width: 67px;
	    	height: 71px;
	    	background-image: url(../img/O.png);
	    	background-position: center top;
	    	background-repeat: no-repeat;
		}
		.box1 {
			position: absolute;
			display: block;
		    top:13px;
		    left:20px;
			text-shadow: 3px 3px 6px #424242 ;
			font-size: 35px;
			color: #FAFAFA;
	        font-family: '微軟正黑體';
	        text-align: center;
            line-height: 75px;
			z-index:3;
			width: 149px;
	    	height: 96px;
	    	background-image: url(../img/box01.png);
	    	background-position: center top;
	    	background-repeat: no-repeat;
		}
	.phone {
			position: absolute;
			display: block;
		    top:0px;
		    left:0px;
			z-index:1;
			width: 336px;
	    	height: 578px;
	    	background-image: url(../img/PC_phone.png);
	    	background-position: center top;
	    	background-repeat: no-repeat;
		}
	.pic1 {
			position: absolute;
			display: block;
			width: 210px;
	    	height: 373px;
	    	margin-left: 63px;
			top: 127px;
		    z-index:0;
	    	background-image: url(../img/PC_step1.png);
	    	background-position: center top;
	    	background-repeat: no-repeat;
		}
/*--------------------STEP2-------------------*/
		.sp2 {
			position: relative;
			width: 336px;
	    	height: 578px;
	    	margin-left: 15px;
			float: left; 
			display: table;
		}

		.O2 {
			position: absolute;
			display: block;
		    top:355px;
		    left:174px;
			z-index:4;
			width: 67px;
	    	height: 71px;
	    	background-image: url(../img/O.png);
	    	background-position: center top;
	    	background-repeat: no-repeat;
		}
		.box2 {
			position: absolute;
			display: block;
		    top:13px;
		    left:20px;
			text-shadow: 3px 3px 6px #424242 ;
			font-size: 33px;
			color: #FAFAFA;
	        font-family: '微軟正黑體';
	        text-align: center;
            line-height: 75px;
			z-index:3;
			width: 149px;
	    	height: 96px;
	    	background-image: url(../img/box02.png);
	    	background-position: center top;
	    	background-repeat: no-repeat;
		}
	.phone {
			position: absolute;
			display: block;
		    top:0px;
		    left:0px;
			z-index:1;
			width: 336px;
	    	height: 578px;
	    	background-image: url(../img/PC_phone.png);
	    	background-position: center top;
	    	background-repeat: no-repeat;
		}
	.pic2 {
			position: absolute;
			display: block;
			width: 210px;
	    	height: 373px;
	    	margin-left: 63px;
			top: 127px;
		    z-index:0;
	    	background-image: url(../img/PC_step2.png);
	    	background-position: center top;
	    	background-repeat: no-repeat;
		}

/*--------------------STEP3-------------------*/

		.sp3 {
			position: relative;
			width: 336px;
	    	height: 578px;
	    	margin-left: 15px;
			float: left; 
			display: table;
		}

		.O3 {
			position: absolute;
			display: block;
		    top:300px;
		    left:210px;
			z-index:4;
			width: 67px;
	    	height: 71px;
	    	background-image: url(../img/O.png);
	    	background-position: center top;
	    	background-repeat: no-repeat;
		}
		.box3 {
			position: absolute;
			display: block;
		    top:13px;
		    left:20px;
			text-shadow: 3px 3px 6px #424242 ;
			font-size: 33px;
			color: #FAFAFA;
	        font-family: '微軟正黑體';
	        text-align: center;
            line-height: 75px;
			z-index:3;
			width: 149px;
	    	height: 96px;
	    	background-image: url(../img/box03.png);
	    	background-position: center top;
	    	background-repeat: no-repeat;
		}
	.phone {
			position: absolute;
			display: block;
		    top:0px;
		    left:0px;
			z-index:1;
			width: 336px;
	    	height: 578px;
	    	background-image: url(../img/PC_phone.png);
	    	background-position: center top;
	    	background-repeat: no-repeat;
		}
	.pic3 {
			position: absolute;
			display: block;
			width: 210px;
	    	height: 373px;
	    	margin-left: 63px;
			top: 127px;
		    z-index:0;
	    	background-image: url(../img/PC_step3.png);
	    	background-position: center top;
	    	background-repeat: no-repeat;
		}
/*--------------------STEP4-------------------*/

		.sp4 {
			position: relative;
			width: 336px;
	    	height: 578px;
	    	margin-left: 15px;
			float: left; 
			display: table;
		}

		.O4 {
			position: absolute;
			display: block;
		    top:176px;
		    left:220px;
			z-index:4;
			width: 67px;
	    	height: 71px;
	    	background-image: url(../img/O.png);
	    	background-position: center top;
	    	background-repeat: no-repeat;
		}
		.box4 {
			position: absolute;
			display: block;
		    top:13px;
		    left:20px;
			text-shadow: 3px 3px 6px #424242 ;
			font-size: 33px;
			color: #FAFAFA;
	        font-family: '微軟正黑體';
	        text-align: center;
            line-height: 75px;
			z-index:3;
			width: 149px;
	    	height: 96px;
	    	background-image: url(../img/box04.png);
	    	background-position: center top;
	    	background-repeat: no-repeat;
		}
	.phone {
			position: absolute;
			display: block;
		    top:0px;
		    left:0px;
			z-index:1;
			width: 336px;
	    	height: 578px;
	    	background-image: url(../img/PC_phone.png);
	    	background-position: center top;
	    	background-repeat: no-repeat;
		}
	.pic4 {
			position: absolute;
			display: block;
			width: 210px;
	    	height: 373px;
	    	margin-left: 63px;
			top: 127px;
		    z-index:0;
	    	background-image: url(../img/PC_step4.png);
	    	background-position: center top;
	    	background-repeat: no-repeat;
		}
/*---------------------------------------------------------------*/

.footer {
    z-index:100;
    width: 100%;
    height: 70px;
    display: block;
    position: relative;
    background-color: #ececec;
	overflow: hidden;
}