@font-face{
	font-family: FontAwesome;
	src: url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/FontAwesome.otf);

}

@charset "UTF-8";
	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%;
	vertical-align:baseline;
	font:inherit
}
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
}
* {
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	-ms-box-sizing:border-box;
	-o-box-sizing:border-box
}

#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;
	}

html {
	-webkit-text-size-adjust:100%;
	overflow-x:hidden;
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale
}

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, ul.tag>li{
	font-family: Arial, Helvetica,"source-han-sans-traditional","微軟正黑體", "Microsoft JhengHsans",
	 sans-serif;
}

body{
	font-size:17px;
}

p{
	font-size: 17px;
	color: #484f59;
	line-height: 1.5;
	text-align: justify;
}

::selection {
	background-color:#462f80;
	color:#fff;
	text-shadow:none
}
::-moz-selection {
	background-color:#462f80;
	color:#fff;
	text-shadow:none
}

.ANT {
	-webkit-transition:all .4s;
	-moz-transition:all .4s;
	-ms-transition:all .4s;
	-o-transition:all .4s;
	transition:all .4s
}
.clear {
	clear:both
}

#GOTOP {
	display:none;
	width:80px;
	height:80px;
	cursor:pointer;
	position:fixed;
	right:10px;
	bottom:10px;
	background-color:#462f80;
	-webkit-border-radius:50%;
	-moz-border-radius:50%;
	-ms-border-radius:50%;
	-o-border-radius:50%;
	border-radius:50%;
	z-index:555;
	-webkit-box-shadow:0 3px 0 rgba(0,0,0,.25);
	box-shadow:0 3px 0 rgba(0,0,0,.25);
	-webkit-transition:all .4s;
	-moz-transition:all .4s;
	-ms-transition:all .4s;
	-o-transition:all .4s;
	transition:all .4s
}
#GOTOP:hover {
	background-color:#556aea;
}

#GOTOP p{
	font-size: 17px;
	margin-top: 15%;
	line-height: 1.2;
	font-family:Arial,'Meiryo',"微軟正黑體","Microsoft JhengHei",sans-serif;
	text-align:center;
	color:#fff;
}

#GOTOP:hover i {
	/*color: #2d43c4;*/
}

#GOTOP i {
	display:block;
	font-size:22px;
	line-height:1.3;
	text-align:center;
	margin-top:-3px
}

/* ----------電腦版型--------------------------- */
.TOP{
    width:100%;
	height:auto;
	background-image:url(../images/top_img_1920.jpg);
	background-position: center top;
	background-repeat: no-repeat;
	background-color: #462f80;
	height: 567px;
	overflow: hidden;
	position: relative;
}

.TOP .wrapper{
	margin:0 auto;
	width:100%;
	max-width:1200px;
	height: 100%;
	position:relative;
}

.pulse{ 
	-ms-animation: pulse 2s 1s infinite;
	-moz-animation: pulse 2s 1s infinite;
	-webkit-animation: pulse 2s 1s infinite;
	animation: pulse 2s 1s infinite;
	animation-delay: 2s;
	}

.textBox{
	max-width: 580px;
	width: 100vw;
	min-width: 320px;
	margin: 0 auto;
	margin-top: 100px;
	margin-left: 42%;
}

.date{
	margin-left: 3%;
	margin-bottom: 2%;
}

.date i, .date p{
	line-height: 50px;
	padding: 0 3%;
	font-size: 27px;
}

.date i{
	display: inline-block;
	color: #000;
	background-color: #ffcc00;
	-webkit-box-shadow:4px 5px 0px rgba(0,0,0,0.2);
	box-shadow:4px 5px 0px rgba(0,0,0,0.2);
}

.date p{
	display: inline-block;
	color: #ffcc00;
	background-color: #000;
	padding-right: 30px;
	-webkit-box-shadow:4px 4px 0px rgba(0,0,0,0.2);
	box-shadow:4px 4px 0px rgba(0,0,0,0.2);	
	-webkit-animation: discolorA 1s infinite;
    -moz-animation: discolorA 1s infinite;
    -ms-animation: discolorA 1s infinite;
    -o-animation: discolorA 1s infinite;
    animation: discolorA 1s infinite;
}

@-webkit-keyframes discolorA {
    0%,
    50% {
        color: #ffcc00;
    }
    51%,
    100% {
        color: #fff;
    }
}

@-moz-keyframes discolorA {
    0%,
    50% {
        color: #ffcc00;
    }
    51%,
    100% {
        color: #fff;
    }
}

@-o-keyframes discolorA {
    0%,
    50% {
        color: #ffcc00;
    }
    51%,
    100% {
        color: #fff;
    }
}

.titleImg{
	display: block;
	margin-bottom: 3%;
}

.titleImg img{
	max-width: 580px;
	min-width: 280px;
	width: 60vw;
}

h1{
	max-width: 450px;
	min-width: 280px;
	width: 60vw;
	color: #fff;
	font-size: 30px;
	line-height: 1.6;
	border-bottom:#fff 1px solid;
}

h1::before{
	content: "";
	width: 6px;
	height: 32px;
	background-color: #fff;
	display:inline-block;
	position:relative;
	left: 5px;
	top: 5px;
	margin-right: 15px;
}


.info{
	width:100%;
	height:auto;
	background-color: #f8f8f8;
	padding-top: 50px;
	padding-bottom: 50px;
}

h2{
	font-size: 32px;
	color: #462f80;
	font-weight: 600;
	line-height: 1.3;
	text-align: center;
	margin-bottom: 30px;
	padding-left: 15px;
	padding-right: 15px;
}

.rule-box{
	margin: 0 auto;
	max-width: 768px;
	width: 95%;
	height: auto;
	margin-bottom: 50px;
}

.W1{
	display:block;
	width:100%;
	height:40px;
	margin-bottom:15px;
	margin: 0 auto;
	}

.W1 ul li{
	width:85%;
	float:right;
	line-height: 1.6;
	color: #333;
	margin-top:5px;
	padding-left:10px;
	font-size:18px;
	/*text-shadow: 1px 2px 0 rgba(0,0,0,0.2);*/
}

.W1 ul li.sub{
	width:15%;
	float:left;
	padding-left:0;
	background-color:#462f80;
	color:#fff;
	text-align:center;
	padding-top: 3px;
	padding-bottom: 3px;
}

.W1 ul li ul{
	margin-left: -110px;
}

.W1 ul li ul li{
	list-style-type: decimal; 
}


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

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

#FORM_BLOCK{
	width:100%;
	height:auto;
	position:relative;
	overflow:hidden;
	background-color:#fff;
	background-image: url(../images/bg03.png);
	}
	
#FORM_BLOCK .WRAPPER{
	margin:0 auto;
	position:relative;
	width:100%;
	max-width:850px;
	padding-top:50px;
}
	
h3{
	display:block;
	margin:0 auto;
	width:80%;
	max-width: 330px;
	height:auto;
	color:#FFF;
	text-align:center;
	font-size:25px;
	font-weight:500;
	letter-spacing:1px;
	background-color:#462f80;
	border-radius:45px;
	-webkit-border-radius:45px;
	-moz-border-radius:45px;
	-o-border-radius:45px;
	padding:8px;}
	
#arrow{
	display:block;
	margin:0 auto;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 8px 15px 0 15px;
	border-color: #462f80 transparent transparent transparent;
}	
	
.h3{ 
	color:#462f80;
	font-size:28px;
	font-weight: 500;
	text-align:center;
	margin-bottom:15px;
	margin-top: 10px;
}

/*@keyframes discolor{
	0%, 50% {
	    color: #d63214;
	}
	51%, 100% {
	    color: #d63214;
	}
}*/

.GIFT{
	display:block;
	float:left;
	width:50%;
	margin:0 auto;
	margin-top: 20px;
}
	
.GIFT img{
	display:block;
	margin:0 auto;
	width: 100%;
	max-width: 380px;
	height: auto;
	margin-bottom: 10px;}


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

#FORM {
	float:left;
	width:50%;
	margin:0 auto;
	z-index:99999;
	margin-bottom: 60px;
}
	
#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: rgba(255,255,255,0.2);
	background-color: #fff;
	border: none;
	width:100%;
	height:35px;
	line-height:35px;
	margin-top:8px;
	font-size:18px;
	border: 1px solid #462f80;
	text-align:left;
	padding-left:10px;
	overflow:hidden;
	}

/*select option {
	background-color: #3888d8;
}*/
	
.B{
	clear:both;
	width:100%;
	height:50px;
	display:block;
	margin:0 auto;
    *zoom: 1;
    font-size: 26px;
	line-height: 45px;
    text-align: center;
    color: #313131;
	text-decoration:none;
    background-color: #ffe400;
    /*text-shadow: 0px 2px 0px #ffcc00;*/
    border-bottom: 10px solid #ffcc00;
    cursor: pointer;
	border-radius:3px;
}

.B:hover{
	color: #462f80;
}

	
	
/*------------- CONTENT1 -------------*/	
.CONTENT1, .CONTENT2, .CONTENT3{
    width:100%;
	height:auto;
	position:relative;
	overflow:hidden;
	background-color: #e0e0e0;
	padding-top:5%;
	padding-bottom:7%;
}
.CONTENT1, .CONTENT3{ background-color: #ffe732; }

.CONTENT1{padding-top:2%; padding-bottom:5%;}

.CONTENT2{ background-color: #f8f8f8; padding-bottom:5%;}

.h2{
	font-size: 32px;
	color: #462f80;
	font-weight: 600;
	line-height: 1.3;
	text-indent: 10px;
	margin-bottom: 15px;
}

.h2::before{
	content: "";
	width: 8px;
	height: 32px;
	background-color: #462f80;
	display:inline-block;
	position:relative;
	left:-10px;
	top: 5px;
}

.BOX2{
	float:left;
	display:block;
	width:100%;
	height:auto;
	min-height:290px;
	background-color:#fff;
	overflow: visible;
	text-align: center;
	margin-top: 100px;
	margin-bottom: 20px;
}

.BOX:hover, .BOX2:hover, .BOX3:hover{
	-webkit-box-shadow:2px 5px 4px rgba(0,0,0,0.2);
	box-shadow:2px 5px 4px rgba(0,0,0,0.2);
}

.BOX2 p.text-info{
	color: #462f80;
	text-align: center;
	text-decoration: line-through;
	font-size: 21px; 
	margin-bottom: -5px;
}

.h4{ 
	font-size:30px;
	font-weight: 600;
	color:#462f80;
	margin-top: 5px;
	margin-bottom: 15px;
}

.skill_block{
	width: 135px;
	height: 135px;
	margin: 0 auto;
	margin-top: -70px;
	z-index: 9999;
	margin-bottom: 25px;
}

.skill{
	width: 100%;	
	height: 0;	
	padding-bottom: 100%;
	position: relative;	
	border-radius: 50%;
	background-color: #462f80;
	overflow: hidden;	
}

.skill img{
	z-index: 9999;
	display: block;
	width: 80px;
	height: 80px;
	text-align: center;
	margin-top: 20%;
}

.BOX p, .BOX2 p{
	text-align: center;
	margin-top: 5px;
	padding: 0 8%;
}

.skill img, .process img {-webkit-transition:all .5s ease-out;-moz-transition:all .5s ease-out;-ms-transition:all .5s ease-out;-o-transition:all .5s ease-out;transition:all .5s ease-out}
.BOX2:hover img, .process:hover img{ display:block; transform: rotateY(360deg);}	


/*------------- CONTENT2 -------------*/
.CONTENT2 .row+.row, .CONTENT3 .row+.row{
	padding-top: 60px;
}

p.big{
	font-size: 23px;
	line-height: 1.3;
	color: #484f59;
	font-weight: 600;
	margin-bottom: 5px;
}

ul.teacherList{
	margin-bottom: 20px;
	margin-left: 20px;
}

ul.teacherList li{
	list-style-type: square;
	line-height: 1.5;
	margin-bottom: 8px;
	color: #484f59;
}

p{
	line-height: 1.8;
	margin-bottom: 15px;
}


h4{
    color: #462f80;
    font-size: 32px;
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 20px;
    margin-top: -5px;
    text-indent: 10px;
}


h4::before{
	content: "";
	width: 8px;
	height: 32px;
	background-color: #462f80;
	display:inline-block;
	position:relative;
	left:-10px;
	top: 5px;
}

.text-block{
	padding: 0 2%;
}

.BOX3{
	width:100%;
	height:450px;
	overflow: visible;
	margin-bottom: 45px;
}

.skill01, .skill02{
	background-color: #462f80;
	border:1px solid #462f80;
}

.BOX3:hover{
	-webkit-box-shadow:2px 5px 4px rgba(0,0,0,0.2);
	box-shadow:2px 5px 4px rgba(0,0,0,0.2);
}

h6{
	margin: 2% 0 1.5% 40px;
	font-size: 23px;
	color: #fff;
	font-weight: 500;
	line-height: 1.4;
}

h6 span{
	font-size: 19px;
	font-weight: 200;
}

.BOX3 p{
	width: 85%;
	display: block;
	margin: 0 auto;
	color: #fff;
	line-height: 1.4;
	font-size: 21px; 
	margin-top: 15px;
	margin-bottom: 15px;
	font-weight: 500;
}

.BOX3 ul{ 
	width: 85%;
	height: auto;
	display: block;
	margin: 0 auto;
	margin-left: 60px;
	margin-bottom: 30px;
}

.BOX3 ul li { 
	list-style-type: square;
	color: #fff;
	line-height: 1.5;
}

.BOX3 img{
	-webkit-transition:all .5s ease-out;
	-moz-transition:all .5s ease-out;
	-ms-transition:all .5s ease-out;
	-o-transition:all .5s ease-out;
	transition:all .5s ease-out
}

.BOX3:hover img, .BOX:hover img {
	transform:scale(1.07);
}

.IMG_BLOCK {
	overflow:hidden;
	position:relative;
	height:auto;
	max-height:280px;
	margin-bottom: 3%;
}


/*------------- CONTENT3 -------------*/
.list ul{
	margin-left: 20px;
	padding-right: 20px;
}

.list ul li{
	line-height: 1.6;
	list-style-type: square;
	margin-bottom: 10px;
}

p.big2::before{
	content: "\f14a";
	font-family: "FontAwesome";
	margin-right: 1%;
}







/* --平板版型-------------------------------------*/
@media screen and (max-width:1200px) {
.BOX3{ height:420px;}
.textBox{ margin-left: 38%; }
}



	
/* --平板版型1-------------------------------------*/
@media screen and (max-width:1023px) {
.TOP{
	display:block;
	position:relative;
	background:url(../images/top_img_1024.jpg) no-repeat;
	width:100%;
	height:0;
	padding-bottom: 63.4765625%;
	background-size:100% auto;
}
.date{ margin-left: 0;}
.W1{ height:auto; margin-bottom:25px;}
.W1 ul li, .W1 ul li.sub{width:100%; float:none; text-align: center;}
.W1-end ul li ul li{ text-align: left; }
.W1 ul li ul{ margin-left: 20px;}
.W1 ul li.sub{ margin-bottom: 10px; }
#FORM_BLOCK{ padding-bottom: 50px;}
.GIFT{ float:none; width:90%;}
#FORM { float:none; width:80%;}
h4{ font-size: 28px;}
h4::before{ height: 28px; }
p.big2{ font-size: 21px; }
.BOX3{ min-height: auto; padding-bottom: 20px;}
.BOX3 ul{ width: 100%; margin-left: 40px;}
.teacher_img { margin-bottom: 25px; }
.teacher_img img{width: 65%; max-width: 250px; height: auto; }
h6{ font-size: 21px; margin: 2% 0 1.5% 30px;}
.BOX3{ height:360px;}
}

/* --平板版型2-------------------------------------*/
@media screen and (max-width:767px) {
.TOP{
	display:block;
	position:relative;
	background:url(../images/top_img_768.jpg) no-repeat;
	width:100%;
	height:0;
	padding-bottom: 130.2083333333333%;
	background-size:100% auto;
	min-height: 400px;
}
.textBox{ margin-top: 120px; margin-left: 10%; margin-right: 10%; }
.titleImg img, h1{ width: 80vw; }
h4{ margin-top: 30px;}
.BOX3{ height:auto;}
}	

/* --手機版型1-------------------------------------*/
@media screen and (max-width:639px) {
.textBox{ margin-top: 70px;}
.date i, .date p{ line-height: 40px; font-size: 21px;}	
h1{ font-size: 25px; }
h1::before{height: 25px; }
h2, .h2{ font-size: 28px;}
.h3{ font-size: 25px; }
.BOX p, .BOX2 p{ padding: 0 5%;}
h6{ margin: 3% 20px 1.5% 20px;}
}

/* --手機版型2-------------------------------------*/
@media screen and (max-width:479px) {
.TOP, #FORM_BLOCK, .CONTENT1, .CONTENT2, .CONTENT3, .info{ min-width:320px;}
.textBox{ margin-left: 5%; margin-right: 5%;}
.titleImg{ margin-bottom: 2%;}
.titleImg img, h1{ width: 90vw; }
h1{ font-size: 19px;}
h2, .h2, h4{ font-size: 23px;}
h2, .W1 ul li{ text-align: left; }
h4::before{ height: 25px; }
.h2::before{ height: 25px; }
h3{ font-size: 19px; }
.h3{ font-size: 21px; }
#FORM { width:90%;}
#FORM #GIFTS, #FORM #NAME, #FORM #PHONE, #FORM #EMAIL{ width:100%; margin-right:0;}
p, .list ul li, .BOX3 ul li { font-size: 16px; }
p.big{ font-size: 20px; }
p.big2{ font-size: 19px; }
.h4{ font-size: 23px; }
.CONTENT1, .CONTENT3{padding-top:3%; padding-bottom:15%;}
.CONTENT2 .row+.row, .CONTENT3 .row+.row{padding-top: 30px; }
}

/* --手機版型3-------------------------------------*/
@media screen and (max-width:374px) {
.textBox{ margin-top: 40px; }

}

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


}