@charset "utf-8";

/*green*/

:root {
    --primary-color: #539867; /*主色*/
    --primary-color-r: 83; /*主色-r數值*/
    --primary-color-g: 152; /*主色-g數值*/
    --primary-color-b: 103; /*主色-b數值*/
	
    --light-color: #75AC85; /*淺色*/

    --dark-color: #427952; /*深色*/
	--darker-color: #165123; /*極深色*/
	
    --accent-color: #F49C54; /*強調色*/
    --accent-color-r: 244; /*強調色-r數值*/
    --accent-color-g: 156; /*強調色-g數值*/
    --accent-color-b: 84; /*強調色-b數值*/
	
	--footer-color: #2d6238; /*頁尾-底色*/
}





/* ---------------------------------------------------------------------------------------------------------------------- globe[00]base */
/*====== globe[00]base */
body , .wrapper{ color:#333; background:#fff; }


/*====== globe[00]base-01.a鏈結字 */
a { color:#333;}
a:hover, a:focus {
	color:#ffaa1f;
	color:var(--accent-color);
}


/*====== globe[00]base-02.flex排版 */
.flex-container{
	display:flex; flex-wrap:wrap;
	align-items:center; justify-content:center;
}




/*====== globe[00]base-03.視訊popup用 避免跟mobile menu混合用(in designer) */
body.popup-hidden{ overflow:hidden; }




/*====== globe[00]base-04.關閉選單圖標 */
.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; content:"";
	width:3px; height:100%;
	background:#fff;
	margin-left:-1px;
}
.close-trigger-icon:before{ transform:rotate(45deg); }
.close-trigger-icon:after{ transform:rotate(-45deg); }

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









/* ---------------------------------------------------------------------------------------------------------------------- globe[01]header */
/*====== globe[01]header */
.header{
	position:relative; z-index:850;
	
	background:#466BAA;
	background:var(--primary-color);
}



/*====== globe[01]header-01.上列 */
.header-top-line{ position:relative; }
.header-top-line:before{
	position:absolute; z-index:1; top:0; left:0; content:"";
    width:100%; height:15px;
    
    background:#0E429B;
	background:var(--darker-color);

    box-shadow:0px 3px 4px rgb(0 0 0 / 40%);
}
.header-top-line .inner-area{ padding:20px 15px 10px 15px; }

.header-top-line .header-flex{ display:flex; flex-wrap:wrap; align-items:center; }
.header-top-line .header-flex  .flex-left{ width:60%; }
.header-top-line .header-flex  .flex-right{ width:40%; }



/*====== globe[01]header-01.主列 */
.header-main-line{}
.header-main-line .inner-area{ padding:0 15px; }







/*====== globe[01]header-02.logo */
.logo-area{}

/*====== globe[01]header-02.logo(大螢幕) */
.photo-logo{ display:block; max-width:300px; margin:10px 0; }
.photo-logo img{ display:block; max-width:100%; height:auto; }
.photo-logo a{
	display:inline-block;
	color:#fff;
	font-weight:600; font-size:16px; line-height:1.3;
}


/*====== globe[01]header-02.logo(小螢幕) */
.text-logo{ display:none; }
.text-logo a{
	display:inline-block;
	color:#fff;
	font-size:16px; font-weight:600; line-height:1.3;
}






/*====== globe[01]header-03.選單 */
.menu-list{ display:flex; flex-wrap:wrap; justify-content:center; }
.menu-list li{}
.menu-list .menu-item{
	display:inline-block;
	height:36px;
	overflow:hidden;
	border-bottom:5px solid transparent;
}
.menu-list .menu-item a{
	display:block;

	transform:translateY(-36px);
	transition:transform 0.2s;
}
.menu-list .menu-item .menu-ch,
.menu-list .menu-item .menu-en{
	display:block; 
	font-size:16px; font-weight:600; line-height:36px;
	color:#fff;
	padding:0 15px;
	text-align:center;
}
.menu-list .menu-item .menu-en{
	color:#ffaa1f;
	color:var(--accent-color);
}

.menu-list .menu-item:hover{
	border-bottom-color:#ffaa1f;
	border-bottom-color:var(--accent-color);
}
.menu-list .menu-item a:hover{
	transform:translateY(0);
}







/*====== globe[01]header-04.語系 */
.language-area{}
.language-list{ display:flex; flex-wrap:wrap; }
.language-list a{ 
	display:block; 
	font-size:15px; line-height:1; letter-spacing:0;
	color:#666;
	padding:7px 2px;
	text-align:center;
}
.language-list a.active{ cursor:default; }



/*====== globe[01]header-04.語系(in index) */
.lang-header-area .language-list{ justify-content:flex-end; }
.lang-header-area .language-list li{ margin-left:5px; }
.lang-header-area .language-list a{
	min-width:30px;
	background:rgba(255,255,255,0.7);
	font-size:14px; font-weight:600;

	color:#0E429B;
	color:var(--darker-color);
	
	padding:7px 10px;
}
.lang-header-area .language-list a.member-icon{ 
	padding-left:12px; padding-right:12px;
	border-radius:3px;
	margin-left:10px;
}

.lang-header-area .language-list a:hover{ background:#fff; }
.lang-header-area .language-list a.active{
	background:transparent;
    color:#fff;
}



/*====== globe[01]header-04.語系(in 小螢幕) */
.lang-mobile-area{
	position:relative;
	
	border-style:solid;
	border-width:1px 0 1px 0;
	
	border-color:#385588;
	border-color:var(--dark-color);

	margin-top:20px;
	padding:20px 0;
}
.lang-mobile-area:before , .lang-mobile-area:after{
	position:absolute; left:0; content:"";
    width:100%; height:1px;
	
    background:#6A88BB;
	background:var(--light-color);
}
.lang-mobile-area:before{ top:1px; }
.lang-mobile-area:after{ bottom:-3px; }

.lang-mobile-area .language-list{ justify-content:center; }
.lang-mobile-area .language-list li{ width:calc( ( 100% - 20px ) / 5); padding:0 2px; }
.lang-mobile-area .language-list li:last-child{ margin-left:20px; }
.lang-mobile-area .language-list a{
	background:rgba(255,255,255,0.1);
	font-size:16px;
	color:#fff;
	padding:12px 2px;
}
.lang-mobile-area .language-list a.member-icon{ 
	background:rgba(255,255,255,0.3);
}
.lang-mobile-area .language-list a:hover{
	background:rgba(255,255,255,1);
	
	color:#466BAA;
    color:var(--primary-color);
}
.lang-mobile-area .language-list a.active{
	background:transparent;
	color:rgba(255,255,255,0.7);
}









/*====== globe[01]header-05.在下捲時header固定於最上方 */
.header-fixed-bar{
	position:fixed; z-index:900; top:-100px; left:0;
	width:100%;
	background:#fff;
	padding:1px 0;
	box-shadow:0px 1px 4px rgba(0, 0, 0, 0.3);
	
	transition:transform 0.6s ease;
}
.header-fixed-bar .inner-area{ padding:0 15px;}
.header-fixed-bar.is-scroll{
	transform:translateY(100px);
}

.header-fixed-bar .menu-list{ margin:5px 0; }
.header-fixed-bar .menu-list li{ margin:2px 10px; }
.header-fixed-bar .menu-list li a{
	color:#333;
	font-size:14px; font-weight:600;
}
.header-fixed-bar .menu-list li a:hover{
	color:#466BAA;
	color:var(--primary-color);
}

.header-fixed-bar .header-fixed-flex{ display:flex; flex-wrap:wrap; align-items:center; }
.header-fixed-bar .header-fixed-flex .flex-left{ width:100%; }
.header-fixed-bar .header-fixed-flex .flex-right{ display:none; }

.header-fixed-bar .logo-area{ display:none; }


	








/*====== globe[01]header-06.小螢幕-啟動鈕 */
.hamburger-trigger{ display:block; }

.hamburger-trigger-text , .hamburger-trigger-icon{
	display:inline-block; vertical-align:middle;
	margin:2px;
}
.hamburger-trigger-text{ color:#fff; font-weight:600; }


.hamburger-trigger-icon{
	position:relative;
	width:26px; height:30px;
}
.hamburger-trigger-icon:before , .hamburger-trigger-icon:after{
	position:absolute; left:10%; content:"";
	width:80%; height:3px;
	margin-top:-1px;
	background:#fff;
	border-radius:2px;
	
	transition:transform 0.5s ease;
}
.hamburger-trigger-icon:before{ top:25%; }
.hamburger-trigger-icon:after{ top:75%; }

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



/*====== globe[01]header-06.小螢幕-啟動鈕-menu */
.hamburger-trigger.menu{
	display:none;
	width:40px;
	margin-left:auto;
}
.hamburger-trigger.menu .hamburger-trigger-icon{
	width:36px; height:40px;
}



/*====== globe[01]header-06.小螢幕-啟動鈕(在下捲時固定於最上方) */
.header-fixed-bar .hamburger-trigger-icon:before ,
.header-fixed-bar .hamburger-trigger-icon:after ,
.header-fixed-bar .hamburger-trigger-icon .iocn-line{
	background:#466BAA;
	background:var(--primary-color);
}







/*====== globe[01]header-07.小螢幕選單之跳出面 */
.sidebar-toggle-area{
	position:fixed; z-index:1000; top:0; bottom:0; right:-360px;
	width:360px; height:100vh;

	background:#466BAA;
    background:var(--primary-color);
	
	padding:20px;
	
	overflow-y:auto;
	overflow-x:hidden;
	transition:transform 0.5s ease , box-shadow 0.5s ease;
}

.sidebar-headertop-area , .sidebar-footer-area{ margin:10px 0; }







/*====== globe[01]header-08.小螢幕-menu */
.sidebar-mobile-list{}
.sidebar-mobile-list li{ position:relative; display:block; }
.sidebar-mobile-list li a{
	position:relative;
	display:block;
	font-size:16px; font-weight:600;
	border-bottom:1px solid rgba(255,255,255,0.2);
	color:#fff;
	padding:15px 20px 15px 10px;
}
.sidebar-mobile-list li a:hover{ color:#fff; }

/*第一層*/
/*.sidebar-mobile-list > li:first-child a{ border-top:1px solid rgba(255,255,255,0.2); }*/

/*第二層之後的層級收縮*/
.sidebar-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);
}

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

/*第一層有下層點開之後變化*/
.sidebar-mobile-list > li.current{ background:rgba(255,255,255, 0.1); }
.sidebar-mobile-list > li.current > a{
	background:#fff; color:#FF8915; font-size:16px; font-weight:600;
}
.sidebar-mobile-list > li.current a{
	border-bottom:1px solid rgba(255,255,255,0.2);
}
.sidebar-mobile-list > li.current > a .submenu-button:before{
	border-right-color:#fff;
	border-bottom-color:#fff;
}

/*第二層之後有下層點開之後變化*/
.sidebar-mobile-list li li.current > a{ color:#FF8915; }
.sidebar-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);
}










/*====== globe[01]header-09.頁首-fb social link */
.link-line{ position:absolute; z-index:860; top:0; left:0; width:100%; text-align:right; }
.icon-fb{ position:relative; display:inline-block; max-width:150px; }
.icon-fb:before{
	position:absolute;
	top:100%;
	left:0;
	width:100%;
	height:12px;
	content:"";
	background:url(../images/iocn-fb-shadow.png) no-repeat center top;
	background:contain;
}
.icon-fb a{
	display:block;
	width:100%;
	height:100%;
	
	background:#466BAA;
	background:var(--primary-color);
	
	padding:10px 30px;
}
.icon-fb a img{ display:block; max-width:100%; height:auto; }
.icon-fb a:hover{
	background:#2B2B2B;
	background:var(--darker-color);
}


















/* ---------------------------------------------------------------------------------------------------------------------- globe[02]footer */
/*====== globe[02]footer */
.footer{ margin-top:60px; }

.footer-flex{ display:flex; flex-wrap:wrap; align-items:center; }



/*====== globe[02]footer-1.主列 */
.footer-main-line{
	background:#2654a5;
    background:var(--footer-color);
	
	padding:40px 0;
}
.footer-main-line .footer-flex > .flex-left{ width:400px; }
.footer-main-line .footer-flex > .flex-right{ width:calc( 100% - 400px ); }



/*====== globe[02]footer-1.下列 */
.footer-bottom-line{
	background:#385588;
    background:var(--dark-color);
}
.footer-bottom-line .footer-flex > .flex-left ,
.footer-bottom-line .footer-flex > .flex-right{ width:50%; margin:10px 0; }




/*====== globe[02]footer-2.logo */
.footer-logo{ max-width:250px; margin-bottom:20px; }
.footer-logo a{
	display:inline-block;
	color:#fff;
	font-size:16px; font-weight:600; line-height:1.3;
}



/*====== globe[02]footer-3.選單 */
.footer-menu-list{
	display:flex; flex-wrap:wrap;
	align-items:center; justify-content:flex-end;
	margin:10px 0;
}
.footer-menu-list li{ width:calc( 100% / 5 ); margin:7px 0; }
.footer-menu-list li a{
	position:relative;
	display:block;
	color:#fff;
	font-size:14px; line-height:1.5;
	padding:0 5px;
	text-align:right;
}
.footer-menu-list li a:hover{
    color:#ffaa1f;
    color:var(--accent-color);
}
.footer-menu-list li ul{ display:none; }




/*====== globe[02]footer-4.公司資料 */
.footer-info-area{ margin:15px 0; }

.footer-info-list > li{ margin:5px 0; }

.footer-infometa{ display:inline-block; margin-right:12px; }
.footer-infometa , .footer-infometa a{ font-size:14px; color:#fff; opacity:0.9; }
.footer-infometa a:hover{ opacity:1; }




/*====== globe[02]footer-5.公司宣告 & 版權宣告 */
.web-copyright , .web-designer{ font-weight:600; }
.web-copyright , .web-designer , .web-designer a , .web-designer s{ color:#fff; opacity:0.9; }
.web-copyright a:hover , .web-designer a:hover{ opacity:1; }

/*頁尾-公司宣告*/
.web-copyright{ font-size:14px; }

/*頁尾-版權宣告*/
.web-designer{ text-align:right; font-size:12px; }










/* ---------------------------------------------------------------------------------------------------------------------- globe[03]banner */
/*====== globe[03]banner */
.idx-banner-area{ background:#fff; }


/*====== globe[03]banner-01.在內頁設定 */
.inside-banner-area{ margin-bottom:30px; }




/* ---------------------------------------------------------------------------------------------------------------------- globe[03]banner */
/*====== globe[03]banner-slick */

/*為解決因圖片過多，load時會出現圖片爆框問題*/
.slick-funcbar{
    opacity:0;
    visibility:hidden;
    transition:opacity 1s ease;
    -webkit-transition:opacity 1s ease;
}
.slick-funcbar.slick-initialized{ visibility:visible; opacity:1; }



/*====== globe[03]banner-slick-01.項目 */
.slick-funcbar{ overflow:hidden; }
.slick-funcbar .item{ position:relative; overflow:hidden; }
.slick-funcbar .slide-photobox img{ display:block; max-width:100%; height:auto; }



/*====== globe[03]banner-slick-02.左右按鈕 */
.slickfunc-arrow .slick-prev , .slickfunc-arrow .slick-next{
	position:absolute; z-index:11; top:0;
	display:block;
	width:50px; height:100%;
	background:rgba(255,255,255,0.05);
	border:none;
	color:transparent;
	font-size:0;
	margin-top:-20px;
	cursor:pointer;
	transition:opacity 0.7s ease , transform 0.7s ease;
}

.slickfunc-arrow .slick-prev{ left:0; transform:translateX(-70px); }
.slickfunc-arrow .slick-next{ right:0; transform:translateX(70px); }

.slickfunc-arrow .slick-prev:before , .slickfunc-arrow .slick-next:before{
	position:absolute; top:50%; left:50%; content:"";
	width:10px; height:10px;
	border:4px solid #fff;
	margin-top:-6px; margin-left:-6px;
	transform:rotate(45deg);
}
.slickfunc-arrow .slick-prev:before{ border-top-width:0; border-right-width:0; }
.slickfunc-arrow .slick-next:before{ border-left-width:0; border-bottom-width:0; }
.slickfunc-arrow .slick-prev:hover:before , .slickfunc-arrow .slick-next:hover:before{
	border-color:#466BAA;
	border-color:var(--primary-color);
}

.slick-funcbar:hover .slick-prev , .slick-funcbar:hover .slick-next{
	transform:translateX(0);
}




/*====== globe[03]banner-slick-03.底下圓圈 */
.slickfunc-dots .slick-dots{
	position:absolute; z-index:12; bottom:0; left:0;
	display:flex; flex-wrap:wrap; justify-content:flex-end;
	width:100%;
	background:transparent;
	padding:0 5px;
}
.slickfunc-dots .slick-dots li{ margin:10px 5px 7px 5px; }
.slickfunc-dots .slick-dots li button{
	width:30px; height:6px;
	background:#fff;
	border:1px solid #fff;
	font-size:0;
	cursor:pointer;
}
.slickfunc-dots .slick-dots li button:hover{
	background:#385588;
    background:var(--dark-color);
}
.slickfunc-dots .slick-dots li.slick-active button{
	background:#466BAA;
    background:var(--primary-color);
	
	border-color:#466BAA;
    border-color:var(--primary-color);
	
	opacity:1;
}












/* ---------------------------------------------------------------------------------------------------------------------- globe[04]side-fixed */
/*====== globe[04]side-fixed 右側側邊與下方固定link列 */


/*====== globe[04]side-fixed-01.大螢幕 右側側邊 */
.side-fixed{
	position:fixed; z-index:800; right:0; bottom:10%;
	display:block;
    background:#fff;
	border-radius:5px 0 0 5px;
	padding:5px 5px;
	box-shadow:2px 2px 4px rgba(0,0,0,0.2) , -2px -2px 4px rgba(0,0,0,0.2);
}


/*====== globe[04]side-fixed-02.小螢幕 下方固定 */
.mobile-side-fixed{
	display:none;
	position:fixed; z-index:990; left:0; bottom:0;
	width:100%;
	background:#fff;
	box-shadow:0px -2px 5px rgba(0,0,0,0.2);
	padding:6px 10px;
}


/*====== globe[04]side-fixed-03.列表 */
.side-fixed-list li{ display:block; text-align:center; }

/*大螢幕 右側側邊*/
.side-fixed .side-fixed-list li{ margin:10px 0; }

/*小螢幕 下方固定*/
.mobile-side-fixed .side-fixed-list{ display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; }
.mobile-side-fixed .side-fixed-list li{ width:20%; padding:0 3px; }



/*====== globe[04]side-fixed-04.項目 */
.side-itme{ display:inline-block; }
.side-itme a{ 
	display:block;
	min-width:50px;
	background:rgba(0,0,0,0.05);
	border-radius:3px;
	font-size:12px; line-height:1; letter-spacing:0px;
	color:#333;
	padding:10px 5px;
	margin:0 auto;
	text-align:center;
}
.side-itme img{ max-width:100%; height:auto; }

.side-itme a:hover{
	background:#6A88BB;
	background:var(--light-color);
	
	color:#fff;
}

/*小螢幕 下方固定時變化*/
.mobile-side-fixed .side-itme{ display:block; }




/*====== globe[04]side-fixed-05.回頂端 */
.scrolltop{
	position:relative;
	display:block;

	background:#466BAA;
    background:var(--primary-color);
	
	overflow:hidden;
	cursor:pointer;
	transition:All 0.3s ease;
}

/*大螢幕 右側側邊*/
.side-fixed .scrolltop{
	width:36px; height:36px;
	border-radius:50%;
	margin:0 auto;
}

/*小螢幕 下方固定*/
.mobile-side-fixed .scrolltop{
	width:100%; height:32px;
	border-radius:3px;
}

.scrolltop:before{
	position:absolute; top:50%; left:50%;
	margin-top:-13px;
	margin-left:-7px;
	
	/*套用 圖標 font-style.css*/
	font-family:'icomoon' !important;
	content:"\e92a";
	
	font-size:16px;
	color:#fff;

	animation:scroll-act1 3s infinite;
}
.scrolltop .title{ display:none; }
.scrolltop:hover{
	background:#ffaa1f;
	background:var(--accent-color);
}
@keyframes scroll-act1{
	0% {
		opacity:0;
		transform:translateY(12px);
	}
	50% {
		opacity:1;
		transform:translateY(0px) scale(1);
	}
	
	100% {
		opacity:0;
		transform:translateY(-10px) scale(1);
	}
}












/* ---------------------------------------------------------------------------------------------------------------------- globe[05]social */
/*====== globe[05]social */


/*====== globe[05]social-1.社群連結列表 */
.social-list{ display:flex; flex-wrap:wrap; align-items:center; }
.social-list > li{ margin-right:7px; }

.social-item{}
.social-item a{
	display:block;
	background:rgba(255,255,255,0.1);
	border:1px solid rgba(255,255,255,0.1);
	border-radius:3px;
}
.social-item .social-flex{ line-height:1; padding:3px; }

.social-item .iconfont , .social-item .text{
	display:block;
	width:100%;
	color:#fff;
	text-align:center;
}
.social-item .iconfont{ font-size:24px; }
.social-item .text{ display:none; }

.social-item a:hover{ background:rgba(255,255,255,0.9); border-color:#fff; }
.social-item a:hover .iconfont , .social-item a:hover .text{
	color:#385588;
    color:var(--dark-color);
}


/*====== globe[05]social-1.社群連結列表(in footer) */
.social-footer-area{ margin-top:30px; }