﻿/*index page start*/
/*header*/

@media (min-width: 480px) and (max-width: 760px) {

	/*footer*/
	
	.footer-content {
		width: 100%;
		color: #fff;
		font-size: 21px;
		//margin:3px 5px;
	}
	.footer-content div {
		display: inline-block;
		letter-spacing: 1px;
		font-size:15px;
	}
	

}


@media (max-width: 479px) {

	/*footer*/
	
	.footer-content {
		width: 100%;
		letter-spacing:0px;
		font-size:17px;
		//margin:3px 5px;
	}
	
	.footer-content div {
		letter-spacing:1px;
		font-size:15px;
		margin:3px 5px;
	}

	
}


@media (min-width: 768px) and (max-width: 979px) {
}
@media (min-width: 980px) {
}
@media (min-width: 1200px) {
}


/*以下為舊格式*/
	@media (max-width: 917px) { 
		.header-menu li{
			width: 71px;
			font-size: 14px;
		}
	}
	@media (max-width: 767px) {
		.header-menu {
			height: auto;
			float: none;
			max-height: 0px;
			overflow: scroll;

			-webkit-transition: max-height 0.3s;
			-o-transition: max-height 0.3s;
			transition: max-height 0.3s;

			position: absolute;
			z-index: 100;
			top: 139px;
			left: 0;
			right: 0;
			background-color: #fff;	
			padding: 0px; 
		}
		.header-menu li {
			float: none;
			width: 100%;
			border-top: 1px solid #d4ecff;
			border-bottom: 1px solid #329CED;
		}
		.header-menu li a {
			padding: 4px;
			color: #0165bb; 
		}
		.header-menu li a:hover {
			background: #ddd;
			color: #fff;
			border: none; 
		}
		.showmenu {
			display: block;
			float: right;
			margin-right: 10px;
			width: 30px;
			margin-top: 6px;
		}
			.showmenu hr {
				margin: 6px;
				border: 1px solid #fff;
			}
		.menu-show .header-menu {
			max-height: 500px; 
		} 
	}
	@media (max-width: 736px) {
		.header-menu {
			top: 138px;
			height: 199%;
		}
	}
	@media (max-width: 733px) {
		.header-menu {
			top: 138px;
			height: auto;
		}
	}
	@media (max-width: 667px) {
		.header-menu {
			height: 171%;
		}
	}
	@media (max-width: 640px) {
		.header-menu {
			height: 160%;
		}
	}
	@media (max-width: 568px) {
		.header-menu {
			height: 131%;
		}
	}
	@media (max-width: 414px) {
		.header-menu {
			height: auto;
		}
	}
	@media (max-width: 375px) {
		.header-menu {
			top: 131px;
		}
	}
	@media (max-width: 360px) {
		.header-menu {
			top: 128px;
		}
	}
	@media (max-width: 320px) {
		.header-menu {
			top: 119px;
		}
	}

/*??頛芣*/
	@media (max-width: 1024px) {
			.slider_container {
				margin-bottom: 7%;
			}
		}
	@media (max-width: 812px) {
		.slider_container {
			display: none;
		}
	}

/*2*/
	/*table-1-1*/
	@media (max-width: 812px) {
		.table-rwd-top {
			margin-top: 135px;
		}
		.table-1-1 {
			width: 100%;
			height:auto;
			display: block;
			margin-left: 0;
		}
		.box-style-1{
			box-shadow:none; 
			border-radius: 0;
		}
				.index-content-1 {
					width: 63%;
					line-height: 150%;
				}

			.index-ab-btm-right {
				width: 34%;
			}
	}
	@media (max-width: 811px) {
			.index-content-1 {
				width: 93%;
				margin-left: 6%;
				margin-top: 0;
			}
		.index-ab-img-2 {
			display: none;
		}
	}
	@media (max-width: 768px) {
		.index-ab-2 {
			margin: 1%;
		}
		.index-ab-btm-left {
			width: 51%;
		}
			.index-ab-btm-left iframe {
				height: 155px;
			}
		.index-ab-btm-right {
			width: 46%;
		}
	}
	@media (max-width: 667px){
		.index-ab-btm-left {
				width: 100%;
				padding:0 3% 2%;
			}
				.index-ab-btm-left iframe {
					width: 100%;
					height: 165px;
				}
			.index-ab-btm-right {
				width: 100%;
			}
				.index-content-2 {
					line-height: 150%;
				}
					.index-content-2 p {
						margin:0 3% 2%;
					}
					.index-contact-img {
						border: 1px solid #e9e9e9;
						margin:0 3% 2%;
					}
	}
	@media (max-width: 568px){
			.index-ab-top-left {
				width: 100%;
			}
				.index-ab-img-3-1 {
					display: block;
					width: 100%;
					padding:0 3% 2%;
				}
				.index-content-1 {
					width: 100%;
					margin: 0;
					padding:0 3% 2%;
				}
			.index-ab-top-right {
				display: none;
			}
	}
	@media (max-width: 568px){
		.table-1-1 p{
			font-size: 18px;
		}
	}
	@media (max-width: 360px){
		.table-rwd-top {
			margin-top:120px;
		}
	}
	
	/*table-1-2*/
	@media (max-width: 812px){
			.table-1-2{
				display: block;
				float: none;
				width: 100%;
				margin-right: 0;
			}
			.box-style-2{
				box-shadow:none; 
				border-radius: 0;
			}
				.side-menu {
					display: inline-block;
					width: 39%;
					margin: 0 7% 0 0;
					padding:0 0 0 7%;
				}

		}
		@media (max-width: 768px) {
			.side-menu {
					padding:0 3%;
				}
		}

		@media (max-width: 568px) {
			.side-menu {
				display:block;
				width: 100%;

			}
		}
		
/*3*/ /*4*/
	@media (max-width: 1024px) {
		.title-style-2 {
			width: 72%;
		}
		.trapezoid p{
			right: -186%;
		}
		.trapezoid img{
			bottom: 32px;
		}
	}
	@media (max-width: 812px) {
		.course-1-3 {
			height: 225px;
		}
			.title-style-2 {
				width: 90%;
				letter-spacing: 0;
			}
		.outlink-1-3 {
			box-shadow: 6px 6px 4px #ccc;
			height: 120px;
		}
			.trapezoid {
				border-top: 120px solid #F6F0EA;
				border-right: 38px solid transparent;
			}
				.trapezoid img {
					bottom: 30px;
	    			left: 10px;
				}
				.trapezoid p{
					font-size: 26px;
					right: -179%;
					bottom: 21px;
				}
			.bookmark {
				font-size: 16px;
			}
	}
	@media (max-width: 768px) {
		.section-wrap {
			margin: 0 4%;
		}
			.title-style-1 {
				padding-top: 0;
			}
		.table-1-3 {
			margin: 0;
		}
		.rwd-m {
			margin: 1%;
		}
			.course-rwd {
				width: 100%;
			}
				.course-1-3 {
					height: auto;
					padding: 2% 20px 2% 10px;
					margin-bottom: 3%;
				}
					.course-1-3 h2 {
						margin-bottom: 0;
					}
				.outlink-1-3 {
					height: 104px;
				}
					.trapezoid {
						border-right: 31px solid transparent;
						border-top: 104px solid #F6F0EA;
					}
						.trapezoid img {
							bottom: 25px;
							left: 7px;
						}
						.trapezoid p {
							right: -171%;
							font-size: 23px;
						}
					.bookmark {
						font-size: 13px;
						height: 36px;
					}
					.bookmark:before{
						border: 18px solid;
						border-color: transparent #ffc83d transparent transparent;
					}
	}
	@media (max-width: 736px) {
		.trapezoid  {
		    border-right: 40px solid transparent;
		}
		.trapezoid p {
			right: -218%;
			font-size: 23px;
		}	
	}
	@media (max-width: 712px) {
		.trapezoid  {
		    border-right: 30px solid transparent;
		}
		.trapezoid p {
			right: -173%;
			font-size: 21px;
		}	
	}
	@media (max-width: 667px) {
		.course-1-3 {
			letter-spacing: 1px;
		}

		.outlink-1-3 {
			height: 95px;
		}
			.trapezoid {
				border-right: 33px solid transparent;
				width: 56%;
				border-top: 95px solid #F6F0EA;
			}
				.trapezoid img {
					bottom: 21px;
				}
				.trapezoid p {
				    font-size: 20px;
					letter-spacing: 1px;
					right: -154%;
					bottom: 16px;
				}
			.bookmark {
			    width: 50%;
				height: 30px;
				line-height: 31px;
				top: 14%;
				left: 56%;
			}
			.bookmark:before {
	    		border: 15px solid;
	    		border-color: transparent #ffc83d transparent transparent;
			}
	}
	@media (max-width: 640px) {
		.trapezoid p {
			font-size: 18px;
		}
	}
	@media (max-width: 568px) {
		.trapezoid {
			border-right: 28px solid transparent;
		}
			.trapezoid img {
				bottom: 31px;
			}
			.trapezoid p {
				right: -152%;
				font-size: 17px;
			}
	}
	@media (max-width: 414px) {
		.outlink-1-3 {
			height: 70px;
		}
			.trapezoid {
				width: 66%;
				border-top: 70px solid #F6F0EA;
				border-right: 22px solid transparent;
			}
				.trapezoid img {
					bottom: 17px;
					left: 5px;
				}
				.trapezoid p {
					font-size: 10px;
					right: -107%;
					bottom: 10px;
				}

			.bookmark{
				left:57%;
				font-size: 10px;
				box-shadow: none;
			}
	}
	@media (max-width: 375px) {
		.trapezoid p {
			line-height: 1.2;
			width: 125%;
		}
		.bookmark {
			height: 22px;
			line-height: 22px;
			top: 9%;
			width: 52%;
		}
		.bookmark:before {
			border: 11px solid;
			border-color: transparent #ffc83d transparent transparent;
		}
	}
	@media (max-width: 360px) {
		.title-style-2 {
			width: 91%;
		}
		.bookmark {
		    width: 55%;	
		}
	}
	@media (max-width: 320px) {
		.course-1-3 {
			padding: 4% 9%;
		}
		.outlink-1-3 {
		    height: 60px;
		}
			.trapezoid {
			    width: 81%;
			    border-right: 25px solid transparent;
				border-top: 60px solid #F6F0EA;
			}
				.trapezoid p {
			    	width: 123%;
	    			right: -86%;
					bottom: 3px;

				}
				.trapezoid img {
			    	bottom: 14px;
				}
			.bookmark{
				width: 60%;
				top: 6%;
			}
	}
/*footer*/




/*index page end*/

/*about start*/
	@media (max-width: 812px) {
		.container {
			margin: 0;
		}
			.about-info-1-1 {
				width: 100%;
			}
			.about-img-1 {
				display: none;
			}
		.about-info-2 {
			width: 53%;
		}
		.about-info-3 {
			width: 45%;
		}	
	}
	@media (max-width: 768px) {
		.about-info-2 {
			width: 47%;
			line-height: 1.5;
		}
		.about-info-3 {
			width: 51%;
		}
	}
	@media (max-width: 768px) {
		.about-info-2 {
			width: 43%;
		}
		.about-info-3 {
			width: 55%;
		}
	}	
	@media (max-width: 568px) {	
		.page-wrap {
			padding:0 4% 0;
		}
			.about-img-1-1{
				display: block;
				width: 100%;
			}
			.about-info-2,
			.about-info-3{
				display: block;
				width: 100%;
			}
			.about-info-2 {
				padding-left: 4%;
			}
				.about-info-2 img {
					width: 100%;
					margin: 2% 0;
				}
			.about-info-3 {
				margin-left: 0;
				border-bottom: 3px dashed #ddd;
				padding-bottom: 3%;
			}
	}
	@media (max-width: 414px) {	
			.about-info-1 p,
			.about-info-2 li{
				font-size: 18px;
			}
		.about-info-2 {
			padding-left: 5%;
		}
	}
/*about end*/

/*evaluation start*/
	@media (max-width: 1024px) {
			.ev-pc-text {
				display:none;
			}
			.ev-rwd-text {
				display: block;
			}
	}
	@media (max-width: 768px) {
		.ev-page-wrap {
			padding: 0 4%;
		}
			.evaluation-text {
				width: 98%;
				margin-left: 0;
			}
				.evaluation-info {
					width: 100%;
					margin: 1% 0;
					padding: 0;
					min-height: auto;
				}
				.evaluation-img {
					width: 100%;
				}
					.evaluation-img img {
						margin-right: 7%;
					}
			.evaluation-bgimg {
				display: none;	
			}
	}
	@media (max-width: 414px) {
		.evaluation-info p {
			margin-left: 0;
		}
	}
/*evaluation end*/

/*course start*/
	/*course-4*/
	@media (max-width: 767px) {
		.course-content-wrap {
			width: 98%;
		}		.title-style-4 {
					line-height: 1.5;
					margin-top: 8%;
				}
				.course-content-1 p {
					margin-top: 3%;
				}
		.course-menu-wrap {
			margin-left: 0;
			width: 1%;
		}
		.course-menu {
			height: auto;
			max-height: 0;
			overflow:hidden;
			-webkit-transition: max-height 0.9s;
			-o-transition: max-height 0.9s;
			transition: max-height 0.9s;
			position: absolute;
			z-index: 90;
			width: 100%;
			top: 116px;
			right: 0;
			left: 0;
			padding: 0px; 
			border-top: none;
		}
		.course-menu li {
			width: 100%;
		}
		.course-bg-img {
			display: none;
		}
		.course-showmenu {
			display: block;
			width: 150px;
			height: 45px;
			color: #428bca;
			background: #fff;
			border: 2px solid #428bca;
			border-radius: 3px;
			text-align: center;
			font-size: 20px;
			float: right;
			padding: 10px;
			background-color: #bdd4e7; 
			background-image: linear-gradient(315deg, #c2e4ff 0%, #f0f5f8 74%);
			position: absolute;
			right: 20px;
		}
		.course-menu-show .course-menu {
			max-height: 500px;
		} 
	}
	@media (max-width: 736px) {
		.course-menu {
			top: 117px;
		}
	}
	@media (max-width: 414px) {
	.course-content-wrap {
		width: 97%;
	}
			.course-content-wrap p,
			.course-content-wrap span{
				font-size: 18px;
			}
			.title-style-4 {
				margin-top: 14%;
				font-size: 25px;
			}
			.course-content-2 ol li,
			.course-content-3 ol li,
			.course-content-3 ul li,
			.course-content-5 ol li {
				font-size: 18px;
				line-height: 2;
			}
	.course-content-2 {
		display: block;
		width: 100%;
	}
	.course-content-2 p{
		line-height: 1.5;
	}
		.text-pc {
			display: none;
		}
		.text-rwd {
			width: 100%;
			display: block;
		}
		.img-pc {
			display: none;
		}
		.img-rwd {
			width: 100%;
			display: block;
		}
		.course-content-2-1 {
			width: 100%;
			margin: 2% 0;
		}
	}
	@media (max-width: 375px) {
		.course-menu {
			top: 107px;
		}
	}
	@media (max-width: 360px) {
			.title-style-4 {
				margin-top: 15%;
			}
	}
	@media (max-width: 320px) {
			.title-style-4 {
				margin-top: 18%;
			}
		.course-menu {
		    top: 99px;
		}
	}
	
	/*course-1*/
	@media (max-width: 812px) {
		.course-content-4 {
			min-height: 196px;
		}
	}
	@media (max-width: 568px) {
		.course-content-4 {
			width: 100%;
			min-height: auto;
			padding: 4%;
		}
				.pc-course-title {
					display: none;
				}
				.rwd-course-title {
					display: inline-block;
				}
	}
	@media (max-width: 414px) {
		.title-style-5 {
			margin-top: 3%;
			line-height: 1.2;
		}
	}
	@media (max-width: 375px) {
		.course-content-4 {
			margin: 3% 1%;
		}
	}
	
	
	/*course-3*/
	@media (max-width: 414px) {
			.course3-img {
				width: 90%;
			}
			.course-content-5-1 {
				width: 90%;
				margin: 2% 0;
			}
	}
/*course end*/

/*teacher start*/
	@media (max-width: 1366px) {
		.teacher-info-1 {
			font-size: 17px;
		}
	}
	@media (max-width: 812px) {	
		.teacher-card img {
			width: 28%;
		}
			.teacher-info-1 {
				font-size: 16px;
				width: 70%;
			}
				.teacher-info-1 li{
					margin-bottom: 2%;
				}
	}
	@media (max-width: 768px) {	
		.teacher-info-1 {
			font-size: 15px;
		}
	}	
	@media (max-width: 736px) {	
		.teacher-card {
			display: block;
			width: 100%;
			padding: 3%;
			margin: 3% 0;
		}
			.teacher-card img {
				width: 31%;
			}
			.teacher-info-1 {
				font-size: 18px;
				width: 67%;
			}
				.teacher-info-1 li {
				    margin-bottom: 3%;
				}
	}
	@media (max-width: 414px) {	
		.teacher-info-1 {
			font-size: 16px;
		}
	}
	@media (max-width: 375px) {	
		.teacher-card img {
			width: 25%;
		}
		.teacher-info-1 {
			width: 73%;
		}

	}
/*teacher end*/

/*teacher-1 start*/
	@media (max-width: 812px) {	
		.teacher-img {
			width: 22%;
		}
		.teacher-info-2 {
			width: 30%;
		}
	}
	@media (max-width: 768px) {	
		.teacher-img {
			width: 33%;
		}
		.teacher-info-2 {
			width: 61%;
			margin-left: 2%;
		}
		.teacher-info-3 {
			width: 100%;
			border-left: none;
			padding: 1% 0;
		}
	}
	@media (max-width: 414px) {	
		.teacher-img {
			width: 100%;
			max-width: 300px;
		}
		.teacher-info-2 {
			width: 100%;
		}
			.teacher-info-3 p {
				padding: 1% 0;
			}
	}
/*teacher-1 end*/

/*discuss start*/
	@media (max-width: 812px) {
		.table-wrap {
			padding: 0 2%;
		}
	}
	@media (max-width: 767px){
		.discuss-form {
			box-shadow: none;
		}
	}
	@media (max-width: 568px) {
		.table-wrap {
			overflow-x: auto;
			padding: 0;
		}	
		.discuss-form {
			width: 100%;
		}
	}
/*discuss end*/

/*notice-board cooperation web-link contact start*/
	@media (max-width: 414px) {
		.notice-table { /*?梁*/
			letter-spacing: 1px;
		}
	}
	/*contact*/
	@media (max-width: 768px) {
			.map iframe {
				height: 550px;
			}
	}
	@media (max-width: 667px) {
			.map iframe {
				height: 200px;
			}
	}
	@media (max-width: 414px) {
		.map iframe {
			height: 418px;
		}
	}
	@media (max-width: 375px) {
		.map iframe {
			height: 380px;
		}
	}
	@media (max-width: 360px) {
		.map iframe {
			height: 360px;
		}
	}
/*notice-board cooperation web-link contact end*/