body { background:#606060;line-height: 1.5;
background: rgb(3,182,172); 
background: -moz-linear-gradient(-45deg, rgba(3,182,172,1) 0%, rgba(6,183,216,1) 41%, rgba(8,184,235,1) 100%);
background: -webkit-linear-gradient(-45deg, rgba(3,182,172,1) 0%,rgba(6,183,216,1) 41%,rgba(8,184,235,1) 100%); 
background: linear-gradient(135deg, rgba(3,182,172,1) 0%,rgba(6,183,216,1) 41%,rgba(8,184,235,1) 100%);
}


/*字型*/
.txt-m{line-height:2;font-size:16px;}
.txt-s{font-size:1.4em;font-weight:600;}
.txt-L{text-align: center;font-size: 1.6em;font-weight:600;}
h2{text-align: center; font-weight: 600;padding: 20px 0;}
.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:1.2;min-height:90px;padding-top:35px;margin-bottom:40px;}

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

/*header*/
#header{
height:auto;
padding: 150px 0 100px 0;
background-image:url(../img/Monthly02.jpg);
background-size: cover;
}
.android{
	height: 404px; width: 334px;
	margin-left: 150px;
}
.header-img{position: absolute;right:30px;top:20px;width:850px;}
#page01 .container{
background-image:url(../img/Monthly-2.jpg);
background-size: cover;
}
#page01 img{max-width:550px; height:360px;}
#page01 .Video{border-radius: 10px;border: 5px #3298CD solid;overflow: hidden;width: 560px;height: 315px;}
#page04 .container{
background-image:url(../img/Monthly-3.jpg);
background-size: cover;
padding-bottom: 100px;	
}
/*page02*/
#page02{text-align:center;}
#page02 .page02-box{padding:0 50px;margin-bottom: 50px;}
#page02 img{width:100px;margin:30px 0;}
#page02 .txt-s{color: #000400;}


/*page03*/
.page03{padding:50px 0 50px 0;background-image:url(../img/Development.jpg);background-size: cover; }
.page03-wrap{width:500px; padding:30px;min-height:350px;border-top:5px #A4CA39 solid;}
.page03-txt{width:98%;margin: auto; padding: 5px; border-radius: 5px; line-height: 1.7; font-size: 1.1em;}
#page03 img{width:570px; min-width:200px;position: absolute;right: 80px; top:365px;z-index:100;}
.page03-Left{padding:0 0 0 100px;margin-bottom: 170px;}
.Lightboxbg{width:860px;}
.modal-content{background-color:#393939;color:#FFFFFF;}
.modal-title{font-size:1.6em;margin-bottom:20px;border-bottom:1px #FFFFFF solid;}

/*page04*/

#page04 .page04{overflow:hidden;margin:auto;padding: 3%;}
#page04 .page04-wrap{padding:40px 0;height:450px;background-color:#fff;border-radius:3px;box-shadow: 0 0 45px 0 rgba(0, 0, 0, 0.1);margin-bottom:50px;}
#page04 .page04-wrap:hover{box-shadow: 0 0 35px 0 rgba(0, 0, 0, .3);transition: 0.20s linear; background-color:#fff; margin-top: -10px;}
#page04 .page04-txt{width:85%;background-color:#FFFFFF; margin: auto;padding: 5px; border-radius: 5px; line-height: 1.7;}
#page04 .page04 ul{padding:0 25px 0 50px;}
#page04 .list-item-p{font-size:16px;font-weight:600;color:#47B8E0;padding-left:5px;border-bottom:1px #DEDFE0 solid;margin:10px 25px;}

#page04 .main-btn{ display: block; background-color: #F79663; color: #FFF; font-size: 1.2em;font-weight:600; text-align: center; padding: 10px; width: 150px; margin:7px auto;border-radius: 5px;position:absolute;bottom: 80px;left: 350px;}
#page04 .main-btn span{background-color:#fff; color: chocolate; padding: 0 6px; border-radius: 5px;}
#page04 .main-btn:hover{ color: #35547E;transition: 0.20s linear;}

#page04 .sale p{text-align:center;}
#page04 i{padding-right:10px;color:#F79663;}
#page04 img{width:100%;height:auto;margin-top:-40px;}










/* student */
#student {padding: 30px 15px;margin-bottom: 30px;}
#student .box{width:65%;margin: 0 auto 30px;}
#student h3{ text-align: center; margin-bottom: 20px; font-weight: bold; color: rgb(10,9,14); }
#student p { line-height: 1.8;font-weight: 600;font-size:15px; }
#student a {color: #088da0;font-weight: 600;font-size:18px;}
#student a span{transition: all .3s linear;transform: translateX(2px);font-weight: 800;display: inline-block;} 
#student a:hover span{transform: translateX(8px);} 
#student .photo {width:180px;height: 180px;border-radius: 100%;overflow: hidden;margin:10px auto;border: 3px solid #088da0;}
#student .photo img{width:100%;}
#student .photo + p {text-align: center;}





























/* testimony */
section#page04 div.Item{padding: 0 50px 40px 50px;}
section#page04 h3{ text-align: center; margin-bottom: 20px; font-weight: bold; color: rgb(10,9,14); }
section#page04 div.talk{position: relative;border: 2px solid #088da0;border-radius: 7px;background: #FFF;}
section#page04 div.talk > .image1{position: absolute;width: 5%;bottom: 0;left: 5px;}
section#page04 div.talk > .image2{position: absolute;width: 12%;bottom: 0;left: 5px;}
section#page04 div.talk > .image3{position: absolute;width: 15%;bottom: 0;left: 5px;}
section#page04 div.talk > .image4{position: absolute;width: 9%;bottom: 0;left: 5px;}
section#page04 div.talk > p{padding-top: 20px;padding-left: 62px;padding-right: 10px;text-align: center;color: rgb(10,9,14);font-weight: bold;}
section#page04 div.container > div.row{margin-top: 40px;}

/* CPT 內容設定*/
div#CPT { width: 960px; margin:40px auto; clear: both;}
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; }
div#CPT div.BTN:hover { background-color: transparent; color: #35547E; transition: 0.20s linear; border-color: #35547E;}
div#CPT .bigtxt{min-height: 0;}
div#CPT div.BTN-A { width:295px; }









/*background color*/
.bule{background: -webkit-linear-gradient(-45deg, rgba(3,182,172,1) 0%,rgba(6,183,216,1) 41%,rgba(8,184,235,1) 100%);
	background:-ms-linear-gradient(-45deg, rgba(3,182,172,1) 0%,rgba(6,183,216,1) 41%,rgba(8,184,235,1) 100%);
}
.other{background: -webkit-linear-gradient(-45deg, rgba(132,135,224,1) 0%,rgba(86,131,229,1) 42%,rgba(55,127,216,1) 100%);
	background:-ms-linear-gradient(-45deg, rgba(132,135,224,1) 0%,rgba(86,131,229,1) 42%,rgba(55,127,216,1) 100%);
}


@media (min-width: 1500px) {
.header-img{position: absolute;right:300px;top:20px;}	
#page03 img{right: 300px;}
}
@media(min-width:1200px){	
.container{width:100%; max-width:1350px !important;}

}

@media (min-width: 769px) and (max-width: 1199px) {
	#page01 .Video{width: 430px;height: 242px;}
	.header-img{position: absolute;right:120px;top:20px;width:700px;}
	#page01 img{max-width:430px; height:300px;margin-top: 30px;}
	#page03 img{right: 60px;}
    div#CPT { width: 760px}
	div#CPT div.BTN-A { width: 340px;margin:10px;}
	div#CPT div.BTN {font-size: 1.2em;}


	#student .box{width: 90%;}

}

@media(max-width:768px) {
	#page01 .Video{width: 320px;height: 180px;margin: auto;}
	.header-img{position: absolute;right:0px;top:20px;width:100%; margin: auto;}
	#header{height:auto;padding: 150px 0 150px 0;}
	.txt-L{width: 300px;margin:5px auto;}
	.txt-s{font-size:1em;font-weight:600;}
	.android{height: 250px; width: 207px;margin-left: 80px;}
	#page01 img{max-width:300px; height:230px;margin-top: 30px;}
	#page02 .page02-box{padding:0 10px;margin-bottom: 40px;}
	.Lightboxbg{width:90%;margin: auto;}
	.prettyprint{font-size:0.8em !important;}
	.page03-Left{padding:0 0 0 15px;margin-bottom: 30px;}
	.page03-wrap{width:350px; padding:20px 0 0 0;min-height:350px;border-top:5px #A4CA39 solid;}
	#page03 img{width:380px; min-width:100px;position: absolute;right: 0px; top:833px;z-index:100;}
	#page04 .page04-wrap{height: 550px;}
	#page04 .main-btn{bottom: 30px;left: 120px;}
    section#page04 div.talk > .image1{position: absolute;width: 15%;bottom: 0;left: 5px;}
	section#page04 div.talk > .image2{position: absolute;width: 15%;bottom: 0;left: 5px;}
	section#page04 div.talk > .image4{position: absolute;width: 15%;bottom: 0;left: 5px;}


	/* student */
	#student {padding: 30px;}
	#student .box{width:90%;margin: 0 auto 30px;}

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