body { line-height: 1.5;background: rgb(173, 173, 173); }

/*字型*/
h2{text-align: center; font-weight: 600;margin-bottom: 50px;}
.txt-m{line-height:2;font-size:16px;text-align: justify;-ms-text-justify: inter-ideograph;}
.txt-s{font-size:1.1em;font-weight:600;text-align: center;line-height:1.5;}
.txt-L{text-align: center;font-size: 1.6em;font-weight:600;}
.bigtxt{font-size: 1.6em;text-align:center;font-weight:600;text-shadow:rgba(0,0,0,0.3) 0 2px 1px;color:#FFF;line-height:0px;min-height:70px;padding-top:35px;}

div#SocialMediaTAB { position: fixed; right: 20px; bottom: 50px; }
div#SocialMediaTAB ul { padding: 0; list-style: none; }
div#SocialMediaTAB ul > li { 
    width: 60px; height: 60px; line-height: 40px;
    text-align: center;
    border-radius: 5px;
	margin: 5px;
}
div#SocialMediaTAB ul > li > a { display: block; color: #FFF; }

/*background color*/
.bule{background: #08A1C4;}
.other{background: -webkit-linear-gradient(-45deg, rgba(132,135,224,1) 0%,rgba(86,131,229,1) 42%,rgba(55,127,216,1) 100%);}

/*間距*/
.container{background-color:#FFF;box-shadow: 0 30px 35px 0 rgba(0, 0, 0, 0.2);}

/*header*/
header{ width: 1350px; margin: 0 auto; display: block; position: relative; height: 650px;overflow: hidden;box-shadow: 0 30px 35px 0 rgba(0, 0, 0, 0.2);}
div#Background{  height: 650px;background: url("../img/header-bg13.jpg")no-repeat center; background-size: cover;position: relative;-webkit-animation:  Big 3s ease-out both;}
#logo{position: absolute; top:20px;right:20px;z-index: 99;}
#logo img{width: 100%;}
header > img{ position: absolute; right: 0; bottom: 16%; width: 52%;}
@-webkit-keyframes Big {
	0% {
	  -webkit-transform: scale(1) translate(0, 0);
			  transform: scale(1) translate(0, 0);
	  -webkit-transform-origin: 84% 50%;
			  transform-origin: 84% 50%;
	}
	100% {
	  -webkit-transform: scale(1.25) translateX(20px);
			  transform: scale(1.25) translateX(20px);
	  -webkit-transform-origin: right;
			  transform-origin: right;
	}
  }


/*page01*/
#page01 .container{padding: 0 0 50px 0;}
#page01 .page-img-r{width: 80%;margin-left: 100px;margin-top: 60px;}
#page01 .page-txt-r{width: 1000px;padding: 50px 0;color: #FFF;margin: auto;font-size:18px;font-weight:600;}

#page01 .page01-img-r{width: 80%;margin-left: 100px;margin-top: 60px;}
#page01 .page01-img-l{width: 75%;margin-right: 100px;margin-top: 60px;}
#page01 .page01-txt-r{width: 80%;padding-top: 100px;}
#page01 .page01-txt-l{width: 82%;margin-left: 160px;padding-top:100px;}


/*page02*/
#page02 .page02{padding:50px 0 70px 0;background-color:#e9f7f8;background-size: cover;overflow: hidden;}
#page02 .txt-L-bg{background: #f47c5a;padding: 10px 20px;border-radius: 30px;color: #FFFFFF;border: 5px #d5d5d5 solid;}
#page02 .page02-wrap{width: 525px;padding:30px 10px 30px 30px;min-height:337px;border-top:5px #f47c5a solid;margin-bottom: 50px;background-color: #FFFFFF;margin-top: 20px;border-radius: 0 0 10px 10px;}
.page02-wrap-l{float:right;}
#page02 .page02-p{padding:30px 185px 0 185px;}
#page02 .page02-txt{width: 100%;line-height: 1.9;font-size: 1.5em;padding:0 21px;}
#page02 li{list-style-image: url(../img/Tick.svg);font-size: 1.2em;padding-top: 2px;} 
#page02 ul{margin-left: -25px;}

#page02 .flow{width: 1050px;height: 200px;margin:50px auto 100px auto;}
#page02 .flow-left{width: 340px; height: 200px;float: left;background-color:#08A1C4;margin-left: 15px;padding-top: 80px;border-radius: 20px;border: 5px #d5d5d5 solid;color: #FFFFFF;}
#page02 .flow-ceter{width: 300px; height: 200px;float: left;background-color:#08A1C4;margin-left: 20px;padding-top: 60px;border-radius: 20px;border: 5px #d5d5d5 solid;color: #FFFFFF;}
#page02 .flow-right img{height: 190px;margin-left: 30px;}
#page02 .flow-right{width: 250px; height: 200px;float: left;background-color:#c2e8eb;margin-left: 20px;border-radius: 20px;border: 5px #d5d5d5 solid;}
#page02 .fa-plus,  #page02 .fa-arrow-right{float: left;font-size: 2em;padding-left: 20px;padding-top: 80px;}

#page02 .flow-left:hover{color: #d5d5d5;transition: 0.20s linear;}

#page02 .courseFlow{ height: auto; margin:20px auto 90px auto; width: 1300px;}
#page02 .courseBox > h3{ font-weight: bold; text-align: center; }
#page02 .courseBox h4{ font-size: 17px; color: #0D6E9E; }
#page02 .courseBox li{ list-style: none; background:rgba(255,255,255,.7); padding: 5px 10px; margin-bottom: 10px; }
#page02 .courseBox li:hover{ background:rgba(255,255,255,1); box-shadow: 0 0 10px rgba(0,0,0,.1); }
#page02 span.tab{ font-size: 75%; color: #FFF; background:#f47c5a ; padding: 3px 5px; margin-right: 7px; border-radius: 5px; }
#page02 span.time{ font-size: 90%; color: rgb(153, 153, 153); margin-left: 5px; }

#page02 img#path{ width: 90%; margin: 0 auto; display: block; }

/*page03*/
#page03 .container{background-color: #FFFFFF; padding: 50px 0;background: -webkit-linear-gradient(top,rgba(255,255,255,0.2),rgba(255,255,255,0.6)),url('../img/page03-bg.jpg'); background: -ms-linear-gradient(top,rgba(255,255,255,0.2),rgba(255,255,255,0.6)),url('../img/page03-bg.jpg'); background-size: cover;}

#page03 .shareFlow{ height: auto; margin:20px auto 90px auto; width: 1100px;}
#page03 div.shareBox{ background: rgba(238, 172, 154, 0.5); margin: 15px; padding: 20px 30px; min-height: 280px;}
#page03 div.shareBox:hover{ background: rgba(238, 172, 154, 0.7); }
#page03 div.shareBox > img{ width: 48%; margin: 0 auto; display: block; }
#page03 div.shareBox > hr{ background:rgba(255, 255, 255, 0.5); margin-top: 15px; margin-bottom: 15px;}
#page03 div.shareBox > p { font-size: 1.15em; line-height: 1.6em; color:rgb(43, 43, 43);}



/* CPT 內容設定*/
div#CPT { width: 960px; margin:40px auto; clear: both; padding:4% 0 5% 0;font-weight:600;}
div#CPT div.BTN-A { width: 460px; }
div#CPT div.BTN { margin: 10px; float: left;color: #FFF; text-align:center;font-size: 1.3em; padding: 15px 10px; border-radius: 5px; transition: 0.20s linear;  background-color: #0D6E9E;}
div#CPT div.BTN:hover { background-color: #08A1C4; transition: 0.20s linear; border-color: #35547E;}
div#CPT .bigtxt{min-height: 0;}

@media(max-width:1350px){
	header{ width: 100%; }
}

@media(min-width:1200px){	
	.container{width:100%; max-width:1350px !important;}	

}

@media (min-width: 769px) and (max-width: 1199px) {
	#page02 .courseFlow, #page03 .shareFlow{ width: 95%; margin: 0 auto; display: block; }
	#page02 .courseBox h4{ line-height: 1.8em; }
	#page03 div.shareBox{ margin: 10px 5px; padding: 15px;}

	#page02 img#path{ width: 90%; }


    div#CPT { width: 760px}
	div#CPT div.BTN-A { width: 340px;margin:10px;}
	div#CPT div.BTN {font-size: 1.2em;}
}

@media(max-width:768px) {
	header{height: 350px;}
	div#Background{  height: 350px; }
	header > img{right: 0; bottom: 20%; width: 90%;}


	#page01 .container{padding: 0 0 30px 0;}
	#page01 .page01-img-r{width: 100%;margin-left: 0;margin-top: 10px;}
    #page01 .page01-img-l{width: 100%;margin-right: 10px;margin-top: 20px;display: none;}
    #page01 .page01-txt-r{width: 100%;padding-top: 10px;}
	#page01 .page01-txt-l{width: 100%;margin-left: 0;padding-top: 50px;}
	#page01 .row, #page03 .row{margin: 0 ;}
	#page01 .page-txt-r{width: 100%;padding: 50px 10px;font-size:16px;}
	
	#page02 .page02{padding:50px 0 20px 0;}
	#page02 .page02-wrap{width: 100%;padding:30px;min-height:300px;margin-bottom: 50px;margin-top: 20px;}
	#page02 .txt-L-bg{background: #f47c5a;padding: 10px 3px;border-radius: 30px;color: #FFFFFF;border: 3px #d5d5d5 solid;font-size: 0.7em;}
	.page02-wrap-l{float:none;}
	#page02 .page02-txt{width: 100%;line-height: 2;font-size: 1.3em;margin-top: 30px;}
	#page02 ul{margin-left: -25px;} 
	#page02 li{font-size: 1.1em;}
	#page02 .page02-p{padding:30px 10px 0 10px;} 
	  
	#page02 .flow{width: 100%;height: auto;margin:50px auto; padding: 10px 10px;}
	#page02 .flow-left{width: 100%; height: 150px;float:none;padding-top: 60px;margin: auto;}
	#page02 .flow-ceter{width: 100%; height: 150px;float:none;margin: auto;padding-top: 30px;}
	#page02 .flow-right img{height: 190px;margin-left: 30px;}
	#page02 .flow-right{width: 250px; height: 200px;float:none;margin: auto;}
	#page02 .fa-plus, #page02 .fa-arrow-right{float:none;font-size: 2em;padding-left: 160px;padding-top: 10px;}

	#page02 .courseFlow{ width: 100%; margin: 0 auto 50px auto; display: block; }
	#page02 .courseBox h4{ line-height: 1.8em; }
	#page02 img#path{ width: 90%; }

	#page03 .shareFlow{ width: 90%; margin: 0 auto; display: block; }

	
	div#CPT {width: 320px;padding:0;}
	div#CPT div.BTN-A { width: 320px;margin:20px 0;}
	div#CPT div.BTN {float:none;}
}