@charset "utf-8";

/*-------------------------------------------------------------------------------------------

	#Page-overlay：跳出隱藏區塊時 內容區覆蓋變暗

-------------------------------- */
.page-overlay{
	position:fixed; z-index:1000; top:0; left:0;
	width:100%; height:100vh;
	overflow:hidden;

	opacity:0;
	pointer-events:none;
	visibility:hidden;
}
.page-overlay.is-open{
	display:block;
	background:rgba(0,0,0,0.85);

    opacity:1;
    pointer-events:auto;
    visibility:visible;
}


/*跳出隱藏區塊時 內容區卷軸*/
body.overflow-hidden{ overflow:hidden; }

@media (min-width:992px){
	.page-overlay.is-open{
        opacity:0;
        pointer-events:auto;
        visibility:hidden;
    }

    body.overflow-hidden{
        overflow:auto;
    }
}










/* ======================================
	07. 小螢幕時選單設定
=================================================================================================================== */
/*小螢幕時選單鈕*/
/*.menu-trigger{
	display:none;
	width:40px;
	height:40px;
	margin-left:auto;
}*/
/*.menu-trigger-icon , .menu-trigger-txt{}
.menu-trigger-icon{
	position:relative;
	width:40px;
	height:40px;
	margin:0 auto;
	background:#fff;
	border-radius:3px;
	overflow:hidden;
	border:2px solid #E3341B;
}
.menu-trigger-icon:before , .menu-trigger-icon:after{
	position:absolute;
	left:15%;
	width:70%;
	height:3px;
	margin-top:-2px;
	content:"";
	background:#E3341B;
	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:15%;
	width:70%;
	height:3px;
	margin-top:-2px;
	background:#E3341B;
	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; }


.menu-trigger-txt{ font-size:15px; color:#17456E; line-height:1; text-align:center; margin-top:4px; font-weight:100; }
*/


/*小螢幕時選單*/
.menu-toggle-area{
	display:none;
	position:fixed;
	z-index:1000;
	top:0;
	bottom:0;
	right:-300px;
	width: 300px;
	height:100%;
	height:100vh;
	background:#E2F2FB;
	padding:15px;
	/*border-top:10px solid #F7D39A;*/

	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;
}
.menu-toggle-area.opened{
	-webkit-transform: translateX(-280px);
	-moz-transform: translateX(-280px);
	-ms-transform: translateX(-280px);
	-o-transform: translateX(-280px);
	transform: translateX(-280px);
}

/*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:#000;
	display:block;
	font-size:18px;
	padding:14px 20px 14px 10px;
	border-bottom:1px solid rgba(0,0,0,0.2);
}
.menu-mobile-list li a:hover{ color:#2483BC; }


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

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

/*有下層之提示圖樣*/
.submenu-button{
	position:absolute;
	z-index:3;
	top:20px;
	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 #2e1011;
	border-bottom:2px solid #2e1011;
	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:17px; /*第二層之後的文字字級*/
}

/*第三層*/
.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(36,131,188, 0.1); }
.menu-mobile-list > li.current > a{ background:#F7830F; color:#fff; }
.menu-mobile-list > li.current a{ border-bottom:1px solid rgba(255,255,255,0.8); }
.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:#2483BC; }
.menu-mobile-list li li.current > a .submenu-button:before{ border-right-color:#2483BC; border-bottom-color:#2483BC;  }







.mobile-menu-header-area{ position:relative; margin-top:10px; /*min-height:50px;*/ }

/*關閉選單按鈕*/
.menu-close-trigger{ /*position:absolute; top:0; right:0;*/ /*width:30px; margin:0 auto;*/ }
.close-trigger-icon , .close-trigger-txt{
	display:block;
	width:100%;
}
.close-trigger-icon{
	position:relative;
	height:30px;
	margin:0 auto;
}
.close-trigger-icon:before , .close-trigger-icon:after{
	position:absolute;
	left:50%;
	top:0;
	width:3px;
	height:100%;
	margin-left:-1px;
	content:"";
	background:#A40018;
}
.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:#A40018; font-size:10px; text-transform:uppercase; letter-spacing:0; }










/*-------------------------------------------------------------------------------------------

	#Offside

-------------------------------- */
.offside{
	position:fixed; z-index:1000; top:0; left:0;
	width:100%; height:100vh;

	overflow:hidden;

	opacity:0;
	pointer-events:none;
	visibility:hidden;

	transition: opacity 0s,
				visibility 0s,
				transform 0s;
}
.offside.is-open{
	opacity:1;
	pointer-events:auto;
	visibility:visible;

	transition: opacity 0.7s,
				visibility 0.7s,
				transform 0.7s;
}

@media (min-width:992px){
	.offside{ display:none; }
}

.offside_inner{
	width:calc( 100% - 90px ); height:100vh;

	background:#E2F2FB;
	border-left:1px solid rgba(255,255,255,0.05);

	margin-left:auto;
	padding-bottom:70px;

	overflow-y:auto;
	overflow-x:hidden;

	box-shadow:-5px 0 5px rgba(0,0,0,0.3);
}


.offside-heading{
	text-align:center;
	font-size:2rem; font-weight:600;
	color:#0E6CFF;
	padding:20px 0;
}


.offside-heading_wing{
	padding:0;
	/*margin-bottom:20px;*/
}
.offside-heading_wing img{
	display:block; max-width:100%; height:auto;
}

/*.offside-heading_wing{
	padding:40px 0;
}
.offside-heading_wing .heading-text{
	position:relative;
	display:inline-block;
	background:#F7830F;
	color:#fff;
	font-size:1.75rem;
	font-weight:600;
	padding:5px 12px 7px 12px;
	border-radius:20px;
	line-height:1;
}
.offside-heading_wing .heading-text:before,
.offside-heading_wing .heading-text:after{
	position:absolute;
	z-index:1;
	top:50%;
	width:20px;
	height:20px;
	content:"";
	margin-top:-12px;

	opacity:1;
}
.offside-heading_wing .heading-text:before{
	left:-16px;
	background:url(../images/web-02.png) no-repeat center left;
	background-size:cover;
}

.offside-heading_wing .heading-text:after{
	right:-16px;
	background:url(../images/web-04.png) no-repeat center right;
	background-size:cover;
}*/



/*-------------------------------------------------------------------------------------------

	#Menu_offside：側邊區塊選單

-------------------------------- */
.menu_offside{}

.menu_offside li{
	border-width:0 0 1px 0;
	border-style:solid;
	border-color:rgba(0,0,0,0.2);
}
.menu_offside li a{
	position:relative;
	display:block;

	color:#333;

	font-size:1.25rem; font-weight:600; letter-spacing:0;
	padding:20px 30px 20px 24px;
	text-decoration:none;
}

.menu_offside .menu-subtext{
	display:none;
}


/* ===== menu_offside [文字 at 第一層] */
.menu_offside > li{
	border-color:rgba(0,0,0,0.2);
}
.menu_offside > li:first-child{
	border-top-width:1px;
}
.menu_offside > li > a{
	color:#333;
}


/* ===== menu_offside [文字前端 is 打開下層選單之提醒] */
/*.menu_offside li a:before{
	position:absolute; top:50%; left:10px; content:"";
	width:8px; height:8px;
	margin-top:-4px;

	background:#fff;

	border-radius:2px;
	transform:rotate(45deg);
	opacity:0;
}*/
.menu_offside li a.is-current{
	background:#F7830F;
	color:#fff;
}
/*.menu_offside li a.is-current:before{
	opacity:1;
}*/


/* ===== #menu-subbtn[右側 is 有下層之提示圖樣] */
.menu-subbtn{
	display:block;
	position:absolute; z-index:1; top:0; right:0;
	width:70px; height:100%;
	background:rgba(255,255,255,0.05);
	cursor:pointer;
}
.menu-subbtn:before,
.menu-subbtn:after{
    position:absolute; z-index:2; right:50%; top:50%; content:"";
	width:2px; height:14px;
    margin-right:-1px; margin-top:-7px;
	background:#333;
	border-radius:2px;
	outline:0;
	transform-origin:center;
	transition:transform 0.4s ease-in-out;
}
.menu-subbtn:before{ transform:rotate(90deg); }



/* ===== menu_offside [is 有下層之提示圖樣- 第一層] */
.menu_offside > li > a .menu-subbtn{
	border-left-color:#333;
}
.menu_offside > li > a .menu-subbtn:before,
.menu_offside > li > a .menu-subbtn:after{
	background:#333;
}
.menu_offside > li > a .menu-subbtn.is-open:before,
.menu_offside > li > a .menu-subbtn.is-open:after,
.menu-subbtn.is-open:before,
.menu-subbtn.is-open:after{
	background:#fff;
}
.menu-subbtn.is-open:before{ transform:rotate(45deg); }
.menu-subbtn.is-open:after{ transform:rotate(-45deg); }



/* ===== menu_offside [is 第二層之後的層級收縮] */
.menu_offside ul{
	display:none;
	position:relative; top:0; left:0;
	width:100%;
	border-top:1px solid rgba(0,0,0,0.2);
	padding-left:1rem;
	background: rgba(36,131,188, 0.1);
}
.menu_offside ul.is-visible{ display:block; }

.menu_offside ul li:last-child{
	border-bottom-width:0;
}





/*-------------------------------------------------------------------------------------------

	#Sign_close 【X】關閉圖樣

-------------------------------- */
.sign_close{
	position:relative;
	display:block;
	width:30px; height:30px;
}
.sign_close:before , .sign_close:after{
	position:absolute; left:50%; top:0; content:"";
	width:3px; height:100%;
	background:#fff;
	border-radius:2px;
}
.sign_close:before{ transform:rotate(45deg); }
.sign_close:after{ transform:rotate(-45deg); }





/*-------------------------------------------------------------------------------------------

	#Offside_close：側邊隱藏區塊-關閉鈕

-------------------------------- */
.offside_close{
	position:fixed; z-index:1102; top:0; left:0;

	display:flex; flex-wrap:wrap;
	align-items:center; justify-content:center;

	width:90px; height:100%;
}
.offside_close .sign_close{
	margin:0 auto 0 auto;
}
.offside_close .sign_close:before ,
.offside_close .sign_close:after{
	background:#fff;
}
.offside_close-text{
	width:100%;
	color:#fff;
	font-size:1rem; font-weight:600; line-height:1.2;
	text-align:center;
	margin-top:6px;
}