/***
 *** MAIN STRUCTURE CSS Document
 ***
 *** V. 2.00 by Darren, 2015.1.3
 ***
 *** - CSS RESET
 *** - GLOBAL SETUP
 *** - MAIN STRUCTRUE
 *** - FONT TYPE
 *** - TEMPLATE MAIN COMPONENT
 *** - -- HEADER
 *** - -- GOOGLE CUSTOM SEARCH ELEMENT
 *** - -- CONTAINTER
 *** - -- MAIN MENU
 *** - -- -- AFTER STORE MEMBER LOGGED-IN
 *** - -- TABLE
 *** - -- FOOTER
 ***
 ***/


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


/***
 *** BEGIN GLOBAL SETUP
 ***/

 @import url(https://fonts.googleapis.com/earlyaccess/notosanstc.css);

html{
    font-family: Noto Sans TC, Microsoft JhengHei, Apple LiGothic, Arial, Helvetica, sans-serif;
    height: 100%;
}
body {
    width:100%;
    height: 100%;
    margin:0;
    padding:0;
}
ul {
    width: 100%;
    overflow: hidden;
    margin: 0;
    padding: 0;
}
li {
    list-style: none;
}
img {
	vertical-align: middle;
}
a:link, a:visited {
    text-decoration:none;
}
a:hover {
    text-decoration:none;
}


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

#wraper {
    position: relative;
    max-width: 960px;
    margin: 0 auto;
    padding:0;
}
#header {
    position: relative;
    z-index: 99;
    width: 100%;
    overflow: hidden; 
	margin: 0 auto;
    padding: 0;
}
#container {
    position: relative;
    z-index: 99;
    width: 100%;
    overflow: hidden;
	background: #FFF;
    margin: 0 auto;
    padding:0;
}
#footer {
    width: 90%;
	overflow: hidden;
    background: #00561f;
    margin: 0 auto;
    padding: 33px 5% 50px;
}


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




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

/*** BEGIN TEMPLATE MAIN COMPONENT -- HEADER ***/
.mobile-menu-btn {
    display: none;
}
    .mobile-menu-btn img {
        width: 100%;
    }
#logo-area {
    float: left;
    display: inline-block;
	width: 36%;
    overflow: hidden;
    margin: 4% 0 3%;
    padding: 0;
}
	#logo-area img {
	    width: 100%;
	}
#service-area {
	float:right;
	display: inline-block;
	width: 50%;
	overflow: hidden;
	margin: 1.25% 0;
	padding: 0;
}
	.service-item-block {
		clear: both;
		width: 100%;
		overflow: hidden;
		margin: 1.25% auto 0;
		padding: 0;
	}
	#service-area .service-title {
		float: left;
    	display: inline-block;
    	width: 15%;
		overflow: hidden;
		color: #c30d23;
		font-size: 0.875em;
		font-weight: bold;
		letter-spacing: 2px;
		margin: 0;
		padding: 0;
	}
	#service-area .service-item {
		float: left;
    	display: inline-block;
    	width: 80%;
		overflow: hidden;
		margin: 0 2% 0 0;
		padding: 0 0 0 1%;
	}
		#service-area ul {
			width: 100%;
			overflow: hidden;
			margin: 0;
			padding: 0;
		}
		#service-area li.li-service-item-text {
			float: left;
	    	display: inline-block;
			overflow: hidden;
			background: url(../image/icon_arrow_dark_red_001.png) 0 6px no-repeat;
			color: #4e4a49;
			font-size: 0.813em;
			letter-spacing: 0.1em;
			margin: 0 2% 0 0;
			padding: 0 0 0 2.5%
		}
			#service-area li.li-service-item-text a:link, #service-area li.li-service-item-text a:visited {
				color: #4e4a49;
				text-decoration: none;
			}
			#service-area li.li-service-item-text a:hover {
				color: #4e4a49;
				text-decoration: underline;
			}
#main-nav-area {
	clear: both;
	width: 100%;
	overflow: hidden;
	margin: 17px 0 21px;
	padding: 0;
}
	#main-nav-area ul {
		overflow: hidden;
		margin: 0;
		padding: 0;
	}
	#main-nav-area li {
		float: left;
		display: inline-block;
		width: 9.5%;
		overflow: hidden;
		text-align: center;
		margin: 0 5.2%;
	}
		.nav-text {
			width: 100%;
			color: #00913a;
			font-size: 1.125em;
			margin: 12px 0 0;
		}


/*** BEGIN TEMPLATE MAIN COMPONENT -- MAIN MENU FOR SCREEN SIZE UNDER 480px ***/
#main-nav-area-for-su480px {
    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.88 );
    margin: 0;
    padding: 0;
    border-top: #45948F 2px solid;
}
	#main-nav-area-for-su480px ul {
            width: 100%;
            overflow: hidden;
            margin: 3% auto;
            padding: 0;
	}
            #main-nav-area-for-su480px li {
                list-style: none;
            }
            #main-nav-area-for-su480px li.li-mo {
                clear: both;;
                width: 85%;
                overflow: hidden;
                color: #FFF;
                font-size: 0.875em;
                text-align: center;
                margin: 3% auto 1%;
                padding: 1.5% 0;
                border: #FFF 1px solid;
            }
                #main-nav-area-for-su480px li.li-mo a:link, #main-nav-area-for-su480px li.li-mo a:visited, #main-nav-area-for-su480px li.li-mo a:hover {
                    color: #FFF;
                }
            #main-nav-area-for-su480px li.li-mo-sub {
                clear: both;;
                width: 85%;
                overflow: hidden;
                color: #FFF;
                font-size: 0.875em;
                text-align: center;
                margin: 1.5% auto 1%;
                padding: 1.5% 0;
                border-bottom: #FFF 1px dotted;
            }
                #main-nav-area-for-su480px li.li-mo-sub a:link, #main-nav-area-for-su480px li.li-mo-sub a:visited, #main-nav-area-for-su480px li.li-mo-sub a:hover {
                    color: #FFF;
                }
            #main-nav-area-for-su480px li.li-so {
                clear: both;;
                width: 50%;
                overflow: hidden;
                color: #FFF;
                font-size: 0.75em;
                letter-spacing: 1px;
                text-align: center;
                margin: 2.5% auto;
                /*padding: 0 2.3%;*/
                padding: 0;
            }
                #main-nav-area-for-su480px li.li-so a:link, #main-nav-area-for-su480px li.li-so a:visited, #main-nav-area-for-su480px li.li-so a:hover {
                    color: #FFF;
                }


/*** BEGIN TEMPLATE MAIN COMPONENT -- CONTAINER ***/

#left-side-column {
	float: left;
	display: inline-block;
	width: 20.8%;
	overflow: hidden;
	margin: 0;
	padding: 0;
}
	#left-side-column ul {
		clear:both;
		width: 86.5%;
		overflow: hidden;
		margin: 53px 0 0 13.5%;
		padding: 0;
	}
		#left-side-column li.li-sub-menu-title {
			clear:both;
			width: 90%;
			overflow: hidden;
			color: #3e3a39;
			font-size: 1em;
			font-weight: 500;
			letter-spacing: 0.15rem;
			margin: 8.5% 0 3.5%;
			padding: 0 0 3.5% 3%;
			border-bottom: #dcdddd 1px solid;
		}
		#left-side-column li.li-sub-menu-title:first-child {
			margin-top: 0;
		}
		#left-side-column li.li-sub-menu-option {
			clear:both;
			width: 80%;
			overflow: hidden;
			background: #fff url("../image/icon_arrow_green_001.png") no-repeat scroll 3% 12px;
			font-size: 0.875em;
			color: #3e3a39;
			margin: 0;
			padding: 3% 10%;
		}
			#left-side-column li.li-sub-menu-option a:link, #left-side-column li.li-sub-menu-option a:visited {
				color: #3e3a39;
			}
			#left-side-column li.li-sub-menu-option a:hover {
				color: #00913a;
			}
		.on-page, .on-page a:link, .on-page a:visited, .on-page a:hover {
			color: #00913a !important;
		}
#right-side-column {
	float: right;
	display: inline-block;
	width: 79.2%;
	overflow: hidden;
	margin: 0;
	padding: 0;
}
	#main-content-area {
		clear: both;
		width: 86.5%;
		overflow: hidden;
		color: #3e3a39;
		font-size: 1em;
		line-height: 180%;
		margin: 8px 0;
		padding: 52px 6.5% 65px;
		border-left: #dcdddd 1px solid;
	}
	#main-content-area h1 {
		color: #00561f;
		font-size: 1.35em;
		font-weight: 500;
		letter-spacing: 3px;
	}
	#main-content-area h3 {
		color: #00913a;
		font-weight: 200;
		letter-spacing: 2px;
		margin: 23px 0 18px;
	}
	#main-content-area p, #main-content-area p a:link, #main-content-area p a:visited, #main-content-area p a:hover {
		color: #3e3a39;
	}
	#main-content-area strong {
		color: #00561f;
	}
	.mail-contact, .mail-contact a:link, .mail-contact a:visited, .mail-contact a:hover {
		color: #00913A !important;
		font-weight: bold;
		margin: 0 3px;
	}

/*** BEGIN TEMPLATE MAIN COMPONENT -- TABLE ***/

table.table-faq-01 {
	width: 100%;
	border-collapse: collapse;
}
table.table-faq-01 td {
	padding: 3%;
}
td.td-faq-img {
	width: 28%;
}
td.td-faq-img img {
	width: 100%;
}

/*** BEGIN TEMPLATE MAIN COMPONENT -- FOOTER ***/

#footer ul.ul-corp-info-area {
	float: left;
	display: inline-block;
	width: 60%;
	overflow: hidden;
	margin: 0;
	padding: 0;
}
#footer ul.ul-corp-logo-area {
	float: right;
	display: inline-block;
	width: 36%;
	overflow: hidden;
	margin: 25px 0 0;
	padding: 0;
}
#footer li.li-corp-contact-text {
	width: 100%;
	overflow: hidden;
	font-size: 1em;
	color: #FFF;
	text-align: left;
	margin: 0;
	padding: 0;
	list-style: none;
}
	#footer li.li-corp-contact-text a:link, #footer li.li-corp-contact-text a:visited {
		color: #FFF;
		text-decoration: none;
	}
	#footer li.li-corp-contact-text a:hover {
		color: #FFF;
		text-decoration: underline;
	}
#footer li.li-corp-logo-pic {
	width: 100%;
	overflow: hidden;
	margin: 0;
	padding: 0;
	list-style: none;
}
	#footer li.li-corp-logo-pic img {
		width: 100%;
	}