@charset "utf-8";
@import url(font-awesome.min.css);
@import url(animate.css);
@font-face {
/*明體*/
  font-family: 'cwTeXMing';
  font-style: normal;
  font-weight: 500;
  src: url(//fonts.gstatic.com/ea/cwtexming/v3/cwTeXMing-zhonly.eot);
  src: url(//fonts.gstatic.com/ea/cwtexming/v3/cwTeXMing-zhonly.eot?#iefix) format('embedded-opentype'),
       url(//fonts.gstatic.com/ea/cwtexming/v3/cwTeXMing-zhonly.woff2) format('woff2'),
       url(//fonts.gstatic.com/ea/cwtexming/v3/cwTeXMing-zhonly.woff) format('woff'),
       url(//fonts.gstatic.com/ea/cwtexming/v3/cwTeXMing-zhonly.ttf) format('truetype');
}
@font-face {
/*圓體*/
  font-family: 'cwTeXYen';
  font-style: normal;
  font-weight: 500;
  src: url(//fonts.gstatic.com/ea/cwtexyen/v3/cwTeXYen-zhonly.eot);
  src: url(//fonts.gstatic.com/ea/cwtexyen/v3/cwTeXYen-zhonly.eot?#iefix) format('embedded-opentype'),
       url(//fonts.gstatic.com/ea/cwtexyen/v3/cwTeXYen-zhonly.woff2) format('woff2'),
       url(//fonts.gstatic.com/ea/cwtexyen/v3/cwTeXYen-zhonly.woff) format('woff'),
       url(//fonts.gstatic.com/ea/cwtexyen/v3/cwTeXYen-zhonly.ttf) format('truetype');
}
/* =============================================================================
   BASIC
   ========================================================================== */
html, body { height: 100%; }
body { background: url(../images/body_bg.png) center top #f6f5f0; }
body, th, td, input { font-family: "Gill Sans", "Gill Sans MT", "微軟正黑體", "Microsoft Jhenghei", Helvetica, Arial, sans-serif; font-size: 15px; }
a { text-decoration: none; }
b { font-weight: normal; }
h1, h2, h3, h4, h5, h6 { font-weight: normal; }
h1 { font-size: 28px; font-family: "Gill Sans", "Gill Sans MT", "微軟正黑體", "Microsoft Jhenghei", Helvetica, Arial, sans-serif; color: #333; }
h2 { font-size: 24px; font-family: "Gill Sans", "Gill Sans MT", "微軟正黑體", "Microsoft Jhenghei", Helvetica, Arial, sans-serif; }
h3 { font-size: 22px; font-family: "Gill Sans", "Gill Sans MT", "微軟正黑體", "Microsoft Jhenghei", Helvetica, Arial, sans-serif; color: #333; }
h4 { font-size: 18px; font-family: "Gill Sans", "Gill Sans MT", "微軟正黑體", "Microsoft Jhenghei", Helvetica, Arial, sans-serif; color: #333; }
h5 { font-size: 16px; font-family: "Gill Sans", "Gill Sans MT", "微軟正黑體", "Microsoft Jhenghei", Helvetica, Arial, sans-serif; }
h6 { font-size: 15px; font-family: "Gill Sans", "Gill Sans MT", "微軟正黑體", "Microsoft Jhenghei", Helvetica, Arial, sans-serif; }
p { font-size: 14px; line-height: 1.8em; color: #434343; }
a:link, a:visited { text-decoration: none; cursor: pointer; }
.fitimg { position: relative; overflow: hidden; background: #FFF; text-align: center; }
.fitimg img { height: 100%; width: auto; -webkit-transition: 0.4s ease-in-out; -moz-transition: 0.4s ease-in-out; -ms-transition: 0.4s ease-in-out; -o-transition: 0.4s ease-in-out; transition: 0.4s ease-in-out; }
.fitimg a { display: block; }
.ie { position: fixed; width: 60%; height: 80%; padding: 10% 20%; text-align: center; left: 0; top: 0; background: #CCC; z-index: 9999; }
.ie h2, .ie h4 { color: #333 !important; }
.ie p { text-align: center; color: #333 !important; font-size: 13px; }
.ie a { color: #F36; }
.loading { position: fixed; width: 100%; height: 100%; left: 0; top: 0; background: url(../images/loading.gif) no-repeat center center #FFF; z-index: 2000; }
.html-lock { overflow: hidden !important; background-attachment: fixed !important; }
#wrapper { position: relative; z-index: 100; margin: 0 auto; width: 100%; min-width: 1200px; max-width: 1200px; min-height: 200px; }
.wrapper_bg { background: url(../images/wrapper_bg.png) no-repeat center 154px; }


/*FITIMG*/
.imgLiquidFill { opacity: 0; 
-webkit-transition: opacity 0.4s ease-in-out;
   -moz-transition: opacity 0.4s ease-in-out;
	-ms-transition: opacity 0.4s ease-in-out;
	 -o-transition: opacity 0.4s ease-in-out;
		transition: opacity 0.4s ease-in-out;
}
.imgLiquid_ready { opacity: 1; }

/*header*/

#header { position: relative; height: 110px; background: #FFF; margin: 18px 0; z-index: 1000; box-shadow: 0 4px 8px rgba(0,0,0,.3); }
#logo { position: absolute; top: 33px; left: 20px; }
#logo img { height: 42px; }

.slogan{ position: absolute; top: 24px; right: 20px;  font-family: 'cwTeXMing', serif; font-size:28px; color:#000; }

#top_menu { position: absolute; top: 70px; right: 0; }
#top_menu ul, #top_menu li { display: block; list-style: none; margin: 0; padding: 0; }
#top_menu>ul>li { float: left; padding: 0 20px 5px; text-align: center; height: 24px; position: relative; border-left:solid 1px #f2f2f2;}
#top_menu>ul>li:first-child{ border:none;}
#top_menu>ul>li a {  font-family:'cwTeXYen', serif; font-size:19px; color:#666;}
#top_menu>ul>li a:hover, #top_menu>ul>li.cur a{ color:#E64649;}


/*CONTENT*/

#content { background: #FFF; padding: 30px 20px; -webkit-box-shadow: 0 0 15px rgba(0,0,0,0.1); -moz-box-shadow: 0 0 15px rgba(0,0,0,0.1); box-shadow: 0 0 15px rgba(0,0,0,0.1); }
#content.home { background: #FFF; padding: 20px; }
#content.inner { padding: 20px; }
#full_block { min-height: 300px; }
#full_block img { max-width: 100%; height: auto; }
#left_block { width: 20%; float: left; min-height: 30px; padding: 0; }
#left_block.pro { padding: 20px 0; border-right: solid 1px #f2f2f2; }
#main_block { width: 78%; margin: 0 0 30px 0; float: right; min-height: 300px; position: relative; behavior: url(htc/PIE.htc); position: relative; z-index: 1; }
#news_main_block { width: 79%; margin: 0; float: right; min-height: 300px; padding: 0 0 20px 0; }
#path { position: absolute; top: 0; right: 20px; text-align: right; }
#path .title { font-size: 20px; margin: 0 0 5px 0; }
#path .txt { font-size: 18px; color:#333;}
#seach_box { height: 32px; border: solid 1px #CCC; margin: 0 10px; background: #FFF; }
#seach_box .t1 { border: none; padding: 0; margin: 0; height: 32px; line-height: 32px; text-indent: 5px; width: 76%; *width:65%;
float: left; font-size: 15px; color: #000; }
#seach_box .send { border: none; margin: 0; padding: 0; display: block; float: right; width: 32px; height: 32px; background: url(../images/search.png) no-repeat; }
#seach_box .send:hover { opacity: 0.8; }
#left_menu { padding: 0 20px; }
#left_menu ul, #left_menu li { display: block; list-style: none; margin: 0; padding: 0; }
#left_menu>ul>li>a { display: block; padding: 8px 10px; font-size: 17px; line-height: 24px; color: #333; }
#left_menu>ul.b1 { border-radius: 5px; padding: 20px 0; background: #FFF; behavior: url(htc/PIE.htc); position: relative; z-index: 1; }
#left_menu>ul.fit { padding: 20px 0; margin: 10px 0 0 0; background: #FFF; behavior: url(htc/PIE.htc); position: relative; z-index: 1; }
#left_menu>ul h3 { margin: 0 0 10px 0; text-align: left; padding: 0 0 0 10px; }
#left_menu>ul>li>a:hover { color: #000; }
#left_menu>ul>li.left_subheader>a i { display: block; width: 24px; height: 24px; float: right; background: url(../images/left_menu_filter.png) no-repeat 0 0; margin: 0; }
#left_menu>ul>li.left_subheader>a b { display: block; width: 24px; height: 24px; float: right; background: url(../images/left_menu_filter2.png) no-repeat 0 0; margin: 0 0 0 10px; opacity: 0.6; }
#left_menu>ul>li.left_subheader>a.on i { display: block; width: 24px; height: 24px; float: right; background: url(../images/left_menu_filter.png) no-repeat 0 -24px; }
#left_menu>ul>li.left_subheader.cur .submenu { display: block !important; }
#left_menu .submenu { display: none; width: 178px; max-height: 215px; overflow: auto; -webkit-overflow-scrolling: touch; }
#left_menu .submenu ul { padding: 10px 5px 10px 15px; }
#left_menu .submenu.on { display: block; padding: 0 10px; max-height: none; }
#left_menu.filter .submenu { max-height: none; }
#left_menu .submenu a { display: block; padding: 5px; background: #f2f2f2; border-radius: 2px; margin: 0 0 5px 0; font-size: 14px; text-align: center; color: #666; -webkit-transition: 0.4s ease-in-out; -moz-transition: 0.4s ease-in-out; -ms-transition: 0.4s ease-in-out; -o-transition: 0.4s ease-in-out; transition: 0.4s ease-in-out; }
#left_menu .submenu span { display: block; padding: 5px 10px; background: #e5e5e5; border-radius: 5px; margin: 0 0 5px 0; font-size: 16px; text-align: center; color: #666; }
#left_menu .submenu a:hover { background: #c72020; color: #FFF; }
#left_menu .submenu a.on { background: #CF0003; color: #FFF; }
#left_menu>ul>li>a.btn { border: solid 1px #666; border-radius: 2px; margin: 10px 0 0; font-size: 18px; padding: 10px 15px; background: #FFF; }
#left_menu>ul>li>a.btn:hover { background: #666; color: #FFF; }
#left_menu>ul>li>a.btn2 { border: solid 1px #CCC; border-radius: 10px; margin: 10px 0 0; font-size: 18px; padding: 10px; color: #999; }
#left_menu>ul>li>a.btn2:hover { background: #999; color: #FFF; }
#left_menu .submenu .send { display: block; width: 100%; line-height: 40px; height: 40px; background: #666; border-radius: 5px; margin: 0 0 5px 0; font-size: 15px; text-align: center; color: #FFF; border: none; -webkit-transition: 0.4s ease-in-out; -moz-transition: 0.4s ease-in-out; -ms-transition: 0.4s ease-in-out; -o-transition: 0.4s ease-in-out; transition: 0.4s ease-in-out; }
#left_menu .submenu .send:hover { background: #c72020; color: #FFF; }
#left_menu .links { padding: 15px 10px; }
#left_menu .links .send { display: block; padding: 10px 20px; background: #ca0f1b; color: #FFF; border-radius: 5px; text-align: center; font-size: 15px; }
#left_menu .links .send:hover { opacity: 0.8; }
#left_menu ul.top { background: #FFF; overflow: hidden; margin: 10px 0; }
#left_menu>ul.top>li>a { }
#left_menu>ul.top>li>a:hover { background: #f2f2f2; }
#left_menu ul.top .submenu a { }
#left_menu ul.top .submenu a:hover { background: #333; }
#left_menu ul.top a.goto { color: #000; font-size: 18px; margin-bottom: 15px; border-bottom: none; color:#BE1114;}
#left_menu ul.top a.goto i{ display: block; width: 24px; height: 24px; float: right; background: url(../images/left_menu_back.png) no-repeat 0 0; margin: 0; }
#left_menu ul.top li.goto_bar { border-bottom: solid 1px #333; margin-bottom: 15px; }
#left_menu li.number h5 { margin: 0; }
#left_menu li.number select { display: inline-block; width: 40%; padding: 5px 0; background: #FFF; border-radius: 5px; margin: 0 0 5px 0; font-size: 16px; text-align: left; color: #666; border: solid #CCC 1px; }
#left_menu li.number #price_1, #left_menu li.number #price_2 { display: inline-block; width: 40%; padding: 5px 0; background: #FFF; border-radius: 5px; margin: 0 0 5px 0; font-size: 16px; text-align: left; color: #666; border: solid #CCC 1px; }
/**/



#left_path { padding: 0 20px; }
#left_path ul, #left_path li { display: block; list-style: none; margin: 0; padding: 0; }
#left_path>ul>li>a { display: block; padding: 8px 10px; font-size: 17px; line-height: 24px; color: #333; }
#left_path>ul.b1 { padding: 20px 0; background: #FFF; }
#left_path>ul.fit { border: solid 1px #333; border-radius: 15px; padding: 20px 0; margin: 10px 0 0 0; background: #FFF; behavior: url(htc/PIE.htc); position: relative; z-index: 1; }
#left_path>ul h3 { margin: 0 0 10px 0; text-align: left; padding: 0 10px; }
#left_path>ul>li>a:hover { color: #000; }
#left_path>ul>li>a i { display: block; width: 24px; height: 24px; float: right; background: url(../images/left_menu_filter.png) no-repeat 0 0; margin: 0 0 0 10px; }
#left_path>ul>li>a b { display: block; width: 24px; height: 24px; float: right; background: url(../images/left_menu_filter2.png) no-repeat 0 0; margin: 0 0 0 10px; opacity: 0.6; }
#left_path>ul>li>a.on i { display: block; width: 24px; height: 24px; float: right; background: url(../images/left_menu_filter.png) no-repeat 0 -24px; }
#left_path>ul>li.cur .submenu { display: block !important; }
#left_path .submenu { display: none; max-height: 215px; overflow: auto; -webkit-overflow-scrolling: touch; }
#left_path .submenu ul { width: 170px; padding: 10px 5px 10px 15px; }
#left_path .submenu.on { display: block; padding: 0 10px; max-height: none; }
#left_path.filter .submenu { max-height: none; }
#left_path .submenu a { display: block; padding: 5px 10px; background: #e5e5e5; border-radius: 5px; margin: 0 0 5px 0; font-size: 15px; text-align: center; color: #666; -webkit-transition: 0.4s ease-in-out; -moz-transition: 0.4s ease-in-out; -ms-transition: 0.4s ease-in-out; -o-transition: 0.4s ease-in-out; transition: 0.4s ease-in-out; }
#left_path .submenu span { display: block; padding: 5px 10px; background: #e5e5e5; border-radius: 5px; margin: 0 0 5px 0; font-size: 16px; text-align: center; color: #666; }
#left_path .submenu a:hover { background: #c72020; color: #FFF; }
#left_path .submenu a.on { background: #CF0003; color: #FFF; }
#left_path>ul>li>a.btn { border: solid 1px #CCC; border-radius: 2px; margin: 10px 0 0; font-size: 18px; padding: 10px; background: #FFF; }
#left_path>ul>li>a.btn:hover { background: #666; color: #FFF; }
#left_path>ul>li>a.btn2 { border: solid 1px #CCC; border-radius: 2px; margin: 10px 0 0; font-size: 18px; padding: 10px; color: #999; }
#left_path>ul>li>a.btn2:hover { background: #999; color: #FFF; }
#left_path .submenu .send { display: block; width: 100%; line-height: 40px; height: 40px; background: #666; border-radius: 2px; margin: 0 0 5px 0; font-size: 15px; text-align: center; color: #FFF; border: none; -webkit-transition: 0.4s ease-in-out; -moz-transition: 0.4s ease-in-out; -ms-transition: 0.4s ease-in-out; -o-transition: 0.4s ease-in-out; transition: 0.4s ease-in-out; }
#left_path .submenu .send:hover { background: #c72020; color: #FFF; }
#left_path .links { padding: 15px 10px; }
#left_path .links .send { display: block; padding: 10px 20px; background: #ca0f1b; color: #FFF; border-radius: 5px; text-align: center; font-size: 15px; }
#left_path .links .send:hover { opacity: 0.8; }
#left_path ul.top { background: #DF2225; border-radius: 15px; overflow: hidden; margin: 10px 0; }
#left_path>ul.top>li>a { color: #FFF; }
#left_path>ul.top>li>a:hover { color: #FFF; background: #B51F24; }
#left_path ul.top .submenu a { background: #FFF; }
#left_path ul.top .submenu a:hover { background: #666; }
#left_path li.number h5 { margin: 0; }
#left_path li.number select { display: inline-block; width: 40%; padding: 5px 0; background: #FFF; border-radius: 5px; margin: 0 0 5px 0; font-size: 16px; text-align: left; color: #666; border: solid #CCC 1px; }
#left_path li.number #price_1, #left_path li.number #price_2 { display: inline-block; width: 40%; padding: 5px 0; background: #FFF; border-radius: 5px; margin: 0 0 5px 0; font-size: 16px; text-align: left; color: #666; border: solid #CCC 1px; }
#filter { display: none; background: #FFF; position: relative; padding: 30px 10px; margin: 0 }
#filter ul, #filter li { display: block; list-style: none; margin: 0; padding: 0; }
#filter>ul{ padding:20px 0; overflow:auto;}
#filter>ul>li { /*width: 13.28%;*/ width:19%; padding: 0 0.5%; float: left; height: 100%; }
#filter li.number { text-align: center; padding: 5px; background: #e5e5e5; border-radius: 5px; -webkit-transition: 0.4s ease-in-out; -moz-transition: 0.4s ease-in-out; -ms-transition: 0.4s ease-in-out; -o-transition: 0.4s ease-in-out; transition: 0.4s ease-in-out; }
#filter li a { display: block; }
#filter h1 { border-bottom: solid 1px #CCC; line-height: 2em; padding: 0 10px; }
#filter h3 { font-size: 17px; text-align: center; font-weight: bold; margin: 0 0 10px 0; }
#filter h3 i { display: block; width: 24px; height: 24px; float: right; margin: 0 -17px 0 0; background: url(../images/left_menu_filter2.png) no-repeat 0 0; }
#filter h3 span { font-size: 13px; }
#filter .filter_submenu a { display: block; padding: 5px 15px; background: #f2f2f2; border-radius: 2px; margin: 0 0 5px 0; font-size: 16px; text-align: center; color: #666; -webkit-transition: 0.4s ease-in-out; -moz-transition: 0.4s ease-in-out; -ms-transition: 0.4s ease-in-out; -o-transition: 0.4s ease-in-out; transition: 0.4s ease-in-out; }
#filter li.number input { display: inline-block; width: 40%; padding: 5px 0; background: #FFF; border-radius: 5px; margin: 0 0 5px 0; font-size: 16px; text-align: left; color: #666; border: none; }
#filter li.number select { display: inline-block; width: 40%; padding: 5px 0; background: #FFF; border-radius: 5px; margin: 0 0 5px 0; font-size: 16px; text-align: left; color: #666; border: none; }
#filter .filter_submenu a:hover { background: #666; color: #FFF; }
#filter .filter_submenu a.on { background: #CF0003; color: #FFF; }
#filter li.number.on { background: #CF0003; color: #FFF; }
#pro_box { padding:35px 20px 20px; position: relative; min-height: 600px; }
#pro_box h1 { }
#pro_box .filter_list { padding: 10px; margin: 0 0 -20px 0; }
#pro_box .filter_list>div { padding: 5px 10px; background: #666; color: #FFF; display: inline-block; margin: 5px; border-radius: 5px; }
#pro_box .list { padding: 40px 0 0 0; }
#pro_box .list a { display: block; width: 33.3333%; float: left; position: relative; margin: 20px 0; -webkit-transition: 0.4s ease-in-out; -moz-transition: 0.4s ease-in-out; -ms-transition: 0.4s ease-in-out; -o-transition: 0.4s ease-in-out; transition: 0.4s ease-in-out; }
#pro_box .list a .size { position: absolute; z-index: 1; bottom: 5px; left: 8px; background: #FFF; background: rgba(255,255,255,.3); color: #000; font-size: 14px; padding: 5px 6px; }
#pro_box .list a b { display: block; height: 180px; margin: 8px; }
#pro_box .list a:hover { z-index: 100; -moz-box-shadow: 0 0 20px rgba(0,0,0,.3); -o-box-shadow: 0 0 20px rgba(0,0,0,.3); box-shadow: none; -webkit-box-shadow: 0 0 20px rgba(0,0,0,.3); -webkit-transform: scale(1.05, 1.05); -moz-transform: scale(1.05, 1.05); -ms-transform: scale(1.05, 1.05); -o-transform: scale(1.05, 1.05); transform: scale(1.05, 1.05); }
#pro_box .list a:hover img { -webkit-transform: scale(1.1, 1.1); -moz-transform: scale(1.1, 1.1); -ms-transform: scale(1.1, 1.1); -o-transform: scale(1.1, 1.1); transform: scale(1.1, 1.1); }
#pro_box .forms { width: 45%; float: left; margin: 0 0 0 5%; position: relative; }
#pro_box .info { width: 45%; float: right; margin: 30px 0 0 0; position: relative; }
#footer { padding: 14px 10px; color: #000; }
#nav { position: relative; background: url(../images/nav_bg.jpg) repeat-x; padding: 60px 0 40px; margin: 0 -20px; }
#nav.page { margin: 0 -20px; }
#nav ul, #nav li { display: block; list-style: none; margin: 0; padding: 0; }
#nav>ul { width: 940px; margin: auto; padding: 0 0 0 20px; }
#nav>ul>li { float: left; width: 20%; }
#nav>ul>li>a { display: block; color: #666; font-size: 22px; margin: 0 0 15px 0;  font-family: 'cwTeXYen', serif; }
#nav>ul>li>a:hover { color: #000; }
#nav>ul>li .submenu a { font-size: 14px; color: #999; line-height: 1.4em; }
#nav>ul>li .submenu a:before { content: " - "; }
#nav>ul>li .submenu a:hover { color: #000; }
#copyright { float: right; color: #000; padding: 0 10px; }
#view_box_mask { position: fixed; z-index: 200; width: 100%; height: 100%; top: -110%; left: 0; }
#view_box { position: relative; z-index: 200; width: 96%; max-width: 840px; height: auto; min-height: 300px; max-height: 90%; margin: 2% auto; padding: 20px 0px; background: url(../images/ajax-loader.gif) no-repeat center center #FFF; overflow: auto; opacity: 0; }
#view_box .filter_list { padding: 10px; margin: -20px 0; overflow: auto; }
#view_box .filter_list>div { padding: 5px 10px; background: #666; color: #FFF; display: inline-block; margin: 5px; border-radius: 5px; float: left; }
#view_box .close { position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; background: url(../images/btn_close.png) no-repeat; cursor: pointer; }
#view_box .icon { float: left; padding: 0px 10px 0 0; height: 100%; }
#view_box h1 { padding: 10px 0 0; }
#view_box p { line-height: 1.5em; }
#view_box .cover { filter: alpha(opacity=0); opacity: 0; margin: 30px 20px 20px; height: 500px; max-height: 70%; position: relative; overflow: hidden; -webkit-transition: 0.4s ease-in-out; -moz-transition: 0.4s ease-in-out; -ms-transition: 0.4s ease-in-out; -o-transition: 0.4s ease-in-out; transition: 0.4s ease-in-out; }
#view_box .cover>.item { width: 100%; height: 100%; height: 500px; line-height: 500px; text-align: center; }
#view_box .cover>.item img { margin: auto; left: 0 !important; top: 0 !important; height: 100%; width: auto; }
#view_box .info { padding: 0 20px; position: relative; }
#view_box .info .size { position: absolute; top: -15px; right: 30px; color: #666; font-size: 15px; }
#view_box .cover .prevControl { position: absolute; width: 30%; height: 100%; left: 0; top: 0; background: url(../images/prevControl.png) no-repeat 0% center; z-index: 500; cursor: pointer; opacity: 0.2; }
#view_box .cover .nextControl { position: absolute; width: 30%; height: 100%; right: 0; top: 0; background: url(../images/nextControl.png) no-repeat 100% center; z-index: 500; cursor: pointer; opacity: 0.2; }
#view_box .cover .prevControl:hover, #view_box .cover .nextControl:hover { opacity: 1; }
#view_box .cover .custom { position: absolute; bottom: 0; left: 0; width: 100%; background: #000; background: rgba(255,255,255,.1); color: #000; margin: 0; z-index: 1000; }
#view_box .cover .custom h3 { display: block; float: left; padding: 10px; color: #000; margin: 0; font-size: 16px; width: 80%; }
#view_box .cover .custom .right { display: block; float: right; padding: 10px; color: #000; margin: 0; font-size: 16px; }
#view_box .path { position: absolute; top: 10px; left: 30px; }
#view_box .path .title { font-size: 16px; padding: 10px; float: left; border-right: solid 1px #f2f2f2; }
#view_box .path .txt { font-size: 16px; padding: 10px; float: left; }
#intro_box { width: 100%; max-width: 1200px; min-width: 1000px; margin: 1% auto; }
#intro { width: 100%; }
body.intro { background: #FFF; }
#about_box { position: relative; }
#about_box img { max-width: 100%; height: auto !important; }
#store_box { position: relative; }
#store_box .menu { position: absolute; top: 30px; left: 80px; }
#store_box .menu h1 { color: #000; float: left; padding: 0 15px 0 0; margin: 0; line-height: 30px; font-size: 16px; }
#store_box .menu select { float: left; height: 30px; margin: 0; border: none; padding: 0 5px; }
#store_box img { max-width: 100%; }
#left_news_menu { padding: 20px 10px 0 25px; }
#left_news_menu.customer { padding: 115px 20px 20px 20px; }
#left_news_menu ul, #left_news_menu li { display: block; list-style: none; margin: 0; padding: 0; position: relative; border-bottom:solid 1px #f2f2f2;}
#left_news_menu li a { display: block; padding: 12px 0; color: #333; font-size: 18px; opacity: 0.8; -webkit-transition: all 500ms cubic-bezier(0.680, 0, 0.265, 1); /* older webkit */ -webkit-transition: all 500ms cubic-bezier(0.680, -0.550, 0.265, 1.550); -moz-transition: all 500ms cubic-bezier(0.680, -0.550, 0.265, 1.550); -o-transition: all 500ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: all 500ms cubic-bezier(0.680, -0.550, 0.265, 1.550); /* easeInOutBack */ -webkit-transition-timing-function: cubic-bezier(0.680, 0, 0.265, 1); /* older webkit */ -webkit-transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550); -moz-transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550); -o-transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550); transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550); /* easeInOutBack */ }
#left_news_menu li a:before{ position:relative; z-index:10; content: "\f105"; font-family: FontAwesome; font-style: normal; font-weight: normal; text-decoration: inherit; color:#999; font-size:16px; float:right; margin:0 10px 0 0;}

#left_news_menu li a:hover, #left_news_menu li a.cur { opacity: 1; }
#news_box { background: url(../images/news_box_bg.png) no-repeat center 0; height: 399px; }
#news_box ul { padding: 20px; }
#news_box li { padding: 0; margin: 0; line-height: 1.5em; color: #78B51E; font-size: 15px; }
#news_box li.c2 { color: #9C2F05; }
#brand_box { padding: 24px 0; }
#brand_box h1 { margin: 0 0 5px 0; text-align: center;  font-family: 'cwTeXMing', serif; font-size:24px;  letter-spacing: 0.2em;}
#brand_box h2 { font-size: 20px; color: #000; text-align: center; letter-spacing: 0.2em; margin: 0 0 24px 0; }
#brand_box ul, #brand_box li { display: block; list-style: none; margin: 0; padding: 0; position: relative; }
#brand_box ul { position: relative; }
#brand_box li { width: 25%; float: left; position: relative; }
#brand_box li:before { content: ". . ."; counter-increment: item; position: absolute; bottom: 4px; left: 1px; color: #999; }
#brand_box li .pic { display: block; padding: 0 16px 0 0; margin: 0 0 18px 0; position: relative; z-index: 0; height: 225px; overflow: hidden; -webkit-transition: all 500ms cubic-bezier(0.680, 0, 0.265, 1); /* older webkit */ -webkit-transition: all 500ms cubic-bezier(0.680, -0.550, 0.265, 1.550); -moz-transition: all 500ms cubic-bezier(0.680, -0.550, 0.265, 1.550); -o-transition: all 500ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: all 500ms cubic-bezier(0.680, -0.550, 0.265, 1.550); /* easeInOutBack */ -webkit-transition-timing-function: cubic-bezier(0.680, 0, 0.265, 1); /* older webkit */ -webkit-transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550); -moz-transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550); -o-transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550); transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550); /* easeInOutBack */ }
#brand_box li .pic img { width: 100%; height: auto; }
#brand_box li .pic:hover { -webkit-transform: scale(1.1, 1.1); -moz-transform: scale(1.1, 1.1); -ms-transform: scale(1.1, 1.1); -o-transform: scale(1.1, 1.1); transform: scale(1.1, 1.1); }
#brand_box li h3 { font-size: 18px; padding: 0 16px 0 0; margin: 0 0 8px 0; }
#brand_box li p { display: block; font-size: 13px; padding: 0 16px 0 0; line-height: 1.5em; height: 4.5em; overflow: hidden; }
#brand_box li.last .pic { padding: 0; }
#brand_box li.last h3 { padding: 0; }
#brand_box li.last p { padding: 0; }
#follow_box { padding: 40px 0; text-align: center; }
#follow_box h4 { font-size: 24px; font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif; letter-spacing: 2px; color: #666; }
#follow_box p { }
#ad_box { position:relative; padding: 0 0 10px 0; height: 230px; }
#ad_box ul{ display:block; margin:0 -10px; list-style:none;}
#ad_box ul li{ width:33.3%; float:left;}
#ad_box ul li a{ display:block; margin:0 10px;}
#ad_box ul li a img{ max-width:100%;}

.features_list_box { padding: 24px 0; }
.features_list_box h1 { margin: 0 0 5px 0; text-align: center; }
.features_list_box h2 { font-size: 20px; color: #000; text-align: center; letter-spacing: 0.2em; margin: 0 0 24px 0; }
.features_list_box ul, .features_list_box li { display: block; list-style: none; margin: 0; padding: 0; position: relative; }
.features_list_box ul { position: relative; }
.features_list_box li { width: 33.3%; float: left; position: relative; }
.features_list_box li>a { display: block; padding:10px; background:#FFF; position: relative; z-index: 0; overflow: hidden; -webkit-transition: all 500ms cubic-bezier(0.680, 0, 0.265, 1); /* older webkit */ -webkit-transition: all 500ms cubic-bezier(0.680, -0.550, 0.265, 1.550); -moz-transition: all 500ms cubic-bezier(0.680, -0.550, 0.265, 1.550); -o-transition: all 500ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: all 500ms cubic-bezier(0.680, -0.550, 0.265, 1.550); /* easeInOutBack */ -webkit-transition-timing-function: cubic-bezier(0.680, 0, 0.265, 1); /* older webkit */ -webkit-transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550); -moz-transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550); -o-transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550); transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550); /* easeInOutBack */ }
.features_list_box li>a>div{ height:200px; overflow:hidden;}
.features_list_box li>a img { width: 100%; height: auto; }
.features_list_box li>a:hover {
-webkit-transform: scale(1.1, 1.1);
   -moz-transform: scale(1.1, 1.1);
    -ms-transform: scale(1.1, 1.1);
	 -o-transform: scale(1.1, 1.1);
	    transform: scale(1.1, 1.1);
box-shadow:0 0 10px rgba(0,0,0,.3); z-index:1;}
.features_list_box li h3 { font-size: 18px; padding: 0; margin: 5px 0; text-align:center;}



#map_box { padding: 0 0 40px 0; overflow: auto; }
#map_box .map { width: 660px; float: left; }
#map_box .info { width: 465px; height: 430px; overflow: auto; float: right; }
#map_box .info h4 { font-size: 18px; margin: 0 0 10px 0; }
#map_box .info p { margin: 0; font-size: 13px; line-height: 1.2em; }
#map_box .info p a { display: block; float: left; padding: 5px 10px; color: #000; }
#map_box .info p a:hover { background: #f2f2f2; }
#map_box .info li { font-size: 13px; line-height: 1.2em; }
.mask { display: none; position: fixed; z-index: 100; width: 100%; height: 100%; top: 0; left: 0; background: #333; background: rgba(0,0,0,.5); }
/*STYLE*/

.btn_send, .btn_send:visited { display: inline-block; border: none; padding: 0 20px; line-height: 36px !important; font-size: 18px; color: #fff; position: relative\0/; z-index: 1\0/; *position: relative;
*z-index: 1;
*height: 36px;
cursor: pointer; border-radius: 5px; background: -webkit-gradient(linear, 0 0, 0 bottom, from(#B51F24), to(#ee4444)); background: -webkit-linear-gradient(#B51F24, #ee4444); background: -moz-linear-gradient(#B51F24, #ee4444); background: -ms-linear-gradient(#B51F24, #ee4444); background: -o-linear-gradient(#B51F24, #ee4444); background: linear-gradient(#B51F24, #ee4444); }
.btn_send:hover, .btn_send:active { background: #333; color: #fff; text-decoration: none; }
.slideshow { position: relative; max-height: 365px; }
.slideshow img { width: 100%; height: auto; }
.btn_back, .btn_back:visited { display: inline-block; border: none; padding: 0!important; width: 87px; text-align: center; margin: 0 10px 0 0; line-height: 26px !important; font-size: 18px !important; background: url(../images/btn_back.jpg) no-repeat; color: #fff !important; position: relative\0/; z-index: 1\0/; *position: relative;
*z-index: 1;
*height: 26px;
cursor: pointer; border: none !important; }
.btn_back:hover, .btn_back:active { opacity: .8; filter: alpha(opacity=80); color: #FFF; }
.btn_send2, .btn_send2:visited { display: inline-block; border: none; padding: 0!important; width: 120px; text-align: center; margin: 0 10px 0 0; line-height: 26px !important; font-size: 18px !important; background: url(../images/btn_send.jpg) #999 no-repeat; color: #fff !important; position: relative\0/; z-index: 1\0/; *position: relative;
*z-index: 1;
*height: 26px;
cursor: pointer; border: none !important; }
.btn_send2:hover, .btn_send2:active { opacity: .8; filter: alpha(opacity=80); color: #FFF; }
.pager_bar { padding: 20px 10px; text-align: right; }
.pager_bar.filter { position: absolute; top: 8px; right: 15px; width: 50%; }
.pager_bar a { display: inline-block; padding: 0 2%; border: solid 1px #999; line-height: 46px; margin: 0 4px 0 0; color: #333; border-radius: 2px;}
.pager_bar a:hover, .pager_bar a.cur { color: #FFF; background: #ca0f1b; border: solid 1px #ca0f1b; }
.pager_bar a.send { display: inline-block; padding: 0 20px; border: solid 1px #c5c5c5; line-height: 50px; margin: 0 4px 0 0; background: #ca0f1b; color: #FFF; }
.pager_bar a.send:hover { color: #FFF; background: #000; border: solid 1px #ca0f1b; }
.pager_bar .tip { display: inline-block; padding: 0 2.5%; line-height: 50px; color: #333; font-size: 20px; }
.forms { max-width: 100%; overflow: auto; -webkit-overflow-scrolling: touch; }
.forms>dl { display: block; width: 100%; padding: 5px 0; }
.forms>dl>dt, #contact_box .forms>dl>dd { display: block; width: 100%; position: relative; font-size: 14px; }
.forms>dl>dd.right { text-align: right; }
.forms>dl>dd.center { text-align: center; }
.forms .t1 { width: 94%; max-width: 400px; }
.forms .t2 { width: 94%; max-width: 400px; height: 120px; }
.forms .t3 { width: 130px; max-width: 320px; margin: 5px 0; height: 26px; }
.forms .t4 { width: 30%; margin: 1% 0; }
.forms .code { float: left; margin: 5px 5px 5px 0; }
.left_customer { position: absolute; z-index: 1; left: 0; bottom: 50px; }



::-webkit-input-placeholder { color:#333;}
:-moz-placeholder { color:#333;}
::-moz-placeholder {color:#333;}
:-ms-input-placeholder {color: #333;}
#detail_two { opacity: 0; -webkit-transition: 0.4s ease-in-out; -moz-transition: 0.4s ease-in-out; -ms-transition: 0.4s ease-in-out; -o-transition: 0.4s ease-in-out; transition: 0.4s ease-in-out; }
/* prev / next links */



.cycle-slideshow { -webkit-perspective: 1000; -webkit-transform-style: preserve-3d; -moz-perspective: 1000; -moz-transform-style: preserve-3d; -o-perspective: 1000; -o-transform-style: preserve-3d; perspective: 1000; transform-style: preserve-3d; }
.cycle-prev, .cycle-next { position: absolute; top: 0; width: 30%; opacity: 0; filter: alpha(opacity=0); z-index: 800; height: 100%; cursor: pointer; }
.cycle-prev { left: 0; background: url(../images/left.png) 10% 50% no-repeat; }
.cycle-next { right: 0; background: url(../images/right.png) 90% 50% no-repeat; }
.cycle-prev:hover, .cycle-next:hover { opacity: .7; filter: alpha(opacity=70) }
.disabled { opacity: .5; filter: alpha(opacity=50); }

.view{ text-align:justify;}
.view h1 { font-size: 24px; font-family: "Gill Sans", "Gill Sans MT", "微軟正黑體", "Microsoft Jhenghei", Helvetica, Arial, sans-serif; color: #333; margin:0 0 20px;}
.view h2 { font-size: 22px; font-family: "Gill Sans", "Gill Sans MT", "微軟正黑體", "Microsoft Jhenghei", Helvetica, Arial, sans-serif; margin:0 0 20px;}
.view h3 { font-size: 20px; font-family: "Gill Sans", "Gill Sans MT", "微軟正黑體", "Microsoft Jhenghei", Helvetica, Arial, sans-serif; color: #333; margin:0 0 20px;}
.view h4 { font-size: 18px; font-family: "Gill Sans", "Gill Sans MT", "微軟正黑體", "Microsoft Jhenghei", Helvetica, Arial, sans-serif; color: #333; margin:0 0 20px;}
.view h5 { font-size: 16px; font-family: "Gill Sans", "Gill Sans MT", "微軟正黑體", "Microsoft Jhenghei", Helvetica, Arial, sans-serif; margin:0 0 20px;}
.view h6 { font-size: 15px; font-family: "Gill Sans", "Gill Sans MT", "微軟正黑體", "Microsoft Jhenghei", Helvetica, Arial, sans-serif; margin:0 0 20px;}
.view li{ margin:0 0 20px 0;}


/*NEW UPDATE*/

#banner{ height:480px;}


.tip_box{ position:relative; padding:10px 10px 10px 40px; border-radius:10px; margin:0 0 24px 0; background:#535EBA; color:#FFF; font-size:15px; }
.tip_box ul{ display:block; list-style:none; margin:0; white-space:nowrap;}
.tip_box ul li{ display:inline-block; padding:0 5px;}
.tip_box ul li:before{ font-size:16px; color:#FFF;
	content: "\f0da"; font-family: FontAwesome; font-style: normal; font-weight: normal; text-decoration: inherit; 
}
.tip_box:before{font-size:16px; color:#FFF; position:absolute; top:14px; left:15px;
	content: "\f0a1"; font-family: FontAwesome; font-style: normal; font-weight: normal; text-decoration: inherit; 
}

.page_title{ padding:10px 0 20px; margin:30px 24px; border-bottom:solid 1px #f2f2f2;  }
.page_title h1{ font-family: 'cwTeXYen', serif; font-size:30px; margin:0; float:left;}
.page_title h1:first-letter{ color:#006bcc;}
.page_title h1.s1:first-letter{ color:#E64649;}
.page_title h1.s2:first-letter{ color:#00AAC9;}
.page_title h2{ float:right; font-size:17px; color:#333; font-family: 'cwTeXMing', serif; letter-spacing:2px;}

/*RWD*/



@media only screen and (max-width: 1120px) {
}

@media only screen and (max-width: 800px) {
}

@media only screen and (max-width: 480px) {
}