@charset "utf-8";

/*-------------------------------------------------------------------------------------------------------------------------------*/
/*========== globe01.表單基本設定 ==========*/



/*-------------------------------------------------------------------------------------------------------------------------------*/
/*========== globe02.其他基本設定 ==========*/

body , .wrapper{ background:#233056; color:#333; font-size:16px; font-family:"微軟正黑體", "新細明體", Arial; }

/*###### gbe02-a鏈結字*/
a { color:#333; }
a:hover, a:focus { color:#F4933B; text-decoration:none; }

/*###### gbe02-方形圖設定*/
.item-thumb-frame { position:relative; display:block; width:100%; overflow:hidden; }
.item-thumb { display:block; max-width:100%; padding-bottom:100%; }

/*###### gbe02-編輯器區塊*/
.editor-area{ color:#333; margin:10px 0; word-break:break-all; }
.editor-area img{ max-width:100%; height:auto; }
.editor-area iframe{ max-width:100%;}

/*###### gbe02-flex排版*/
.flex-container{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; }

/*###### gbe02-欄模組-有區間*/
.cols-group{}
.full-cols-list , .two-cols-list , .three-cols-list , 
.four-cols-list , .five-cols-list , .six-cols-list{ display:flex; flex-wrap:wrap; margin:0 -15px; }

.cols-group > li{ margin-bottom:45px; }
.full-cols-list , .two-cols-list > li , .three-cols-list > li , .four-cols-list > li , 
.five-cols-list > li , .six-cols-list > li{ padding:0 15px; }

.full-cols-list > li{ width:100%; }
.two-cols-list > li{ width:calc( 100% / 2 ); }
.three-cols-list > li{ width:calc( 100% / 3 ); }
.four-cols-list > li{ width:calc( 100% / 4 ); }
.five-cols-list > li{ width:calc( 100% / 5 ); }
.six-cols-list > li{ width:calc( 100% / 6 ); }



/*-------------------------------------------------------------------------------------------------------------------------------*/
/*========== globe04.頁首header ==========*/

.header{ border-bottom:7px solid #FFC757; }

.header-top-line , .header-main-line{ background:#233056; }
.header-top-line .inner-area , .header-main-line .inner-area{ padding:0 30px; }


/*###### gbe04-語系 logo 按鈕 列*/
.header-top-flex{ display:flex; flex-wrap:wrap; align-items:center; }
.header-top-flex > .flex-left{ width:250px; }
.header-top-flex > .flex-center{ width:calc( 100% - 530px ); margin:0 15px; }
.header-top-flex > .flex-right{ width:250px; }


/*###### gbe04-語系*/
.language-list{ display:flex; flex-wrap:wrap; }
.language-list li{ position:relative; display:block; margin:0 5px; }
.language-list li a{
	position:relative;
	display:block;
	width:36px; height:36px;
	border:1px solid #fff; border-radius:50%;
	color:#fff;
	font-size:15px; font-weight:600; line-height:34px;
	text-align:center;
}
.language-list li.active a{ background:#fff; color:#233056; }
.language-list li a:hover{ background:#FFC757; color:#fff; }


/*###### gbe04-小螢幕時 語系*/
.mobile-language-area{ padding-top:3px; }
/*.mobile-language-area .language-list{ justify-content:center; }*/




/*###### gbe04-logo*/
.logo{ max-width:120px; margin:20px auto; }
.logo img{ display:block; max-width:100%; height:auto; }


/*###### gbe04-選單*/
.menu-list{ display:flex; flex-wrap:wrap; justify-content:center; padding:10px 0; }
.menu-list li{ position:relative; display:block; margin:0 10px; }
.menu-list li a{
	position:relative;
	display:block;
	min-width:100px;
	color:#fff;
	font-size:16px; font-weight:600;
	padding:5px 10px;
	text-align:center;
}
.menu-list li a:hover{ color:#FFC757; }






/*-------------------------------------------------------------------------------------------------------------------------------*/
/*========== globe05.小螢幕選單 ==========*/

/*###### gbe05-小螢幕時選單鈕*/
.menu-trigger{
	display:none;
	width:36px;
	margin-left:auto;
}
.menu-trigger-icon , .menu-trigger-txt{}
.menu-trigger-icon{
	position:relative;
	width:36px;
	height:40px;
}
.menu-trigger-icon:before , .menu-trigger-icon:after{
	position:absolute;
	left:10%;
	width:80%;
	height:3px;
	margin-top:-1px;
	content:"";
	background:#fff;
	border-radius:3px;
	
	transition:transform 0.5s ease;
	-webkit-transition:transform 0.5s ease;
	-moz-transition:transform 0.5s ease;
	-o-transition:transform 0.5s ease;
}
.menu-trigger-icon:before{ top:25%; }
.menu-trigger-icon:after{ top:75%; }

.menu-trigger-icon .iocn-line{
	position:absolute;
	top:50%;
	left:10%;
	width:80%;
	height:3px;
	margin-top:-1px;
	background:#fff;
	border-radius:3px;
}
.menu-trigger.opened .menu-trigger-icon { }
.menu-trigger.opened .menu-trigger-icon:before{
	-webkit-transform:rotate(-45deg) translate(-7px, 7px) ;
    transform:rotate(-45deg) translate(-7px, 7px) ;
}
.menu-trigger.opened .menu-trigger-icon:after{
	-webkit-transform:rotate(45deg) translate(-7px, -7px) ;
    transform:rotate(45deg) translate(-7px, -7px) ;
}
.menu-trigger.opened .menu-trigger-icon .iocn-line{ opacity:0; }
.menu-trigger-txt{ color:#fff; font-weight:bolder; font-size:1.2em; }




/*###### gbe05-小螢幕時選單*/
.menu-toggle-area{
	position:fixed;
	z-index:1000;
	top:0;
	bottom:0;
	right:-300px;
	width:300px;
	height:100%;
	height:100vh;
	background:#215FAC;
	padding:30px;
	
	overflow-y:auto;
	overflow-x:hidden;
	
	box-shadow:0 -4px 10px rgba(0,0,0,0.2);
	
	-webkit-transition:transform 0.5s ease;
	-moz-transition:transform 10.5s ease;
	transition:transform 0.5s ease;
}



/*###### gbe05-mobile選單*/
.menu-mobile-list{ margin-top:20px; margin-bottom:30px; }
.menu-mobile-list li{ position:relative; display:block; }
.menu-mobile-list li a{ position:relative; color:#FFC757; border-bottom:1px dashed rgba(244,230,55,0.3); display:block; font-size:18px; padding:15px 20px 15px 10px; }
.menu-mobile-list li a:hover{ color:#fff; }

/*第一層*/
.menu-mobile-list > li:first-child a{ border-top:1px dashed rgba(244,230,55,0.3); }
/*.menu-mobile-list > li > a:before{
	position:absolute; z-index:1; top:-8px; left:-13px; content:"";
	width:16px; height:16px;
	background:url(../images/web-02.png) no-repeat center;
	background-size:cover;
}*/


/*第二層之後的層級收縮*/
.menu-mobile-list ul{
	display:none;
	position:relative;
	top:0;
	left:0;
	width:100%;
}

/*有下層之提示圖樣*/
.submenu-button{
	position:absolute;
	z-index:3;
	top:23px;
	right:15px;
	width:11px;
	height:10px;
	cursor:pointer;
}
.submenu-button:before{
	position:absolute;
	z-index:4;
	top:0;
	right:0;
	width:6px;
	height:6px;
	border-right:2px solid #fff;
	border-bottom:2px solid #fff;
	content:"";
	transform:rotate(45deg);
	-moz-transform:rotate(45deg);
	-webkit-transform:rotate(45deg);
	-o-transform:rotate(45deg);
}

/*第二層*/
.menu-mobile-list ul li a{
	padding-left:27px;
	font-size:16px; /*第二層之後的文字字級*/
}

/*第三層*/
.menu-mobile-list ul ul li a{ padding-left:42px; opacity:0.8; }


/*第四層*/
.menu-mobile-list ul ul ul li a{ padding-left:58px; opacity:0.6; }


/*第一層有下層點開之後變化*/
.menu-mobile-list > li.current{ background:rgba(255,255,255,0.1); }
.menu-mobile-list > li.current > a{ background:#fff; color:#215FAC; font-weight:600; }
.menu-mobile-list > li.current a{ /*border-bottom-color:rgba(255,255,255,0.6);*/ }
.menu-mobile-list > li.current > a .submenu-button:before{ border-right-color:#fff; border-bottom-color:#fff;  }

/*第二層之後有下層點開之後變化*/
.menu-mobile-list li li.current > a{ color:#A40018; }
.menu-mobile-list li li.current > a .submenu-button:before{ border-right-color:rgba(255,255,255,0.2); border-bottom-color:rgba(255,255,255,0.2);  }





.mobile-menu-header-area{ position:relative; min-height:50px; }

/*###### gbe05-關閉選單按鈕*/
.menu-close-trigger{ position:absolute; top:0; right:0; width:40px; }
.close-trigger-icon , .close-trigger-txt{
	display:block;
	margin:0 auto;
}
.close-trigger-icon{
	position:relative;
	width:32px;
	height:32px;
}
.close-trigger-icon:before , .close-trigger-icon:after{
	position:absolute;
	left:50%;
	top:0;
	width:3px;
	height:100%;
	margin-left:-1px;
	content:"";
	background:#fff;
}
.close-trigger-icon:before{
	-moz-transform:rotate(45deg);
	-webkit-transform:rotate(45deg);
	-o-transform:rotate(45deg);
	-ms-transform:rotate(45deg);
	transform:rotate(45deg);
}
.close-trigger-icon:after{
	-moz-transform:rotate(-45deg);
	-webkit-transform:rotate(-45deg);
	-o-transform:rotate(-45deg);
	-ms-transform:rotate(-45deg);
	transform:rotate(-45deg);
}

.close-trigger-txt{ text-align:center; line-height:1; color:#fff; font-weight:600; font-size:10px; text-transform:uppercase; letter-spacing:0; }














/*-------------------------------------------------------------------------------------------------------------------------------*/
/*========== globe06.頁尾footer ==========*/
.footer{ position:relative; background:#fff; min-height:200px; }
.footer:before{
	position:absolute; top:0; left:50%; width:1920px; height:220px;
	content:"";
	margin-top:-220px;
	margin-left:-960px;
	background:url(../images/web-02.png) no-repeat center top;
	background-size:100% auto;
}


/*###### gbe06-footer-logo*/
.footer-logo{ max-width:600px; margin:30px auto; }
.footer-logo img{ display:block; max-width:100%; height:auto; }


/*###### gbe06-社群*/
.footer-social-list{ display:flex; flex-wrap:wrap; justify-content:center; margin:20px 0 50px 0; }
.footer-social-list li{ position:relative; display:block; margin:15px; }
.footer-social-item{
	position:relative;
	display:inline-block;
	color:#333;
	font-size:16px; font-weight:600;
	padding:5px 10px;
	text-align:center;
	min-width:170px;
}
.footer-social-item a{ display:inline-block; }
.footer-social-item .iconfont{
	display:block;
	width:100px; height:100px;
	background:#3B8EAA url(../images/web-04.png) no-repeat center;
	background-size:cover;
	border-radius:50%;
	color:#fff;
	font-size:36px; line-height:100px;
	text-align:center;
	margin:10px auto;
}

.footer-social-item a:hover .iconfont{ background-color:#F4933B; }


.footer-bottom-line{ background:#233056; text-align:center; padding:20px 0; }
.web-copyright{ position:relative; text-align:center; line-height:1.2; }
.web-copyright span{ display:inline-block; font-size:14px; color:#fff; }

.web-designer{
	position:absolute;
	top:0;
	right:0;
	font-size:12px;
	opacity:0.7;
}
.web-designer , .web-designer a{ color:#fff; }
.web-designer a:hover{ opacity:0.8; }








/*-------------------------------------------------------------------------------------------------------------------------------*/
/*========== common01.主頁與詳細頁-共同設定 ==========*/

/*###### cmn01-回頁首*/
.scrolltop{
	position:fixed; z-index:99; right:15px; bottom:50px;
	width:60px; height:60px;
    display:block;
    cursor:pointer;
	background:#3B8EAA url(../images/web-04.png) no-repeat center;
	background-size:cover;

    border:3px solid rgba(255,255,255,0.6);
    border-radius:50%;
    padding:10px;
	opacity:0;
	text-align:center;
}
.scrolltop:hover{ background-color:#F4933B; border-color:#fff; box-shadow:3px 3px 5px rgba(0,0,0,0.4); }
.scrolltop img {
    animation:scroll-act1 3s infinite;
}
.scrolltop.show{ opacity:1; }

@keyframes scroll-act1{
	0% {
		opacity:0;
		-webkit-transform:translateY(12px);
		-ms-transform:translateY(12px);
		transform:translateY(12px);
	}
	50% {
		opacity:1;
		-webkit-transform:translateY(0px) scale(1);
		-ms-transform:translateY(0px) scale(1);
		transform:translateY(0px) scale(1);
	}
	
	100% {
		opacity:0;
		-webkit-transform:translateY(-10px) scale(1);
		-ms-transform:translateY(-10px) scale(1);
		transform:translateY(-10px) scale(1);
	}
}


/*###### cmn01-h標題*/
.h1,.h2,.h3,.h4,.h5,.h6{ font-weight:600; line-height:1.4; letter-spacing:1px; margin-bottom:.5rem; }
.h1{ font-size:2rem; }
.h2{ font-size:1.75rem; }
.h3{ font-size:1.5rem; }
.h4{ font-size:1.25rem; }
.h5{ font-size:1.1rem; }
.h6{ font-size:1.04rem; }




/*###### cmn01-按鈕*/
.btn{
	display:inline-block;
	/*border-radius:.25rem;*/
	padding:5px 5px 7px 5px;
	margin:5px 3px;
	text-align:center;
}
.btn .icon  , .btn .iconfont , .btn .text{
	display:inline-block; vertical-align:middle;
	font-size:1rem; font-weight:600; line-height:1;
	margin:0 1px;
	color:#1F2F54;
}
.btn:hover .iconfont , .btn:hover .text{ color:#F4933B; }


/*###### cmn01-header 申請加入 按鈕*/
.btn-bar.header-join{ text-align:right; }
.btn-bg-join{
	display:block;
	width:100%; max-width:150px;
	background:#389BCC url(../images/web-01.png) no-repeat center top;
	background-size:cover;
	border:2px solid #ffff;
	padding:10px 10px;
	margin-left:auto;
	line-height:1;
}
.btn-bg-join .text{ font-size:18px; font-weight:600; color:#fff; }
.btn-bg-join:hover{ background-color:#F4933B; }
.btn-bg-join:hover .text{ color:#fff; }


/*###### cmn01-首頁 申請加入 按鈕*/
.btn-bar.idx-join{ text-align:center; margin-top:100px; }
.btn-idx-join{
	display:block;
	width:100%; max-width:550px;
	/*background:#389BCC url(../images/web-01.png) no-repeat center top;*/
	background-size:cover;
	border:4px solid #FFC757;
	padding:10px 10px;
	margin:0 auto;
	line-height:1;
	text-align:center;
}
.btn-idx-join .text{ font-size:24px; font-weight:600; color:#FFC757; }
.btn-idx-join:hover{ background-color:#F4933B; border-color:#fff; }
.btn-idx-join:hover .text{ color:#fff; }





/*###### cmn01-內頁*/
.page-wrap{ background:#CCE8F6; min-height:500px; padding-bottom:300px; }


.page-inner.view-width{ max-width:1000px; margin:0 auto; }


/*###### cmn01-頁面上方或下方均等左右分布 套用欄模組*/
.maintop-wrap{}

.maintop-func-area{ padding:20px 0; }
.maintop-func-area .average-flex{ align-items:center; }

.mainbtm-func-area{ margin:45px 0 0 0; background:rgba(255,255,255,0.3); padding:5px; /*border-top:1px solid rgba(107,189,222,0.5); padding-top:15px;*/ }
.mainbtm-func-area .average-flex{ align-items:center; }



/*###### cmn01-內頁banner*/
.page-banner-area{ position:relative; background:#CCE8F6; }
.page-banner img{ display:block; max-width:100%; height:auto; }

.banner-heading-area{
	position:absolute; top:0; left:0; 
	width:100%; height:100%;
	display:flex; flex-wrap:wrap; align-items:center;
}
.banner-heading{}
.banner-heading .text{ font-size:24px; font-weight:600; color:#fff; }



/*###### cmn01-頁面 模組標題*/
.headline-bar{ margin:30px 0 60px 0; }

.module-heading{ text-align:center; margin-bottom:20px; }
.module-heading .text{ display:inline-block; position:relative; font-size:28px; color:#3A95B3; }
.module-heading .text:before{
	position:absolute; z-index:2; top:105%; left:50%; content:"";
	width:400px; height:32px;
	margin-left:-200px;
	background:url(../images/web-07.png) no-repeat center;
	background-size:cover;
}

.module-subtitle{ text-align:center; }
.module-subtitle .text{ font-size:16px; color:#333; }



/*###### cmn01-編輯器區塊*/
.editor-area{ color:#333; margin:10px 0; }
.editor-area img{ max-width:100%; height:auto; }
.editor-area iframe{ max-width:100%;}



/*###### cmn01-導覽路徑*/
.breadcrumb{ text-align:right; margin:15px 0; }
.breadcrumb li{ display:inline-block; }
.breadcrumb li:after{ content:"/"; font-size:10px; margin-left:5px; }
.breadcrumb li:last-child:after{ display:none; }

.breadcrumb-item .iconfont , .breadcrumb-item .text{ display:inline-block; vertical-align:middle; font-size:15px; font-weight:600; line-height:1.5; color:#233056; }
.breadcrumb-item .iconfont{ font-size:16px; }

.breadcrumb-item a:hover .iconfont , .breadcrumb-item a:hover .text{ color:#F4933B; }



/*###### cmn01-內頁主內容區-左右頁面布局*/
.sidebar-flex{ display:flex; flex-wrap:wrap; }
.sidebar-flex-left{ width:200px; margin-right:60px; }
.sidebar-flex-right{ width:calc( 100% - 260px ); }



/*###### cmn01-單層分類*/
.category-bar{ margin:0 0 60px 0; }

.category-list{}
.category-list li{ margin-bottom:10px; }
.category-list li a{ 
	display:block;
	position:relative;
	font-weight:600; font-size:16px; line-height:1.4;
	color:#233056;
	padding:7px 14px;
}
.category-list li a:before{
	position:absolute; top:11px; left:-6px; content:"";
	width:14px; height:14px;
	background:#3B8EAA url(../images/web-04.png) no-repeat center;
	background-size:cover;
	border-radius:50%;
	opacity:0;
}

.category-list li a:hover{ color:#F4933B; }
.category-list li.active a{ color:#3A95B3; cursor:default; }
.category-list li.active a:before{ opacity:1; }




/*###### cmn01-頁碼*/
.page{
	color:#333;
	font-size:0.875rem;
	margin:45px 0 30px 0;
	text-align:center;
}
.page a , .page span{
	display:inline-block;
    /*width:45px; height:45px;*/
	background:#fff;
    /*border:1px solid #999;*/ border-radius:2px;
    color:#333;
    font-weight:600; /*font-size:14px; line-height:45px;*/
	margin:6px 4px;
	padding:7px 10px;
	text-align:center;
}
.page span{ background:#F4E637; border-color:#F4E637; color:#2160AD; }
.page a:hover{ background:#40ABBD; border-color:#40ABBD; color:#fff; }







/*-------------------------------------------------------------------------------------------------------------------------------*/
/*========== common02.項目-共同設定 ==========*/

/*###### cmn02-項目*/
.item-card{ position:relative; }

.item-card .card-photo-frame{ border:1px solid #eee; margin:5px 0; }

.item-card .card-photo{ border:1px solid #eee; margin:5px 0; }
.item-card .card-photo img{ display:block; max-width:100%; height:auto; }

.item-card .card-name{ margin:15px 0; }
.item-card .card-name .text{ color:#233056; font-size:18px; }
.item-card .card-name a:hover .text{ color:#F4933B; }

.item-card .card-caption{}

.item-card .card-text{
	/*font-size:0.875rem;*/
	display:-webkit-box;
	text-overflow:ellipsis;
	overflow:hidden;
	-webkit-line-clamp:2;
	-webkit-box-orient:vertical;
	white-space:normal;
}






/*-------------------------------------------------------------------------------------------------------------------------------*/
/*========== common03.詳細頁-共同設定 ==========*/

/*###### cmn03-詳細頁-文章頁首*/
.view-header{ text-align:center; margin:60px 0 45px 0; }


/*###### cmn03-名稱 h1*/
.view-name{ max-width:900px; margin:0 auto; }
.view-name .text{ color:#3A95B3; }


/*###### cmn03-日期*/
.view-date{ margin-top:10px; }
.view-date .icon{}
.view-date .text{ display:inline-block; background:#233056; color:#fff; font-weight:600; font-size:12px; line-height:1; padding:5px 10px; }


/*###### cmn03-影片*/
.video{ margin:30px 0; text-align:center; }
.video iframe{ max-width:100%;}

.view-body .video{ margin:45px 0 15px 0; }


/*###### cmn03-檔案下載列*/
.btn-bar.view-download{ text-align:right; }


/*###### cmn03-相片集*/
.figure-area{ margin:45px 0;}

.figure-card{ text-align:center; border:1px solid #ccc; /*padding:10px;*/ margin:0; }
.figure-card .card-photo{ margin:0; }
.figure-card .card-caption{ margin-top:5px; color:#666; }

/*關於我們*/
.figure-area.about .figure-list{ justify-content:center; }