@charset "utf-8";



/* Font */
@font-face{ font-family: titfont; src:url('../font/montserrat/Montserrat-Regular.otf');}
@font-face{ font-family: bodyfont; src:url('../font/verdana/Verdana.ttf');}



/* Base */
html,body{ margin: 0; padding: 0; background: #ffffff; color: #222222; font-family: bodyfont,Verdana,"Microsoft YaHei",微软雅黑,"sans-serif"; font-size: 15px; font-weight: 400;}
*,::after,::before{ box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;}
a{ color: #222222; text-decoration: none; font-family: bodyfont,Verdana,"Microsoft YaHei",微软雅黑,"sans-serif"; font-size: 15px; font-weight: 400; transition: all 0.3s; -moz-transition: all 0.3s; -webkit-transition: all 0.3s; -o-transition: all 0.3s;}
a:hover{ color: #009680;}
ul,li,ol,dl,dt,dd{ list-style-type: none; list-style-position: outside; margin: 0; padding: 0;}
.clear{ height: 0; font-size: 0; line-height: 0; clear: both; overflow: hidden;}
form,input,button,p,tr,td,h1,h2,h3,h4,h5,h6,div{ margin: 0; padding: 0;}
input,button,textarea{ font-family: bodyfont,Verdana,"Microsoft YaHei",微软雅黑,"sans-serif";}
table{ border-collapse: collapse; border-spacing: 0;}
fieldset,img{ border: 0; outline-width: 0; vertical-align: top;}
caption,th{ text-align: left;}
h1,h2,h3,h4,h5,h6{ font-weight: normal;}
article,aside,dialog,footer,header,section,footer,nav,figure,menu{ display: block;}
.cbox{ width: 100%; height: auto; padding: 0 15px; margin: 0 auto; position: relative;}
.row{ margin-left: -15px; margin-right: -15px;}
.col{ float: left; width: 100%; height: auto; padding: 0 15px;}



/* Pages */
.pages{ width: auto; height: auto;}
.pages ul.pagination{ width: auto; height: auto; font-size: 0; text-align: center;}
.pages ul.pagination li{ display: inline-block; width: 40px; height: 40px; line-height: 40px; text-align: center; font-size: 14px; background: #ffffff; margin-left: 1px; margin-bottom: 1px;}
.pages ul.pagination li.active{ display: inline-block; width: 40px; height: 40px; line-height: 40px; text-align: center; background: #009680; color: #ffffff;}
.pages ul.pagination li.disabled{ display: inline-block; width: 40px; height: 40px; line-height: 40px; text-align: center; color: #bbbbbb;}
.pages ul.pagination li a{ display: inline-block; width: 40px; height: 40px; line-height: 40px; text-align: center; font-size: 14px;}
.pages ul.pagination li a:hover{ background: #eeeeee;}



/* Topline */
#topline{ position: absolute; left: 0; top: 0; width: 100%; height: 30px; background: #222222; z-index: 10;}
#topline .col{ width: 50%;}
#topline .welcome{ color: #ffffff; font-size: 14px; line-height: 30px;}
#topline ul.toplinks{ float: right;}
#topline ul.toplinks li{ float: left; margin-left: 20px; line-height: 30px;}
#topline ul.toplinks li a{ color: #ffffff; font-size: 14px;}
#topline ul.toplinks li a:hover{ color: #ffffff;}
#topline ul.toplinks li a i{ margin-right: 10px;}



/* Header */
#header{ position: absolute; left: 0; top: 30px; width: 100%; height: auto; background: #ffffff; z-index: 10;}
#header .col:nth-child(1){ width: 60%;}
#header .col:nth-child(2){ width: 40%;}
#header #logo{ width: auto; height: 50px; margin: 15px 0;}
#header #logo img{ width: auto; height: 50px;}
#header .tel{ text-align: right; padding-top: 15px;}
#header .tel img{ height: 50px;}



/* Menu */
#menu{ position: absolute; left: 0; top: 110px; width: 100%; height: 60px; background: #009680; box-shadow: 0 3px 3px 0px rgba(0,0,0,0.2); z-index: 10;}



/* Nav */
#nav{ width: auto; height: 60px;}
#nav ul > li{ position: relative; width: auto; float: left; width: 11.1111%;}
#nav ul > li a { display: block; width: 100%; height: 60px; line-height: 60px; color: #ffffff; text-align: center; font-size: 16px; transition: all 0.3s; -moz-transition: all 0.3s; -webkit-transition: all 0.3s; -o-transition: all 0.3s;}
#nav ul > li a:hover { padding: 0 15px; color:#ffffff; background: #00d3c4;}
#nav ul > li a i { line-height: 60px; padding-left: 10px; display: none;}
#nav ul li ul { display: none; position: absolute; top: 60px; left: 0; width: 180px; height: auto; background: #ffffff; border-top: 3px solid #009680; z-index: 11; box-shadow: 0 0 5px 1px rgba(0,0,0,0.2);}
#nav ul li ul li{ width: 100%; height: 50px; position: relative;}
#nav ul li ul li a{ display: block; width: 100%; height: 50px; padding: 0 20px; line-height: 50px; color: #222222; font-size: 14px; text-align: left;}
#nav ul li ul li a:hover { color:#ffffff; background: #009680; padding: 0 25px;}
#nav ul li ul li a i{ float: right;}
#nav ul li ul li ul { display: none; position: absolute; top: -3px; left: 180px; width: 180px; height: auto; z-index: 11;}



/* Header Mobile */
#header-mobile{ position: absolute; left: 0; top: 0; width: 100%; height: auto; z-index: 10; background: #ffffff; box-shadow: 0 0 10px 3px rgba(0,0,0,0.2);}
#header-mobile{ width: 100%; height: auto;}
#header-mobile #logo-mobile{ width: auto; height: auto; padding: 10px 0; text-align: center;}
#header-mobile #logo-mobile img{ max-width: 100%; max-height: 40px;}



/* Botop */
#botop{ width: 100%; height: auto; padding: 50px 0; background: #009680 url("../image/default/botop_bg.jpg") center no-repeat; background-size: cover;}
#botop .col:nth-child(1){ width: calc(100% - 200px);}
#botop .col:nth-child(2){ width: 200px;}
#botop .des{ float: left; width: auto; height: 40px; line-height: 40px; color: #ffffff; font-size: 24px; font-weight: 300;}
#botop .go{ float: right;}
#botop .go a{ display: block; width: 150px; height: 40px; border: 2px solid #ffffff; text-align: center; line-height: 36px; color: #ffffff;}
#botop .go a:hover{ background: #ffffff; color: #009680;}
#botop .biaoyu{ position: absolute; left: 380px; top: 5px; z-index: 3;}



/* Footer */
#footer{ width: 100%; height: auto; background: #222222;}
#footer .bottom{ padding: 50px 0;}
#footer .bottom .col{ width: 20%;}
#footer .bottom .col:nth-child(5){ width: 15%; float: right;}
#footer .bottom dl{ width: 100%; height: auto;}
#footer .bottom dl dt{ margin-bottom: 20px;}
#footer .bottom dl dt a{ color: #cccccc;}
#footer .bottom dl dt a:hover{ color: #ffffff;}
#footer .bottom dl dd{ margin-top: 10px;}
#footer .bottom dl dd a{ color: #aaaaaa; font-size: 14px;}
#footer .bottom dl dd a:hover{ color: #ffffff;}
#footer .bottom .col:nth-last-child(3) dl dd i{ display: inline-block; width: 25px; color: #aaaaaa; vertical-align: top; padding-top: 2px;}
#footer .bottom .col:nth-last-child(3) dl dd a{ display: inline-block; width: calc(100% - 25px); color: #aaaaaa; font-size: 14px; word-break: break-all; text-align: justify;}
#footer .copyright{ padding: 20px 0; border-top: 1px solid #444444; color: #aaaaaa; font-size: 14px;}
#footer .copyright .col{ width: 50%;}
#footer .copyright .col:nth-child(2){ text-align: right;}
#footer .copyright p{ line-height: 2em;}
#footer .copyright a{ color: #aaaaaa; font-size: 14px;}
#footer .copyright a:hover{ color: #ffffff;}



/* Gototop */
.gototop{ width: 50px; height: 50px; display: none; position: fixed; bottom: 20px; right: 20px; background: url(../image/default/gototop.png) center no-repeat; z-index: 20;}



/* Bar Mobile */
#bar-mobile{ width: 100%; height: 50px; position: fixed; left: 0; bottom: 0; z-index: 11; background: #ffffff;}
#bar-mobile .col{ width: 50%; padding: 0;}
#bar-mobile a{ display: block; width: 100%; height: 50px; background: #f43113; color: #ffffff; text-align: center; line-height: 48px;}
#bar-mobile a i{ padding-right: 10px;}
#bar-mobile .col:first-child a{ background: #009680;}



/* Container */
#container{ width: 100%; height: auto; overflow: hidden; padding-top: 170px; position: relative;}



/* Banner */
#banner{ width: 100%; height: auto; background: none;}
#banner #swiper-banner{ width: 100%; height: auto;}
#banner #swiper-banner .swiper-slide img{ width: 100%;}
#banner #swiper-banner .swiper-pagination-bullet{ width: 12px; height: 12px; background: #ffffff;}
#banner #swiper-banner .swiper-pagination-bullet-active{ background: #ffffff;}



/* Banner Mobile */
#banner-mobile{ width: 100%; height: auto; background: none;}
#banner-mobile #swiper-mobile{ width: 100%; height: auto;}
#banner-mobile #swiper-mobile .swiper-slide img{ width: 100%;}
#banner-mobile #swiper-mobile .swiper-pagination-bullet{ width: 12px; height: 12px; background: #ffffff;}
#banner-mobile #swiper-mobile .swiper-pagination-bullet-active{ background: #ffffff;}



/* Menu Mobile */
#menu-mobile{ width: 100%; height: auto; background: #eeeeee; padding: 30px 0 10px 0;}
#menu-mobile .row{ margin-left: 0; margin-right: 0;}
#menu-mobile .row .col{ float: left; width: 25%; height: auto; padding: 0 2px;}
#menu-mobile dl{ width: 100%; height: auto; margin-bottom: 20px;}
#menu-mobile dl dt{ width: 40px; height: 40px; margin: 0 auto; margin-bottom: 5px;}
#menu-mobile dl dt a{ display: block; width: 40px; height: 40px; border-radius: 10px; overflow: hidden; background: #eeeeee;}
#menu-mobile dl dt a i{ display: inline-block; width: 40px; height: 40px; line-height: 40px; text-align: center; vertical-align: bottom; color: #ffffff;}
#menu-mobile dl dd{ width: 100%; height: 16px; line-height: 16px; text-align: center; overflow: hidden;}
#menu-mobile dl dd a{ font-size: 12px;}



/* Section */
/* Section-bannerbot */
.section-bannerbot{ width: 100%; height: auto; padding: 0; background: #303945; position: relative;}
.section-bannerbot .col{ width: 50%; height: 60px;}
.section-bannerbot .notice{ width: 100%; height: 40px; margin-top: 10px; line-height: 40px; color: #ffffff;}
.section-bannerbot .notice .tit{ float: left; width: 80px;}
.section-bannerbot .notice #swiper-notice{ height: 40px; width: calc(100% - 80px); float: right; overflow: hidden;}
.section-bannerbot .notice .swiper-slide{ height: 40px; width: 100%; overflow: hidden;}
.section-bannerbot .notice a{ color: #ffffff;}
.section-bannerbot .sobox{ width: 100%; height: 36px; margin-top: 12px; font-size: 0;}
.section-bannerbot .sobox input{ display: inline-block; width: calc(100% - 80px); height: 36px; line-height: 36px; border: none; background: #ffffff; padding: 0 10px; font-size: 14px;}
.section-bannerbot .sobox button{ display: inline-block; width: 80px; height: 36px; line-height: 36px; border: none; background: #009680; font-size: 16px; color: #ffffff;}
@media screen and (max-width: 1024px){
    .section-bannerbot .col:nth-child(2){ display: none;}
    .section-bannerbot .col{ width: 100%;}
}



/* Section-profile */
.section-profile3{ width: 100%; height: auto; padding: 50px 0; background: #ffffff url("../image/default/banner_bg2.jpg") bottom center no-repeat; position: relative;}
.section-profile3 .col:nth-child(1){ width: 270px;}
.section-profile3 .col:nth-child(2){ width: calc(100% - 270px);}
.section-profile3 .profile-pic{ position: relative;}
.section-profile3 .profile-pic img{ width: 100%;}
.section-profile3 .colbox{ width: 100%; height: auto; overflow: hidden;}
.section-profile3 .colbox .coltit{ width: 100%; height: 40px; overflow: hidden; margin-bottom: 15px;}
.section-profile3 .colbox .coltit .tit{ float: left; height: 40px; line-height: 40px;}
.section-profile3 .colbox .coltit .tit a{ font-size: 30px; font-weight: 300;}
.section-profile3 .colbox .coltit .subtit{ float: left; margin-left: 20px; height: 20px; line-height: 20px; margin-top: 20px;}
.section-profile3 .colbox .colcon { line-height: 30px; text-align: justify; text-indent: 2em; margin-bottom: 15px;}
.section-profile3 .colbox .more{ width: 100%; height: auto;}
.section-profile3 .colbox .more a{ display: inline-block; width: 100px; height: 30px; text-align: center; line-height: 30px; background: #009680; color: #ffffff; border-radius: 4px;}
.section-profile3 .colbox .more a i{ padding-left: 10px;}
.section-profile3 .colbox .more a:hover{ background: #00d3c4;}
@media screen and (max-width: 1024px){
    .section-profile3{ padding: 40px 0;}
    .section-profile3 .col:nth-child(1){ display: none;}
    .section-profile3 .col:nth-child(2){ width: 100%;}
    .section-profile3 .colbox{ height: auto;}
    .section-profile3 .colbox .coltit{ height: auto;}
    .section-profile3 .colbox .coltit .tit{ float: none; text-align: center;}
    .section-profile3 .colbox .coltit .tit a{ font-size: 24px;}
    .section-profile3 .colbox .coltit .subtit{ float: none; text-align: center; margin-left: 0; font-size: 14px; margin-top: 5px;}
    .section-profile3 .colbox .more{ text-align: center;}
}



/* Section-article */
.section-article3{ width: 100%; height: auto; padding: 50px 0 180px 0; background: #ffffff url("../image/default/mainbot_bg.jpg") bottom center no-repeat; background-size: contain; position: relative;}
.section-article3 .section-title{ width: 100%; height: 40px; margin-bottom: 25px; font-size: 0; overflow: hidden;}
.section-article3 .section-title .tit{ float: left; width: auto; height: 40px; line-height: 40px;}
.section-article3 .section-title .tit a{ font-size: 30px; font-weight: 300;}
.section-article3 .section-title .subtit{ float: left; width: auto; height: 20px; line-height: 20px; font-size: 14px; margin: 20px 0 0 20px;}
.section-article3 .section-title .more{ float: right; width: auto; height: 20px; line-height: 20px; font-size: 14px; margin: 20px 0 0 20px;}
.section-article3 .col{ width: 50%;}
.section-article3 .col:nth-child(2){ padding: 0 10px;}
.section-article3 .list{ width: 100%; height: auto; position: relative; margin-bottom: 12px;}
.section-article3 .list .pic{ float: left; width: 165px; height: 99px; overflow: hidden; background: #222222;}
.section-article3 .list .info{ float: right; width: calc(100% - 180px); height: 99px;}
.section-article3 .list .pic img{ width: 100%; transition: all 0.3s; -moz-transition: all 0.3s; -webkit-transition: all 0.3s; -o-transition: all 0.3s;}
.section-article3 .list .pic:hover img{ transform: scale(1.1);}
.section-article3 .list .title{ width: 100%; height: 30px; line-height: 30px; overflow: hidden; text-align: justify;}
.section-article3 .list .des{ width: 100%; height: 40px; line-height: 20px; overflow: hidden; text-align: justify; font-size: 14px; color: #666666;}
.section-article3 .list .catedate{ width: 100%; height: 29px; line-height: 29px;}
.section-article3 .list .catedate a{ float: left; color: #999999; font-size: 14px;}
.section-article3 .list .catedate a:hover{ color: #009680;}
.section-article3 .list .catedate span{ float: right; color: #999999; font-size: 14px;}
.section-article3 .list .catedate span i{ padding-right: 8px;}
.section-article3 .item{ float: left; width: 50%; height: auto; padding: 0 5px; margin-bottom: 10px; position: relative;}
.section-article3 .item .pic{ width: 100%; height: 0; padding-bottom: 60%; overflow: hidden; background: #222222;}
.section-article3 .item .pic img{ width: 100%; transition: all 0.3s; -moz-transition: all 0.3s; -webkit-transition: all 0.3s; -o-transition: all 0.3s;}
.section-article3 .item:hover .pic img{ transform: scale(1.1);}
.section-article3 .item .info{ position: absolute; width: calc(100% - 10px); height: 0; padding-bottom: calc(60% - 6px); left: 5px; top: 0; background: #222222; opacity: 0; filter: alpha(opacity=0); overflow: hidden; z-index: 6; transition: all 0.3s; -moz-transition: all 0.3s; -webkit-transition: all 0.3s; -o-transition: all 0.3s;}
.section-article3 .item:hover .info{ opacity: 0.8; filter: alpha(opacity=80);}
.section-article3 .item .info .cate{ width: 100%; height: auto; margin-top: 20px; padding-right: 20px; font-size: 14px; color: #999999; text-align: right;}
.section-article3 .item .info .title{ width: 100%; height: 50px; line-height: 25px; margin-top: 10px; padding-right: 20px; padding-left: 20px; color: #ffffff; text-align: right; overflow: hidden;}
@media screen and (max-width: 1240px){
    .section-article3{ padding: 40px 0 140px 0;}
}
@media screen and (max-width: 1024px){
    .section-article3 .section-title{ height: auto; margin-bottom: 20px;}
    .section-article3 .section-title .tit{ float: none; text-align: center;}
    .section-article3 .section-title .tit a{ font-size: 24px;}
    .section-article3 .section-title .subtit{ float: none; margin: 5px 0 0 0; text-align: center;}
    .section-article3 .section-title .more{ display: none;}
    .section-article3{ padding: 40px 0 100px 0;}
    .section-article3 .col{ width: 100%; margin-bottom: 30px;}
    .section-article3 .col:nth-child(2){ padding: 0; margin-bottom: 0;}
}
@media screen and (max-width: 600px){
    .section-article3{ background: #f5f5f5; padding: 40px 0;}
    .section-article3 .list{ background: #ffffff; padding: 10px 15px;}
    .section-article3 .list .pic{ display: none;}
    .section-article3 .list .info{ float: none; width: 100%;}
    .section-article3 .item .info .cate{ display: none;}
    .section-article3 .item .info .title{ margin-top: 20px; text-align: center;}
}



/* Subbanner */
#subbanner{ width: 100%; height: auto; background: none;}
#subbanner img{ width: 100%;}



/* Crumbs */
#crumbs{ width: 100%; height: auto; background: #f5f5f5; padding: 20px 0; font-size: 14px; color: #666666;}
#crumbs a{ font-size: 14px; padding: 0 15px;}



/* Submain */
#submain{ width: 100%; height: auto; padding-bottom: 40px; background: #f5f5f5;}
/*#submain-content{ float: right; width: calc(100% - 260px); height: auto;}
#submain-content1{ float: right; width: calc(100% - 260px); height: auto;}*/
#submain-content{ width: 100%; height: auto; padding-top: 30px;}
#submain-content1{ width: 100%; height: auto; padding-top: 30px;}



/* Pagemenu Top */
#pagemenu-top{ width: 100%; height: auto; padding: 0; background: #f5f5f5;}
#pagemenu-top .pagemenu-title{ width: 100%; height: auto; text-align: center; margin-bottom: 10px;}
#pagemenu-top .pagemenu-title h1{ font-size: 24px; margin-bottom: 5px; font-weight: 300;}
#pagemenu-top .pagemenu-title p{ font-size: 12px;}
#pagemenu-top .pagemenu-content{ width: 100%; height: auto; text-align: center; font-size: 0px;}
#pagemenu-top .pagemenu-content ul li{ display: inline-block; position: relative; margin: 0px 5px;}
#pagemenu-top .pagemenu-content ul li a{ display: block; width: 100%; height: 30px; line-height: 30px; color: #222222; padding: 0 15px; background: #dddddd; font-size: 14px; transition: all 0.3s; -moz-transition: all 0.3s; -webkit-transition: all 0.3s; -o-transition: all 0.3s;}
#pagemenu-top .pagemenu-content ul li a:hover { padding: 0 20px; color:#ffffff; background: #00d3c4;}
#pagemenu-top .pagemenu-content ul li a.on{ background: #009680; color: #ffffff;}



/* Pagemenu Left */
#pagemenu-left{ float: left; width: 230px; height: auto; background: #ffffff; display: none;}
#pagemenu-left .pagemenu-title{ width: 100%; height: auto; background: #009680; padding: 25px;}
#pagemenu-left .pagemenu-title h1{ font-size: 30px; font-weight: bold; color: #ffffff; margin-bottom: 6px;}
#pagemenu-left .pagemenu-title p{ color: #ffffff; line-height: 1.3em; font-weight: bold;}
#pagemenu-left .pagemenu-content{ width: 100%; height: auto; padding: 20px 0 180px 0; background: #ffffff url('../image/default/leftmenu_botbg.jpg') bottom center no-repeat; background-size: contain;}
#pagemenu-left .pagemenu-content ul > li{ position: relative; width: 100%;}
#pagemenu-left .pagemenu-content ul > li a { display: block; width: 100%; height: 50px; line-height: 50px; color: #222222; padding: 0 25px; border-bottom: 1px solid #eeeeee; font-size: 16px; transition: all 0.3s; -moz-transition: all 0.3s; -webkit-transition: all 0.3s; -o-transition: all 0.3s;}
#pagemenu-left .pagemenu-content ul > li a:hover { padding: 0 20px; color:#ffffff; background: #009680;}
#pagemenu-left .pagemenu-content ul > li a i { line-height: 50px; float: right;}
#pagemenu-left .pagemenu-content ul li ul { display: none; width: 100%; height: auto; background: #ffffff; z-index: 11;}
#pagemenu-left .pagemenu-content ul li ul li{ width: 100%; height: 50px; position: relative;}
#pagemenu-left .pagemenu-content ul li ul li a{ display: block; width: 100%; height: 50px; padding: 0 45px; line-height: 50px; color: #222222; font-size: 14px;}
#pagemenu-left .pagemenu-content ul li ul li a:hover { padding: 0 0 0 40px; color:#ffffff; background: #009680;}
#pagemenu-left .pagemenu-content ul li ul li a i{ float: right;}
#pagemenu-left .pagemenu-content ul li ul li ul { display: none; position: absolute; top: -3px; left: 180px; width: 180px; height: auto; z-index: 11;}



/* Single */
.content-single{ width: 100%; height: auto; background: #ffffff; padding: 30px;}
.content-single .title{ width: 100%; height: auto; text-align: center; line-height: 1.5em; font-size: 30px; font-weight: 300; border-bottom: 1px solid #dddddd; margin-bottom: 30px; padding: 20px 0;}
.content-single .content{ width: 100%; height: auto; line-height: 2em; text-align: justify;}
.content-single .content p{ line-height: 2em; margin-bottom: 20px;}
.content-single .content img{ max-width: 100%;}




/* Cert */
.content-cert {
    width: 100%;
    height: auto;
    background: #ffffff;
    padding: 3em 1em;
}

.content-cert-box {
    width: 300px;
    min-width: 300px;
    height: auto;
    margin: 0 auto;
}

.content-cert .thumb {
    width: 100%;
    height: auto;
}

.content-cert .thumb p {
    text-align: center;
    margin-bottom: 1em;
}

.content-cert .thumb p img {
    width: 120px;
}

.content-cert .list {
    width: 100%;
    height: auto;
    line-height: 3em;
    font-size: 1em;
    border-bottom: 1px solid #dddddd;
    word-break: break-all;
}

.content-cert .list b {
    display: inline-block;
    width: 90px;
}



/* Article Index */
.content-article-index{ width: 100%; height: auto;}
.content-article-index .item{ width: 100%; height: auto; position: relative; background: #ffffff; margin-bottom: 30px; transition: all 0.3s; -moz-transition: all 0.3s; -webkit-transition: all 0.3s; -o-transition: all 0.3s;}
.content-article-index .item:hover{ box-shadow: 0 0 10px 3px rgba(16,133,228,0.2);}
.content-article-index .item .pic{ float: left; width: 250px; height: 150px; overflow: hidden; background: #222222;}
.content-article-index .item .info{ float: right; width: calc(100% - 250px); height: 150px; padding-top: 15px;}
.content-article-index .item .pic img{ width: 100%; transition: all 0.3s; -moz-transition: all 0.3s; -webkit-transition: all 0.3s; -o-transition: all 0.3s;}
.content-article-index .item .pic:hover img{ transform: scale(1.1);}
.content-article-index .item .title{ width: 100%; height: 30px; line-height: 30px; padding: 0 20px; overflow: hidden; text-align: justify; text-align-last: left;}
.content-article-index .item .des{ width: 100%; height: 50px; line-height: 25px; padding: 0 20px; overflow: hidden; text-align: justify; text-align-last: left; margin: 10px 0; font-size: 14px; color: #666666;}
.content-article-index .item .catedate{ width: 100%; height: auto; padding: 0 20px;}
.content-article-index .item .catedate a{ float: left; color: #999999; font-size: 14px;}
.content-article-index .item .catedate a:hover{ color: #009680;}
.content-article-index .item .catedate span{ float: right; color: #999999; font-size: 14px;}
.content-article-index .item .catedate span i{ padding-right: 8px;}



.content-article-index1{ width: 100%; height: auto; background: #f5f5f5; position: relative;}
.content-article-index1 .col{ width: 25%;}
.content-article-index1 .item{ width: 100%; height: auto; position: relative; background: #ffffff; margin-bottom: 30px; transition: all 0.3s; -moz-transition: all 0.3s; -webkit-transition: all 0.3s; -o-transition: all 0.3s;}
.content-article-index1 .item:hover{ box-shadow: 0 0 10px 3px rgba(16,133,228,0.2);}
.content-article-index1 .item .pic{ width: 100%; height: 0; padding-bottom: 60%; overflow: hidden; background: #222222;}
.content-article-index1 .item .pic img{ width: 100%; transition: all 0.3s; -moz-transition: all 0.3s; -webkit-transition: all 0.3s; -o-transition: all 0.3s;}
.content-article-index1 .item .pic:hover img{ transform: scale(1.1);}
.content-article-index1 .item .title{ width: 100%; height: 60px; line-height: 30px; padding: 0 20px; overflow: hidden; text-align: justify; text-align-last: left; margin: 20px 0 10px 0;}
.content-article-index1 .item .catedate{ width: 100%; height: auto; padding: 0 20px 20px 20px;}
.content-article-index1 .item .catedate a{ float: left; color: #999999; font-size: 14px;}
.content-article-index1 .item .catedate a:hover{ color: #009680;}
.content-article-index1 .item .catedate span{ float: right; color: #999999; font-size: 14px;}
.content-article-index1 .item .catedate span i{ padding-right: 8px;}



/* Article Lists */
.content-article-lists{ width: 100%; height: auto;}
.content-article-lists .item{ width: 100%; height: auto; position: relative; background: #ffffff; margin-bottom: 30px; transition: all 0.3s; -moz-transition: all 0.3s; -webkit-transition: all 0.3s; -o-transition: all 0.3s;}
.content-article-lists .item:hover{ box-shadow: 0 0 10px 3px rgba(16,133,228,0.2);}
.content-article-lists .item .pic{ float: left; width: 250px; height: 150px; overflow: hidden; background: #222222;}
.content-article-lists .item .info{ float: right; width: calc(100% - 250px); height: 150px; padding-top: 15px;}
.content-article-lists .item .pic img{ width: 100%; transition: all 0.3s; -moz-transition: all 0.3s; -webkit-transition: all 0.3s; -o-transition: all 0.3s;}
.content-article-lists .item .pic:hover img{ transform: scale(1.1);}
.content-article-lists .item .title{ width: 100%; height: 30px; line-height: 30px; padding: 0 20px; overflow: hidden; text-align: justify; text-align-last: left;}
.content-article-lists .item .des{ width: 100%; height: 50px; line-height: 25px; padding: 0 20px; overflow: hidden; text-align: justify; text-align-last: left; margin: 10px 0; font-size: 14px; color: #666666;}
.content-article-lists .item .catedate{ width: 100%; height: auto; padding: 0 20px;}
.content-article-lists .item .catedate a{ float: left; color: #999999; font-size: 14px;}
.content-article-lists .item .catedate a:hover{ color: #009680;}
.content-article-lists .item .catedate span{ float: right; color: #999999; font-size: 14px;}
.content-article-lists .item .catedate span i{ padding-right: 8px;}



.content-article-lists1{ width: 100%; height: auto; background: #f5f5f5; position: relative;}
.content-article-lists1 .col{ width: 25%;}
.content-article-lists1 .item{ width: 100%; height: auto; position: relative; background: #ffffff; margin-bottom: 30px; transition: all 0.3s; -moz-transition: all 0.3s; -webkit-transition: all 0.3s; -o-transition: all 0.3s;}
.content-article-lists1 .item:hover{ box-shadow: 0 0 10px 3px rgba(16,133,228,0.2);}
.content-article-lists1 .item .pic{ width: 100%; height: 0; padding-bottom: 60%; overflow: hidden; background: #222222;}
.content-article-lists1 .item .pic img{ width: 100%; transition: all 0.3s; -moz-transition: all 0.3s; -webkit-transition: all 0.3s; -o-transition: all 0.3s;}
.content-article-lists1 .item .pic:hover img{ transform: scale(1.1);}
.content-article-lists1 .item .title{ width: 100%; height: 60px; line-height: 30px; padding: 0 20px; overflow: hidden; text-align: justify; text-align-last: left; margin: 20px 0 10px 0;}
.content-article-lists1 .item .catedate{ width: 100%; height: auto; padding: 0 20px 20px 20px;}
.content-article-lists1 .item .catedate a{ float: left; color: #999999; font-size: 14px;}
.content-article-lists1 .item .catedate a:hover{ color: #009680;}
.content-article-lists1 .item .catedate span{ float: right; color: #999999; font-size: 14px;}
.content-article-lists1 .item .catedate span i{ padding-right: 8px;}



/* Article Show */
.content-article-show{ width: 100%; height: auto; background: #ffffff; padding: 30px;}
.content-article-show .title{ width: 100%; height: auto; text-align: center; line-height: 1.5em; font-size: 30px; font-weight: 300; border-bottom: 1px solid #dddddd; margin-bottom: 20px; padding: 20px 0;}
.content-article-show .subtitle{ width: 100%; height: 30px; margin-bottom: 30px; text-align: center; color: #999999; font-size: 14px;}
.content-article-show .content{ width: 100%; height: auto; line-height: 2em; text-align: justify;}
.content-article-show .content p{ line-height: 2em; margin-bottom: 20px;}
.content-article-show .content img{ max-width: 100%;}



/* Product Index */
.content-product-index{ width: 100%; height: auto;}
.content-product-index .col{ width: 25%;}
.content-product-index .item{ width: 100%; height: auto; position: relative; background: #ffffff; margin-bottom: 30px; transition: all 0.3s; -moz-transition: all 0.3s; -webkit-transition: all 0.3s; -o-transition: all 0.3s;}
.content-product-index .item:hover{ box-shadow: 0 0 10px 3px rgba(16,133,228,0.2);}
.content-product-index .item .pic{ width: 100%; height: 0; padding-bottom: 100%; overflow: hidden; background: #222222;}
.content-product-index .item .pic img{ width: 100%; transition: all 0.3s; -moz-transition: all 0.3s; -webkit-transition: all 0.3s; -o-transition: all 0.3s;}
.content-product-index .item .pic:hover img{ transform: scale(1.1);}
.content-product-index .item .title{ width: 100%; height: 90px; line-height: 90px; overflow: hidden; text-align: center; border-top: 1px solid #eeeeee;}



/* Product Lists */
.content-product-lists{ width: 100%; height: auto;}
.content-product-lists .col{ width: 25%;}
.content-product-lists .item{ width: 100%; height: auto; position: relative; background: #ffffff; margin-bottom: 30px; transition: all 0.3s; -moz-transition: all 0.3s; -webkit-transition: all 0.3s; -o-transition: all 0.3s;}
.content-product-lists .item:hover{ box-shadow: 0 0 10px 3px rgba(16,133,228,0.2);}
.content-product-lists .item .pic{ width: 100%; height: 0; padding-bottom: 100%; overflow: hidden; background: #222222;}
.content-product-lists .item .pic img{ width: 100%; transition: all 0.3s; -moz-transition: all 0.3s; -webkit-transition: all 0.3s; -o-transition: all 0.3s;}
.content-product-lists .item .pic:hover img{ transform: scale(1.1);}
.content-product-lists .item .title{ width: 100%; height: 90px; line-height: 90px; padding: 0 20px; overflow: hidden; text-align: center; border-top: 1px solid #eeeeee;}



/* Product Show */
.content-product-show{ width: 100%; height: auto; background: #ffffff; padding: 30px;}
.content-product-show .propic{ width: 100%; height: auto;}
.content-product-show .propic #swiper_pro{ width: 100%; height: auto; max-width: 600px;}
.content-product-show .propic #swiper_pro .swiper-slide img{ width: 100%;}
.content-product-show .propic #swiper_pro .swiper-pagination-bullet{ width: 12px; height: 12px; background: #009680;}
.content-product-show .propic #swiper_pro .swiper-pagination-bullet-active{ background: #009680;}
.content-product-show .info{ width: 100%;}
.content-product-show .info .title{ width: 100%; height: auto; text-align: center; line-height: 1.5em; font-size: 30px; font-weight: 300; border-bottom: 1px solid #dddddd; margin-bottom: 30px; padding: 20px 0;}
.content-product-show .info .tags{ width: 100%; height: 30px; margin-bottom: 30px; text-align: center; color: #999999; font-size: 14px;}
.content-product-show .content{ width: 100%; height: auto; line-height: 2em; text-align: justify;}
.content-product-show .content p{ line-height: 2em; margin-bottom: 20px;}
.content-product-show .content img{ max-width: 100%;}



/* Job */
.content-job{ width: 100%; height: auto; background: #ffffff; padding: 30px;}
.content-job table{ margin-bottom: 20px; border-color: #dddddd;}
.content-job table tr td{ padding: 10px; line-height: 2em; text-align: justify; text-align-last: left;}



/* Message */
.content-message{ width: 100%; height: auto; background: #ffffff; padding: 30px;}
.content-message .col{ width: 100%;}
.content-message .tit{ font-size: 14px; margin-bottom: 10px;}
.content-message .con{ padding-bottom: 20px;}
.content-message input[type='text']{ width: 100%; height: auto; padding: 10px; border: 1px solid #dddddd; outline: none; font-size: 15px; border-radius: 4px;}
.content-message textarea{ width: 100%; height: auto; padding: 10px; min-height: 200px; border: 1px solid #dddddd; outline: none; font-size: 15px; border-radius: 4px;}
.content-message button{ width: 100%; height: auto; padding: 10px; display: block; background: #009680; color: #ffffff; border: none; transition: all 0.3s; -moz-transition: all 0.3s; -webkit-transition: all 0.3s; -o-transition: all 0.3s; font-size: 15px; border-radius: 4px;}
.content-message button:hover{ background: #00d3c4;}



/* Contact */
.content-contact{ width: 100%; height: auto; background: #ffffff; padding: 30px;}
.content-contact .title{ width: 100%; height: auto; text-align: center; line-height: 1.5em; font-size: 30px; font-weight: 300; border-bottom: 1px solid #dddddd; margin-bottom: 30px; padding: 20px 0;}
.content-contact .content{ width: 100%; height: auto; line-height: 2em; text-align: justify;}
.content-contact .content p{ line-height: 2em; margin-bottom: 20px;}
.content-contact .content img{ max-width: 100%;}



/* Show and Hide*/
@media screen and (min-width: 1921px) {
    #topline{ display: block;}
    #header{ display: block;}
    #header-mobile{ display: none;}
    #container{ width: 1920px; margin: 0 auto;}
    .cbox{ width: 1000px;}
    #banner{ display: block;}
    #banner-mobile{ display: none;}
    #menu-mobile{ display: none;}
    #bar-mobile{ display: none;}
    .gototop{ opacity: 1.0; filter: alpha(opacity = 100);}
    #footer{ padding-bottom: 0px;}
}
@media screen and (min-width: 1241px) and (max-width: 1920px) {
    #topline{ display: block;}
    #header{ display: block;}
    #header-mobile{ display: none;}
    #container{ width: 100%;}
    .cbox{ width: 1000px;}
    #banner{ display: block;}
    #banner-mobile{ display: none;}
    #menu-mobile{ display: none;}
    #bar-mobile{ display: none;}
    .gototop{ opacity: 1.0; filter: alpha(opacity = 100);}
    #footer{ padding-bottom: 0px;}
}
@media screen and (min-width: 1025px) and (max-width: 1240px) {
    #topline{ display: block;}
    #header{ display: block;}
    #header-mobile{ display: none;}
    #container{ width: 100%;}
    .cbox{ width: 1000px;}
    #banner{ display: block;}
    #banner-mobile{ display: none;}
    #menu-mobile{ display: none;}
    #bar-mobile{ display: none;}
    .gototop{ opacity: 1.0; filter: alpha(opacity = 100);}
    #footer{ padding-bottom: 0px;}
}
@media screen and (max-width: 1024px) {
    #topline{ display: none;}
    #header{ display: none;}
    #menu{ display: none;}
    #header-mobile{ display: block;}
    #container{ width: 100%; padding-top: 50px;}
    .cbox{ width: 100%;}
    #banner{ display: none;}
    #banner-mobile{ display: block;}
    #subbanner{ display: none;}
    #menu-mobile{ display: block;}
    #pagemenu-top{ display: none;}
    #pagemenu-left{ display: none;}
    #bar-mobile{ display: block;}
    .gototop{ opacity: 0.5; filter: alpha(opacity = 50); bottom: 70px;}
    #footer{ padding-bottom: 50px;}
}



/* Responsive */
@media screen and (min-width: 801px) and (max-width: 1024px) {
    /* Pages */
    .pages{ padding-right: 5px;}
    /* Base */
    .row{ margin-left: -5px; margin-right: -5px;}
    .col{ float: left; width: 100%; height: auto; padding: 0 5px;}
    /* Botop */
    #botop{ display: none;}
    /* Bar Mobile */
    #bar-mobile .row{ margin-left: -15px; margin-right: -15px;}
    /* Submain */
    #submain-content{ padding-top: 0;}
    #submain-content1{ padding-top: 0;}
    /* Footer */
    #footer .bottom .col:nth-child(-n+3){ display: none;}
    #footer .bottom .col:nth-child(4){ width: 85%;}
    #footer .bottom .col:nth-child(5){ width: 15%;}
    #footer .copyright .col{ width: 100%; text-align: center;}
    #footer .copyright .col:nth-child(2){ text-align: center;}
    /* Single */
    .content-single{ padding: 15px;}
    .content-single .title{ font-size: 24px;}
    /* Article Index */
    .content-article-index .item{ margin-bottom: 10px;}
    .content-article-index1 .col{ width: 33.3333%;}
    .content-article-index1 .item{ margin-bottom: 10px;}
    /* Article Lists */
    .content-article-lists .item{ margin-bottom: 10px;}
    .content-article-lists1 .col{ width: 33.3333%;}
    .content-article-lists1 .item{ margin-bottom: 10px;}
    /* Article Show */
    .content-article-show{ padding: 15px;}
    .content-article-show .title{ font-size: 24px;}
    /* Product Index */
    .content-product-index .col{ width: 33.3333%;}
    .content-product-index .item{ margin-bottom: 10px;}
    .content-product-index .item .title{ height: 60px; line-height: 60px;}
    /* Product Lists */
    .content-product-lists .col{ width: 33.3333%;}
    .content-product-lists .item{ margin-bottom: 10px;}
    .content-product-lists .item .title{ height: 60px; line-height: 60px;}
    /* Product Show */
    .content-product-show{ padding: 15px;}
    .content-product-show .info .title{ font-size: 24px;}
    /* Job */
    .content-job{ padding: 15px;}
    /* Message */
    .content-message{ padding: 15px;}
    /* Contact */
    .content-contact{ padding: 15px;}
    .content-contact .title{ font-size: 24px;}
}
@media screen and (min-width: 601px) and (max-width: 800px) {
    /* Pages */
    .pages{ padding-right: 5px;}
    /* Base */
    .row{ margin-left: -5px; margin-right: -5px;}
    .col{ float: left; width: 100%; height: auto; padding: 0 5px;}
    /* Botop */
    #botop{ display: none;}
    /* Bar Mobile */
    #bar-mobile .row{ margin-left: -15px; margin-right: -15px;}
    /* Submain */
    #submain-content{ padding-top: 0;}
    #submain-content1{ padding-top: 0;}
    /* Footer */
    #footer .bottom .col:nth-child(-n+3){ display: none;}
    #footer .bottom .col:nth-child(4){ width: 80%;}
    #footer .bottom .col:nth-child(5){ width: 20%;}
    #footer .copyright .col{ width: 100%; text-align: center;}
    #footer .copyright .col:nth-child(2){ text-align: center;}
    /* Single */
    .content-single{ padding: 15px;}
    .content-single .title{ font-size: 24px;}
    /* Article Index */
    .content-article-index .item{ margin-bottom: 10px;}
    .content-article-index1 .col{ width: 33.3333%;}
    .content-article-index1 .item{ margin-bottom: 10px;}
    .content-article-index1 .item .catedate a{ display: none;}
    .content-article-index1 .item .catedate span{ float: left;}
    /* Article Lists */
    .content-article-lists .item{ margin-bottom: 10px;}
    .content-article-lists1 .col{ width: 33.3333%;}
    .content-article-lists1 .item{ margin-bottom: 10px;}
    .content-article-lists1 .item .catedate a{ display: none;}
    .content-article-lists1 .item .catedate span{ float: left;}
    /* Article Show */
    .content-article-show{ padding: 15px;}
    .content-article-show .title{ font-size: 24px;}
    /* Product Index */
    .content-product-index .col{ width: 33.3333%;}
    .content-product-index .item{ margin-bottom: 10px;}
    .content-product-index .item .title{ height: 60px; line-height: 60px;}
    /* Product Lists */
    .content-product-lists .col{ width: 33.3333%;}
    .content-product-lists .item{ margin-bottom: 10px;}
    .content-product-lists .item .title{ height: 60px; line-height: 60px;}
    /* Product Show */
    .content-product-show{ padding: 15px;}
    .content-product-show .info .title{ font-size: 24px;}
    /* Job */
    .content-job{ padding: 15px;}
    /* Message */
    .content-message{ padding: 15px;}
    /* Contact */
    .content-contact{ padding: 15px;}
    .content-contact .title{ font-size: 24px;}
}
@media screen and (max-width: 600px) {
    /* Pages */
    .pages{ padding-right: 5px;}
    /* Base */
    .row{ margin-left: -5px; margin-right: -5px;}
    .col{ float: left; width: 100%; height: auto; padding: 0 5px;}
    /* Botop */
    #botop{ display: none;}
    /* Bar Mobile */
    #bar-mobile .row{ margin-left: -15px; margin-right: -15px;}
    /* Submain */
    #submain-content{ padding-top: 0;}
    #submain-content1{ padding-top: 0;}
    /* Footer */
    #footer .bottom{ padding: 40px 0;}
    #footer .bottom .col:nth-child(-n+3){ display: none;}
    #footer .bottom .col:nth-child(4){ width: 65%;}
    #footer .bottom .col:nth-child(5){ width: 30%;}
    #footer .copyright .col{ width: 100%; text-align: center;}
    #footer .copyright .col:nth-child(2){ text-align: center;}
    /* Single */
    .content-single{ padding: 15px;}
    .content-single .title{ font-size: 24px;}
    /* Article Index */
    .content-article-index .item{ margin-bottom: 10px;}
    .content-article-index .item .pic{ display: none;}
    .content-article-index .item .info{ float: none; width: 100%;}
    .content-article-index1 .col{ width: 50%;}
    .content-article-index1 .item{ margin-bottom: 10px;}
    .content-article-index1 .item .catedate a{ display: none;}
    .content-article-index1 .item .catedate span{ float: left;}
    /* Article Lists */
    .content-article-lists .item{ margin-bottom: 10px;}
    .content-article-lists .item .pic{ display: none;}
    .content-article-lists .item .info{ float: none; width: 100%;}
    .content-article-lists1 .col{ width: 50%;}
    .content-article-lists1 .item{ margin-bottom: 10px;}
    .content-article-lists1 .item .catedate a{ display: none;}
    .content-article-lists1 .item .catedate span{ float: left;}
    /* Article Show */
    .content-article-show{ padding: 15px;}
    .content-article-show .title{ font-size: 24px;}
    /* Product Index */
    .content-product-index .col{ width: 50%;}
    .content-product-index .item{ margin-bottom: 10px;}
    .content-product-index .item .title{ height: 60px; line-height: 60px;}
    /* Product Lists */
    .content-product-lists .col{ width: 50%;}
    .content-product-lists .item{ margin-bottom: 10px;}
    .content-product-lists .item .title{ height: 60px; line-height: 60px;}
    /* Product Show */
    .content-product-show{ padding: 15px;}
    .content-product-show .info .title{ font-size: 24px;}
    /* Job */
    .content-job{ padding: 15px;}
    /* Message */
    .content-message{ padding: 15px;}
    /* Contact */
    .content-contact{ padding: 15px;}
    .content-contact .title{ font-size: 24px;}
}