@charset "utf-8";
@import url("reset.css");
@import url("loading.css");
@import url("fontawesome_all.css");
/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------->>> Main <<<------------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

html { height:100% }
body { margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; -webkit-text-size-adjust:none; font-size:12px; overflow-x:hidden; }
body, td, th {font-size:12px;font-family: /*Arial,*/ "文泉驛正黑", "WenQuanYi Zen Hei", "儷黑 Pro", "Microsoft JhengHei", "新細明體", "PMingLiU", sans-serif;color:#666;}
.iframe_ch { display:none }
.middle{ vertical-align:middle; }
.w100{ width:100%; }
.pager{ width:100%; margin:50px auto 50px auto; text-align:center; }

.btn1{ color:#FFF !important; font-size:15px; width:auto; padding:10px 35px; display:inline-block; background:#7bac35; cursor:hand; cursor:pointer; -webkit-border-radius: 25px;-moz-border-radius:25px; border-radius: 25px; }
.btn1_on{ color:#FFF !important; font-size:15px; width:auto; padding:10px 35px; display:inline-block; background:#7bac35; cursor:hand; cursor:pointer; -webkit-border-radius: 25px;-moz-border-radius:25px; border-radius: 25px; }
.btn1:hover{ color:#fff !important; background:#8ec540; -webkit-transition: all .4s ease;
 -moz-transition: all .4s ease;
 -o-transition: all .4s ease;
 transition: all .4s ease;
 -ms-transition: all .4s ease
}

.button1{ color:#2d2d2d; border:1px solid #2d2d2d; background:#fff; font-size:14px; padding:7px 25px; letter-spacing:1px; cursor:hand; cursor:pointer; }
.button1:hover{ background:#EBEBEB; -webkit-transition:.6s;-ms-transition:.6s;-moz-transition:.6s; }


.back{ margin:50px 0 0 0; color:#2e4b7a; padding:0 0 10px 0; display:inline-block; letter-spacing:1px; font-size:14px; border-bottom:1px solid #2e4b7a; cursor:hand; cursor:pointer; }
.download{ display:inline-block; margin:0 0 20px 0; color:#2e4b7a !important; padding:0 0 10px 0; display:inline-block; letter-spacing:1px; font-size:14px; border-bottom:1px solid #2e4b7a; cursor:hand; cursor:pointer; }

.editor{ padding:2vw 0; font-size:16px; line-height:30px; color:#333; letter-spacing:1px; min-height:200px; }
.news_hot{border: 1px solid #F3CAD2;color: #C25F6F;background:  #F3CAD2;font-size:12px;padding: 2px 7px 3px 10px;-webkit-border-radius: 15px;-moz-border-radius: 15px;border-radius: 15px;}

/*全營幕遮罩*/ 
.bg-overlay{display:block;position:fixed;left:0;top:0;background:rgba(0,0,0,0.7);opacity:0;visibility:hidden;width:100%;height:100%;z-index:9999;
transition: all 0.2s linear;
}
.bg-overlay.visible{opacity:1;visibility:visible} 

/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> Common <<<----------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

#wrapper{ width:100%; }
#header{ width:100%; margin:0 auto; padding:20px 10px; border-bottom:1px solid #ebebeb;}
#header .wrap{ position:relative; width:100%; max-width:1400px; margin:0 auto; }
#header #menu-bar{display: none;position:absolute;right: 15px;top: 50px;color: #AE8E6F;font-size: 30px;cursor:pointer;}
#header .logo{ max-width:597px; width:100%; }
#nav{ position:absolute; top:40px; right:5px; }
#nav a{color:#50453d; font-size:16px; padding-right: 10px; letter-spacing:1px;text-decoration:none;}
#nav a:hover{ text-decoration:underline; }
#nav a:before{ /*content:url(../../images/setting.png); vertical-align:middle; padding-right:10px;*/ }



#menu{width:100%;background:#FFF;text-align: center;}
.menu-wrapper{/*position:relative;*//* border-top:1px solid #e0e0e0; */margin: 0px auto;padding: 0px 0;background: #ae8e6f;-webkit-transition:.6s;-ms-transition:.6s;-moz-transition:.6s;}
.logo-wrapper{ position:relative; max-width:1400px; height:120px; margin:0 auto; 
-webkit-transition:.6s;-ms-transition:.6s;-moz-transition:.6s;
}

.logo-wrapper .logo-b{ position:absolute; top:10px; left:10px; max-width:633px; width:100%; }
.logo-wrapper .logo-s{ position:absolute; top:10px; left:10px; max-width:82px; width:100%; }

.menu-wrapper ul{list-style:none;margin:0;padding:0;display:inline-block;-webkit-transition:.6s;-ms-transition:.6s;-moz-transition:.6s;}
.menu-wrapper ul li{float:left;position: relative;color: #ffffff;min-height:37px;font-size: 18px;letter-spacing:1px;padding: 15px 1.2vw 15px 1.2vw;text-align:center;/* border-left:1px solid #e0e0e0; */text-shadow: 1px 1px 1px #CCC;cursor:hand;cursor:pointer;transition: all 10ms ease;}
.menu-wrapper ul li:not(:last-child):after{ content:url(../../images/menu-line2.png); position:absolute; right:0; top:20px; }
.menu-wrapper ul li:hover{ background:#BFA183; }
.menu-wrapper ul li img{ position:absolute; right:20px; bottom:20px; }
/*
.menu-wrapper ul li:before {
	content:'';
	position: absolute;
	top: 7px;
	left: 10px;
	width: 150px;
	height: 0px;
	background: rgba(220,197,174,0.3);
	transition: all 0.5s ease;
} 

.menu-wrapper ul li:hover:before {
	height: 60px;
}
*/

.menu-wrapper ul li span{font-size:12px !important;color: #d1c6bd;display:block;padding: 11px 0 0px 0;text-shadow:none;}


.menu-wrapper ul li div{
z-index:999;
min-width:200px;
position:absolute;
left:0;
top:68px;
color:#fff !important;
background:#f7f7f7;
/*border:1px solid #fff;*/
opacity:0;
overflow:hidden;
max-height:0px;
transition:opacity 0.5s;
box-shadow:2px 2px 8px rgba(15%,15%,40%,0.1);
}

.menu-wrapper ul li:hover div{ display:block; max-height:350px; height:auto; opacity:0.95; transition:opacity 0.5s,max-height .7s ease}
.menu-wrapper ul li div a{ position:relative; display:block; color:#636363; padding-top:5px; padding:12px 30px 12px 15px; text-decoration:none; }
.menu-wrapper ul li div a:after{ /*content:"﹥"; position:absolute; right:10px; top:10px;*/ }
.menu-wrapper ul li div a:hover{ background:#7e7463; color:#fff; -webkit-transition:.6s;-ms-transition:.6s;-moz-transition:.6s; }

.container{width:100%;background:url(../../images/bg.jpg) repeat;}
.container > .wrapper{position:relative;width: 100%;max-width: 1300px;min-height:400px;margin:0 auto;padding: 50px 0 50px 0;overflow:hidden;}

.common_left{float:left;width: 30%;max-width: 400px;padding: 0 20px 0 0;margin:30px 0 0 0;box-sizing:border-box;}
.common_right{float:left;width: 70%;max-width: 900px;box-sizing:border-box;}
.common_all{float:left;width: 100%;max-width: 1300px;box-sizing:border-box;}
.common_all_box{position:relative;width: 100%;max-width: 1250px;overflow:hidden;min-height:360px;margin: 0 auto 80px auto;padding: 30px 30px 50px 30px;box-sizing:  border-box;/* margin: 45px; */background:#FFF;box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 50px 0 rgba(0, 0, 0, 0.19);-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;}
.common_box{position:relative;width: 100%;max-width: 850px;min-height: 500px;margin: 0;padding: 30px 30px 50px 30px;box-sizing:  border-box;/* margin: 45px; */background:#FFF;box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 50px 0 rgba(0, 0, 0, 0.19);-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;}
.common_types{ background:#c1272d; color:#fff; padding:10px; display:inline-block; font-size:14px; letter-spacing:1px; }
.common_title{ position:relative; overflow:hidden; color: #345884;font-weight: bold;font-size: 20px;line-height: 20px;letter-spacing:3px;padding: 15px 0;border-bottom:3px solid #f2ceac;text-shadow: 1px 1px 1px #CCC;}
.common_title .myselect{text-align:right; font-size:14px; margin:10px 0 0 0;}
.common_title_s{ position:relative; color: #AE8E6F;font-weight: bold;font-size: 16px;line-height: 20px;letter-spacing:3px;padding: 40px 0 40px 0;text-shadow: 1px 1px 1px #CCC;}
.common_title select{ border:1px solid #999; padding:5px 10px; margin:5px; font-size:14px; width:200px; }

.align_r{ text-align:right !important; }
.common_span{ padding:3px 10px 3px 10px; background:#AE8E6F; color:#fff; margin:5px 10px 5px 0; }

#submenu{}
#submenu .title{ color:#715749; font-size:28px; letter-spacing:1px; text-shadow: 1px 1px 1px #CCC; margin-bottom:25px; }
#submenu .title span{ color:#ae8f7e; font-size:18px; padding:0 30px; display:inline-block; }
#submenu .title:before{ content:url(../../images/menu_icon.png); vertical-align: -10%; padding-right:10px; }
#submenu > .on{ background:#e9f1dd; }

.menu_list{max-width: 400px;width: 100%;overflow:hidden;border-top:1px dashed #95928c;padding:15px 0;color:#454443;letter-spacing:1px;font-size:16px;line-height:20px;cursor:hand;cursor:pointer;}
.menu_list:hover{background:#e9f1dd; -webkit-transition:.6s;-ms-transition:.6s;-moz-transition:.6s;}
.menu_list a{ color:#454443; font-size:16px; text-decoration:none; }
.menu_list:last-child{ border-bottom:1px dashed #95928c;  }

.menu_list{max-width: 400px;width: 100%;overflow:hidden;border-top:1px dashed #95928c;padding:15px 0;color:#454443;letter-spacing:1px;font-size:16px;line-height:20px;cursor:hand;cursor:pointer;}
.menu_list:hover{background:#e9f1dd; -webkit-transition:.6s;-ms-transition:.6s;-moz-transition:.6s;}
.menu_list a{ color:#454443; font-size:16px; text-decoration:none; }
.menu_list:last-child{ border-bottom:1px dashed #95928c;  }


.menu_left{width: 10%;float:left;text-align:center;}
.menu_left img{ padding:0 10px; }
.menu_right{float:left;width: 90%;max-width: 320px;}



#footer{width:100%;background:#f2ceac;}
#footer > .wrapper{position:relative;max-width: 1400px;min-height: 145px;margin:0 auto;overflow:hidden;padding: 0 10px;box-sizing: border-box;}
#footer .logo{position:absolute;top: 30px;left:5px;max-width: 597px; width:100%; }
#footer .footer_info{position:absolute;width: 100%;top:40px;right:5px;letter-spacing:1px;color:#c1272d;font-size:14px;font-weight:bold;}
#footer .footer_info > .views:before{ content:url(../../images/icon_member.png); padding-right:5px; vertical-align:middle; }
#footer .footer_info > .contact{position:absolute;width:100%;max-width: 650px;text-align:right;line-height:25px;top: -5px;right:0;letter-spacing:1px;color:#70655c;font-size:12px;}
#footer .footer_info > .contact a{ letter-spacing:1px; color:#70655c; font-size:12px; text-decoration:none; }
#footer .footer_info > .contact a:hover{ text-decoration:underline; }

.gotop{ position:absolute; right:10px; bottom:0px; cursor:hand; cursor:pointer; -webkit-transition:.6s;-ms-transition:.6s;-moz-transition:.6s; }
.gotop:hover{ opacity:0.7; }

@media screen and (max-width : 1200px) {
	#footer .logo{position:inherit;display: block;margin: 20px auto;}
	#footer .footer_info{ position:inherit; top:0px; right:0px; }
	#footer .footer_info > .contact{position:inherit;text-align: center;}
}
@media screen and (max-width : 1024px) {
	#menu , #nav{ display:none; }	
	#header #menu-bar{display:block;top: 3vw;right: 25px;}
	.common_left{ width:100%; max-width:none; padding:20px 20px; margin:0; }
	.common_right{ width:100%; max-width:none; }
	.common_box{ max-width:none; }
	.menu_list{ max-width:none; }
	.none-m{ display:none; }
	
	#submenu .title{ font-size:22px; }
}
@media screen and (max-width : 768px) {
	#header .logo{ width:80%; }
}
@media screen and (max-width : 480px) {
	.common_title{ width:100%; }
	.common_title .myselect{ width:100%; float:left; text-align:left; }
}

/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> Index <<<----------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

#index_about{width:100%;padding: 0px 5px 0 5px;overflow:  hidden;}
#index_about .about_left{float:left;width: 850px;padding: 0 20px 0 20px;box-sizing:border-box;}
#index_about .about_right{ float:left; width:450px; }
#index_about .index_title { color:#443624; font-size:30px; letter-spacing:5px; text-shadow: 1px 1px 1px #CCC; padding:0 0 30px 0; margin:0 0 30px 0; border-bottom:3px solid #f2ceac; }
#index_about .index_title span{font-size:18px; margin:0 50px;}
#index_about p{ font-size:16px; color:#443624; font-weight:bold; line-height:30px; letter-spacing:2px; }
#index_about .more{ margin:50px 0 0 0; color:#2e4b7a; padding:0 0 10px 0; display:inline-block; letter-spacing:1px; font-size:14px; border-bottom:1px solid #2e4b7a; cursor:hand; cursor:pointer; }

.educate_type{width: 22.5%;margin: 1%;vertical-align:  top;display: inline-block;}
.educate_type > .title{font-size: 17px;letter-spacing:1px;color:#2e4b7a;text-shadow: 1px 1px 1px #CCC;margin:0 0 20px 0;}
.educate_type > .title img{padding: 0 0px 0 0;}
.educate_box{ width:100%; background:#FFF; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);  }
.educate_box > .name{position:relative;padding: 20px 20px 45px 20px;color:#111111;letter-spacing:1px;font-size:18px;}
.educate_box > .name a{ color:#111111; text-decoration:none; }
.educate_box > .name a:hover{ text-decoration:underline; }
.educate_box  .person{position:absolute;top: 50px;right: 25px; font-size:13px;}
.educate_box > .content{padding:10px 20px 20px 20px;color:#888888;height: 90px;letter-spacing:0px;line-height:25px;font-size:15px;}
.educate_box > .more{ position:relative; width:100%; height:50px; background:#eae2d9; }
.educate_box > .more a{ position:absolute; top:10px; right:20px; background:#2e4b7a; font-size:14px; font-weight:bold; letter-spacing:1px; color:#ffffff; display:inline-block; text-decoration:none; padding:10px 20px; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; }
.educate_box > .more a:hover{ opacity:0.8;
 -webkit-transition: all .5s ease;
 -moz-transition: all .5s ease;
 -o-transition: all .5s ease;
 -ms-transition: all .5s ease;
 transition: all .5s ease;
}

#index_news{width: 100%;position:relative;max-width: 1250px;min-height:360px;overflow: hidden;margin: 0px auto 30px auto;box-sizing:  border-box;/* margin: 45px; */background:#FFF;box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;}
#index_news .news_flag{position:absolute;top: -20px;left: 30px;width:237px;height:348px;background:url(../../images/news_flag.png);}
#index_news .lefter{float: left;width: 56%;padding:20px; box-sizing:border-box; }
#index_news .righter{float: right;width: 40%;padding:20px 0;}

.index_news_list{ width:100%; overflow:hidden; box-sizing:border-box; padding:0 20px; border-bottom:1px dashed #A09AA4; }
.index_news_list:hover{ background:#e9f1dd; -webkit-transition:.6s;-ms-transition:.6s;-moz-transition:.6s; }

.index_news_list div{float:left;padding: 5px 0;color: #76665d;margin: 10px 0px 5px 0;font-size: 14px;letter-spacing:1px;}
.index_news_type{ display:inline-block; font-size:14px; padding:5px 8px !important; color:#FFF !important; }
.index_news_type span{ color:#264601; background:#c6e0a8; padding:5px 10px 8px 10px; -webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px; }
.index_news_date{ font-size:13px; color:#345884; }
.index_news_title{width: 86%;line-height:20px;padding: 0 20px;}
.index_news_title a{font-size:16px !important;line-height:16px;padding: 0 0px;color: #77675f;text-decoration:none;}
.index_news_title a:hover{color: #77675f;-webkit-transition:.6s;-ms-transition:.6s;-moz-transition:.6s;}
.index_news_content{ padding:0 0px 10px 0px !important; color:#999 !important; }

/*owl*/
#index-youtube .owl-left{cursor:hand;cursor:pointer;display:flex;align-items:center;justify-content: center;width: 12%;float:left;}
#index-youtube .owl-center{width: 70%;float:left;padding: 10px 1vw;}
#index-youtube .owl-right{cursor:hand;cursor:pointer;display:flex;align-items:center;justify-content: center;width: 12%;text-align: right;float:left;}
#index-youtube .contain{text-align:center;margin: 10px;font-size:22px;}
#index-youtube .contain a{ display:block; padding:20px 0 0 0; color:#000000; }
#index-youtube .contain a:hover{ text-decoration:underline; }
#index-youtube .item{margin: 0 auto;padding: 10px 0vw;width: 100%;height: 350px;overflow:hidden;display:flex;align-items:center;justify-content: center;/* border-right: 1px solid #ebebeb; *//* border-left: 1px solid #ebebeb; *//*background:#ffffff;*/}




#index-youtube .item img{width: 100%;/* height: 90%; */cursor:pointer;}

/*youtube rwd*/
.youtube-container {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
}
.youtube-container .video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

@media screen and (max-width : 1200px) {
	#index_news .lefter , #index_news .righter{ width:100%; }
}
@media screen and (max-width : 1024px) {
	.educate_type{width: 47%;}
	.index_news_list{ padding:0 0; }
	.index_news_title{ width:100%; }	
	.index_news_list div{ padding:5px 20px; color:#3474A6; font-weight:bold; }
}
@media screen and (max-width : 600px) {
	.educate_type{width: 92%;margin: 4%;}
}
@media screen and (max-width : 480px) {
	#index_news .righter{ padding:0; }
}

/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> News <<<----------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

.news_list{width:100%;overflow:hidden; box-sizing:border-box;padding: 0;border-bottom: 1px dashed #cecece;}
.news_list:hover{ background:#e9f1dd; -webkit-transition:.6s;-ms-transition:.6s;-moz-transition:.6s; }
.news_list div{float:left;padding:1px 0;/* color: #76665d; */margin:10px 30px 5px 0;font-size: 15px;letter-spacing:1px;line-height: 25px;}
.news_type{ display:inline-block; font-size:14px; padding:5px 8px !important; color:#FFF !important; }
.news_type span{ color:#264601; background:#c6e0a8; padding:5px 10px 8px 10px; -webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px; }
.news_items{ font-size:16px; color:#345884; font-weight:bold; }
.news_items:before{ content:url(../../images/item_icon1.png); vertical-align:-10%; padding:0 10px;}
.news_contents{width: 75%;color:  #675b4c;line-height:20px; }
.news_contents a{ line-height:16px;color: #77675f;text-decoration:none;}
.news_contents a:hover{color: #77675f;-webkit-transition:.6s;-ms-transition:.6s;-moz-transition:.6s;}
.news_contents table tr td{ color: #675b4c; line-height:20px; font-size:15px; padding:5px 0; text-align:left; }
.news_contents table tr td a{ color: #675b4c; font-size:15px; text-decoration:none; }
.news_contents table tr td a:hover{ text-decoration:underline; }

.news_album{width:100%;overflow:hidden;margin:50px 0;/* vertical-align:  top; */}
.album_box{display: inline-block;text-align:center;vertical-align:  top;color:#606060;font-size:16px;letter-spacing:1px;line-height:25px;background:#FFFFFF;width: 43%;margin: 10px 1%;padding:15px;box-shadow: 1px 3px 6px rgba(21%,20%,40%,0.5);}
.album_box_title{ height:40px; line-height:40px; }

@media screen and (max-width : 900px) {
	.news_list div{ float:none; }
	.news_contents{ width:100%; }
	.album_box{ width:92%; margin: 10px 2%;}
}

/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> Contact <<<----------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

.contact{width:95%; overflow:hidden; margin:20px auto; line-height:40px; color:#2D2D2D; font-size:15px; letter-spacing:1px;}
.contact .item{color:#333; font-size:18px;  font-weight:bold; border-bottom:1px solid #DEDEDE;}
.contact .title{display:inline-block; padding:20px 0; font-size:40px; font-weight:bold;}
.contact .editor{padding:20px 0; letter-spacing:1px; line-height:30px; font-size:14px;}
.contact span{display:inline-block; margin:10px 0 0 0; }
.contact .notify{float:left; width:40%; box-sizing: border-box; border:1px solid #fff; line-height:30px; margin-bottom:20px; padding:20px 10px;}
.contact .form{float:right; width:55%; box-sizing: border-box; padding:2%; border:1px solid #C6C6C6; text-align:left; }
.contact .form_left{float:left; width:50%; color:#8B8B8B; text-align:right; letter-spacing:1px;}
.contact .form_right{float:left; width:50%; color:#8B8B8B; text-align:right; }
.contact .select{width:90%; height:30px; border:1px solid #D8D4D5; color:#A9AAAE; font-size:15px; letter-spacing:2px;}
.contact .input{border:0; padding-left:5px; outline:0; border-bottom:1px solid #D8D4D5; width:98%; height:40px; font-size:15px; letter-spacing:2px;}
.contact .textarea{ width:98%; padding:5px; outline:0; resize:none; overflow:auto; margin-top:10px; height:250px; border:0; border-top:1px solid #D8D4D5; font-size:15px; border-bottom:1px solid #D8D4D5; padding:5px;}

.contact_title{ font-size:18px; color:#395069; letter-spacing:1px; font-weight:bold; padding:0 0 20px 0; }
.contact_slogan{ color:#262424; font-size:15px; line-height:30px; border-bottom:1px solid #cacaca; margin-bottom:30px; }
.contact .contact_info{ float:left; color:#858585; font-size:15px; letter-spacing:1px; line-height:24px; text-align:left; vertical-align:top; margin:0 0 20px 0; }
.contact .contact_info span{ display:block; padding:0 0 8px 0; color:#91ceeb; font-size:13px; line-height:16px; }

@media screen and (max-width : 1024px) {
	.contact .notify{ width:100%; }
	.contact .form{ width:100%; }
}
@media screen and (max-width : 1024px) {
	.contact .form_left{ width:100%; }
	.contact .form_right{ width:100%; }
	.contact .textarea{ border-top:0; }
}

/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> Mobile Menu <<<----------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/



body { transition: background-color .2s;}
#wrapper { transition: margin-left .2s; }

.sidenav {
  height: 100%;
  overflow:hidden;
  width: 0;
  position: fixed;
  z-index: 9999;
  top: 0;
  right: 0;
  background-color: rgba(255, 255, 255, 0.9);
  overflow-x: hidden;
  transition: 0.2s;
  /*padding-top: 60px;*/
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.sidenav a:hover {
  color: #f1f1f1;
}

.sidenav .closebtn {
  display: block;
  padding-bottom: 9px;
  padding-left: 20px;
  font-size: 36px;

}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}

}

/*選單 - 選項*/
#ajax-sidenav div{background: #AE8E6F;position:relative;width: 100%;border-bottom: 1px solid #ebebeb;color:#ffffff;padding: 15px 20px;line-height:20px;box-sizing:border-box;cursor: pointer;cursor: hand;font-size: 16px;letter-spacing: 3px;}
#ajax-sidenav div a{display: inline-block;padding: 0 10px;color:#ffffff;text-decoration:none;}
#ajax-sidenav nav div a{padding: 0 10px 0 30px;}
#ajax-sidenav div.title{background: #AE8E6F;color: #ffffff;}
#ajax-sidenav div i , #ajax-sidenav div img{ position:absolute; top:20px; right:30px; color:#ffffff; filter: brightness(0) invert(1); }
#ajax-sidenav div:hover{ /*color:#57708e;*/}
#ajax-sidenav div span{position:absolute;right:0;top: 0;display:block;padding: 15px 20px;border-left: 1px solid #ebebeb;/* border-right: 1px solid #ebebeb; */}

.submenu-nav { width: 100%; overflow:hidden; display:none; background-color: #FFFFFF; }
.submenu-nav div{ padding:20px 20px !important; }
.submenu-nav div:before{position: absolute;left: 35px;font-family: "Font Awesome 5 Free";font-weight: 900;content: "\f0da";font-size: 14px;}

.jq-submenu.three{ padding:15px 40px !important; }


@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}


/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> Communities <<<----------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

.comm_square{margin: 2vw 1%;text-align: center;display:inline-block;width: 31%;}
.comm_square img{ width:100%; }

@media screen and (max-width: 1024px) {
	.comm_square{margin: 2vw 1%; width: 46%;}	
}

@media screen and (max-width: 480px) {
	.comm_square{margin: 2vw 2%; width: 92%;}	
}


/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> Performance <<<----------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

.p_square{float:left;/*border:1px solid #AE8E6F;*/max-width: 1190px;width: 100%;margin: 20px 0 10px 0;margin-right: 35px;}


/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> jcarousel <<<----------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

.index_video{ color:#00ADDF; font-size:14px; text-decoration:none; letter-spacing:1px; }
.index_video:hover{ text-decoration:underline; }

.list_carousel { background-color: #ffffff; margin: 15px 0 0 0; width: 360px; }
.list_carousel ul { margin: 0; padding: 0; list-style: none; display: block; }
.list_carousel li { font-size: 40px; color: #999; text-align: center;  width: 350px; height: 330px; padding: 0; margin: 6px; display: block; float: left; }

.prev { float: left; margin-left: 10px; }
.next { float: right; margin-right: 10px; }


.jcarousel-pagination a {
    text-decoration: none;
    display: inline-block;
    
    font-size: 11px;
    line-height: 14px;
    min-width: 14px;
    
    background: #fff;
    color: #4E443C;
    border-radius: 14px;
    padding: 3px;
    text-align: center;
    
    margin-right: 2px;
    
    opacity: .75;
}

.jcarousel-pagination a.active {
    background: #4E443C;
    color: #fff;
    opacity: 1;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.75);
}

/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> Bxslider <<<----------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

ul.bxslider { margin:0; padding:0; }
#home_banner { display: inline-block; width: 100%; overflow: hidden; position: relative; background:#FCF5FF; /*height:625px;*/ }
#home_banner ul{ list-style:none; }
#home_banner li { width: 100%; background-repeat: no-repeat; background-size: cover; background-position: center; /*height:625px;*/ }
#home_banner img { display: ; }
#home_banner .bxslider { opacity: 0; }
#home_banner .bx-wrapper .bx-pager.bx-default-pager a:hover, #home_banner .bx-wrapper .bx-pager.bx-default-pager a.active {background: #AE8E6F;border: 1px solid #ffffff;}
#home_banner .bx-wrapper .bx-pager.bx-default-pager a {background-color: white;border:1px solid #ccc;width: 14px;height: 14px;margin: 0px 6px;border-radius: 50%;box-shadow:2px 2px 8px rgba(15%,15%,40%,0.1);}
#home_banner .bx-wrapper .bx-pager { bottom: 32px; opacity: 0; }
#home_banner .bx-wrapper .bx-controls-direction{ opacity: 1; }
#home_banner .word { font-size: 15px; position: absolute; margin-left: -187px; margin-top: -116px; left: 50%; top: 50%; color: #673D3A; letter-spacing: 25px; opacity: 0.2; }
#home_banner .word b { font-weight: bold; }
#home_banner .down { position: absolute; right: 30px; bottom: 32px; width: 34px; height: 28px; z-index: 99; cursor: pointer; opacity: 0; }
#home_banner .down img { display: block; }

#home_banner .bx-prev{ left:5%; }
#home_banner .bx-next{ right:5%; }

/*
@media screen and (max-width : 1024px) {
	
	#home_banner .bx-controls-direction
	{
		display:none;	
	}
	
	#home_banner .bx-wrapper .bx-pager.bx-default-pager a {
		 width: 15px;
		 height: 15px;
	}
	#home_banner, #home_banner li {
		max-height: 400px;
		height: 400px;
	}
}
*/

@media screen and (max-width : 768px) {
	#home_banner .bx-wrapper .bx-pager{ display:none; }
	#home_banner .bx-prev{ left:1%; }
	#home_banner .bx-next{ right:1%; }
}



/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> Loadaction <<<----------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

.Loadaction_Box { position:relative; height: 100%; width: 0%; position: fixed; overflow:auto; top: 0; left: 0; overflow:auto; background-color:rgba(0, 0, 0, 0.5); z-index:100000000 }
.Loadaction {width: 220px;height: 55px;top: 42%;padding: 10px 0;letter-spacing: 1px;position: absolute;margin-left: auto;margin-right: auto;left: 0;right: 0;background-color:rgba(0, 0, 0, 0.5);-webkit-border-radius: 2px;-moz-border-radius: 2px;border-radius: 2px;}
.Actionupload_Text {font-size:13px;color:#FFFFFF;height: 25px;}

/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------->>> pagelink <<<--------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

.cssa { font-family:Verdana; letter-spacing:1px; font-size:12px; padding-right:10px; padding-left:10px }
.cssb { font-family:Verdana; letter-spacing:1px; font-size:12px; padding-right:5px; padding-left:5px }


.cssc { padding-bottom:3px; letter-spacing:1px; font-size:12px; padding-left:10px; padding-right:10px; height:40px }
.cssd { font-family:Verdana; font-size:12px; letter-spacing:2px; height:10px; border:1px solid #FFFFFF }
a.pagelink_no:link { color: #003399; text-decoration: none; font-family:Verdana; font-size:12px; letter-spacing:1px; }
a.pagelink_no:visited { color: #003399; text-decoration: none; font-family:Verdana; font-size:12px; letter-spacing:1px }
a.pagelink_no:active { color: #003399; text-decoration: none; font-family:Verdana; font-size:12px; letter-spacing:1px }
a.pagelink_no:hover { color: #003399; text-decoration: underline; font-family:Verdana; font-size:12px; letter-spacing:1px }
a.pagelink:link { color: #333333; text-decoration: none; font-family:Verdana; font-size:12px; letter-spacing:1px; }
a.pagelink:visited { color: #333333; text-decoration: none; font-family:Verdana; font-size:12px; letter-spacing:1px }
a.pagelink:active { color: #333333; text-decoration: none; font-family:Verdana; font-size:12px; letter-spacing:1px }
a.pagelink:hover { color: #333333; text-decoration: underline; font-family:Verdana; font-size:12px; letter-spacing:1px }
a.pagelink_ch:link { color: #cc3300; text-decoration: none; font-family:Verdana; font-size:12px; letter-spacing:1px; font-weight:bold }
a.pagelink_ch:visited { color: #cc3300; text-decoration: none; font-family:Verdana; font-size:12px; letter-spacing:1px; font-weight:bold }
a.pagelink_ch:active { color: #cc3300; text-decoration: none; font-family:Verdana; font-size:12px; letter-spacing:1px; font-weight:bold }
a.pagelink_ch:hover { color: #cc3300; text-decoration: underline; font-family:Verdana; font-size:12px; letter-spacing:1px; font-weight:bold }