/* ---reset.css--- */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/* ---reset.css--- */

*{
	margin: 0;
	padding: 0;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	-o-box-sizing:border-box;
	box-sizing:border-box;
	}

html{-webkit-text-size-adjust:none;
     /*font-family: Meiryo, "Meiryo UI", "Microsoft JhengHei UI", "Microsoft JhengHei", sans-serif;*/
	 font-family: Arial, Helvetica,"source-han-sans-traditional","微軟正黑體", "Microsoft JhengHsans",
	 sans-serif;
}

body{
	font-size:17px;
	background-image:url(../images/yellow-bg.gif);
	background-color:#fbef4d;
}

#noie6 {
    background: #FFDFDF; /*背景色*/
    border: 1px solid #FF2F2F; /*邊線*/
    clear: both; /*清除繼承上方的浮動*/
    color: #555; /*字體顏色*/
    display: block; /*顯示方式*/
    font-size: 15px; /*字體大小*/
    height: 40px; /*高度*/
    letter-spacing: 1px; /*字體間距*/
    padding: 5px; /*內邊距*/
    position: relative; /*相對定位*/
    text-align: center; /*文字置中*/
    top: 10px; /*距離上方10px*/
    width: 100%; /*寬度*/
    z-index:99;
}
/* ----------電腦版型--------------------------- */

#header{
	width:100%;
	height:auto;
    display:block;
	z-index:9999;}
	
#fb{
	width:100%;
	height:auto;
	margin:0 auto;
	margin-bottom:0;
	clear:both;
	display:block;}
	
	
/*-------------footer-------------------------*/			
#footer {
	display:none;
	width:100%;
	min-width:320px;
	height:60px;
	background-color:#df2012;
	bottom:0;
}

#footer ul {
	display: block;
	width:220px;
	margin:0 auto;
	padding-top:10px;
}
#footer li {
	display: block;
	float:left;
	padding-right:5%;
}
#footer a {
	text-indent: -9999px;
}
#footer li#GJUN a {
	display: block;
	background-image:url(../images/GJUN.png);
	background-repeat:no-repeat;
	line-height:40px;
	width: 150px;
	height: 40px;
	
}
#footer li#FB a {
	display: block;
	background-image: url(../images/FB.png);
	width: 40px;
	height: 40px;
	background-position: bottom;
	padding-right:-5%;
}
#footer li#FB a:hover {
	background-position: top;
}
	
/*------------- CONTENT1 -------------*/	
#CONTENT1{
    width:100%;
	height:504px;
	position:relative;
	background-image:url(../images/top-bg.gif);
	background-repeat:no-repeat;
	background-position: top center;
	overflow:hidden;
	margin-top:-3px;}
	
#CONTENT1 #WRAPPER{
    position: relative;
	margin:0 auto;
	width:1024px;
	max-width:1024px;}
	

#PIC_block{
	display:block;
	float:right;
	width: 35%;
	max-width: 350px;
	height: 455px;}

#PIC{
	background-image:url(../images/peo.png);
	background-repeat:no-repeat;
	width:100%;
	height: 515px;}
	
#TITLEBOX{
	display:block;
	float:right;
	width: 65%;
	max-width: 674px;
	margin-top:90px;
}

#tag{
	display:block;
	position:absolute;
	top:195px;
	left:850px;
	width:142px;
	height:142px;
	background-image:url(../images/tag.png);}


#TITLE1_block{
	display:block;
	max-width: 550px;
}

#TITLE1{
	background-image:url(../images/title1.png);
	width:100%;
	padding-bottom:16.36363636363636%;
	background-size:100% auto;
	float:none;
	background-repeat:no-repeat;
	background-position:center center;}
	
#TITLE2_block{
	display:block;
	max-width: 550px;
	margin-bottom:30px;
}

#TITLE2{
	background-image:url(../images/title2.png);
	width:100%;
	padding-bottom:21.81818181818182%;
	background-size:100% auto;
	float:none;
	background-repeat:no-repeat;
	background-position:center center;}
	
h6{
	display:block;
	margin:left auto;
	margin-left:20px;
	text-indent:-99999px;
	background-image:url(../images/sub-title.png);
	width:500px;
	height:48px;
	font-size:160%;
	color:#FFF;
	text-align:center;
	letter-spacing:2px;
	padding:1%;}
	
h1 span{
	font-weight:bold;}

/*------------- CONTENT2 -------------*/
	
#CONTENT2{
    width:100%;
	height:317px;
	background-color:#282828;
	background-image:url(../images/gray-bg.png);}
	
#CONTENT2 #WRAPPER{
	margin:0 auto;
	width:100%;
	max-width:750px;
	margin:0 auto;}

#arrow1{
	display:block;
	margin:0 auto;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 30px 50px 0 50px;
	border-color: #fbef4d transparent transparent transparent;	
	}
	
h2{
	display:block;
	width:100%;
	text-align:center;
	margin:0 auto;
	font-size:190%;
	color:#faed3e;
	font-weight:bold;
	margin:10px 0 20px 0;
	}
	
h2 span{
	font-size:80%;
	color:#77f3ff;
	font-weight:300;
	}
	
	
#GIFT{
	display:block;
	float:left;
	width:35%;
	max-width:210px;
	height:210px;
	background-image:url(../images/gift.png);}


	
/*------------表單------------*/	

#FORM {
	float:left;
	width:65%;
	margin:0 auto;
	z-index:99999;
	padding-left:20px;
}
#FORM #NAME{
	width:48%;
	height:auto;
	float:left;
	margin-right:2%;
	}
	
#FORM #PHONE{
	width:48%;
	height:auto;
	float:left;}
	
#FORM #EMAIL{
	width:48%;
	height:auto;
	float:left;
	margin-right:2%;
	}	

#FORM #Dept
 {
     margin:0px 0px 20px 0px;
     width:100%;
     height:45px;
 }
#FORM #CITY
 {
     float:left;
     width:23%;
     height:auto;
 }
#ddl_city_no
 {
     width:100%;
     font-size:16px;
     text-align:center;
     border:0;  
 }
#FORM #SCHOOL
 {
     margin-left:10px;
     float:left;
     width:23%;
     height:45px;
 }
 #ddl_area_no
 {
     width:100%;
     height:45px;
     font-size:16px;
     text-align:center;
     border:0;    
 }        	
	
#READ{
	font-size:100%;
	width:50%;
	display:block;
	padding-top:10px;
	float:left;
	margin-top:2%;
	margin-bottom:10px;}
	
#READ .searchtext2{
	min-width:20px;
	min-height:20px;
    border:solid px gray;
	background-color:#FFF;
	float:left;
	}


#READ span{
	display:block;
	font-size:90%;
	color:#fff9a6;
	line-height:20px;
	text-indent:5px;
	line-height:1.3;}
	

#FORM #BUT {
	float:left;
	width:50%;
	height:auto;
	margin-top:4%;
	}
	
#FORM #BUT p{
	display:block;
	position:relative;
}
	
#FORM #BUT p img{
	display:none;
	position:absolute;
	top:30%;
}		

.A{
	font-family:Arial, Helvetica,"微軟正黑體", sans-serif,Microsoft JhengHei;
	color:#666;
	background-color:#f9f9f9;
	width:100%;
	height:40px;
	line-height:40px;
	margin-top:8px;
	font-size:100%;
	text-align:left;
	padding-left:20px;
	padding-right:0;
	overflow:hidden;
	border:0;
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
	border-radius:10px;
	-moz-box-shadow:inset 0px 2px 3px rgba(200,200,200,0.6),0px 1px 2px rgba(0,0,0,.3);
	-webkit-box-shadow:inset 0px 2px 3px rgba(200,200,200,0.6),0px 1px 2px rgba(0,0,0,.3);
	box-shadow:inset 0px 2px 3px rgba(200,200,200,0.6),0px 1px 2px rgba(0,0,0,.3);}
	
	
.AAA:focus{
	outline: none;}
	
.B{
    font-family:Arial, Helvetica,"微軟正黑體", sans-serif,Microsoft JhengHei;
    font-size:160%;
	letter-spacing:1px;
	color:#252525;
	width:100%;
	height:45px;
	line-height:45px;
	text-align:center;
	font-weight:600;
	overflow:hidden;
	border:0;
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
	border-radius:10px;
	-moz-box-shadow:0px 1px 2px rgba(0,0,0,.3);
	-webkit-box-shadow:0px 1px 2px rgba(0,0,0,.3);
	box-shadow:,0px 1px 2px rgba(0,0,0,.3);
background: #ff9400; /* Old browsers */
background: -moz-linear-gradient(top, #ffb900 0%, #ff9000 50%, #ffa200 51%, #ffdc63 100%); /* FF3.6+ */
background: -webkit-linear-gradient(top, #ffb900 0%,#ff9000 50%,#ffa200 51%,#ffdc63 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffb900 0%,#ff9000 50%,#ffa200 51%,#ffdc63 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ffb900 0%,#ff9000 50%,#ffa200 51%,#ffdc63 100%); /* IE10+ */
background: linear-gradient(to bottom, #ffb900 0%,#ff9000 50%,#ffa200 51%,#ffdc63 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffb900', endColorstr='#ffdc63',GradientType=0 ); /* IE6-9 */	
	}
	

/*------------- CONTENT3 -------------*/	
#CONTENT3{
    width:100%;
	height:1320px;
	background-image:url(../images/yellow-bg.gif);
	background-color:#fbef4d;}
	
h3{
    display:block;
	width:100%;
	height:150px;
	font-size:220%;
	text-align:center;
	color:#faed3f;
	text-shadow:2px 2px #047f93;
	font-weight:700;
	line-height:1;
	background-image:url(../images/bule-bg.gif);
	padding-top:45px;
	}
	
h3 span{
	color:#fff;
	font-size:70%;
	font-weight:400;
	text-shadow:none;
	}
	
#arrow2{
	display:block;
	margin:0 auto;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 30px 50px 0 50px;
	border-color: #0badbd transparent transparent transparent;	
	}	
	
#BOX{
	display:block;
	margin:0 auto;
	width:950px;
	height:970px;
	margin-top:20px;
	padding-bottom:20px;}

	
/*------------- TURN -------------*/	
.flip {
    width: 31%;
    height: 300px;
	float:left;
	margin-left:15px;
	margin-bottom:20px;

}
.flip .card.flipped {
    transform: rotatex(-180deg);
 	-webkit-transform: rotatex(-180deg);
	 
}
.flip .card {
    width: 295px;
    height: 300px;
	-webkit-transform-style: preserve-3d;
	-webkit-transition: 0.5s;
    transform-style: preserve-3d;
    transition: 0.5s;
}
.flip .card .face {
   width: 295px;
   height: 300px;
   position: absolute;
   z-index:2;
   text-align: center;
   padding-top:10px;
   border-radius:15px;
   -webkit-border-radius:15px;
   -moz-border-radius:15px;   
}

.flip .card .front {
  position: absolute;
  z-index: 1;
  cursor: pointer;
  background-color:#FFF;
}

.flip .card .back {
	transform: rotatex(-180deg);
	-webkit-transform: rotatex(-180deg);
    cursor: pointer;
	background-color:#242424;
}
.front_block{
	width:100%;
	height:100%;
	margin:0 auto;
	float:none;
	clear:both;
	padding-top:15px;
	}

.CHK01{
	width:25px;
	height:25px;}
	
.front_block span.h4{
	font-size:130%;
	color:#404040;
	font-weight:700;
	line-height:25px;}	
	
.front_block img{
	 width:250px;
	 height:140px;
	 margin-top:10px;}		

ul.textPoint{
	margin:0 auto;
	width:70%;
	margin-top:5px;
	}
	
ul.textPoint li{
	float:left;
	width:50%;
	font-size:120%;
	line-height:1.5;
	margin-bottom:5px;
	text-align:left;
	text-indent:10px;}
	
ul.textPoint li.t1{
	color:#fff;
	background-color:#14b0bf;
	font-size:110%;
	line-height:30px;
	border-radius:30px;
	-webkit-border-radius:30px;
	-moz-border-radius:30px;
	text-align:center;
	text-indent:0;
	}
	
ul.textPoint li.t2{
	color:#fff;
	background-color:#ff6300;
	font-size:100%;
	line-height:30px;
	border-radius:30px;
	-webkit-border-radius:30px;
	-moz-border-radius:30px;
	text-align:center;
	text-indent:0;
	}
	
h5{
	color:#ffea00;
	font-size:140%;
	font-weight:bold;}
	
.line{
	margin:0 auto;
	width:70%;
	height:1px;
	background-color:#ffea00;
	margin-top:10px;}

ul.item{
	margin:0 auto;
	width:65%;
	margin-top:20px;
	}
	
ul.item li{
	color:#fff;
	font-size:100%;
	line-height:1.5;
	text-align:left;}
	
.CTA{
	display:block;
	width:60%;
	margin:0 auto;
	margin-top:25px;
	}
	
.CTA .B{
	font-size:115%;
	letter-spacing:0;
	line-height:35px;
	height:35px;
	z-index:99999;}

#JOIN{
	display:block;
	width:450px;
	height:45px;
	margin:0 auto;
	margin-top:20px;

	}	

.C{
    font-family:Arial, Helvetica,"微軟正黑體", sans-serif,Microsoft JhengHei;
    font-size:160%;
	letter-spacing:1px;
	color:#fff;
	width:100%;
	height:45px;
	line-height:45px;
	text-align:center;
	font-weight:bold;
	overflow:hidden;
	border:0;
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
	border-radius:10px;
	-moz-box-shadow:0px 1px 2px rgba(0,0,0,.3);
	-webkit-box-shadow:0px 1px 2px rgba(0,0,0,.3);
	box-shadow:,0px 1px 2px rgba(0,0,0,.3);
background: #23c2da; /* Old browsers */
background: -moz-linear-gradient(top, #23c2da 0%, #0092c8 50%, #159bd3 51%, #70faff 100%); /* FF3.6+ */
background: -webkit-linear-gradient(top, #23c2da 0%,#0092c8 50%,#159bd3 51%,#70faff 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #23c2da 0%,#0092c8 50%,#159bd3 51%,#70faff 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #23c2da 0%,#0092c8 50%,#159bd3 51%,#70faff 100%); /* IE10+ */
background: linear-gradient(to bottom, #23c2da 0%,#0092c8 50%,#159bd3 51%,#70faff 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#23c2da', endColorstr='#70faff',GradientType=0 ); /* IE6-9 */	
	}
	

	
		
/* --平板版型1-------------------------------------*/
@media screen and (max-width:1023px) {
	
#header{
	display:none;}
	
#fb{
	display:none;}
	
/*-------------footer-------------------------*/			
#footer {
	display:block;}
	
/*------------- CONTENT1 -------------*/

#CONTENT1{
	height:430px;
	background-position: bottom center;}
	
#CONTENT1 #WRAPPER{
	width:100%;
	max-width:100%;}

#PIC_block{
	width: 40%;
	margin-top:-40px;
	}

#PIC{
	background-image:url(../images/peo.png);
	width:100%;
	padding-bottom:147.1428571428571%;
	background-size:100% auto;
	float:none;
	background-repeat:no-repeat;
	background-position:center center;}
	
#TITLEBOX{
	width: 60%;
	margin-top:80px;
	padding-right:25px;
}

#tag{
	display:none;}

h6{
	display:block;
	margin:auto 0;
	margin-left:20px;
	text-indent:-99999px;
	background-image:none;
	background-color:#ee1722;
	text-indent:0;
	width:90%;
	height:45px;
	font-size:150%;
	letter-spacing:0;
	line-height:40px;
	border-radius:45px;}
	
		
/*------------- CONTENT2 -------------*/	
	
#CONTENT2 #WRAPPER{
	width:80%;
	max-width:100%;}
	
h2{
	font-size:180%;}
	
#GIFT{
	width:40%;}
	
/*------------表單------------*/	
#FORM {
	float:left;
	width:60%;}
	
/*------------- CONTENT3 -------------*/
#CONTENT3{
	height:1900px;}
	
h3{
	font-size:200%;}
	
#BOX{
	width:90%;}
	
/*------------- TURN -------------*/	
.flip {
    width: 47%;
    height: 300px;
}

.flip .card {
    width: 100%;
    height: 100%;
}
.flip .card .face {
   width: 100%;
   height: 100%;
}
}

/* --平板版型2-------------------------------------*/
@media screen and (max-width:767px) {
	
/*------------- CONTENT1 -------------*/

#CONTENT1{
	height:350px;}

#PIC_block{
	width: 40%;
	margin-top:-80px;
	}
#TITLEBOX{
	margin-top:60px;
}

h6{
	font-size:130%;}
	
		
/*------------- CONTENT2 -------------*/	
	
#CONTENT2{
	height:280px;}
	
h2{
	font-size:160%;}
	
#GIFT{
	display:none;}
	
/*------------表單------------*/	
#FORM {
	float:none;
	padding-left:0;
	width:90%;}
	
/*------------- CONTENT3 -------------*/

ul.item{
	width:80%;}
	
#JOIN{
	display:block;
	width:60%;}

}
	
/* --手機版型1-------------------------------------*/
@media screen and (max-width:639px) {
	
/*------------- CONTENT1 -------------*/

#CONTENT1{
	height:480px;}

#PIC_block{
	float:none;
	margin:0 auto;
	width: 100%;
	margin-top:-150px;
	}
	
#PIC{
	background-image:url(../images/peo2.png);
	width:100%;
	padding-bottom:70.15625%;
	background-size:100% auto;
	float:none;
	background-repeat:no-repeat;
	background-position:center center;}	
	
#TITLEBOX{
	float:none;
	width: 85%;
	margin:0 auto;
	padding-right:0;
	margin-top:60px;
}

#TITLE2_block{
	margin-bottom:15px;}

h6{
	margin:auto 0;
	margin-left:0;
	width:100%;
	font-size:130%;}

/*------------- CONTENT2 -------------*/	
#arrow1{
	display:none;}	
	
h2{
	margin:0 auto;
	margin:0 0 20px 0;
	padding-top:20px;}
	
#FORM {
	width:100%;}	

/*------------- CONTENT3 -------------*/

#CONTENT3{
	height:1750px;}
	
h3{
	font-size:170%;
	padding-top:25px;
	height:100px;}
	
#BOX{
	width:100%;}
	
/*------------- TURN -------------*/

.flip {
	width: 45%;
    height: 280px;}	
	
.CHK01{
	width:40px;
	height:40px;}
	
.front_block span.h4{
	font-size:110%;
	line-height:40px;}	

.front_block img{
	 width:200px;
	 height:112px;
	 margin-top:10px;}
	 
ul.textPoint{
	width:90%;
	}
		
ul.textPoint li{
	text-indent:5px;}
	
.line{
	width:90%;}

ul.item{
	margin:0 auto;
	width:90%;
	margin-top:20px;
	}
	
ul.item li{
	font-size:95%;

	
}
}

/* --手機版型3-------------------------------------*/
@media screen and (max-width:479px) {
	
/*------------- CONTENT1 -------------*/

#CONTENT1{
	min-width:320px;
	height:400px;}

#PIC_block{
	margin-top:-150px;
	}

	
#TITLEBOX{
	width: 95%;
	margin-top:50px;
}


h6{
	width:100%;
	font-size:120%;
	height:35px;
	line-height:30px;}
	
/*------------- CONTENT2 -------------*/
	
#CONTENT2{
	min-width:320px;
	height:400px;}
	
#CONTENT2 #WRAPPER{
	width:100%;}
	
h2{
	padding:25px 5% 0 5%;}
	
#FORM {
    width:80%}
	
#FORM #NAME{width:100%;}
	
#FORM #PHONE{width:100%;}
	
#FORM #EMAIL{
	display:none;
	width:100%;}
		
#FORM #CITY{ width:48%;}

#FORM #SCHOOL{ width:48%;}
       		
#READ{width:100%;}
	
#FORM #BUT {width:100%;}

/*------------- CONTENT3 -------------*/

#CONTENT3{
	min-width:320px;
	height:3340px;}
	
#BOX{
	width:90%;}

h3{
	font-size:170%;
	height:130px;
	line-height:1.2;
	padding-left:15px;
	padding-right:15px;}
	
h3 span{
	font-size:70%;
	}
	
#arrow2{
	display:block;
	margin:0 auto;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 20px 30px 0 30px;
	border-color: #0badbd transparent transparent transparent;	
	}

.flip {
	width: 100%;
    height: 320px;
	margin-left:0;}	
	
.front_block span.h4{
	font-size:130%;}	
	
.front_block img{
	 width:250px;
	 height:140px;
	 margin-top:10px;}
	 
	
.line{
	width:90%;}

ul.item{
	width:80%;
	margin-top:20px;
	}
	
ul.item li{
	font-size:100%;}
	
#JOIN{
	display:block;
	width:90%;
	letter-spacing:0;}	
			
}