/*--全域設定------------------------*/
* {
	max-width: 100%;
	user-select: none;
	font-family: "微軟正黑體";
}
html, body {
	height: 100%;
	width: 100%;
}
nav {
	position: fixed;
	width: 100%;
}
#wrapper {
	height: calc(90vh);
	position: relative;
	padding-top: calc(10vh);/*1*/
}
.showmobile{display: none;}
.showmobile_flex{display: none;}
.showmobile_grid{display: none;}
.showdesktop{display: block;}
@media (max-width: 767px) {
	.showmobile{display: block;}
	.showmobile_flex{display: flex;}
	.showmobile_grid{display: grid !important;}
	.showdesktop{display: none !important;}
}
/*-漸變特效*/
* {
	transition-duration: 0.3s;
}
body {
	animation-duration: 0.6s;
	animation-name: MoreClear;
}
@keyframes MoreClear {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
@media (min-width: 576px) and (max-width: 767px) {
	* {
		font-size: 1.2rem !important;
	}
	footer {
		padding:50px; 
	}
}
/*--整個導覽列----------------------*/
nav {
	background-color: rgb(15, 76, 117);
	color: #fff;
	font-family: "微軟正黑體";
	height: calc(10vh);/*1*/
	position: fixed;
	z-index: 100;
	width: 100%;
	top:0;
}
#innernav {
	margin: 0 auto;
	width: 90%;	
	height: 90%;
	top:5%;
	position:relative;
}
#innernav ul {
	float: right;
	height: 100%;
	top:5%;
}
#innernav ul li{
	float: left;
	width: calc(100vh / 7);
	text-align: center;
	line-height: calc(10vh);
	height: 100%;
	letter-spacing: 2px;
}
#innernav ul li:hover {
	transition: transform ease 0.2s;
	transform: translateY(-5%);
}
#mobilelogo {
	display: none;
}
/*-標題旁圖片*/
#innernav #logo {
	/* position: absolute; */
	top:0;
	bottom: 0;
	margin: auto;
	display: block;
}
/*-標題*/
#title {
	top:0;
	bottom: 0;
	margin: auto;
	position: absolute;
	line-height: 10vh;
	left: 0px;
	font-size: 24px;
	font-weight: 800;
	letter-spacing: 3px;
	display: flex;
	flex-direction: row;
	justify-content: space-around;
}

.icon{
	top:0;
	bottom: 0;
	margin: 0px 5px 15px 0px;
	line-height: 10vh;
	left: 0px;
	letter-spacing: 3px;
	height: 100%;
}

/*-按鈕*/
#m_navbtn {
	display: none;
	width: 35px;
	height: 50px;
	background-color: rgb(15, 76, 117);
	cursor: pointer;
}
#sand-icon{
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 5px;
	background-color: #fff;
	margin: 3px

}
/* 手機與平板的RWD */
@media (max-width: 281px) {
	html, body, nav {
		width: calc(100vh) !important;
	}
	#title { 
		/* letter-spacing: 1px !important; */
	}
	.icon{
		display: none;
	}
}

@media (max-width: 767px) {
	/*導覽列(id=formobile,寫在navbar.js)*/
	nav {
		background-color: rgb(15, 76, 117);
	}
    #innernav ul {
    	padding: 20px 0;
    	height: auto;
    	position: fixed;
    	top:-100%;
    	width: 90%;
    	left: 5%;
    	transition-duration: 1s;
    	z-index: 1;
		background-color: rgb(15, 76, 117);
    }
    #innernav ul li{
    	display: block;
    	width: 100%;
    	height: auto;
    	line-height: 250%;
    	letter-spacing: 3px;
		/* color:  */
    }
    #innernav #logo {
    	display: none;
    }
    /*標題*/
    #title {
    	font-size: 18px;
    	letter-spacing: 4px;
    	color: #fff;
    	left: 50px; /*10*/
    	font-weight: bold;
    	width: calc(100% - 50px); /*10*/
    	text-align: justify;
    	letter-spacing: 7px;
		display: block;
    }
	.icon{
		display: none;
	}
    #title:after {
    	content: '';
    	display: inline-block;
    	width: 100%;
    }
	.icon::after{		
		display: none;
	}
    /*按鈕*/
    #m_navbtn {
    	display: flex;
    	position: absolute;
		flex-direction: column;
		justify-content: center;
		align-items: center;
    	height: 40%;
    	top:30%;
    	left: 25px;
    }
}

@media (min-width:768px) and (max-width: 992px) {
	/*導覽列(id=formobile,寫在navbar.js)*/
	nav {
		background-color: rgb(15, 76, 117);
	}
    #innernav ul {
    	padding: 20px 0;
    	height: auto;
    	position: fixed;
    	top:-100%;
    	width: 90%;
    	left: 5%;
    	transition-duration: 1s;
    	z-index: 1;
		background-color: rgb(15, 76, 117);
    }
    #innernav ul li{
    	display: block;
    	width: 100%;
    	height: auto;
    	line-height: 250%;
    	letter-spacing: 3px;
    }
    #innernav #logo {
    	display: none;
    }
    /*標題*/
    #title {
    	font-size: 18px;
    	letter-spacing: 4px;
    	color: #fff;
    	left: 50px; /*10*/
    	font-weight: bold;
    	width: calc(100% - 50px); /*10*/
    	text-align: justify;
    	letter-spacing: 7px;
		display: block;
    }
	.icon{
		display: none;
	}
    #title:after {
    	content: '';
    	display: inline-block;
    	width: 100%;
    }
	.icon::after{		
		display: none;
	}
    /*按鈕*/
    #m_navbtn {
    	display: flex;
    	position: absolute;
		flex-direction: column;
		justify-content: center;
		align-items: center;
    	height: 40%;
    	top:30%;
    	left: 25px;
    }
}

/*--Bootstrap幻燈片---------------*/
.carousel-item{
	height: 750px;
}
@media (max-width: 767px) {
	#carouselExampleIndicators {
		height: 350px;
		padding-bottom: 70px;
	}
	.carousel-inner, .carousel-item, .carousel-item>img {
		height: 100%;
	}
	.carousel-item>img {
		width: auto;
	}
	#index_textbox {
		padding:0 0 80px 0 !important;
		width: 97%;
		height: auto !important;
	}
	#index_textbox>#mobile {
		color: rgb(47,76,20);
		display: grid;
		grid-template-columns: 50% 50%;
		grid-column-gap: 4%;
		grid-row-gap: 70px;
		width: 92%;
		padding-left: 2%;
		/*2+92+4(+2)*/
	}
	#index_textbox>#mobile>div {
		background-size: cover;
	}
}
/*--左右圖文排版區-----------------*/
/*-切版設定*/
#index_textbox {
	display: flex;
	margin: calc(15vh) auto 0 auto;
	height: auto ;
	padding: 0 10%;
}
#index_textbox>#left, #index_textbox>#right {
	width: 50%;
	display: inline-block;
	height: 100%;
}
/*左邊*/
#index_textbox>#left {
	padding: 5%;
	background-color: white;
}
/*右邊*/
#index_textbox>#right {
	float: right;
	padding: 7%;
}
/*-文字設定*/
#index_textbox>#left {
	color: rgb(27, 38, 44);
	text-align: center;
	line-height: 250% ;
}
#index_textbox>#left>#lefttitle {
	font-size: 60px;
	font-weight: bold;
	letter-spacing: 10px;
}
#index_textbox>#left>#leftCH{
	line-height: 200% /*配合首字放大*/;
	font-size: 16px;
	padding: 0 12%;
	text-align: justify;
}
#index_textbox>#left>#leftCH::first-letter{
	font-size: 200%; /*首字放大*/
}
/*-右邊幻燈片區*/
#index_textbox>#right>#rightimg {
	width: 95%;
	height: 95%;
	background-size: 100% 100%;
	float: left;
	transition-duration: 0.5s;
}
#index_picbox_radios {
	position: relative;
	left: 13px;
	height: 80px;
	top: calc(95% - 80px);
}

@media (max-width: 480px){
	#index_textbox{
		display : flex;
		flex-direction: column-reverse;
	}
	#index_textbox>#left, #index_textbox>#right {
		width: 100%;
		display: inline-block;
		height: 100%;
	}
}

@media (max-width: 767px){
	#index_textbox{
		display : flex;
		flex-direction: column-reverse;
	}
	#index_textbox>#left, #index_textbox>#right {
		width: 100%;
		display: inline-block;
		height: 100%;
	}
}

/*--頁尾區------------------------*/
footer {
	background-color: rgb(15, 76, 117);
	color: #fff;
	margin: calc(10vh) auto 0 auto;
	height: calc(10vh);
	padding: 10%;
	position: relative;
}
footer>#footer_left {
	line-height: 250%;
	letter-spacing: 6px;
	display: inline-block;
}
footer>#footer_right {
	height: 100%;
	float: right;
}
footer>#footer_right img {
	max-height: 100%;
	max-width: 100%;
}
@media (max-width: 480px) {
	footer {
		padding: 10% 10px !important;
	}
}
@media (max-width: 767px) { 
	footer>#footer_left {
		max-width: 100%;
		padding: 0;
		margin: 0;
		display: block;
		letter-spacing: 4px;
	}
	footer {
		font-size: 14px;
		margin: calc(5vh) 0 0 0;
		padding: 10% 5%;
		height: auto !important;
	}
}
/*--回最上按鈕---------------------*/
#btn_top {
	position: fixed;
	width: 50px;
	left: calc(100% - 80px);
	top:92%;
	z-index:3;
}

@media (min-width:768px) and (max-width: 992px) {
	/*nav*/
	nav {
		width: 100%; 
	}
	nav>#innernav>a>.icon {
		display: none;
	}
	/*index幻燈片*/
	.carousel-indicators {
		width: 100%;
		margin: 0 auto;
	}
	#index_textbox {
		padding: 0;
	}
	#index_textbox>#left, #index_textbox>#right {
		padding: 0;
	}
	#index_textbox>#right>#rightimg {
		width: 80%;
	}
}
@media (min-width: 993px) and (max-width: 1024px) {
	/*nav*/
	* {
		font-size: 2em;
	}
	#innernav > #formobile > li {
		width: 120px;
	}
	#innernav > a > #title {
		display: none;
	}
	#innernav > a > .icon {
		display: none;
	}
	nav > #innernav > #logo {
		width: 100px;
	}
	/*index.html*/
	#index_textbox {
		padding: 0 5%;
		height: calc(40vh);
	}
	#index_textbox>#left, #index_textbox_right {
		padding: 3%;
	}
	#index_news {
		margin: 0 auto 0 auto;
	}
	/*footer*/
	footer {
		margin: 0 auto;
		height: auto !important;
	}
}
/* 師資 */

/* 師資的左右邊 */

/*-切版設定*/
#center_facualty_textbox {
	display: flex;
	margin: calc(15vh) auto 0 auto;
	height: auto ;
	padding: 0 10%;
}
#center_facualty_textbox>#left{
	width: 40%;
	display: inline-block;
	height: 100%;
} 
#center_facualty_textbox>#right {
	width: 60%;
	display: inline-block;
	height: 100%;
}
/*左邊*/
#center_facualty_textbox>#left {
	padding: 5%;
	background-color: white;
}
/*右邊*/
#center_facualty_textbox>#right {
	float: right;
	padding: 7%;
}
/*-文字設定*/
#center_facualty_textbox>#left {
	color: rgb(27, 38, 44);
	text-align: center;
	line-height: 250% ;
}
#center_facualty_textbox>#left>#lefttitle {
	font-size: 60px;
	font-weight: bold;
	letter-spacing: 10px;
}
#center_facualty_textbox>#left>#leftCH{
	line-height: 200% /*配合首字放大*/;
	font-size: 16px;
	padding: 0 12%;
	text-align: justify;
}
#center_facualty_textbox>#left>#leftCH::first-letter{
	font-size: 200%; /*首字放大*/
}


@media (max-width: 480px){
	#center_facualty_textbox{
		display : flex;
		flex-direction: column;
	}
	#center_facualty_textbox>#left, #center_facualty_textbox>#right {
		width: 100%;
		display: inline-block;
		height: 100%;
	}
}

@media (max-width: 767px){
	#center_facualty_textbox{
		display : flex;
		flex-direction: column;
	}
	#center_facualty_textbox>#left, #center_facualty_textbox>#right {
		width: 100%; 
		display: inline-block;
		height: 100%;
	}
}



.teacher_title{
	color: rgb(15, 76, 117);
	font-weight: bold;
	letter-spacing: 2px;
	margin-bottom: 10px;
	font-size: large;
}
.teacher_main{
	letter-spacing: 2px;
	margin-bottom: 30px;
}
.teacher_introduction{
	letter-spacing: 2px;
	text-align: left;
	font-size: large;
}
.teacher_img{
	text-align: left !important;
}
.teacher_img > img{
	width: 340px;
	height: auto;
	max-width: 100%;
}
/* 合作單位 */
.block{
	width: 100%;
	height: 15vw;
	text-align: center;
	display: flex;
    justify-content: center;
    align-items: center;
	border-style: solid;
  	border-color: rgb(15, 76, 117);
	border-width: 3px;
	margin-bottom: 20px;
}

.block .left .img-wrap{
	max-width: 10vw;
	width: 100%;
	margin: 0 auto;
}
.block > .left, .right{
	padding: 30px;
}
.block .left .img-wrap > img{
	width: 100%;
}
.block .right > h3{
	font-weight: 700;
}
.all_block{
	padding: 5%;
	display: grid;
  	justify-content: center;
  	align-items: center;
}

.block .right>p{
	padding: 3px 0px;
	margin: 0;
}
/* 聯絡我們 */
.contact_block{
	text-align: left;
	display: flex;
    justify-content: center;
    align-items: center;
	border-style: solid;
  	border-color: rgb(15, 76, 117);
	border-width: 3px;
	margin-bottom: 20px;
}
.contact_block #Left .img-wrap > img {
	/* position: absolute; */
	width: 200px;
	height: 230px;
	object-fit: cover;
}
.contact_block #Right{
	padding: 5%;
}
.contact_block #Right>h5{
	display: inline-block;
	padding-bottom: 5px;
	border-bottom: solid 2px rgb(15, 76, 117);
}
.contact_block #Right>p{
	padding: 3px 0px;
	margin: 0;
}