@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: #cccccc; color: #222222; font-family: bodyfont,Verdana,"Microsoft YaHei",微软雅黑,"sans-serif"; font-size: 16px; 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: 16px; 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: #c20112;}
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: #c20112; 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; box-shadow: 0 0 10px 3px rgba(0,0,0,0.2); z-index: 10;}
#header .col:nth-child(1){ width: 240px;}
#header .col:nth-child(2){ width: calc(100% - 240px);}
#header #logo{ width: auto; height: 50px; padding: 15px 0;}
#header #logo img{ width: auto; height: 50px;}



/* Nav */
#nav{ float: right; width: auto; height: 80px;}
#nav ul > li{ position: relative; width: auto; float: left;}
#nav ul > li a { display: block; width: auto; height: 80px; line-height: 80px; color: #222222; padding: 0 15px; 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: #c20112;}
#nav ul > li a i { line-height: 80px; padding-left: 10px;}
#nav ul li ul { display: none; position: absolute; top: 80px; left: 0; width: 180px; height: auto; background: #ffffff; border-top: 3px solid #c20112; 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 15px; line-height: 50px; color: #222222; font-size: 14px;}
#nav ul li ul li a:hover { color:#ffffff; background: #c20112;}
#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: 60px; z-index: 10; background: #ffffff; box-shadow: 0 0 10px 3px rgba(0,0,0,0.2);}
#header-mobile{ width: 100%; height: 60px;}
#header-mobile #logo-mobile{ width: auto; height: 40px; padding: 10px; text-align: center;}
#header-mobile #logo-mobile img{ height: 40px;}



/* Botop */
#botop{ width: 100%; height: auto; padding: 50px 0; background: #c20112;}
#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; border-radius: 20px; text-align: center; line-height: 36px; color: #ffffff;}
#botop .go a:hover{ background: #ffffff; color: #c20112;}



/* Footer */
#footer{ width: 100%; height: auto; background: #222222;}
#footer .bottom{ padding: 50px 0;}
#footer .bottom .col{ width: 20%;}
#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(2) dl dd i{ display: inline-block; width: 25px; color: #aaaaaa; vertical-align: top; padding-top: 2px;}
#footer .bottom .col:nth-last-child(2) dl dd a{ display: inline-block; width: calc(100% - 25px); color: #aaaaaa; font-size: 14px; word-break: break-all;}
#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: #1085e4;}



/* Container */
#container{ width: 100%; height: auto; overflow: hidden; padding-top: 110px; 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-profile */
.section-profile{ width: 100%; height: auto; padding: 80px 0; background: #ffffff; position: relative;}
.section-profile .col:nth-child(1){ width: 300px;}
.section-profile .col:nth-child(2){ width: calc(100% - 300px);}
.section-profile .profile-pic{ position: relative; margin-top: -120px; z-index: 8;}
.section-profile .colbox{ width: 100%; height: 240px; overflow: hidden;}
.section-profile .colbox .coltit{ width: 100%; height: 40px; overflow: hidden; margin-bottom: 20px;}
.section-profile .colbox .coltit .tit{ float: left; height: 40px; line-height: 40px;}
.section-profile .colbox .coltit .tit a{ font-size: 30px; font-weight: 300;}
.section-profile .colbox .coltit .subtit{ float: left; margin-left: 20px; height: 20px; line-height: 20px; margin-top: 20px;}
.section-profile .colbox .colcon { line-height: 30px; text-align: justify; text-indent: 2em;}
@media screen and (max-width: 1024px){
    .section-profile{ padding: 40px 0;}
    .section-profile .col:nth-child(1){ display: none;}
    .section-profile .col:nth-child(2){ width: 100%;}
    .section-profile .colbox{ height: auto;}
    .section-profile .colbox .coltit{ height: auto;}
    .section-profile .colbox .coltit .tit{ float: none; text-align: center;}
    .section-profile .colbox .coltit .tit a{ font-size: 24px;}
    .section-profile .colbox .coltit .subtit{ float: none; text-align: center; margin-left: 0; font-size: 14px; margin-top: 10px;}
}



.section-profile1{ width: 100%; height: auto; background: #f5f5f5 url(../image/default/profile_bg.jpg) center no-repeat; background-size: cover; position: relative;}
.section-profile1 .col{ width: 50%;}
.section-profile1 .col:nth-child(2){ float: right; background: rgba(0,0,0,0.8);}
.section-profile1 .item{ width: 100%; height: auto; position: relative; padding: 80px 0;}
.section-profile1 .item .title{ width: 100%; height: auto; text-align: center; font-size: 30px; color: #ffffff; font-family: titfont;}
.section-profile1 .item .title span{ color: #ff9900;}
.section-profile1 .item .line{ width: 60px; height: 2px; margin: 20px auto; background: #ff9900; transition: all 0.3s; -moz-transition: all 0.3s; -webkit-transition: all 0.3s; -o-transition: all 0.3s;}
.section-profile1 .item:hover .line{ width: 100px;}
.section-profile1 .item .des{ width: 70%; height: auto; margin: 0 auto; text-align: justify; line-height: 2em; color: #ffffff; margin-bottom: 50px; text-indent: 2em;}
.section-profile1 .item .more{ width: 100%; height: auto;}
.section-profile1 .item .more a{ display: block; width: 150px; height: 40px; line-height: 36px; text-align: center; color: #ff9900; border: 2px solid #ff9900; border-radius: 20px; margin: 0 auto;}
.section-profile1 .item .more a i{ padding-left: 10px;}
.section-profile1 .item .more a:hover{ background: #ff9900; color: #222222;}
@media screen and (max-width: 1024px){
    .section-profile1 .col{ width: 100%;}
    .section-profile1 .col:nth-child(2){ float: none;}
    .section-profile1 .item{ padding: 40px 15px;}
    .section-profile1 .item .title{ font-size: 24px;}
    .section-profile1 .item .des{ width: 100%; margin-bottom: 30px;}
}



.section-profile2{ width: 100%; height: auto; padding: 80px 0; background: #ffffff; position: relative;}
.section-profile2 .col{ width: 50%;}
.section-profile2 .pic{ width: 100%; height: auto;}
.section-profile2 .pic img{ width: 100%;}
.section-profile2 .info{ width: 100%; height: auto; padding: 60px 0 0 30px;}
.section-profile2 .info .title{ width: 100%; height: auto; font-size: 30px; margin-bottom: 10px; font-weight: 300;}
.section-profile2 .info .subtit{ width: 100%; height: auto;}
.section-profile2 .info .line{ width: 60px; height: 2px; background: rgba(0,0,0,0.6); margin: 20px 0; transition: all 0.3s; -moz-transition: all 0.3s; -webkit-transition: all 0.3s; -o-transition: all 0.3s;}
.section-profile2 .info:hover .line{ width: 100px;}
.section-profile2 .info .des{ width: 100%; height: auto; line-height: 2em; text-align: justify; margin-bottom: 50px; text-indent: 2em;}
.section-profile2 .info .more{ width: 100%; height: auto;}
.section-profile2 .info .more a{ display: block; width: 150px; height: 40px; text-align: center; line-height: 40px; background: #1085e4; color: #ffffff; border-radius: 4px;}
.section-profile2 .info .more a i{ padding-left: 10px;}
.section-profile2 .info .more a:hover{ background: #192b59;}
@media screen and (min-width: 801px) and (max-width: 1024px){
    .section-profile2{ padding: 40px 0;}
    .section-profile2 .info{ padding: 0 0 0 20px;}
    .section-profile2 .info .des{ margin-bottom: 30px;}
}
@media screen and (max-width: 800px){
    .section-profile2{ padding: 40px 0;}
    .section-profile2 .col{ width: 100%;}
    .section-profile2 .pic{ margin-bottom: 20px;}
    .section-profile2 .info{ padding: 0;}
    .section-profile2 .info .title{ text-align: center;}
    .section-profile2 .info .subtit{ text-align: center;}
    .section-profile2 .info .line{ margin: 20px auto;}
    .section-profile2 .info .des{ margin-bottom: 20px;}
    .section-profile2 .info .more a{ margin: 0 auto;}
}



/* Section-video */
.section-video{ width: 100%; height: auto; padding: 80px 0; background: #f5f5f5; position: relative;}
.section-video .section-title{ width: 100%; height: auto; margin-bottom: 50px;}
.section-video .section-title .tit{ width: 100%; height: auto; text-align: center; margin-bottom: 20px;}
.section-video .section-title .tit a{ font-size: 30px; font-weight: 300;}
.section-video .section-title .subtit{ width: 100%; height: auto; text-align: center;}
.section-video .col{ width: 33.3333%;}
.section-video .item{ width: 100%; height: auto; position: relative; margin-bottom: 30px;}
.section-video .item .pic{ width: 100%; background: #000000; margin-bottom: 15px;}
.section-video .item .pic video{ object-fit:fill; width:100%; height:100%; outline: none;}
.section-video .item .title{ width: 100%; height: 30px; line-height: 30px; overflow: hidden; text-align: center;}
@media screen and (min-width: 601px) and (max-width: 1024px){
    .section-video .section-title{ margin-bottom: 20px;}
    .section-video .section-title .tit{ margin-bottom: 10px;}
    .section-video .section-title .tit a{ font-size: 24px;}
    .section-video .section-title .subtit{ font-size: 14px;}
    .section-video{ padding: 40px 0; background: #ffffff;}
    .section-video .col{ width: 50%;}
    .section-video .item{ margin-bottom: 15px;}
}
@media screen and (max-width: 600px){
    .section-video .section-title{ margin-bottom: 20px;}
    .section-video .section-title .tit{ margin-bottom: 10px;}
    .section-video .section-title .tit a{ font-size: 24px;}
    .section-video .section-title .subtit{ font-size: 14px;}
    .section-video{ padding: 40px 0; background: #ffffff;}
    .section-video .col{ width: 100%;}
    .section-video .item{ margin-bottom: 15px;}
}



/* Section-article */
.section-article{ width: 100%; height: auto; padding: 0 0 80px 0; background: #ffffff; position: relative;}
.section-article .section-title{ width: 100%; height: auto; margin-bottom: 50px;}
.section-article .section-title .tit{ width: 100%; height: auto; text-align: center; margin-bottom: 20px;}
.section-article .section-title .tit a{ font-size: 30px; font-weight: 300;}
.section-article .section-title .subtit{ width: 100%; height: auto; text-align: center;}
.section-article .col{ width: 50%;}
.section-article .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;}
.section-article .item:hover{ box-shadow: 0 0 10px 3px rgba(16,133,228,0.2);}
.section-article .item .pic{ float: left; width: 250px; height: 150px; overflow: hidden; background: #222222;}
.section-article .item .info{ float: right; width: calc(100% - 250px); height: 150px; padding-top: 15px;}
.section-article .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-article .item .pic:hover img{ transform: scale(1.1);}
.section-article .item .title{ width: 100%; height: 30px; line-height: 30px; padding: 0 20px; overflow: hidden; text-align: justify; text-align-last: left;}
.section-article .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;}
.section-article .item .catedate{ width: 100%; height: auto; padding: 0 20px;}
.section-article .item .catedate a{ float: left; color: #999999; font-size: 14px;}
.section-article .item .catedate a:hover{ color: #c20112;}
.section-article .item .catedate span{ float: right; color: #999999; font-size: 14px;}
.section-article .item .catedate span i{ padding-right: 8px;}
@media screen and (min-width: 601px) and (max-width: 1024px){
    .section-article .section-title{ margin-bottom: 20px;}
    .section-article .section-title .tit{ margin-bottom: 10px;}
    .section-article .section-title .tit a{ font-size: 24px;}
    .section-article .section-title .subtit{ font-size: 14px;}
    .section-article{ padding: 40px 0; background: #f5f5f5;}
    .section-article .col{ width: 100%;}
    .section-article .item{ margin-bottom: 10px;}
}
@media screen and (max-width: 600px){
    .section-article .section-title{ margin-bottom: 20px;}
    .section-article .section-title .tit{ margin-bottom: 10px;}
    .section-article .section-title .tit a{ font-size: 24px;}
    .section-article .section-title .subtit{ font-size: 14px;}
    .section-article{ padding: 40px 0; background: #f5f5f5;}
    .section-article .col{ width: 100%;}
    .section-article .item{ margin-bottom: 10px;}
    .section-article .item .pic{ display: none;}
    .section-article .item .info{ float: none; width: 100%;}
}



.section-article1{ width: 100%; height: auto; padding: 80px 0; background: #eeeeee; position: relative;}
.section-article1 .section-title{ width: 100%; height: auto; margin-bottom: 50px;}
.section-article1 .section-title .tit{ width: 100%; height: auto; text-align: center; margin-bottom: 20px;}
.section-article1 .section-title .tit a{ font-size: 30px; font-weight: 300;}
.section-article1 .section-title .subtit{ width: 100%; height: auto; text-align: center;}
.section-article1 .col{ width: 25%;}
.section-article1 .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;}
.section-article1 .item:hover{ box-shadow: 0 0 10px 3px rgba(16,133,228,0.2);}
.section-article1 .item .pic{ width: 100%; height: 0; padding-bottom: 60%; overflow: hidden; background: #222222;}
.section-article1 .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-article1 .item .pic:hover img{ transform: scale(1.1);}
.section-article1 .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;}
.section-article1 .item .catedate{ width: 100%; height: auto; padding: 0 20px 20px 20px;}
.section-article1 .item .catedate a{ float: left; color: #999999; font-size: 14px;}
.section-article1 .item .catedate a:hover{ color: #c20112;}
.section-article1 .item .catedate span{ float: right; color: #999999; font-size: 14px;}
.section-article1 .item .catedate span i{ padding-right: 8px;}
@media screen and (min-width: 801px) and (max-width: 1024px) {
    .section-article1 .section-title{ margin-bottom: 20px;}
    .section-article1 .section-title .tit{ margin-bottom: 10px;}
    .section-article1 .section-title .tit a{ font-size: 24px;}
    .section-article1 .section-title .subtit{ font-size: 14px;}
    .section-article1{ padding: 40px 0;}
    .section-article1 .col{ width: 33.3333%;}
    .section-article1 .item{ margin-bottom: 10px;}
}
@media screen and (min-width: 601px) and (max-width: 800px) {
    .section-article1 .section-title{ margin-bottom: 20px;}
    .section-article1 .section-title .tit{ margin-bottom: 10px;}
    .section-article1 .section-title .tit a{ font-size: 24px;}
    .section-article1 .section-title .subtit{ font-size: 14px;}
    .section-article1{ padding: 40px 0;}
    .section-article1 .col{ width: 33.3333%;}
    .section-article1 .item{ margin-bottom: 10px;}
    .section-article1 .item .catedate a{ display: none;}
    .section-article1 .item .catedate span{ float: left;}
}
@media screen and (max-width: 600px) {
    .section-article1 .section-title{ margin-bottom: 20px;}
    .section-article1 .section-title .tit{ margin-bottom: 10px;}
    .section-article1 .section-title .tit a{ font-size: 24px;}
    .section-article1 .section-title .subtit{ font-size: 14px;}
    .section-article1{ padding: 40px 0;}
    .section-article1 .col{ width: 50%;}
    .section-article1 .item{ margin-bottom: 10px;}
    .section-article1 .item .catedate a{ display: none;}
    .section-article1 .item .catedate span{ float: left;}
}



.section-article2{ width: 100%; height: auto; padding: 80px 0; background: #f5f5f5; position: relative;}
.section-article2 .section-title{ width: 100%; height: auto; margin-bottom: 50px;}
.section-article2 .section-title .tit{ width: 100%; height: auto; text-align: center; margin-bottom: 20px;}
.section-article2 .section-title .tit a{ font-size: 30px; font-weight: 300;}
.section-article2 .section-title .subtit{ width: 100%; height: auto; text-align: center;}
.section-article2 .col{ width: 25%;}
.section-article2 .item{ width: 100%; height: auto; position: relative; background: #ffffff; transition: all 0.3s; -moz-transition: all 0.3s; -webkit-transition: all 0.3s; -o-transition: all 0.3s;}
.section-article2 .item:hover{ box-shadow: 0 0 10px 3px rgba(16,133,228,0.2);}
.section-article2 .item .pic{ width: 100%; height: 0; padding-bottom: 60%; overflow: hidden; background: #222222;}
.section-article2 .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-article2 .item .pic:hover img{ transform: scale(1.1);}
.section-article2 .item .cate{ width: 100%; height: auto; color: #999999; padding:30px 20px 20px 20px; font-size: 14px;}
.section-article2 .item .cate i{ padding-right: 8px;}
.section-article2 .item .title{ width: 100%; height: 90px; line-height: 30px; padding: 0 20px; overflow: hidden; text-align: justify;}
.section-article2 .item .date{ width: 100%; height: auto; padding: 20px; font-size: 14px; color: #999999; border-top: 1px solid #eeeeee; margin-top: 30px;}
.section-article2 .item .date i{ padding-right: 8px;}
.section-article2 .item .on{ color: #1085e4;}
.section-article2 .more{ width: 100%; height: auto; margin-top: 50px;}
.section-article2 .more a{ display: block; width: 150px; height: 40px; margin: 0 auto; border-radius: 4px; text-align: center; line-height: 40px; background: #1085e4; color: #ffffff;}
.section-article2 .more a:hover{ background: #192b59;}
.section-article2 .more a i{ padding-right: 10px;}
@media screen and (min-width: 801px) and (max-width: 1024px){
    .section-article2{ padding: 40px 0;}
    .section-article2 .section-title{ margin-bottom: 20px;}
    .section-article2 .section-title .tit{ margin-bottom: 10px;}
    .section-article2 .section-title .tit a{ font-size: 24px;}
    .section-article2 .section-title .subtit{ font-size: 14px;}
    .section-article2 .more{ margin-top: 30px;}
}
@media screen and (max-width: 800px){
    .section-article2{ padding: 40px 0;}
    .section-article2 .section-title{ margin-bottom: 20px;}
    .section-article2 .section-title .tit{ margin-bottom: 10px;}
    .section-article2 .section-title .tit a{ font-size: 24px;}
    .section-article2 .section-title .subtit{ font-size: 14px;}
    .section-article2 .col{ width: 50%;}
    .section-article2 .item{ margin-bottom: 10px;}
    .section-article2 .more{ margin-top: 20px;}
}



/* Section-product */
.section-product{ width: 100%; height: auto; padding: 80px 0; background: #cccccc; position: relative;}
.section-product .section-title{ width: 100%; height: auto; margin-bottom: 50px;}
.section-product .section-title .tit{ width: 100%; height: auto; text-align: center; margin-bottom: 20px;}
.section-product .section-title .tit a{ font-size: 30px; font-weight: 300;}
.section-product .section-title .subtit{ width: 100%; height: auto; text-align: center;}
.section-product .col{ width: 25%;}
.section-product .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;}
.section-product .item:hover{ box-shadow: 0 0 10px 3px rgba(16,133,228,0.2);}
.section-product .item .pic{ width: 100%; height: 0; padding-bottom: 100%; overflow: hidden; background: #222222;}
.section-product .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-product .item .pic:hover img{ transform: scale(1.1);}
.section-product .item .title{ width: 100%; height: 90px; line-height: 90px; overflow: hidden; text-align: center; border-top: 1px solid #eeeeee;}
@media screen and (min-width: 601px) and (max-width: 1024px) {
    .section-product .section-title{ margin-bottom: 20px;}
    .section-product .section-title .tit{ margin-bottom: 10px;}
    .section-product .section-title .tit a{ font-size: 24px;}
    .section-product .section-title .subtit{ font-size: 14px;}
    .section-product{ padding: 40px 0;}
    .section-product .col{ width: 33.3333%;}
    .section-product .item{ margin-bottom: 10px;}
    .section-product .item .title{ height: 60px; line-height: 60px;}
}
@media screen and (max-width: 600px) {
    .section-product .section-title{ margin-bottom: 20px;}
    .section-product .section-title .tit{ margin-bottom: 10px;}
    .section-product .section-title .tit a{ font-size: 24px;}
    .section-product .section-title .subtit{ font-size: 14px;}
    .section-product{ padding: 40px 0;}
    .section-product .col{ width: 50%;}
    .section-product .item{ margin-bottom: 10px;}
    .section-product .item .title{ height: 60px; line-height: 60px;}
}



.section-product1{ width: 100%; height: auto; padding: 80px 0; background: #f5f5f5; position: relative;}
.section-product1 .section-title{ width: 100%; height: auto; margin-bottom: 50px;}
.section-product1 .section-title .tit{ width: 100%; height: auto; text-align: center; margin-bottom: 20px;}
.section-product1 .section-title .tit a{ font-size: 30px; font-weight: 300;}
.section-product1 .section-title .subtit{ width: 100%; height: auto; text-align: center;}
.section-product1 .col{ width: 33.33%;}
.section-product1 .item{ width: 100%; height: auto; position: relative; margin-bottom: 30px;}
.section-product1 .item .pic{ width: 100%; height: 0; padding-bottom: 60%; overflow: hidden; background: #222222;}
.section-product1 .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-product1 .item:hover .pic img{ transform: scale(1.1);}
.section-product1 .item .info{ position: absolute; width: 100%; height: 0; padding-bottom: 60%; left: 0; 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-product1 .item:hover .info{ opacity: 0.8; filter: alpha(opacity=80);}
.section-product1 .item .info .cate{ width: 100%; height: auto; margin-top: 20px; padding-right: 20px; font-size: 14px; color: #999999; text-align: right;}
.section-product1 .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;}
.section-product1 .more{ width: 100%; height: auto; margin-top: 20px;}
.section-product1 .more a{ display: block; width: 150px; height: 40px; margin: 0 auto; border-radius: 4px; text-align: center; line-height: 40px; background: #1085e4; color: #ffffff;}
.section-product1 .more a:hover{ background: #192b59;}
.section-product1 .more a i{ padding-right: 10px;}
@media screen and (min-width: 801px) and (max-width: 1024px){
    .section-product1{ padding: 40px 0;}
    .section-product1 .section-title{ margin-bottom: 20px;}
    .section-product1 .section-title .tit{ margin-bottom: 10px;}
    .section-product1 .section-title .tit a{ font-size: 24px;}
    .section-product1 .section-title .subtit{ font-size: 14px;}
    .section-product1 .item{ margin-bottom: 10px;}
}
@media screen and (max-width: 800px){
    .section-product1{ padding: 40px 0;}
    .section-product1 .section-title{ margin-bottom: 20px;}
    .section-product1 .section-title .tit{ margin-bottom: 10px;}
    .section-product1 .section-title .tit a{ font-size: 24px;}
    .section-product1 .section-title .subtit{ font-size: 14px;}
    .section-product1 .col{ width: 50%;}
    .section-product1 .item{ margin-bottom: 10px;}
}
@media screen and (max-width: 600px){
    .section-product1 .item .info .cate{ display: none;}
    .section-product1 .item .info .title{ margin-top: 20px; text-align: center;}
}



.section-product2{ width: 100%; height: auto; padding: 80px 0; background: #f5f5f5; position: relative;}
.section-product2 .section-title{ width: 100%; height: auto; margin-bottom: 50px;}
.section-product2 .section-title .tit{ width: 100%; height: auto; text-align: center; margin-bottom: 20px;}
.section-product2 .section-title .tit a{ font-size: 30px; font-weight: 300;}
.section-product2 .section-title .subtit{ width: 100%; height: auto; text-align: center;}
.section-product2 .row{ margin-left: -1px; margin-right: -1px;}
.section-product2 .col{ width: 33.33%; padding: 0 1px;}
.section-product2 .item{ width: 100%; height: auto; position: relative; margin-bottom: 2px;}
.section-product2 .item .pic{ width: 100%; height: 0; padding-bottom: 60%; overflow: hidden; background: #222222;}
.section-product2 .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-product2 .item:hover .pic img{ transform: scale(1.1);}
.section-product2 .item .info{ position: absolute; width: 100%; height: 0; padding-bottom: 60%; left: 0; 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-product2 .item:hover .info{ opacity: 0.8; filter: alpha(opacity=80);}
.section-product2 .item .info .cate{ width: 100%; height: auto; margin-top: 20px; padding-right: 20px; font-size: 14px; color: #999999; text-align: right;}
.section-product2 .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;}
.section-product2 .more{ width: 100%; height: auto; margin-top: 48px;}
.section-product2 .more a{ display: block; width: 150px; height: 40px; margin: 0 auto; border-radius: 4px; text-align: center; line-height: 40px; background: #649218; color: #ffffff;}
.section-product2 .more a:hover{ background: #c20112;}
.section-product2 .more a i{ padding-right: 10px;}
@media screen and (min-width: 801px) and (max-width: 1024px){
    .section-product2{ padding: 40px 0;}
    .section-product2 .section-title{ margin-bottom: 20px;}
    .section-product2 .section-title .tit{ margin-bottom: 10px;}
    .section-product2 .section-title .tit a{ font-size: 24px;}
    .section-product2 .section-title .subtit{ font-size: 14px;}
    .section-product2 .item{ margin-bottom: 2px;}
    .section-product2 .more{ margin-top: 28px;}
}
@media screen and (max-width: 800px){
    .section-product2{ padding: 40px 0;}
    .section-product2 .section-title{ margin-bottom: 20px;}
    .section-product2 .section-title .tit{ margin-bottom: 10px;}
    .section-product2 .section-title .tit a{ font-size: 24px;}
    .section-product2 .section-title .subtit{ font-size: 14px;}
    .section-product2 .col{ width: 50%;}
    .section-product2 .item{ margin-bottom: 2px;}
    .section-product2 .more{ margin-top: 28px;}
}
@media screen and (max-width: 600px){
    .section-product2 .item .info .cate{ display: none;}
    .section-product2 .item .info .title{ margin-top: 20px; text-align: center;}
}



/* Section-list */
.section-list{ width: 100%; height: auto; padding: 80px 0; background: #ffffff; position: relative;}
.section-list .section-title{ width: 100%; height: auto; margin-bottom: 50px;}
.section-list .section-title .tit{ width: 100%; height: auto; text-align: center; margin-bottom: 20px;}
.section-list .section-title .tit a{ font-size: 30px; font-weight: 300;}
.section-list .section-title .subtit{ width: 100%; height: auto; text-align: center;}
.section-list .col{ width: 25%;}
.section-list .item{ width: 100%; height: auto; position: relative; margin-bottom: 30px;}
.section-list .item .pic{ width: 80px; height: 80px; margin: 0 auto; overflow: hidden; transition: all 0.3s; -moz-transition: all 0.3s; -webkit-transition: all 0.3s; -o-transition: all 0.3s;}
.section-list .item .pic a{ display: block; width: 80px; height: 80px; background: #1085e4; border: 2px solid #1085e4; text-align: center; color: #ffffff; border-radius: 15px;}
.section-list .item .pic a i{ font-size: 40px; line-height: 76px;}
.section-list .item .title{ width: 100%; height: auto; text-align: center; margin-top: 30px;}
.section-list .item .title a{ font-size: 18px;}
.section-list .item .line{ width: 60px; height: 2px; background: #1085e4; margin: 20px auto; transition: all 0.3s; -moz-transition: all 0.3s; -webkit-transition: all 0.3s; -o-transition: all 0.3s;}
.section-list .item .des{ height: 60px; line-height: 30px; text-align: justify; text-align-last: center; overflow: hidden; color: #666666;}
.section-list .item:hover .pic a{ background: #ffffff; color: #1085e4;}
.section-list .item:hover .line{ width: 100px;}
.section-list .more{ width: 100%; height: auto; margin-top: 20px;}
.section-list .more a{ display: block; width: 150px; height: 40px; margin: 0 auto; border-radius: 4px; text-align: center; line-height: 40px; background: #1085e4; color: #ffffff;}
.section-list .more a:hover{ background: #192b59;}
.section-list .more a i{ padding-right: 10px;}
@media screen and (min-width: 801px) and (max-width: 1024px){
    .section-list{ padding: 40px 0;}
    .section-list .section-title{ margin-bottom: 30px;}
    .section-list .section-title .tit{ margin-bottom: 10px;}
    .section-list .section-title .tit a{ font-size: 24px;}
    .section-list .section-title .subtit{ font-size: 14px;}
    .section-list .col{ width: 33.3333%;}
    .section-list .item{ margin-bottom: 20px;}
    .section-list .item .title{ margin-top: 20px;}
    .section-list .item .line{ margin: 15px auto;}
    .section-list .item .des{ padding: 0 10px;}
    .section-list .more{ margin-top: 10px;}
}
@media screen and (max-width: 800px){
    .section-list{ padding: 40px 0;}
    .section-list .section-title{ margin-bottom: 20px;}
    .section-list .section-title .tit{ margin-bottom: 10px;}
    .section-list .section-title .tit a{ font-size: 24px;}
    .section-list .section-title .subtit{ font-size: 14px;}
    .section-list .col{ width: 50%;}
    .section-list .item{ margin-bottom: 20px;}
    .section-list .item .pic{ width: 60px; height: 60px;}
    .section-list .item .pic a{ width: 60px; height: 60px; border-radius: 10px;}
    .section-list .item .pic a i{ font-size: 30px; line-height: 56px;}
    .section-list .item .title{ margin-top: 20px;}
    .section-list .item .line{ margin: 15px auto;}
    .section-list .item .des{ padding: 0 10px;}
    .section-list .more{ margin-top: 10px;}
}



.section-list1{ width: 100%; height: auto; background: #222222; position: relative;}
.section-list1 .row{ margin-left: 0; margin-right: 0;}
.section-list1 .col{ width: 33.33%; padding: 0;}
.section-list1 .item{ width: 100%; height: auto; position: relative; padding: 50px 30px;}
.section-list1 .col:nth-child(1) .item{ background: #0068b7;}
.section-list1 .col:nth-child(2) .item{ background: #1085e4;}
.section-list1 .col:nth-child(3) .item{ background: #0068b7;}
.section-list1 .item .title{ width: 100%; height: 30px; line-height: 30px;}
.section-list1 .item .title a{ color: #ffffff; font-size: 24px; font-weight: 300;}
.section-list1 .item .line{ width: 60px; height: 2px; background: rgba(255,255,255,0.6); margin: 20px 0; transition: all 0.3s; -moz-transition: all 0.3s; -webkit-transition: all 0.3s; -o-transition: all 0.3s;}
.section-list1 .item:hover .line{ width: 150px;}
.section-list1 .item .des{ width: 100%; height: 90px; line-height: 30px; color: #ffffff; margin-bottom: 30px; overflow: hidden; text-align: justify;}
.section-list1 .item .btn{ width: 100%; height: auto;}
.section-list1 .item .btn a{ display: block; width: 150px; height: 40px; border: 2px solid #ffffff; line-height: 36px; text-align: center; color: #ffffff; border-radius: 20px;}
.section-list1 .item .btn a i{ padding-left: 10px;}
.section-list1 .item .btn a:hover{ background: #ffffff; color: #222222;}
@media screen and (min-width: 601px) and (max-width: 800px) {
    .section-list1 .col{ width: 100%;}
    .section-list1 .item .des{ height: auto;}
}
@media screen and (max-width: 600px) {
    .section-list1 .col{ width: 100%;}
    .section-list1 .item{ padding: 40px 20px;}
    .section-list1 .item .des{ height: auto; margin-bottom: 20px;}
}



.section-list2{ width: 100%; height: auto; padding: 80px 0 50px 0; background: #333333; position: relative;}
.section-list2 .section-title{ width: 100%; height: auto; margin-bottom: 30px;}
.section-list2 .section-title .tit{ width: 100%; height: auto; text-align: center; margin-bottom: 30px;}
.section-list2 .section-title .tit a{ font-size: 30px; font-weight: 300; color: #ffffff;}
.section-list2 .section-title .line{ width: 60px; height: 2px; background: rgba(255,255,255,0.6); margin: 0 auto; transition: all 0.3s; -moz-transition: all 0.3s; -webkit-transition: all 0.3s; -o-transition: all 0.3s;}
.section-list2 .section-title:hover .line{ width: 100px;}
.section-list2 .col{ width: 50%;}
.section-list2 .col:nth-child(3){ clear: left;}
.section-list2 .item{ width: 100%; margin-bottom: 30px;}
.section-list2 .item .pic{ float: left; width: 60px; height: auto;}
.section-list2 .item .pic i{ font-size: 40px; color: #ffffff;}
.section-list2 .item .info{ float: right; width: calc(100% - 60px); height: auto;}
.section-list2 .item .info .title{ width: 100%; height: auto; margin-bottom: 20px;}
.section-list2 .item .info .title a{ color: #ffffff; font-size: 24px; font-weight: 300;}
.section-list2 .item .info .des{ width: 100%; height: auto; line-height: 30px; color: #999999; text-align: justify;
    overflow: hidden;}
@media screen and (min-width: 801px) and (max-width: 1024px){
    .section-list2{ padding: 40px 20px 10px 20px;}
    .section-list2 .section-title .tit a{ font-size: 24px;}
    .section-list2 .row{ margin-left: -15px; margin-right: -15px;}
    .section-list2 .col{ width: 50%; padding: 0 15px;}
    .section-list2 .item .info .title a{ font-size: 20px;}
}
@media screen and (max-width: 800px){
    .section-list2{ padding: 40px 20px 10px 20px;}
    .section-list2 .section-title .tit a{ font-size: 24px;}
    .section-list2 .col{ width: 100%;}
    .section-list2 .item .info .title a{ font-size: 20px;}
}



.section-list3{ width: 100%; height: auto; padding: 0; background: #333333 url(../image/default/section-list3_bg.jpg) center no-repeat; background-size: cover; position: relative;}
.section-list3 .row{ margin-left: 0; margin-right: 0;}
.section-list3 .col{ width: 50%; padding: 0;}
.section-list3 .col:nth-child(1){ background: rgba(0,0,0,0.8); padding: 80px 50px 50px 50px;}
.section-list3 .col .row{ margin-left: -15px; margin-right: -15px;}
.section-list3 .col .col{ width: 50%; padding: 0 15px;}
.section-list3 .col .col:nth-child(1){ background: none;}
.section-list3 .col .col:nth-child(3){ clear: left;}
.section-list3 .section-title{ width: 100%; height: auto; margin-bottom: 30px;}
.section-list3 .section-title .tit{ width: 100%; height: auto; text-align: center; margin-bottom: 30px;}
.section-list3 .section-title .tit a{ font-size: 30px; font-weight: 300; color: #ffffff;}
.section-list3 .section-title .line{ width: 60px; height: 2px; background: rgba(255,255,255,0.6); margin: 0 auto; transition: all 0.3s; -moz-transition: all 0.3s; -webkit-transition: all 0.3s; -o-transition: all 0.3s;}
.section-list3 .section-title:hover .line{ width: 100px;}
.section-list3 .item{ width: 100%; margin-bottom: 30px;}
.section-list3 .item .pic{ float: left; width: 60px; height: auto;}
.section-list3 .item .pic i{ font-size: 40px; color: #ffffff;}
.section-list3 .item .info{ float: right; width: calc(100% - 60px); height: auto;}
.section-list3 .item .info .title{ width: 100%; height: auto; margin-bottom: 20px;}
.section-list3 .item .info .title a{ color: #ffffff; font-size: 24px; font-weight: 300;}
.section-list3 .item .info .des{ width: 100%; height: auto; line-height: 30px; color: #999999; text-align: justify;
    overflow: hidden;}
@media screen and (min-width: 1025px) and (max-width: 1240px) {
    .section-list3 .col{ width: 100%;}
}
@media screen and (min-width: 801px) and (max-width: 1024px) {
    .section-list3 .col{ width: 100%;}
    .section-list3 .col:nth-child(1){ padding: 40px 30px 10px 30px;}
    .section-list3 .col .col{ width: 50%; padding: 0 15px;}
    .section-list3 .section-title .tit a{ font-size: 24px;}
    .section-list3 .item .info .title a{ font-size: 20px;}
}
@media screen and (max-width: 800px){
    .section-list3 .col{ width: 100%;}
    .section-list3 .col:nth-child(1){ padding: 40px 30px 10px 30px;}
    .section-list3 .col .col{ width: 100%; padding: 0 15px;}
    .section-list3 .section-title .tit a{ font-size: 24px;}
    .section-list3 .item .info .title a{ font-size: 20px;}
}



.section-list4{ width: 100%; height: auto; background: #222222;}
.section-list4 .row{ margin-left: 0; margin-right: 0;}
.section-list4 .col{ width: 25%; padding: 0;}
.section-list4 .col:nth-child(1){ background: #222222 url(../image/default/section-list3_bg.jpg) center no-repeat; background-size: cover;}
.section-list4 .col:nth-child(2){ background: #222222 url(../image/default/section-list3_bg.jpg) center no-repeat; background-size: cover;}
.section-list4 .col:nth-child(3){ background: #222222 url(../image/default/section-list3_bg.jpg) center no-repeat; background-size: cover;}
.section-list4 .col:nth-child(4){ background: #222222 url(../image/default/section-list3_bg.jpg) center no-repeat; background-size: cover;}
.section-list4 .item{ width: 100%; height: auto; padding: 80px 0; position: relative; background: rgba(0,0,0,0.8); transition: all 0.3s; -moz-transition: all 0.3s; -webkit-transition: all 0.3s; -o-transition: all 0.3s;}
.section-list4 .item .pic{ width: 80px; height: 80px; margin: 0 auto;}
.section-list4 .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-list4 .item .title{ width: 100%; height: 30px; line-height: 30px; overflow: hidden; text-align: center; margin: 30px 0 0 0;}
.section-list4 .item .title a{ color: #ffffff; font-size: 24px; font-weight: 300;}
.section-list4 .item .line{ width: 60px; height: 2px; margin: 20px auto; background: rgba(255,255,255,0.6); transition: all 0.3s; -moz-transition: all 0.3s; -webkit-transition: all 0.3s; -o-transition: all 0.3s;}
.section-list4 .item .des{ width: 100%; height: 90px; line-height: 30px; padding: 0 50px; overflow: hidden; text-align: justify; text-align-last: center; color: #999999;}
.section-list4 .item:hover{ background: rgba(16,133,228,0.8);}
.section-list4 .item:hover .pic img{ transform: scale(1.1);}
.section-list4 .item:hover .des{ color: #ffffff;}
.section-list4 .item:hover .line{ width: 100px;}
@media screen and (min-width: 801px) and (max-width: 1024px) {
    .section-list4 .col{ width: 50%;}
    .section-list4 .item{ padding: 40px 0;}
    .section-list4 .item .des{ padding: 0 30px;}
}
@media screen and (min-width: 601px) and (max-width: 800px){
    .section-list4 .col{ width: 50%;}
    .section-list4 .item{ padding: 40px 0;}
    .section-list4 .item .pic{ width: 60px; height: 60px;}
    .section-list4 .item .des{ padding: 0 30px;}
}
@media screen and (max-width: 600px){
    .section-list4 .col{ width: 100%;}
    .section-list4 .item{ padding: 40px 0;}
    .section-list4 .item .pic{ width: 60px; height: 60px;}
    .section-list4 .item .des{ padding: 0 30px;}
}



/* Section-slide */
.section-slide{ width: 100%; height: auto; padding: 80px 0; background: #222222 url("../image/default/section-slide-bg.jpg") center no-repeat; background-size: cover; position: relative;}
.section-slide .section-title{ width: 100%; height: auto; margin-bottom: 30px;}
.section-slide .section-title .tit{ width: 100%; height: auto; text-align: center; margin-bottom: 30px;}
.section-slide .section-title .tit a{ font-size: 30px; font-weight: 300; color: #ffffff;}
.section-slide .section-title .line{ width: 60px; height: 2px; background: rgba(255,255,255,0.6); margin: 0 auto; transition: all 0.3s; -moz-transition: all 0.3s; -webkit-transition: all 0.3s; -o-transition: all 0.3s;}
.section-slide .section-title:hover .line{ width: 100px;}
.section-slide #swiper-section-slide{ width: 100%; height: auto;}
.section-slide #swiper-section-slide .swiper-slide .des{ width: 75%; height: auto; line-height: 2em; color: #ffffff; margin: 0 auto; text-align: justify; margin-bottom: 30px;}
.section-slide #swiper-section-slide .swiper-slide .avatar{ width: 100px; height: 100px; margin: 0 auto; border-radius: 50px; overflow: hidden; background: #ffffff; border: 2px solid #ffffff; margin-bottom: 20px;}
.section-slide #swiper-section-slide .swiper-slide .avatar img{ width: 100%;}
.section-slide #swiper-section-slide .swiper-slide .name{ width: 200px; height: auto; text-align: center; color: #ffffff; margin: 0 auto; margin-bottom: 5px; font-size: 18px;}
.section-slide #swiper-section-slide .swiper-slide .posi{ width: 200px; height: auto; text-align: center; color: #ffffff; margin: 0 auto; margin-bottom: 80px;}
.section-slide #swiper-section-slide .swiper-pagination-bullet{ width: 12px; height: 12px; background: #ffffff;}
.section-slide #swiper-section-slide .swiper-pagination-bullet-active{ background: #ffffff;}
@media screen and (max-width: 1024px) {
    .section-slide .section-title{ margin-bottom: 20px;}
    .section-slide .section-title .tit{ margin-bottom: 20px;}
    .section-slide .section-title .tit a{ font-size: 24px;}
    .section-slide{ padding: 40px 0;}
    .section-slide #swiper-section-slide .swiper-slide .des{ font-size: 15px;}
}



/* Section-counter */
.section-counter{ width: 100%; height: auto; padding: 50px 0; background: #c20112; position: relative;}
.section-counter .col{ width: 25%;}
.section-counter .item{ width: 100%; height: auto; position: relative;}
.section-counter .item .pic{ width: 100%; height: auto; text-align: center; overflow: hidden;}
.section-counter .item .pic i{ font-size: 60px; line-height: 70px; color: #ffffff;}
.section-counter .item .title{ width: 100%; height: auto; margin: 40px 0 20px 0; text-align: center; color: #ffffff;}
.section-counter .item .num{ width: 100%; height: auto; text-align: center; font-size: 30px; color: #ffffff;}
@media screen and (min-width: 801px) and (max-width: 1024px) {
    .section-counter{ padding: 40px 0;}
    .section-counter .item .title{ margin: 30px 0 20px 0;}
}
@media screen and (min-width: 601px) and (max-width: 800px) {
    .section-counter{ padding: 40px 0;}
    .section-counter .item .title{ margin: 30px 0 20px 0;}
    .section-counter .item .num{ font-size: 24px;}
}
@media screen and (max-width: 600px) {
    .section-counter{ padding: 30px 0;}
    .section-counter .item .pic i{ font-size: 40px; line-height: 50px; color: #ffffff;}
    .section-counter .item .title{ margin: 20px 0 15px 0; font-size: 14px;}
    .section-counter .item .num{ font-size: 20px;}
}



/* Section-brand */
.section-brand{ width: 100%; height: auto; padding: 80px 0; background: #ffffff;}
.section-brand .section-title{ width: 100%; height: auto; margin-bottom: 50px;}
.section-brand .section-title .tit{ width: 100%; height: auto; text-align: center; margin-bottom: 20px;}
.section-brand .section-title .tit a{ font-size: 30px; font-weight: 300;}
.section-brand .section-title .subtit{ width: 100%; height: auto; text-align: center;}
.section-brand .col{ width: 16.6666%;}
.section-brand .item{ width: 100%; height: auto; position: relative; background: #f5f5f5; transition: all 0.3s; -moz-transition: all 0.3s; -webkit-transition: all 0.3s; -o-transition: all 0.3s;}
.section-brand .item:hover{ box-shadow: 0 0 10px 3px rgba(16,133,228,0.2);}
.section-brand .item .pic{ width: 100%; height: 0; padding-bottom: 60%; overflow: hidden;}
.section-brand .item .pic img{ width: 100%;}
@media screen and (min-width: 601px) and (max-width: 1024px) {
    .section-brand .section-title{ margin-bottom: 20px;}
    .section-brand .section-title .tit{ margin-bottom: 10px;}
    .section-brand .section-title .tit a{ font-size: 24px;}
    .section-brand .section-title .subtit{ font-size: 14px;}
    .section-brand{ padding: 40px 0;}
}
@media screen and (max-width: 600px) {
    .section-brand .section-title{ margin-bottom: 20px;}
    .section-brand .section-title .tit{ margin-bottom: 10px;}
    .section-brand .section-title .tit a{ font-size: 24px;}
    .section-brand .section-title .subtit{ font-size: 14px;}
    .section-brand{ padding: 40px 0;}
    .section-brand .col{ width: 33.3333%;}
    .section-brand .item{ margin-bottom: 10px;}
}



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



/* Crumbs */
#crumbs{ width: 100%; height: auto; background: #f5f5f5; padding: 25px 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: 50px 0; background: #ffffff;}
#pagemenu-top .pagemenu-title{ width: 100%; height: auto; text-align: center; margin-bottom: 10px;}
#pagemenu-top .pagemenu-title h1{ font-size: 30px; margin-bottom: 10px; font-weight: 300;}
#pagemenu-top .pagemenu-title p{ font-size: 14px;}
#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-top: 10px; margin-left: 5px; margin-right: 5px;}
#pagemenu-top .pagemenu-content ul li a { display: block; width: 100%; height: 50px; background: #f5f5f5; 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-top .pagemenu-content ul li a:hover { padding: 0 25px; color:#ffffff; background: #c20112;}



/* Pagemenu Left */
#pagemenu-left{ float: left; width: 230px; height: auto; background: #ffffff; display: none;}
#pagemenu-left .pagemenu-title{ width: 100%; height: auto; background: #c20112; 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: #c20112;}
#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: #c20112;}
#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%;}



/* 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: #c20112;}
.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: #c20112;}
.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: #c20112;}
.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: #c20112;}
.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%;}



/* Video Index */
.content-video-index{ width: 100%; height: auto;}
.content-video-index .col{ width: 33.3333%;}
.content-video-index .item{ width: 100%; height: auto; position: relative; margin-bottom: 30px;}
.content-video-index .item .pic{ width: 100%; background: #000000; margin-bottom: 15px;}
.content-video-index .item .pic video{ object-fit:fill; width:100%; height:100%; outline: none;}
.content-video-index .item .title{ width: 100%; height: 30px; line-height: 30px; overflow: hidden; text-align: center;}
@media screen and (min-width: 601px) and (max-width: 1024px){
    .content-video-index .col{ width: 50%;}
    .content-video-index .item{ margin-bottom: 20px;}
    .content-video-index .item .title a{ font-size: 14px;}
}
@media screen and (max-width: 600px){
    .content-video-index .col{ width: 100%;}
    .content-video-index .item{ margin-bottom: 10px;}
    .content-video-index .item .pic{ margin-bottom: 10px;}
    .content-video-index .item .title a{ font-size: 14px;}
}



/* Video Process */
.content-video-process{ width: 100%; height: auto;}
.content-video-process .col{ width: 100%;}
.content-video-process .col .btitle{ 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-video-process .item{ width: 100%; height: auto; position: relative; margin-bottom: 30px;}
.content-video-process .item .pic{ width: 100%; background: #000000; margin-bottom: 15px;}
.content-video-process .item .pic video{ object-fit:fill; width:100%; height:100%; outline: none;}
.content-video-process .item .title{ width: 100%; height: 30px; line-height: 30px; overflow: hidden; text-align: center;}
@media screen and (min-width: 601px) and (max-width: 1024px){
    .content-video-process .col{ width: 100%;}
    .content-video-process .col .btitle{ font-size: 24px;}
    .content-video-process .item{ margin-bottom: 20px;}
    .content-video-process .item .title a{ font-size: 14px;}
}
@media screen and (max-width: 600px){
    .content-video-process .col{ width: 100%;}
    .content-video-process .col .btitle{ font-size: 24px;}
    .content-video-process .item{ margin-bottom: 10px;}
    .content-video-process .item .pic{ margin-bottom: 10px;}
    .content-video-process .item .title a{ font-size: 14px;}
}



/* Product Index */
.content-product-index{ width: 100%; height: auto;}
.content-product-index .col{ width: 33.3333%;}
.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: 60%; 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: 50px; line-height: 50px; overflow: hidden; text-align: center; border-top: 1px solid #eeeeee;}



/* Product Lists */
.content-product-lists{ width: 100%; height: auto;}
.content-product-lists .col{ width: 33.3333%;}
.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: 60%; 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: 50px; line-height: 50px; 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: #c20112;}
.content-product-show .propic #swiper_pro .swiper-pagination-bullet-active{ background: #c20112;}
.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 input{ width: 100%; height: auto; padding: 10px; border: 1px solid #dddddd; margin-bottom: 20px; outline: none; font-size: 16px; border-radius: 4px;}
.content-message textarea{ width: 100%; height: auto; padding: 10px; min-height: 200px; border: 1px solid #dddddd; margin-bottom: 20px; outline: none; font-size: 16px; border-radius: 4px;}
.content-message button{ width: 100%; height: auto; padding: 10px; display: block; background: #c20112; 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: 16px; border-radius: 4px;}
.content-message button:hover{ background: #80010c;}



/* 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: 1200px;}
    #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: 1200px;}
    #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;}
    #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{ width: 100%; text-align: center;}
    #footer .bottom .col:nth-child(-n+4){ display: none;}
    #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: 50px; line-height: 50px;}
    /* Product Lists */
    .content-product-lists .col{ width: 33.3333%;}
    .content-product-lists .item{ margin-bottom: 10px;}
    .content-product-lists .item .title{ height: 50px; line-height: 50px;}
    /* 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{ width: 100%; text-align: center;}
    #footer .bottom .col:nth-child(-n+4){ display: none;}
    #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: 40px; line-height: 40px;}
    .content-product-index .item .title a{ font-size: 14px;}
    /* Product Lists */
    .content-product-lists .col{ width: 33.3333%;}
    .content-product-lists .item{ margin-bottom: 10px;}
    .content-product-lists .item .title{ height: 40px; line-height: 40px;}
    .content-product-lists .item .title a{ font-size: 14px;}
    /* 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 .col{ width: 100%; text-align: center;}
    #footer .bottom .col:nth-child(-n+4){ display: none;}
    #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: 40px; line-height: 40px;}
    .content-product-index .item .title a{ font-size: 14px;}
    /* Product Lists */
    .content-product-lists .col{ width: 50%;}
    .content-product-lists .item{ margin-bottom: 10px;}
    .content-product-lists .item .title{ height: 40px; line-height: 40px;}
    .content-product-lists .item .title a{ font-size: 14px;}
    /* 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;}
}