/* CSS Document */

/***
 *** MAIN STRUCTURE CSS Document
 ***
 ***
 *** - CSS RESET
 *** - GLOBAL SETUP
 *** - MAIN STRUCTRUE
 *** - FONT TYPE
 *** - TEMPLATE MAIN COMPONENT
 *** - -- HEADER
 *** - -- CONTAINTER
 *** - -- FOOTER
 *** - PAGE LEVEL LAYOUT COMPONENT
 *** - -- HOME
 *** - -- PRODUCT INTRO
 *** - -- WORKS
 ***
 ***/

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

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

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

* {
    margin: 0;
    padding: 0;
}
html {
    height: 100%;
}
body {
    width: 100%;
    height: 100%;
    font-family: Noto Sans TC, Microsoft JhengHei, Apple LiGothic, Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
}
a:link, a:visited {
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}


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

#wrapper {
	width: 100%;
	overflow: hidden;
	margin: 0 auto;
	padding: 0;
}
#header {
	width: 880px;
	height: 114px;
	overflow: hidden;
	margin: 0 auto;
	padding: 0;
}
#container {
	clear: both;
	width: 880px;
	overflow: hidden;
	margin: 0 auto 32px;
	padding: 0;
}
#footer {
	clear: both;
	width: 880px;
	overflow: hidden;
	margin: 0 auto 23px;
	padding: 0;
	border-top: #000 1px solid;
}


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


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

/*** BEGIN TEMPLATE MAIN COMPONENT -- HEADER ***/
#logo_and_option_area {
	width: 100%;
	overflow: hidden;
	margin: 0 auto;
	padding: 0;
}
	.mobile-menu-btn {
	    display: none;
	    float: left;
	    width: 5%;
	    overflow: hidden;
	    margin: 7.85% 1.5% 0 1.15%;
	    padding: 0;
	}
	    .mobile-menu-btn img {
	        width: 100%;
	    }
	    .mmb-trans {
	        margin-top: 2%;
	        transition: margin 1s;
	    }
	#logo {
		float: left;
		display: inline-block;
		width: 227px;
		height: 56px;
		overflow: hidden;
		margin: 40px 0 0;
		padding: 0;
	}
		#logo img {
			width: 100%;
		}
	#nav_area {
		float: right;
		display: inline-block;
		overflow: hidden;
		margin: 6.158% 2.655% 0 0;
		padding: 0;
	}
		#nav_area ul {
			margin: 0;
			padding: 0;
		}
		#nav_area li {
			float: right;
			display: inline-block;
			color: #9554A8;
			font-size: 1.25rem;
			line-height: 100%;
			margin: 0 8px;
			padding: 0;
			list-style: none;
		}
			#nav_area li a:link, #nav_area li a:visited, #nav_area li a:hover {
				color: #9554A8;
			}

/*** BEGIN TEMPLATE MAIN COMPONENT -- MAIN MENU FOR SCREEN SIZE UNDER 480px ***/
#main-nav-area-for-su480px {
    clear: both;
    position: fixed;
    z-index: 9999;
    display: none;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #4D9996;
    /*background: RGBA( 2, 94, 173, 0.96 );*/
    margin: 0;
    padding: 0;
    border-top: #9554a8 3px 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-mobile-menu-close {
            float: right;
            width: 3%;
            margin: 1% 7% 1% 0;
        }
            #main-nav-area-for-su480px li.li-mobile-menu-close img {
                width: 100%;
            }
        #main-nav-area-for-su480px li.li-mo {
            clear: both;;
            width: 85%;
            overflow: hidden;
            color: #FFF;
            font-size: 1em;
            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;
            }
        #jk-prod-sub-menu {
        	width: 85%;
        	margin: 0 auto 1%;
        }
        	#jk-prod-sub-menu li.title {
        		position: relative;
        		background: #366969;
        		color: #FFF;
        		font-size: 0.875rem;
        		text-align: center;
        		padding: 1.5% 0;
        	}
	        	#jk-prod-sub-menu li.title a:link, #jk-prod-sub-menu li.title a:visited, #jk-prod-sub-menu li.title a:hover {
	        		color: #FFF;
	        	}
        	#jk-prod-sub-menu ul.ul_product_type {
        		display: none;
        	}
	        	#jk-prod-sub-menu li.product_type {
	        		color: #FFF;
	        		font-size: 0.875rem;
	        		text-align: center;
	        		padding: 1.5% 0;
	        	}
		        	#jk-prod-sub-menu li.product_type a:link, #jk-prod-sub-menu li.product_type a:visited, #jk-prod-sub-menu li.product_type a:hover {
		        		color: #FFF;
		        	}
    	#main-nav-area-for-su480px .icon-arrow {
            position: absolute;
            top: 8%;
            right: 2%;
            width: 8%;
            overflow: hidden;
            margin: 0;
            padding: 0;
            -webkit-transition: -webkit-transform .8s ease-in-out;
            transition: transform .8s ease-in-out;
        }
            #main-nav-area-for-su480px .icon-arrow img {
                width: 100%;
            }
        #main-nav-area-for-su480px .icon-arrow-switch {
            -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
        }
        #main-nav-area-for-su480px .switch_sub_menu {
            display: none;
        }

/*** BEGIN TEMPLATE MAIN COMPONENT -- CONTAINER ***/
#main_visaul_area {
	clear: both;
	width: 862px;
	height: 262px;
	overflow: hidden;
	margin: 0;
	padding: 0;
}
	#main_visaul_area img {
		width: 100%;
	}

/*** BEGIN TEMPLATE MAIN COMPONENT -- FOOTER ***/
#footer_info {
	float: left;
	display: inline-block;
	margin: 18px 0 0 8px;
	padding: 0;
}
#footer_logo {
	float: right;
	display: inline-block;
	margin: 8px 6px 0 0;
	padding: 0;
}
#info_01 {
	color: #D70051;
	font-size: 1.25rem;
	margin: 0 0 12px 0;
	padding: 0;
}
#info_02 {
	color: #262626;
	font-size: 0.938rem;
	margin: 0 0 12px 0;
	padding: 0;
}
#info_03 {
	color: #888;
	font-size: 0.75rem;
	letter-spacing: 2px;
	text-align: right;
	margin: 0 0 12px 0;
	padding:0;
}


/***
 *** BEGIN PAGE LEVEL LAYOUT COMPONENT
 ***/

/*** BEGIN PAGE LEVEL LAYOUT COMPONENT -- HOME ***/
#corp_intro_area {
	float: left;
	display: inline-block;
	width: 64.205%;
	overflow: hidden;
	margin: 2.046% 0.91% 0;
	padding: 0;
}
	#corp_intro_area ul {
		width: 100%;
		margin: 0 auto;
		padding: 0;
	}
		#corp_intro_area li.title {
			width: 529px;
			height: 1.5rem;
			overflow: hidden;
			color: #4D9996;
			font-size: 1.15rem;
			letter-spacing: 5px;
			margin: 0;
			padding: 1px 0 0 5.953%;
			list-style: none;
		}
		#corp_intro_area li.content {
			width: 100%;
			overflow: hidden;
			color: #262626;
			font-size: 1rem;
			line-height: 200%;
			text-align: justify;
			margin: 8px 0;
			padding: 0;
			list-style: none;
		}
#deco_pic {
	float: left;
	display: inline-block;
	margin: 8px 12px 8px 0;
	padding: 0;
}
#contact_info_area {
	float: right;
	display: inline-block;
	width: 250px;
	overflow: hidden;
	margin: 18px 30px 0 0;
	padding: 0;
}
	#contact_info_area ul {
		margin: 0;
		padding: 0;
	}
	#contact_info_area li {
		color: #262626;
		font-size: 0.938rem;
		margin: 0;
		padding: 0;
	}
		#map {
			width: 250px;
			overflow: hidden;
			margin: 0 auto 21px;
			padding: 0;
		}

/*** BEGIN PAGE LEVEL LAYOUT COMPONENT -- PRODUCT INTRO ***/
#left_column {
	float: left;
	display: inline-block;
	width: 205px;
	overflow: hidden;
	margin: 18px 0 0 10px;
	padding: 12px 0 0 3.41%;
}
	#left_column ul.ul_title {
		margin: 0;
		padding: 0;
	}
	#left_column li.title {
		color: #262626;
		font-size: 1rem;
		letter-spacing: 3px;
		margin: 0 0 12px;
		padding: 0;
		list-style: none;
	}
		#left_column li.title a:link, #left_column li.title a:visited, #left_column li.title a:hover {
			color: #262626;
		}
	#left_column ul.ul_product_type {
		display: none;
		margin: 0;
		padding: 0;
	}
	#left_column li.product_type {
		background: url(../image/icon_square_green_01.png) no-repeat 0 4px;
		color: #262626;
		font-size: 0.813rem;
		text-align: left;
		margin: 5px 0 0 5px;
		padding: 0 0 0 15px;
		list-style: none;
	}
		#left_column li.product_type a:link, #left_column li.product_type a:visited, #left_column li.product_type a:hover {
			color: #262626;
		}
#right_column {
	float: right;
	display: inline-block;
	width: 66.137%;
	min-height: 500px;
	overflow: hidden;
	margin: 18px 29px 0 0;
	padding: 0 0 0 18px;
	border-left: #4D9996 1px solid;
}
	#right_column ul {
		margin: 0;
		padding: 0;
	}
	#right_column li.title {
		width: 92%;
		height: 25px;
		overflow: hidden;
		background: url(../image/backpic_for_content_title_001.png) no-repeat 0 0;
		color: #4D9996;
		font-size: 1.125rem;
		font-weight: bold;
		letter-spacing: 5px;
		margin: 0;
		padding: 1px 0 0 36px;
	}
	.title_sub_section {
		color: #4D9996;
		font-size: 0.938rem;
		margin: 23px 0 6px;
		padding: 0;
	}
	table.product_intro {
		width: 96.91%;
		margin: 21px 0 0;
		padding: 0;
		border-collapse: collapse;
	}
		td.td_product_intro {
			font-size: 0.813rem;
			margin: 0;
			padding: 6px;
			border: #3CF 1px dotted;
		}
	.product_intro_pic {
		width: 96.91%;
		margin: 21px 0;
		padding: 0;
	}
		.product_intro_pic img {
			width: 100%;
		}
	table.product_series {
		width: 96.91%;
		margin: 21px 0 0;
		padding: 0;
		border-collapse: collapse;
	}
		td.td_light_orange {
			background: #fae4d1;
			color: #3365b0;
			font-size: 0.813em;
			text-align: center;
			padding: 6px;
			border: #f3b074 1px solid;
		}
		td.td_dark_orange {
			background: #f6caa2;
			color: #3365b0;
			font-size: 0.813em;
			text-align: center;
			padding: 6px;
			border: #f3b074 1px solid;
		}
	#customize_memo {
		width: 97%;
		overflow: hidden;
		font-size: 0.688em;
		color: #F63;
		text-align: right;
		margin: 8px 0 21px;
		padding: 0;
	}
	#product_sku {
		width: 97%;
		overflow: hidden;
		font-size: 0.813em;
		color: #262626;
		text-align: left;
		font-weight: bold;
		margin: 0 0 32px;
		padding: 0;
	}

/*** BEGIN PAGE LEVEL LAYOUT COMPONENT -- WORKS ***/
#corp_intro_area li.li-work-list {
	float: left;
	display: inline-block;
	width: 33%;
	overflow: hidden;
	color: #262626;
	font-size: 0.938rem;
	margin: 2% 0;
	padding: 0;
	list-style: none;
}