@charset "UTF-8";
@import "bootstrap.min.css";
@import "layui.css";
@import "icon.css";
@import "animate.css";

/* CSS Document */

*,body,h1,h2,h3,h4,h5,h6,div,ul,li {font-family: 'Arial','Microsoft YaHei'; margin:0; padding:0;}
body {background-color: #F7F2FA; font-size: 14px;}
ul,li {list-style:none;}

a {cursor: pointer;}
a:hover,a:focus,a:active {text-decoration: none;}

/*** layui 改善 ***/
.table tr td.bg_white {background-color: #FFF!important;}

/*** 背景 ***/
.bg_white {background-color: #FFF;}


/*** 间距 ***/
.m-t-0 {margin-top: 0!important;}
.m-t-5 {margin-top: 5px !important;;}
.m-t-10 {margin-top: 10px !important;;}
.m-t-20 {margin-top: 20px !important;;}
.m-b-0 {margin-bottom: 0 !important;;}
.m-b-10 {margin-bottom: 10px !important;;}
.m-b-15 {margin-bottom: 15px !important;;}
.m-b-20 {margin-bottom: 20px !important;;}
.m-l-5 {margin-left: 5px !important;}
.m-l-10 {margin-left: 10px !important;}
.m-r-0 {margin-right: 0 !important;}
.m-r-5 {margin-right: 5px !important;}
.m-r-10 {margin-right: 10px !important;}
.m-r-20 {margin-right: 20px !important;}

/*** 字体 ***/
.font12 {font-size: 12px;}
.font14 {font-size: 14px;}
.font16 {font-size: 16px;}
.font18 {font-size: 18px;}

/*** 边框 ***/
.border-t,.border-r,.border-b,.border-l,.select-arrow,.layer-arrow {display: inline-block; width: 0; height: 0; border-width: 4px; overflow: hidden;}
.border-b {border-color: transparent transparent #DBDBDB; border-style: dashed dashed solid;}
.arrow-t, .arrow-b {position: absolute; border-width: 7px; left: 50%; margin-left: -4px;}
.arrow-b {top: -13px;}
.arrow-t {top: -14px;}

/*** 头部 ***/
.head {width: 100%; background-color: #FFF; box-shadow: 0 0 5px rgba(50,50,50,.15);}
.top-bar {width: 100%; height: 30px; line-height: 30px; color: rgba(255,255,255,.45); background-color: #232323;}
.top-bar .slogan {font-size: 12px;}
.top-bar .code {position: relative; display: inline-block; cursor: pointer; z-index: 10;}
.top-bar .code i {vertical-align: top;}
.top-bar .code img {width: 137px;}
.top-bar .layui-col-md6:nth-child(2){text-align: right;}
.top-bar .layer-code {position: absolute; visibility: hidden; opacity: 0; left: 50%; top: 30px; margin-left: -68px; background-color: white; border: 1px solid #DEDEDE; padding: 5px; z-index: 9;}
.head .arrow-t {border-color: transparent transparent #DEDEDE;}
.head .arrow-b {border-color: transparent transparent white;}
.hd-weixin:hover,.hd-avatar:hover {color: rgba(255,255,255,.7);}
.hd-weixin:hover .layer-code,.hd-avatar:hover .layer-code {visibility: visible; opacity: 1;}
.head .hd-avatar {display: none;}


.logo {width: 100%; min-width: 168px; max-width: 180px; height: 80px; background: url("../images/logo.png") center left no-repeat;}
.logo h1,.logo a {display: block; width: 100%; height: 100%;}
.logo a {text-indent: -1000px; overflow: hidden;}

.nav {width: 100%; height: 80px;}
.nav ul,.nav li,.nav li > a {display: inline-block;}
.nav ul {margin-left: 80px;}
.nav li {position: relative; margin: 0 5px; z-index: 9;}
.nav li > a {width: 80px; height: 80px; color: #333; line-height: 80px; font-weight: 400; text-align: center;}
.nav li > a:hover {color: rgb(127,67,167); font-weight: 500;}


.nav .show-nav {position: absolute; width: 20px; height: 20px; right: 0; padding: 10px; display: none;}
.nav .show-nav i {font-size: 20px; color: #999;}

.nav .sub-nav {position: absolute; width: 100px; left: -10px; background-color: #F7F2FA; box-shadow: 0 3px 3px rgba(0,0,0,.15); visibility: hidden; opacity: 0; display: none; z-index: 8;}
.nav .sub-nav {transition: all 0.5s ease-in-out 0s; transform: translateY(-10px);}
.nav .sub-nav dd {text-align: center; line-height: 36px; border-top: 1px solid rgba(127,67,167,.0);}
.nav .sub-nav dd:first-child {border-top: none;}
.nav .sub-nav dd a {display: block; font-size: 12px;}
.nav .sub-nav dd a:hover {color: #FFF; background-color: #A66CA5;}
.nav li:hover .sub-nav {visibility: visible; opacity: 1;}

.phone-number {width: 150px; height: 30px; float: right; margin-top: 25px;}


/*** 内容 ***/
.body {width: 100%; min-height: 600px;}

.banner {position: relative; width: 100%; z-index: 2;}

.column {width: 100%; float: left; padding: 40px 0;}
.column .title {position: relative; text-align: center;}
.column .title h2,.column .sub-title h2 {font: bold 26px/30px 'Microsoft YaHei'; color: #6F4D86;}
.column .title p,.column .sub-title h2 span {color: #C0AFCC; text-transform : uppercase; font: normal 14px/30px 'Arial';}
.column .sub-title h2 {font-size: 24px;}

.leading {margin: 30px 0 110px}
.leading .pic,.leading .pic img {width: 100%; transition: all 0.5s ease;}
.leading .pic {position: relative; height: 100%; overflow: hidden;}
.leading .title {position: absolute; width: 80%; padding: 15px 0; background: url("../images/logo_01.png") #FFF 115% 350% no-repeat; background-size: 32%; left: -50%; margin-left: 60%; bottom: -50px; box-shadow: 0 0 5px rgba(50,50,50,.1);}
.leading .title {transition: all 0.5s ease-in-out 0s; transform: translateY(0);}
.leading .layui-col-md4 {cursor: pointer;}
.leading .title h3 {font-size: 24px; line-height: 30px;}
.leading .title p {color: #AAA; font-size: 14px; margin: 0;}

.leading .layui-col-md4:hover .pic img {transform: scale(1.15);}
.leading .layui-col-md4:hover .title {transform: translateY(-15px); box-shadow: 0 0 10px rgba(0,0,0,.1);}
.leading .layui-col-md4:hover .title h3 {color: #7F43A7;}
.leading .layui-col-md4:hover .title p {color: #B497BB;}

.application .title {position: relative; width: 100%; left: 0; margin: 0; bottom: 0; background: #FAFAFA; box-shadow: none; text-align: left;}
.application .title p {font-size: 12px;}
.application .layui-col-md4:hover .title {transform: translateY(0);}

.company-about {}
.company-about .pic img {width: 100%;}
.company-about .title {text-align: left;}
.company-about .title:after {content: ''; position: absolute; width: 70px; height: 3px; background-color: #7F43A7;}
.company-about .title h3 {font-size: 24px; font-weight: 600;}
.company-about .title p {color: #AAA; line-height: 40px;}

.company-about .words {width: 89%; color: #666;}
.company-about .words p {line-height: 24px; text-indent: 2em; margin-top: 20px;}
.company-about .button {margin-top: 20px;}

.company-pic {border-top: 1px solid #EEE; margin-top: 30px; text-align: center; display: none;}
.company-pic .pic {width: 100px; height: 100px; margin: 20px 0; border-radius: 50%; display: inline-block; box-shadow: 0 0 5px rgba(100,100,100,.25);}
.company-pic .title h4 {font-size: 16px; line-height: 30px;}
.company-pic .title p {font-size: 12px; line-height: 16px; color: #CCC;}
.company-pic .layui-col-md4 {cursor: pointer;}
.company-pic .layui-col-md4:hover .pic {box-shadow: 0 0 5px rgba(127,67,167,.55);}
.company-pic .layui-col-md4:hover .title h4 {color: #7F43A7;}
.company-pic .layui-col-md4:hover .title p {color: #B497BB;}

.news-list {padding-top: 40px;}
.news-list .item {}
.news-list .item h3 {position: relative; width: 100%; margin-bottom: 10px; line-height: 50px; font-weight: 700; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
.news-list .item h3:after {content: ''; position: absolute; width: 40px; height: 3px; left: 0; bottom: 0; background-color: #7F43A7;}
.news-list .item h3 a {font-size: 16px;}
.news-list .item p {color: #666; line-height: 24px; margin: 10px 0 0; display: -webkit-box; overflow: hidden; -webkit-line-clamp: 3; -webkit-box-orient: vertical;}
.news-list .item p:last-child {color: #AAA; margin-bottom: 0;}

.news-list .item {height: 185px;}
.news-list .item:hover h3 a {color: #7F43A7;}

.news-pic-list .sub-title {margin-bottom: 10px;}
.news-pic-list .pic {background-color: #6F4D86; padding: 20px 20px 0;}
.news-pic-list .pic img {width: 100%;}
.news-pic-list .item {height: auto; background-color: #F7F2FA; padding: 5px 15px 20px;}
.news-pic-list .item h3 {line-height: 40px;}
.news-pic-list .item p {-webkit-line-clamp: 2;}
.news-pic-list .item:hover {box-shadow: none;}

    /*** 底部 ***/
.foot {width: 100%; float: left; color: rgba(255,255,255,.35); background-color: #232323;}
.foot a {color: rgba(255,255,255,.35);}
.foot a:hover {color: rgba(255,255,255,.75);}
.foot .address {line-height: 24px;}
.foot .number {display: block; font-size: 30px; font-weight: 700; color: rgba(255,255,255,.85);}
.foot .email-number {margin-top: 20px;}
.foot .show-code {text-align: right;}

.foot .links {color: rgba(255,255,255,.05); padding: 15px 0; margin-bottom: 20px; border-bottom: 1px solid rgba(255,255,255,.08);}
.foot .links a {margin: 0 15px;}
.foot .links a:first-child {margin-left: 0;}
.foot .links a:last-child {margin-right: 0;}
.foot .links .other-link {float: right;}

.foot .code {display: inline-block;}
.foot .code img {width: 100px; height: 100px;}
.foot .copy {border-top: 1px solid rgba(255,255,255,.05); line-height: 40px; margin-top: 20px; text-align: right;}

/***  ***/
@media screen and (max-width:768px){
    .top-bar .slogan {text-align: center;}
    .top-bar .code-show,.nav ul,.nav .phone-number {display: none;}
    .logo {height: 40px; background-size: 60%;}
    .nav {height: 40px;}
    .nav ul {position: fixed; width: 50%; margin: 0; right: 0; top: 0; padding-top: 30px; background-color: #FFF; z-index: 5;}
    .nav li {width: 100%; margin: 0;}
    .nav li:hover .sub-nav {display: none;}
    .nav li:hover:after {left: 0;}
    .nav li > a {width: 100%; height: 50px; line-height: 50px;}
    .nav .show-nav {display: block; right: -10px; width: 40px; height: 40px;}

    .leading {margin:20px 0 0;}
    .leading .layui-col-md4 {margin-bottom: 60px;}
    .leading .title {background-position: 115% 55px;}

    .application {margin-bottom: 0;}
    .application .title {padding: 20px 0; text-align: center;}
    .application .title h3 {font-size: 20px; margin-bottom: 5px;}
    .application .title p {padding: 0; font-size: 12px; line-height: 16px;}
    .application .layui-col-md4 {margin-bottom: 10px;}

    .company-about {margin-top: 30px;}
    .company-about .title h3 {font-size: 16px; font-weight: 600;}
    .company-about .title p {color: #AAA; font-size: 12px; line-height: 30px;}
    .company-about .words {width: 100%;}
    .company-about .words p {font-size: 12px;}
    .company-about .words p:nth-child(2),.company-about .pic {display: none;}
    .company-about .words .button {text-align: center;}

    .foot div,.foot a,.foot p,.foot span {font-size: 12px;}
    .foot {text-align: center;}
    .foot .links {padding: 10px 0; margin-bottom: 10px;}
    .foot .links a {margin: 0 5px;}
    .foot .links span {width: 100%; display: inline-block; line-height: 22px; float: none; text-align: center;}
    .foot .show-code {display: none;}
    .foot .email-number {margin-top: 0;}
    .foot .number {display: inline; font-size: 14px; line-height: 20px;}
    .foot .copy {line-height: 20px; padding: 10px 0; margin-top: 10px; text-align: center;}
    .foot .copy span {display: block;}
}
@media screen and (min-width:768px){
    .top-bar .slogan {text-align: left;}
    .top-bar .code-show,.nav ul,.nav .phone-number {display: none;}
    .logo {height: 60px; background-size: 80%;}
    .nav {height: 60px;}
    .nav ul {position: fixed; width: 40%; height: 100%; margin: 0; padding-top: 30px; right: 0; top: 0; background-color: #FFF; z-index: 5;}
    .nav li {width: 100%; margin: 0;}
    .nav li:hover .sub-nav {display: none;}
    .nav li:hover:after {left: 0;}
    .nav li > a {width: 100%; height: 50px; line-height: 50px;}
    .nav .show-nav {position: absolute; width: 60px; height: 60px; right: -20px; padding: 20px; display: block;}

    .leading {margin-bottom: 0;}
    .leading .title {padding: 15px; background-position: 116% 60px;}
    .leading .title h3 {font-size: 18px; line-height: 36px;}
    .leading .title p {font-size: 12px; padding: 0 10px; line-height: 16px;}
    .application,.application .layui-col-sm4 {margin-bottom: 0}
    .application .title {height: auto;}
    .application .title p {padding: 0; font-size: 12px;}

    .company-about {margin-top: 20px;}
    .company-about .title h3 {font-size: 18px; font-weight: 600;}
    .company-about .title p {color: #AAA; font-size: 12px; line-height: 30px;}

    .company-about .words p:nth-child(2) {display: none;}
    .company-about .words .button {text-align: left;}
    .company-about .pic {display: block;}

    .news-list .item p {-webkit-line-clamp: 2;}

    .foot .links {text-align: left;}
    .foot .links span {width: auto;}
    .foot .links .other-link {float: right;}
    .foot .copy span {display: inline;}
}
@media screen and (min-width:992px){
    .top-bar .code-show,.nav ul {display: block;}
    .logo {height: 80px; background-size: 168px;}
    .nav .phone-number,.nav .show-nav {display: none;}
    .nav {position: relative; height: 80px;}
    .nav ul,.nav li,.nav li > a {display: inline-block;}
    .nav ul {position: relative; width: auto; margin: 0; padding: 0; top: 0; right: 0; left: 0; float: right; z-index: 5;}
    .nav li {width: auto; margin: 0 5px;}
    .nav li > a {width: 80px; height: 80px; line-height: 80px;}
    .nav li:hover:after {width: 100px; left: -10px;}
    .nav li:hover .sub-nav {display: block; visibility: visible; opacity: 1; transform: translateY(0);}

    .leading {margin: 0;}
    .leading .title {padding: 5px 20px 20px; background-position: 116% 55px;}
    .leading .title h3 {font-size: 24px; line-height: 40px;}
    .leading .title p {font-size: 12px;}
    .application .title p {padding: 0;}
    .application {margin-bottom: 0;}
    .news-list .layui-col-md4 .item:first-child {}
    .red-item {margin-top: 35px;}
    .company-about .title h3 {font-size: 24px; font-weight: 600;}
    .company-about .title p {color: #AAA; line-height: 40px;}

    .company-about .words p:nth-child(2) {display: block;}
    .company-pic .title p {padding: 0 50px;}
}
@media screen and (min-width:1200px){
    .nav .phone-number {display: inline-block;}
    .nav ul {float: left; margin-left: 80px;}
    .leading .title {background-position: 115% 45px;}
    .leading .title p {font-size: 12px; line-height: 16px;}
    .news-list .item p {-webkit-line-clamp: 3;}
	.news-pic-list .item p {-webkit-line-clamp: 2;}
}
@media screen and (min-width:1440px){
    .nav {position: relative;}
    .nav ul {position: absolute; width: 700px; float: none; left: 50%; margin-left:-400px;}
}