@import url("reset.css");

*{
	-webkit-box-sizing:border-box;
	box-sizing:border-box;
	}

@font-face{
	font-family:CENTER GOTHIC;
	src:url('GOTHIC_0.TTF');
	}
/*---------------------------------上方Header所頁面有共用--------------------------------------*/

html,body{
	background-color:#252525;
	font-size:13px;
	font-family:Arial, Helvetica, "微軟正黑體", sans-serif;
	}
	
#wapper{
	width:1040px;
	margin:0 auto;
	position:relative;
	}
	
header{
	width:100%;
	height:62px;
	display:table;
	}
	
header h2{
	display:table-cell;
	background-image:url(images/logo.png);
	background-repeat:no-repeat;
	background-position:center left;
	width:240px;
	height:36px;
	vertical-align:middle;
	}
	
header h2 a{
	display:block;
	width:240px;
	height:36px;
	text-indent:-9999px;
	}	
	
header h4{
	display:table-cell;
	vertical-align:middle;
	width:50px;
	height:44px;
	text-align:right;
	}

header h4 ul{
	display:block;
	list-style:none;
	overflow:hidden;
	}	

header h4 li{
	display:block;
	float:left;
	}		

header h4 li a{
	display:block;
	width:50px;
	height:46px;
	background-repeat:no-repeat;
	background-size:44px 44px;
	background-position:center center;
	}
	
header h4 li .FB{
	background-image:url(images/FB_icon.png);
	}
	
header h4 li .TW{
	background-image:url(images/twitter_icon.png);
	}	
	
header h4 li #LANGURAGE{
	background-image:url(images/TW.png);
	}
	
header h4 li a:hover{
	background-position:center 2px;}	
	
#TOP_NAV{
	display:none;
	width:340px;
	height:auto;
	z-index:999;
	position:absolute;
	right:10px;
	top:70px;
	background-color:rgba(0,0,0,0.8);
	-webkit-border-radius:10px 10px 10px 10px;
	border:2px solid #FFF;
	box-shadow:0px 2px 10px #333333;
	padding:20px;
	}	
	
#TOP_NAV .NAV_TABLE{
	width:320px;
	margin:0 auto;
	}
	
#TOP_NAV .NAV_TDP{
	width:42px;
	height:60px;
	text-align:left;
	}
	
#TOP_NAV .NAV_TD{
	text-align:left;
	text-indent:10px;
	}	
	
#TOP_NAV .NAV_TD a{
	font-size:14px;
	text-decoration:none;
	height:60px;
	line-height:60px;
	color:#FFF;
	} 	
	
#TOP_NAV .NAV_TD a:hover{
	color:rgba(255,255,255,0.7);
	}			
/*--------------------------------------首頁區-----------------------------------*/		
	
#event_banner{
	clear:both;
	margin-bottom:7px;
	}			
	
#event_banner h2{
	display:block;
	background-image:url(images/index_banner.png);
	width:100%;
	height:265px;
	text-indent:-9999px;
	}
	
#event01{
	background-color:#1ab2bf;
	background-image:url(images/Q1_banner.png);
	background-position:center top;
	background-repeat:no-repeat;
	width:100%;
	height:500px;
	margin-bottom:7px;
	}
	
#event01 .PLAY_TITLE{
	width:560px;
	margin:0 auto;
	padding-top:220px;
	}	
	
#event01 .PLAY_TITLE h2{
	text-align:center;
	padding:5px 5px 10px 5px;
	color:#FFF;
	font-size:46px;
	}	

#event01 .PLAY_TITLE h3{
	display:block;
	width:460px;
	height:60px;
	line-height:60px;
	font-size:32px;
	color:#1ab2bf;
	text-align:center;
	background-color:#fec013;
	padding:0px 5px 0px 5px;
	margin:0 auto;
	-webkit-border-radius:5px 5px 5px 5px;
	}

#event01 .PLAY_TITLE p{
	text-align:center;
	color:#FFF;
	padding:10px 5px 20px 5px;
	font-size:16px;
	}		
	
#PLAY_AREA{
	width:466px;
	margin:0 auto;
	overflow:hidden;
	}	
	
#PLAY_AREA #FB_join{
	float:left;
	display:block;
	width:226px;
	height:60px;
	line-height:60px;
	padding-top:0px;
	}
	
#PLAY_AREA .BTN{
	width:240px;
	height:120px;
	float:right;
	}
	
#PLAY_AREA .BTN h4 a{
	width:240px;
	height:60px;
	background-color:rgba(0,0,0,0.7);
	float:right;
	-webkit-border-radius:25px 25px 25px 25px;
	color:#1ab2bf;
	font-size:26px;
	text-align:center;
	text-decoration:none;
	line-height:60px;
	font-weight:200;
	}
	
#PLAY_AREA .BTN h4 a:hover{
	background-color:rgba(0,0,0,0.5);
	}
	
#PLAY_AREA .BTN p{
	color: #033;
	font-size:14px;
	text-align:center;
	padding-top:70px;
	}
	
#active{
	width:100%;
	clear:both;
	}	
	
#active ul{
	list-style:none;
	overflow:hidden;
	}	
	
#active li{
	display:block;
	width:342px;
	height:240px;
	float:left;
	padding-top:30px;
	margin-right:7px;
	margin-bottom:0px;
	}
	
#active .event02_B{background-color:#8f3c55;}
#active .event03_B{background-color:#f89c22;}
#active .event04_B{background-color:#5b6475;}
	
#active li:last-child {
	margin-right:0px;
	}
	
#active li a{
	display:block;
	width:102px;
	height:102px;
	background-repeat:no-repeat;
	background-position:center center;
	margin:0 auto;
	-webkit-transition: all 0.3s ease-out;
	-webkit-transform:perspective(102px) rotateY(0deg);
	}	
	
#active li a:hover{
	-webkit-transform:perspective(102px) rotateY(180deg);
	}	
	

#active .event02{ 
	background-image:url(images/index_BTN01.png);
	}
#active .event03{
	background-image:url(images/index_BTN03.png);
	}
#active .event04{
	background-image:url(images/index_BTN02.png);
	}	
	
				
#active h4{
	text-align:center;
	color:#FFF;
	font-size:24px;
	padding-top:20px;
	}
#active p{
	text-align:center;
	color:rgba(255,255,255,0.7);
	padding-top:10px;
	font-size:14px;
	}
/*------------------------------------子頁共用區--------------------------------*/
#page_header{
	margin-bottom:7px;
	}

#page_BTN{
	display:block;
	width:100%;
	height:140px;
	margin-bottom:7px;
	}

#page_BTN ul{
	list-style:none;
	overflow:hidden;
	}
	
#page_BTN li{
	display:block;
	float:left;
	width:254px;
	height:140px;
	padding-top:10px;
	margin-right:8px;
	margin-top:0px;
	}
	
#page_BTN li:last-child {
	margin-right:0px;
	}
	
#page_BTN .event_BTN01{background-color:#903c56;}
#page_BTN .event_BTN02{background-color:#5b6475;}		
#page_BTN .event_BTN03{background-color:#f99c23;}
#page_BTN .event_BTN04{background-color:#e7545c;}

#page_BTN a{
	display:block;
	width:80px;
	height:80px;
	margin:0 auto;
	background-repeat:no-repeat;
	background-position:center center;
	}
	
#page_BTN a:hover{
	background-position:center top;
	}
	
#page_BTN .icon01{
	background-image:url(images/P_BTN01.png);
	}
#page_BTN .icon02{
	background-image:url(images/P_BTN02.png);
	}
#page_BTN .icon03{
	background-image:url(images/P_BTN03.png);
	}
#page_BTN .icon04{
	background-image:url(images/P_BTN04.png);
	}

#page_BTN .icon01:hover{
	background-image:url(images/P_BTN01_R.png);
	}
#page_BTN .icon02:hover{
	background-image:url(images/P_BTN02_R.png);
	}
#page_BTN .icon03:hover{
	background-image:url(images/P_BTN03_R.png);
	}
#page_BTN .icon04:hover{
	background-image:url(images/P_BTN04_R.png);
	}
	
#page_BTN h4{
	width:100%;
	text-align:center;
	padding-top:10px;
	color:#FFF;
	font-size:18px;
	}
	
#page_BTN_2{
	display:none
}			
	
/*--------------------------------子頁個別區------------------------------------*/


/*--------------------------------知識大挑戰 1/5------------------------------------*/
#event_area01{
	width:100%;
	clear:both;
	background-color:#fec015;
	}
#event_area01 .event_area01_T{
	width:100%;
	}
	
#event_area01 .event_area01_T img{
	width:100%;
	height:auto;
	}	
#event_area01 .event_area01_M{
	width:700px;
	height:auto;
	margin:0 auto;
	}
#event_area01 .event_area01_M h3{
	display: block;
	font-size:28px;
	/*height:80px;
	line-height:80px;*/
	text-align:center;
	font-family:CENTER GOTHIC "微軟正黑體";
	color:#19b2c0;
	font-weight:900;
	letter-spacing:1px;
	}
	
#event_area01 .event_area01_M h3 span{
	font-weight:900;
	font-size:36px;
	font-family:CENTER GOTHIC;
	}
	
#event_area01 .event_area01_D{
	width:100%;
	height:300px;
	background-position:center bottom;
	background-image: url(images/Q_back_D_01.png);
	background-repeat:no-repeat;
	}
		
	
#event_area01 .event_area01_D ul{
	list-style:none;
	text-align:center;
	}	
	
#event_area01 .event_area01_D li{
	color:#ea535c;
	font-size:25px;
	line-height:40px;
	font-weight:700;
	}
	
#event_area01 .next_BTN{
	width:90px;
	height:40px;
	margin:20px auto;
	}
#event_area01 .next_BTN a{
	display:block;
	width:90px;
	height:40px;
	line-height:40px;
	background-color:#1ab2bf;
	color:#fec015;
	font-size:20px;
	text-align:center;
	text-decoration:none;
	-webkit-border-radius:5px 5px 5px 5px;
    }
	
#event_area01 .next_BTN a:hover{
	background-color:rgba(26,178,191,0.8);
	}
	
/*--------------------------------知識大挑戰 2/3/4------------------------------------*/
	
#event_area02{
	width:100%;
	clear:both;
	background-color:#d6d4c5;
	}
#event_area02 .event_area01_T{
	width:100%;
	}
#event_area02 .event_area01_M{
	width:700px;
	height:auto;
	margin:0 auto;
	text-align:center;
	}
#event_area02 .event_area01_M h3{
	display: block;
	font-size:28px;
	/*height:80px;
	line-height:80px;*/
	text-align:center;
	color:#903d5b;
	font-weight:900;
	font-family:CENTER GOTHIC "微軟正黑體";
	letter-spacing:1px;
	}
	
#event_area02 .event_area01_M h3 span{
	font-weight:900;
	font-size:36px;
	font-family:CENTER GOTHIC;
	}
	
#event_area02 .event_area01_D{
	width:100%;
	height:auto;
	background-position:center bottom;
	background-image:none;
	background-repeat:no-repeat;
	padding-bottom:30px;
	}
	
#event_area02 .event_area01_D ul{
	list-style:none;
	text-align:center;
	}	
	
#event_area02 .event_area01_D li{
	color:#19b3bf;
	font-size:25px;
	line-height:40px;
	font-weight:700;
	}
	
#event_area02 .next_BTN{
	width:90px;
	height:40px;
	margin:20px auto;
	}
#event_area02 .next_BTN a{
	display:block;
	width:90px;
	height:40px;
	line-height:40px;
	background-color:#903c56;
	color:#d6d4c5;
	font-size:20px;
	text-align:center;
	text-decoration:none;
	-webkit-border-radius:5px 5px 5px 5px;
    }
	
#event_area02 .next_BTN a:hover{
	background-color:rgba(143,61,84,0.8);
	}
		
/*--------------------------------知識大挑戰share on fb-------------------------------*/	

#event_area02 .event_area02_M{
	display:block;
	height:100px;
	}

#event_area02 .event_area02_M h3{
	display: block;
	font-size:42px;
	/*height:80px;
	line-height:80px;*/
	text-align:center;
	color:#903d5b;
	font-weight:700;
	font-family:CENTER GOTHIC "微軟正黑體";
	letter-spacing:1px;
	}
	
#event_area02 .event_area02_M p{
	color:#19b3bf;
	font-size:28px;
	text-align:center;
	padding:20px 0px;
	}
	
#event_area02 .event_area02_D{
	width:100%;
	height:250px;
	background-position:center bottom;
	background-image: url(images/Q_back_D_02.png);
	background-repeat:no-repeat;
	}
	
#event_area02 .event_area02_D .FB_like{
	width:250px;
	margin:0 auto;
	padding:20px 0px 0px 0px;
	text-align:center;
	}
	
#event_area02 .event_area02_D p{
	color:#903d5b;
	text-align:center;
	line-height:1.4;
	padding:0px 0px 10px 0px;
	}

#event_area02 .event_area02_D .send_mail{
	width:340px;
	margin:0 auto; 
	}	
	
#event_area02 .event_area02_D h6{
	display:block;
	width:50px;
	height:25px;
	padding-top:1%;
	margin:0 auto;
	}	
#event_area02 .event_area02_D h6 a{
	display:block;
	width:50px;
	height:25px;
	text-align:center;
	text-decoration:none;
	line-height:25px;
	color:#fec015;
	background-color:#903c56;
	border-radius:3px;
	}
	
#event_area02 .event_area02_D h6 a:hover{
	background-color:rgba(144,60,86,0.8);
	}					
		
/*--------------------------------知識大挑戰share on fb part2-------------------------------*/

#event_area02 .event_area02_D article{
	color:#903d5b;
	text-align:center;
	line-height:1.4;
	padding:5px 0; 
	}
	
#event_area02 .event_area02_D .share_BTN{
	width:232px;
	height:52px;
	margin:0 auto;
	}
	
#event_area02 .event_area02_D .share_BTN a{
	display:block;
	width:100%;
	height:52px;
	background-image:url(images/share.png);
	background-repeat:no-repeat;
	background-position:center center;
	text-indent:-9999px;
	}
	
#event_area02 .event_area02_D .share_BTN a:hover{
	background-image:url(images/share_R.png);
	}		
	
/*----------------------------------隨身碟絕配 問題------------------------------------*/			

#event_area03{
	width:100%;
	height:531px;
	clear:both;
	background-image:url(images/match_Back.png);
	}
	
#event_area03 h3{
	text-align:center;
	padding-top:220px;
	color:#8b3d55;
	font-size:28px;
	font-weight:700;
	}
	
#event_area03 ul{
	display:block;
	width:252px;
	list-style:none;
	margin:0 auto;
	overflow:hidden;
	padding-top:40px;
	}
	
#event_area03 .left{
	float:left;
	}
	

#event_area03 .right{
	float:right;
	}
	
#event_area03 li a{
	display:block;
	width:102px;
	height:60px;
	
	background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#f3f5f4), color-stop(50%,#f3f5f4), color-stop(53%,#91c4d9), color-stop(53%,#91c4d9), color-stop(100%,#91c4d9)); /* Chrome,Safari4+ */
	background: -moz-linear-gradient(top, #f3f3f5 1%, #f3f3f5 50%, #91c4d9 53%, #93c3d7 53%, #93c3d7 100%); /* FF3.6+ */
	background: -ms-linear-gradient(top, #f3f3f5 1%,#f3f3f5 50%,#91c4d9 53%,#93c3d7 53%,#93c3d7 100%); /* IE10+ */
	
	border-radius:5px 5px 5px 5px;
	text-decoration:none;
	text-align:center;
	line-height:60px;
	color:#e7545a;
	font-size:30px;
	font-family:CENTER GOTHIC;
	font-weight:500;
	}
	
#event_area03 li a:hover{
	
	background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#f3f3f5), color-stop(50%,#f3f3f5), color-stop(53%,#91c4d9), color-stop(53%,#93a7d6), color-stop(100%,#93a5d6)); /* Chrome,Safari4+ */
	background: -moz-linear-gradient(top, #f3f3f5 1%, #f3f3f5 50%, #91c4d9 53%, #93a7d6 53%, #93a5d6 100%); /* FF3.6+ */
	background: -ms-linear-gradient(top, #f3f3f5 1%,#f3f3f5 50%,#91c4d9 53%,#93a7d6 53%,#93a5d6 100%); /* IE10+ */
	}									


/*----------------------------------隨身碟絕配 產品配對------------------------------------*/

#event_area03_2{
	background-color:#fec015;
	background-image:url(images/match_Back.png);
	width:100%;
	height:531px;
	position:relative;
	}
	
#event_area03_2 .products{
	width:268px;
	height:272px;
	margin:0 auto;
	padding-top:62px;
	}
	
#event_area03_2 #previous{
	width:90px;
	height:90px;
	position:absolute;
	left:28%;
	top:30%;
	}
	
#event_area03_2 #previous a{
	display:block;
	width:90px;
	height:110px;
	background-image:url(images/previous.png);
	background-repeat:no-repeat;
	background-position:center top;
	background-size:60px 60px;
	text-decoration:none;
	text-align:center;
	font-size:16px;
	font-family:"CENTER GOTHIC";
	color:#FFF;
	padding-top:62px;
	}
	
#event_area03_2 #previous a:hover{
	background-image:url(images/previous_R.png);
	}	
	
#event_area03_2 #next{
	width:90px;
	height:90px;
	position:absolute;
	right:28%;
	top:30%;
	}
	
#event_area03_2 #next a{
	display:block;
	width:90px;
	height:110px;
	background-image:url(images/next.png);
	background-repeat:no-repeat;
	background-position:center top;
	background-size:60px 60px;
	text-decoration:none;
	text-align:center;
	font-size:16px;
	font-family:"CENTER GOTHIC";
	color:#FFF;
	padding-top:62px;
	}
	
#event_area03_2 #next a:hover{
	background-image:url(images/next_R.png);
	}						
	
#event_area03_2 .info{
	width:400px;
	height:auto;
	margin:0 auto;
	padding-top:60px;
	}
	
#event_area03_2 .info h3{
	text-align:center;
	font-size:50px;
	color:#FFF;
	font-weight:bold;
	}
	
#event_area03_2 .info article{
	text-align:center;
	font-size:24px;
	color:#903c56;
	padding:5px 0;
	line-height:1.3;
	}
	
#event_area03_2 .info p{
	text-align:center;
	color:#903c56;
	font-size:14px;
	padding:3px;
	}	
	
#event_area03_2 .info .send_mail{
	overflow:hidden;
	}
	
#event_area03_2 .info .send_mail p{
	display:block;
	float:left;
	padding-left:50px;
	}	

#event_area03_2 .info h6{
	float:left;
	}	
#event_area03_2 .info h6 a{
	display:block;
	width:40px;
	height:20px;
	text-align:center;
	text-decoration:none;
	line-height:20px;
	color:#fec015;
	margin-left:12px;
	background-color:#903c56;
	border-radius:3px;
	}
	
#event_area03_2 .info h6 a:hover{
	background-color:rgba(144,60,86,0.8);
	}		
						
/*------------------------------------SP雙用隨身碟比較表-------------------------------*/	

#event_area04{
	display:block;
	width:100%;
	height:auto;
	background-image:url(images/table_back.png);
	background-repeat:no-repeat;
	background-position:center top;
	background-color:#19b2bf;
	padding-bottom:80px;
	}
#event_area04 h3{
	text-align:center;
	padding-top:70px;
	color:#ffffff;
	font-size:32px;
	font-weight:500;
	}
#event_area04 img{
	border-radius: 10px;
	}		
#event_area04 .rule{
	width:880px;
	margin:0 auto;
	margin-top:40px;
	border:1px solid #19b2bf;
	background-color:#128f9a;
	}
	
#event_area04 .title{
	width:110px;
	height:130px;
	color:#19b2bf;
	background-color:#0e5a60;
	border-left:1px solid #19b2bf;
	border-bottom:1px solid #19b2bf;
	text-align:center;
	font-size:14px;
	}
	
#event_area04 .title_s{
	width:110px;
	height:60px;
	color:#19b2bf;
	background-color:#0e5a60;
	border-left:1px solid #19b2bf;
	border-bottom:1px solid #19b2bf;
	text-align:center;
	font-size:14px;
	}
	
#event_area04 .title_b{
	width:110px;
	height:160px;
	color:#19b2bf;
	background-color:#0e5a60;
	border-left:1px solid #19b2bf;
	border-bottom:1px solid #19b2bf;
	text-align:center;
	font-size:14px;
	}	
	
#event_area04 .item_b{
	width:110px;
	height:160px;
	color:#000;
	background-color:#128f9a;
	border-left:1px solid #19b2bf;
	border-bottom:1px solid #19b2bf;
	text-align:center;
	font-size:14px;
	line-height:1.5;
	padding:4px
	}
	
#event_area04 .item{
	width:110px;
	height:60px;
	color:#000;
	background-color:#128f9a;
	border-left:1px solid #19b2bf;
	border-bottom:1px solid #19b2bf;
	text-align:center;
	font-size:14px;
	line-height:1.5;
	padding:4px
	}	
	
#event_area04_2{
	display:none;
	}
	
#event_area04_3{
	display:none;}			
	
/*-----------------------------------活動獎項與辦法----------------------------------*/					

#event_area05{
	width:100%;
	background-color:#FFF;
	padding:5% 8%;
	}
#event_area05 h4{
	display:block;
	width:240px;
	height:160px;
	color:#903a55;
	font-size:30px;
	font-weight:700;
	background-image:url(images/active_title.jpg);
	background-repeat:no-repeat;
	background-position:center bottom;
	margin:0 auto;
	padding:20px 0;
	}
	
#event_area05 h5{
	text-align:center;
	color:#19b0c1;
	font-size:18px;
	padding:20px 0;
	}
	
#event_area05 .PIC{
	width:600px;
	height:auto;
	margin:0 auto;
	padding:10px 0px 20px 0px;
	}
	
#event_area05 ul{
	list-style:disc;
	}
	
#event_area05 li{
	font-size:13px;
	text-decoration:none;
	line-height:1.8;
	padding:0px 10px;
	}
	
#event_area05 li span{
	color:#F03;
	}
	
#event_area05 li .mail{
	text-decoration:none;
	color:#39F;
	}							
	

/*------------------------------------footer 頁尾全部共用-----------------------*/

footer{
	display:block;
	background-color:#252525;
	width:100%;
	height:60px;
	}
	
footer p{
	text-align:center;
	color:#999;
	line-height:60px;
	padding:0%;
	}	
	

/*---------------------------------------手機版型------------------------------------------*/


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

*{
	-webkit-box-sizing:border-box;
	box-sizing:border-box;
	}
	
html,body{
	background-color:#252525;
	font-size:13px;
	font-family:Arial, Helvetica, "微軟正黑體", sans-serif;
	-webkit-text-size-adjust:none;
	}	



/*---------------------------------上方Header所頁面有共用--------------------------------------*/


	
#wapper{
	width:100%;
	margin:0 auto;
	position:relative;
	}
	
header{
	width:100%;
	height:60px;
	display:table;
	}
	
header h2{
	display:table-cell;
	background-image: url(phone_images/logo.png);
	background-repeat:no-repeat;
	background-position:center left;
	background-size:200px 32px;
	width:160px;
	height:24px;
	vertical-align:middle;
	}
	
header h2 a{
	display:block;
	width:240px;
	height:36px;
	text-indent:-9999px;
	}	
	
header h4{
	display:table-cell;
	vertical-align:middle;
	width:120px;
	height:44px;
	text-align:right;
	}

header h4 ul{
	display:block;
	list-style:none;
	overflow:hidden;
	}	

header h4 li{
	display:block;
	float:left;
	}		

header h4 li a{
	display:block;
	width:40px;
	height:44px;
	background-repeat:no-repeat;
	background-size:36px 36px;
	background-position:center center;
	}
	
header h4 li .FB{
	background-image:url(images/FB_icon.png);
	}
	
header h4 li .TW{
	background-image:url(images/twitter_icon.png);
	}	
	
header h4 li #LANGURAGE{
	background-image:url(images/TW.png);
	}
	
header h4 li a:hover{
	background-position:center 2px;}	
	
#TOP_NAV{
	display:none;
	width:340px;
	height:auto;
	z-index:999;
	position:absolute;
	right:10px;
	top:70px;
	background-color:rgba(0,0,0,0.8);
	-webkit-border-radius:10px 10px 10px 10px;
	border:2px solid #FFF;
	box-shadow:0px 2px 10px #333333;
	padding:20px;
	}	
	
#TOP_NAV .NAV_TABLE{
	width:320px;
	margin:0 auto;
	}
	
#TOP_NAV .NAV_TDP{
	width:42px;
	height:60px;
	text-align:left;
	}
	
#TOP_NAV .NAV_TD{
	text-align:left;
	text-indent:10px;
	}	
	
#TOP_NAV .NAV_TD a{
	font-size:14px;
	text-decoration:none;
	height:60px;
	line-height:60px;
	color:#FFF;
	} 	
	
#TOP_NAV .NAV_TD a:hover{
	color:rgba(255,255,255,0.7);
	}			
/*--------------------------------------首頁區-----------------------------------*/		
	
#event_banner{
	clear:both;
	margin-bottom:7px;
	}			
	
#event_banner h2{
	display:block;
	background-image: url(phone_images/Phone_index_banner.jpg);
	background-position:center center;
	background-repeat:no-repeat;
	background-size:cover;
	width:100%;
	height:0;
	padding-bottom:44.7%;
	text-indent:-9999px;
	}
	
#event01{
	background-color:#1ab2bf;
	background-image:url(phone_images/Phone_Q1_banner.jpg);
	background-position:center top;
	background-repeat:no-repeat;
	background-size:cover;
	width:100%;
	height:0;
	padding-bottom:102.7%;
	margin-bottom:7px;
	}
	
#event01 .PLAY_TITLE{
	width:100%;
	padding-top:25%;
	}	
	
#event01 .PLAY_TITLE h2{
	text-align:center;
	padding:5px 5px 10px 5px;
	color:#FFF;
	font-size:32px;
	}	

#event01 .PLAY_TITLE h3{
	display:block;
	width:80%;
	height:auto;
	line-height:40px;
	font-size:18px;
	color:#1ab2bf;
	text-align:center;
	background-color:#fec013;
	padding:0px 5px 0px 5px;
	margin:0 auto;
	-webkit-border-radius:5px 5px 5px 5px;
	}

#event01 .PLAY_TITLE p{
	text-align:center;
	color:#FFF;
	padding:10px 30px 10px 30px;
	font-size:14px;
	line-height:1.8;
	}		
	
#PLAY_AREA{
	width:100%;
	overflow:hidden;
	}	
	
#PLAY_AREA #FB_join{
	float:none;
	display:block;
	width:100%;
	height:50px;
	line-height:40px;
	text-align:center;
	padding-top:10px;
	}
	
#PLAY_AREA .BTN{
	width:100%;
	height:auto;
	float:none;
	}
	
#PLAY_AREA .BTN h4 a{
	display:block;
	width:160px;
	height:40px;
	background-color:rgba(0,0,0,0.7);
	float:none;
	-webkit-border-radius:25px 25px 25px 25px;
	color:#1ab2bf;
	font-size:28px;
	text-align:center;
	text-decoration:none;
	line-height:40px;
	font-weight:200;
	margin:0 auto;
	}
	
#PLAY_AREA .BTN h4 a:hover{
	background-color:rgba(0,0,0,0.5);
	}
	
#PLAY_AREA .BTN p{
	color: #033;
	font-size:12px;
	text-align:center;
	padding-top:10px;
	}
	
#active{
	width:100%;
	clear:both;
	}	
	
#active ul{
	list-style:none;
	overflow:hidden;
	}	
	
#active li{
	display:block;
	width:100%;
	height:240px;
	float:left;
	padding-top:30px;
	margin-right:0px;
	margin-bottom:7px;
	}
	
#active .event02_B{background-color:#8f3c55;}
#active .event03_B{background-color:#f89c22;}
#active .event04_B{background-color:#5b6475;}
	
#active li:last-child {
	margin-right:0px;
	}
	
#active li a{
	display:block;
	width:102px;
	height:102px;
	background-repeat:no-repeat;
	background-position:center center;
	background-size:91px 91px;
	margin:0 auto;
	-webkit-transition: all 0.3s ease-out;
	-webkit-transform:perspective(102px) rotateY(0deg);
	}	
	
#active li a:hover{
	-webkit-transform:perspective(102px) rotateY(180deg);
	}	
	

#active .event02{ 
	background-image:url(phone_images/index_BTN01.png);
	}
#active .event03{
	background-image:url(phone_images/index_BTN03.png);
	}
#active .event04{
	background-image:url(phone_images/index_BTN02.png);
	}	
	
				
#active h4{
	text-align:center;
	color:#FFF;
	font-size:24px;
	padding-top:20px;
	}
#active p{
	text-align:center;
	color:rgba(255,255,255,0.7);
	padding-top:10px;
	font-size:14px;
	}
/*------------------------------------子頁共用區--------------------------------*/
#page_header{
	width:100%;
	margin-bottom:7px;
	}
	
#page_header img{
	width:100%;
	height:auto;
	}	
	
#page_BTN{
	display:none;
	}	

#page_BTN_2{
	display:block;
	width:100%;
	height:auto;
	margin-top:0px;
	margin-bottom:0px;
	}

#page_BTN_2 ul{
	list-style:none;
	overflow:hidden;
	}
	
#page_BTN_2 li{
	display:block;
	float:left;
	width:49%;
	height:140px;
	padding-top:10px;
	margin-right:2%;
	margin-top:8px;
	}
	
#page_BTN_2 li:nth-child(even) {
	margin-right:0px;
	}
	
#page_BTN_2 .event_BTN01{background-color:#903c56;}
#page_BTN_2 .event_BTN02{background-color:#5b6475;}		
#page_BTN_2 .event_BTN03{background-color:#f99c23;}
#page_BTN_2 .event_BTN04{background-color:#e7545c;}

#page_BTN_2 a{
	display:block;
	width:80px;
	height:80px;
	margin:0 auto;
	background-repeat:no-repeat;
	background-position:center center;
	background-size:50px 50px;
	}
	
#page_BTN_2 a:hover{
	background-position:center 14px;
	}
	
#page_BTN_2 .icon01{
	background-image:url(images/P_BTN01.png);
	}
#page_BTN_2 .icon02{
	background-image:url(images/P_BTN02.png);
	}
#page_BTN_2 .icon03{
	background-image:url(images/P_BTN03.png);
	}
#page_BTN_2 .icon04{
	background-image:url(images/P_BTN04.png);
	}

#page_BTN_2 .icon01:hover{
	background-image:url(images/P_BTN01.png);
	}
#page_BTN_2 .icon02:hover{
	background-image:url(images/P_BTN02.png);
	}
#page_BTN_2 .icon03:hover{
	background-image:url(images/P_BTN03.png);
	}
#page_BTN_2 .icon04:hover{
	background-image:url(images/P_BTN04.png);
	}
	
#page_BTN_2 h4{
	width:100%;
	text-align:center;
	padding-top:5px;
	color:#FFF;
	font-size:16px;
	}		
	
/*--------------------------------子頁個別區------------------------------------*/


/*--------------------------------知識大挑戰 1/5------------------------------------*/
#event_area01{
	width:100%;
	clear:both;
	background-color:#fec015;
	}
#event_area01 .event_area01_T{
	width:100%;
	}
	
#event_area01 .event_area01_T{
	width:100%;
	height:auto;}	
	
#event_area01 .event_area01_M{
	width:100%;
	height:auto;
	margin:0 auto;
	}
#event_area01 .event_area01_M h3{
	display:block;
	font-size:22px;
	/*height:80px;*/
	line-height:1.6;
	text-align: center;
	font-family:CENTER GOTHIC "微軟正黑體";
	color:#19b2c0;
	font-weight:900;
	letter-spacing:0px;
	padding:5%;
	}
	
#event_area01 .event_area01_M h3 span{
	font-weight:900;
	font-size:32px;
	font-family:CENTER GOTHIC;
	}
	
.event_IMG{
	width:100%;
	}	

.event_IMG img{
	max-width:100%;
	height:auto;
	}	
	
#event_area01 .event_area01_D{
	width:100%;
	height:0;
	padding-bottom:60%;
	background-position:center bottom;
	background-image: url(phone_images/Q1_back_D_01.jpg);
	background-size:cover;
	background-repeat:no-repeat;
	}
	
#event_area01 .event_area01_D ul{
	list-style:none;
	text-align:center;
	}	
	
#event_area01 .event_area01_D li{
	color:#ea535c;
	font-size:18px;
	line-height:2;
	font-weight:700;
	}
	
#event_area01 .next_BTN{
	width:90px;
	height:40px;
	margin:20px auto;
	}
#event_area01 .next_BTN a{
	display:block;
	width:90px;
	height:40px;
	line-height:40px;
	background-color:#1ab2bf;
	color:#fec015;
	font-size:20px;
	text-align:center;
	text-decoration:none;
	-webkit-border-radius:5px 5px 5px 5px;
    }
	
#event_area01 .next_BTN a:hover{
	background-color:rgba(26,178,191,0.8);
	}
	
/*--------------------------------知識大挑戰 2/3/4------------------------------------*/
	
#event_area02{
	width:100%;
	clear:both;
	background-color:#d6d4c5;
	}
#event_area02 .event_area01_T{
	width:100%;
	}
	
#event_area02 .event_area01_T img{
	width:100%;
	height:auto;
	}
	
#event_area02 .event_area01_M{
	width:100%;
	height:auto;
	margin:0 auto;
	text-align:center;
	}
#event_area02 .event_area01_M h3{
	display: block;
	font-size:22px;
	/*height:80px;*/
	line-height:1.6;
	text-align:center;
	color:#903d5b;
	font-weight:900;
	font-family:CENTER GOTHIC "微軟正黑體";
	letter-spacing:0px;
	padding:5%;
	}
	
#event_area02 .event_area01_M h3 span{
	font-weight:900;
	font-size:32px;
	font-family:CENTER GOTHIC;
	}
	
.event_IMG{
	width:100%;
	}	

.event_IMG img{
	max-width:100%;
	height:auto;
	}	
	
#event_area02 .event_area01_D{
	width:100%;
	height:auto;
	/*padding-bottom:70%;
	background-position:center bottom;*/
	background-image:none;
	/*background-size:cover;
	background-repeat:no-repeat;*/
	padding-bottom:3%;
	}
	
#event_area02 .event_area01_D ul{
	list-style:none;
	text-align:center;
	}	
	
#event_area02 .event_area01_D li{
	color:#19b3bf;
	font-size:18px;
	line-height:2;
	font-weight:700;
	}
	
#event_area02 .next_BTN{
	width:90px;
	height:40px;
	margin:20px auto;
	}
#event_area02 .next_BTN a{
	display:block;
	width:90px;
	height:40px;
	line-height:40px;
	background-color:#903c56;
	color:#d6d4c5;
	font-size:20px;
	text-align:center;
	text-decoration:none;
	-webkit-border-radius:5px 5px 5px 5px;
    }
	
#event_area02 .next_BTN a:hover{
	background-color:rgba(143,61,84,0.8);
	}
/*--------------------------------知識大挑戰share on fb-------------------------------*/	

#event_area02 .event_area02_M{
	display:block;
	height:auto;
	}

#event_area02 .event_area02_M h3{
	display: block;
	font-size:36px;
	/*height:80px;
	line-height:80px;*/
	text-align:center;
	color:#903d5b;
	font-weight:900;
	font-family:CENTER GOTHIC "微軟正黑體";
	letter-spacing:1px;
	}
	
#event_area02 .event_area02_M p{
	color:#19b3bf;
	font-size:20px;
	text-align:center;
	padding:10px 0px;
	}
	
#event_area02 .event_area02_D{
	width:100%;
	height:0;
	padding-bottom:40%;
	background-position:center bottom;
	background-image: url(phone_images/Q1_back_D_03.jpg);
	background-size:cover;
	background-repeat:no-repeat;
	}
	
#event_area02 .event_area02_D .FB_like{
	width:250px;
	margin:0 auto;
	padding:10px 0px 10px 0px;
	text-align:center;
	font-size:12px;
	}
	
#event_area02 .event_area02_D p{
	color:#903d5b;
	text-align:center;
	line-height:1.4;
	padding:0.6% 0; 
	}
	
#event_area02 .event_area02_D .send_mail{
	width:340px;
	margin:0 auto; 
	}	
	
#event_area02 .event_area02_D h6{
	display:block;
	width:50px;
	height:25px;
	padding-top:1%;
	margin:0 auto;
	}	
#event_area02 .event_area02_D h6 a{
	display:block;
	width:50px;
	height:25px;
	text-align:center;
	text-decoration:none;
	line-height:25px;
	color:#fec015;
	background-color:#903c56;
	border-radius:3px;
	}
	
#event_area02 .event_area02_D h6 a:hover{
	background-color:rgba(144,60,86,0.8);
	}				


	
/*--------------------------------知識大挑戰share on fb part2-------------------------------*/

#event_area02 .event_area02_D article{
	color:#903d5b;
	text-align:center;
	line-height:1.4;
	padding:5px 0; 
	}

#event_area02 .event_area02_D .share_BTN{
	width:162px;
	height:36px;
	margin:0 auto;
	}
	
#event_area02 .event_area02_D .share_BTN a{
	display:block;
	width:100%;
	height:36px;
	background-image:url(images/share.png);
	background-repeat:no-repeat;
	background-position:center center;
	background-size:162px 36px;
	text-indent:-9999px;
	}
	
#event_area02 .event_area02_D .share_BTN a:hover{
	background-image:url(images/share_R.png);
	}	

	
/*----------------------------------隨身碟絕配 問題------------------------------------*/			

#event_area03{
	width:100%;
	height:0;
	padding-bottom:84.6%;
	clear:both;
	background-image:url(phone_images/match_back.jpg);
	background-repeat:no-repeat;
	background-position:center center;
	background-size:cover;
	}
	
#event_area03 h3{
	text-align:center;
	padding:30% 5% 5% 5%;
	color:#8b3d55;
	font-size:22px;
	font-weight:700;
	line-height:1.6;
	}
	
#event_area03 ul{
	display:block;
	width:180px;
	list-style:none;
	margin:0 auto;
	overflow:hidden;
	padding-top:2%;
	}
	
#event_area03 .left{
	float:left;
	}
	

#event_area03 .right{
	float:right;
	}
	
#event_area03 li a{
	display:block;
	width:80px;
	height:40px;
	
	background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#f3f5f4), color-stop(50%,#f3f5f4), color-stop(53%,#91c4d9), color-stop(53%,#91c4d9), color-stop(100%,#91c4d9)); /* Chrome,Safari4+ */
	background: -moz-linear-gradient(top, #f3f3f5 1%, #f3f3f5 50%, #91c4d9 53%, #93c3d7 53%, #93c3d7 100%); /* FF3.6+ */
	background: -ms-linear-gradient(top, #f3f3f5 1%,#f3f3f5 50%,#91c4d9 53%,#93c3d7 53%,#93c3d7 100%); /* IE10+ */
	
	border-radius:5px 5px 5px 5px;
	text-decoration:none;
	text-align:center;
	line-height:40px;
	color:#e7545a;
	font-size:22px;
	font-family:CENTER GOTHIC;
	font-weight:500;
	}
	
#event_area03 li a:hover{
	
	background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#f3f3f5), color-stop(50%,#f3f3f5), color-stop(53%,#91c4d9), color-stop(53%,#93a7d6), color-stop(100%,#93a5d6)); /* Chrome,Safari4+ */
	background: -moz-linear-gradient(top, #f3f3f5 1%, #f3f3f5 50%, #91c4d9 53%, #93a7d6 53%, #93a5d6 100%); /* FF3.6+ */
	background: -ms-linear-gradient(top, #f3f3f5 1%,#f3f3f5 50%,#91c4d9 53%,#93a7d6 53%,#93a5d6 100%); /* IE10+ */
	}									


/*------------------------------隨身碟絕配 產品配對-------------------------------*/

#event_area03_2{
	background-color:#fec015;
	background-image:url(phone_images/match_Back_02.jpg);
	background-repeat:no-repeat;
	background-position:center center;
	background-size:cover;
	height:451px;
	width:100%;

	}
	
#event_area03_2 .products{

	margin:0 auto;
	padding-top:7%;
	}
	
#event_area03_2 .products img{
	margin:0 auto;
	width:80%;
	height:auto;
	}
	
#event_area03_2 #previous{
	width:45px;
	height:55px;
	position:absolute;
	left:16%;
	top:24%;
	}
	
#event_area03_2 #previous a{
	display:block;
	width:45px;
	height:55px;
	background-image:url(images/previous.png);
	background-repeat:no-repeat;
	background-position:center top;
	background-size:32px 32px;
	text-decoration:none;
	text-align:center;
	font-size:12px;
	font-family:"CENTER GOTHIC";
	color:#FFF;
	padding-top:38px;
	}
	
#event_area03_2 #previous a:hover{
	background-image:url(images/previous_R.png);
	}	
	
#event_area03_2 #next{
	width:45px;
	height:55px;
	position:absolute;
	right:16%;
	top:24%;
	}
	
#event_area03_2 #next a{
	display:block;
	width:45px;
	height:55px;
	background-image:url(images/next.png);
	background-repeat:no-repeat;
	background-position:center top;
	background-size:32px 32px;
	text-decoration:none;
	text-align:center;
	font-size:12px;
	font-family:"CENTER GOTHIC";
	color:#FFF;
	padding-top:38px;
	}
	
#event_area03_2 #next a:hover{
	background-image:url(images/next_R.png);
	}		
	
#event_area03_2 .info{
	width:100%;
	height:auto;
	margin:0 auto;
	padding-top:5%;
	}
	
#event_area03_2 .info h3{
	text-align:center;
	font-size:28px;
	color:#FFF;
	font-weight:bold;
	}
	
#event_area03_2 .info article{
	text-align:center;
	font-size:20px;
	color:#903c56;
	padding:1% 6%;
	line-height:1.6;
	}
	
#event_area03_2 .info p{
	text-align:center;
	color:#903c56;
	font-size:14px;
	padding:1%;
	}			
#event_area03_2 .info .send_mail{
	overflow:hidden;
	width:340px;
	margin:0 auto; 
	}
	
#event_area03_2 .info .send_mail p{
	display:block;
	float:left;
	}	

#event_area03_2 .info h6{
	float:left;
	padding-top:0.6%;
	}	
#event_area03_2 .info h6 a{
	display:block;
	width:40px;
	height:20px;
	text-align:center;
	text-decoration:none;
	line-height:20px;
	margin-left:8%;
	color:#fec015;
	background-color:#903c56;
	border-radius:3px;
	}
	
#event_area03_2 .info h6 a:hover{
	background-color:rgba(144,60,86,0.8);
	}					
/*------------------------------------SP雙用隨身碟比較表-------------------------------*/	

#event_area04{
	display:none;
	}
	
#event_area04_2{
	display:block;
	width:100%;
	height:auto;
	background-color:#19b2bf;
	padding:5% 0;
	}
#event_area04_2 .phone_rule{
	width:90%;
	height:auto;
	margin:0 auto;
	background-color:#128f9a;
	}
	
#event_area04_2 .phone_title{
	width:24%;
	height:auto;
	background-color:#0e5a60;
	border-left:1px solid #19b2bf;
	border-bottom:1px solid #19b2bf;
	color:#19b2bf;
	text-align:center;
	font-size:12px;
	padding:3%;
	line-height:1.6;
	}
	
#event_area04_2 .phone_item{
	width:25%;
	height:auto;
	background-color:#128f9a;
	border-left:1px solid #19b2bf;
	border-bottom:1px solid #19b2bf;
	color:#000;
	text-align:center;
	font-size:12px;
	padding:3%;
	line-height:1.5;
	}	
	
#event_area04_2 .phone_item img{
	width:20px;
	height:20px;
	}
	
	
#event_area04_3{
	display:block;
	width:100%;
	height:auto;
	background-color:#19b2bf;
	padding:5% 0;
	}
#event_area04_3 .phone_rule{
	width:90%;
	height:auto;
	margin:0 auto;
	background-color:#128f9a;
	}
	
#event_area04_3 .phone_title_D{
	width:19%;
	height:auto;
	background-color:#0e5a60;
	border-left:1px solid #19b2bf;
	border-bottom:1px solid #19b2bf;
	color:#19b2bf;
	text-align:center;
	font-size:12px;
	padding:3%;
	line-height:1.6;
	}
	
#event_area04_3 .phone_item_D{
	width:20%;
	height:auto;
	background-color:#128f9a;
	border-left:1px solid #19b2bf;
	border-bottom:1px solid #19b2bf;
	color:#000;
	text-align:center;
	font-size:12px;
	padding:3%;
	line-height:1.5;
	}	
	
#event_area04_3 .phone_item_D img{
	width:20px;
	height:20px;
	}				
	
			


	
/*-----------------------------------活動獎項與辦法----------------------------------*/					

#event_area05{
	width:100%;
	background-color:#FFF;
	padding:5%;
	}
#event_area05 h4{
	display:block;
	width:100%;
	height:160px;
	color:#903a55;
	font-size:30px;
	font-weight:400;
	background-image:url(phone_images/active_title.jpg);
	background-repeat:no-repeat;
	background-position:center bottom;
	background-size:143px 102px;
	margin:0 auto;
	padding:20px 0;
	text-align:center;
	}
	
#event_area05 h5{
	text-align:center;
	color:#19b0c1;
	font-size:18px;
	padding:20px 0 10px 0;
	line-height:1.6;
	}
	
#event_area05 .PIC{
	width:100%;
	height:auto;
	margin:0 auto;
	padding:2% 0px 4% 0px;
	}
	
#event_area05 .PIC img{
	width:100%;
	height:auto;
	}	
	
#event_area05 ul{
	list-style:disc;
	padding-left:3%;
	}
	
#event_area05 li{
	font-size:13px;
	text-decoration:none;
	line-height:1.8;
	padding:0px;
	text-align:justify;
	}
	
#event_area05 li span{
	color:#F03;
	}
	
#event_area05 li .mail{
	text-decoration:none;
	color:#39F;
	}							
	

/*------------------------------------footer 頁尾全部共用-----------------------*/

footer{
	display:block;
	background-color:#252525;
	width:100%;
	height:20px;
	}
	
footer p{
	text-align: center;
	color:#999;
	line-height:1.6;
	padding:10px 5px 10px 5px;
	font-size:12px;
	}

































}