/***
 *** MAIN STRUCTURE CSS Document
 ***
 ***
 *** - CSS RESET
 *** - GLOBAL SETUP
 *** - MAIN STRUCTRUE
 *** - FONT TYPE
 *** - TEMPLATE MAIN COMPONENT
 *** - -- HEADER
 *** - -- MAIN MENU FOR MOBILE DEVICES
 *** - -- INDEX
 *** - -- CONTENT PAGE
 *** - -- FOOTER
 ***
 ***/


/***
 *** BEGIN CSS RESET
 ***/


/***
 *** BEGIN GLOBAL SETUP
 ***/
@import url(http://fonts.googleapis.com/earlyaccess/notosanstc.css);

* {
    margin: 0;
    padding: 0;
}
html {
	font-family: Noto Sans TC, Microsoft JhengHei, Apple LiGothic, Arial, Helvetica, sans-serif;
}
body {
	width: 100%;
	height: 100%;
	background: url(../image/backpic_001.png) #073352 50% 0 repeat-x;
	margin: 0;
	padding: 0;
}
li {
	list-style: none;
}
a:link, a:visited {
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}


/***
 *** BEGIN MAIN STRUCTURE
 ***/

#wrapper {
	width: 930px;
	overflow: hidden;
	margin: 0 auto;
	padding: 0;
}
#header {
	position: relative;
	z-index: 23;
	width: 100%;
	height: 140px;
	background: url(../image/backpic_header_001.png) 50% 0 no-repeat;
	margin: 0 auto;
	padding: 0;
}
#container {
	position: relative;
	clear: both;
	width: 100%;
	overflow: hidden;
	margin: 0 auto 5px;
	padding: 0;
}
#footer {
	position: relative;
	z-index: 23;
	clear: both;
	width: 100%;
	overflow: hidden;
	margin: 0 auto;
	padding: 12px 0 0;
	border-top: #FFF 1px solid;
}


/***
 *** FONT TYPE
 ***/


/***
 *** BEGIN TEMPLATE MAIN COMPONENT
 ***/

/*** BEGIN TEMPLATE MAIN COMPONENT -- HEADER ***/
#logo_and_language_area {
	width: 100%;
	overflow: hidden;
	margin: 0 auto;
	padding: 0;
}
	.mobile-menu-btn {
	    display: none;
	}
	    .mobile-menu-btn img {
	        width: 100%;
	    }
	#logo {
		float: left;
		display: inline-block;
		width: 124px;
		overflow: hidden;
		margin: 12px 0 0 36px;
		padding: 0;
	}
		#logo img {
			width: 100%;
		}
	#language_area {
		float: right;
		display: inline-block;
		overflow: hidden;
		margin: 50px 36px 0 0;
		padding: 0;
	}
		#language_area ul {
			margin: 0;
			padding: 0;
		}
		#language_area li {
			float: left;
			display: inline-block;
			overflow: hidden;
			font-size: 0.813em;
			margin: 0;
			padding: 0;
		}
			#language_area li a:link, #language_area li a:visited, #language_area li a:hover {
				color: #FFF;
			}
			#language_area li.seperate_bar {
				float: left;
				display: inline-block;
				overflow: hidden;
				font-size: 0.813em;
				color: #FFF;
				margin: 0 12px;
				padding: 0;
			}
#main_nav_btn_area {
	clear: both;
	width: 100%;
	height: 30px;
	overflow: hidden;
	background: url(../image/backpic_main_nav_001.png) repeat-x;
	margin: 12px auto 0;
	padding: 0;
	border-radius: 8px;
}
	#main_nav_btn_area ul {
		width: 100%;
		overflow: hidden;
		margin: 0 auto;
		padding: 0;
	}
	#main_nav_btn_area li {
		float: left;
		display: inline-block;
		width: 12.9%;
		height: 22px;
		overflow: hidden;
		font-size: 0.813em;
		text-align: center;
		margin: 0;
		padding: 6px 0 0 0;
		border-left: #2ea7e0 1px solid;
		border-right: #231815 1px solid;
	}
		#main_nav_btn_area li a:link, #main_nav_btn_area li a:visited, #main_nav_btn_area li a:hover {
			color: #FFF;
		}

/*** BEGIN TEMPLATE MAIN COMPONENT -- MAIN MENU FOR MOBILE DEVICES ***/
#main-nav-for-mobile-devices {
    clear: both;
    position: absolute;
    z-index: 9999;
    display: none;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #333;
    background: RGBA( 12, 12, 12, 0.92 );
    margin: 0;
    padding: 0;
    border-top: #45948F 2px solid;
}
	#main-nav-for-mobile-devices ul {
        overflow: hidden;
        margin: 3% auto;
        padding: 0;
	}
	#main-nav-for-mobile-devices li {
        list-style: none;
    }
		#main-nav-for-mobile-devices ul.ul-close-btn-area {
	        float: left;
	        width: 25%;
	        margin: 10% 0 3%;
		}
			#main-nav-for-mobile-devices li.mobile-menu-close {
	            width: 18%;
	            margin: 2% 0 1% 23%;
	        }
		        #main-nav-for-mobile-devices li.mobile-menu-close img {
		            width: 100%;
		        }
		#main-nav-for-mobile-devices ul.ul-language-area {
	        float: right;
	        width: 65%;
	        text-align: right;
	        margin: 10% 6% 0 0;
		}
			#main-nav-for-mobile-devices ul.ul-language-area li {
		        display: inline-block;
		        font-size: 0.813em;
			}
			#main-nav-for-mobile-devices ul.ul-language-area li a:link, #main-nav-for-mobile-devices ul.ul-language-area li a:visited, #main-nav-for-mobile-devices ul.ul-language-area li a:hover {
		        color: #FFF;
			}
			#main-nav-for-mobile-devices ul.ul-language-area li.seperate_bar {
		        color: #FFF;
		        margin: 0 3%;
			}
		#main-nav-for-mobile-devices ul.ul-main-menu {
	        width: 100%;
	        margin-top: 0;
		}
	        #main-nav-for-mobile-devices li.li-mo {
	            clear: both;
	            position: relative;
	            width: 91%;
	            overflow: hidden;
	            background: RGBA(7,51,82,0.88);
	            color: #E8E8E8;
	            font-size: 0.875em;
	            font-weight: 400;
	            letter-spacing: 2px;
	            text-align: center;
	            margin: 2.5% auto 0.5%;
	            padding: 2.25% 0;
	            border: #333 1px solid;
	            border-radius: 3px;
	            box-shadow: 1px 1px 6px #000;
	        }
	            #main-nav-for-mobile-devices li.li-mo a:link, #main-nav-for-mobile-devices li.li-mo a:visited, #main-nav-for-mobile-devices li.li-mo a:hover {
	                color: #FFF;
	            }
	        #main-nav-for-mobile-devices li.li-mo-sub {
	            clear: both;
	            position: relative;
	            width: 91%;
	            overflow: hidden;
	            background: rgba(48, 133, 126, 0.65);
	            color: #C8C8C8;
	            font-size: 0.875em;
	            letter-spacing: 0.15em;
	            text-align: center;
	            margin: 1.5% auto 1%;
	            padding: 1.15% 0;
	            border: #444 1px solid;
	            border-radius: 3px;
	        }
	            #main-nav-for-mobile-devices li.li-mo-sub a:link, #main-nav-for-mobile-devices li.li-mo-sub a:visited, #main-nav-for-mobile-devices li.li-mo-sub a:hover {
	                color: #C8C8C8;
	            }
	        #main-nav-for-mobile-devices li.li-so {
	            clear: both;;
	            width: 91%;
	            overflow: hidden;
	            background: rgba(20, 20, 20, 0.95);
	            color: #FFF;
	            font-size: 0.75em;
	            font-weight: 300;
	            letter-spacing: 1px;
	            text-align: center;
	            margin: 0 auto 1.5%;
	            padding: 1.5% 0;
	            border: #363636 1px solid;
	            border-radius: 6px;
	        }
	            #main-nav-for-mobile-devices li.li-so a:link, #main-nav-for-mobile-devices li.li-so a:visited, #main-nav-for-mobile-devices li.li-so a:hover {
	                color: #FFF;
	            }
	        #main-nav-for-mobile-devices li.li-so-sub {
	            clear: both;;
	            width: 91%;
	            overflow: hidden;
	            color: #FFF;
	            font-size: 0.75em;
	            font-weight: 100;
	            letter-spacing: 0.25em;
	            text-align: center;
	            margin: 0 auto 1.5%;
	            padding: 1.5% 0;
	        }
	            #main-nav-for-mobile-devices li.li-so-sub a:link, #main-nav-for-mobile-devices li.li-so-sub a:visited, #main-nav-for-mobile-devices li.li-so-sub a:hover {
	                color: #FFF;
	            }
	        #main-nav-for-mobile-devices .icon-arrow {
	            position: absolute;
	            top: 15%;
	            right: 2%;
	            width: 5%;
	            overflow: hidden;
	            margin: 0.5% 0 0;
	            padding: 0;
	            -webkit-transition: -webkit-transform .8s ease-in-out;
	            transition: transform .8s ease-in-out;
	        }
	            #main-nav-for-mobile-devices .icon-arrow img {
	                width: 100%;
	            }
	        #main-nav-for-mobile-devices .icon-arrow-switch {
	            -webkit-transform: rotate(180deg);
	            transform: rotate(180deg);
	        }
	        #main-nav-for-mobile-devices .switch_sub_menu {
	            display: none;
	        }

/*** BEGIN TEMPLATE MAIN COMPONENT -- CONTENT PAGE ***/
#content_page_main_banner {
	clear: both;
	width: 930px;
	height: 150px;
	overflow: hidden;
	margin: 8px auto 0;
	padding: 0;
	border-radius: 8px;
}
	#content_page_main_banner img {
		width: 100%;
	}
#sub_menu_area {
	float: left;
	display: inline-block;
	width: 18.818%;
	overflow: hidden;
	margin: 1.292% 0 1.936%;
	padding: 0;
}
	#sub_menu_area ul {
		width: 100%;
		overflow: hidden;
		background: #FFF;
		margin: 0 0 18px;
		padding: 0 0 12px 0;
		border-radius: 8px;
	}
	#sub_menu_area li.func_title {
		width: 88%;
		overflow: hidden;
		color: #295590;
		font-size: 1em;
		margin: 0 0 6.86%;
		padding: 5.72%;
		border-bottom: #dcdddd 1px solid;
	}
	#sub_menu_area li.sub_menu_option {
		width: 85%;
		overflow: hidden;
		background: url(../image/icon_dark_yellow_001.png) no-repeat;
		color: #3e3a39;
		font-size: 0.813em;
		margin: 4.58% 0 2.29% 5.72%;
		padding: 0 0 0 8.58%;
	}
		#sub_menu_area li.sub_menu_option a:link, #sub_menu_area li.sub_menu_option a:visited, #sub_menu_area li.sub_menu_option a:hover {
			color: #3e3a39;
		}
	#sub_menu_area li.corp_intro_text {
		width: 155px;
		overflow: hidden;
		color: #3e3a39;
		font-size: 0.813em;
		text-align: justify;
		line-height: 18px;
		margin: 0;
		padding: 0 10px;
	}
	#sub_menu_area li.more {
		width: 155px;
		overflow: hidden;
		color: #3e3a39;
		font-size: 0.813em;
		text-align: right;
		font-weight: bold;
		margin: 10px 0 0;
		padding: 10px 10px 0;
		border-top: #dcdddd 1px solid;
	}
		#sub_menu_area li.more a:link, #sub_menu_area li.more a:visited, #sub_menu_area li.more a:hover {
			color: #3e3a39;
		}
#main_content {
	float: right;
	display: inline-block;
	width: 80.109%;
	min-height: 500px;
	overflow: hidden;
	background: #FFF;
	margin: 1.292% 0 1.936%;
	padding: 0 0 23px 0;
	border-radius: 8px;
}
	#main_content ul {
		clear: both;
		overflow: hidden;
		margin: 0;
		padding: 0;
	}
		#main_content ul.ul_page_title {
			border-bottom: #dcdddd 1px solid;
		}
	#main_content li {
		list-style: none;
	}
		#main_content li.page_title {
			float: left;
			display: inline-block;
			overflow: hidden;
			color: #183154;
			font-size: 1em;
			margin: 0;
			padding: 10px 10px 10px 18px;
		}
		#main_content li.breadcrumb {
			float: right;
			display: inline-block;
			overflow: hidden;
			color: #3e3a39;
			font-size: 0.813em;
			margin: 0;
			padding: 10px 18px 10px 10px;
		}
		#main_content li.content_text {
			clear: both;
			overflow: hidden;
			color: #183154;
			font-size: 0.875em;
		    line-height: 21px;
			margin: 0;
			padding: 10px 10px 10px 18px;
		}

/*** BEGIN TEMPLATE MAIN COMPONENT -- FOOTER ***/
#footer ul.copyright_info {
	width: 45%;
    overflow: hidden;
	margin: 0 auto;
	padding: 0;
}
#footer li.copyright_info_text {
	float: left;
    display: inline-block;
	text-align: center;
	font-size: 0.813em;
	color: #FFF;
	margin: 0.6% 0 0;
	padding: 0;
}
#footer li.fb_like {
	float: left;
    display: inline-block;
    width: 25%;
	font-size: 0.813em;
	color: #FFF !important;
	margin: 0 0 0 5%;
	padding: 0;
}