/* ---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:Arial, Helvetica,"微軟正黑體", sans-serif,Microsoft JhengHei;
}

body{
	font-size:17px;
}



/* --電腦版型------------------------------------- */

#header{
	width:100%;
	height:64px;
	display:block;}
	
#fb{
	width:100%;
	height:auto;
	margin:0 auto;
	margin-bottom:0;
	clear:both;
	display:block;}
	
/*------------- CONTENT1 -------------*/	
#CONTENT1{
    width:100%;
	position:relative;
	background-image:url(images/bg.jpg);
	background-repeat:no-repeat;
	background-position:center center;
	background-color:#b2e4fd;
	overflow:hidden;}
	
#CONTENT1 #WRAPPER{
    position: relative;
	margin:0 auto;
	width:1024px;
	max-width:1024px;}

#PIC_block{
	width:900px;
	margin:0 auto;
	}	
	
#PIC{
	background-image:url(images/top.png);
	width:100%;
	padding-bottom:58.77777777777778%;
	background-size:100% auto;
	float:none;
	background-repeat:no-repeat;
	background-position:center center;}	
	
#TEXT_block{
	position:absolute;
	top:390px;
	right:10px;
	display:block;
	width:420px;
}

h3{
	font-size: 120%;
	color:#333;
	margin-bottom:10px;}

#TEXT_block ul{
	display:block;
	}
	
#TEXT_block ul li.space{
	width:5%;
	font-size: 180%;
	color:#333;
	text-align: center;
	line-height:50px;
	margin-right:10px;}
	
#TEXT_block ul li{
	float:left;
	width:38%;
	color:#fff;
	font-size: 150%;
	line-height: 1;
	text-align: center;
	padding:2%;
	border-radius:10px;
	}
	


/*------------- CONTENT2-form -------------*/
#CONTENT2{
	width:100%;
	background-color:#2772ee;
	padding-top:20px;
}
#CONTENT2 #WRAPPER{
	width:900px;
	height:280px;
	margin:0 auto;
}

h2{
	display:block;
	background-color:#2e2e2e;
	width:100%;
	height:45px;
	margin:0 auto;
	border-radius:20px;
	font-size:170%;
	line-height:45px;
	text-align:center;
	color:#ffd300;
	font-weight:bold;
	letter-spacing:2px;
	margin-bottom:10px;
	margin-top:10px;
	}

#CONTENT2 #CARD{
	display:block;
	width:45%;
	max-width:400px;
	float:left;}

#CONTENT2 #CARD #PIC{
	background-image:url(images/free.png);
	width:100%;
	padding-bottom:52.5%;
	background-size:100% auto;
	float:none;
	background-repeat:no-repeat;
	background-position:center center;}
	

#CONTENT2 #FROM{
	width:52%;
	max-width:600px;
	height:auto;
	float:right;
}

#FROM #SELECT{
	width:98%;
	height:auto;
}

#FROM #NAME{
	width:48%;
	height:auto;
	float:left;
	margin-right:10px;}
	
#FROM #PHONE{
	width:48%;
	height:auto;
	float:left;}
	
#FROM #EMAIL{
	width:48%;
	height:auto;
	float:left;
	margin-right:10px;}	

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


#READ span{
	display:block;
	color:#FFF;
	height:15px;
	line-height:20px;
	text-indent:5px;}
		


#FROM #BUT {
	width:48%;
	height:auto;
	float:left;
	}
	
#FROM #BUT p{
	display:block;
	position:relative;
	}
	
#FROM #BUT p img{
	position:absolute;
	top:30%;
}	

.AAA{
	color:#666;
	background-color:#f9f9f9;
	width:100%;
	height:34px;
	line-height:34px;
	margin-top:12px;
	font-size:16px;
	text-align:left;
	padding-left:20px;
	padding-right:20px;
	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;}
	
.BBB{
    font-size:30px;
	font-weight:bold;
	color:#252525;
	width:100%;
	height:50px;
	line-height:50px;
	text-align:center;
	letter-spacing:3px;
	margin-top:12px;
	padding-left:20px;
	padding-right:20px;
	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%;
	min-width:1024px;
	height:293px;
	margin:0 auto;
	background-image:url(images/yellow_bg.gif);
	padding:25px 25px 25px 25px;}

h4{
	display:block;
	width:500px;
	margin:0 auto;
	font-size:200%;
	font-weight:bold;
	line-height:44px;
	text-align:center;
	color:#212121;
	border-bottom:1px solid #212121;}
	
#CONTENT3 #WRAPPER{
    width:700px;
	margin:0 auto;}

#IMG1, #IMG2, #IMG3{
	position:relative;
	display: block;
	float: left;
	width: 170px;
	height: 170px;
	margin-top: 15px;
	margin-left: 4.5%;
	margin-right: 4.5%;
}

#IMG1 #FRONT{
	background-image:url(images/img1.png);
	}
#IMG2 #FRONT{
	background-image:url(images/img2.png);
	}
#IMG3 #FRONT{
	background-image:url(images/img3.png);
	}
	
#IMG1 #BACK{
	background-image:url(images/img1ov.png);
	}
#IMG2 #BACK{
	background-image:url(images/img2ov.png);
	}
#IMG3 #BACK{
	background-image:url(images/img3ov.png);
	}

#FRONT{
	position:absolute;
	left:0px;
	top:0px;
	width:170px;
	height:170px;
	text-align: center;
	font-size: 140%;
	line-height: 1.2;
	padding-top: 60px;
	color: #FFF;
	font-weight: bold;
	overflow:hidden;
}
	
#BACK{
	position:absolute;
	left:0px;
	top:0px;
	width:170px;
	height:170px;
}
	
/* ==CSS3動畫============================ */
	
		
#FRONT{
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
}

#BACK{
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	transform:rotate3d(-1,0,0, 180deg);	
	-webkit-transform:rotate3d(-1,0,0, 180deg);
	-moz-transform:rotate3d(-1,0,0, 180deg);
}

#IMG1, #IMG2, #IMG3{
	transform-style: preserve-3d;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-origin: 50% 50% 50%;
	-webkit-transform-origin: 50% 50% 50%;
	-moz-transform-origin: 50% 50% 50%;
}

#IMG1:hover, #IMG2:hover, #IMG3:hover{
	animation: GOGO 0.5s 1 linear;
	-webkit-animation: GOGO 0.5s 1 linear;
	-moz-animation: GOGO 0.5s 1 linear;
	animation-fill-mode: forwards;
	-webkit-animation-fill-mode: forwards;
	-moz-animation-fill-mode: forwards;
	
}

@keyframes GOGO
{
	0% {
		transform: perspective(300px) rotate3d(1,0,0, 0deg);}
		
	100% {
		transform: perspective(300px) rotate3d(-1,0,0, 180deg);}
	
}

@-webkit-keyframes GOGO
{
	0% {
		-webkit-transform: perspective(1000px) rotate3d(1,0,0, 0deg);}
		
	100% {
		-webkit-transform: perspective(1000px) rotate3d(-1,0,0, 180deg);}
	
}
@-moz-keyframes GOGO
{
	0% {
		-webkit-transform: perspective(1000px) rotate3d(1,0,0, 0deg);}
		
	100% {
		-webkit-transform: perspective(1000px) rotate3d(-1,0,0, 180deg);}
	
}
	
/*------------- CONTENT4 -------------*/
#CONTENT4{
	width:100%;
	min-width:1024px;
	height:398px;
	margin:0 auto;
	background-image:url(images/green_bg.gif);
	padding:25px 25px 25px 25px;}
	
p{
	text-align:center;
	font-size:110%;
	color:#212121;
	line-height:2;
	}

#CONTENT4 #BOX{
    width:840px;
	margin:0 auto;
	padding-top:10px;}
	
#CONTENT4 #BOX .BOX1{
	float:left;
	display: block;
	width:32.5%;
	padding:10px;
	margin-right:15px;}	
	
#CONTENT4 #BOX #nopadding{
	margin-right:-15px;}
	
#CONTENT4 #BOX .BOX1 img{
	display:block;
	margin:0 auto;
	width:250px;
	height:165px;
	margin-bottom:10px;}
	
#CONTENT4 #BOX .BOX1 h6{
	display:block;
	font-size:160%;
	color:#2772ee;
	font-weight:bold;
	text-align:center;
	margin:0 auto;}
	
#CONTENT4 #BOX .BOX1 p{
	width:90%;
	margin:0 auto;
	color:#000;
	font-size:110%;
	line-height:1.5;
	text-align:center;	
	}


/*------------- CONTENT5 -------------*/
#CONTENT5{
	width:100%;
	min-width:1024px;
	height:519px;
	margin:0 auto;
	background-image:url(images/gray_bg.gif);
	padding:35px 25px 25px 25px;}
	
h5{
	display:block;
	width:500px;
	margin:0 auto;
	font-size:200%;
	font-weight:bold;
	line-height:44px;
	text-align:center;
	color:#cc0000;
	margin-bottom:25px;
	}
	
#CONTENT5 #BOX{
	width:900px;
	margin:0 auto;}
	
	
#CONTENT5 #BOX .BOX2{
	float:left;
	display: block;
	width:32.5%;
	padding:10px;
	margin-right:15px;
	background-color:#FFF;
	border-radius:10px;
	padding:25px;
	box-shadow: 3px 3px 5px #B2B2B2;
	-moz-box-shadow: 3px 3px 5px #B2B2B2;
	-webkit-box-shadow: 3px 3px 5px #B2B2B2;
	}	
	
#CONTENT5 #BOX #nopadding{
	margin-right:-15px;}
	
#CONTENT5 #BOX .BOX2 h4{
	display:block;
	margin:0 auto;
	width:130px;
	height:130px;
	border-radius:100px;
	font-size:130%;
	text-align:center;
	color:#fcff00;
	font-weight:bold;
	line-height:1.1;
	padding-top:30px;
	margin-bottom:10px;}
	
#CONTENT5 #BOX .BOX2 h6{
	display:block;
	font-size:140%;
	text-align:center;
	font-weight:bold;
	margin-bottom:5px;}
	
#CONTENT5 #BOX .BOX2 p{
	display:block;
	width:90%;
	margin:0 auto;
	font-size:95%;
	line-height:1.3;
	text-align:left;
	margin-bottom:10px;}
	
#CONTENT5 #BOX .BOX2 ul{
	width:90%;
	margin:0 auto;}	
	
#CONTENT5 #BOX .BOX2 ul li{
	color:#282828;
	float:left;
	width:50%;
	font-size:105%;
	line-height:1.5;
	font-weight:bold;
	}
	
/*--footer-------------------------*/			
#footer {
	display:none;
	width:100%;
	min-width:320px;
	height:80px;
	background-color:#481c87;
	bottom:0;
}

#footer ul {
	display: block;
	width:220px;
	margin:0 auto;
	padding-top:20px;
}
#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;
}
		
/* --平板版型1-------------------------------------*/
@media screen and (max-width:1024px) {
	
#header{
	display:none;}
	
#fb{
	display:none;}
	
#CONTENT1 #WRAPPER{
	width:100%;
	max-width:100%;}
	
#PIC_block{
	width:90%;
	margin:0 auto;
	}
	
#TEXT_block{
	top:75%;
	right:-7%;
	width:50%;
}

/*------------- CONTENT2-form -------------*/
#CONTENT2{
	width:100%;
	background-color:#2772ee;
	padding-top:20px;
}
#CONTENT2 #WRAPPER{
	width:100%;
	height:280px;
	margin:0 auto;
	padding-left:5%;
	padding-right:5%;
}

.BBB{
	letter-spacing:0;}
	
#FROM #BUT p img{
	display:none;
}

/*------------- CONTENT3 -------------*/
#CONTENT3{
	width:100%;
	min-width:100%;
	height:293px;
	margin:0 auto;
	background-image:url(images/yellow_bg.gif);
	padding:25px 25px 25px 25px;}
	
/*------------- CONTENT4 -------------*/
#CONTENT4{
	width:100%;
	min-width:100%;}
	
#CONTENT4 #BOX{
    width:100%;
	padding-top:20px;}	
	
#CONTENT4 #BOX .BOX1 img{
	width:200px;
	height:128px;
}

		
/*--footer-------------------------*/			
#footer {
	display:block;
}		


/*------------- CONTENT5 -------------*/
#CONTENT5{
	width:100%;
	min-width:100%;
	height:519px;
}
	
#CONTENT5 #BOX{
	width:100%;}
	
#CONTENT5 #BOX .BOX2 h6{
	font-size:125%;
	}

#CONTENT5 #BOX .BOX2 p{
	font-size:90%;}
		
#CONTENT5 #BOX .BOX2 ul li{
	color:#282828;
	width:50%;
	font-size:95%;
}
}

/* --平板版型2-------------------------------------*/
@media screen and (max-width:767px) {
	
h3{
	font-size: 100%;
	color:#333;
	margin-bottom:5px;}

#TEXT_block ul{
	display:block;
	}
	
#TEXT_block ul li.space{
	width:5%;
	font-size: 140%;
	line-height:35px;
}
	
#TEXT_block ul li{
	font-size: 120%;
	}
	
/*------------- CONTENT2-form -------------*/

#CONTENT2 #CARD{
	display:none;	
	}
	
#CONTENT2 #FROM{
	width:100%;
	max-width:600px;
	height:auto;
	float:right;
}

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

#CONTENT3{
	height:650px;}
	
h4{
	margin-bottom:10px;}

#CONTENT3 #WRAPPER{
    width:90%;
	margin:0 auto;}
	
#IMG1, #IMG2, #IMG3{
	float: none;
	margin:0 auto;
	margin-bottom:10px;
}

/*------------- CONTENT4 -------------*/
#CONTENT4{
	width:100%;
	height:900px;
	min-width:100%;}
	
#CONTENT4 #BOX{
    width:100%;
	padding-top:20px;}
	
#CONTENT4 #BOX .BOX1{
	float:none;
	width:100%;
	margin-right:0;
	margin:0 auto;}	
	
#CONTENT4 #BOX .BOX1 img{
	width:250px;
	height:165px;
}

#CONTENT4 #BOX #nopadding{
	margin-right:0;}

/*------------- CONTENT5 -------------*/

#CONTENT5{
	width:100%;
	min-width:100%;
	height:950px;
}

#CONTENT5 #BOX .BOX2{
	float:none;
	display: block;
	width:100%;
	padding:10px;
	margin-right:0;
	background-color:#FFF;
	border-radius:10px;
	padding:15px;
	padding-bottom:30px;
	margin-bottom:20px;
	}
	
	
#CONTENT5 #BOX .BOX2 ul li{
	float:left;
	width:25%;}	
	
#CONTENT5 #BOX #nopadding{
	margin-right:0;}
	

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

/*------------- CONTENT1 -------------*/
	
h3{
	font-size: 80%;}

#TEXT_block{
	top:70%;
	right:-5%;
	width:50%;
}	
#TEXT_block ul li.space{
	font-size: 130%;
}
	
#TEXT_block ul li{
	font-size: 100%;
	}	
/*------------- CONTENT4 -------------*/
#CONTENT4{
	height:930px;}	
	
p{
	font-size:110%;
	text-align:left;
	line-height:1.5;
	}
	
h4 img{
	display:none;}
	
h4{
	width:90%;
	font-size:180%;}
	
/*------------- CONTENT5 -------------*/

h5{
	width:100%;
	font-size:180%;
	margin-bottom:15px;
	}
}

/* --手機版型1-------------------------------------*/
@media screen and (max-width:479px) {
	
	
/*------------- CONTENT1 -------------*/
#CONTENT1{
	widows:100%;
	min-width:320px;}
	
	
#PIC{
	background-image:url(images/top2.png);
	width:100%;
	padding-bottom:68.88888888888889%;
	background-size:100% auto;
	float:none;
	background-repeat:no-repeat;
	background-position:center center;}	
	

#TEXT_block{
	top:65%;
	right:0;
	width:100%;
}

h3{
	display:block;
	width:70%;
	padding:5px;
	font-size: 80%;
	border-radius:10px;
	color:#333;
	background-color:rgba(100%,100%,100%,0.7);}
	
#TEXT_block ul{
	display:block;
	margin:0 auto;
	}
	
#TEXT_block ul li.space{
	width:5%;
	font-size: 150%;
	color:#333;
	text-align: center;
	line-height:30px;
	margin-right:10px;
	text-shadow:1px 1px 0 #FFF;}
	
#TEXT_block ul li{
	float:left;
	width:45.5%;
	color:#fff;
	font-size: 95%;
	line-height: 1;
	text-align: center;
	padding:2%;
	border-radius:10px;
	}


/*------------- CONTENT2-form -------------*/

#CONTENT2{
	widows:100%;
	min-width:320px;}

#CONTENT2 #WRAPPER{
	height:420px;
}

h2{
	height:auto;
	font-size:130%;
	line-height:1.2;
	letter-spacing:0;
	padding:10px;
	margin-top:0;
	margin-bottom:5px;
	}


#FROM #SELECT{
	width:98%;}

#FROM #NAME{
	width:98%;}
	
#FROM #PHONE{
	width:98%;}
	
#FROM #EMAIL{
	width:98%;;}	

#FROM #CITY{
     width:47%;}

#FROM #SCHOOL{
     width:47%;}
       		
#READ{
	width:98%;}
	

#FROM #BUT {
	width:98%;}
	
#FROM #BUT p{
	display:block;
	position:relative;
	}
	
#FROM #BUT p img{
	display:block;
	right:20px;}
	
.BBB{
	letter-spacing:3px;}
	
/*------------- CONTENT3 -------------*/	
#CONTENT3{
	widows:100%;
	min-width:320px;
	height:700px;}
	
		
/*------------- CONTENT4 -------------*/	
#CONTENT4{
	widows:100%;
	min-width:320px;
	height:980px;}
	
/*------------- CONTENT5 -------------*/

#CONTENT5{
	widows:100%;
	min-width:320px;
	height:1150px;
}

#CONTENT5 #BOX .BOX2{
	padding-bottom:55px;}

#CONTENT5 #BOX .BOX2 ul li{
	float:left;
	width:50%;}	

	}