@charset "utf-8";
/* =============================================================================
   BASIC
   ========================================================================== */
html, body { height: 100%; }
body { background: #FFF;}
body, th, td, input, p { font-family:"Hiragino Kaku Gothic Pro","微軟正黑體","Microsoft Jhenghei",Helvetica,Arial,sans-serif; font-size:15px;}
h1 { font-family:"Hiragino Kaku Gothic Pro","微軟正黑體","Microsoft Jhenghei",Helvetica,Arial,sans-serif; font-weight:normal;}
h2 { font-family:"Hiragino Kaku Gothic Pro","微軟正黑體","Microsoft Jhenghei",Helvetica,Arial,sans-serif; font-weight:normal;}
h3 { font-family:"Hiragino Kaku Gothic Pro","微軟正黑體","Microsoft Jhenghei",Helvetica,Arial,sans-serif; font-weight:normal;}
h4 { font-family:"Hiragino Kaku Gothic Pro","微軟正黑體","Microsoft Jhenghei",Helvetica,Arial,sans-serif; font-weight:normal;}
h5 { font-family:"Hiragino Kaku Gothic Pro","微軟正黑體","Microsoft Jhenghei",Helvetica,Arial,sans-serif; font-weight:normal;}
h6 { font-family:"Hiragino Kaku Gothic Pro","微軟正黑體","Microsoft Jhenghei",Helvetica,Arial,sans-serif; font-weight:normal;}
a:link, a:visited { cursor:pointer; text-decoration: none;}
a { color: #000; }
a:focus, a:hover { color: #666; }
.cboxPhoto{}
img{ max-width:100%;
-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;
}

img.zoom: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 30px rgba(0,0,0,.5);
  } 

#wrapper{ width:954px; margin:auto; padding:130px 0 60px 0; position:relative;}
#header{ padding:30px 20px;}

#banner{ margin:-130px 0 0 0;}


#content{ border:solid 2px #E78BB1; background:url(../images/content_bg.png) repeat-x 0 650px; border-radius:30px;  padding:20px 0 0; margin:0;}

.inner{ width:878px; margin:auto; text-align:center; background:#FFF; padding:20px 0;}
.title_1{ background:#e5e4e2; padding:10px; text-align:left; width:740px; margin:0 auto;}
.title_1 h1{ font-size:28px; margin:0 0 10px 0;}
.title_1 p{ font-size:14px; margin:0;}

#cha_box{ position:relative; z-index:1;  background: url(../images/t1.png) no-repeat #fff; height:123px;}
#cha_box p.l1{ padding:25px 0 0 110px; display:block; margin:0; float:left; width:140px; font-size:14px; line-height:1.4em;}
#cha_box p.l2{ padding:35px 0 0 110px; display:block; margin:0; float:left; width:130px; font-size:14px; line-height:1.4em;}
#cha_box p.l3{ padding:35px 0 0 110px; display:block; margin:0; float:left; width:120px; font-size:14px; line-height:1.4em;}
#cha_box p.l4{ padding:35px 0 0 100px; display:block; margin:0; float:left; width:120px; font-size:14px; line-height:1.4em;}

#cha_box2 ol, #cha_box2 li{ display:block; list-style:none; margin:0; padding:0; line-height:1.4em;}
#cha_box2{ background:url(../images/cha_box_p1.jpg) center 0 no-repeat #fff; height:430px; position:relative; width:878px; margin:auto;}
#cha_box2 .l1{ position:absolute; top:365px; left:75px; font-size:13px;}
#cha_box2 .l2{ position:absolute; top:205px; left:470px; font-size:13px;}
#cha_box2 .l3{ position:absolute; top:365px; left:470px; font-size:13px;}

#info_box { padding:20px;}

#info_box h1{ padding:10px; background:#ED4A8C; color:#FFF;}
#info_box .pic{ width:48%; float:left; padding:1%; overflow:hidden;}
#info_box .pic img{ width:100%; height:260px;}
#info_box .pic b{ height:60px; display:block; font-size:16px; padding:5px;}


#pro_list{ padding:0 0 10px 0; width:878px; margin:auto; background:#FFF;}
#pro_list ul, #pro_list li{ display:block; padding:0; margin:0; list-style:none;}
#pro_list li{ width:23%; padding:1%; float:left;}
#pro_list li.cover, #pro_list li.info{ width:48%; padding:1%;}
#pro_list li.info h2{ font-weight:bold; font-size:34px;  margin:0 0 10px 0;}
#pro_list li.info p{ font-size:15px; margin:0; line-height:18px;}
#pro_list li img{ width:100%;}
#pro_list li a{ display:block; text-align:center; border:2px #FFF solid; position:relative; font-size:13px; height:210px;
-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_list li a span{ font-size:12px;}
#pro_list li a i{ display:block; width:55px; height:42px; background:url(../images/list_hover.png) no-repeat; z-index:100; position:absolute; top:-13px; right: -2px; opacity:0;  filter:alpha(opacity=0); 
-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 */
}
#pro_list li a:hover{ border:2px #ED4A8C solid;}
#pro_list li a:hover i{ opacity:1;  filter:alpha(opacity=100);  top:-33px;}

#pro_list li a img{ 
-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_list li a:hover img{ opacity:.85;  filter:alpha(opacity=85); }


/*STYLE*/
.fitimg{ display:block; position:relative; overflow:hidden;}
.fitimg img{ opacity:0;  filter:alpha(opacity=0); }
.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;}
.more{ width:230px; height:294px; position:fixed; right:1%; bottom:30px; z-index:100; display:none;}
.more2{ width:230px; height:294px; position:fixed; left:1%; bottom:30px; z-index:100; display:none;}
.top{ width:46px; height:47px; position:fixed; left:50%; bottom:10px; margin:0 0 0 -23px; z-index:100; display:none; background:#FFF; background:rgba(255,255,255,.5); padding:20px;}
.top:hover{ background:rgba(255,255,255,1);}