@charset "big5";
/*@import url('https://fonts.googleapis.com/css?family=Noto+Serif+TC&subset=chinese-traditional');*/
/* CSS Document */


body{
    font-family: "微軟正黑體";
	font-size: 16px;
    background-color: #fff;
	overflow-x: hidden;
}


#WRAP{
	width: 640px;
	margin: 0 auto;
    font-family: 'Noto Serif TC', serif;
}

/* ============ TOP ============ */
.top-bg {
	background: url(../img/top-bg.png)no-repeat;
	width: 100%;
	height: 800px;
	position: relative;
	overflow-x: hidden;
}

.top-title{
    position: absolute;
    top: 190px;
	left: 133px;
    margin: 0 auto;
}

.top-girl{
	position: absolute;
    bottom: 0px;
	left: 8px;
	margin: 0 auto;
}

.top-spanish-text{
	position: absolute;
    top: 525px;
	left: 175px;
	margin: 0 auto;
}

.top-football{
	position: absolute;
    top: 25px;
	left: 20px;
	margin: 0 auto;
}

.top-guitar{
	position: absolute;
    top: 16px;
	left: 520px;
	margin: 0 auto;
}

.top-food{
	position: absolute;
    top: 405px;
	left: 520px;
	margin: 0 auto;
}

.top-cow{
	position: absolute;
    top: 660px;
	left: 485px;
	margin: 0 auto;
}

.top-wine{
	position: absolute;
    top: 645px;
	left: 150px;
	margin: 0 auto;
}

@keyframes rotate-shake {
	0% {
		transform: rotate(5deg);
	}
	100% {
		transform: rotate(0deg);
	}
}
.rotate-shack {
	animation-name: rotate-shake;
	animation-duration: 1.5s;
	animation-iteration-count: infinite;
	animation-direction: alternate-reverse;
}

.delay05s {
	animation-delay: 0.5s;
}

.delay1s {
	animation-delay: 1s;
}

.delay075s {
	animation-delay: 0.75s;
}

/* ============ form ============ */

.form-bg{
	width: 100%;
	height: 1260px;
	position: relative;
	background-color: #ffc2bd;
	overflow-x: hidden;
}

.form-title{
	position: absolute;
	top: 100px;
	left: 20px;
}

.form-coupon{
	position: absolute;
	top: 300px;
	left: 20px;	
}

.form-limit{
	position: absolute;
	top: 525px;
	left: 15px;	
}
	
	
/* ============ life ============ */

.life-bg{
	width: 100%;
	height: 1934px;
	background: url(../img/life-bg.png) no-repeat;
	text-align: center;
    position: relative;
	overflow-x: hidden;
}

.life-title{
	position: absolute;
	top: 149px;
	left: 185px;
}

.life-left-item{
	position: absolute;
	top: 45px;
	left: 0px;
}

.life-right-item{
	position: absolute;
	top: 706px;
	right: 0px;
}

.pic-box{
	margin: auto;
	width: 540px;
	height: 590px;
	position: absolute;
	top: 364px;
	left: 50px;
}

.pic-box img{
	margin: auto;
}


.slick-dots{
	bottom: -65px;
}


.slick-next:before, .slick-prev:before {
	font-size: 50px;
}

.slick-next, .slick-prev{
	height: 50px;
	width: 50px;
}

.slick-prev{
	left: -45px;
}

.slick-next{
	right: -45px;
}

h3{
	color: #fff;
	font-family: Microsoft JhengHei;
	font-size: 30pt;
	font-weight: 600;
	position: absolute;
	top: 1080px;
	left: 58px;
}

.life-right-58{
	position: absolute;
	top: 1267px;
	left: 86px;
}

.life-58{
	position: absolute;
	top: 1200px;
	left: 28px;	
}

.life-right-21{
	position: absolute;
	top: 1485px;
	left: 86px;
}

.life-21{
	position: absolute;
	top: 1418px;
	left: 28px;	
}

.life-right-no2{
	position: absolute;
	top: 1700px;
	left: 86px;
}

.life-no2{
	position: absolute;
	top: 1634px;
	left: 28px;	
}



/* ============ learn ============ */

.learn-bg{
	width: 100%;
	height: 1400px;
	background-color: #ffc2bd;
	position: relative;	
	overflow-x: hidden;
}

.learn-title{
	position: absolute;
	top: 100px;
	left: 20px;	
}

.learn-test{
	position: absolute;
	top: 322px;
	left: 43px;	
}

.learn-communication{
	position: absolute;
	top: 566px;
	left: 43px;	
}

.learn-friends{
	position: absolute;
	top: 805px;
	left: 43px;	
}

.learn-work{
	position: absolute;
	top: 1060px;
	left: 43px;	
}




/* ============ S1S6 ============ */
/*-------  上半部  -------*/

.S1S6-bg{
	background: url("../img/S1S6-bg.png") no-repeat;
	width: 100%;
	height: 2760px;
	position: relative;
	overflow: hidden;
}

.S1S6-title{
	position: absolute;
	top: 454px;
	left: 85px;
}

.S1S6-study{
	position: absolute;
	top: 631px;
	left: 45px;
}

.S1S6-customization{
	position: absolute;
	top: 631px;
	left: 242px;
}

.S1S6-teacher{
	position: absolute;
	top: 631px;
	left: 429px;
}

.S1S6-smart{
	position: absolute;
	top: 942px;
	left: 132px;
}

.S1S6-verification{
	position: absolute;
	top: 942px;
	left: 342px;
}

/*-------  下半部  -------*/

.S1S6-red{
	position: absolute;
	top: 1380px;
	left: 34px;
}

.S1S6-orange{
	position: absolute;
	top: 1605px;
	left: 34px;
}
	
.S1S6-yellow{
	position: absolute;
	top: 1833px;
	left: 34px;
}

.S1S6-green{
	position: absolute;
	top: 2058px;
	left: 34px;
}

.S1S6-blue{
	position: absolute;
	top: 2292px;
	left: 34px;
}

.S1S6-purple{
	position: absolute;
	top: 2519px;
	left: 34px;
}


/* ============  level ============ */

.level-bg{
	background-color: #ffc2bd; 
	height: 540px;
	position: relative;
	overflow-x: hidden;
}

.level-5text{
	position: absolute;
	top: 80px;
	left: 208px;
}

.level-boy{
	position: absolute;
	top: 80px;
	left: 0px;
}

.level-bottom{
	position: absolute;
	top: 352px;
	left: 45px;
}