/***
 *** 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(http://fonts.googleapis.com/earlyaccess/notosanstc.css);
 @import url(https://fonts.googleapis.com/icon?family=Material+Icons);

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;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,dcdddd+100 */
	background: #ffffff; /* Old browsers */
	background: -moz-linear-gradient(top, #ffffff 0%, #dcdddd 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, #ffffff 0%,#dcdddd 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, #ffffff 0%,#dcdddd 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#dcdddd',GradientType=0 ); /* IE6-9 */
	margin: 0 auto;
    padding: 0;
    border-bottom: #1D91C9 3px solid;
}
#container {
    position: relative;
    z-index: 99;
    width: 100%;
    overflow: hidden;
	background: #FFF;
    margin: 0 auto;
    padding:0;
}
#footer {
    clear: both;
    width: 100%;
	overflow: hidden;
    background: #0E2E53;
    margin: 0 auto;
    padding: 0;
    border-top: #1D91C9 3px solid;
    border-bottom:  #1D91C9 3px solid;
}


/***
 *** 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: 9%;
    overflow: hidden;
    margin: 1.85% 0 1.15% 4.35%;
    padding: 0;
}
	#logo-area img {
	    width: 100%;
	}
#main-nav-area {
	float: right;
	display: inline-block;
	width: 60%;
	overflow: hidden;
	margin: 4% 0 0;
	padding: 0;
}
	#main-nav-area ul {
		overflow: hidden;
		margin: 0;
		padding: 0;
	}
	#main-nav-area li {
		float: right;
		display: inline-block;
		/*width: 15%;*/
		overflow: hidden;
		color: #231815;
		font-size: 1em;
		letter-spacing: 1px;
		text-align: center;
		margin: 0 6% 0 0;
		padding: 0;
	}
		#main-nav-area li a:link, #main-nav-area li a:visited {
			display: block;
			color: #231815;
			padding: 1.5% 0;
		}
		#main-nav-area li a:hover {
			display: block;
			background: #DDD;
			color: #231815;
			padding: 1.5% 0;
			border: #CCC 1px solid;
			border-radius: 6px;
		}
		.nav-on-page {
			color: #0E2E53 !important;
			font-weight: 700 !important;
		}


/*** 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.98 );
    margin: 0;
    padding: 0;
    border-top: #1D91C9 3px solid;
}
	#main-nav-area-for-su480px ul {
            width: 100%;
            overflow: hidden;
            margin: 1% auto 3%;
            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-option {
		clear:both;
		width: 80%;
		overflow: hidden;
		background: #fff url("../image/icon_arrow_green_001.png") no-repeat scroll 3% 12px;
		font-size: 0.938em;
		color: #3e3a39;
		margin: 0;
		padding: 9px 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;
	}
	#services-item-area h3 {
		color: #730306;
		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: #730306 !important;
		font-weight: bold;
		margin: 0 3px;
	}
.page-title {
	clear: both;
	width: 90.62%;
	overflow: hidden;
	color: #0E2E53;
	font-weight: 500;
	letter-spacing: 0.25em;
	margin: 5.3% auto 2.4%;
	padding: 0;
}
.page-title-deco-pic {
	width: 84%;
	vertical-align: middle;
}

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


/*** BEGIN TEMPLATE MAIN COMPONENT -- FOOTER ***/
#footer ul.ul-corp-logo-area {
	float: right;
	display: inline-block;
	width: 26%;
	overflow: hidden;
	margin: 0;
	padding: 0;
}
	#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%;
		}
#footer ul.ul-corp-info-area {
	float: left;
	display: inline-block;
	width: 50%;
	overflow: hidden;
	margin: 2.75% 0 2.75% 3%;
	padding: 0;
}
	#footer li.li-corp-contact-text {
		width: 100%;
		overflow: hidden;
		font-size: 0.875em;
		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 ul.ul-corp-line-area {
	float: left;
	display: inline-block;
	width: 12%;
	overflow: hidden;
	margin: 2% 0 2% 2%;
	padding: 0;
}
	#footer ul.ul-corp-line-area li.li-corp-line-pic {
		width: 100%;
		overflow: hidden;
		margin: 0;
		padding: 0;
		list-style: none;
	}
		#footer ul.ul-corp-line-area li.li-corp-line-pic img {
			width: 100%;
		}
#footer-copyright {
	clear: both;
	width: 100%;
	overflow: hidden;
	color: #231815;
	font-size: 0.875em;
	text-align: center;
	margin: 2.75% auto;
	padding: 0;
}