/* ---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;
}
 #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;
}
/* ---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,"微軟正黑體", "Microsoft JhengHsans", sans-serif;
}

h1, h2, h3, h4, h5, h6 {
	font-family: Arial, Helvetica,"source-han-sans-traditional","微軟正黑體", "Microsoft JhengHsans",
	 sans-serif;
}

body{
	font-size:17px;
}

a{
	text-decoration: underline;
}

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

/*GOTOP*/
#GOTOP{
	position:absolute;
	right:10px;
	bottom:10px;
	width:50px;
	height:50px;
	background-image:url(../images/gotop.png);
	cursor:pointer;
	z-index:9999;
	position: fixed;
	opacity: 0.8;
    filter: alpha(opacity=80);
	}
	
#GOTOP:hover{
	opacity: 1;
    filter: alpha(opacity=1);
	}


/*------------- TOP -------------*/	
#TOP{
    width:100%;
	height:646px;
	min-height: 458px;
	background-color:#fcf3e2;
	background-image:url(../images/top_img_1920.jpg);
	background-position: center center;
}
	

#TOP .WRAPPER{
	margin:0 auto;
	width:100%;
	max-width:1200px;
	overflow: hidden;
}

.h1Img{
    margin-top: 19px;
    margin-bottom: 15px;
}

.h1Img img{
	max-width: 510px;
	width: 80vw;
	min-width: 280px;
}

.h2Img{
}

.h2Img img{
	max-width: 460px;
	width: 60vw;
	min-width: 280px;
}

.SP{
	width: 100%;
    height: auto;
    background-color: #1fa4dd;
    padding: 75px 0;
	text-align: center;
}
.SP h2{color: #fff;font-size: 2.5rem;margin: 0 0 30px;}

.SP .box1{
	height: 130px;
	padding: 1% 0;
	padding-left: 3%;
	background-color: #f75700;
	overflow: hidden;
}

.SP .box1_2, .SP .box1_4{
	background-color: #ff7200;
}

.SP .box1 img{
	display: inline-block;
	vertical-align: sub;
	max-width: 65px;
	width: 40%;
}

.SP .box1 p{
	display: inline-block;
	color: #fff;
	font-size: 20px;
	line-height: 1.3;
	margin-top: 7%;
}

.SP .box1 p span{
	color: #fffc00;
	font-weight: bold;
	font-size: 26px;
}
.sp_list{text-align: center;margin:10px 0;}
.sp_list figure{width: 150px;height: 150px;background: rgb(105, 105, 105);margin: 0 auto 17px;border-radius: 50%;position: relative;border: solid 3px #fff;overflow: hidden;}
.sp_list figure img{position: absolute;left: 0;right: 0;top: 0;bottom: 0;margin: auto;}
.sp_list p{line-height:28px;color:white;}
.sp_list p small{display: block;font-size:0.95rem;}
.sp_list h3{font-family:"Microsoft JhengHei";
    font-weight: bold;color:white;margin-bottom: 6px;}

.pulse{ 
	animation: pulse 2s infinite;
	animation-delay: 3s;
	}

@-webkit-keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}



/*------------- FORM_BLOCK -------------*/

#FORM_BLOCK{
	width:100%;
	height:auto;
	position:relative;
	overflow:hidden;
	background-color:#f9f9f9;
	background-image: url(../images/bg01.png);
	padding: 27px 0;
	}
	
#FORM_BLOCK .WRAPPER{
	margin:0 auto;
	position:relative;
	width:90%;
	max-width:820px;
	padding-top:50px;
}
	
.sub-text {
    font-weight: 600;
    font-size: 1.3rem;
    background-color: #ffe486;
    color: #26160d;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    padding: 15px 20px 10px;
    border-radius: 50px;
    margin: 0 auto 15px;
    text-align: center;
}

h3{
	margin:0 auto;
	color:#333;
	text-align:center;
	font-size:28px;
	line-height: 1.3;
	font-weight:300;
	margin-bottom: 15px;
	/*animation: pulse 2s infinite;*/
}

h3 span{
	color: #e42928;
	font-weight:700;
}

.GIFT{
	display:block;
	float:left;
	width:40%;
	margin:0 auto;
}

	
/*------------表單內容------------*/	

#FORM {
	float:left;
	width:60%;
	margin:0 auto;
	z-index:99999;
	margin-bottom: 50px;
	padding-left: 30px;
}
	
#FORM #NAME{
	width:49%;
	height:auto;
	float:left;
	margin-right:2%;
	}
	
#FORM #PHONE{
	width:49%;
	height:auto;
	float:left;
}
	
#FORM #EMAIL{
	width:100%;
	height:auto;
	float:left;
}	

#FORM #Dept{
     margin:0px 0px 20px 0px;
     width:100%;
     height:40px;
	 
 }
#FORM #CITY{
     float:left;
     width:49%;
     height:auto;
     margin-right:2%;
 }

#ddl_city_no{
     width:100%;
     font-size:16px;
     text-align:center; 
 }

#FORM #SCHOOL{
     float:left;
     width:49%;
 }

 #ddl_area_no{
     width:100%;
     font-size:16px;
     text-align:center;   
 }        	
	
#READ{
	clear: both;
	font-size:15px;
	width:100%;
	display:block;
	margin-bottom:10px;}
	
#READ .searchtext2{
	min-width:20px;
	min-height:20px;
    border:solid 1px gray;
	vertical-align: text-bottom;
	}

#READ span{
	color:#333;
	line-height:20px;
	text-indent:5px;
	line-height:1.3;
	}
	

#FORM #BUT {
	float:left;
	width:100%;
	height:auto;}

.A{
	font-family:Arial, Helvetica,"微軟正黑體", sans-serif,Microsoft JhengHei;
	color:#666;
	background-color: #fff;
	border: 1px #737373 solid;
	width:100%;
	height:35px;
	line-height:35px;
	margin-top:8px;
	font-size:18px;
	text-align:left;
	padding-left:10px;
	overflow:hidden;
	}
	
.B{
	clear:both;
	width:100%;
	height:50px;
	display:block;
	margin:0 auto;
    *zoom: 1;
    font-size: 28px;
	line-height: 45px;
    text-align: center;
    color: #fff;
	text-decoration:none;
    background-color: #f75700;
    border-bottom: 10px solid #e44000;
    cursor: pointer;
	border-radius:3px;
}

.B:hover{
	color: #fff000;
}

.C{
	width:100%;
	height:40px;
    font-size: 17px;
	line-height: 40px;
	letter-spacing: 1px;
    border-bottom: none;
    border-radius: 0;
}

	
/*------------- CONTENT_ALL -------------*/

#CONTENT1, #CONTENT2, #CONTENT3 {
    width:100%;
	height:auto;
	position:relative;
	overflow:hidden;
	background-image:url(../images/bg02.png);
	background-color:#fab400;
}

#CONTENT2{
	background-image:url(../images/bg01.png);
	background-color:#f9f9f9;
}

	
#CONTENT1 .container, #CONTENT2 .container, #CONTENT3 .container{
	padding-top:95px;
	padding-bottom:95px;}





/*------------- CONTENT1 -------------*/

h1{
	text-align: center;
	font-size: 23px;
	line-height: 1.3;
	color: #333;
	margin-bottom: 15px;
}

h2{
	text-align: center;
	font-size: 30px;
	color: #e42928;
	font-weight: 600;
}

.sub{
	margin: 0 auto;
	max-width: 315px;
	margin-bottom: 50px;
}

.sub ul li{
	float: left;
	width: 50%;
	color: #333;
	font-size: 20px;

}

.COURSE_A{
	height: auto;
	background-color: #fff;
	border-radius: 5px;
	box-shadow: 0 5px 10px rgba(0,0,0,0.15);
	padding: 30px 15px;
	margin-bottom: 30px;
	text-align: center;
}

.COURSE_A:hover, #CONTENT2 .container .row:hover{
	transform:scale(1.05);
	-webkit-box-shadow:2px 5px 4px rgba(0,0,0,0.3);
	box-shadow:2px 5px 4px rgba(0,0,0,0.3);
}

.COURSE_A h5{
	text-align: center;
	color: #1a1a1a;
	font-size: 22px;
	font-weight: 700;
	margin-bottom: 10px;
}

.COURSE_A:hover h5{
	color: #ff4e00;
}

.COURSE_A img{
	max-width: 80px;
	margin-bottom: 10px;
}

.COURSE_A ul{
	margin-left:8%;
	margin-bottom: 7.5%;
	display: inline-block;
}	

.COURSE_A ul li::before{
	content: "\f00c";
	font-family: fontAwesome;
	float: left;
	margin-left: -25px;
}



.COURSE_A ul li{
	line-height: 1.3;
	font-size: 17px;
	color: #303030;
	margin-bottom: 5px;
	text-align: left;
}


.COURSE_A, .COURSE_A img{
	-webkit-transition:all .2s ease-out;
	-moz-transition:all .2s ease-out;
	-ms-transition:all .2s ease-out;
	-o-transition:all .2s ease-out;
	transition:all .2s ease-out;
}

.area_title{text-align: center;
    font-family: "Microsoft YaHei";
    font-weight: bolder;
    font-size: 3rem;
    margin:0px 0 56px;
    color: #26160d;}




p.ps{
	text-align: center;
	font-size: 15px;
	color: #fff;
}

p.ps2{
	position: absolute;
	bottom: 2%;
	left: 2%;
	text-align: left;
	line-height: 2;
}

p.ps3{
	color: #333;
}






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

#CONTENT2 .container .row{
	background-color: #fff;
	margin-top: 30px;
	box-shadow: 0 5px 10px rgba(0,0,0,0.2);

}

.h4{
	margin-bottom: 20px;
}

.h4 img{
	max-width: 297px;
	width: 50vw;
	min-width: 200px;
}

.h4a img{
	max-width: 337px;
	width: 65vw;
	min-width: 250px;
}

.item{
	height: 260px;
	background-color: #f75700;
	border-right: 3px #fff dashed;
	padding: 2% 2% 5% 2%;
	position: relative;
}

h5{
	color: #333;
	font-size: 25px;
	line-height: 1.5;
	font-weight: 700;
}

h5 span{
	letter-spacing: -1px;
	font-family: Century Gothic, sans-serif;
}

h6{
	max-width: 200px;
	width: 70%;
	color: #fff;
	font-size: 16px;
	line-height: 1.5;
	text-indent: 15px;
	font-weight: 300;
	letter-spacing: 2px;
	background-color: #333;
	margin-bottom: 5px;
	clear: both;
}

.item ul{
	margin-bottom: 25px;
}

.item ul li{
	width: 100%;
	color: #fff;
	font-size: 26px;
	font-weight: 300;
	line-height: 1.5;
	text-shadow: 2px 2px 0 rgba(0,0,0,0.15);
}

.item ul li span{
	color: #fffc00;
	font-weight: 700;
}

.item ul li span.tt1{
	display:inline-block;
	text-indent: 1.3em;
}

.item ul li span.tt2{
	font-weight: 300;
	color: #fff;
	font-size: 16px;
}

.item-detail{
	position: relative;
	padding: 2%;
}

.item-img img{
	margin-bottom: 50px;
}

.item-detail ul{
	margin-left: 20px;
}

.item-detail ul li{
	list-style-type: square;
	line-height: 1.5;
	float: left;
	margin-right: 10%;
	/*width: 50%;*/
}

.item-detail ul li:nth-last-child(1){
	margin-bottom: 15px;
}

	
.CTA{ 
	position: absolute;
	bottom: 0;
	right: 0;
	width:100%;
	cursor: pointer;
}

.CTA2{ 
	width:100%;
	cursor: pointer;
}




/*------------- CONTENT3 -------------*/
p.text{
	font-size: 20px;
	color: #333;
	text-align: center;
	line-height: 1.5;
}

.table{
	margin: 0 auto;
	max-width: 780px;
	width: 100%;
	min-width: 295px;
	margin-top: 30px;
	background-color: #fff;
	margin-bottom: 15px;
}

th, td{
	text-align: center;
	font-size: 20px;
}

td{
	font-size: 18px;
	height: 40px;
}

td:nth-of-type(1){
	text-align: left;
	text-indent: 10%;
}

td i{
	color: #999;
	text-indent: 0;
}

thead tr{
	height: 45px;
	color: #fff;
	background-color: #f75700;
}

.table>tbody>tr:hover{
	background-color: #ffddcb;
}

.table>tbody>tr:hover i{
	color: #333;
}
.activity_title{    text-align: center;
    font-size: 2.2rem;
    font-weight: bold;
    margin: 0px 0 28px;}

.activity_book ul li{
    line-height: 31px;
    text-align: justify;
	list-style-type:none;
}

.activity_book h5{font-size: 1rem;font-weight: 400;margin: 10px 0 4px;}
.activity_book h5+ul{    margin: 0 0 0 30px;}
.activity_book h5+ul li{list-style-type: decimal;}
		
/* --電腦版型2-------------------------------------*/
@media screen and (max-width:1199px) {
.SP .box1 p{ margin-top: 10%;}
}


/* --平板版型1-------------------------------------*/
@media screen and (max-width:1024px) {
#FORM_BLOCK{ padding-bottom: 50px;}
.GIFT{ float:none; width:100%;}
#FORM { float:none; width:100%; padding-left: 0; margin-top: 20px;}
}


@media screen and (max-width:991px) {
.item{ border-bottom: 3px #fff dashed; border-right: none; padding: 5%;}
.item{ height: auto;}
.SP .box1{ padding: 3% 0; padding-left: 2%;}
.SP .box1 p{font-size: 17px;}
.SP .box1 p span{font-size: 20px;}
.SP .box1 img{ max-width: 60px;}
.item-img img{ max-width: 200px;}
}


/* --平板版型2-------------------------------------*/
@media screen and (max-width:768px) {
#TOP{ background-image:url(../images/top_img_768.jpg); padding-bottom: 143.2291666666667%; height: 0; background-size:100% auto;}
.h1Img{ margin-top: 20%; margin-bottom: 7px;}
h2{font-size: 32px;}
.SP h2 {
    font-size:2rem;


}


}

@media screen and (max-width:767px) {
.SP .box1{ padding-left: 10%; height: auto;}
.SP .box1_2, .SP .box1_3{ background-color: #ff7200; }
.SP .box1_4{ background-color: #f75700; }
.SP .box1 p{ margin-top: 0%; font-size:18px;}
.SP .box1 p span{font-size: 24px;}
.area_title {
    font-size: 2rem;
    line-height: 43px;
    margin: 0px 0 27px;
}
}
	
/* --手機版型1-------------------------------------*/
@media screen and (max-width:639px) {
#GOTOP{ display: none; }
.h1Img{ margin-top: 15%; margin-bottom: 0;}
h2{font-size: 28px;}
.SP .box1{ padding-left: 5%;}
.item ul li{ font-size: 22px;}
h3 span{ display: block; }
.table tr th i, .table tr td i{ display: none; }

}

/* --手機版型2-------------------------------------*/
@media screen and (max-width:479px) {
#TOP, .SP, #FORM_BLOCK, #CONTENT1, #CONTENT2{ min-width:320px;}
#FORM .GIFT, #FORM #NAME, #FORM #PHONE, #FORM #EMAIL{ width:100%; margin-right:0;}
p.text{ font-size: 18px; }
p.date{ font-size: 17px; }
h1 span{ display: block; }
.SP .box1{height: 100px;}
h3{ font-size: 24px;}
.sub ul li{ font-size: 18px; }
.SP .box1 p{font-size: 17px;}
.SP .box1 p span{font-size: 20px;}
h4{ font-size: 25px;}
td{ line-height: 40px; }
thead tr{ height: auto;}
.table tr th, .table tr td{ font-size: 15px; }
}

@media screen and (max-width:410px) {
.SP .box1{ height: 120px;}
.SP .box1 img{ max-width: 45px; display: block; margin: 0 auto; }
.SP .box1 p{ display: block; text-align: center; }
}

/* --手機版型3-------------------------------------*/
@media screen and (max-width:359px) {
.h1Img{ margin-bottom: -7px;}
p.text{ font-size: 17px; }
.table tr th, .table tr td{ font-size: 14px; }
}

/* --電腦版型w320以下-------------------------------------*/
@media screen and (max-width:319px) {

}