@import url(https://fonts.googleapis.com/earlyaccess/cwtexyen.css);
@import url("https://fonts.googleapis.com/css?family=Lato:300,400|Poppins:300,400,800&display=swap");
body {
    margin:0px 0px 0px 0px;
    font-family: Arial, Verdana, Helvetica, sans-serif, 微軟正黑體;
    font-size: 18px;
    color: #212529;
    text-align: left;
    letter-spacing: 2px;
    line-height: 1.5em;
    margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
    margin-bottom: 0px;
    background-color:#f2f1f1;
	overflow-x: hidden;
	height:100%;
	padding: 0;
}

.pageTitle{
    width:98%;
    margin:0px auto;
}

.webContent{
    width:98%;
    margin:0px auto;
    background-image: url('images/background01.png');
    background-position:center;
    background-color:f2f1f1;
    background-repeat:no-repeat;
    height:auto;
}

.pageMesg{
    font-size:12px;
    color:#666666;
}

.copyRight {
    height:25px;
    font-size:12px;
    background: linear-gradient(to right,#77519c,#dc2d52);
	position: fixed;
	width: 100%;
	left: 0;
    bottom: 0;
    z-index:-1;
}

.goTop{
    display:scroll;
    position:fixed;
    bottom:20px;
    right:20px;
    z-index:2;
}

.fade-in-words {
    margin: 0 auto;
    text-align: right;
    color:#ffffff;
    font-weight: bold;
	font-size: 50px;
	
	width:80%;
	height:200px;
	text-align:right;
	position:absolute;
	left:20px;
	top:300px;
}

.yuhwaMenu{
    color:#000000;
    font-size:14px;
}

.yuhwaMenu:hover{
    color:#0068b5;
}

.top-words {
    margin: 0 auto;
    text-align: right;
    color:#ffffff;
    font-weight: bold;
	font-size: 50px;
	
	width:80%;
	height:200px;
	text-align:right;
	position:absolute;
	left:20px;
	top:300px;
}

.partner-words1 {
    margin: 0 auto;
    color:#ffffff;
    font-weight: bold;
	
	width:500px;
	height:200px;
	position:absolute;
	left:650px;
	margin-top: 250px;
	text-align:left;
	background-color:rgba(17,54,90, 0.8);
}

.partner-words2 {
    margin: 0 auto;
    color:#ffffff;
    font-weight: bold;
	
	width:500px;
	height:200px;
	position:absolute;
	left:200px;
	margin-top: 250px;
	text-align:left;
}

.partner-words3 {
    margin: 0 auto;
    color:#ffffff;
    font-weight: bold;
	
	width:400px;
	height:100px;
	position:absolute;
	left:650px;
	margin-top: 250px;
	text-align:left;
	background-color:rgba(109,49,49,0.50);
}

.top-words1 {
    margin: 0 auto;
    color:#ffffff;
    font-weight: bold;
	font-size: 50px;
	
	width:80%;
	height:20%;
	text-align:right;
	position:absolute;
}

.top-words2 {
    font-size: 50px;
	text-shadow:3px 3px 3px #000000;
	margin:0px auto;
}

.top-words3 {
    font-size: 26px;
	text-shadow:3px 3px 3px #000000;
}
    
/*自定义一个透明度从0到1的动画，它的名称是fade-in*/
@keyframes fade-in {
    0% {
		opacity: 0;
    }
    
    100% {
		opacity: 1;
    }
}
    
@-webkit-keyframes fade-in {
    0% {
        opacity: 0;
    }
    
    100% {
        opacity: 1;
    }
}
    
@-ms-keyframes fade-in {
    0% {
        opacity: 0;
    }
    
    100% {
        opacity: 1;
    }
}
    
@-o-keyframes fade-in {
    0% {
        opacity: 0;
    }
    
    100% {
        opacity: 1;
    }
}
    
@-moz-keyframes fade-in {
    0% {
        opacity: 0;
    }
    
    100% {
        opacity: 1;
    }
}

.storyTitle1{
	color:#000000;
	font-size: 40px;
    font-weight: 700;
    line-height: 45px;
	font-family: "Poppins";
    text-shadow: -1px 0 #d5caca, 0 1px #d5caca, 1px 0 #d5caca, 0 -1px #d5caca;
}

.storyTitle2{
	color:#3f3e3e;
	font-size: 20px;
    font-weight: 500;
	line-height: 25px;
	font-family: "Poppins";
    text-shadow: -1px 0 #d5caca, 0 1px #d5caca, 1px 0 #d5caca, 0 -1px #d5caca;
}
    
.first-words {
    opacity: 0;
    /*实先规定文字的状态是不显示的*/
    animation: fade-in 3s ease 0s 1;
    /*调用名称为fade-in的动画，全程动画显示时间4S，进入方式为ease，延时0S进入，播放次数1次*/
    -webkit-animation: fade-in 3s ease 0s 1;
    -moz-animation: fade-in 3s ease 0s 1;
    -o-animation: fade-in 3s ease 0s 1;
    -ms-animation: fade-in 3s ease 0s 1;
    
    /*规定动画的最后状态为结束状态*/
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
    -o-animation-fill-mode: forwards;
    -ms-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
}
    
.second-words {
    opacity: 0;
    animation: fade-in 3s ease 1.5s 1;
    -webkit-animation: fade-in 3s ease 1.5s 1;
    -moz-animation: fade-in 3s ease 1.5s 1;
    -o-animation: fade-in 3s ease 1.5s 1;
    -ms-animation: fade-in 3s ease 1.5s 1;
    
    /*规定动画的最后状态为结束状态*/
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
    -o-animation-fill-mode: forwards;
    -ms-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
}

.three-words {
    opacity: 0;
    animation: fade-in 3s ease 2.5s 1;
    -webkit-animation: fade-in 3s ease 2.5s 1;
    -moz-animation: fade-in 3s ease 2.5s 1;
    -o-animation: fade-in 3s ease 2.5s 1;
    -ms-animation: fade-in 3s ease 2.5s 1;
    
    /*规定动画的最后状态为结束状态*/
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
    -o-animation-fill-mode: forwards;
    -ms-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
}

.four-words {
    opacity: 0;
    animation: fade-in 3s ease 3.5s 1;
    -webkit-animation: fade-in 3s ease 3.5s 1;
    -moz-animation: fade-in 3s ease 3.5s 1;
    -o-animation: fade-in 3s ease 3.5s 1;
    -ms-animation: fade-in 3s ease 3.5s 1;
    
    /*规定动画的最后状态为结束状态*/
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
    -o-animation-fill-mode: forwards;
    -ms-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
}

.five-words {
    opacity: 0;
    animation: fade-in 3s ease 4.5s 1;
    -webkit-animation: fade-in 3s ease 4.5s 1;
    -moz-animation: fade-in 3s ease 4.5s 1;
    -o-animation: fade-in 3s ease 4.5s 1;
    -ms-animation: fade-in 3s ease 4.5s 1;
    
    /*规定动画的最后状态为结束状态*/
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
    -o-animation-fill-mode: forwards;
    -ms-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
}

.six-words {
    opacity: 0;
    animation: fade-in 3s ease 5.5s 1;
    -webkit-animation: fade-in 3s ease 5.5s 1;
    -moz-animation: fade-in 3s ease 5.5s 1;
    -o-animation: fade-in 3s ease 5.5s 1;
    -ms-animation: fade-in 3s ease 5.5s 1;
    
    /*规定动画的最后状态为结束状态*/
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
    -o-animation-fill-mode: forwards;
    -ms-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
}

.more{
	border-width:3px;
	border-style:double;
	border-color:#ffffff;
	padding:2px;
	color:#ffffff;
}

.moreChange{
	border-width:3px;
	border-style:double;
	border-color:#FFFF00;
	padding:2px;
	color:#FFFF00;
}


.container {
    max-width: 100%;
    margin: 0 auto;
    padding: 0 15px;
}

.row {
	margin-left: -15px;
    margin-right: -15px;
}

.row:after {
	content: "";
    display: table;
    clear: both;
}

.col-half,
.col-three-one,
.col-quarter {
	float: left;
    padding-left: 15px;
    padding-right: 15px;
}
		
.col-three-one1{
	float: left;
}

.col-half {
	width: 50%;
}

.col-half-center {
	margin-left: 25%;
}

.col-three-one {
	width:20%;
}

.col-three-one-center {
	margin-left: 20%;
}

.col-quarter {
	width: 25%;
}

@media (max-width: 779px) {
	.col-half,
    .col-three-one,
    .col-quarter {
		float: none;
        width: 100%;
	}

    .col-half-center,
    .col-three-one-center {
		margin-left: 0;
	}
}

.logo {
	display: block;
    padding: 12px 16px;
    text-decoration: none;
    color: white;
    font-size: 18px;
}

.section {
	padding: 35px 0;
}

.section-rotate {
	transform: rotate(-7deg);
    margin-top: -110px;
    margin-left: -500px;
    margin-right: -530px;
    padding: 35px 80px 35px 80px;
    height:100%;
    box-shadow:inset 0 2px 1px rgba(0,0,0,0.1);
}

.section-rotate .section-rotate-fixed {
	transform: rotate(7deg);
}

.titleDiv{
	width:90%px;
	height:100px;
	margin:30px auto;
}

.titleDiv1{
	float:left;
	width:14%;
	margin-left:2.5%;
	height:180px;
	text-align:center;
	font-size:16px;
	font-weight:bold;
	line-height: 30px;
	word-break: break-all;
	border: #d3d2d2 1px double;
	border-radius:10px;
	background-color:#f1f1f1;
}

.progress {
	height: 20px;
    overflow: hidden;
	background-color: rgba(250, 250, 250, 0.45);
    border-radius: 3px;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
    position: relative;
}

.progress-bar {
	position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0;
    font-size: 12px;
    line-height: 20px;
    color: #fff;
    text-align: center;
    background-color: #e26789;
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
    transition: width 3s ease;
}

.header-wrap {
	height: 600px;
    width: 130%;
    margin: -10% -15% 0 -15%;
    padding-left: 15%;
    padding-right: 15%;
    padding-top: 10%;
    overflow: hidden;
    transform: rotate(-7deg);
}

.header-img {
	background-image: url(https://firebasestorage.googleapis.com/v0/b/hexschool-api.appspot.com/o/tutorials%2FRWD%2Fman-for-scroll-demo-light.png?alt=media&token=625670d9-4180-434b-a4bd-c1b1db0d0604);
	background-position: right 0;
    background-size: cover;
    position: absolute;
    bottom: 0;
    top: 0;
    left: 0;
    right: 0;
}

.header-text {
	padding: 25px 35px;
    background-color: #555;
    background-image: linear-gradient(45deg, #333, #555);
    display: inline-block;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    box-shadow: 2px 5px 15px rgba(0, 0, 0, 0.25);
}

.header-text>* {
	transform: rotate(7deg);
}

.clearfix:after {
	content: "";
    display: table;
    clear: both;
}

.h100 {
	height: 100%;
}

.v-center {
	top: 50%;
    transform: translateY(-50%);
    position: relative;
}

.relative {
	position: relative;
}

.pull-left {
	float: left;
}

.pull-right {
	float: right;
}

.circle-border {
	border: transparent 2px solid;
    border-radius: 100%;
}

.border-white {
	border-color: white;
}

.bg-darker {
	background-color: #f6f3e1;
}

.bg-dark {
	background-color: #333;
}

.bg-white {
	background-color: #fff;
}

.text-primary {
	color: #039dff;
}

.text-success {
	color: #00CC99;
}

.text-accent {
	color: #e26789;
}

.text-white {
	color: white;
	text-decoration: none;
}

.text-gray {
	color: #bfbfbf;
}

.text-right {
	text-align: right;
}
		
.text-left {
	text-align: left;
}
		
.text-top {
	margin-top:-80px;
	text-align: right;
}

.block {
	display: block;
}

.box-shadow {
	position: relative;
}

.box-shadow:before {
	content: " ";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.15);
}

.box-shadow1 {
	position: relative;
}

.box-shadow1:before {
	content: " ";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
	box-shadow: 0 -15px 15px -15px rgba(0, 0, 0, 0.15);
}



.m-b-0 {
	margin-bottom: 0;
}

.m-t-1 {
	margin-top: 15px;
}

.m-t-3 {
	margin-top: 45px;
}

.m-b-2 {
	margin-bottom: 30px;
}

.m-b-1 {
    margin-bottom: 15px;
}

.m-y-1 {
	margin-top: 15px;
    margin-bottom: 15px;
}

.row2 {
	width:100%;
	margin:0 auto;
	display:flex;
	justify-content:space-between;
}

.col-three-one2{
	float: left;
	width:32%;
	height:100%;
	border-radius: 0px 0px 10px 10px;
}



.about4_parentWrap{
    width:90%;
    overflow: hidden;
}

.about4_parent{
    margin-right: -20px;
    overflow: hidden;
}

.about4_child{
    float: left;
    height:200px; 
    width: 33%;
    padding-right: 20px;
    box-sizing: border-box;
    background-clip: content-box;
    background-repeat: no-repeat;
    background-size:cover;
}

.about4_content{
    border-radius: 10px 10px 10px 10px;
    padding-top:10px;
    padding-left:15px;
    padding-right:10px;
    width:89%; 
    height:250px; 
    display:inline;
    background-color:#CCCCCC;
    font-size:16px;
    font-weight: bold;
    text-align:left;
    display: flex;
    align-items: center;

}



.m-y-11 {
	margin-top: 15px;
    margin-bottom:0px;
	text-shadow: 0 0 2px #000000;
	padding-left: 15px;
	padding-right: 15px;
	font-size:18px;
	font-weight: bold;
	color:#ffffff;
    height:19%;
}

.m-y-12{
	padding-left: 15px;
	padding-right: 15px;
	font-size:16px;
	font-weight: bold;
	color:#ffffff;
    text-overflow : ellipsis;
}

.m-y-2 {
	margin-top: 0px;
	margin-bottom: 0px;
	height:135px;
}

.m-y-3 {
    margin-top: 45px;
    margin-bottom: 45px;
}

.m-x-1 {
    margin-left: 15px;
    margin-right: 15px;
}

.m-x-2 {
    margin-left: 30px;
    margin-right: 30px;
}

.p-y-1 {
    padding-top: 15px;
    padding-bottom: 15px;
}

.p-y-2 {
    padding-top: 30px;
    padding-bottom: 30px;
}

.p-y-3 {
    padding-top: 45px;
    padding-bottom: 45px;
}

.p-x-3 {
    padding-left: 45px;
    padding-right: 45px;
}

.p-a-3 {
    padding: 45px;
}

.text-center {
    text-align: center;
    font-size:35px;
    color:#000000;
    font-weight: bold;
}

.img-fluid {
    display: block;
    max-width: 100%;
    height: auto;
}

@media (max-width: 779px) {
    .hidden-mobile {
		display: none !important;
    }
}

@media (min-width: 779px) {
    .hidden-desktop {
	display: none !important;
    }
}

.bg-gradient1 {
    background-image: linear-gradient(45deg, #59f0ff, #039dff);
}

.animated {
    opacity: 0;
    transition: all 1.5s;
    transform: translateY(50px);
}

.fadeIn {
    opacity: 1;
    transform: translateY(0);
}