@charset "utf-8";
/* Css3 reset css. @Author wl update 2016-7-13 */
html,body,ul,ol,li,dl,dd,dt,p,h1,h2,h3,h4,h5,h6,object,iframe,img,table,caption,tbody,tfoot,thead,tr,th,td{ padding: 0; margin: 0; list-style: none; outline: 0; vertical-align: baseline;}
img{ border: 0;}
em, i, b, strong { font-style : normal;}
body{ -webkit-user-select: none; user-select: none; background: #6c6c6c; font:14px/26px "Arial","Microsoft YaHei","SimHei","黑体","微软雅黑";}
/*文字颜色*/
a{ color: #333; text-decoration: none; -webkit-transition:all .1s linear; transition:all .1s linear;}
a:hover{ color: #fff; }
/**导航**/
.navigation{ width: 22%; max-width: 296px; position: fixed; left: 0; top: 0; bottom: 0; border-right: 1px solid #5e5e5e;}
.navigation img{ width: 100%;}
.navigation h3{ margin: 36px 0 0; text-align: center;}
.navigation ul{ min-width: 100%; position: absolute; left: 0; right: 0; top: 20%;}
.navigation ul li{ border-bottom: 1px solid #5e5e5e; overflow: hidden;}
.navigation ul li a{ display: block; text-align: center; color: #303030; font-size: 18px; font-weight: bold; line-height: 68px;}
.navigation ul li a:hover{ background: #686868; color: #999;} .navigation ul li.active a{ color: #fff; background:#5e5e5e;}
.navigation span{ cursor: pointer; background: url(../images/off.png) no-repeat -40px 0; width: 40px; height: 40px; position: absolute; bottom: 5%; left: 50%; margin: 0 0 0 -20px;}
.navigation span:before{ content: ''; width: 100%; height: 100%; border-radius: 100%; position: absolute; left: 0; top: 0; z-index: -1; -webkit-animation: Circles 2s ease infinite; animation: Circles 2s ease infinite; animation: Circles 2s ease infinite; background: rgba(255,255,255,.158);}
.now{ background-position: 0 0 !important;}
/**右侧容器**/
.content{ width: 72%; position: absolute;  top: 0; right: 3%; overflow: hidden;}
/*标题*/
.title{ width: 100%; font-size: 28px; font-weight: bold; padding: 10px 0 16px; color: #333; border-bottom: 1px solid #5e5e5e;}
/*间距*/
.spacing{ min-height: 28px; width: 100%;}
/*展图*/
.picture{ overflow: hidden; width: 90%; margin: 0 auto;}
.picture h3{ box-sizing: border-box; -webkit-box-sizing: border-box; border: 4px solid #fff; width: 100%;}
.picture h3 a{ border: 3px solid #5e5e5e; display: block;}
.picture img{ width: 100%; display: block;}
.picture span{ transition:all .1s linear; -webkit-transition:all .1s linear; -ms-transition:all .1s linear; display: inline-block; cursor: pointer; color: #333; margin: 30px 0 0 12px; font-size: 15px; font-weight: bold;}
.picture span em{ position: relative; padding: 8px 20px; margin: 0 2px;}
.picture span em:before{ content: ''; width: 100%; height: 100%; background: #5e5e5e; transform: skewX(-30deg); position: absolute; left: 0; top: 0; z-index: -1;}
.picture span:hover{ color: #999;}
/*语言*/
.borderism{ width: 100%; margin: 20px 0; text-align: right; }
.borderism a{ color: #999; position: relative;}
.borderism a:before{ transition:all .2s linear; -webkit-transition:all .2s linear; transform: translateX(-50%); -webkit-transform: translateX(-50%); content: ''; background: #999; width: 0%; height: 2px; position: absolute; left: 50%; bottom: -.3em;}
.borderism a:hover:before{ width: 100%;}
.borderism em{ width: 1px; height: 10px; margin: 0 .5em; background: #999; display: inline-table;}
/*底部*/
.footer{ width: 100%; overflow: hidden; border-top: 1px solid #5e5e5e; color: #333; text-align: center; padding: 22px 0; font-size: 13px;}
/*产品类目*/
.column{ width: 100%; overflow: hidden; margin:28px 0 0;}
.column li{ float: left; margin: 0 .7em .7em 0;}
.column li a{ border: 2px solid #555; display: inline-block; line-height: 48px; font-size: 16px; padding: 0 1em;}
.column li a:hover, .column li.active a{ background: #5e5e5e; color: #fff;}
/*作品列表*/
.products img{ float: left;}
.products dl{ transition:all .2s linear; -webkit-transition:all .2s linear; width: 100%; overflow: hidden; margin: 38px 0 0;}
.products dl:hover{ opacity: .8; }
.products dd{ width: 68%; margin: 1.2em 0 0 2em; color: #999; font-size: 16px; float: left;}
.products dd span{ width: 100%; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; margin: 26px 0 0; }
.products dd p{ margin: 1.2em 0 0;}
.products h3{ font-size: 20px; font-weight: normal;}
.products h3 a{ color: #fff; }
/*分页*/
.page{ width: 100%; padding: 38px 0; overflow: hidden; text-align: right; }
.page a{ line-height: 36px; display: inline-block; background: #4c4c4c; color: #999; padding: 0 15px;}
.page a:hover{ background: #343434;}
.page a.active{ background: #2cb985; color: #fff;}
.page a:last-of-type em{ background-position: -8px 0;}
.page em{ width: 8px; height: 8px; position: relative; bottom: .05em; display: inline-block; margin: 0 .3em 0; background: url(../images/arrow.png) no-repeat 0 0;}
/*详情*/
.details{ width: 100%; overflow: hidden; padding: 0 0 40px;}
.details h3{ padding: 42px 0 20px; color: #fff; font-size: 28px; text-align: center; border-bottom: 1px solid #5e5e5e;}
.details div.text{ font-size: 16px; margin:30px 0 0; color: #fff;}
.details div.text img{ max-width: 88%; box-shadow: 0 0 3px rgba(0,0,0,.4)}
/*联系我*/
.contactus{ width: 100%; background: #3c3c3b;}
.contactus span{ width: 100%; display: block; padding-top: 22px; background: #5e5e5e;}
.contactus span img{ display: block; margin: 0 auto; }
.contactus ul{ overflow: hidden; padding: 60px 130px;}
.contactus ul li{ display: -webkit-flex; display: flex; align-items: center; -webkit-align-items: center; width: 50%; margin: 25px 0; color: #fff; float: left; font-size: 16px; line-height: 20px;}
.call,.mail,.printer,.address{ background: url(../images/contact.png) no-repeat; min-width: 44px; min-height: 44px; margin: 0 15px 0 0; display: block;}
.mail{ background-position: -88px 0;}
.printer{ background-position: -44px 0;}
.address{ background-position: -132px 0;}
/*新闻列表*/
.news-list a{ display: block; margin: 38px 0 0; border: 1px solid #5e5e5e; font-size: 16px; line-height: 20px;}
.news-list a p{ color: #333; background: #696969; padding: 15px 20px;}
.news-list a h3{ color: #fff; padding: 26px 20px 0; font-size: 20px; font-weight: normal;}
.news-list a span{ display: block; padding: 15px 20px; color: #999;}
.news-list a:hover{ border: 1px solid #474747;}
.news-list a:nth-child(even) p{ background: #626262;}
/*新闻详情*/
.news h3{ padding: 20px 0;}
.release{ width: 100%; overflow: hidden; color: #333; padding: 10px 0;}
.release span{ float: right; }
.comments{ width: 100%; overflow: hidden; color: #333; font-size: 16px; line-height: 20px; background: #5e5e5e;}
.comments h3{ overflow: hidden; padding: 0 0 20px 0;}
.comments h3 span{ font-size: 12px; float: right;}
.comments ul li{ border-top: 1px solid #5e5e5e; display: block; padding: 38px;}
/*个人传记*/
.biography{ width: 100%; color: #fff; font-size: 16px; overflow: hidden; margin: 38px 0 0;}
.biography img{ max-width: 88%;}
/*艺术简历*/
.profile{ color: #333; position: relative; padding-bottom: 40px;}
.profile > span{ width: 3px; background: #5e5e5e; position: absolute; left: 200px; top: 80px; bottom: 0;}
.profile h2{ font-size: 20px; padding: 28px 0;}
.profile ul{ position: relative; margin: 28px 0 0; padding: 28px 0 0; z-index: 2;}
.profile ul span{ width: 180px; text-align: right; padding-right: 30px; font-size: 20px; font-weight: bold; position: absolute; left: 0; top: 0;}
.profile ul span em{ background: url(../images/round.png) no-repeat; min-width: 18px; min-height: 18px; position: absolute; right: 0; top: .2em;}
.profile ul li{ padding: 0 0 0 220px; margin: 22px 0 0; position: relative; color: #fff; font-size: 16px;}
.profile ul li em{ width: 180px; text-align: right; position: absolute; left: 0; top: 0;}
/*查询*/
@media only screen and (max-width:1024px){}
@media only screen and (max-width:1280px){
.products h3{ font-size: 18px;}
.products dl dd{ width: 58%;}
.navigation ul li a{ font-size: 16px; line-height: 52px;}
}
/*动画*/
@-webkit-keyframes Circles {
	from{ transform: scale(1); -webkit-transform: scale(1); opacity: .6;}
	90%{ transform: scale(1.6); -webkit-transform: scale(1.6); opacity: 0;}
	to{ transform: scale(1); -webkit-transform: scale(1); opacity: 0;}
}
/*切换*/
.switch{ text-align: center; width: 100%; float: left; padding: 40px 0 0;}
.switch a:hover{ color: #999;}
.switch em{ display: inline-block; padding:0 15px;}
.switch span{ margin-right: 10px; color: #333; background:#5e5e5e; font-weight: bold; display: inline-block; padding: 1px 12px; border-radius: 30px;}