@charset "utf-8";
/* CSS Document */

.wrapper-teacher{
	width: 100%;
	float: left;
	clear: both;
	background-color: #f2f4f5;
	background-image: url(../img/teacher/bg-w.jpg);
	background-repeat: repeat-x;
	background-position: left top;
}
.col-teacher-1,.col-teacher-3{
	flex: 0 0 10%;
	}
.col-teacher-2{
	flex: 1 1 auto;
	background-repeat:no-repeat;
	background-size:100% auto;
	min-height:500px;
	}
.box-teacher-dec{
	margin-top:-50px;
	width:100%;}
.box-teacher-w{
	width:60%;
	margin-left:35%;
	background-color:#f2f4f5;
	float:left;
	clear:both;
	margin-top:150px;
	}
.wrapper-t-name{
	width:95%;
	float:left;
	clear:both;
	padding-left:5%;}
.col-t-name{
	flex: 1 1 auto;
	color: #000000;
	font-size: 6em;
	font-weight: bolder;
	line-height: normal;
	}
.col-t-dec{
	flex: 0 1 55%;}
.article-t{
	width:90%;
	float:left;
	clear:both;
	padding:var(--section-padding-tb) 5%;}
@media screen  and (max-width: 1500px) {
.col-t-name{
	font-size:4em;
	}
}
@media screen  and (max-width: 1024px) {
.box-teacher-w{
	width:90%;
	margin-left:5%;
	margin-right:5%;
	margin-top:40%;
	}
.wrapper-t-name{
 flex-wrap:wrap}
.col-t-name{
	flex: 0 1 100%;
	order:2
	}
.col-t-dec{
	flex: 0 1 70%;
	order:1;margin-top:-35%;/*.box-teacher-w內*/
	margin-left:30%}
.box-teacher-dec{
	margin-top:0px;}	
}
@media screen  and (max-width:800px) {
.col-t-name{
	font-size:2.5em;
	}
.col-teacher-1,.col-teacher-3{
	display:none	
	}
.box-teacher-w {
    width: 90%;
    margin-left: 5%;
    margin-right: 5%;
}
}
/*DEC================================================*/
@-webkit-keyframes animate-svg-fill-1 {
  0% {
    fill: transparent;
  }

  100% {
    fill: url("#SVGID_1_");
  }
}

@keyframes animate-svg-fill-1 {
  0% {
    opacity:0;
	transform: translateX(50%);
  }

  100% {
    opacity:1;
	transform: translateX(0%);
  }
}

.svg-elem-1 {
fill: url("#SVGID_1_");
		  animation: animate-svg-fill-1 1.8s forwards;
  -webkit-animation: animate-svg-fill-1 1.8s forwards;
}

@-webkit-keyframes animate-svg-fill-2 {
 0% {
    opacity:0;
	transform: translateX(50%);
  }

  100% {
    opacity:1;
	transform: translateX(0%);
  }
}

@keyframes animate-svg-fill-2 {
0% {
    opacity:0;
	transform: translateX(50%);
  }

  100% {
    opacity:1;
	transform: translateX(0%);
  }
}

.svg-elem-2 {
 fill: url("#SVGID_2_");
 		  animation: animate-svg-fill-2 1.8s forwards;
  -webkit-animation: animate-svg-fill-2 1.8s forwards;
  animation-delay: 0.1s;
}

@-webkit-keyframes animate-svg-fill-3 {
0% {
    opacity:0;
	transform: translateX(30%);
  }

  100% {
    opacity:1;
	transform: translateX(0%);
  }
}

@keyframes animate-svg-fill-3 {
0% {
    opacity:0;
	transform: translateX(30%);
  }

  100% {
    opacity:1;
	transform: translateX(0%);
  }
}

.svg-elem-3 {
 fill: url("#SVGID_3_");
 		  animation: animate-svg-fill-3 2s forwards;
  -webkit-animation: animate-svg-fill-3 2s forwards;
  animation-delay: 0.25s;
}

@-webkit-keyframes animate-svg-fill-4 {
0% {
    opacity:0;
	transform: translateX(30%);
  }

  100% {
    opacity:1;
	transform: translateX(0%);
  }
}

@keyframes animate-svg-fill-4 {
  0% {
    opacity:0;
	transform: translateX(30%);
  }

  100% {
    opacity:1;
	transform: translateX(0%);
  }
}

.svg-elem-4 {
 fill: url("#SVGID_4_");
 		  animation: animate-svg-fill-4 1.2s forwards;
  -webkit-animation: animate-svg-fill-4 1.2s forwards;
  animation-delay: 0.2s;
}

@-webkit-keyframes animate-svg-fill-5 {
 0% {
    opacity:0;
	transform: translateX(40%);
  }

  100% {
    opacity:1;
	transform: translateX(0%);
  }
}

@keyframes animate-svg-fill-5 {
  0% {
    opacity:0;
	transform: translateX(40%);
  }

  100% {
    opacity:1;
	transform: translateX(0%);
  }
}

.svg-elem-5 {
   fill: url("#SVGID_5_");
 		  animation: animate-svg-fill-5 1s forwards;
  -webkit-animation: animate-svg-fill-5 1s forwards;
  animation-delay: 0.3s;
}

.wrapper-pro-list li {
    background-color: #f2f4f5;
}