@charset "UTF-8";
* {
  position: relative; }

html, body {
	max-width: 100%;
	margin: 0;
	padding: 0;
	overflow-x: hidden;
	font-family: "Noto Sans TC", sans-serif;
	font-size:16px;

}

.run {
	position: absolute;
	background-color: #5074bc;
	width: 100%;
	height: 60px;
	top: 0px;
	align-items: center;
	overflow: hidden;
}
.runword {
	top: 17px;
	width: max-content;
	animation: run 15s linear infinite;
}
.runword img {
	margin: auto 7px;
}
@keyframes run {
	0% {
		left: 0;
		transform: translateX(0%);
	}
	100% {
		left: 0;
		transform: translateX(-20%);
	}
		
}

@keyframes flow-title {
	0% {
		transform: translate(0,0);
	}
	50% {
		transform: translate(0,10%);
	}
	100% {
		transform: translate(0,0);
	}
}
.header {
	background-color:#fde0db;	
	background-image:url("../img/top-bg_01.jpg");
	background-repeat: no-repeat;
	background-position: center top;
	width: 100%;
	height:696px;
	position: relative;
	background-size: cover;	
}
 .header img.top-bg, .header img.top-bg-m {
    width: 100%;
}

.header .title {
	position: absolute;
	left:20%;
    top: 12%; 
}

.context{
	width:60%;
	margin: auto;
	position: relative;
	height:696px;
}


.header img.man01 {
	position: absolute;	
    bottom: 0;
    left: 25%;
}
.sp1, .sp2, .sp3, .sp4, .sp5{
	position: absolute;
	animation: fade 2s, baloon_1 3s infinite;	
}
@keyframes fade {  
    0% {opacity: 0;} 
    40% {opacity: 0;}
    100% {opacity: 1;}
} 
@-webkit-keyframes baloon_1{
0% { transform:translateY(20px);}
50% {transform:translateY(40px);}
100% {transform:translateY(20px);}
}
.sp1{
	bottom:45%;
	left:5%;
}
.sp2{
	bottom:28%;
	left:5%;
}
.sp3{
	bottom:10%;
	left:5%;
}
.sp4{
	bottom:35%;
	right:8%;
		
}
.sp5{
	bottom:15%;
	right:3%;
	
}


@media screen and (max-width: 1440px) {	
	.context{
		width:80%;
	}
}
@media screen and (max-width: 1200px) {
	.context{
		width:100%;
	}
}	
@media screen and (max-width: 912px) {
	.man01 {
		width:55%;
	}
	.sp1, .sp2, .sp3, .sp4, .sp5{
		width:20%;
	}
	.sp4{
		right:5%;
	}
  .header .title {
    left: 15%; 
	}	
}
@media screen and (max-width: 820px) {
	.header {	
		background-image:url("../img/bg-m.jpg");
		max-height:100%;
		height:800px;
		background-size: cover;	
	}	
	.context{
		height:800px;
	}
	.man01 {
		width:70%;
	}	
	.header img.man01 {
		left: 15%;
	}
	 .header .title {
		top:15%;
		left: 10%;
	   }	
	.sp1{
		bottom:35%;
	}
	.sp2{
		bottom:23%;
	}
	.sp4{
		right:1%;
	}
}
@media screen and (max-width: 767px) {
	.header, .context{
		height:600px;
	}
	 .header .title img {
		width:90%;
	   }
	.sp5{
		bottom:20%;
	}
}
@media screen and (max-width: 540px) {
	.header, .context{
		height:550px;
	}
}
@media screen and (max-width: 420px) {
	.header, .context{
		height:450px;
	}
	.header .title {
		top:20%;
	}
	.sp1{
		bottom:40%;
	}
	.sp2{
		bottom:30%;
	}
	.sp3{
		bottom:15%;
	}
}
@media screen and (max-width: 390px) {
	.header, .context{
		height:400px;
	}
	
}
/*--------------------------前言------------------------- */
.intro-container {
	width: 100%; 
}
.intro-container .intro-bg {
    width: 100%;
    background-color: #5074bc;
    margin: 0;
    padding: 30px 0; 
}

 .intro-container .intro-bg .intro {
	left: 50%;
	width:80%;
	transform: translateX(-50%);
	display: flex;
	justify-content: center;
}
.intro-container .intro-bg .intro .group {
	color: #fff;
	display: inline-block;
	margin: 0;
	padding: 0;
	text-align: center;
	width:33%;
}
.intro-container .intro-bg .intro .group p {
	line-height: 1.5em;
	letter-spacing: 2px;
	font-weight: 300;
	font-size: 1.2em; 
}
.intro-container .intro-bg .intro .group1,.intro-container .intro-bg .intro .group2 {
  	border-right:1px #fff solid;
}

@media screen and (max-width: 767px) {
	.intro-container .intro-bg {
		padding: 15px 0; 
	}	
    .intro-container .intro-bg .intro {
      width: 100%;
      flex-direction: column;
	}
     .intro-container .intro-bg .intro .group {
       	width: 100%;
		padding: 10px 0;
	}	
	.intro-container .intro-bg .intro .group1,.intro-container .intro-bg .intro .group2 {
		border-right:0px #fff solid;
	}	
}

/*--------------------------wanted------------------------- */

.wanted{
	background-image:url("../img/korean_03.jpg");
	background-repeat: no-repeat;
	background-position: center top;
	width: 100%;
	height:709px;
	position: relative;
	background-size: cover;		
	display: flex;
	flex-direction: row;
}
.want-text{
	padding-left:20%;
	padding-top:5%;
}
.want-text-m{
	display: none;
}
.good-group{
	margin-left:8%;
	padding-top:140px;
}
.goo1, .goo2, .goo3, .goo-boy{
	position: absolute;
}
.goo1{
	z-index: 5;
	left: -50px;
	top: 20px;
}
.goo2{
	z-index: 5;
	bottom:30px;
}
.goo3{
	z-index: 5;
	left: 420px;
	bottom: 80px;
}
.goo-boy{
	z-index: 4;
}
.goo-boy-m{
	display: none;
}
@media screen and (max-width: 1440px) {	
	.want-text{
		padding-left:15%;
	}
}
@media screen and (max-width: 1200px) {	
	.want-text{
		padding-left:5%;
	}
}	
@media screen and (max-width: 912px) {
	.goo3{
		left: 320px;
	}
}
@media screen and (max-width: 820px) {
	.want-text img{
		width:80%;
	}
	.good-group{
		margin-left:0;
	}
	.goo2{
		left:-100px;
	}
	.goo3{
		left:220px;
	}
}	
@media screen and (max-width: 767px) {
	.wanted{
		flex-direction: column;
		height:auto;
	}
	.wanted-pic{
		display: none;
	}
	.want-text{
		padding-left:0;
		padding-top:20px;
	}
	.want-text img{
		margin:auto;
	}	
	.want-text-m{
		display: block;
	}
	.good-group{
		padding-top:20px;
	}
	.goo-boy-m{
		display: block;
		width:95%;
		margin:auto;
	}
	.goo1, .goo2, .goo3, .goo-boy{
		display: none;
	}
}	
@media screen and (max-width: 390px) {
	.want-text{
		padding-top:52px;
	}
}
@media screen and (max-width: 375px) {
	.good-group{
		padding-top:40px;
	}
}	
/*流程	*/
	
	
.flow{
	padding:3% 1% 0 1%;
}
.flow-txt{
	margin: 0 auto;
	width:35%;
	height: 112px;
	text-align: center;
	background-image: url("../img/korea-cut.png");
	background-position: left top;
	background-repeat: no-repeat;
}
.flow h4{
	font-size: 2em;
	font-weight: 900;
	padding-top:20px;
	line-height: 1.5em;	
}
.flow h5{
	font-size:1.2em;
	line-height: 1.5em;
}
.flow-step{
	display: flex;
	flex-direction: row;
	justify-content: center;
	margin: 3% 0 4% 0;
}
.speech-bubble {
	position: relative;
	border-radius: .4em;
	color:#fff;
	width:160px;
	text-align: center;
	padding: 10px 0px;
	font-size: 1.2em;
	line-height: 1.2em;
	margin: 0 1%;
}
.speech-bubble span{
	font-weight: 700;
}
.sb1:after, .sb2:after, .sb3:after, .sb4:after, .sb5:after {
	content: '';
	position: absolute;
	width: 0;
	height: 0;	
	border: 10px solid transparent;
	right: 0;
	top: 50%;
	border-right: 0;
	margin-top: -10px;
	margin-right: -10px;
}
.sb1{
	background-color:#f5bcb8;
}
.sb1:after{
	border-left-color: #f5bcb8;		
}
.sb2{
	background-color:#f9a2ba;
}
.sb2:after{
	border-left-color: #f9a2ba;	
}
.sb3{
	background-color:#fc80a2;
}
.sb3:after{
	border-left-color: #fc80a2;	
}
.sb4{
	background-color:#668ddb;
}
.sb4:after{
	border-left-color: #668ddb;	
}
.sb5{
	background-color:#5074bc;
}
@media screen and (max-width: 1440px) {
	.flow-txt{
		width:45%;
	}
}	
@media screen and (max-width: 1200px) {
	.flow-txt{
		width:55%;
	}
}
@media screen and (max-width: 912px) {
	.flow-txt{
		width:75%;
	}		
}
@media screen and (max-width: 820px) {
	.flow-txt{
		width:85%;
	}
}
@media screen and (max-width: 767px) {
	.flow h4{
		line-height: 1.2em;
		padding-bottom: 20px;
		font-size:1.8em;
	}

	.flow-txt{
		width:95%;
		background-position: -100px top;
	}	
	.flow-step{
		flex-direction: column;
		padding-bottom:30px;
		margin: 20px 0 0 0;
	}	
	.speech-bubble {
		width:80%;
		margin:20px auto 0 auto;
		
	}	
	.sb1:after, .sb2:after, .sb3:after, .sb4:after, .sb5:after {
		right: 50%;
		top: 100%;		
	}
}
	
/*--------------------------課綱------------------------- */
.talk {
	margin: 0;
	max-width: 100%;
	text-align: center;
	vertical-align: baseline;
	background-color: #3f6bd0;
	opacity: 0.9;
	background-image:  linear-gradient(135deg, #385aa9 25%, transparent 25%), linear-gradient(225deg, #385aa9 25%, transparent 25%), linear-gradient(45deg, #385aa9 25%, transparent 25%), linear-gradient(315deg, #385aa9 25%, #3f6bd0 25%);
	background-position:  6px 0, 6px 0, 0 0, 0 0;
	background-size: 6px 6px;
	background-repeat: repeat;	
	padding: 50px 0;
/*	padding-top: 70px;*/
	color: #1d1723; 
}
.talk h4{
	font-size:2em;
	line-height: 1.2em;
	margin-bottom: 1%;
	color:#ffde00;
	font-weight: 900;
}
.talk h5{
	font-size:1.2em;
	color:#fff;
}
.talk-group{
	display: flex;
	flex-direction: row;
	width:50%;
	flex-wrap: wrap;
	margin: 0 auto;
	justify-content:center;
	padding-top:40px;
}
.talk .talk-group img {
  margin: 0px 30px 30px 30px;
  filter: drop-shadow(8px 8px 8px rgba(0, 0, 0, 0.2));	
}
.talk .talk-group img:hover {
	transform: translate(0px, 5px); 
}

.talk img.man03, .talk img.woman02 {
	position: absolute; 
}
.talk img.man03 {
	left: 15%;
	bottom: 0; 
}
.talk img.woman02 {
	right: 18%;
	bottom: 0; 
}

@media screen and (max-width: 1440px) {
	.talk {
		padding: 50px 20px;
	}
	.talk .talk-group {
	  width: 80%;
	  margin-bottom: 10px; 
	}

	.talk img.man03 {
		left: 8%;
	}
	.talk img.woman02 {
		right: 8%;
	 }
}
@media screen and (max-width: 1280px) {
	.talk .talk-group {
	  width: 80%;

	}	
}
@media screen and (max-width: 820px) {
	.talk .talk-group {
/*		width: 100%;*/
		margin-bottom: 10px; 
	}
	.talk .man03, .talk .woman02 {
		display: none;
	}
}
@media screen and (max-width: 767px) {
	.talk h4{
		margin-bottom: 5%;
		font-size:1.8em;
	}	
	.talk-group{
		flex-direction: column;
	}
	 .talk .talk-group img {
  		margin: 15px auto ;
		}	
}




/*24小時在家學*/
.home{
	background-image:url("../img/korean_05.jpg");
	background-repeat: no-repeat;
	background-position: center top;
	width: 100vw;
	position: relative;
	background-size: cover;	
	padding:5% 0;
}
.home-txt{
	text-align: center;
}
.home-group{
	display: flex;
	flex-direction: row;
	justify-content: center;
	padding-top:2%;
}
.home-group img{
	max-width:100%;
	padding: 0 30px;
	filter: drop-shadow(8px 8px 8px rgba(0, 0, 0, 0.2));
}
@media screen and (max-width: 1024px) {
	.home-group img{
		padding: 0 20px;		
	}		
}

@media screen and (max-width: 820px) {
	.home-group img{
		max-width:30%;
		padding: 0 1%;		
	}
	.home-txt img{
		width: 70%;	
	}	
}
@media screen and (max-width: 767px) {
	.home-group{
		flex-direction: column
	}
	.home-group img{
		margin:auto;
		max-width:80%;
		padding:15px 0;
	}	
	.home-txt img{
		width: 90%;
	}
	
}
/*--------------------------Form------------------------- */
#FormArea {
  background-color: #fc80a2;
  background-size: cover; 
}

.form-title img {
  width: 100%; 
}

@media screen and (max-width: 830px) {
	.form-title img {
	  width: 100%; } 
}
@media screen and (max-width: 500px) {
	.form-title img {
		width: 100%; 
	} 
}


/*--------------------------口碑------------------------- */
.review{
	background-color: #f1f1f1;
	opacity: 0.9;
	background-image:  linear-gradient(#e0e0e0 1.2000000000000002px, transparent 1.2000000000000002px), linear-gradient(90deg, #e0e0e0 1.2000000000000002px, transparent 1.2000000000000002px), linear-gradient(#e0e0e0 0.6000000000000001px, transparent 0.6000000000000001px), linear-gradient(90deg, #e0e0e0 0.6000000000000001px, #f1f1f1 0.6000000000000001px);
	background-size: 30px 30px, 30px 30px, 6px 6px, 6px 6px;
	background-position: -1.2000000000000002px -1.2000000000000002px, -1.2000000000000002px -1.2000000000000002px, -0.6000000000000001px -0.6000000000000001px, -0.6000000000000001px -0.6000000000000001px;
	padding-top:50px;
}

.review-content{
	background-color:#fff;
	width:900px;
	margin: 0 auto;
	display: flex;
	flex-direction: row;	
}
.review-left{
		width:70%;

}
.review-left h4{
	font-size: 2em;
	padding-top:30px;
	padding-left:50px;	
}
.review-left h4 span{
	font-weight: 900;
}
.review-txt-m{
	display: none;
}
.stars{
	padding-left:80px;
	padding-top:30px;
}
.slider{
	padding:0 ;
	margin-left:-60px;
}
.slick-slide img{
	margin:0 auto;
}
@media screen and (max-width: 820px) {
	.review-content{
		width:95%;
	}
	.review-left{
		width:100%;
	}
	.review-right {
		display: none;
	}
	.review-left h4{
		text-align: center;
		padding-left:0;
	}
	.slider{
		margin-left:0px;
	}
}
@media screen and (max-width: 767px) {
	.review-left h4{
		font-size:1.8em;
	}

	.slick-slide img{
		width:90%;
	}
	.stars{
		padding-left:30px;
	}
	.review-txt{
		display:none;
	}
	.review-txt-m{
		display: block;
	}
}
/*--------------------------按鈕------------------------- */
.footer {
  z-index: 10;
  position: fixed;
  margin: 0;
  right: 0;
  top: 70%; }
  .footer:hover {
    cursor: pointer; }
  .footer img {
    width: 50px; }

.mobile_bottom_footer .mobile_bottom_box li {
	font-size: 0.9em;
	margin:2px 0 5px 5px;
	height:23px;
}
.mobile_bottom_footer .mobile_bottom_logo {
	height: 140px;
	line-height: 120px;
}