/*屬性、浮動及定位、寬度與高度、補白與邊界的排版樣式規則*/
@charset "utf-8";
/* CSS Document */

@import url(../css/reset.css);
@import url(../css/typography.css);
@import url(../css/carousel.css);
@import url(../css/colorbox.css);


/*================================== base ======================================*/
html {}


body { background: url(../image/background.png) top repeat-x                ;
          font-family:Arial, Helvetica, sans-serif, 文媛中圓, 華康中圓;
		  font-size: 13px;
		  color:#666666;
	      text-align:left;}

a {	text-decoration:none; color: #3399ff; }
a:hover  {text-decoration:none;color: #d94242; text-decoration:underline; }
a:link { }
a:active {}


.clear {	clear:both;}

div#container{width:1050px; 	margin:0 auto;	}

/*================================== header ==================================*/
div#header {
	background:url(../image/logo-yj.png) left no-repeat;
	position:relative;
	margin:0 auto;	
	width:1000px;
	height:125px;
}

.language {
    margin-top:8px;
	width: 139px;
	height: 28px;
	float:right;
    }

/* menu ===========================*/ 
#menu {
	height: 30px;
	margin: 25px 0 0 240px;
	padding-left:20px;
}

#menu ul {
	margin-left:-15px;
}

#menu > ul > li {
	float: left;
}

#menu > ul > li > a {
	font-size: 16px;
	color: #b0afaf;
	line-height: 32px;
	text-decoration: none;
	display: block;
	padding: 0 17px;
}

#menu > ul > li:hover > a {
	color: #003399;
}

/*================================== header products_list ======================*/
.mask {
	position:absolute;
	left:0;
	top:0;
	z-index:0;
	display:none;
}

div#header li.products:hover {
	background: url('../image/current.png') center 27px no-repeat;
}

div#header .products_list {
	display:none;
	z-index:999999;
	background: url('../image/prod_list.png') 0 0 no-repeat;
	position:absolute;
	left:15px;
	top:86px;
	width:1010px;
	height:224px;
}

div#header .products_list li {
	float:left;
}

div#header .products_list li a {
	margin-top:28px;
	height:196px;
	display:block;
}

div#header .products_list li a.yj-pc {width:253px;}
div#header .products_list li a.yj-b {width:253px;}
div#header .products_list li a.yj-p {width:251px;}
div#header .products_list li a.yj-f {width:253px;}

div#header .products_list li a.yj-pc:hover {background: url('../image/prod_list_x.png') 	0 	0 no-repeat;}
div#header .products_list li a.yj-b:hover  {background: url('../image/prod_list_x.png') -253px 	0 no-repeat;}
div#header .products_list li a.yj-p:hover  {background: url('../image/prod_list_x.png') -506px 	0 no-repeat;}
div#header .products_list li a.yj-f:hover  {background: url('../image/prod_list_x.png') -757px 	0 no-repeat;}

div#header .products_list li a h2, div#header .products_list li a p, div#header .products_list li a em {
	display:block;
	text-indent:-9999px;
}

/*================================== content ===================================*/

div#space10{margin:20px 0 20px 0;}

div#space_line {margin:30px 0 30px 0; line-height: 10px; background: url('../image/space_line.png') left center repeat-x; }
div#space_line_5 {margin:5px 0 5px 0; background: url('../image/space_line.png') left center repeat-x; }

div#page-where{padding:20px  0px 20px 0px; }
div#home_qklink{padding:15px  0px 25px 0px;}
div#qklink-img{ float:left; width:315px; margin-right:21px;
border: 1px solid #e6e6e8; 
-moz-border-radius: 0px; 
-webkit-border-radius: 0px; color:#000;
border-radius:0px;
padding:1px;
}
div#qklink-img-last{ float:left; width:315px; 
border: 1px solid #e6e6e8; 
-moz-border-radius: 0px; 
-webkit-border-radius: 0px; color:#000;
border-radius:0px; padding:1px;
text-align:center;
}
div#home-text-news{margin:15px 0 15px 0; }
.home-new{background: url("../image/icon_black.jpg") no-repeat; padding: 0px 0px 0px 15px; margin:10px 0 10px 0;}

.font-size18px{font-size:25px; color:#000000;margin:30px 0 30px 0;}

.font-size15px{font-size:16px; color:#666666; line-height: 30px;}


.font-size14px{font-size:14px; color:#666666;line-height: 22px;}
.font-size13px{font-size:13px; line-height: 22px;}
.font-size13px-space{font-size:13px; margin:10px 0 10px 10px;}
.font-molic{font-size:10px; color:#CCCCCC;margin:10px 0 20px 13px;}
.font-red{font-size:12px; color:#CC3300;}
.font-red-1{font-size:12px; color:#CC3300;margin:0x 0 0 130px;}

div#con{width:300px; margin:0 0 0 535px;}

div#content_home {
	margin:0 auto;
	width:1000px;
}



div#content {
	margin:0 auto;
	width:1000px;
}

div#page-left{float:left; width:650px;}
div#page-right{float:right; width:280px;}

div#page-left-mid{float:left; width:470px;}
div#page-right-mid{float:right; width:450px;}


div#story_text{ padding:35px  0px 0px 180px; color:#666666;}

.table{
padding: 10px  10px 10px 10px; text-align:top;}


div#prod_story {
	
	height:auto;
}

.prod_story {
	padding: 10px  10px 10px 350px; 	
	}


.table{
padding: 10px  10px 10px 10px; }

/* --page_number --*/

#page_number{ width:1000px;height:35px; position:relative; background:#FFF; }
#page_number ul {	list-style: none;	padding: 0px;		}
#page_number > ul > li {	position: relative;	float: left;	z-index: 20;	padding: 0px; margin:4px; border: 1px solid #eee;}
#page_number > ul > li:hover {}
#page_number > ul > li > a {
	font-size: 13px;
	font-weight:bold;
	color: #000;
	line-height: 35px;
	text-decoration: none;
	display: block;
	padding:  0px 16px;
	z-index: 6;
	position: relative;
	}
#page_number > ul > li:hover > a {	color:#fff; background:#000;}
#page_number > ul > li.current > a { color:#fff; background:#000;}
#page_number .workon  {	color:#000; background:#fff;}


/* -  news   */
.news-list{	overflow: auto;	margin:10px 0;}
.news-list .news-entry {	float:left; width:315px; height:320px; margin-right:21px;	overflow:hidden;}
.news-list .news-entry.last {margin-right:0px;}
.news-list .image {	margin-bottom:5px;	border: 1px solid #E7E7E7;text-align:center;height:199px;	}
.news-list .image a:hover {filter:Alpha(opacity=50);opacity:0.5;-moz-opacity:0.5;}
.news-list .title { font-weight:bold; margin: 5px 0 5px 0;  color:#000000;}
.news-list .description {	line-height: 15px;	margin-bottom: 5px;}
.news-list .time{ font-size:11px; color:#999999;}


/* -  news-詳細頁   */
.news-info {	overflow: auto;	margin:20px 0;}
.news-info > .left {	float: left;	width:700px;	overflow:hidden;margin-right: 25px;}
.news-info > .left + .right {	margin-left: 270px;}

.news-info .image {	padding: 0 10px 10px 0;	text-align: left;}
.news-info .title {	padding: 20px 10px 10px 0;	text-align: left;	font-size:23px; font-weight:bold; line-height: 20px;}
.news-info .description {	margin: 20px 0 10px 0;	line-height: 20px;	color: #4D4D4D;}

/* -  news-詳細頁的小圖   */
.news-more-list .news-entry {	float:left; width:120px; margin-right:15px;	 overflow:hidden;}
.news-more-list .news-entry.last {margin-right:0px;}
.news-more-list .image {	margin-bottom:2px;	}
.news-more-list .image a:hover {filter:Alpha(opacity=50);opacity:0.5;-moz-opacity:0.5;}


/* --- */



/*---------------------------------- products --------------------------------*/

.prod .title{font-size:35px; font-weight:bold; margin: 35px 15px 15px 0;  color:#000000;	float:left;}
.prod .name{	line-height: 38px;font-size:18px; margin: 35px 0 15px 0;  color:#ffffff;  background:#000000;	float:left; padding:0 15px;}
.prod .model {font-size:18px; margin: 15px 0 15px 0;  font-weight:bold;  color:#000000;}
.prod .description{line-height: 25px;}
.prod .image{margin: 35px 0 35px 0;}
.prod .function{line-height: 23px;font-size:15px; margin: 10px 0 10px 0;  color:#99cccc;  background:#f2f2ef; padding:0 5px;border: 1px solid #ececeb;}


.prod-info {	overflow: auto;	}
.prod-info > .left {	float: left;	width:330px;	overflow:hidden;margin-right: 20px;}
.prod-info > .right {}

.prods-info .image {	padding: 0 10px 10px 0;	text-align: left;}


/*---------------------------------- message --------------------------------*/

div#message_content {
float: left;
width:480px;
}

div#message_form {
margin-top:200px;
float: right;
width:380px;}



div#form_content {
padding: 100px  10px 10px 60px; }




/*---------------------------------- footer --------------------------------*/
div#footer {
    background:url(../image/footer_bg.png) top no-repeat;
	position:relative;
	height:100px;
	padding:80px 0 20px 0;
	color: #999999;
}
	
#footer_menu {
	margin:-8px 0 0 -15px;
	height:30px;
	color:#669966;
}

#footer_menu ul {
	margin: 10px;
}

#footer_menu > ul > li {
	float:left;
	padding-top:8px;
}

#footer_menu > ul > li > a {
	color: #999999;
	padding:0 15px;
	text-decoration: none;
}

#footer_menu > ul > li:hover > a {
	color: #ccbc7c;
}

div#footer_contact{
	margin-top:25px;
	float: left;
}

/*================================== footer products_list ======================*/
div#footer li.products:hover {
	background: url('../image/current_up.png') center 0 no-repeat;
}

div#footer .products_list {
	display:none;
	z-index:999999;
	background: url('../image/prod_list.png') 0 -28px no-repeat;
	position:absolute;
	left:-10px;
	top:-152px;
	width:1010px;
	height:224px;
}

div#footer .products_list li {
	float:left;
}

div#footer .products_list li a {
	height:196px;
	display:block;
}

div#footer .products_list li a.yj-pc {width:253px;}
div#footer .products_list li a.yj-b {width:253px;}
div#footer .products_list li a.yj-p {width:251px;}
div#footer .products_list li a.yj-f {width:253px;}

div#footer .products_list li a.yj-pc:hover {background: url('../image/prod_list_x.png') 	0 	0 no-repeat;}
div#footer .products_list li a.yj-b:hover  {background: url('../image/prod_list_x.png') -253px 	0 no-repeat;}
div#footer .products_list li a.yj-p:hover  {background: url('../image/prod_list_x.png') -506px 	0 no-repeat;}
div#footer .products_list li a.yj-f:hover  {background: url('../image/prod_list_x.png') -757px 	0 no-repeat;}

div#footer .products_list li a h2, div#footer .products_list li a p, div#footer .products_list li a em {
	display:block;
	text-indent:-9999px;
}
	
/*---------------------------------- google & TM--------------------------------*/


    img		{ max-width: 100%; height: auto; }
	
	img.scale-with-grid {
		max-width: 100%;
		height: auto; }
	.frame-scale-with-grid {
		max-width: 100%; }
		
	#google_map iframe {
		width: 100%;
		height: 350px;
		border:2px solid #dadad9;
		}
	

.button_google_but  a  {
	width: 72px;
	height: 16px;
	display: block;
	background: url('../image/google_map.png') center 7px no-repeat;
}
.button_google_but  a:hover  {
	background: url('../image/google_map.png') center -20px no-repeat;
}

	
	/* #Forms
================================================== */

	form {
		margin-bottom: 20px; }
	fieldset {
		margin-bottom: 20px; }
	input[type="text"],
	input[type="password"],
	input[type="email"],
	textarea,
	select {
		border: 1px solid #ccc;
		padding: 6px 4px;
		outline: none;
		-moz-border-radius: 2px;
		-webkit-border-radius: 2px;
		border-radius: 2px;
		font: 13px Arial, sans-serif;
		color: #777;
		margin: 0;
		width: 210px;
		max-width: 100%;
		display: block;
		margin-bottom: 20px;
		background: #fff; }
	select {
		padding: 0; }
	input[type="text"]:focus,
	input[type="password"]:focus,
	input[type="email"]:focus,
	textarea:focus {
		border: 1px solid #aaa;
 		color: #444;
 		-moz-box-shadow: 0 0 3px rgba(0,0,0,.2);
		-webkit-box-shadow: 0 0 3px rgba(0,0,0,.2);
		box-shadow:  0 0 3px rgba(0,0,0,.2); }
	textarea {
		min-height: 60px; }
	label,
	legend {
		display: block;
		font-weight: bold;
		font-size: 13px;  }
	select {
		width: 220px; }
	input[type="checkbox"] {
		display: inline; }
	label span,
	legend span {
		font-weight: normal;
		font-size: 13px;
		color: #444; }
		
		
		
		
/* #Buttons
================================================== */

.button, a.button,
	button,
	input[type="submit"],
	input[type="reset"],
	input[type="button"] {
		border-style: solid;
		border-width: 1px;
		-moz-border-radius: 2px;
		-webkit-border-radius: 2px;
		border-radius: 2px;
		
	/*	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset, 0 0; */
		background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0.1));
		background-image: -ms-linear-gradient(top, rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0.1));
		background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0.1));
		background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0.1));
		background-image: linear-gradient(top, rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0.1));
		background-repeat: repeat-x;
		border-color: rgba(0, 0, 0, 0.03) rgba(0, 0, 0, 0.05) rgba(0, 0, 0, 0.15);
		color: white;
		text-shadow: 0 -1px rgba(0, 0, 0, 0.2);
		background-color: #444;
		text-decoration: none;
		font-size: 15px;
		line-height: 15px;
		font-weight: 400;

		display: inline-block;
		cursor: pointer;
		padding: 8px 17px;
		
		-webkit-transition: all 0.2s linear;
		-moz-transition: all 0.2s linear;
		-ms-transition: all 0.2s linear;
		-o-transition: all 0.2s linear;
		transition: all 0.2s linear;
}

.rev_slider_wrapper .button, .rev_slider_wrapper a.button, .rev_slider_wrapper a.button:hover {
		text-shadow: 0 -1px rgba(0, 0, 0, 0.2);
		color: white;
}

.button:hover, a:hover.button,
	button:hover,
	input[type="submit"]:hover,
	input[type="reset"]:hover,
	input[type="button"]:hover {

		background-color: #9DD91F;
	  
	  }

.button:active,
	button:active,
	input[type="submit"]:active,
	input[type="reset"]:active,
	input[type="button"]:active {
		
		background-color: #444;
		
		}

	.button.full-width,
	button.full-width,
	input[type="submit"].full-width,
	input[type="reset"].full-width,
	input[type="button"].full-width {
		width: 100%;
		padding-left: 0 !important;
		padding-right: 0 !important;
		text-align: center; }

	/* Fix for odd Mozilla border & padding issues */
	button::-moz-focus-inner,
	input::-moz-focus-inner {
    border: 0;
    padding: 0;
	}



.button_pale, a.button_pale{
	color: #444;
	background-color: #f8f8f8;
	text-shadow: 0 1px 0 rgba(256, 256, 256, 0.2);
}	
a:hover.button_pale{
	color: #fff;
	background-color: #444;
	text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
}
.rev_slider_wrapper .button.button_pale, .rev_slider_wrapper a.button.button.button_pale{
	color: #444;
	text-shadow: none;
}

.rev_slider_wrapper a.button.button_pale:hover {
	color: #fff;
	background-color: #444;
	text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
}



input.button_hilite, a.button_hilite, .button_hilite{
	background-color: #9DD91F;
	text-shadow: 0 -1px rgba(0, 0, 0, 0.2);
}	
input.button_hilite:hover, a:hover.button_hilite, .button_hilite{
	background-color: #444;
}

.rev_slider_wrapper .button.button_hilite, .rev_slider_wrapper .button.button_hilite:hover {
	color: white;
}


/* Footer Soc Icons :: END */


.icon_phone {
	font-size: 13px;
	line-height: 24px;
	background: url('../image/icon_phone_h.png') left 4px no-repeat;
	padding: 0 0 0 30px;
	margin-bottom: 6px;
}

.icon_fax {
	font-size: 13px;
	line-height: 24px;
	background: url('../image/icon_fax.png') left 4px no-repeat;
	padding: 0 0 0 30px;
	margin-bottom: 6px;
}

.icon_mail {
	font-size: 13px;
	line-height: 24px;
	background: url('../image/icon_mail.png') left 5px no-repeat;
	padding: 0 0 0 30px;
	margin-bottom: 6px;
}
.icon_loc {
	font-size: 13px;
	line-height: 24px;
	background: url('../image/icon_location.png') left 3px no-repeat;
	padding: 0 0 0 30px;
	margin-bottom: 6px;
}

.icon_web {
	font-size: 13px;
	line-height: 24px;
	background: url('../image/icon_web.png') left 3px no-repeat;
	padding: 0 0 0 30px;
	margin-bottom: 6px;
}

/* --- form--*/

div#box_form{
        margin: 0 10px 0 0;
		border: 1px solid #e6e6e8; 
        -moz-border-radius: 2px; 
        -webkit-border-radius: 2px; ;
        border-radius:2px;
		
	/*	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset, 0 0; */
	/*漸層背景與多重背景影像 */
		background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0.1));
		background-image: -ms-linear-gradient(top, rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0.1));
		background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0.1));
		background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0.1));
		background-image: linear-gradient(top, rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0.1));
		background-repeat: repeat-x;
		border-color: rgba(0, 0, 0, 0.03) rgba(0, 0, 0, 0.05) rgba(0, 0, 0, 0.15);
		color: #cccccc;
		/*text-shadow: 0 -1px rgba(0, 0, 0, 0.2); */
		background-color: #fff;
		text-decoration: none;
		font-size: 14px;
		line-height: 18px;
		font-weight: ;
		cursor: pointer; /*滑鼠指標設定 */
		padding: 10px 18px;
		display: inline-block;   /*長度跟隨字數 
		-webkit-transition: all 0.2s linear;
		-moz-transition: all 0.2s linear;
		-ms-transition: all 0.2s linear;
		-o-transition: all 0.2s linear;
		transition: all 0.2s linear;*/
}

div#box_form_on{
margin: 0 10px 0 0;
background-color: #e60212; border: 1px solid #e6e6e8; 
-moz-border-radius: 2px; 
-webkit-border-radius: 2px; color:#000;
border-radius:2px;
padding: 10px 18px;
color: #fff;
display: inline-block; 
font-size: 14px;
 } 

div#box_form_pink{
background-color: #cc6699; border: 1px solid #e6e6e8; 
-moz-border-radius: 5px; 
-webkit-border-radius: 5px; color:#000;
border-radius:5px;
padding: 12px 13px;
 } 
 
 div#box_form_green{
background-color: #c6d4b3; border: 1px solid #e6e6e8; 
-moz-border-radius: 5px; 
-webkit-border-radius: 5px; color:#000;
border-radius:5px;
padding: 12px 13px;
 } 
 
 /*--        首頁用的 CSS --*/
 
 .in_column_bottom_padding {
	height: 0px;
	display:none;
}
 .in_column_bottom_padding {
	height: 16px;
	display:block;
}

.jcarousel-skin-opencart .jcarousel-item-horizontal img {
			max-width: 100%;
			height: auto;
			width: auto\9; /* ie8 */
		}
		
.jcarousel-skin-opencart .jcarousel-prev-horizontal {
		top: 50% !important;
		margin-top: -16px !important;
	}	
	
	.tab-content {
    border-top: 1px solid #DDDDDD;
	border-left: 1px solid #DDDDDD;
	border-right: 1px solid #DDDDDD;
	border-bottom: 1px solid #DDDDDD;
	padding: 18px;
	margin-bottom: 20px;
	z-index: 2;
	overflow: auto;
	-webkit-border-radius: 0 0px 4px 4px;
	-moz-border-radius: 0 0px 4px 4px;
	-khtml-border-radius: 0 0px 4px 4px;
	border-radius: 0 0px 4px 4px;
	color:#666666;	
	background-color:#f0f0f0;
}

/*================================== contact ===================================*/
.contact address {
	font-style:normal;
	float:left;
	margin-top:44px;
	margin-bottom:52px;
	width:381px;
	height:407px;
	border-right:1px solid #CCCCCC;
}

.contact address dt {
	line-height:50px;
}
.contact address dd {
	line-height:18px;
}

.contact form {
	margin-top:44px;
}

.contact form dt {
	float:left;
	width:215px;
	text-align:right;
	padding:7px 11px 0 0;
}


.text_01{font-size:16px; color:#d5391f;}