/*modify by pekey 20190523*/
@charset "utf-8";
/* CSS Document */

/*------------------------------------------CSS Setting Start-------------------------------*/

/*================*/
/*-- loading --*/
/*================*/

.loading {
 	position: fixed;
    top: 0; 
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999999;
    background: #FFF;
	text-align:center;
	
	/*新增by pekey 20171211*/
	padding-top:250px;
 } 
 
	
	/*Loading畫面CSS開始*/
	#circularG{
		position:relative;
		width:58px;
		height:58px;
		margin: auto;
	}
	
	.circularG{
		position:absolute;
		background-color:rgb(201,9,21);  /*此為Loding的點點顏色*/
		width:14px;
		height:14px;
		border-radius:9px;
			-o-border-radius:9px;
			-ms-border-radius:9px;
			-webkit-border-radius:9px;
			-moz-border-radius:9px;
		animation-name:bounce_circularG;
			-o-animation-name:bounce_circularG;
			-ms-animation-name:bounce_circularG;
			-webkit-animation-name:bounce_circularG;
			-moz-animation-name:bounce_circularG;
		animation-duration:1.1s;
			-o-animation-duration:1.1s;
			-ms-animation-duration:1.1s;
			-webkit-animation-duration:1.1s;
			-moz-animation-duration:1.1s;
		animation-iteration-count:infinite;
			-o-animation-iteration-count:infinite;
			-ms-animation-iteration-count:infinite;
			-webkit-animation-iteration-count:infinite;
			-moz-animation-iteration-count:infinite;
		animation-direction:normal;
			-o-animation-direction:normal;
			-ms-animation-direction:normal;
			-webkit-animation-direction:normal;
			-moz-animation-direction:normal;
	}
	
		#circularG_1{
			left:0;
			top:23px;
			animation-delay:0.41s;
				-o-animation-delay:0.41s;
				-ms-animation-delay:0.41s;
				-webkit-animation-delay:0.41s;
				-moz-animation-delay:0.41s;
		}
		
		#circularG_2{
			left:6px;
			top:6px;
			animation-delay:0.55s;
				-o-animation-delay:0.55s;
				-ms-animation-delay:0.55s;
				-webkit-animation-delay:0.55s;
				-moz-animation-delay:0.55s;
		}
		
		#circularG_3{
			top:0;
			left:23px;
			animation-delay:0.69s;
				-o-animation-delay:0.69s;
				-ms-animation-delay:0.69s;
				-webkit-animation-delay:0.69s;
				-moz-animation-delay:0.69s;
		}
		
		#circularG_4{
			right:6px;
			top:6px;
			animation-delay:0.83s;
				-o-animation-delay:0.83s;
				-ms-animation-delay:0.83s;
				-webkit-animation-delay:0.83s;
				-moz-animation-delay:0.83s;
		}
		
		#circularG_5{
			right:0;
			top:23px;
			animation-delay:0.97s;
				-o-animation-delay:0.97s;
				-ms-animation-delay:0.97s;
				-webkit-animation-delay:0.97s;
				-moz-animation-delay:0.97s;
		}
		
		#circularG_6{
			right:6px;
			bottom:6px;
			animation-delay:1.1s;
				-o-animation-delay:1.1s;
				-ms-animation-delay:1.1s;
				-webkit-animation-delay:1.1s;
				-moz-animation-delay:1.1s;
		}
		
		#circularG_7{
			left:23px;
			bottom:0;
			animation-delay:1.24s;
				-o-animation-delay:1.24s;
				-ms-animation-delay:1.24s;
				-webkit-animation-delay:1.24s;
				-moz-animation-delay:1.24s;
		}
		
		#circularG_8{
			left:6px;
			bottom:6px;
			animation-delay:1.38s;
				-o-animation-delay:1.38s;
				-ms-animation-delay:1.38s;
				-webkit-animation-delay:1.38s;
				-moz-animation-delay:1.38s;
		}
		
		
		
		@keyframes bounce_circularG{
			0%{
				transform:scale(1);
			}
		
			100%{
				transform:scale(.3);
			}
		}
		
		@-o-keyframes bounce_circularG{
			0%{
				-o-transform:scale(1);
			}
		
			100%{
				-o-transform:scale(.3);
			}
		}
		
		@-ms-keyframes bounce_circularG{
			0%{
				-ms-transform:scale(1);
			}
		
			100%{
				-ms-transform:scale(.3);
			}
		}
		
		@-webkit-keyframes bounce_circularG{
			0%{
				-webkit-transform:scale(1);
			}
		
			100%{
				-webkit-transform:scale(.3);
			}
		}
		
		@-moz-keyframes bounce_circularG{
			0%{
				-moz-transform:scale(1);
			}
		
			100%{
				-moz-transform:scale(.3);
			}
		}
	/*Loading畫面CSS結束*/

.loading_tit{
	padding:20px 0px 0px 15px;
	display:inline-block;
	font-size:16px;
	font-weight:bold;
	color:#333;
	font-family:微軟正黑體;
	text-align:center;
}

/*/////////////////////////////////////////////////////////*/
/*-------版頭--------*/
/*/////////////////////////////////////////////////////////*/

.header {
	position: fixed;
	top: 0;
	z-index: 999;
	width: 100%;
	transition: 0.3s ease all;
	background-color: #fff;
}

/*浮動*/
/* .header.fixed{
	box-shadow: 0px 0px 20px -1px rgba(0,0,0,0.3);
	transition: 0.3s ease all;
	padding: 0px;
	background-color: #fff;
} */


	.hearder_topArea {
		padding: 20px 0;
	}
		.hearder_topArea > .wrap {
			
			width: 960px;

			position: relative;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

			.headerRight{
				display: flex;
				align-items: center;
				justify-content: space-between;
			}
				.header_signBtn{
					/* width: 150px; */
					text-align: center;
					
				}

					.header_signBtn_mobile{
						display: none;
						position: absolute;
						right: 60px;
						/* top: 14px; */
					}

						.header_signBtn_mobile a{
							display: block;
							text-decoration: none;
						}

							.header_signBtn_mobile .icon {
								width: 30px;
								margin: 0 auto;
								margin-bottom: 7px;
							}
							

								.header_signBtn_mobile .icon img{
									width: 100%;
									height: auto;
								}


						.header_signBtn_mobile span{
							color: #000;
							font-size: 12px;
							font-weight: bold;
						}

				.header_signBtn a{
					display: block;
					background-color: #7dcdf4;
					border-radius: 5px;
					width: 120px;
					padding: 7px 10px;
					box-sizing: border-box;
				}

				.header_signBtn a:hover{
					text-decoration: none;
					background-color: #1069c4;
				}

					.header_signBtn .icon{
						display: inline-block;
						vertical-align: middle;
						width: 20px;
					}
						.header_signBtn .icon img{
							width: 100%;
							height: auto;
						}

					.header_signBtn span{
						display: inline-block;
						vertical-align: middle;
						color: #ffffff;
						font-size: 15px;
					}

@media (max-width: 990px){
	
	/* .header{
		padding: 5px 0px 0px;
	} */

	/*浮動*/
	/* .header.fixed{
		padding: 5px 0px 0px;
		background-color: rgba(255,255,255,0.8);
	} */

	.header_signBtn_mobile{
		display: block;
		padding-right: 10px;
	}
	
}

@media (max-width: 768px) {

	.hearder_topArea {
		padding: 10px 0;
	}

		.hearder_topArea > .wrap {
			height: 50px;
		}
}

@media (max-width: 640px) {

	.hearder_topArea > .wrap {
		height: 50px;
	}
}

/*PC搜尋區塊------------------------------------------------*/

.search_areaPC{ 
	margin-left: 15px;
	display: flex;
    flex-direction: row;
    align-items: center;
}
	/*搜尋icon*/
	.search_iconPC{
		transition: 0.3s ease all;
	}
		.search_iconPC label{
			position: relative;
			display: block;
		}
			/*.search_iconPC i{
				font-size: 35px;
				line-height: 35px;
				color: #3e3a39;
				display: block;
			}*/
			
			.search_iconPC label{
				position:relative;
				display:block;
				border-radius: 0 5px 5px 0;
				background-color: #7dcdf4;
				padding: 0;
				height: 34px;
				width: 34px;
			}

			.search_iconPC label i{
				display: inline-block;
				vertical-align: middle;
				width: 34px;
				height: 34px;
				font-size: 18px;
				color: #fff;
				text-align: center;
				line-height: 34px;
			}

			.search_iconPC label:before{
				position: absolute;
				content: '';
				background-color: #3e3a39;
				width: 0%;
				height: 1px;
				bottom: -12px;
				left: 0px;
				opacity: 0;
				transition: 0.2s ease all;
			}
			
			
		/*hover*/
		.search_iconPC:hover label{
			opacity: 0.7;
			transition: 0.3s ease all;
		}	

		/* .search_iconPC:hover label div:before{

		} */
		
		
		


.search_inAreaPC{ /*Judy修改20210603*/
	-webkit-transition: top .2s;
	transition: top .2s;
	/* position: absolute; */
	overflow: hidden;
	width: 165px;
	/* display: none; */
	/* top: 90px; 
	right: -20px; */
	/* background: rgba(255, 255, 255, 0.95); */
	box-sizing: border-box;
	padding: 5px 0;
	z-index: 2;
	/* box-shadow: 0 18px 40px rgb(51 51 51 / 20%); */
}

	/*搜尋類別*/
	.search_categoryAreaPC3{
		position: absolute;			
		left: 15px;
		width: 59px;
		z-index: 2;
	}
		.search_categoryAreaPC3 select{
			color: #fff;
			background: #000 url(../office_images/select_arrow_white.webp) no-repeat;
			background-size: 13px;
			background-position: right;
			padding-right: 18px !important;
		}

	.search_inBoxPC{
		position: relative;
		width: 100%;
		box-sizing: border-box;
	}
		.search_inBoxPC input{
			background: transparent;
			border: 0px;
			/*color: #fff;*/
			color: #333;
			font-size: 16px;
			/* font-weight: bold; */
			line-height: 22px;
			height: 34px;
			padding: 5px 7.5px;
			border-radius:	5px 0 0 5px;
			width: 100%;
			border:2px solid #7dcdf4;
		}
		.search_inBoxPC input::placeholder{
			font-size: 14px;
			padding-left: 0;
			letter-spacing:1px;
			color: #aeaeae;
		}

		/* .search_inBoxPC input[type="text"]:focus{
		} */
		
	.search_inBoxPC a{
		z-index: 2002;
		color: #3e3a39;
		position: absolute;
		right: 0px;
		top: 10px;
		text-decoration: none;
	}
		.search_inBoxPC span{
			display:inline-block;
			vertical-align:middle;
		}
		.search_closePC{
			font-size:22px;
			font-weight:lighter;
		}	
		
	
	

/*================================================================*/
/*----- 版頭手機搜尋 -----*/
/*================================================================*/			
       
               

	/*版頭商品搜尋*/
	.header_search_area {
		/* position: absolute; */
		/* right: 7.5%; */
		/* top: 50%; */
		/* -webkit-transform: translateX(0%) translateY(-50%); */
		/* transform: translateX(0%) translateY(-50%); */
		/* z-index: 1; */
		display:none;
	}
		#search{
			/*color:#ccc;*/
			color:#777; /*修改by pekey 20170725*/
		}
		@-moz-document url-prefix() { 
			#search{
				color:#ccc;
			}
		}
		.header_search{
			position: relative;
			font-size: 0px;
			background: #fff;
			/* border: solid 1px #b0645b; */
			box-shadow: 0 18px 40px #3333331a;
			/* width: 350px; */
			/* padding-right: 45px; */
			/* border-radius: 5px; */
		}
			.header_search input {
				height: 43px;
				line-height: 43px;
			}
				.header_search input[type='text']  {
					width: 100%;
					border: none;
					/*padding:5px;*//*在IE顯示會擠壓到*/
					font-size: 13px;
					background: #ffffff00;
					padding: 0px 15px;
				}
				.header_search input[type='submit'] {
					position:absolute;
					float:left;
					padding: 0px 0px 6px ;
					display:none;
				}
						
						.header_search label  {
							position: absolute;
							right: 0px;
							top: 0px;
							background: #badde9;
							/* padding:2px 0px 0px 3px; */
							/* border-radius: 0px 3px 3px 0px; */
							width: 38px;
							height: 43px;
						}
						
							.header_search  i{
								font-size: 20px;
								color:#fff;
								margin: 12px 9px;
							}

	
	
	
@media (max-width: 990px){	

	.search_areaPC{
		display:none;
	}
	
	/*版頭商品搜尋*/
	.header_search_area {
		display:block;
	}
	
}



/*================*/
/*-- 手機menu按鍵 --*/
/*================*/
.menu_btn {
	position:absolute;
	/* width:25px; */
	/* top: 12px; */
    right: 0px;
	cursor:pointer;
	display:none;
	z-index: 99;
}

.menu_btn.active {
	top: 24px;
	display: none;
}
	.menu_btn span {
		display:block;
		background-color: #68caf4;
		height: 4px;
		margin: 5px auto;
		transition:0.3s ease all;
		border-radius:3px;
		width: 25px;
	}

	.menu_btn p{
		display: block;
		color: #000;
		font-size: 12px;
		font-weight: bold;
		margin-top: 10px;
	}
		/*點擊*/
		.menu_btn.active span {
			background-color: #68caf4;
		}

		.menu_btn.active span:nth-of-type(1) {
			/*transform: rotate(39deg);
			transform-origin: top left;*/
			width: 100%;
			transform: translateY(13px) rotate(45deg);
		}

		.menu_btn.active span:nth-of-type(2) {
			opacity: 0;
		}

		.menu_btn.active span:nth-of-type(3) {
			/*transform: rotate(-39deg);
			transform-origin: bottom left;*/
			transform: translateY(-5px) rotate(-45deg);
			width: 100%;
		}

@media (max-width: 990px){
	
	/*手機menu按鍵*/
	.menu_btn {
		display:block;
	}
	.menu_btn.active p {
		display: none;
	}
}

@media (max-width: 640px){

	/*手機menu按鍵*/
	/* .menu_btn {
	} */
}

@media (max-width:375px){

	.header_signBtn_mobile {
		right: 50px;
		padding-right: 10px;
	}
		.header_signBtn_mobile span{
			/* display: none; */
		}

		
	.menu_btn p{
		/* display: none; */
	}

}


/*================*/
/*----- logo -----*/
/*================*/
.logo{
	width: 170px;
	/* margin: 0px auto; */
	transition: 0.3s ease all;
	/* float: left; */
	
	animation-name: bounceIn;
	animation-duration: 1.2s;
	animation-fill-mode: both;
	visibility: visible;
	/* padding: 20px 0px; */

	margin: 0px;
}

/*浮動*/
.header.fixed .logo{
	transition: 0.3s ease all;
	width: 170px;
	/* padding: 10px 0px; */
}


	.logo a{
		display: block;
		transition:0.3s ease all;
	}
	
		.logo img{
			width: 100%;
			height: auto; 
		} 
	
	/*hover*/
	.logo a:hover{
		transform: scale(0.9);
		animation: bounceIn;	
	}
	

@media (max-width: 990px){
	.logo{
		transition: 0.3s ease all;
		width: 170px;
    	float: none;
	}
	
	/*浮動*/
	.header.fixed .logo{
		transition: 0.3s ease all;
		/* width: 150px; */
	}
}

@media (max-width: 768px){
	.logo{
		width: 26%;
    	box-sizing: border-box;
	}

	/*浮動*/
	.header.fixed .logo{
		display: table;
		width: 40%;
		max-width: 205px;
	}
	
}

@media (max-width: 640px){
	.logo{
		/* width: 115px; */
		width: 38%;
	}			
}

@media (max-width: 414px){
	.logo{
		width: 40%;
	}			
}


/*================*/
/*----- 主按鍵 -----*/
/*================*/

/* 主按鍵上區 */
.navbar_topArea{
	background-color: #7dcdf4;
}
	.navbar_topArea > .wrap{
		width: 960px;
		margin: 0 auto;
		padding-top: 5px;
	}
	
	


	.navbar_topArea .nav{
		text-align: center;
		/* border-radius: 5px 5px 0 0; */
		width: 240px;
		float: left;
		overflow: hidden;
		box-sizing: border-box;

		width: auto; /*20251117*/
		float: none;
		display: flex;
		flex-grow: 1;
	}

	.navbar_topArea .nav:nth-of-type(4){
		letter-spacing: 0px;
	}
		.navbar_topArea .nav a{
			font-size: 18px;			
			font-weight: bold;
			display: block;
			padding: 10px 5px 10px;
			color: #333;
			border-radius: 5px 5px 0 0;	
		}

		.navbar_topArea .nav > a{
			text-align: center;
			flex-grow: 1;
			display: flex;
			justify-content: center;
		}

		.navbar_topArea .nav a:hover{
			color: #fff;
			background-color: #1069c4;
			text-decoration: none;
		}

		.navbar_topArea .nav.active a{
			background-color: #fff;
			color: #333;
		}

		.navbar_topArea .nav.active a:hover{
			background-color: #fff;
			color: #333;
		}

	.navbar{
		/* padding: 15px 0px 0px; */
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.navbar_bottomArea .navbar {
		padding-right: 200px;
	}

		.navbar > .clearfloat{
			display: none;
		}
		
		.navbar_bottomArea{
			border-bottom: 1px solid #efefef;
			box-shadow: 0px 5px 10px 0px rgb(239 239 239 / 80%);
		}


		.header.fixed .navbar_bottomArea{
			box-shadow: unset;
		}

		.navbar_bottomArea.page{
			box-shadow: unset;
			border-bottom: 6px solid #7DCDF4;
		}
		
			.navbar_bottomArea > .wrap{
				position: relative;
				/* min-height: 56px; */
			}

				.mobile_topArea {

				}

				/* 當頁面為 公文式教育 主按鍵中的模組功能 */
				.navbar_bottomArea.educate .mobile_topArea.educate{
					display: block;
				}
				.navbar_bottomArea.educate .mobile_topArea.origin{
					display: none;
				}
				.navbar_bottomArea.educate .mobile_topArea.information{
					display: none;
				}
				.navbar_bottomArea.educate .mobile_topArea.podcast{
					display: none;
				}

			
				/* 當頁面為 KUMON的由來 主按鍵中的模組功能 */
				.navbar_bottomArea.origin .mobile_topArea.educate{
					display: none;
				}
				.navbar_bottomArea.origin .mobile_topArea.origin{
					display: block;
				}
				.navbar_bottomArea.origin .mobile_topArea.information{
					display: none;
				}
				.navbar_bottomArea.origin .mobile_topArea.podcast{
					display: none;
				}

			
				/* 當頁面為 企業訊息 主按鍵中的模組功能 */
				.navbar_bottomArea.information .mobile_topArea.educate{
					display: none;
				}
				.navbar_bottomArea.information .mobile_topArea.origin{
					display: none;
				}
				.navbar_bottomArea.information .mobile_topArea.information{
					display: block;
				}
				.navbar_bottomArea.information .mobile_topArea.podcast{
					display: none;
				}

			
				/* 當頁面為 企業訊息 主按鍵中的模組功能 */
				.navbar_bottomArea.podcast .mobile_topArea.educate{
					display: none;
				}
				.navbar_bottomArea.podcast .mobile_topArea.origin{
					display: none;
				}
				.navbar_bottomArea.podcast .mobile_topArea.information{
					display: none;
				}
				.navbar_bottomArea.podcast .mobile_topArea.podcast{
					display: block;
				}
				

				.mobile_bottomArea {

				}

		
					
					/*浮動*/
					/* .header.fixed .navbar{
					} */
					
					.nav_title{
						display: none;
						width: 100%;
						/* height: 70px; */
						padding: 10px 4%;
						box-sizing: border-box;
						background-color: #fff;
						border-bottom: #7dcdf4 2px solid;
						position: relative;
					}

					.nav_title span{
						font-size: 23px;
						font-weight: bold;
						display: table-cell;
						vertical-align: middle;
					}
					.navTitle_menuClose{
						cursor: pointer;
						display: none;
					}
					.navTitle_menuClose.active{
						display: block;

						position: absolute;
    					right: 4%;
						padding: 0px 10px;
					}
						.navTitle_menuClose .icon{
							width: 25px;
							height: 25px;
							/* margin: 20px 0 0 auto; */
							margin: 3px auto 0;
						}

							.navTitle_menuClose .icon img{
								width: 100%;
								height: auto;
							}
						
						.navTitle_menuClose span{
							display: block;
							font-size: 12px;
							font-weight: bold;
							color: #000;
							margin-top: 9px;
						}


					.mobile_bottomArea{
						display: none;
						padding-top: 20px;
						background-color: #fff;
					}
					
					.mobile_search{
						width: 92%;
						margin: 0 auto;
						display: flex;
						align-items: center;
					}
					.mobile_search input{
						border-right: unset;
					}
					.mobile_search span{
						position: relative;
						display: block;
						border-radius: 0 6px 6px 0;
						/* border: 1px solid #FAAF18; */
						background-color: #FAAF18;
						padding: 12px;
					}
					.mobile_search span i{
						font-size: 18px;
						color: #fff;
						display: block;
					}
					.mobile_snsArea{
						text-align: center;
						margin-top: 20px;
						border-bottom: 1px solid #e6e6e6;
						padding-bottom: 20px;
					}

						.mobile_snsList{
							display: inline-block;
							vertical-align: middle;
							margin-right: 20px;
						}

							.mobile_snsList a{
								display: block;
								width: 44px;
								height: 44px;
								background-color: #fff;
							}

								.mobile_snsList a img{
									width: 100%;
									height: auto;
								}

					.mobile_menuClose{
						text-align: center;
						cursor: pointer;
						font-weight: bolder;
						padding: 15px;
					}
						.mobile_menuClose span{
							position: relative;
							font-size: 16px;
						}
							.mobile_menuClose span::before{
								content: "";
								background-size: cover;
								background-repeat: no-repeat;
								background-image: url(../office_images/icon_sp_menu_close.webp);
								width: 17px;
								height: 17px;
								position: absolute;
								top: 0;
								left: -25px;
							}


						.nav{
							float: left;
							position: relative;
							box-sizing: border-box;
						}
						.nav.mobile{
							display: none;
						}
						.nav.active > a::before{
							content: '';
							position: absolute;
							width: 100%;
							height: 6px;
							background: #B9EBFD;
							bottom: -6px;
							left: 0;
						}
						.classroom_searchButton{
							position: absolute;
							right: 0;
							top: 50%;
							transform: translate(0, -50%);
						}
						
						.classroom_searchButton a{
							background-color: #f39800;
							display: flex;
							align-items: center;
							padding: 5px 10px;
							/* border-radius: 10px; */
							border-radius: 5px;
						}
						.classroom_searchButton .icon{
							width: 30px;
						}
						.classroom_searchButton .icon img{
							width: 100%;
							height: auto;
						}

						.classroom_searchButton a span{
							color: #fff;
							margin-left: 5px;
							margin-top: 2px;
						}

						.classroom_searchButton a:hover{
							text-decoration: none;
							opacity: 0.7;
						}
							.nav > a{
								display: block;
								text-decoration: none;
								color: #000;
								
								font-size: 16px;
								transition: 0.3s ease all;
								position: relative;
								padding: 20px 30px;
							}
							/* .nav.geneinfo > a{
							} */
							
							/* .header.fixed .nav > a{
								transition: 0.3s ease all;
								font-size: 16px;
								padding: 20px 30px;
							} */
							
							
							/*hover*/
							.nav:hover > a {
								color: #1069c4;
								transition: 0.3s ease all;
							}
								.nav_span{
									color: #000;
									position: absolute;
									top: 16px;
									right: 3px;
									font-size: 12px;
								}
								
								
								/* .navOpen {
								} */
								.navOpen.pc {
									display: none;
									position:absolute;
									width: 200px;
									right: 0;
									left: 0;
									z-index: 9999;
									/* padding: 15px 10px 15px 25px; */
									padding: 7.5px 10px 7.5px 25px;
									background-color: rgba(16, 105, 196, 0.96);
									border-radius: 5px;
									box-shadow: 0px 0px 4px 0px rgb(255 255 255 / 50%);

									box-sizing: border-box;
								}
								.navOpen.pc::after {
									content: "";
									width: 0;
									height: 0;
									border-left: 10px solid transparent;
									border-right: 10px solid transparent;
									border-bottom: 12px solid #146dc6;
									position: absolute;
									top: -12px;
									left: 37px;		
								}
													
								
								
								.nav:hover .navOpen.pc {
									display:block;
								}
								/*.navbar .nav:nth-of-type(4):hover .navOpen.pc {
									display:block;
								}*/							
												
								.header.fixed .navOpen.pc {
									top: 56px;
								}				
															
												
												
												
								/*.navOpen.pc.geneinfo {
									width: 100%;
									position:absolute;
									left: 0;
									top: 80px;
									display: none;
									z-index: 2;
									background-color: rgba(255,255,255,0.9);
									box-shadow: 9px 6px 19px -8px rgba(0,0,0,0.5);
									border-top: 1px solid rgba(0,0,0,0.1);
									
									transition: 0.3s ease all;
								}
												
								
								.header.fixed .navOpen.pc.geneinfo {
									top: 56px;
								}
									.geneinfo_area{
										text-align: center;
										padding: 30px 0px;
									}*/
									
										/*子選單_標題區塊*/
										/*.nav_titArea{
											float: left;
											width: 20%;
											height: 100%;
											box-sizing: border-box;
											padding: 50px 40px;
										}
											.nav_titIn{
												color: #595757;
												font-size: 1.4em;
												text-align: right;
											}*/
											
											
										
										/*子選單_連結列表區塊*/
										/*.nav_inArea{
											float: left;
											width: 80%;
											min-height: 132px;
											box-sizing: border-box;
											padding: 7px 0px 7px 40px;
											border-left: 1px solid #716764;
										}
											.nav_inContent{
												text-align: left;
											}
												.navIn_listArea{
													float: left;
													padding-right: 100px;
													box-sizing: border-box;
												}
													.navIn_list{
														display: inline-block;
														box-sizing: border-box;
														width: 24%;
														padding: 7px 0px;
														text-align: left;
													}
														.navIn_list a{
															display: inline-block;
															color: #595757;
															text-decoration: none;
															font-size: 1em;
															letter-spacing: 0;
														}*/
														/*hover*/
														/*.navIn_list a:hover{
														}*/
												
								
								/*mobile版*/
								.navOpen.mobile {
									display:none;
									opacity:0;
									z-index:-999999;
									position: absolute;
								}	
								
								/*hover*/
								.nav:hover .navOpen.pc {
									display: block;
									
									transition: 0.3s ease all;
								}	
													
									.navOpenBg {
										position:relative;
										/* background-color: rgba(16, 105, 196, 0.96); */
										/*background: rgb(210 5 0 / 0.8);*/
									}
								
										.navOpenList a {
											text-align:left;
											color: #fff;
											font-size: 15px;
											line-height:22px;
											/* padding: 10px 5px; */
											padding: 7.5px 5px;
											/* background:rgba(0,0,0,0.65); */
											transition:0.3s ease all;
											text-decoration:none;
											letter-spacing: 0px;
											display: inline-block;
											position: relative;
										}
										.navOpenList a::before {
											content: "";
											display: inline-block;
											width: 7px;
											height: 12px;
											background-image: url(../office_images/arrow_wh_r.webp);
											background-repeat: no-repeat;
											background-size: cover;
											margin: -2px 8px 0 0;
										}

										
											.navOpenList > a:hover {
												/* background-color: #badde9; */
												/* color: #fff; */
												text-decoration: underline;
												
											}
						
								
								
										/*.navOpenBg:before {
											position: absolute;
											content:'';
											border-bottom: solid 8px rgba(0,0,0,0.6);
											border-left: solid 12px rgba(255,255,255,0);
											border-right: solid 12px rgba(255,255,255,0);
											top:-8px;
											left:50%;
											margin:0px 0px 0px -12px;
										}*/
										
										/* .navOpen.pc  .navOpenList a {
										}	 */
											/*hover*/
											/* .navOpen.pc  .navOpenList a:hover {
											} */



@media(max-width:1600px){
	.nav > a {
		padding: 20px 20px;
	}
}
@media (max-width: 1440px){
	.navbar_topArea .nav a {
		font-size: 16px;
	}
	.nav > a {
		font-size: 15px;
		padding: 20px 15px;
	}
}
@media (max-width: 1280px){
	.navbar_bottomArea .navbar {
		padding-right: 160px;
	}
	.navbar_topArea .nav a {
		font-size: 15px;
	}
	.nav > a {
		font-size: 14px;
		padding: 15px 10px;
	}
	.classroom_searchButton a span {
		font-size: 14px;
	}
	.classroom_searchButton .icon {
		width: 25px;
	}
	.classroom_searchButton a {
		padding: 5px 5px;
	}
}
@media(max-width:1100px){
	.classroom_searchButton.fivenav {
		right: 4.5%;
	}
}


/* 在螢幕寬度大於990.1時，套用這裡的特定樣式 */
@media screen and (min-width: 990.1px) {
	.navbar_bottomArea > .wrap{
		min-height: 56px;
	}
}


@media (max-width: 990px){
	.navbar_topArea{
		display: none;
	}
	.navbar_bottomArea.page{
		border-bottom: unset;
	}
	.header_signBtn{
		display: none;
	}
	.classroom_searchButton{
		display: none;
	}
	.nav_title{
		display: table;
		height: 70px;
	}
	
	.mobile_bottomArea{
		display: block;
		
	}

	
	/*主按鍵*/
	.navbar {
		display: none;
		position: fixed;
		width: 100%;
		top: 0px;
		right: 0px;
		height: 100%;
		box-sizing: border-box;
		background-color: #ffffff;
		padding-right: 0px;
		transition: 0.3s ease all;
		/* padding: 46px 0px; */
		overflow-y: auto;
		z-index: 4;
	}
		/* .header.fixed .navbar{
			padding: 46px 0px;
		} */

		.navbar.active {
			display: block;
			box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.25);
		}

		.navbar_bottomArea .navbar {
			padding-right: unset;
		}

			.nav {
				float:none;
				width: 100%;
				padding: 0px;
				position: relative;
			}

			.nav.mobile{
				display: block;
			}

				.nav a::after {
					content: "";
					display: block;
					background-image: url(../office_images/icon_plus_blu.webp);
					background-repeat: no-repeat;
					background-size: contain;
					width: 16px;
					height: 16px;
					margin-top: -7px;
					position: absolute;
					top: 50%;
					right: 10px;
				}

				.nav.mobile a::after{
					background-image: url(../office_images/arrow_blue_r.webp);
					right: 5px;
				}

				
				.nav.link a::after{
					background-image: url(../office_images/arrow_blue_r.webp);
					right: 5px;
				}


				.nav.active a::before {
					display: none;
				}

				.nav.active a::after {
					content: "";
					display: block;
					background-image: url(../office_images/icon_minus_blu.webp);
					background-size: contain;
					width: 16px;
					height: 16px;
					margin-top: -7px;
					position: absolute;
					top: 50%;
					right: 10px;
				}

			/* .nav.active .navOpen.mobile{
				display: block;
			} */
				
				.nav > a {
					border:none;
					border-radius:0px;
					text-align:left;
					padding: 15px 60px 15px 15px;
					color: #000;
					font-weight: bolder;
					border-bottom: 1px solid #b4e8ff;
					font-size: 14px;
					background-color: #dcf4ff;
				}
				
				.header.fixed .nav > a{
					transition: 0.3s ease all;
					/* padding: 15px 25px 15px 15px; */
				}
				
				
				
					/*當前模式*/
					.nav.active > a{
						color: #000000;
					}
					.nav:hover > a{
						color: #000000;
					}
					
					
						/*展開選單*/
						.navOpen {
							position:relative;
							top:0px;
							left:0px;
							margin:0px;
							width:auto;
							border-radius:0px;
							/* background:#444; */
						}
							.navOpen:before, .navOpen:after {
								border-bottom: solid 8px #444;
								left: 23px;
							}
								.nO_list a {
									text-align:left;
									padding: 15px 15px;
								}
								
						
						/*hover*/
						.nav:hover .navOpen.pc {
							display:none;
						}	
						.fixed_nav:hover .navOpen.pc {
							display:none;
						}
							
							.navOpen.mobile {
								display: none;
								opacity: 1;
								z-index: 1;
								position: relative;
							}
								.navOpenBg {
									box-shadow: none;
									background-color: #fff;
								}
									.navOpen.mobile  .navOpenList {
										width: 50%;
										float: left;
    									
									}
									.navOpen.mobile  .navOpenList > a {
										text-align:left;
										
										font-size:14px;
										color: #333;
										line-height:22px;
										box-sizing: border-box;
										padding: 15px 25px 15px 15px;
										transition:0.3s ease all;
										text-decoration:none;
										display: flex;
										align-items: center;
										width: 100%;
										border-right: 1px solid #e6e6e6;
										border-bottom: 1px solid #e6e6e6;
									}
									.navOpen.mobile  .navOpenList > a::before {
										display: none;
									}
									.navOpen.mobile  .navOpenList > a::after {
										content: "";
										display: block;
										background-image: url(../office_images/arrow_blue_r.webp);
										background-size: contain;
										background-repeat: no-repeat;

										width: 10px;
										right: 10px;
									}
										.navOpenList > a:hover {
											opacity: 0.7;
										}
}