/*全站*/
html, body { font-family:"Roboto","Microsoft JhengHei" ,Arial, sans-serif; font-size:15px; }
body { background:url(bg_all.jpg) center top no-repeat}
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 , .container-fluid{padding:0}
.sb-site, .sb-site-container{ background:none}
// Mixin itself
@mixin clearfix() {
&::after {
display: block;
content: "";
clear: both;
}
}
// Usage as a mixin
.element {
@include clearfix;
}
.row{margin:0}
img { max-width:100%; }
.hideobj{
display:none;
}
a{
color:#000;
background-color:none;
}
a:hover, a:focus {text-decoration:none; outline: none}
.breadcrumb>li+li:before{background:none; color:#000;}
/*æœƒå“¡ç™»å…¥é …ç›®*/
#login-tabs li{
background:none;
}
#login-tabs a{
color:#000;
background:none;
}
#login-tabs a:hover,#login-tabs a:focus{
text-decoration: underline;
background:none;
color:#000;
}
/**è¡¨å–®å…ƒç´ **/
fieldset.over-border {
border: 1px solid #ccc !important;
padding: 0 1.4em 1.4em 1.4em !important;
margin: 0 0 1.4em 0 !important;
border-radius: 5px;
}
legend.line-border {
font-size: 16px !important;
text-align: left !important;
width:inherit;
border-bottom:none; display:none;
}
fieldset > div { margin-top:30px; }
.red{
color: #cc0000;
}
.radio-inline input[type='radio'] {
margin-left: -20px;
float: left;
}
.radio-inline {
padding-left: 20px;
font-weight: normal;
margin-bottom: 0px;
vertical-align: middle;
display: inline-block;
cursor: pointer;
}
.help-inline{
vertical-align: middle;
display: inline-block;
padding-top:5px;
float:left;
padding-left:0px;
cursor: default;
}
.control-label{
cursor: default;
}
.form-show .input-prepend {
clear:both;
}
fieldset.instep-border {
border: 1px solid #ccc !important;
padding: 0 16px 16px 16px !important;
margin: 0 0 16px 0 !important;
border-radius: 15px; /*圓角*/
background:#eeeeee;
height:100px;
font-weight:bold;
color:#000000;
text-align: center;
}
fieldset.step-border {
border: 1px solid #ccc !important;
padding: 0 16px 16px 16px !important;
margin: 0 0 16px 0 !important;
border-radius: 15px; /*圓角*/
height:100px;
text-align: center;
}
legend.stepline-border {
text-align: center !important;
width:inherit;
border-bottom:none;
}
.enlarge{clear:both;}
@media only screen and (max-width : 480px) {
.navbar-inner li {display:block; width:100%;}
}
/*#header*/
/*註冊*/
#hello_member ul li a:hover, #hello_member ul li a:focus, #hello_member ul li a:active {
text-decoration: underline;
background: none;
}
/*語言*/
#language_area ul li a {
color:#000;
background:none;
}
#language_area ul li a:hover, #language_area ul li a:focus, #language_area ul li a:active {
background: none;
text-decoration: underline;
}
#mainbanner{
padding-top:0; text-align: center
}
/*--å´æ¬„--*/
#sidebar {
padding:10px 0px
}
#sidebar .nav-header{
background:none;
font-size:36px;
}
#sidebar .nav-header:first-letter{color:#e60012}
/*RSS*/
#rss_area a{
text-shadow: none;
}
#rss_area a:hover{
text-shadow: none;
}
/*--內容å€--*/
#content{
padding:10px 0px 50px;
}
/*麵包屑*/
#content .breadcrumb {
text-shadow: none;margin:0; float:right; background:none
}
#content .breadcrumb li {
text-shadow: none;
}
#content .breadcrumb li a {
text-shadow:none;
text-decoration: none;
}
#content .breadcrumb li a:hover {
text-shadow: none;
background:none;
text-decoration: underline;
}
#content .breadcrumb li .divider{
text-shadow:none;
background:none;
}
.dropdown-menu .divider{ display:none}
/*個數*/
.page-header {
border-bottom:0; text-align: center
}
/*產å“é */
.thumbnail {
border:0;padding:0;border-radius: 0; background: none
}
.cate-name,.cate-name-more{
color:#333333;
width:auto;
}
.cate-name a ,.cate-name-more a{
color:#333333;
text-decoration:none;
width:auto;
text-align:center;
}
.cate-name a:hover ,.cate-name-more a:hover{
color:#8B8682;
font-weight:bold;
text-decoration:underline;
width:auto;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
text-align:center;
}
.pro-desc{
height:80px;
overflow-x:hidden;
overflow-y:auto;
}
.spec{
height:38px;
}
/*產å“介紹é */
#pb_area{
border: 1px solid #ccc;
overflow:hidden;background:#fff; text-align: center
}
.thumbnail img{
margin-right: auto;
margin-left: auto;
display: block;
max-width: 100%;
}
.input-group { display: table;padding-bottom:10px;width: 100%;}
.input-group .form-control {margin-bottom: 0px;}
.txtNormal { overflow:auto;width:100%;}
#content .thumbnails .prodlist{
}
#content .thumbnails .catelist{
}
.listtxtspec .input-prepend{
padding:1px 0px;
margin:0px;
}
.clear{
clear:both;
}
.listimg{
}
#lineqty{
width:30%;
}
.showsmall ul {
padding: 0px; margin: 0px;
list-style: none;
}
.showsmall li {
float:left;
}
.showsmall li img {
margin: 3px;
padding:3px;
width:50px;
}
/*é 籤**/
.nav-tabs .active a{
font-weight:bold;
}
/*訊æ¯ç”¨*/
.msgcont{
width:90%;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
margin:10px;
}
.msg_img_title {
width:30%;
}
/*尾檔*/
#cominfo ul li {
display:inline-block;
}
#footlink ul li a { border-radius:inherit; }
#footlink ul li a:hover, .foot #footlink ul li a:focus, .foot #footlink ul li a:active {
background:none;
text-decoration:underline;
}
/*首é 用*/
#index_msg_ul a{
background:#eee;
padding:8px 15px;
font-size:16px;
color:#000;
}
#index_msg_ul a:hover{
background:#eee;
padding:8px 15px;
font-size:16px;
color:#000;
}
#index_msg_ul .msgcont{
}
#idxprocarousel .span{small_class} .item {
height : {small_height}px;
text-align : center;
/* Firefox, Chrome */
line-height : {small_height}px;
/* IE */
*font-size : 180px; /* 200px * 0.9 = 180px */
}
#idxprocarousel img {
vertical-align : middle;
}
#idxprocarousel .caption {
background : #666; padding : 5px;
}
#idxprocarousel .caption a {
color : #fff;
}
#content .pshow_title{
border-left:5px solid #ccc;
font-size:18px;
font-weight:bold;
background-color: #eee; padding:7px;
}
ul{
list-style:none;
}
#footer .ftbar{
background-color:#f8f8f8;
border-color:#e7e7e7;
}
.breadcrumb>li+li:before{ color:#333}
/***style for banner's arrows and pagination ****/
.swiper-banner .arrow-left, .swiper-product .swiper-button-prev {
position: absolute;
left: 1%;
top: 40%;
width: 17px;
height: 30px;z-index:99;
}
.swiper-banner .arrow-right, .swiper-product .swiper-button-next {
position: absolute;
right: 1%;
top: 40%;
width: 17px;
height: 30px;z-index:99;
}
.swiper-banner .page-banner, .swiper-product .swiper-pagination{
position: absolute;
left: 0; z-index:99;
text-align: center;
bottom:0;
width: 100%;
}
.swiper-banner .swiper-pagination-switch, .swiper-product .swiper-pagination-switch {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 10px;
background: #999;
box-shadow: 0px 1px 2px #555 inset;
margin: 0 3px;
cursor: pointer;
}
.swiper-banner .swiper-active-switch, .swiper-product .swiper-active-switch {
background: #fff;
}
/***style for banner's arrows and pagination end ****/
/*style for google map 2015.10.21*/
.googlemap { width:100%; height:12em; }
.listimg a.btn.btn-link {
display: initial;
}
.header{background:rgba(255,255,255,0.3)}
#header2{background:rgba(255,255,255,0); border-bottom:1px solid #D5151B}
#header2 #mainnav{ background: rgba(0,0,0,0.8)}
.header *{-webkit-transition: position 0.3s ease 0.3s;
-moz-transition: position 0.3s ease 0.3s;
-ms-transition: position 0.3s ease 0.3s;
-o-transition: position 0.3s ease 0.3s;
transition:position 0.3s ease 0.3s;}
.header--clone { position: fixed; width:100%; z-index: 130; top: 0; left: 0;
-webkit-transform: translateY(-100px); -ms-transform: translateY(-100px); transform: translateY(-160px);
-webkit-transition: all 300ms ease-in-out; -moz-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out;}
.header--stick { -webkit-transform: translateY(0%); -ms-transform: translateY(0%); transform: translateY(0%);}
#header2 .navbar-collapse.collapse{ text-align:center}
#header2 .logo , #header2 .hd_right{ display:none}
#header2 #mainnav ul#main_menu{ display:inline-block; float:none;margin:0 auto -5px}
ul#main_menu>li>ul>li>ul{ display: none}
.sb-active .header--clone{-webkit-transform: translateY(-100px); -ms-transform: translateY(-100px);transform: translateY(-100px);}
.logo{width:210px;padding:15px; float:left ;-webkit-animation-name: fadeInLeft;animation-name: fadeInLeft;}
.logo img{width:100%}
.hd_right{width:calc(100% - 210px); float:right; text-align:right;padding-top:10px;-webkit-animation-name: fadeInRight;animation-name: fadeInRight;}
.wrap{width:1280px;margin:0 auto;padding:0 15px}
.lang_member_search{width:400px; display:inline-block}
.search .input-group-btn{ font-size:20px ;}
.search_btn{ background:rgba(255, 255, 255, 0); border:0}
.search .form-control{width:360px; }
.search .input-group .form-control:last-child{ border-radius:3px}
.lang , .member{float:right}
ul{padding:0}
.lang_member{margin-bottom:10px}
.lang_nav li a{padding: 0 5px; display:block ; border-right:1px solid #999; border-radius:0}
.lang_nav li:last-child a{border-right:0}
.member_nav li a{padding: 0 5px; display:block }
#mainnav{ background:#e60012; text-align:right}
#mainnav ul#main_menu { display:block;margin:0 0 0 auto; float:right}
#mainnav ul#main_menu>li{ float:left}
#mainnav ul#main_menu>li>a{padding:10px 23px;color:#fff; display:block; font-size:18px; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;}
#mainnav ul#main_menu>li>a{padding:10px 23px;color:#fff; display:block; font-size:18px; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;}
#mainnav ul#main_menu>li>a:hover , #mainnav ul#main_menu>li>a.active{background:rgba(191,0,3,0.80)}
#mainnav #incateall{ display: none}
.slick-slide img{margin:0 auto}
#custnav{ background:#3d3d3d; color:#fff;padding:30px 0}
#custnav a{color:#fff}
.ft_menu_zone{float:left;width:50%}
.ft_com_info_zone{float:left;width:50%}
#custnav1{width:90px; float:left}
#custnav2{width:calc(100% - 90px); float:left}
.ft_company{width:50%; float:left;padding-left:15px}
.ft_company h2{ font-size:18px;margin:0 0 5px 0}
.copyright{width:70% ; float:left;padding:10px 0; font-size:13px}
.copyright>div{ float:left;padding-right:5px}
#footlink li{ display:inline-block}
#smo{width:30%; float:right; text-align:right}
/*goto*/
#gotop {
position: fixed;
right: 10px;
bottom: 0px;
padding: 2px 12px;
font-size: 25px;
background:rgba(177,177,177,0.73);
color: white;
cursor: pointer; z-index:1000; font-weight:100; -webkit-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out
}
#gotop:hover{background:rgba(104,104,104,1.00);}
#smo a {
display: inline-block;
color: #fff;
font-size: 120%;
text-align: center;
margin: 8px 1px 0 0px;
border-radius:3px; background:#a6a6a6;width:25px;height:25px; line-height:25px; -webkit-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out}
#smo a:hover{ transform:scale(1.1); background:#D90B10}
#custnav1 span.nav-header{ display:none}
.ft_menu_zone ul>li>a , .ft_menu_zone ul>li>div>a{ font-size:16px; font-weight:bold;padding:3px 0 ; display:block;-webkit-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out}
#custnav .ft_menu_zone ul>li>div>a:hover{padding-left:3px; color:#F00}
.ft_menu_zone ul>li>ul>li{width:50%; float:left}
.ft_menu_zone ul>li>ul>li>a{ font-size:15px; font-weight: normal}
#custnav .ft_menu_zone ul>li>ul>li>a:hover{color:#CCC}
.navbar-collapse{padding:0}
#mobile_toggle{ display:none}
#hello_member{display: none;}
#slidebar-1 #logLink, #slidebar-1 #regLink{display: none;}
@media (max-width:1280px) {
.wrap{width:100%}
/*#mainnav ul li a{padding:10px 20px}
#mainnav ul{ float:none;　margin:0 auto ; display:inline-block}
#mainnav{ text-align:center;margin:0 auto -3px}*/
#mainnav ul#main_menu>li>a{padding:10px 20px; font-size:16px}
}
@media (max-width:1000px) {
#header2{ background:rgba(255,255,255,0.85)}
#container.container-fluid{background: url(bg_all.jpg) center top no-repeat #fff;}
.header{background:rgba(255,255,255,1)}
#mainnav , .hd_right{ display:none}
#header2 .logo{ display:block}
.logo{width:180px; float:none}
#header2 .logo{padding:10px ;width:150px}
.search_btn{ font-size:18px}
#mobile_toggle{ display:block ;}
.sb-slidebar #slidebar-1, .sb-slidebar #slidebar-2{display:none; transition:all 0.5s ease-out; opacity:0}
.sb-slidebar.side-1 #slidebar-1{display:block; opacity:1}
.sb-slidebar.side-2 #slidebar-2{display:block; opacity:1}
.sb-close{ display: none}
#mobile_toggle ul{ position: absolute;right:8px;top:10px;z-index: 9;}
#mobile_toggle ul li{ display: inline-block;padding:0 2px}
.sb-btn1 , .sb-btn2{padding: 5px 8px;
background: #de0005;
color: #fff;
font-size: 13px;}
.sb-slidebar{ background:#af0000}
.sb-slidebar .nav-header{padding:15px; font-size:20px;/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ff9e9f+1,ffffff+100 */
background: rgb(255,158,159); /* Old browsers */
background: -moz-linear-gradient(top, rgba(255,158,159,1) 1%, rgba(255,255,255,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(255,158,159,1) 1%,rgba(255,255,255,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(255,158,159,1) 1%,rgba(255,255,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff9e9f', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */ font-weight: bold;color:#000}
#left_menu li { border: 0}
#left_menu li li{ border-bottom: 1px solid #fff}
#left_menu #slidebar-2 ul li a{ color:#fff}
#left_menu #slidebar-2 ul li a.arrow:after , #left_menu #slidebar-1 ul li a.arrow:after { content: "\f107"; font-family: FontAwesome;
font-style: normal;
font-weight: normal;}
#left_menu #slidebar-2 ul li a.active{ background:rgb(224, 0, 0)}
#left_menu #slidebar-2 ul li ul li a { background:rgb(255, 64, 64);color:#fff;}
#left_menu #slidebar-2 ul li ul li ul li a{ background: rgba(255,255,255,1.00);color:rgba(79,79,79,1.00); border-bottom:1px solid #C60D11}
#left_menu .collapse{ visibility: visible}
#left_menu #slidebar-2 ul>li>a:focus , #left_menu #slidebar-2 ul>li>a:hover{background:rgb(224, 0, 0)}
#left_menu #slidebar-2 ul li ul li a.active , #left_menu #slidebar-2 ul li ul li a:hover , #left_menu #slidebar-2 ul li ul li a:focus{color:#fff; background:rgb(255, 152, 152)}
#left_menu #slidebar-2 ul li ul li ul li a.active , #left_menu #slidebar-2 ul>li>ul li ul li a:hover{color:#ec0000;background: rgba(255,255,255,1.00);}
#left_menu #slidebar-2 ul li ul li ul li ul li{ border-bottom:1px solid #eee}
#left_menu #slidebar-2 ul li ul li ul li ul li a{box-shadow:none; padding:5px 15px; border-bottom:1px solid #eee}
#left_menu .form-search{padding:12px}
.input-group{padding:0}
#slidebar-1{ background: #bb0202}
#left_menu #slidebar-1 a {color:#fff;}
#left_menu #slidebar-1 ul li{ border-bottom: 1px solid rgba(255,255,255,0.18)}
#left_menu #slidebar-1 ul li.lang_btn{width:33.3%; float: left; clear: none; background:rgba(107,10,11,1.00); text-align: center}
#left_menu #slidebar-1 ul>li>a:hover, #left_menu #slidebar-1 ul>li>a:focus , #left_menu #slidebar-1 ul li.active{ background:rgb(146, 31, 19);color:#fff}
.sb-submenu{ background: #fff;}
#left_menu #slidebar-1 ul li li a {color: rgb(255, 255, 255);
border-bottom: 1px rgba(220,220,220,1.00);
background: rgb(234, 82, 82);}
#left_menu #slidebar-1 ul li ul li.active{ background: #fff}
#left_menu #slidebar-1 ul li ul li.active a ,#left_menu #slidebar-1 ul li .nav>li>a:hover, #left_menu #slidebar-1 ul li .nav>li>a:focus{ background: #ff9191;color:#fff}
#left_menu #slidebar-1 ul li li.active li a , #left_menu #slidebar-1 ul li li li a{ background: rgb(218, 218, 218);color: rgb(84, 84, 84);}
#left_menu #slidebar-1 ul li li.active li.active li a , #left_menu #slidebar-1 ul li li.active li li a{ background:#fff;
box-shadow: inset 1px 1px 10px rgba(105, 105, 105, 0.02);
color: rgba(62,62,62,1.00);border-bottom:1px solid #CCC}
#left_menu #slidebar-1 ul li li.active li li a.active , #left_menu #slidebar-1 ul li li li li a.active{color:rgba(168,0,2,1.00)}
#left_menu #slidebar-1 ul li li.active li li a , #left_menu #slidebar-1 ul li li li li a{ background:#fff;color:#333;box-shadow: inset 1px 1px 10px rgba(255,255,255 , 0);padding:8px 15px}
#left_menu #slidebar-1 ul li li.active li.active a , #left_menu #slidebar-1 ul li li.active li a[data-option="on"] , #left_menu #slidebar-1 ul li li li a[data-option="on"]{color: #fff; background: #000; }
#left_menu #slidebar-1 ul li li.active li li a ,#left_menu #slidebar-1 ul li li li li a , #left_menu #slidebar-1 ul li li li li a:focus , #left_menu #slidebar-1 ul li li li li a:hover,#left_menu #slidebar-1 ul li li li li a[data-option="on"]{ background:#fff;color:#333;box-shadow: inset 1px 1px 10px rgba(255,255,255 , 0);}
#left_menu #slidebar-1 ul li.lan a{ background: rgb(142, 142, 142)}
#left_menu #slidebar-1 ul li.lan { border-bottom: 1px solid rgb(185, 185, 185)}
}
@media (max-width:800px) {
.ft_com_info_zone{width:100%; float:none;}
#custnav1{width:100%; float:none}
#custnav2 , #cominfo ul li{width:100%; float:none}
.ft_menu_zone{ display:none}
.copyright , #smo{width:100%; float:none; text-align:center}
.copyright>div{padding:0;margin-bottom:5px; float:none}
#smo{margin-bottom:20px}
#custnav{padding:15px 0 15px }
}
@media (max-width:580px) {
.ft_com_info_zone{ text-align:center}
.ft_company{width:100%; padding:0; float:none;margin-bottom:15px;}
#custnav{padding:25px 0 10px }
.logo{width:150px;padding:10px 0}
}
.left_nav , .content_left {width:280px; float:left;padding-top:50px ;-webkit-animation-name: fadeInLeft ;animation-name: fadeInLeft}
.right_content , .right_contact{width:calc(100% - 280px); float: left;padding-left:80px ; min-height: 500px}
#result{ display:none}
.catelist , .prodlist{width:calc(33.3% - 30px); float:left;margin:0 15px 30px; font-size:18px}
.catelist , .prodlist{ -webkit-animation-name: fadeInUp ; animation-name: fadeInUp ; animation-duration: 0.5s}
.catelist:nth-child(2n) , .prodlist:nth-child(2n){ animation-name: fadeInUp ; animation-duration: 0.8s}
.catelist:nth-child(3n) , .prodlist:nth-child(3n){ animation-name: fadeInUp ; animation-duration: 0.5s}
.container_product .catelist{width:calc(50% - 30px)}
.catelist .listimg , .prodlist .listimg { background: #fff}
.left_nav .nav>li>a{ background: rgba(204,204,204,0.22); font-size:16px; color:#000;margin-bottom: 5px}
.left_nav .nav>li>a:hover, .left_nav .nav>li>a:focus , .left_nav .nav>li.active>a{ background: rgba(255,0,4,0.87);color:#fff}
.left_nav .nav>li>ul>li>ul>li{margin-bottom:5px}
.left_nav .nav>li>ul>li>a:hover, .left_nav .nav>li>ul>li>a:focus , .left_nav .nav>li>ul>li>ul>li.active>a{ background: none;color:#333 }
.left_nav .nav>li>ul>li>a{ background:none; position:relative;padding:5px 0 5px 40px; display: block}
.left_nav .nav>li>ul>li>a:before{ content:"+"; width:22px;height:22px; display:block; border-radius:50%; color:#999; border:1px solid #999; position:absolute; left:10px;top:5px; text-align:center; line-height:20px; font-size:18px}
.left_nav .nav>li>ul>li>a:hover , .left_nav .nav>li>ul>li>a:focus, .left_nav .nav>li>ul>li.active>a , .left_nav .nav>li>ul>li>a:hover:before{ color:#F00; background:none}
.left_nav .nav>li>ul>li>a:hover:before , .left_nav .nav>li>ul>li.active>a:before{ border:1px solid #F00;color:#F00 }
.left_nav .nav>li>ul>li>ul>li>a{padding:3px 0 3px 53px; background: none}
.left_nav .nav>li>ul>li>ul>li>a:before{ content:"\f0da";font-family: FontAwesome;border:0; left:33px;top:3px; width: 22px; height: 22px;display: block; position: absolute; text-align: center}
.left_nav .nav>li>ul>li>ul>li:hover>a , .left_nav .nav>li>ul>li>ul>li.active>a{color:#000; background: none; position: relative}
.left_nav .nav>li>ul>li>ul>li:hover>a:before , .left_nav .nav>li>ul>li>ul>li.active>a:before{ border:0;color:#F00}
.left_nav .nav>li>ul>li>ul>li>ul>li>a:before , .left_nav .nav>li>ul>li>ul>li>ul>li.active>a:before , .left_nav .nav>li>ul>li>ul>li>ul>li:hover>a:before{ border:0;content:""}
.left_nav .nav>li>ul>li>ul>li>ul{margin-left:38px}
.left_nav .nav>li>ul>li>ul>li>ul>li>a{ border-bottom:1px solid #999;padding:5px; display:block; transition:all 0.3s ease-in-out}
.left_nav .nav>li>ul>li>ul>li>ul>li:hover>a , .left_nav .nav>li>ul>li>ul>li>ul>li.active>a{ background:#999; color:#fff}
.procate_des{ clear:both}
.procate_des ul{margin:0 0 0 30px}
.procate_des ul li{padding:0 0 0 15px;margin-bottom:10px; position:relative}
.procate_des ul li:before{ content:"*"; position:absolute; left:0; top:3px}
.container_product .container_product .product-cate .thumbnail *{ transition: all 0.3s ease-in-out}
.container_product .product-cate .thumbnail{ position: relative; border:1px solid rgba(99,99,99,1.00)}
.container_product .product-cate .thumbnail>a{ position:absolute;width:100%; height:100%; display:block; z-index:11; background:rgba(255,255,255,0)}
.container_product .product-cate .thumbnail .listimg{ overflow: hidden; background: rgba(0,0,0,1.00); transition:all 0.5s ease-in-out}
.container_product .product-cate .thumbnail .listimg img{ opacity: 0.7; transition:all 0.5s ease-in-out}
.container_product .product-cate .thumbnail:hover .listimg img{ opacity: 1; transform:scale(1.1)}
.container_product .listimg {margin-bottom: 0}
.container_product .listimg .catelist_btn{ display: none}
.container_product .product-cate .thumbnail *{transition:all 0.5s ease-in-out}
.container_product .product-cate .thumbnail .caption{position: absolute; right:0; bottom:0 ; color:fff; font-size:25px; z-index: 10; background: url(cata_bg.png) right top no-repeat ;width:265px; height:150px; text-align:right;}
.container_product .product-cate .thumbnail .caption .cate-name{text-align:right;padding-right:20px;padding-top:20%; }
.container_product .product-cate .thumbnail:hover .caption .cate-name{padding-right:25px}
.container_product .product-cate .thumbnail .caption a{ color:#fff; font-weight: 500; font-style:italic; text-shadow: 0px 1px 10px rgba(0,0,0,0.6); font-size:48px}
.container_product .product-cate .thumbnail:hover .caption a{ font-size:55px}
.caption a:hover{ text-decoration:none}
.page-header h1{ background:url(tit_line.jpg) center bottom no-repeat;padding-bottom:15px; font-size:33px; line-height: 150%}
.page-header{margin:80px 0 30px}
.catelist .caption{ text-align:center; height:70px}
.container_product a.catelist_btn{ display:none}
.listimg{ overflow:hidden; position:relative;border: 1px solid rgba(168,168,168,0.3);
margin-bottom: 10px;}
.listimg *{transition: all 0.5s ease-in-out}
.listimg a.catelist_btn{width:100%;height:100%; display:block; left:0; top:0; position:absolute; z-index:5; text-align:center;background:rgba(251,0,6,0.0); box-shadow: inset 1px 1px 0px 18px rgba(224, 224, 224, 0); padding-top:20%; color:rgba(255,255,255,0); text-shadow: 0px 5px 5px rgba(1,1,1,0); font-size:18px;padding-right:20px;padding-left:20px }
.catelist:hover .listimg a.catelist_btn{ background:rgba(12, 12, 12, 0.72); box-shadow: inset 1px 1px 0px 18px rgba(224, 224, 224, 0.8); padding-top:40%; color:rgba(255,255,255,1); text-shadow: 0px 5px 5px rgba(1,1,1,0.6); }
.catelist:hover .listimg img{ transform: scale(1.1)}
.catelist:hover .cate-name a{color:#F00}
.prodlist *{ transition:all 0.5s ease-in-out}
.prodlist .thumbnail{ position:relative; text-align:center}
.prodlist .thumbnail img{margin-top:15px}
.prodlist .thumbnail:hover img{ transform:scale(1.1)}
.list-cover a{ position:absolute; left:0; top:0; width:100%; height:100%; text-align:center;background: rgba(180,7,7,0);
font-size: 20px;
color: rgba(255,255,255,0);
padding-top: 35%; display:block}
.prodlist .thumbnail:hover .list-cover a{
background: rgba(180,7,7,0.8);
color: rgba(255,255,255,1);}
.prodlist .thumbnail:hover .cate-name a{ color:rgba(255,255,255,0)}
.prodlist .thumbnail .list-cover a:after{ content: " ";background: url(arrow.png) no-repeat;
width: 50px;
height: 50px;
display: block;
margin: -30px auto 0;
opacity: 0; transition: all 0.3s ease-in-out}
.prodlist .thumbnail:hover .list-cover a:after{opacity: 1;
margin: 10px auto;}
.container_product_show .page-header{ display:none}
.pro_show_zone{margin:100px auto 30px}
.showsmall{ display:none}
.pro_left{width:50%; float:left}
.pro_info{width:50%; float:right;padding-left:30px;padding-top:80px}
.pro-name{ font-size:35px; font-weight:bold;color:#000;margin-bottom:5px}
.pro-no{ font-size:30px; color:#777;margin-bottom:50px}
.add_inqtybtn a{padding-left:30px; font-size:20px; position:relative}
.add_inqtybtn a:before{ content:"+"; width:25px; height:25px; background:#e70618; color:#fff; line-height:25px; display:block; border-radius:50%; text-align:center; position:absolute; left:2px; top:1px; font-size:15px}
.add_inqtybtn a:hover{color:#e70618}
.mobile_tit{ display:none}
.scrollbar
{
width: 100%;
overflow-x: auto;
overflow-y:hidden;
margin-bottom: 20px
}
.style-1::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #F5F5F5;
}
.style-1::-webkit-scrollbar
{
width: 10px;
background-color: #F5F5F5;
}
.style-1::-webkit-scrollbar-thumb
{
background-color:#000;
background-image: -webkit-linear-gradient(45deg,
rgba(255, 255, 255, .2) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, .2) 50%,
rgba(255, 255, 255, .2) 75%,
transparent 75%,
transparent)
}
.nav-tabs>li.active>a, .nav-tabs>li.active>a:hover, .nav-tabs>li.active>a:focus{ border:0}
#prodNav .nav-tabs>li{width:25%; margin:0; font-size:20px}
#prodNav .nav-tabs>li>a{padding:10px 20px; border:0;margin:0}
#prodNav .nav-tabs>li>a:hover{ background:none;color:#D20B10}
#prodNav .nav-tabs>li.active>a{color:#D20B10; font-weight:normal}
#prodNav .txtNormal{padding:20px 10px}
#prodNav .scrollbar table{min-width:550px; border-collapse:collapse}
#prodNav .scrollbar table th{ background:#DF2025; color:#fff;padding:5px 15px;border-right:1px solid #DF2025;border-left:1px solid #DF2025; white-space:nowrap}
#prodNav .scrollbar table tr{ border:1px solid #E3E3E3}
#prodNav .scrollbar table td{padding:5px 15px; white-space:nowrap}
#prodNav .scrollbar table tr:hover td{ background:rgba(204,204,204,0.3)}
#prodNav .scrollbar .pro_table_title th { border-right: 1px solid transparent;border-left: 1px solid transparent;}
#prodNav .scrollbar .pro_table_title th:last-child { border-right: 1px solid #DF2025;}
#pb_area_mobile{ border:1px solid #E6E6E6}
#prodNav .remark{ border-bottom:1px solid rgba(204,204,204,0.5);margin-bottom:15px}
#prodNav .remark ul{margin-left:20px;margin-bottom:5px}
#prodNav .remark ul li{padding:2px 30px 2px 0; font-size:18px; float:left; }
#prodNav .remark ul li:last-child:before{ content: "\f005"; font-family: FontAwesome;margin-right:5px;color:rgba(255,166,0,1.00)}
#prodNav .remark ul li:first-child:before{ content: "\f111"; font-family: FontAwesome;margin-right:5px}
#prodNav .remark ul li:nth-child(2):before{content: "\f10c"; font-family: FontAwesome;margin-right:5px}
.eq_zone{padding:10px 20px}
.eq_zone>div{width:50%; float:left}
.eq_zone ul{width:100%; }
.eq_zone ul li{ font-weight:bold; color:#000; font-size:18px;margin-bottom:15px}
.eq_zone ul ul{ float:none;margin-top:3px}
.eq_zone ul ul{margin-left:5px}
.eq_zone ul ul li{ font-weight:normal; font-size:15px;margin-bottom:0 ;color:#3D3D3D}
.eq_zone ul ul li:before{content: "\f111"; font-family: FontAwesome;margin-right:5px}
.eq_zone ul ul li.choice:before{content: "\f10c"; font-family: FontAwesome;margin-right:5px}
.eq_zone ul ul li.choice-x{ list-style: none; position:relative}
.eq_zone ul ul li.choice-x:before{ content:"X"; position: absolute; left:-18px}
.eq_zone ul ul li.red>span:after{ content: "\f005"; font-family: FontAwesome;margin-right:5px;color:rgba(255,166,0,1.00)}
.eq_zone ul ul li.no:before{ content:" - "}
.panel-group .panel{border-radius:0}
.panel-default>.panel-heading{padding:0; background:none; border-radius:0}
.panel-default>.panel-heading a{padding:10px 20px; background:#fff; display:block}
.panel-default>.panel-heading a.accordion-toggle{ background:#000; color:#fff}
.panel-default>.panel-heading a.accordion-toggle.collapsed{ background:#fff;color:#000}
.star-symbol-color {color:rgba(255,166,0,1.00)}
#main_menu .dropdown:hover .dropdown-menu {
display: block;
margin-top: 0;padding:0; border-radius: 0; background: rgba(174,0,2,0.95)
}
#main_menu .dropdown:hover .dropdown-menu a{padding:10px 15px ;color:#fff}
#main_menu .dropdown:hover .dropdown-menu a:hover ,#main_menu .dropdown-menu>.active>a, #main_menu .dropdown-menu>.active>a:hover, .dropdown-menu>.active>a:focus{ background: rgba(0,0,0,0.91)}
@media (max-width:1280px) {
.catelist, .prodlist{width:calc(50% - 30px);margin:0 15px}
.pro-name{ font-size:30px}
.pro-no{ font-size:26px}
.pro_left{width:55%}
.pro_info{width:45%}
.left_nav{padding-left:25px}
.right_content , .right_contact{padding-left:30px}
}
@media (max-width:1000px) {
#left_menu a, .sb-submenu a{padding:12px 15px}
#left_menu #slidebar-1 .lang_btn a{padding:12px 5px}
.left_nav{display:none; }
.right_content{width:100%; float: none;padding:0}
#left_menu .member_nav { clear:both}
#left_menu .member_nav li{width:50%}
#left_menu #slidebar-1 ul li .member_nav>li>a{ background:#000;padding:10px; text-align: center}
#left_menu #slidebar-1 ul li .member_nav>li:first-child>a{padding-left:10px}
#left_menu .nav-pills>li+li{margin:0}
.nav-pills>li>a{ border-radius:0}
.catelist, .prodlist{width:calc(33.3% - 30px);margin:0 15px 25px}
#left_menu .sb-menu>li{ clear:both}
}
@media (max-width:880px) {
.catelist, .prodlist{width:calc(50% - 20px);margin:0 10px 25px}
.pro-name{ font-size:26px}
.pro-no{ font-size:20px;margin-bottom:15px}
#content .breadcrumb{ float:none;padding:5px 0}
.page-header{margin:30px 0 }
}
@media (max-width:800px) {
.container_product .product-cate .thumbnail .caption{height:110px;width:230px}
.container_product .product-cate .thumbnail .caption a{ font-size:40px}
.container_product .product-cate .thumbnail:hover .caption a{ font-size:45px}
.container_product .product-cate .thumbnail .caption .cate-name{padding-top:10%; }
}
@media (max-width:680px) {
.pro_left , .pro_info{width:100%; float:left;padding:0;margin:0 auto 20px}
.pro_info{ text-align:center}
.mobile_tit{ display:block}
.pro_info .pro-name , .pro_info .pro-no{ display:none}
.pro_left .item{ background:#fff}
.page-header h1{ font-size:30px}
.pro_show_zone{margin:30px auto 20px}
}
@media (max-width:580px) {
.container_product .catelist , .prodlist{width:80%;margin:0 auto 25px; float:none}
.container_product .product-cate .thumbnail .caption{height:130px;width:250px}
.container_product .product-cate .thumbnail .caption a{ font-size:50px}
.container_product .product-cate .thumbnail:hover .caption a{ font-size:55px}
.container_product .product-cate .thumbnail .caption .cate-name{padding-right:15px}
.catelist{width:80%;margin:0 auto; float:none}
.eq_zone>div{width:100%; float:none}
.catelist , .prodlist{ animation-name: fadeInUp ; animation-duration: 0.5s}
.catelist:nth-child(2n) , .prodlist:nth-child(2n){ animation-name: fadeInUp ; animation-duration: 0.5s}
.catelist:nth-child(3n) , .prodlist:nth-child(3n){ animation-name: fadeInUp ; animation-duration: 0.5s}
.catelist .caption{ height:auto}
}
@media (max-width:480px) {
.container_product .catelist , .prodlist{width:90%;}
.container_product .product-cate .thumbnail .caption{height:110px;width:220px}
.container_product .product-cate .thumbnail .caption a{ font-size:40px}
.container_product .product-cate .thumbnail:hover .caption a{ font-size:45px}
.catelist{width:90%}
.page-header h1{ font-size:22px; line-height: 120%}
.procate_des ul{margin:0 }
}
@media (max-width:360px) {
.container_product .catelist, .prodlist{width:90%;}
.container_product .product-cate .thumbnail .caption{height:80px;width:200px}
.container_product .product-cate .thumbnail .caption a{ font-size:30px}
.container_product .product-cate .thumbnail:hover .caption a{ font-size:35px}
.catelist{width:100%}
}
.tabbable .cata{ text-align: center; }
.tabbable .cata img{ border:1px solid rgba(192,192,192,1.00)}
.tabbable .cata img:hover{ border:1px solid rgba(200,0,3,1.00)}
.cata a{ display: block; line-height: 0;margin-bottom: 30px}
.tabbable .more{ text-align: center}
.tabbable .more a{padding:10px 20px ; background: rgba(215,0,3,1.00); color:#fff; transition: all 0.3s ease-in-out }
.tabbable .more a:hover{ background: #000}
.container_msg2 .table_tab0{ display: none}
.container_msg2 .mparid_12>li{width:calc(50% - 30px);margin:0 15px 20px; float:left}
.about p{ line-height: 180%;margin-bottom: 30px}
.about h3{ background: url(ab_arrow.png) 0 2px no-repeat;padding:0 20px; font-size:20px; font-weight: bold ;margin:0 0 10px}
.vision {width:80%;margin:0 auto; overflow:hidden}
.vision table{width:100%;margin:0 0 50px 0}
.vision table th{width:60%;padding:8px 10px 8px 25px; font-size:18px ; font-weight: normal;background: url(ab_arrow.png) 5px 13px no-repeat;}
.vision table td{width:40%;padding:8px 10px 8px 20px}
.vision table td:before{ content: "\f101"; font-family: FontAwesome;margin-right: 10px}
.vision table tr{ border-bottom: 1px solid rgba(112,112,112,0.5); background: rgba(255,255,255,0.00)}
.vision table tr:hover{background:rgba(92,92,92,0.3); color:rgba(224,0,3,1.00)}
.vision_2 { text-align: center;}
.vision_2 h2{margin:0 0 30px ; color:rgba(203,0,3,1.00); font-size: 25px; font-weight: bold}
.vision_2 ul li{width:33.3%;float:left; font-size:20px; color:#000; animation-name:fadeInUp}
.vision_2 ul li:nth-child(2){animation-delay: 0.1s}
.map .tab-content{padding:20px}
.map .tab-content iframe{width:100%; height:502px; border:1px solid rgba(29,29,29,0.5)}
.map_tab{ border-bottom: 1px solid rgba(156,156,156,1.00)}
.map_tab li{ display: inline-block}
.map_tab li a{padding:10px 20px; font-size:20px; display: block}
.map_tab li.active a{ color:#fff; background: #000}
.iframe-rwd {
position: relative;
padding-bottom: 65.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.iframe-rwd iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.map .info h3{margin:0 0 10px 0; font-size:20px; font-weight: bold;}
.map .info li{ font-size:15px}
.map .info li:before{ content: "\f105"; font-family: FontAwesome;margin-right:5px;padding-left:5px}
.idea_zone {width:80%;margin:0 auto ; overflow: hidden}
.idea{width:80%;margin:0 auto 20px }
.idea .title{width:131px; height:131px; display: block; float:left ; line-height: 130px; font-weight: bold; color:#fff; text-align: center; font-size:22px; text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.55); -webkit-animation-name: fadeInLeft ; animation-name: fadeInLeft}
.content_idea{width:calc(100% - 131px); float:right; text-align: left;padding:15px;-webkit-animation-name: fadeInRight;animation-name: fadeInRight; }
.content_idea li{padding:5px}
.content_idea li:before{content: "\f101"; font-family: FontAwesome;margin-right:2px}
.red_bg{ background: url(red_bg1.png) no-repeat}
.bule_bg{ background: url(bule_bg.png) no-repeat}
.yellow_bg{ background: url(yellow_bg.png) no-repeat}
.idea.idea_1 .title , .idea.idea_1 .content_idea{ -webkit-animation-delay: 0.1s ; animation-delay: 0.1s}
.idea.idea_2 .title, .idea.idea_2 .content_idea{ -webkit-animation-delay: 0.3s ; animation-delay: 0.3s}
.idea.idea_3 .title, .idea.idea_3 .content_idea{ -webkit-animation-delay: 0.5s ; animation-delay: 0.5s}
.god h2{ font-size:20px;margin: 20px 0 20px; font-weight: bold }
.god .text_zone{padding:15px}
.god .text_zone2 {font-size:18px ; color:rgba(156,0,2,1.00); text-align: center}
.god .text_zone2 h2{font-size:20px;color:#000}
.god .clearfix{margin-bottom:15px}
.god ul>li{padding:5px 5px 5px 20px; line-height: 130%; position:relative}
.god2 ul>li:before{ content:"" ; position:absolute; left:0; top:5px; background:url(ab_arrow.png) no-repeat;width:12px; height:12px; display: block}
.god2 .god_2 ul>li:before{ position:relative; display: inline-block; top:0;margin-right:5px}
/*---Featured Product - tab switch---*/
.container_msg13 .tab_zone{height:600px}
.container_msg13 .tab-content { visibility:hidden; position:relative;height:0}
.container_msg13 .tab-content.current {visibility:visible}
.container_msg13 ul.news_list li , .container_msg118 ul.news_list li , .container_msg119 ul.news_list li , .container_msg120 ul.news_list li , .container_msg14 ul.news_list li , .container_msg121 ul.news_list li , .container_msg122 ul.news_list li , .newslist_wrap ul.news_list li {width:calc(33.3% - 20px); float:left; text-align: center;margin:0 10px 20px }
.container_msg13 ul.news_list li:nth-child(3n+1) , .container_msg118 ul.news_list li:nth-child(3n+1) , .container_msg119 ul.news_list li:nth-child(3n+1) , .container_msg120 ul.news_list li:nth-child(3n+1) , .container_msg14 ul.news_list li:nth-child(3n+1) , .container_msg121 ul.news_list li:nth-child(3n+1) , .container_msg122 ul.news_list li:nth-child(3n+1) , .newslist_wrap ul.news_list li:nth-child(3n+1){clear: left}
.container_msg13 ul.news_list li .pic , .container_msg118 ul.news_list li .pic, .container_msg119 ul.news_list li .pic , .container_msg120 ul.news_list li .pic , .container_msg14 ul.news_list li .pic , .container_msg121 ul.news_list li .pic , .container_msg122 ul.news_list li .pic , .newslist_wrap ul.news_list li .pic {margin-bottom: 15px; position: relative}
.container_msg13 ul.news_list li .pic>a , .container_msg118 ul.news_list li .pic>a , .container_msg119 ul.news_list li .pic>a , .container_msg120 ul.news_list li .pic>a , .container_msg14 ul.news_list li .pic>a , .container_msg121 ul.news_list li .pic>a , .container_msg122 ul.news_list li .pic>a , .newslist_wrap ul.news_list li .pic>a { position: relative;width:100%; height:100%; display: block}
.container_msg13 ul.news_list li .pic>a:before , .container_msg118 ul.news_list li .pic>a:before , .container_msg119 ul.news_list li .pic>a:before , .container_msg120 ul.news_list li .pic>a:before , .newslist_wrap ul.news_list li .pic>a:before , .container_msg14 ul.news_list li .pic>a:before , .container_msg121 ul.news_list li .pic>a:before, .container_msg122 ul.news_list li .pic>a:before{ content: "\f03e"; font-family: fontAwesome; position:absolute;width:100%; height:100%; left:0; top:0; background: rgba(221,0,3,0); transition:all 0.5s ease-in-out;padding-top:20%; font-size:50px; color:rgba(255,255,255,0) }
.container_msg13 ul.news_list li:hover .pic>a:before , .container_msg118 ul.news_list li:hover .pic>a:before, .container_msg119 ul.news_list li:hover .pic>a:before, .container_msg120 ul.news_list li:hover .pic>a:before , .container_msg14 ul.news_list li:hover .pic>a:before , .container_msg121 ul.news_list li:hover .pic>a:before , .container_msg122 ul.news_list li:hover .pic>a:before , .newslist_wrap ul.news_list li:hover .pic>a:before{ background: rgba(221,0,3,0.84); color:rgba(255,255,255,1);padding-top:30%;}
.container_msg38 .date , .container_msg39 .date , .container_msg40 .date , .container_msg41 .date , .container_msg42 .date ,.container_msg127 .date , .container_msg128 .date, .container_msg123 .date , .container_msg129 .date, .container_msg130 .date, .container_msg129 .date, .container_msg131 .date, .container_msg132 .date , .container_msg165 .date , .container_msg166 .date , .container_msg124 .date , .container_msg167 .date , .container_msg168 .date , .container_msg210 .date , .container_msgtop_2 .date{ display: none}
.exhibition{margin-bottom:20px; text-align: center}
.exhibition .slick-prev , .exhibition .slick-next{transition: all 0.5s ease-in-out ; opacity: 0}
.exhibition .slick-prev{ left:-20px; z-index: 10}
.exhibition .slick-next{right:-20px}
.exhibition:hover .slick-prev{ left:20px; opacity: 1 }
.exhibition:hover .slick-next{right:20px; opacity: 1}
.exhibition .slick-dots{ bottom:-30px;height:50px}
.exhibition_tab{width:70%;margin:0 auto}
.exhibition_tab ul li{ display: inline-block;padding:5px 10px ; cursor: pointer ;margin-bottom: 5px}
.exhibition_tab ul li:hover{ background: none}
.exhibition_tab ul li.current , .exhibition_tab ul li.current:hover{ background: #000; color:#fff}
.exhibition_tab .slick-slide img{margin:0 auto}
.newsTitle{height:45px}
.exhibition .slick-list.draggable{margin-bottom:10px}
.exhibition .slick-dots{ position:static}
.exhibition .slick-dots li{margin:0 2px}
.news_btn{ text-align:center}
.cd-container {
/* this class is used to give a max-width to the element it is applied to, and center it horizontally when it reaches that max-width */
width: 90%;
max-width: 1170px;
margin: 0 auto;
}
.cd-container::after {
/* clearfix */
content: '';
display: table;
clear: both;
}
header {
height: 200px;
line-height: 200px;
text-align: center;
background: #303e49;
}
header h1 {
color: white;
font-size: 18px;
font-size: 1.125rem;
}
@media only screen and (min-width: 1170px) {
header { height: 300px; line-height: 300px;}
header h1 { font-size: 24px; font-size: 1.5rem;}
}
#cd-timeline {
position: relative;
padding: 2em 0;
margin-top: 2em;
margin-bottom: 80px;
}
#cd-timeline::before {
/* this is the vertical line */
content: '';
position: absolute;
top: 0;
left: 18px;
height: 100%;
width: 1px;
background:rgba(0,0,0,0.74);
}
@media only screen and (min-width: 1170px) {
#cd-timeline {
margin-top: 3em;
margin-bottom: 80px;
}
#cd-timeline::before {
left: 50%;
margin-left: -2px;
}
}
.cd-timeline-block {
position: relative;
margin: 20px 0;
}
.cd-timeline-block:after {
content: "";
display: table;
clear: both;
}
.cd-timeline-block:first-child {
margin-top: 0;
}
.cd-timeline-block:last-child {
margin-bottom: 0;
}
@media only screen and (min-width: 1170px) {
.cd-timeline-block {
margin: 20px 0;
}
.cd-timeline-block:first-child {
margin-top: 0;
}
.cd-timeline-block:last-child {
margin-bottom: 0;
}
}
.cd-timeline-img {
position: absolute;
top: 0;
left: 0;
width: 40px;
height: 40px;
border-radius: 50%; text-align: center; line-height: 40px;color:#fff
}
.cd-timeline-img img {
display: block;
width: 24px;
height: 24px;
position: relative;
left: 50%;
top: 50%;
margin-left: -12px;
margin-top: -12px;
}
.cd-timeline-img.cd-picture {
background: #bd0000;
}
.cd-timeline-img.cd-movie {
background: #bd0000;
}
@media only screen and (min-width: 1170px) {
.cd-timeline-img {
width: 60px;
height: 60px;
left: 50%;
margin-left: -30px; line-height: 60px;
/* Force Hardware Acceleration in WebKit */
-webkit-transform: translateZ(0);
-webkit-backface-visibility: hidden;
transform: translateZ(0);
backface-visibility: hidden;
}
}
.cssanimations .cd-timeline-img.is-hidden {
visibility: hidden;
}
.cssanimations .cd-timeline-img.bounce-in {
visibility: visible;
-webkit-animation: cd-bounce-1 0.6s;
-moz-animation: cd-bounce-1 0.6s;
animation: cd-bounce-1 0.6s;
}
@keyframes cd-bounce-1 {
0% {
opacity: 0;
-webkit-transform: scale(0.5);
-moz-transform: scale(0.5);
-ms-transform: scale(0.5);
-o-transform: scale(0.5);
transform: scale(0.5);
}
60% {
opacity: 1;
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-ms-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2);
}
100% {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
}
.cd-timeline-content {
position: relative;
margin-left: 60px;
background: white;
padding: 10px;
border:1px solid rgba(223,223,223,1.00)
}
.cd-timeline-content:after {
content: "";
display: table;
clear: both;
}
.cd-timeline-content h2 {
color: #303e49;
}
.cd-timeline-content p, .cd-timeline-content .cd-read-more, .cd-timeline-content .cd-date {
font-size: 13px;
font-size: 0.8125rem;
}
.cd-timeline-content .cd-read-more, .cd-timeline-content .cd-date {
display: inline-block;
}
.cd-timeline-content p {
margin: 1em 0;
line-height: 1.6;
}
.cd-timeline-content .cd-read-more {
float: right;
padding: .8em 1em;
background: #acb7c0;
color: white;
border-radius: 0.25em;
}
.no-touch .cd-timeline-content .cd-read-more:hover {
background-color: #bac4cb;
}
.cd-timeline-content .cd-date {
float: left;
padding: .8em 0;
opacity: .7;
}
.cd-timeline-content::before {
content: '';
position: absolute;
top: 16px;
right: 100%;
height: 0;
width: 0;
border: 7px solid transparent;
border-right: 7px solid rgb(183, 183, 183);
}
@media only screen and (min-width: 768px) {
.cd-timeline-content h2 {
font-size: 20px;
font-size: 1.25rem;
}
.cd-timeline-content p {
font-size: 16px;
font-size: 1rem;
}
.cd-timeline-content .cd-read-more, .cd-timeline-content .cd-date {
font-size: 14px;
font-size: 0.875rem;
}
}
@media only screen and (min-width: 1170px) {
.cd-timeline-content {
margin-left: 0;
padding: 1.6em;
width: 45%;
}
.cd-timeline-content::before {
top: 24px;
left: 100%;
border-color: transparent;
border-left-color: rgb(183, 183, 183);
}
.cd-timeline-content .cd-read-more {
float: left;
}
.cd-timeline-content .cd-date {
position: absolute;
width: 100%;
left: 122%;
top: 6px;
font-size: 16px;
font-size: 1rem;
}
.cd-timeline-block:nth-child(even) .cd-timeline-content {
float: right;
}
.cd-timeline-block:nth-child(even) .cd-timeline-content::before {
top: 24px;
left: auto;
right: 100%;
border-color: transparent;
border-right-color: rgb(183, 183, 183);
}
.cd-timeline-block:nth-child(even) .cd-timeline-content .cd-read-more {
float: right;
}
.cd-timeline-block:nth-child(even) .cd-timeline-content .cd-date {
left: auto;
right: 122%;
text-align: right;
}
}
.cssanimations .cd-timeline-content.is-hidden {
visibility: hidden;
}
.cssanimations .cd-timeline-content.bounce-in {
visibility: visible;
-webkit-animation: cd-bounce-2 0.6s;
-moz-animation: cd-bounce-2 0.6s;
animation: cd-bounce-2 0.6s;
}
/* inverse bounce effect on even content blocks */
.cssanimations .cd-timeline-block:nth-child(even) .cd-timeline-content.bounce-in {
-webkit-animation: cd-bounce-2-inverse 0.6s;
-moz-animation: cd-bounce-2-inverse 0.6s;
animation: cd-bounce-2-inverse 0.6s;
}
@keyframes cd-bounce-2 {
0% {
opacity: 0;
-webkit-transform: translateX(-100px);
-moz-transform: translateX(-100px);
-ms-transform: translateX(-100px);
-o-transform: translateX(-100px);
transform: translateX(-100px);
}
60% {
opacity: 1;
-webkit-transform: translateX(20px);
-moz-transform: translateX(20px);
-ms-transform: translateX(20px);
-o-transform: translateX(20px);
transform: translateX(20px);
}
100% {
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0);
}
}
@keyframes cd-bounce-2-inverse {
0% {
opacity: 0;
-webkit-transform: translateX(100px);
-moz-transform: translateX(100px);
-ms-transform: translateX(100px);
-o-transform: translateX(100px);
transform: translateX(100px);
}
60% {
opacity: 1;
-webkit-transform: translateX(-20px);
-moz-transform: translateX(-20px);
-ms-transform: translateX(-20px);
-o-transform: translateX(-20px);
transform: translateX(-20px);
}
100% {
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0);
}
}
.cd-timeline-content ul li{padding:5px 0; font-size:16px}
.history_pic{ display:none}
.cd-timeline-content ul li{ position:relative;padding-left:15px}
.cd-timeline-content ul li:before{position:absolute; left:0 ; top:3px; content:"\f101" ; font-family: fontAwesome}
.hspic{color:rgba(175,0,2,1.00); cursor: pointer}
.overly_pic{ visibility: hidden ; display:none; position: absolute; z-index: 5;top:100%; border:1px solid rgba(164,164,164,1.00)}
.cd-timeline-content ul li.hspic:hover .overly_pic{visibility:visible; display:block}
.cd-timeline-content ul li.hspic:hover{color:rgba(9,84,173,1.00)}
.cd-timeline-content ul li.hspic_last:hover .overly_pic{top:-190px}
@media (max-width: 1169px) {
.cd-timeline-content ul li.hspic:hover .overly_pic{visibility:hidden; display:none}
.history_pic{ display:block;width:100%; height: 100%; position: absolute; left: 0; top:0}
.idea_zone , .vision{width:90%}
.god h2{margin-top:0px}
}
@media (max-width: 800px) {
.god h2{margin:0 0 10px ; font-size:18px}
}
@media (max-width: 767px) {
.god {text-align:center}
.god2 ul ,.god2 ul>li:before{ display:inline-block}
.god2 ul>li:before{ position:static;margin-right:5px}
}
@media (max-width: 680px) {
.idea_zone , .vision , .idea{width:100%}
.god>ul>li:first-child{width:220px; font-size:15px}
.container_msg13 ul.news_list li , .container_msg118 ul.news_list li , .container_msg119 ul.news_list li , .container_msg120 ul.news_list li , .container_msg14 ul.news_list li , .container_msg121 ul.news_list li , .container_msg122 ul.news_list li , .newslist_wrap ul.news_list li{width:calc(50% - 20px); margin:0 10px 20px }
.container_msg13 ul.news_list li:nth-child(3n+1) , .container_msg118 ul.news_list li:nth-child(3n+1) , .container_msg119 ul.news_list li:nth-child(3n+1) , .container_msg120 ul.news_list li:nth-child(3n+1) , .container_msg14 ul.news_list li:nth-child(3n+1) , .container_msg121 ul.news_list li:nth-child(3n+1) , .container_msg122 ul.news_list li:nth-child(3n+1) , .newslist_wrap ul.news_list li:nth-child(3n+1){clear: none }
.container_msg13 ul.news_list li:nth-child(2n+1) , .container_msg118 ul.news_list li:nth-child(2n+1) , .container_msg119 ul.news_list li:nth-child(2n+1) , .container_msg120 ul.news_list li:nth-child(2n+1) , .container_msg14 ul.news_list li:nth-child(2n+1) , .container_msg121 ul.news_list li:nth-child(2n+1) , .container_msg122 ul.news_list li:nth-child(2n+1) , .newslist_wrap ul.news_list li:nth-child(2n+1){clear: left}
.exhibition_tab{width:80%}
}
@media (max-width: 600px) {
.god{width:100%}
.god>ul>li:first-child{width:100%;padding:0}
.god>ul>li{ display:inline-block; text-align:center}
.about h3{ display:inline-block; text-align: center}
.god>ul>li:last-child{ border:0;width:100%;}
.god ul li li{margin-left:0}
.vision table th{width:55%}
.vision table td{width:45%}
}
@media (max-width: 550px) {
.vision table th , .vision_2 ul li{ font-size:16px}
}
@media (max-width: 480px) {
.vision_2 ul li{width:100%; float:none;margin-bottom:10px; font-size:18px}
.vision table th , .vision table td{ display:inline-block;width:100%;margin:0 auto ; text-align: center;padding:5px}
.vision table th { background: none; color:rgba(195,0,3,1.00); font-size:18px;padding:10px 5px 3px}
.map_tab li a{ font-size:18px}
.map .tab-content{padding:20px 0}
.idea .title{ float:none;margin:0 auto 10px}
.content_idea{width:100%; float:none; text-align: center}
.exhibition_tab{width:100%}
}
@media (max-width: 380px) {
.container_msg13 ul.news_list li , .container_msg118 ul.news_list li , .container_msg119 ul.news_list li , .newslist_wrap ul.news_list li ,.container_msg120 ul.news_list li , .container_msg14 ul.news_list li , .container_msg121 ul.news_list li , .container_msg122 ul.news_list li{width:100%; margin:0 auto 20px }
}
.system{ position: relative}
.system_map{ position:relative; z-index: 1; text-align: center; font-size:25px}
.system_map a span:before{ content:"\f002" ; font-family: FontAwesome ;margin-right:10px}
.system_map:hover a {color:rgba(212,0,3,1.00)}
.system_map img{margin-bottom:20px}
.system_map:hover img{ border:1px solid rgba(164,11,14,1.00)}
.container_msg14 .mparid>li{width:50%;margin:0 0 20px ; float: left}
.container_msg2 .mparid_10{ display:none}
.mparid{ text-align:center; line-height: 170%; font-size:20px}
.mparid_box{ position: relative;width:400px;margin:0 auto}
.mparid_box .pic{ position:relative; overflow: hidden}
.mparid_box .pic:before{content: "\f03e";font-family: fontAwesome; width:100%; height:100%; display:block; background:rgba(192,0,3,0); left:0; top:0; position: absolute; z-index: 5; transition: all 0.5s ease-in-out;padding-top:20%; color:rgba(255,255,255,0.00); text-align: center ; font-size: 60px;}
.mparid_box:hover .pic:before{background:rgba(192,0,3,0.84); color:rgba(255,255,255,1.00);padding-top:33% }
.mparid_box a{width:100%; height:100%; position: absolute; left:0; top:0; z-index: 10}
.mparid_box img{ transition: all 0.8s ease-in-out;}
.mparid_box:hover img{ transform:scale(1.1)}
@media (max-width: 1200px) {
.mparid_box{width:100%;padding:0 15px}
}
@media (max-width: 580px) {
.container_msg14 .mparid>li{width:100%; float:none;margin:0 0 20px 0}
}
ul.box_3 li{width:calc(33.3% - 20px);margin: 0 10px 20px ; float:left;}
ul.box_3 li img{ border:1px solid rgba(172,172,172,1.00)}
@media (max-width: 880px) {
.equipment ul li{width:calc(50% - 20px)}
}
@media (max-width: 480px) {
ul.box_3 li{width:100%;margin:0 auto 15px; text-align: center}
.system_map{ font-size:18px}
}
.container_msg215 .txtNormal{padding:15px; margin-bottom:30px}
.container_msg215 .date{ margin:0 auto 10px; font-size:16px; padding:5px 10px; color:#000; text-align: center; border-bottom: 1px solid #ccc}
.cen{ text-align: center;margin:0 auto}
.pic_50{width:50% ; float:left;padding:10px; text-align: center}
.pic_30{width:33.3% ; float:left;padding:10px; text-align: center}
@media (max-width: 580px) {
.pic_50 ,.pic_30 {width:100% ; float:none}
}
.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.pagination{ display:table;margin:20px auto}
.pagination>li>a, .pagination>li>span{color:#000}
.pagination>li>a:hover, .pagination>li>span:hover, .pagination>li>a:focus, .pagination>li>span:focus{color:rgba(203,0,3,1.00)}
.pagination>.active>a, .pagination>.active>span, .pagination>.active>a:hover, .pagination>.active>span:hover, .pagination>.active>a:focus, .pagination>.active>span:focus{ background: rgba(189,0,3,1.00); border:1px solid rgba(203,0,3,1.00)}
.downloadpdf{padding:5px 15px; color:rgba(0,99,219,1.00)}
.downloadpdf a{color:rgba(5,86,137,1.00)}
.downloadpdf a:hover{ text-decoration: underline}
.downloadpdf i{ font-size:20px}
.container_msg5 .left_nav{ display:none}
.container_msg5 .right_content{width:80%; padding:0;margin:0 auto; float:none}
.quality .pic{width:489px; float:left}
.quality .info{width:calc(100% - 489px) ; padding:25px 20px; float:left; font-size:18px; line-height: 160%}
.word_icon a{ font-size:25px; color:rgba(0,75,136,1.00)}
.word_icon a:hover{color:rgba(224,0,3,1.00)}
.bt_line{ border-bottom: 1px solid rgba(176,176,176,1.00); padding:2px 50px}
.ui-state-focus{ outline: none}
#accordion h3{ border-bottom:1px solid #333;padding:5px; position: relative; font-size:18px; cursor: pointer}
#accordion h3 span {
position: absolute;
right: 8px;
top: 0px;
width: 20px;
height: 100%;
}
#accordion h3 span:before {
right: 6px;
margin-top: -7px;
width: 2px;
height: 14px;
}
#accordion h3 span:after, #accordion h3 span:before {
content: '';
display: block;
position: absolute;
background: #222;
top: 50%;
transition: .4s;
}
#accordion h3 span:after {
right: 0;
margin-top: -1px;
width: 14px;
height: 2px;
}
#accordion h3 span:before {
right: 6px;
margin-top: -7px;
width: 2px;
height: 14px;
}
#accordion h3:hover , #accordion h3.ui-state-active {color:rgba(192,0,3,1.00)}
#accordion h3.ui-state-active span:before{ opacity:0}
#accordion h3:hover span:before , #accordion h3:hover span:after , #accordion h3.ui-state-active span:before , #accordion h3.ui-state-active span:after{background:rgba(192,0,3,1.00)}
.quality table td{padding:0px 15px 0 0 }
.quality table td a img{ border:1px solid rgba(123,0,2,0); line-height: 0}
.quality table td a:hover img{ border:1px solid rgba(179,0,2,1.00)}
.quality ul li{ position:relative;padding:8px 0 0 13px}
.quality ul li:before{ content:"\f101" ; font-family: FontAwesome; position: absolute ; left:0; top:5px; color:rgba(199,0,3,1.00)}
.quality table td>img{margin:0 5px 5px}
.wd_280{width:280px}
.pic_gp img{ float:none;margin: 0 10px 15px}
.qu_pic>div{width:25%; display: inline-block;margin-right:-1%; vertical-align: top; text-align: center;padding:0 10px; font-size:13px}
.qu_pic>div img{margin-bottom:10px}
.quality #tabs2>ul>li:before{ content:""}
.quality #tabs2 ul.ui-tabs-nav{margin-bottom:20px}
.quality #tabs2 ul.ui-tabs-nav li{ display:inline-block; text-align: center}
.quality #tabs2 ul.ui-tabs-nav li a{padding:5px 20px; display: block; background: rgba(197,197,197,0.5) ;margin:0 2px}
.quality #tabs2 ul.ui-tabs-nav li.ui-state-active a{color:#fff; background:rgba(189,2,5,1.00)}
.qc_box{padding:5px 0}
.qc_box h5{ font-size:16px;margin:10px 0 15px; color:rgba(221,0,3,1.00) }
.quality .pic2 img{margin:0 5px 10px}
@media (max-width: 1100px) {
.quality .info{ font-size:16px;padding:15px}
.container_msg5 .right_content{width:90%}
}
@media (max-width: 880px) {
.container_msg5 .right_content{width:100%}
#accordion h3{ font-size:16px}
}
@media (max-width: 750px) {
.container_msg5 .right_content{width:100%}
.quality .pic{ float:none;width:100%; text-align: center}
.quality .info{ float:none;width:100%; text-align: center}
.wd_280{width:200px}
.quality table td{padding:0px 5px 0 0}
}
@media (max-width: 550px) {
.quality table{margin:0 auto}
.quality table td{ display:block; text-align: center;padding:0 0 10px 0}
.wd_280{width:100%; text-align: center}
.quality ul li{ display:inline-block; text-align: center}
.qu_pic>div{width:50%}
#tabs2{ text-align:center}
.quality #tabs2 ul.ui-tabs-nav li{padding: 0}
.quality #tabs2 ul.ui-tabs-nav{ margin-bottom: 30px;
display: inline-block;
margin: 0 auto 10px;
text-align: center;}
.pic2{ text-align:center}
}
@media (max-width: 480px) {
.qu_pic>div{width:100%; float:none}
}
.research_box1{margin-bottom:20px}
.research_box1 .pic{width:460px; float:left}
.research_box1 .info{width:calc(100% - 460px); float:left;padding:0 0 0 15px}
.research h2{margin:0 0 10px 0; font-size:25px; color:#000}
.research_box2 .pic>div{ float:left; display:inline-block;margin:0 15px 20px 0}
.research_box2 ul li{ position:relative;padding:5px 0 0 15px}
.research_box2 ul li:before{ content:"\f101" ; font-family: FontAwesome ; position:absolute; left:2px; top:2px}
.research .tab_zone{margin-bottom:15px;padding:10px 15px}
.research .tab_zone .pic{width:30% ; float:left;padding-right:10px; text-align: center}
.research .tab_zone .tab{width:70%; float:left}
.research .tab_zone .tab h4{ font-size:20px;margin:0 0 10px 0}
.research .tab_zone .tab table th{ background:rgba(205,218,244,1.00) ; color:rgba(78,78,78,1.00); font-weight: normal; text-align:center}
.research .tab_zone .tab table th , .research .tab_zone .tab table td{ border:1px solid rgba(140,140,140,1.00);padding:5px 10px; white-space: nowrap}
.rd_zone1 h2{ font-size:20px}
.rd_zone2 .pic ul li{ width:50%; float:left; text-align:center;padding:10px}
.rd_zone2 ul li h4{padding:10px ; background: rgba(173,0,2,1.00) ; color:#fff; font-size:14px;margin:0 0 10px 0}
.rd_zone2 .pic{width:500px; float:left}
.rd_zone2 .info{width:calc(100% - 500px); float:left;padding:15px 10px}
.rd_zone2>.info>ul>li{ position:relative;padding-left:15px;margin-bottom:15px}
.rd_zone2>.info>ul>li:before{content:"\f101" ; font-family: FontAwesome ; position:absolute; left:2px; top:2px}
.app_center_pic>div{width:calc(33.3% - 20px);margin:0 10px 20px; text-align: center; float:left}
.app_center_pic>div:nth-child(3n+1) { clear:left}
.app_center_pic>div p{margin-top:5px}
@media (max-width: 1100px) {
.rd_zone2 .pic{width:85%;margin:0 auto ;float:none}
.rd_zone2 .info{width:85%;margin:0 auto ; float:none;padding:15px 0px; clear: both}
}
@media (max-width: 1000px) {
.rd_zone2 .pic{width:500px; float:left}
.rd_zone2 .info{width:calc(100% - 500px); float:left;padding:15px 10px; clear:inherit}
}
@media (max-width: 780px) {
.rd_zone2 .pic{width:85%;margin:0 auto ;float:none}
.rd_zone2 .info{width:85%;margin:0 auto ; float:none;padding:15px 0px; clear: both}
}
@media (max-width: 680px) {
.research h2{ font-size:20px}
.research_box1 .pic{width:100%; float:none;margin-bottom:10px}
.research_box1 .info{width:100%; float:none;padding:0}
.research .tab_zone .tab h4{ font-size:16px}
.research .tab_zone table{ font-size:14px}
.research .tab_zone .pic{width:100%; float:none;padding:0;margin:0 0 15px 0}
.research .tab_zone .tab{width:100%; float:none;padding:0}
.research .tab_zone .tab table{width:100%}
.research .tab_zone p{ font-size:14px}
}
@media (max-width: 540px) {
.research_box2 .pic>div{ display:block;width:100%; text-align: center; flot:none;margin-bottom:10px}
.rd_zone2 .pic{width:100%}
.rd_zone2 .info{width:100%}
.app_center_pic>div{width:calc(50% - 20px);}
.app_center_pic>div:nth-child(3n+1) { clear:none}
.app_center_pic>div:nth-child(2n+1) { clear:left}
}
@media (max-width: 480px) {
.rd_zone2 .pic{width:220px;margin:0 auto}
.rd_zone2 .pic ul li{padding:0;width:100%;margin-bottom:15px}
.app_center_pic>div{width:80%;margin:0 auto 15px; float:none}
.app_center_pic>div:nth-child(2n+1) { clear:none}
}
.e-cata h2{margin:0 0 15px 10px; font-size:30px; background: url(ab_arrow.png) 0 8px no-repeat;padding-left:18px}
.pic_cen{ text-align:center;margin-bottom:15px}
.e-cata-list ul li{width:calc(25% - 20px);margin:0 10px 10px ; float:left; text-align: center; font-size:16px; position: relative}
.e-cata-list ul li a{width:100%; height:100%; display: block; position: absolute; left:0; top:0; z-index: 5}
.e-cata-list ul *{ transition:all 0.5s ease-in-out}
.e-cata-list{margin-bottom:20px; border-bottom:1px dashed rgba(127,127,127,1.00)}
.e-cata-list li p{height:50px}
.e-cata-list .pic{margin-bottom:10px ; border:1px solid rgba(179,179,179,1.00); position: relative}
.e-cata-list li:hover .pic{ border:1px solid rgba(197,12,15,1.00)}
.e-cata-list li .pic:before{content:"\f212"; font-family: FontAwesome; width:100%; height:100%; position: absolute; left:0; top:0; background:rgba(203,0,3,0.0); display: block; z-index: 5; transition:all 0.5s ease-in-out; font-size: 50px;padding-top:35%;color:rgba(255,255,255,0)}
.e-cata-list li:hover .pic:before{ background:rgba(203,0,3,0.90) ; color:rgba(255,255,255,1.00);padding-top:42%}
.e-cata-list li:hover p{color:rgba(197,12,15,1.00)}
.cata_50{width:50%; float:left}
.cata_50 .e-cata-list ul li{width: calc(50% - 20px);}
.cata_30 { width: 33.333%; float: left;}
.cata_30 .e-cata-list ul li{ width: calc(75% - 20px);}
@media (max-width: 680px) {
.e-cata-list ul li , .cata_50 .e-cata-list ul li, .cata_30 .e-cata-list ul li{width:calc(33.3% - 20px) ;margin:0 10px 20px; font-size:16px}
.e-cata-list li p{height:auto}
.e-cata h2{margin:0 0 15px 10px; font-size:25px}
.cata_50, .cata_30{width:100%; float:none}
}
@media (max-width: 480px) {
.e-cata-list ul li , .cata_50 .e-cata-list ul li{width:calc(50% - 20px) ;margin:0 10px 20px; font-size:15px}
}
.container_msg3 #tablist thead{ display:none}
.container_msg3 .table-bordered>tbody>tr>td , .container_msg3 .table-bordered{ border:0}
.container_msg3 .table-bordered>tbody>tr>td:last-child{ display:none}
.container_msg3 .table-bordered>tbody>tr>td:first-child{ text-align: center}
.container_msg3 .table-bordered>tbody>tr>td span{color:rgba(235,0,3,1.00) ;margin-right:10px}
.container_msg3 .table-bordered>tbody>tr:hover>td span{color:#fff }
.container_msg3 .table-bordered>tbody>tr{ border-bottom:1px solid rgba(170,170,170,1.00)}
.table-striped>tbody>tr:nth-child(odd){background:rgba(0,0,0,0);}
.table-striped>tbody>tr{ background:rgba(0,0,0,0.1); color:#333 ;}
.table-striped>tbody>tr a{color:#333}
.table-striped>tbody>tr:hover:nth-child(odd) , .table-hover>tbody>tr:hover{ background:rgba(255,0,4,0.87); color:#fff}
.table-striped>tbody>tr:hover a{color:#fff}
.container_msgtop_3 .date{ display:none}
.container_msgtop_3 .txtNormal{margin-bottom:20px}
.container_msgtop_3 ol{ list-style:none}
.container_msgtop_3 .style-1 table td , .container_msgtop_3 table th{ border:1px solid rgb(199, 199, 199) ;padding:10px 10px;text-align:center}
.container_msgtop_3 .style-1 table th{ background:rgba(156,0,2,1.00) ; color:#fff; text-align: center ; white-space: nowrap}
.container_msgtop_3 .style-1 table tr td:last-child{ }
.tab_list , .tab_list .pic_50 { text-align:left}
.container_msgtop_3 .txtNormal { text-align:center; font-size:16px; line-height: 160%}
.container_msgtop_3 .txtNormal h2{margin:0 0 15px; font-size:25px}
.container_msgtop_3 .txtNormal ol.text_cen {display: inline-block}
.container_msgtop_3 .txtNormal ol.text_cen li{display: block}
.container_msgtop_3 .txtNormal ol li:before{ content: ">" ;margin-right:5px ; color:rgba(195,0,3,1.00)}
/*è¯çµ¡æˆ‘們*/
.container_contact .left_nav{ display: none}
.container_contact .right_content{width:100%;padding-left:0}
.content_left .nav-list>li{ border-bottom:1px dashed rgba(100,100,100,0.5)}
.content_left .nav-list>li>a , .container_msg452 .contact_nav a{ font-size:36px;color:rgba(107,107,107,1.00)}
.content_left .nav-list>li>a:hover { background:none;color:#000}
.content_left .nav-list>li.active>a , .container_msg452 .contact_nav:hover>a{color:#000}
.content_left .nav-list>li.active>a:first-letter , .content_left .nav-list>li:hover>a:first-letter , .container_msg452 .contact_nav:hover>a span {color:#e60012}
.alert-info{ border-radius: 0; background: rgba(219,219,219,0.3) ; color:rgba(213,0,3,1.00); border:0; text-align: center}
.form-horizontal .form-group{margin:15px 0}
.form-horizontal .control-label{padding-right:15px}
.right_contact .control-group.btn{ text-align:center;margin:0 auto; display: inherit}
.contact_nav{ display:none}
.container_msg452 .contact_nav{ display:block;border-bottom:1px dashed rgba(100,100,100,0.5) ; border-top:1px dashed rgba(100,100,100,0.5);padding:5px 0}
.mparid_452{ display:none}
.map_zone_all{width:890px; position:relative}
.all_city , .world_zone{position:absolute; z-index: 20; left: 0; top:0; width:100%; height:100%}
.all_city>div , .world_zone>div{ position:absolute; z-index: 25 ; font-size:18px; font-weight: bold}
.all_city a:hover , .all_city a:focus{color:rgba(192,0,3,1.00)}
.tw{ right:10%; top:78%}
.tianjin{ right: 9%; top: 37.5%;}
.shanghai{right: 7%; top: 57.5%;}
.chongqing{left: 28%; top: 79%;}
.anhui{right: 2%;top: 51.5%;}
.anhui{right: 2%;top: 51.5%;}
.guangdong{right: 22%; top: 87%;}
.liaoning{right: 3%;top: 29.5%;}
.sichuan{left: 1%; top: 61%;}
.jiangsu{right: 13%; top: 47%;}
.shandong {right: 5.5%;top: 41.5%;}
.shaanxi {right: 46%;top: 26.5%;}
.hubei{ right: 45%; top: 20%;}
.zhejiang{ right: 10%;top: 65.5%;}
.hunan {right: 58%; top: 89%;}
.henan { right: 42%; top: 13%; }
.fujian { right: 12%; top: 71%; }
.jiangxi {right: 20%; top: 82%;}
.world_zone>div{ font-size:15px;height:20px; background-size: 22px}
.world_zone>div>a{ position:relative;color:rgba(0,0,0,0); display: block;padding:1px 2px 1px 10px}
.world_zone>div>a:hover{ background:rgba(158,0,0,0.88); color:#fff}
.world_zone>div>a:before{ content:""; width:5px; height:5px; border-radius: 50px; background:rgba(176,0,2,0) ; display:block ; position: absolute; left:2px; top:5px}
.world_zone>div>a:hover:before{background:#fff}
.india{ right: 26%;top: 48%; background:url(country_1.jpg) no-repeat;}
.malaysia { right: 15%; top: 55%;background:url(country_2.jpg) no-repeat}
.singapore {
right: 16%;
top: 58%;background:url(country_3.jpg) no-repeat;}
.philippines { right: 9%; top: 50%;background:url(country_4.jpg) no-repeat}
.turkey { right: 39%; top: 31%;background:url(country_5.jpg) no-repeat}
.korea { right: 11.5%;top: 35%;background:url(country_6.jpg) no-repeat}
.thailand {
right: 19%;
top: 48%;background:url(country_7.jpg) no-repeat
}
.vietnam { right: 16.5%;
top: 51.5%;background:url(country_8.jpg) no-repeat}
.africa { left: 51%;
top: 76%;background:url(country_9.jpg) no-repeat}
.morocco{ left: 41%;
top: 35%;background:url(country_10.jpg) no-repeat}
.sh-australia {
right: 10%;
top: 79%;background:url(country_11.jpg) no-repeat
}
.australia {
right: 8%;
top: 73%;background:url(country_11.jpg) no-repeat
}
.argentina {
left: 22%;
top: 82%;;background:url(country_12.jpg) no-repeat
}
.brazil {
left: 28%;
top: 60%;;background:url(country_13.jpg) no-repeat
}
.us {
left: 10%;
top: 26%;;background:url(country_14.jpg) no-repeat
}
.russia {
right: 30%;
top: 16%;;background:url(country_15.jpg) no-repeat
}
.portugal {
left: 41%;
top: 29%;;background:url(country_16.jpg) no-repeat
}
.germany {left: 47%;
top: 22%;;background:url(country_17.jpg) no-repeat
}
.czech {
right: 46%;
top: 25%;;background:url(country_18.jpg) no-repeat
}
.netherlands {
left: 44%;
top: 18%;;background:url(country_19.jpg) no-repeat}
.france {
left: 44%;
top: 25%;;background:url(country_20.jpg) no-repeat
}
.italy {
left: 47%;
top: 29%;;background: url(country_22.jpg) no-repeat
}
.algerie{ left: 44%;
top: 37%;background:url(country_23.jpg) no-repeat}
.scrollbar2
{
width: 100%;
overflow-x: auto;
overflow-y:hidden;
margin-bottom: 20px
}
.style-2::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #F5F5F5;
}
.style-2::-webkit-scrollbar
{
width: 8px;
height:8px;
background-color: #F5F5F5;
}
.style-2::-webkit-scrollbar-thumb
{
background-color:#000;
background-image: -webkit-linear-gradient(45deg,
rgba(255, 255, 255, .2) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, .2) 50%,
rgba(255, 255, 255, .2) 75%,
transparent 75%,
transparent)
}
/*service*/
.service_map{ position: relative}
.service_area{width:100%}
.service_map .tit{width:100%; text-align: center; font-size:25px; font-weight: bold; position: absolute; left:0; top:0; }
.area_box{width:20%;padding:0 10px;float:left}
.area_box h2{ font-size:18px; border-bottom: 1px solid rgba(39,39,39,1.00);padding:5px; font-weight: bold}
.area_box ol{margin:0;padding:0}
.area_box ol li{ list-style:none;padding:3px 5px;margin:0; display: table ; vertical-align: middle}
.container_msg452 .right_content span {width:14px; display:inline-block; height: 18px;margin:0 2px ; background-position: 2px 8px ; background-repeat: no-repeat}
.container_msg452 span.se_icon1{ background-image: url(icon1.png) }
.container_msg452 span.se_icon2{ background-image: url(icon2.png)}
.container_msg452 span.se_icon3{ background-image: url(icon3.png) }
.container_msg452 span.se_icon4{ background-image: url(icon4.png) }
.area_box ol li a{ color:rgba(73,73,73,1.00)}
.area_box ol li a:hover{color:rgb(210, 0, 0)}
.small-dialog span{width:14px; display:inline-block; height: 18px;margin:0 2px ; background-position: 2px 6px ; background-repeat: no-repeat}
.small-dialog span.se_icon1{ background-image: url(icon1.png) }
.small-dialog span.se_icon2{ background-image: url(icon2.png)}
.small-dialog span.se_icon3{ background-image: url(icon3.png) }
.small-dialog span.se_icon4{ background-image: url(icon4.png) }
.small-dialog h3{ font-size:22px;border-bottom:1px solid #e4e4e4;padding:5px ;margin:0 0 10px 0 }
.small-dialog h2{ font-size:18px; color:rgba(177,0,2,1.00) ;padding:8px ; background:rgba(226, 226, 226, 0.44);margin:0 0 10px 0 }
.small-dialog ul{margin:0 5px 15px}
.small-dialog ul li{padding:3px 5px; border-bottom:1px dashed rgba(207,207,207,1.00)}
.small-dialog ul li.mail:before{ content:"\f0e0" ; font-family: FontAwesome;margin:0 5px}
.service_map_zone .remark{ bottom:50px; position: absolute; left:30px}
.mfp-close-btn-in .small-dialog .mfp-close{ font-size:50px}
/* Styles for dialog window */
.small-dialog {
background: white;
padding: 15px 20px;
text-align: left;
max-width: 500px;
margin: 40px auto;
position: relative;
box-shadow: 1px 4px 11px 4px rgba(128, 128, 128, 0.63);
max-height: 760px;
overflow-y: auto;
}
.small-dialog2{max-width:650px}
.small-dialog2 iframe{ border:0}
/**
* Fade-zoom animation for first dialog
*/
/* start state */
.my-mfp-zoom-in .zoom-anim-dialog {
opacity: 0;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
-ms-transform: scale(0.8);
-o-transform: scale(0.8);
transform: scale(0.8);
}
/* animate in */
.my-mfp-zoom-in.mfp-ready .zoom-anim-dialog {
opacity: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
/* animate out */
.my-mfp-zoom-in.mfp-removing .zoom-anim-dialog {
-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
-ms-transform: scale(0.8);
-o-transform: scale(0.8);
transform: scale(0.8);
opacity: 0;
}
/* Dark overlay, start state */
.my-mfp-zoom-in.mfp-bg {
opacity: 0;
-webkit-transition: opacity 0.3s ease-out;
-moz-transition: opacity 0.3s ease-out;
-o-transition: opacity 0.3s ease-out;
transition: opacity 0.3s ease-out;
}
/* animate in */
.my-mfp-zoom-in.mfp-ready.mfp-bg {
opacity: 0.5; background: #fff
}
/* animate out */
.my-mfp-zoom-in.mfp-removing.mfp-bg {
opacity: 0;
}
/**
* Fade-move animation for second dialog
*/
/* at start */
.my-mfp-slide-bottom .zoom-anim-dialog {
opacity: 0;
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
-webkit-transform: translateY(-20px) perspective( 600px ) rotateX( 10deg );
-moz-transform: translateY(-20px) perspective( 600px ) rotateX( 10deg );
-ms-transform: translateY(-20px) perspective( 600px ) rotateX( 10deg );
-o-transform: translateY(-20px) perspective( 600px ) rotateX( 10deg );
transform: translateY(-20px) perspective( 600px ) rotateX( 10deg );
}
/* animate in */
.my-mfp-slide-bottom.mfp-ready .zoom-anim-dialog {
opacity: 1;
-webkit-transform: translateY(0) perspective( 600px ) rotateX( 0 );
-moz-transform: translateY(0) perspective( 600px ) rotateX( 0 );
-ms-transform: translateY(0) perspective( 600px ) rotateX( 0 );
-o-transform: translateY(0) perspective( 600px ) rotateX( 0 );
transform: translateY(0) perspective( 600px ) rotateX( 0 );
}
/* animate out */
.my-mfp-slide-bottom.mfp-removing .zoom-anim-dialog {
opacity: 0;
-webkit-transform: translateY(-10px) perspective( 600px ) rotateX( 10deg );
-moz-transform: translateY(-10px) perspective( 600px ) rotateX( 10deg );
-ms-transform: translateY(-10px) perspective( 600px ) rotateX( 10deg );
-o-transform: translateY(-10px) perspective( 600px ) rotateX( 10deg );
transform: translateY(-10px) perspective( 600px ) rotateX( 10deg );
}
/* Dark overlay, start state */
.my-mfp-slide-bottom.mfp-bg {
opacity: 0;
-webkit-transition: opacity 0.3s ease-out;
-moz-transition: opacity 0.3s ease-out;
-o-transition: opacity 0.3s ease-out;
transition: opacity 0.3s ease-out;
}
/* animate in */
.my-mfp-slide-bottom.mfp-ready.mfp-bg {
opacity: 0.8;
}
/* animate out */
.my-mfp-slide-bottom.mfp-removing.mfp-bg {
opacity: 0;
}
.my-mfp-zoom-in.mfp-ready .small-dialog2{padding:20px }
.small-dialog2 h3{margin:0 0 10px 0; border-bottom:1px solid rgba(128,128,128,1.00); font-size:25px;padding-bottom:5px}
.small-dialog2 .info{margin-bottom:10px}
.service_tit{ font-size:22px; background:rgba(228,228,228,1.00); text-align: center; font-weight: bold;padding:5px ;margin-top:15px }
.service_tit:after{ content: "\f107" ; font-family: FontAwesome}
@media (max-width: 1279px) {
.map_zone_all{width:680px;margin:0 auto}
.all_city>div{font-size: 15px}
.service_map .tit{ font-size:20px}
.world_zone>div{ font-size:13px;height:20px;}
.world_zone>div>a{ display:block}
.world_zone>div>a:hover{ position:relative; z-index: 20}
}
@media (max-width: 1150px) {
.area_box ol li{padding:3px 0 }
.area_box{padding:0 10px 0 0}
}
@media (max-width: 1000px) {
.content_left{display:none}
.right_contact{width:100%;padding-left:0}
.area_box ol li{padding:3px 5px }
.area_box{padding:0 10px}
}
@media (max-width: 850px) {
.area_box{width:33.3%}
.area_box:nth-child(4){ clear:left}
.service_map_zone .remark{ bottom:10px; position: absolute; left:0px}
}
@media (max-width: 700px) {
.service_map .tit{font-size: 20px; font-weight: normal}
.container_msg452 .page-header{margin-bottom:15px}
.small-dialog2{max-width:85%}
}
@media (max-width: 550px) {
.small-dialog {
background: white;
padding: 15px ;
text-align: left;
max-width: 90%;
margin: 40px auto;
position: relative;
box-shadow: 1px 4px 11px 4px rgba(128, 128, 128, 0.63);
}
.small-dialog h2{ font-size:18px}
.area_box{width:50%}
.area_box:nth-child(3){ clear:left}
.area_box:nth-child(4){ clear:inherit}
.small-dialog ul{margin:0}
.service_map .tit{font-size: 18px; }
.small-dialog2 h3{ font-size:20px}
}
@media (max-width: 480px) {
.service_map_zone .remark{ position: inherit; }
.service_map_zone .remark li{ display:inline-block}
.alert{padding:5px}
}
@media (max-width: 380px) {
.area_box{width:100%; float: none;margin-bottom:20px}
.area_box:nth-child(3){ clear:inherit}
.area_box:nth-child(4){ clear:inherit}
.area_box{padding:0}
.area_box h2{ font-size:16px}
.area_box ol li{width:49%; display: inline-block}
.area_box ol li a{ font-size:14px;}
}
.research_box .tit{ font-size:20px; padding:5px ; color:rgba(20,41,120,1.00);margin-bottom:10px; border-bottom: 1px solid rgba(146,146,146,1.00)}
.research_box ul li{width:30%; display: inline-block;margin-bottom:10px;padding:15px}
.research_box ul li img{border:1px solid rgba(208,208,208,0)}
.research_box ul li:hover img{ opacity:0.9 ; border:1px solid rgba(208,208,208,1.00)}
.container_contact .txtNormal ul li{ line-height:180%; border-bottom: 1px dashed rgba(65,65,65,0.5);padding:8px 3px; font-size:16px }
.container_contact .txtNormal ul li:before{ content:"\f101"; font-family: FontAwesome;margin:0 5px ; color:rgba(8,25,108,1.00)}
.container_contact .txtNormal ul li a{padding:0 10px 0 0 ; color:#000}
.container_contact .txtNormal ul li a:hover{ color:rgba(191,0,3,1.00)}
/**
* Simple fade transition,
*/
.mfp-fade.mfp-bg {
opacity: 0;
-webkit-transition: all 0.15s ease-out;
-moz-transition: all 0.15s ease-out;
transition: all 0.15s ease-out;
}
.mfp-fade.mfp-bg.mfp-ready {
opacity: 0.8;
}
.mfp-fade.mfp-bg.mfp-removing {
opacity: 0;
}
.mfp-fade.mfp-wrap .mfp-content {
opacity: 0;
-webkit-transition: all 0.15s ease-out;
-moz-transition: all 0.15s ease-out;
transition: all 0.15s ease-out;
}
.mfp-fade.mfp-wrap.mfp-ready .mfp-content {
opacity: 1;
}
.mfp-fade.mfp-wrap.mfp-removing .mfp-content {
opacity: 0;
}
.container_msg6 .sb-btn2 , .container_msg6 .left_nav , .container_msg5 .sb-btn2 { display:none}
.container_msg6 .right_content{width:100%; float:none;padding:0}
.video_zone ul li{width:20% ; float:left;padding:0 5px; position: relative;margin:0 0 10px 0; height:230px}
.video_zone ul li a{width:100%; height:100%; position: absolute; left:0; top:0; display: block; z-index: 5}
.video_zone ul li .pic{ position: relative;margin-bottom:5px}
.video_zone ul li .pic:before{content:"\f03d"; font-family: FontAwesome; width:100%; height:100%; position: absolute; left:0; top:0; background:rgba(203,0,3,0.0); display: block; z-index: 5; transition:all 0.5s ease-in-out; font-size: 35px;padding-top:20%;color:rgba(255,255,255,0); text-align: center}
.video_zone ul li:hover .pic:before{ background:rgba(203,0,3,0.90) ; color:rgba(255,255,255,1.00);padding-top:25%}
.video_zone ul li h5{font-size:16px;margin:0; line-height: 150% }
.video_zone ul li p{ font-size:14px}
.video_zone ul li:hover h5{color:rgba(203,0,3,1)}
.video_box h2{margin:0 0 15px 0; font-size:22px;padding:0 5px 10px; border-bottom:1px solid rgba(154,154,154,1.00); color:rgb(232, 0, 3); text-align: center}
.news_pic_list{width:calc(50% - 30px);margin:0 15px 20px; float:left}
.container_msg3 #tablist.table-hover>tbody>tr:first-child>td:nth-child(2):hover:before , .container_msg3 #tablist.table-hover>tbody>tr:nth-child(2)>td:nth-child(2):hover:before{ color:rgba(255,221,0,1.00);}
.pdf_zone{ text-align:center}
.pdf_black{ position: relative ; background:url(year_30.png) no-repeat;padding:45px 0 0 ;margin:0 auto; display:inline-block}
.pdf_black>div{border-collapse: collapse; display: table-cell}
.pdf_black .pic{width:189px; border-collapse: collapse;padding-bottom:10px; position: relative}
.pdf_black .pic:before{ content:"\f019"; font-family: FontAwesome; width:100%; height:calc(100% - 10px); display: block; background:rgba(197,0,3,0); position: absolute; left: 0; top:0; font-size: 45px; color:rgba(255,255,255,0);padding-top:40%; text-align: center ; transition: all 0.3s ease-in-out}
.pdf_black:hover .pic:before{background:rgba(197,0,3,0.90); color:rgba(255,255,255,1.00);padding-top:50%;}
.pdf_black .info{width:calc(100% - 189px);padding-left:20px; vertical-align: bottom}
.pdf_black h2{ font-size:20px;margin:0 0 3px 30px; text-align:left}
.pdf_black p{ font-size:18px; color:#fff; padding:5px 120px 5px 30px;/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ff0600+0,ffe500+100 */
background: rgb(255,6,0); /* Old browsers */
background: -moz-linear-gradient(left, rgba(255,6,0,1) 0%, rgba(255,229,0,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, rgba(255,6,0,1) 0%,rgba(255,229,0,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, rgba(255,6,0,1) 0%,rgba(255,229,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff0600', endColorstr='#ffe500',GradientType=1 ); /* IE6-9 */ -webkit-transform:skewX(-30deg);-ms-transform:skewX(-30deg);transform:skewX(-30deg);}
.pdf_black a{width:100%; height:100%; display: block; background:rgba(0,0,0,0); position: absolute; left: 0; top:0; z-index: 10;}
.patent .info{padding: 20px ; width:420px;margin:0 auto}
.patent .info span{ color:rgba(244,0,68,1.00) ;font-size:14px;margin-right:5px}
.patent .info li{padding:5px; line-height: 150%; font-size:17px}
.patent .info li:hover{ background:rgba(208,208,208,0.54)}
.patent h3{ font-size:22px; color:rgba(205,0,3,1.00) ; }
@media (max-width: 1024px) {
.video_zone ul li{width:33.3% ; float:left;padding:0 5px; position: relative;margin:0 0 10px 0; height:300px}
}
@media (max-width: 780px) {
.video_zone ul li{ height:230px}
.patent .info{padding:20px 0}
}
@media (max-width: 650px) {
.video_zone ul li{width:50% ; float:left;padding:0 10px; position: relative;margin:0 0 10px 0; height:250px}
.news_pic_list{width:calc(50% - 20px);margin:0 10px 20px; float:left}
}
@media (max-width: 550px) {
.pdf_black{ background-size: 350px; background-position:30px 0}
.pdf_black .pic{width:160px}
.pdf_black .info{width:calc(100% - 160px)}
.pdf_black p{padding: 5px 45px 5px 30px;}
}
@media (max-width: 480px) {
.video_zone ul li{width:50% ; float:left;padding:0 5px; position: relative;margin:0 ; height:200px}
.video_zone ul li h5{font-size:15px;margin:0; line-height: 150% }
.video_zone ul li p{ font-size:13px}
.news_pic_list{width:100%; text-align: center; float:none;margin:0 auto 10px}
.pdf_black h2{margin:0 0 3px 15px}
.pdf_black p{padding: 3px 35px 3px 20px; font-size:15px}
.pdf_black .pic{width:145px}
.pdf_black .info{width:calc(100% - 145px)}
.pdf_black{ background-size: 300px; background-position:30px 0}
.patent .info{padding: 20px ; width:100%;margin:0 auto}
.patent .info li{padding:5px; line-height: 150%; font-size:16px}
}
@media (max-width: 380px) {
.video_zone ul li{ height:180px}
.pdf_black{padding:0;width:100%}
.pdf_black .pic{width:140px; text-align: left}
.pdf_black .info{width:100%;padding:0; text-align: center}
.pdf_black>div{display:block}
.pdf_black h2{ text-align:center;margin:0 0 5px 0}
.pdf_black p{width:80%;margin:0 auto}
.pdf_black{ background-size: 300px}
.patent .pic , .patent .info{width:100%; float:none;margin:0 auto}
.patent .info{padding:20px 0}
.patent h3{ font-size:19px}
}
#tabs3{width:100%}
#tabs3 .ui-widget-header{ text-align:center}
#tabs3 .ui-widget-header>li{ display:inline-block;margin:0 10px 20px; text-align: center;}
#tabs3 .ui-widget-header>li>a{ display:block;padding:8px 20px; border:1px solid rgba(132,132,132,1.00)}
#tabs3 .ui-widget-header>li>a:hover{background:rgba(171,0,2,1.00); color:#fff}
#tabs3 .ui-widget-header>li.ui-state-active>a{ background:rgba(171,0,2,1.00); color:#fff}
#tabs3 h2 , #tabs-1>h3 ,#tabs-1>p{ text-align: center}
#tabs-1>p{margin-bottom:20px}
#tabs3 .text_zone , .benefits .text_zone{padding:30px 15px}
#tabs3 div.row:nth-child(odd) , .benefits div.row:nth-child(odd){ background:rgba(224, 224, 224, 0.35)}
#tabs-3 h3{ text-align:center;margin-bottom:30px}
.safety{margin-bottom:20px}
.safety .col-md-4{ text-align:center}
.safety ul{margin-top:20px}
.safety ul li{padding:10px; list-style: decimal }
#tabs-3 ul li{padding:10px}
.benefits .tit.text_zone{padding:15px 15px 30px; line-height: 160%}
.event_pic ul li{padding:5px ; text-align: center; font-size:16px; }
.event_pic ul li .pic{ border:1px solid rgba(111,111,111,1.00);margin-bottom:5px}
.event_pic ul li:nth-child(3n+1){ clear:left}
.join_us iframe { border:0}
.join_us { text-align:center}
.join_us p{margin-bottom:30px}
@media (max-width: 991px) {
.event_pic ul li:nth-child(3n+1){ clear:none}
.event_pic ul li:nth-child(2n+1){ clear:left}
}
@media (max-width: 780px) {
#tabs3 .text_zone, .benefits .text_zone{padding:15px}
h3{ font-size:20px}
}
.cont_us{ position:fixed; right:27px; bottom:40%;width:30px; text-align: center; z-index: 110}
.cont_us i{font-size:30px; color:#fff}
.cont_us a{ padding: 3px 15px;color:#fff; display: block;width:100%; height:100%}
.cont_us>div{-webkit-animation: move 2s infinite;
-moz-animation: move 2s infinite;
-o-animation: move 2s infinite;
animation: move 2s infinite; position: absolute;
border-radius: 5px;
box-shadow: -3px 2px 8px rgba(0, 0, 0, 0.47); background:rgba(171,0,2,1.00)}
.cont_us>div:hover{background:#000}
@-webkit-keyframes move {
0% {top:0}
50% {top:10px }
100% {top:0 }
}
@-moz-keyframes move {
0% {top:0}
50% {top:10px }
100% {top:0 }
}
@-o-keyframes move {
0% {top:0}
50% {top:10px }
100% {top:0 }
}
@keyframes move {
0% {top:0}
50% {top:10px }
100% {top:0 }
}
@media (max-width: 1000px) {
.cont_us{right:8px;}
.cont_us i{font-size:20px}
.cont_us a{ padding: 3px 10px;color:#fff; display: block;width:100%; height:100%}
}
.procate_des {display:none}
.container_product .procate_des{display:block}
/*Footer 社群連çµ*/
.footer-social {width: 140px;position: absolute;top: 0;left: 15px;}
.ft_menu_zone {padding-left: 160px;}
.ft_zone .wrap {position: relative;}
.footer-social li {margin-top: 10px;}
@media (max-width: 800px) {
.footer-social {width: 100%;position: static;padding-left: 15px;}
.footer-social li {display: inline-block;max-width: 100%;margin-top: 20px;}
.footer-social li + li {margin-left: 10px;}
.footer-social img {width: 140px;}
}
@media (max-width: 580px) {
.footer-social {text-align: center;padding-left: 0;}
.footer-social li {display: block;width: 100%;margin-top: 10px;}
.footer-social li + li {margin-left: 0;}
}
.ft_com_info_zone:after {
content: "";
display: block;
clear: both;
}