@charset "big5";
/*

主色 
	
	
*/
* {
	box-sizing:border-box;
}
html, body {
	height: 100%;
}
body {
    margin: 0;
    padding: 0;
	/*font-family: 'Roboto', 'Arial', 'Noto Serif TC', '微軟正黑體', sans-serif;*/
	font-family: 'Roboto','Noto Sans TC', '微軟正黑體',sans-serif;
	font-size: 16px;
	color:#333;
	overflow-x: hidden;
}

img {
    vertical-align: top;
}

h1,h2,h3,h4,h5,p,a {
    text-justify: auto;
    text-decoration: none;
    text-align: justify;
}

.clear-float {
	clear: both;
}
.center {
	text-align: center;
}
.section {
	position: relative;
}
.img-full {
	width:100%;
	height: auto;
}
.hide-pc {
	display: none!important;
}
#ClickTitle {
	height: 74px;
	position: relative;
	z-index: 100;
}
.wrap {
	width: 640px;
	margin:0 auto;
	overflow: hidden;
	background-color: #F8FAFB;
	background-image: url("../images/dotted.png");
}
.fixed-width {
    width: 100%;
    margin: 0 auto;
	position: relative;
	height: 100%;
}
h2.title {
	font-size: 42px;
	margin:0 0 50px 0;
	font-weight: 700;
	text-align: center;
}
/*回表單*/
.goform{
    position: fixed;
	right: 8px;
    bottom: 20px;
    z-index: 100;
    -webkit-animation: gotoTop .5s steps(2) infinite alternate;
    animation: gotoTop .5s steps(2) infinite alternate;
    cursor: pointer;
    transition: all 0.2s;
	z-index: 999;
}
.goform img{
	max-width:100%;
	margin: 0 auto;
}
/*跑馬燈*/
.marquee-top {
    height: 54px;
    overflow: hidden;
    position: relative;
    background: #1d97c1;;
    color: white;
	font-size: 20px;
}
.marquee-top p {
    cursor: default;
    width: 100%;
    width: max-content;
    width: -moz-max-content;
    position: absolute;
    left: 0%;
    margin: 0; 
    line-height: 54px;
}
.marquee-top p{
    animation: marqee-top 15s linear infinite;
}
.marquee-down p {
    animation: marqee-down 15s linear infinite;
}

.marquee-border {
	height: 4px;
	background-image: /*#1d97c1;*/ linear-gradient(to left,#55adf6,#dbf759,#fe8e95);
	animation: AnimeGrade 8s  infinite;
}
@keyframes AnimeGrade {
	/*0% {background:  linear-gradient(to left,#55adf6,#dbf759,#fe8e95);}   
	50%{background:  linear-gradient(to left,#fe8e95,#dbf759,#55adf6);}
	100% {background:  linear-gradient(to left,#55adf6,#dbf759,#fe8e95);} */  
	0% {background-size: 200% 30%;}
 	100% {background-position: 300% 50%;} 
}

@keyframes marqee-top {
  0% {
    left: 0%;
    transform: translateX(0%);
  }
  100% {
    left: 0%;
    transform: translateX(-10%);
  }
}
@keyframes marqee-down {
  0% {
    right: 0%;
    transform: translateX(-10%);
  }
  100% {
    right: 0%;
    transform: translateX(0%);
  }
}

.wrap {
	/*background-image: url("../images/design-bg.png");
	background-repeat: repeat-y;
	background-position: 0 0;*/
}

/*邊框漸層*/
.border-color,.course-section .is-open {
	border: 2px solid #dbf759;
	border-radius: 10px;
	/*border: 2px solid transparent;
	border-image-source: linear-gradient(-45deg,#55adf6,#dbf759,#fe8e95);
	border-image-slice: 1;*/
}

/*header --------------------------*/
.header {
	position: relative;
    width: 100%;
	height: 800px;
	background-color: #fff;
    background:url("../images/header-bg.jpg") no-repeat;
    background-position: top center;
    background-size: contain;
	background-attachment: fixed;
	background-repeat: repeat;
	margin:0 0 0 0;
	overflow: hidden;
}
.header .fixed-width {
	width: 100%;
}
.header img{
	position: absolute;
	z-index: 50;
}
h1.title {
	text-indent: -9999px;
}
.main-title {
	z-index: 200!important;
	left:5px;
	top:40px;
}
.header-txt {
	left: 20px;
	top:320px;
	z-index: 60!important;
}
.main-photo {
	left: 30px;
	top:200px;
}
.photo1 {
	left: 10px;
	bottom: 90px;
}
.photo2 {
	left: 230px;
	bottom: 40px;
}
.photo3 {
	left: 410px;
	bottom: 110px;
}


/*學習有目標*/
.step-section {
	padding: 70px 0 120px 0;
}
.step-section h2.title {
	margin:0 0 50px 0;
}
.step-area {
	position: relative;
}
.step-area .step{
	position: absolute;
	top:50px;
	left: 70px;
}

/*我要考多益/日檢*/
.learn-section {
	margin:0 0 70px 0;
}
.learn-section .fixed-width {
	width: 96%;
}
.learn-section h2.title {
	width: 50%;
	float: left;
}
.learn-section img {
	cursor: pointer;
	transition: 0.2s;
}
.learn-section img:hover {
	transform: scale(1.1);
}

/*課綱*/
.course-section {
	padding:0 4%;
}
.course-section h2.title {
	text-align: left;
}
.course-section .fixed-width {
	width: 100%;
}
.course-section .bg {
	position: absolute;
	z-index: 10;
}
.txt-bg1 {
	top:-10px;
	right: 0;
}
.txt-bg3 {
	top:30px;
	right: 0px;
}
.toeic-area {
	position: relative;
	margin:0 0 60px 0;
}

.toeic-area h2.title {
	z-index: 20;
	position: relative;
}
.toeic-area .course-area {
	width: 588px;
	z-index: 20;
	position: relative;
}
.class-area {
	background-image: url("../images/course-bg.jpg");
}
.class-area .beefup__head {
	font-size: 32px;
	padding:15px 20px;
	text-align: center;
	color:#333!important;
}
.class-area .beefup__body {
	padding:0px 20px 10px 20px;
}
.beefup__body h3 {
	font-size: 22px;
	position: relative;
	margin:0 0 6px 15px;
}
.beefup__body h3 strong {
	position: relative;
	z-index: 20;
	font-weight: 500;
}
.beefup__body h3:before {
	content: " ";
	position: absolute;
	top:2px;
	left: -5px;
	width: 100px;
	height: 31px;
	background: #dbf759;
}
.beefup__body ul {
	margin:0 0 20px 15px;
	position: relative;
	z-index: 20;
}
.beefup__body ul li{
	position: relative;
	line-height: 1.95em;
	padding:0 0 0 20px;
	font-size: 18px;
	/*color:#686868;*/
}
.beefup__body ul li:before{
	content: " ";
	position: absolute;
	top:15px;
	left: 6px;
	width: 3px;
	height: 3px;
	border-radius:50px;
	background: #dbf759;
}
.beefup__body .icon {
	position: relative;
	float: right;
	margin:-155px 5px 0 0;
}
.l2 .icon {margin:-130px 5px 0 0;}
.l4 .icon {margin:-112px 10px 0 0;}
.l5 .icon {margin:-165px 0px 0 0;}

.jlpt-area {
	position: relative;
	margin:0 0 50px 0;
}
.jlpt-area h2.title {
	z-index: 20;
	position: relative;
}
.jlpt-area .course-area {
	width: 588px;
	z-index: 20;
	position: relative;
}
.n5 .icon {margin:-180px 30px 0 0;}
.n4 .icon {margin:-168px 10px 0 0;}
.n3 .icon {margin:-155px 10px 0 0;}
.n2 .icon {margin:-184px 15px 0 0;}
.n1 .icon {margin:-170px 10px 0 0;}


/*教學特色*/
.feature-section {
	/*background-image: url("../images/teacher-bg.png");
	background-repeat: no-repeat;
	background-position: 35% 15%;*/
	position: relative;
	margin:0 0 90px 0;
	text-align: center;
}
.teacher {
	position: absolute;
	top:1%;
	left: -5%;
	z-index: 20;
}
.feature-section .fixed-width {
	width: 94%;
}
.feature-section h2.title {
	text-align: left;
	margin:0 0 40px 0;
	position: relative;
	z-index: 30;
}
.feature-section h3.title {
	margin:0 0 35px 0;
	position: relative;
	z-index: 30;
}
.feature-section .feature-area img{
	margin: 0 0 18px 0 ;
	position: relative;
	z-index: 30;
	width: 100%;
}

/*學員見證*/
.stu-section {
	padding:0 0 100px 0;
	background-image: url("../images/txt-bg5.png");
	background-repeat: no-repeat;
	background-position: left bottom;
}
.stu-section h2.title {
	margin:0 0 40px 0;
}
.stu-section .slick-slider {
	margin:0 auto;
	width: 580px;
}
.stu-section .slick-prev
,.stu-section .slick-next{
	display: none!important;
}
.stu-section .slick-dots {
	bottom:-10%;
}
.stu-section .slick-active {
	color: #1d97c1!important;
}


/*============= 表單 =============*/
#form-section{
    background-image:url(../images/fotter.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    padding: 20px 0;
	width:100%;
    text-align: center;
    overflow: hidden;
	background-color:#1d97c1;
}

.blink {
    animation-duration: .6s;
    animation-name: blink;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: ease-in-out;
}
@keyframes blink {
    0% {
        opacity: 1;
    }
    80% {
        opacity: 1;
    }
    81% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}
.floating{
	animation-duration: .6s;
    animation-name: floating;
    animation-iteration-count: infinite;
    animation-direction: alternate;
	animation-delay:.6s;
    animation-timing-function: ease-in-out;
}
@keyframes floating{
	100%{
		transform:translate(0, -13px);
	}
	0%{
		transform: translate(0,0);
	}

}