/*   ┌─────┐
     │         │
     └─v── ─┘
  (・∀・)つ
*/
  
body {
    margin-top: 50px; 
	background-color:#EDEDED;
}
.featurette {
    overflow: hidden;
	margin:20px 0;
}

/**/
.top-btn{padding:20px;}
.PBT{
	background:rgba(255,255,255,0.6);
	padding: 15px;
	font-size:1.2em;
	margin-left:5px;
	font-weight:600;
	border: none;
	box-shadow: rgba(0,0,0,0.1) 0 0 10px 0;
	transition: 0.10s linear;
	color:#666;
}
.PBT:hover{
    background:#FFF;
	border-color:#FFF;
	color:#333;
}
/**/
.service {
	width: 100%; 
	height: 250px;
	margin: 20px 0;
	text-align: center;
	border: 3px solid #ddd;
	/*-webkit-transition: all 0.3s ease;
	transition: all 0.3s ease;*/
	background-color:rgba(255,255,255,0.9);
}

.service .icon-holder {
	position: relative;
	top:-30px;
	display: inline-block;
	margin-bottom: 10px;
	padding: 10px;
	background: #fdd200;
	border-radius:50%;
	/*-webkit-transition: all 0.3s ease;
	transition: all 0.3s ease;*/
}

.service .heading {
	position: relative;
	top: -30px;
	/*-webkit-transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
	transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);*/
}

.service .icon-holder > img.icon {
	width: 40px;
}

.service:hover {
	border-color:#fdd200;
	background-color:#fff;
}

.service:hover .icon-holder {
	top: -30px;
}

.service:hover .heading {
	top: -30px;
}

.service .description {
	width: 80%;
	margin: 0 auto;
	opacity: 1;
	/*-webkit-transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
	transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
	-webkit-transform: scale(0);
	-ms-transform: scale(0);
	transform: scale(0);*/
	font-size:1.1em; line-height:1.5;
}

.service:hover .description {
	opacity: 1;
	-webkit-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
	font-size:1.1em; line-height:1.5;
}

/**/
/*主視覺*/
.header{ 
    margin:0; 
	height:616px; 
	background-image:url(../img/image05.png); 
	position:inherit;
}
.image-left, .title-right{
	position:absolute;
}
.image-left img, .title-right img{
	width:100%;
}
.title-right{
	right:30px;
	margin-top:200px; 
	z-index:1000;
}


.one_container_h2{
	text-align:center; 
	color:#000;
	font:bold 2.5em/1.5 "微软雅黑";
}

.one_container_p{
	font-size:1.1em; 
	line-height:1.8; 
	text-align:left;
	font-weight:600;
	color:#FFF;
}
.page_p{padding:0 50px;}
.p-left{
	padding:20px;
	color:#000; 
	background-color:#FFF; 
	border:3px #000000 solid; 
	width:50%;
	margin-left:30px; margin-top:50px;
	}
/*第三段說明*/	
.code--right{
	float: right;
	margin-right:40px; 
	margin-top:30px;
	}
.code--right-p{
	padding:20px;
	color:#000;
	width:620px; 
	height:196px;
	background-color:#FFF; 
	border:3px #000000 solid;
}
/*課程介紹*/
.course{
	padding: 5px;
    margin: 10px 0 3px 0;
	height: auto;
    background: #FFF;
    border-radius: 10px;
	background-color:#FFF;
    box-shadow: rgba(0,0,0,0.15) 0px 0px 8px 0px;
	}
.course ul {
	padding:0;
}
.course ul li:hover{ border:2px  #999 solid;}
.course h3{color:#003567; }
.course ul li{
	background: #ffcc00;
    color:#000;
	font-size: 17px;
	padding: 8px;
    margin: 8px 0;
    border-radius: 5px;
	list-style:none;
	font-weight:600;
	text-align:left;
}
.class_title{
	text-align:center;
	height:120px;
	padding-top:45px;
	font-weight:bold;
	font-size:2.5em;
	color:#FFF;
	margin:0;
	text-shadow: rgba(0,0,0,0.7) 0px 1px 6px;
}
.class_title:after {
    content: "";
    width: 10%;
    display: block;
    height: 2px;
    background: #fdd200;
    margin: auto;
    margin-top:15px;
    margin-bottom: 7px;
}

.box{
	overflow:hidden;
	color:#000;
	margin-top:15px;
	transition: 0.20s linear;
	max-width:500px;

	
}
.box:hover {
	text-decoration:none !important;
	max-width:550px;
}
/*.box p:hover{
	color:#000;
}*/

.box_A{
	float:left;
	max-width:500px;
	border:3px #000000 solid;
	padding:10px 0 0 10px;

}


.box_title{
	font-weight:600; 
	font-size:1.4em;
	margin:0 0 5px !important;
}

.box_content{
	margin-top:10px;font-size:1.2em; line-height:1.5;
	padding-right:3px;
}

/*優惠訊息*/
.Join{padding:80px 0 0 0;}
.Join h2{
	text-align:center; 
	font-weight:bold; 
	margin-top:30px;
}
.Join_btn{
	max-width:900px; 
	margin:50px auto;
}
.pack-table{ margin-left:10%; margin-top:50px;}
.CPT{
    width: 260px;
	background:#174068;
	border-color:#174068;
    color: #FFF;
    text-align: center;
    font-size: 1.4em;
    padding: 10px 10px;
    border-radius: 5px;
    transition: 0.20s linear;
	font-weight:600;
	margin-left:20px;
}
.CPT:hover{
    background:#C33;
	border-color:#C33;
	color: #FFF;
}

@media(max-width:1200px) {
	.header{ 
    margin:0; 
	/*height:559px; */
	background-image:url(../img/image05.png);
	background-size:cover; 
	position:inherit;
}
   .image-left, .title-right{
	position:absolute;
	}
	.image-left img{
		width:75%;
		padding-top:150px;
	}
	.title-right{
		right:30px;
		margin-top:150px; 
		z-index:1000;
	}
    .featurette-divider {
        margin: 50px 0;
    }

    .featurette-image.pull-left {
        margin-right: 20px;
    }

    .featurette-image.pull-right {
        margin-left: 20px;
    }

    .featurette-heading {
        font-size: 35px;
    }
}

@media(max-width:991px) {
	.service {
	height: 220px;
	margin: 40px 0;
}
    .featurette-divider {
        margin: 40px 0;
    }

    .featurette-image {
        max-width: 50%;
    }

    .featurette-image.pull-left {
        margin-right: 10px;
    }

    .featurette-image.pull-right {
        margin-left: 10px;
    }

    .featurette-heading {
        font-size: 30px;
    }
}

@media(max-width:768px) {
	.PBT{
		display:none;
	}
	.header{ 
    margin:0; 
	height:450px;
	background-image:url(../img/image05.png);
	background-size:cover;
	position:inherit;
}
   .image-left, .title-right{
	position:absolute;
	}
	.image-left img{
		width:95%;
		height:448px;
		padding-top:70px;
	}
	.title-right{
		right:30px;
		margin-top:20px; 
		z-index:1000;
		margin-left:28px;
	}
    .page_p{padding-left:0px;}	

    .one_container_h2{
	font-size:1.5em;
	text-align:center; 
	margin-top:0px;
	line-height:1.5;
	padding:0 15px;
    }
	.one_container_img{
	display:none;
	margin-top:100px;
    }
	.one_container_p{
	font-size:0.9em; 
    }
	.p-left{
	padding:20px;
	color:#000; 
	background-color:#FFF; 
	border:3px #000000 solid; 
	width:80%;
	margin-left:35px; 
	margin-top:20px;}
	
	
	/*第三段說明*/	
.code--right{
	float:none;
	margin-top:0px;
	}
.code--right-p{
	padding:20px;
	color:#000;
	width:90%; 
	height:auto;
	background-color:#FFF; 
	border:3px #000000 solid;
	margin-left:35px; 
	margin-top:20px;
}
.heading{
	font-size:1.2em;
}
.Join{padding:0;}
	.box img{
	float:none;
	width:70px;
	height:70px;
    }
	.class_title{
		padding-top:0px;
		font-size:1.8em;
		height:70px;
    }
	.title p{
		padding:0 5px ;
	}
	.Join_btn{
	max-width:320px; 
	margin:20px auto;
    }
    .pack-table{ margin-left:0; margin-top:20px; font-size:0.8em;}
	.Join h2{
		font-size:1.2em;
	}
	.CPT{
		margin-bottom:20px;
	}
    .container {
        margin: 0 15px;
    }

    .featurette-divider {
        margin: 10px 0;
    }

    .featurette-heading {
        font-size: 25px;
    }
.moble-box{
	width:50%;
	float:left;
}
.class_title { margin-top:30px;}
}

@media(max-width:668px) {
    .headline h1 {
        font-size: 70px;
    }

    .headline h2 {
        font-size: 32px;
    }

    .featurette-divider {
        margin: 30px 0;
    }
}

@media(max-width:640px) {
    .headline {
        padding: 30px 0 0 0;
    }

    .headline h1 {
        font-size: 60px;
    }

    .headline h2 {
        font-size: 30px;
    }
}

@media(max-width:375px) {
    .featurette-divider {
        margin: 10px 0;
    }

    .featurette-image {
        max-width: 100%;
    }

    .featurette-image.pull-left {
        margin-right: 0;
        margin-bottom: 10px;
    }

    .featurette-image.pull-right {
        margin-bottom: 10px;
        margin-left: 0;
    }
}