@charset "utf-8";
/* CSS Document */

@import url(http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300);

/*
@font-face {
  font-family: 'bureaugrotesque-fivethree';
  src: url("/fonts/BureauGrotesque-FiveThree.otf");
  font-weight: normal;
  font-style: normal; }
@font-face {
  font-family: NotoSansHant;
  src: url("//cct95api.s3.amazonaws.com/font/NotoSansTChinese-hinted/NotoSansHant-Light.otf") format("opentype");
  font-weight: normal;
  font-style: normal; }
*/


/* row */
.row.strict{ margin:0;}
.row.strict>div{ padding:0;}
.row.strict6 { margin:0 -6px;}
.row.strict6>div{ padding:0 6px;}
.row.strict7 { margin:0 -7px;}
.row.strict7>div{ padding:0 7px;}
.row.strict5 { margin:0 -5px;}
.row.strict5>div{ padding:0 5px;}
.row.strict10 { margin:0 -10px;}
.row.strict10>div{ padding:0 10px;}


/*.pic>img { width:100% !important;} */   /* for IE or FX */
.list-inline { margin-left: 0px; }

/* a:hover */
a:hover { text-decoration:none;}
.display_block { display:block;}

.clear {zoom:1; clear:both;} 
.clear:after {content:''; display:block; clear:both; visibility:hidden; height:0;}

/* border */
.noborder { border:none; }
.border_all { border:solid 1px #ccc;}
.border_bottom { border-bottom:solid 1px #ccc;}

/* 動畫效果 */
.animate3s_all {
 -webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	  -o-transition: all 0.3s ease-in-out;
		 transition: all 0.3s ease-in-out;}
.animate4s_all {
 -webkit-transition: all 0.4s ease-in-out;
	-moz-transition: all 0.4s ease-in-out;
	  -o-transition: all 0.4s ease-in-out;
		 transition: all 0.4s ease-in-out;}
.animate7s_all {
 -webkit-transition: all 0.7s ease-in-out;
	-moz-transition: all 0.7s ease-in-out;
	  -o-transition: all 0.7s ease-in-out;
		 transition: all 0.7s ease-in-out;}


/* .animate_hover_slide_2 */
.animate-hover-slide-2 .pic { position:relative; overflow:hidden; }
.animate-hover-slide-2 .pic img { position:relative; z-index:2;
-webkit-transition: -webkit-transform .4s, opacity .1s .3s;
   -moz-transition: -moz-transform .4s, opacity .1s .3s;
     -o-transition: -o-transform .4s, opacity .1s .3s;
        transition: transform 0.4s, opacity 0.1s 0.3s; }
.animate-hover-slide-2 .pic:hover img {
-webkit-transform: scale(.4);
   -moz-transform: scale(.4);
    -ms-transform: scale(.4);
        transform: scale(.4); }
.animate-hover-slide-2 .pic .figcaption { height: 100%; z-index:1; position:absolute; top:0; bottom:auto; background:#f8f8f8; padding:0 15px; width:100%; opacity:1;
-webkit-transform: scale(.4);
   -moz-transform: scale(.4);
    -ms-transform: scale(.4);
        transform: scale(.4);
-webkit-transition: -webkit-transform .4s, opacity .1s .3s;
   -moz-transition: -moz-transform .4s, opacity .1s .3s;
     -o-transition: -o-transform .4s, opacity .1s .3s;
        transition: transform 0.4s, opacity 0.1s 0.3s; }
.animate-hover-slide-2 .pic:hover .figcaption { opacity: 1;
-webkit-transform: scale(1);
   -moz-transform: scale(1);
    -ms-transform: scale(1);
       transform: scale(1); }
.animate-hover-slide-2 .pic .figcaption h2 { text-align: center; margin-top: 15px; }

/* 放大效果 */
.animate_sclae15{
-webkit-transform: scale(1, 1);
   -moz-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
     -o-transform: scale(1, 1);
        transform: scale(1, 1);}
.animate_sclae15:hover{
-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);}

/* 陰影效果 */
.shadow {  
 -webkit-box-shadow: 0 4px 16px rgba(0, 0, 0, .2);
    -moz-box-shadow: 0 4px 16px rgba(0 ,0, 0, .2);
         box-shadow: 0 4px 16px rgba(0, 0, 0, .2); }
.shadow_hover:hover {
 -webkit-box-shadow: 0 4px 16px rgba(0, 0, 0, .2);
    -moz-box-shadow: 0 4px 16px rgba(0 ,0, 0, .2);
         box-shadow: 0 4px 16px rgba(0, 0, 0, .2); }
/* 翻頁的陰影效果 */
.shadow_corner:before , .shadow_corner:after { content:""; display:block; position:absolute; z-index:-1; bottom:18px; width:70%; height:0; /*overflow:hidden;*/ clear:both; 
-webkit-box-shadow:0 0 6px 20px rgba(0,0,0,.3);
   -moz-box-shadow:0 0 6px 20px rgba(0,0,0,.3);
    -ms-box-shadow:0 0 6px 20px rgba(0,0,0,.3);
     -o-box-shadow:0 0 6px 20px rgba(0,0,0,.3);
	    box-shadow:0 0 6px 20px rgba(0,0,0,.3);}
.shadow_corner:before { left:28px; 
-webkit-transform:rotate(-3deg);
   -moz-transform:rotate(-3deg);
    -ms-transform:rotate(-3deg);
     -o-transform:rotate(-3deg);
        transform:rotate(-3deg);}
.shadow_corner:after { left:28px; 
-webkit-transform:rotate(-3deg);
   -moz-transform:rotate(-3deg);
    -ms-transform:rotate(-3deg);
     -o-transform:rotate(-3deg);
        transform:rotate(-3deg);}
		
.shadow_beside:before, .shadow_b:after { content:""; display:block; position:absolute; z-index:-1; top:40px; width:0; height:50%; /*overflow:hidden;*/ clear:both; 
-webkit-box-shadow:0 0 10px 20px rgba(0,0,0,.3);
   -moz-box-shadow:0 0 10px 20px rgba(0,0,0,.3);
    -ms-box-shadow:0 0 10px 20px rgba(0,0,0,.3);
     -o-box-shadow:0 0 10px 20px rgba(0,0,0,.3);
	    box-shadow:0 0 10px 20px rgba(0,0,0,.3);}
.shadow_beside:before { left:15px; 
-webkit-transform:rotate(-3deg);
   -moz-transform:rotate(-3deg);
    -ms-transform:rotate(-3deg);
     -o-transform:rotate(-3deg);
        transform:rotate(-3deg);}
.shadow_beside:after { right:15px;
-webkit-transform:rotate(3deg);
   -moz-transform:rotate(3deg);
    -ms-transform:rotate(3deg);
     -o-transform:rotate(3deg);
        transform:rotate(3deg);}
/* 底部圓陰影 */		
.shadow_bottom:before { content:""; display:block; position:absolute; z-index:-1; left:30px; top:0; width:70%; height:10px; /*overflow:hidden;*/ clear:both; 
-webkit-box-shadow:0 0 20px 20px rgba(0,0,0,.3);
   -moz-box-shadow:0 0 20px 20px rgba(0,0,0,.3);
    -ms-box-shadow:0 0 20px 20px rgba(0,0,0,.3);
     -o-box-shadow:0 0 20px 20px rgba(0,0,0,.3);
	    box-shadow:0 0 20px 20px rgba(0,0,0,.3);
-webkit-border-radius:50%;
   -moz-border-radius:50%;
    -ms-border-radius:50%;
     -o-border-radius:50%;
        border-radius:50%;}

/* 遮罩效果 */
.mask { position:absolute; bottom:0; width:100%; height:100%; }
.mask p { display:block; position:absolute; bottom:0; width:100%;}
.mask a { display:block; }

/* 圓角效果 */
.border_r_none { 
-webkit-border-radius:0px;
   -moz-border-radius:0px;
    -ms-border-radius:0px;
     -o-border-radius:0px;
        border-radius:0px;}
.border_r_5 { 
-webkit-border-radius:5px;
   -moz-border-radius:5px;
    -ms-border-radius:5px;
     -o-border-radius:5px;
        border-radius:5px;}
.border_r_3 {
-webkit-border-radius:3px;
   -moz-border-radius:3px;
    -ms-border-radius:3px;
     -o-border-radius:3px;
        border-radius:3px;}

/* CSS 箭頭 */
.arrow-up {
	width: 0; 
	height: 0; 
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	border-bottom: 10px solid #ccc;}
.arrow-down {
	width: 0; 
	height: 0; 
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	border-top: 10px solid #ccc;}
.arrow-right {
	width: 0; 
	height: 0; 
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
	border-left: 10px solid #ccc;}
.arrow-left {
	width: 0; 
	height: 0; 
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent; 
	border-right:10px solid #ccc;}
	
/* 叉叉close */
.corssline{ position:absolute; top:0; right:0; display:inline-block; }
.corssline_i { position:relative; text-align:center; width:40px; height:40px; display:block; }
.corssline_i:before,.remove_i:after { position:absolute; top:50%; content:" "; border-top:1px solid #5195ad; width:100%; }
.corssline_i:before { right:0;
-webkit-transform: rotate(-45deg);
   -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
        transform: rotate(-45deg);}
.corssline_i:after { left:0;
-webkit-transform: rotate(45deg);
   -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
        transform: rotate(45deg);}
	
/* filter 圖片灰階效果 */
.grayscale .pic>img {
  -webkit-filter: grayscale(1);
  -webkit-filter: grayscale(100%);
     -moz-filter: grayscale(100%);
      -ms-filter: grayscale(100%);
       -o-filter: grayscale(100%);
          filter: gray;}
.grayscale:hover .pic>img {
  -webkit-filter: grayscale(0);
     -moz-filter: grayscale(0);
      -ms-filter: grayscale(0);
       -o-filter: grayscale(0);
          filter: grayscale(0);
          filter: none;}
/* filter 圖片咖啡 */		  
.brownscale .pic>img {
-webkit-filter: sepia(1);
-webkit-filter: sepia(100%); /* Google Chrome, Safari 6+ & Opera 15+ */
   -moz-filter: sepia(100%);
    -ms-filter: sepia(100%);
     -o-filter: sepia(100%);
        filter: sepia(100%); /* IE6-9 */}
.brownscale .pic>img {
-webkit-filter: sepia(0); /* Google Chrome, Safari 6+ & Opera 15+ */
   -moz-filter: sepia(0);
    -ms-filter: sepia(0);
     -o-filter: sepia(0);
        filter: sepia(0);
        filter: none; /* IE6-9 */} 


/* 透明背景圖 */
.white_o_10{ background:url(../images/bg_w10.png);}
.white_o_20{ background:url(../images/bg_w20.png);}
.white_o_30{ background:url(../images/bg_w30.png);}
.white_o_40{ background:url(../images/bg_w40.png);}
.white_o_50{ background:url(../images/bg_w50.png);}
.white_o_60{ background:url(../images/bg_w60.png);}
.white_o_70{ background:url(../images/bg_w70.png);}
.white_o_80{ background:url(../images/bg_w80.png);}
.white_o_90{ background:url(../images/bg_w90.png);}

.black_o_10{ background:url(../images/bg_k10.png);}
.black_o_20{ background:url(../images/bg_k20.png);}
.black_o_30{ background:url(../images/bg_k30.png);}
.black_o_40{ background:url(../images/bg_k40.png);}
.black_o_50{ background:url(../images/bg_k50.png);}
.black_o_60{ background:url(../images/bg_k60.png);}
.black_o_70{ background:url(../images/bg_k70.png);}
.black_o_80{ background:url(../images/bg_k80.png);}
.black_o_90{ background:url(../images/bg_k90.png);}


/* 產品內頁 easyslide */
.easyslide{ position:relative; width:100%; z-index:100; overflow:hidden; }
.easyslide .cycle-prev, .easyslide .cycle-next { position:absolute; /*top:40%;*/ display:block; z-index:999; color:#8EC44A; filter:alpha(opacity=0); -moz-opacity:0; opacity:0; font-size:32px;      bottom:10%;}
.easyslide .cycle-prev { left:-40px; }
.easyslide .cycle-next { right:-40px; }
.easyslide:hover .cycle-prev, .easyslide:hover .cycle-next { filter:alpha(opacity=100); -moz-opacity:1; opacity:1; }
.easyslide:hover .cycle-prev { left:-3px; }
.easyslide:hover .cycle-next { right:-3px; }
.easyslide .photos { width:100%; margin:0; }
.easyslide .photos .cover { width:100%; margin:auto; height:340px; overflow:hidden; }
.easyslide .photos .item { width:100%; text-align:center; height:100%; }
.easyslide .photos .item img { /*max-height:100%;*/ display:inline-block; }

.easyslide .photos_pager { min-height:100px; /* width:100%; */ overflow:hidden;      margin:0 30.5px; }
.easyslide .cover_list { width:1000em; opacity:1; padding-top:10px; }
.easyslide .cover_list .cycle-slide{ display:inline-block; overflow:hidden; margin:0; padding:0; filter:alpha(opacity=60); -moz-opacity:0.6; opacity:0.6; margin-right:5px; }
/*.easyslide .cover_list .cycle-carousel-wrap { filter:alpha(opacity=100); -moz-opacity:1; opacity:1;}*/
.easyslide .cover_list .cycle-slide:hover, 
.easyslide .cover_list .cycle-slide.cycle-slide-active { filter:alpha(opacity=100); -moz-opacity:1; opacity:1; }