@charset "UTF-8";
/* CSS Document */
@import url("reset.css");
@import url("motion.css");
@import url(https://fonts.googleapis.com/earlyaccess/notosanstc.css);

* {
	font-family: 'Noto Sans TC';
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
}
body {
	min-width:1200px;
	background-color:#3F3B3D;
	background-image:url(../img/header.jpg);
	background-position:center top;
	background-attachment:fixed;
}
a {
	color: #666;
	text-decoration: none;
}
a:hover {
	text-decoration: none;
	color: #CCC;
}
::-moz-selection { color: #000; background-color: #ECAECD; }
::selection { color: #000; background-color: #ECAECD; }

.wrapper {
	overflow:hidden;
	background-image:url(../img/dot.png);
	background-attachment:fixed;
}

/**/
a.goto-form {
	width:340px;
	height:340px;
	position:fixed;
	bottom:20px;
	right:20px;
	display:block;
	text-indent:-9999px;
	background-image:url(../img/btn.png);
	background-position: bottom;
}
a.goto-form:hover {
	background-position: top;
}
.header {
	height:1100px;
}
.color-bar {
	background-image:url(../img/color-bar.png);
	background-position:center -1100px;;
	background-repeat:no-repeat;
	-webkit-animation-name:colorbar;
	-webkit-animation-duration:0.5s;
	-webkit-animation-iteration-count:1;
	-webkit-animation-timing-function: ease-out;
	-webkit-animation-delay: 2.8s;
	-webkit-animation-fill-mode: forwards;
	animation-name:colorbar;
	animation-duration:0.5s;
	animation-iteration-count:1;
	animation-timing-function: ease-out;
	animation-delay: 2.8s;
	animation-fill-mode: forwards;
}
.hader-box {
	height:1100px;
	background-image:url(../img/dot90.png);
	background-attachment:fixed;
}
h1.title {
	background-image:url(../img/title.png);
	background-position:bottom center;
	display:block;
	height:1100px;
	text-indent:-9999px;
	-webkit-animation-name:logo;
	-webkit-animation-duration:1.5s;
	-webkit-animation-timing-function:steps(1);
	-webkit-animation-iteration-count:2;
	animation-name:logo;
	animation-duration:1.5s;
	animation-timing-function:steps(1);
	animation-iteration-count:2;
}
.middle {
	width:1200px;
	height:auto;
	overflow:hidden;
	margin:0 auto;
}
.section-pink {
	background-color:#F6C1D8;
}
.section-yellow {
	background-color:#FFF100;
}
.section-1 {
	height:640px;
	background-image:url(../img/sec1.png);
	position:relative;
}
.section-2 {
	height:2110px;
	background-image:url(../img/sec2.jpg);
	position:relative;
}
.section-3 {
	height:180px;
	background-image:url(../img/sec3.png);
	position:relative;
}
a.goto-form2 {
	width:421px;
	height:130px;
	position: absolute;
	top:25px;
	right:25px;
	display:block;
	text-indent:-9999px;
	background-image:url(../img/btn2.png);
	background-position:top;
	-webkit-animation-name:btn;
	-webkit-animation-duration:0.5s;
	-webkit-animation-timing-function:steps(1);
	-webkit-animation-iteration-count:infinite;
	-webkit-animation-play-state: running;
	animation-name:btn;
	animation-duration:0.5s;
	animation-timing-function:steps(1);
	animation-iteration-count:infinite;
	animation-play-state: running;
}
a.goto-form2:hover {
	-webkit-animation-play-state: paused; /* Chrome, Safari, Opera */
    animation-play-state: paused;
}
.section-4 {
	height:690px;
	background-image:url(../img/sec4.jpg);
	position:relative;
}
.section-5 {
	padding-top:20px;
	padding-bottom:0px;
	padding-left:135px;
	padding-right:135px;
	font-size:18px;
	line-height:1.8;
	text-align:justify;
	font-weight:500;
}
.section-5 p {
	margin-bottom:20px;
}
.section-6 {
	height:770px;
	background-image:url(../img/sec6.jpg);
	position:relative;
}
.section-7 {
	padding-top:80px;
	padding-bottom:80px;
	padding-left:135px;
	padding-right:135px;
	font-size:18px;
	line-height:1.8;
	text-align:justify;
	font-weight:500;
}
.section-7 p {
	margin-top:20px;
}
h2.sec7-1 {
	display:block;
	height:75px;
	background-image:url(../img/sec7-1.png);
	text-indent:-9999px;
}
h3.sec7-2 {
	display:block;
	height:134px;
	background-image:url(../img/sec7-2.png);
	text-indent:-9999px;
	margin-top:20px;
}
.v-box {
	background-image:url(../img/sec7-3.jpg);
	height:540px;
	position:relative;
	margin-top:20px;
}
.v-box a {
	display:block;
	width:465px;
	height:270px;
	text-indent:-9999px;
	float:left;
}
.v-box a:hover {
	background-image:url(../img/dot90.png);
	background-color:rgba(0,0,0,0.3);
}
.section-8 {
	height:1920px;
	background-image:url(../img/sec8.jpg);
	position:relative;
}
.section-9 {
	height:104px;
	background-image:url(../img/sec9.jpg);
	position:relative;
	background-position:center;
	background-repeat:no-repeat;
}

/**/
.jiao {
	width:740px;
	height:440px;
	position:absolute;
	left:36px;
	top:23px;
}
.student {
	width:290px;
	height:170px;
	position:absolute;
	left:858px;
	top:421px;
}
.student:hover{
	opacity:0.6;
}
.quick-video {
	height:170px;
	width:100%;
	position:absolute;
	top:1486px;
}
.quick-video a {
	position:absolute;
	width:290px;
	height:170px;
	display:block;
	text-indent:-9999px;
}
.quick-video a:hover {
	opacity:0.6;
}
a.qv-1 {
	left:150px;
	background-image:url(../img/v1.jpg);
}
a.qv-2 {
	left:465px;
	background-image:url(../img/v2.jpg);
}
a.qv-3 {
	left:780px;
	background-image:url(../img/v3.jpg);
}
.section-6 a {
	display:block;
	width:290px;
	height:170px;
	text-indent:-9999px;
	position:absolute;
}
.section-6 a:hover {
	opacity:0.6;
}
a.sc-1 {
	background-image:url(../img/sc-1.jpg);
	top:173px;
	left:141px;
}
a.sc-2 {
	background-image:url(../img/sc-2.jpg);
	top:173px;
	left:458px;
}
a.sc-3 {
	background-image:url(../img/sc-3.jpg);
	top:173px;
	left:775px;
}
a.sc-4 {
	background-image:url(../img/sc-4.jpg);
	top:457px;
	left:141px;
}
a.sc-5 {
	background-image:url(../img/sc-5.jpg);
	top:457px;
	left:458px;
}
a.sc-6 {
	background-image:url(../img/sc-6.jpg);
	top:457px;
	left:775px;
}

/**/
.gakusei {
	position:absolute;
	width:100%;
	height:250px;
	top:990px;
	overflow:hidden;
}
.gk-box{
	width:800px;
	height:250px;
	overflow:hidden;
	margin:0 auto;
	position:relative;
}
ul#hot {
	display:block;
	width:800px;
	height:250px;
	margin:0 auto;
	overflow:hidden;
	position:relative;
}
ul#hot li {
	display:block;
	width:140px;
	height:250px;
	margin-left:10px;
	margin-right:10px;
	float:left;
	overflow:hidden;
	color:#FFF;
	font-weight:300;
	font-size:15px;
}
ul#hot li p {
	margin-top:5px;
	line-height:1.6;
}
a#prev {
	display:block;
	position:absolute;
	width:30px;
	height:250px;
	left:160px;
	background-image:url(../img/prev.png);
	background-position:center left;
	background-repeat:no-repeat;
	cursor:pointer;
	text-indent:-9999px;
}
a#prev:hover { opacity:0.6;}
a#next {
	display:block;
	position:absolute;
	width:30px;
	height:250px;
	left:1010px;
	background-image:url(../img/next.png);
	background-position:center right;
	background-repeat:no-repeat;
	cursor:pointer;
	text-indent:-9999px;
}
a#next:hover { opacity:0.6;}