/*全局控制*/
@charset "utf-8";

/*全局控制*/
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */
div,dl, dt, dd, ul, ol, li, /* list elements 列表元素 */
h1,h2,h3,h4,h5,h6,
pre, code,/* text formatting elements 文本格式元素 */
form, fieldset, legend, button, input, textarea, /* form elements 表单元素 */
p,blockquote,th, td /* table elements 表格元素 */ {margin: 0;padding: 0;}
/** 设置默认字体 **/
body,
button, input, select, textarea /* for ie */ {font: 14px/1.5 tahoma, arial, \5b8b\4f53, sans-serif;}
h1,h2,h3,h4,h5,h6 {font-weight:normal;}   
address, cite, dfn, em, var { font-style: normal; } /* 将斜体扶正 */
code, kbd, pre, samp { font-family: courier new, courier, monospace; } /* 统一等宽字体 */
small { font-size: 12px; } /* 小于 12px 的中文很难阅读，让 small 正常化
*/
table,td,tr,th{font-size:12px;}
caption,th {text-align:left;}  
/** 重置列表元素 **/
ul, ol, li { list-style: none; }
li{list-style-type:none;}
q:before,q:after {content:'';}   
abbr,acronym {border:0;font-variant:normal;}
address,caption,cite,code,dfn,em,th,var,optgroup {font-weight:normal; font-style:normal;} 
del,ins{text-decoration:none;}
/** 重置文本格式元素 **/
a {color:#000;text-decoration:none;outline:none;}
a:visited {text-decoration:none;}
a:hover {color:#666;text-decoration:none;}
a:active {color:#666;}
/** 重置表单元素 **/
legend { color: #666; } /* for ie6 */
fieldset, img { border: 0; } /* img 搭车：让链接里的 img 无边框 */
button, input, select, textarea { font-size: 100%; } /* 使得表单元素在 ie 下能继承字体大小 */
sup { vertical-align: text-top; } /* 重置，减少对行高的影响 */
sub { vertical-align: text-bottom; }
/* 注：optgroup 无法扶正 */
/** 重置表格元素 **/
table { border-collapse: collapse; border-spacing: 0; }
/** 清除浮动 **/
input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;outline:none;}
body{background:#fff;font:12px/20px Microsoft Yahei,simsun,Tahoma,Arial,Helvetica,sans-serif; color:#000; min-width: 1200px; overflow-x: hidden;}
input[type="text"],textarea{-webkit-appearance:none;}
input{_background:#fff;}
textarea{background:#fff;}
select{*background:#fff;}
.clearfix:before,.clearfix:after{content:"";display:table;}
.clearfix:after{clear:both;}
.clearfix{zoom:1;}
.clear{ clear:both;}
.fl{float:left;}
.fr{float:right;}
.bl1 {clear:both; height:1px; overflow:hidden; display:block;}
.bl5 {clear:both; height:5px; overflow:hidden; display:block;}
.bl10 {clear:both; height:10px; overflow:hidden; display:block;}
.bl15 {clear:both; height:15px; overflow:hidden; display:block;}
.bl20 {clear:both; height:20px; overflow:hidden; display:block;}
.bl30 {clear:both; height:30px; overflow:hidden; display:block;}
.bl40 {clear:both; height:40px; overflow:hidden; display:block;}
.bl50 {clear:both; height:50px; overflow:hidden; display:block;}
.tc{text-align:center;}.tl{text-align:left;}.tr{text-align:right;}
.dis{display:block;}.undis{display:none;}
.cl{clear:both;}.fb{font-weight:bold;}.fnb{font-weight:200;margin-left:-1px;}
.hr_1,.hr_10{font-size:1px;line-height:1px;clear:both;}
.hr_1{height:1px;}.hr_10{height:10px;}
input[type="text"]:focus,input[type="password"]:focus,textarea:focus{outline:none;}
.wrap{width:1200px;margin:0 auto;text-align:left;}
.wrap1{ width:1200px;margin:0 auto;text-align:left;}
.color-white, .color-white a{color: #ffffff}


/* 首页start */
.banner{position: relative; overflow: hidden;width: 100% !important;}
.banner a,
.banPic,
.banPic .swiper-slide {
  width: 100% !important;
  height: 550px; 
  cursor: default;
}
.banner li a {
  display: block;
  cursor: pointer;
}
.dot_style{ position: absolute;width: 100%; left: 0; bottom: 15px; text-align: center; z-index: 10;}
.dot_style .swiper-pagination-bullet{ opacity: 1; display: inline-block; width: 24px; height: 24px; margin: 0 5px; background: url(../img/dot.png) no-repeat; font-size: 0;}
.dot_style .swiper-pagination-bullet-active{background: url(../img/dot_on.png) no-repeat;}

.header{ height: 100px; background-color: #fff; position: fixed; z-index: 100; width: 100%;  top:0; border-bottom: #ccc 1px solid;}
.head_bg{ background: url(../img/bg1.jpg); border-bottom: none;}
.logo{ width: 145px; height: 88px; margin-top: 4px; margin-left: 40px;}
.logo img{ width: 145px; height: 88px;}
.nav{ margin-right: 80px;}
.nav li{ float: left;margin-right: 45px; position: relative; }
.nav li>a{ font-size: 16px; color: #000; text-align: center; line-height: 100px;  position: relative; font-weight: bold;}
.nav li.on>a,.nav li:hover>a{ color: #559186;}
.nav li.on>a::before,.nav li:hover>a::before{content: ''; width: 100%; height:2px; background-color: #559186; position: absolute; left: 0; bottom: -12px;}
/* .nav li.on>a::before,.nav li:hover>a::before{ height: 20px;} */
.nav_child{ width: 260px; position: absolute; padding:10px 25px;  background-color:rgba(85,145,134,0.8); left: -100px; top: 100px;  z-index: 20; display: none;}
/* .nav_width{width: 875px; padding-left: 205px; margin: 0 auto; } */
.nav_child a{ min-width: 100px;  color: #fff; font-size: 14px; display: inline-block; margin: 13px 15px 13px 0; position: relative; padding-left: 12px;}
.nav_child a::before{ content: ''; width: 5px; height: 5px; background-color: #fff; border-radius: 50%;  position: absolute; left: 0; top: 8px;}
/* .nav a:hover,.nav a.on{ color: #559186;} */
.searchIcon{ background: url(../img/icon.png) no-repeat; background-position: 0 0; width: 20px; height: 20px; margin-top:39px;}
.search{ position: absolute; z-index: 1; right: -6px; top:31px; width: 0; height: 35px; background-color: #559186; border-radius: 18px; overflow: hidden;}
.text_input{ vertical-align: top; background: none; width:155px; padding: 0 12px;height: 35px;  border: none; font-size: 14px;}
.search button{ width: 20px; height: 20px; margin-top: 7px; margin-right: 10px; background: url(../img/icon.png) no-repeat; background-position: 0 -20px; border: none; }
.search.on{ width: 220px; overflow:initial;}
.search .close{    position: absolute;
  width: 16px;
  right: -21px;
  top: 8px;
  z-index: 1;}
.search_div{ position: relative; margin-right: 40px;}
.line_style{ width: 100%; height: 8px; background-color: #999; font-size: 0;}
.line_style li{ float: left; width: 25%; }
.line_style li.on{ background-color: #559186;}
.ggjy{width:100%;}
.ggjy img{width:100%;height:auto;}
.model_title h1,.model_title span{ position: relative; padding-left: 20px;display: block;}
.model_title h1::before,.model_title span::before{ content: '';  position: absolute; left: 0; top: 8px; width: 12px; height: 12px; background-color: #fff; border: #559186 2px solid; border-radius: 50%;}
.model_title a{ padding-left:40px; position:relative; color: #999;padding-top:5px}
.model_title a::before{content:'';width:30px;height:1px;display:block;background-color:#ccc; position:absolute; left:0; top:60%;}
.model_title a:hover{ color: #559186;}
.model_title a:hover::before{ background-color: #559186;}
.exhibi_img li ,.exhibi_img  .swiper-slide{ position: relative;}
.wrap1 .exhibi_img li ,.wrap1 .exhibi_img .pic,.wrap1 .exhibi_img  .swiper-slide{width: 1200px; height:450px; cursor: pointer; }
.exhibi_img li ,.exhibi_img .pic,.exhibi_img  .swiper-slide{width: 1200px; height:450px; }
.exhibi_img li div,.exhibi_img  .swiper-slide>div{ box-sizing: border-box; padding: 20px; color: #fff; width:525px; height:auto; background-color: rgba(85,145,134,0.8); position: absolute; bottom: 34px; left: 37px;}
.exhibi_img h3{ margin-bottom: 10px;}
.exhibi_desc h2,.exhibi_show li .introduce  h2,.exhibi_img h3,.exhibition h2{overflow: hidden; margin-bottom: 10px;}
.exhibi_img p{overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.exhibi_desc h2 a,.exhibi_show li .introduce  h2 a{ display: block; width: 100%;}
.exhibi_desc h2 a:hover,.exhibi_show li:hover .introduce  h2 a{ color: #fff;}
.exhibi_img p i{background: url(../img/icon.png); display: inline-block; vertical-align: middle; margin-right: 7px;}
.exhibi_img p .icon1{ width: 12px; height: 14px; background-position: -3px -43px; }
.exhibi_img p .icon2{ width: 14px; height: 14px; background-position: -3px -69px; }
.exhibi_img p{margin-bottom:5px;}
.same_btn{ position: relative;}
.same_btn .prev,.same_btn .next{ display: block; width: 26px; height: 50px; position: absolute; top: 50%; margin-top: -25px;}
.same_btn .prev{ background-position: -27px 0; left: -83px;}
.same_btn .next{ background-position: -76px 0; right: -83px;}
.same_btn .prev:hover{background-position: -27px -52px; }
.same_btn .next:hover{background-position: -76px -52px; }
.exhibi_show{ width: 1230px; margin:0px; }
.exhibi_show li{ cursor: pointer; width: 380px; height: 240px; position: relative; float: left; margin:0 30px 30px 0;}
.exhibi_show li img{ width: 380px; height: 240px; display: block;}
.wrap1 .exhibi_show li{width:380px;height:240px;margin-bottom:20px;}
.wrap1 .exhibi_show li img{width: 380px;height:240px;}
.introduce{ opacity: 0; transform: scale(0.6);   display: flex; flex-direction: column;justify-content: center;align-items: center; text-align: center; position: absolute; top: 0; left: 0;  background-color: rgba(85,145,134,0.8); width: 100%; height: 100%; color: #fff;}
.introduce h2{width:80%;padding:0 10%;text-align: center;}
.introduce span{ position: relative; margin-top: 10px; padding-top: 10px; }
.introduce span::before{ content: ''; width: 20px; height: 1px; background-color: #fff; position: absolute; left: 50%; margin-left: -10px;  top: 0;}
.exhibi_show li:hover .introduce{ opacity: 1;transform: scale(1);  }
.width1{ width: 1000px;  position: relative;cursor: pointer; overflow: hidden;}
.wrap1 .width1{margin:0px;}
.width1::after,.same_after li::after,.Artist::after,.same_after .swiper-slide::after{ content: ''; width: 100%; height: 100%;background-color: rgba(85,145,134,0.8); position: absolute; top: -450px; left: 0;}
.width1 img{width: 1000px; height:400px;}
.tech_text{ position: absolute; bottom: -235px; left: 80px; z-index: 10; color: #fff; }
.tech_text h2{ font-size: 30px; line-height: 120%; }
.tech_text p{margin-top: 10px;}
.width1:hover::after,.Artist:hover::after{top: 0; }
.width1:hover .tech_text,.Artist:hover .tech_text{ bottom: 35px; }
.width1Img .swiper-slide{ float: left; width: 300px; height: 320px; margin-right: 44px; position: relative; text-align: center;}
.width1Img .swiper-slide img{width: 300px; height: 320px; display: block;}
.same_after .swiper-slide strong{ padding: 0 20px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; box-sizing: border-box;}
.same_after li:hover::after,.same_after .swiper-slide:hover::after{ top: 0;}
.same_after li:hover strong,.same_after .swiper-slide:hover strong{ position: absolute;  width: 100%; line-height: 400px;  z-index: 10; top: 0; left: 0;}
.Artist {  width: 1200px; height:450px; position: relative; overflow: hidden;}
.Artist .tech_text p{ font-size: 20px; margin-left: -20px;}
.Artist img{ width: 1200px; height: 450px;}
.same_after li,.same_after .swiper-slide{ position: relative; overflow: hidden;}
.Artist_pic{ width: 1240px; margin:0px;}
.Artist_pic li{ width:270px; height:270px; text-align: center; margin:40px 40px 0 0;float: left;}
.Artist_pic li img{ display: block;width:270px; height:270px; }
.Artist_pic span{ opacity: 0; position: absolute; width: 100%; height: 100%; top: 0; left: 0;  display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 10;}
.Artist_pic span i{ font-style: normal; font-size: 20px; margin-top: 6px;}
.Artist_pic li:hover span{ opacity: 1;}
.zx_share{ width: 1255px; margin-left: -53px;}
.zx_share li{ float: left; margin-left: 53px; margin-bottom: 35px;}
.zx_share li img{display: block; width: 100%; }
.wrap1  .zx_share {width: 1033px;margin-left: -33px;}
.wrap1 .zx_share li{width: 225px;height: 350px;margin-left: 33px;}
.footer{ padding-top:25px; position: relative; height: 238px;background: url(../img/bg4.jpg) no-repeat center; width: 100%;}
.foot_logo{ width: 200px; height: 121px; margin-right: 125px;}
.foot_cont1 .txt h3{ color: #666; margin-bottom: 20px;}
.foot_cont1 .txt  p{ line-height: 180%; font-size: 14px; color: #666;}
.foot_cont1  strong{ font-size: 20px; margin-top: 20px;}
a.online{ width: 99px; height: 28px; border: #559186 1px solid; color: #559186; font-size: 14px;margin-top: 18px; text-align: center; line-height: 28px;}
a.online:hover{ background: #559186; color: #fff;}
.foot_cont2{ height: 60px; background-color: #559186; font-size: 14px; position: relative; z-index: 10;}
.foot_cont1 { padding-bottom: 58px; color: #333;}
.foot_cont1 .contact { text-align: right; margin-left: 110px;padding:30px 0 0;}
.foot_cont1 .contact span{ font-size: 24px; color: #666;}
.foot_cont1 .contact p{margin-top: 12px;font-size:24px; font-family: "Arial Black";}
.foot_cont1 p.time{ margin-top: 10px;}
.foot_cont1 p.time i{display: inline-block;  width: 13px; height: 16px;  background-position: -240px -2px; margin-right: 10px; vertical-align: middle;}
.foot_cont1 p.address i{ display: inline-block;width: 15px; height: 14px;background-position: -240px -27px; margin-right: 10px; vertical-align: middle;}
.foot_cont2 a{ color: #fff; line-height: 60px;}
.ewm_img{ width: 108px; height: 108px;}
.footer .foot_bg{position: absolute; right: 0; bottom: 0; width: 805px; height: 315px; z-index: -1;}
.fixTop{
  position: fixed;
  width: 60px;
  left: 50%;
  bottom: 109px;
  margin-left: 605px;
  z-index: 4;display: none; 
}
.return_top{ width: 60px; height: 60px; background-color: #ccc;}
.return_top::after{ content: ''; position: absolute; left: 50%; margin-left: -12px; top: 24px;   width: 0; height: 0; border-left: 12px solid transparent;border-right: 12px solid transparent;border-bottom: 12px solid #fff;}
.miao_nav{ line-height: 28px; font-size: 15px;}
.miao_nav .house{ display: inline-block; width: 12px; height: 14px; vertical-align: middle; position: relative; top: -2px; background-position: -150px -3px;}
.miao_nav a, .miao_nav .split{ padding-left: 10px;}
.miao_nav a::before{ display: none;}
.intro_txt{ padding: 40px;}
.intro_txt img{max-width: 100%;height: auto;}.wrap1 .exhibi_show li
.intro_txt p{line-height: 180%;  font-size: 14px;}
.newlist li{ padding: 40px; margin-bottom: 37px;}
.newlist li .Img{ overflow: hidden; width:412px; height: 260px;}
.newlist li .Img img{width:412px;height: 260px;}
.newlist li .txt{ width:680px;}
.newlist li .txt dt{padding-top: 25px; min-height: 175px;}
.newlist li .txt .p1 a{ font-size: 20px; color: #333; }
.newlist li .txt .p2{margin-top: 20px;}
.newlist li .txt dd{ border-top: #999 1px dotted; padding-top: 30px; position: relative;}
.newlist li .txt dd i,.article_top div i{ font-style: normal; margin-right: 17px;}
.newlist li .txt span.time,.article_top span.time{display: inline-block; width: 14px; height: 14px; background-position: -150px -25px; margin-right: 5px;}
.newlist li .txt span.eye,.article_top span.eye{display: inline-block; width: 19px; height: 14px; background-position: -150px -47px; margin-right: 5px;}
.newlist li .txt dd a{ position: absolute; right: 0; top: 28px; width: 88px; height: 28px; border: #559186 1px solid; display: block; text-align: center; line-height: 28px; color: #559186;}
.newlist li .txt dd a em{ padding-left: 27px; position: relative;}
.newlist li .txt dd a em::before{ content: ''; width: 20px; height: 1px; background: #559186; left: 0; top: 50%; position: absolute;}
.newlist li:hover{ box-shadow: 1px 1px 10px rgba(0,0,0,0.1);}
.newlist li:hover .p1{ color: #559186;}
.newlist li:hover .txt dd a{ background-color: #559186; color: #fff;}
.newlist li:hover .txt dd a em::before{ background: #fff;}
.page{ text-align: center;color: #559186; margin-top: 100px; }
.page a{ display: inline-block;height: 30px;  line-height: 30px;border: #559186 1px solid; color: #559186; width: 30px; margin: 0 5px;}
.page_num{ width: 32px; height: 32px;}
.page .prev,.page .next{  width: 70px;  }
.page a:hover,.page a.on{ background-color: #559186; color: #fff;}
.model_title  .return{ padding-left: 0; color: #75a59c; font-size: 15px;}
.model_title  .return::before{ display: none;}
.model_title  .return img{ margin-right: 5px; vertical-align: middle; position: relative; top: -2px;}
.article_top .tip{ margin-top: 10px;}
.article_top{ padding-bottom: 20px; border-bottom: #999 1px dashed; position: relative; margin-bottom: 25px;}
.share .bdsharebuttonbox{display: inline-block; vertical-align: middle;}
.share{ position: absolute; right: 0; top: -15px;}
.js_txt{ text-align: center;}
.js_txt img{border:none;max-width:100%;}
.js_txt p{ text-align: left;}
.detailpage .a_prev i{width: 11px; height: 16px; display: inline-block; background-position:-169px 0; margin-right: 30px; vertical-align: middle;}
.detailpage a{ height: 48px; border: #ccc 1px solid; text-align: center; line-height: 48px;}
.detailpage .a_prev,.detailpage .a_next{ width: 483px;}
.detailpage .a_return i{width: 12px; height: 11px; display: inline-block; position: relative; top: -2px; background-position:-169px -23px; margin-right: 5px; vertical-align: middle;}
.detailpage .a_return{width: 118px; margin: 0 15px;}
.detailpage .a_next i{width: 11px; height: 16px; display: inline-block; background-position:-190px 0; margin-left: 30px; vertical-align: middle;}
.detailpage {margin-top: 95px;}
.detailpage a:hover{ color: #559186;}
.yearscroll::after{content: '';width: 100%;height: 1px;background-color: #ccc;position: absolute;bottom: 17px;left: 0;}
.yearscroll .swiper-slide{ text-align: center; font-size: 14px;}
.yearscroll .swiper-slide a{padding-bottom: 35px;display: block;position: relative;}
.yearscroll .swiper-slide a::after{content: '';width: 1px;height: 24px;background-color: #333;position: absolute;bottom: 8px;left: 50%;}
.yearscroll .swiper-slide.on a::before{content:'';width: 10px;height: 10px;background-color: #559186;border-radius: 50%;position: absolute;bottom: 0px;left: 50%;margin-left: -5px;z-index: 10;}
.yearscroll .swiper-slide.on a{ color: #559186;}
.yearscroll .swiper-slide.on a::after{ background-color: #559186;}
.button-prev,.button-next{ display: block; width: 10px; height: 20px; position: absolute; top: 26px; z-index: 5; }
.button-prev{background: url(../img/icon.png);background-position:-207px 0; left: 0; }
.button-next{background: url(../img/icon.png);background-position:-225px 0; right: 0; }
.art_box{ padding: 40px;}
.art_box .pic,.art_box .pic img{ width:500px; height:316px; position: relative;}
.art_box .pic::before{ content: ''; width: 48px; height: 48px; background: url(../img/icon2.png) no-repeat; position: absolute; right: 20px; bottom: 15px; z-index: 1;}
.art_box .text{ margin-left:50px;width:570px; }
.art_box .text h1{padding-top:10px;}
.art_box .text p{ line-height: 180%; margin-top:10px; font-size: 14px;}
.art_tab{margin-top: 80px;}
.tab_name{ position: relative; margin-bottom: 45px;}
.tab_name::before{ content: ''; width: 100%; height: 1px; background-color: #559186; bottom: 0; right: 0; position: absolute;}
.tab_name span{position: relative; background-color: #fff; z-index: 2; cursor: pointer; font-size: 20px; color: #559186; text-align: center; display: block; width: 150px; float: left; height: 45px; line-height: 45px; border: #559186 1px solid; border-bottom: none;}
.tab_name span.on{ background-color: #559186; color: #fff;}
.tab_cont p{ line-height: 180%; font-size: 14px;margin-top: 20px;}
.tab_cont img{max-width:100%;height:auto;}
.tab_cont img.fr{ padding-left:40px; width: 400px; height: 400px;}
.art_pic{ margin-top: 80px;}
.art_pic h2{  background-position:0 -115px; width: 130px; height: 35px; text-align: center;}
.art_pic h2 em{padding-top: 20px;}

.worksBox{position: relative; margin-top:50px;}
/*滚动图片*/
.worksDiv{width:1120px;overflow: hidden;}
.worksDiv ul{width:112000px;background-color: #f9f8f8;}
.worksDiv li{height:560px;height:400px;overflow: hidden;float: left;position: relative;background-color: #f1f1f1;}
.worksDiv .typeBox{position: absolute;top: 0px;right: 0;text-align: right;z-index: 2;line-height: 0;}
/*.worksDiv li .exhType{display:block;text-align: center;margin-top: 10px;height: 20px;position: relative;white-space: nowrap;width:auto;font-size: 0;}*/
.worksDiv .exhType .alphaBgBox{position: absolute;width:100%;height:100%;top: 0;left:0;background-color: #27282d;opacity:1;filter: Alpha(opacity=100);}
.worksDiv .exhType .typeTxt{padding: 0 10px;display:inline-block;height:20px;position: relative;top:0px;line-height: 20px;letter-spacing: .5px;color: #ffffff;font-size: 12px;}
.worksDiv .exhType:hover .alphaBgBox{background-color: #50c0d4;opacity: .9;filter: Alpha(opacity=90);}
.worksDiv li a.showBig{width:560px;padding:0px;height:400px;display:table-cell;vertical-align:middle;text-align:center;*display:block;*font-size:125px;*font-family:Arial;overflow:hidden;}
.worksDiv li a.showBig img{vertical-align:middle;width:550px;height:auto;}
.worksDefault:before{display:block;width:45px;height:45px;background:url(https://www.cafamuseum.org/home/pc/imgs/loading.png) no-repeat;content: "";position: absolute;left:50%;margin-left: -22px;top:134px;animation: loading 2s linear infinite;}

.worksBox{position: relative;}
.worksDiv .arrow{position: absolute;top:40%;border-width:38px 41px 38px 0;z-index: 3;display: none;margin-top: -40px;width:0;height:0;border-style: solid;vertical-align: middle;cursor: pointer;
  -webkit-transition:border-color .3s ease;
  -moz-transition: border-color .3s ease;
  -ms-transition: border-color .3s ease;
  -o-transition: border-color .3s ease;
  transition: border-color .3s ease;}
.worksDiv .arrow:before{position: absolute;border-width: 6px 0 6px 10px;display: inline-block;width:0;height:0;border-style: solid;vertical-align: middle;content: "";}
.worksDiv .prev{border-color:  transparent transparent transparent rgba(39,40,45,.8);left:0;border-width:38px 0 38px 41px;}
.worksDiv .prev:before{border-color: transparent #ffffff transparent transparent; position: absolute;left:-26px;top:50%;margin-top: -6px;border-width:6px 10px 6px 0;}
.worksDiv .next{border-color: transparent rgba(39,40,45,.8) transparent transparent;right:0;}
.worksDiv .next:before{border-color: transparent  transparent transparent #ffffff;position: absolute;right:-26px;top:50%;margin-top: -6px;}
.worksDiv .prev:hover{border-color: transparent transparent transparent rgba(80,192,212,.8);}
.worksDiv .next:hover{border-color: transparent rgba(80,192,212,.8) transparent transparent;}
.worksDiv .prev.unClick{border-color:  transparent transparent transparent #cccccc;}
.worksDiv .next.unClick{border-color: transparent #cccccc transparent transparent;}

.worksPage{margin-top: 42px;text-align: center;}
.worksPage .pageDiv{padding:2px;border:1px solid #27282d;}
.worksPage .pageBox{position: relative;}
.worksPage tt{background: url(https://www.cafamuseum.org/home/pc/imgs/scrollArrow.png) no-repeat;width:11px;height:11px;margin-left: -5.5px;left:0;overflow: hidden;position: absolute;top: -17px;}
.worksPage .pageDiv p{background-color: #50c0d4;height:10px;overflow: hidden;}
.worksPage span{font-family: Verdana;color:#000000;font-size: 12px;display:block;text-align:center;padding:3px 0 29px;line-height:normal;}
.worksPage b{color:#50c0d4;}
.exArist{background-color: #fff;padding:0 30px;}
.exArist h3{font-size: 18px;font-weight: normal;color:#27282d;padding:26px 0 27px;}
.exArist dl{width:440px;float: left;padding-right: 20px;padding-bottom: 30px;}
.exArist dt{width:80px;height:80px;overflow: hidden;border-radius: 50%;float: left;}
.exArist dd{padding-left: 100px;}
.exArist dt img{width:80px;height:80px;}
.exArist h4{font:14px/30px normal;color:#27282d;padding:9px 0 3px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.exArist h4 a{color:#27282d;}
.exArist h4 a:hover{color:#50c0d4;}
.exArist p{font-size: 12px;color:#999;}
.exDetailBox .colTit{padding:25px 0 27px;}
.exDetailBox .detailCon .colTit{padding-bottom: 18px;}

.worksDiv li:hover a::after{ content: ''; width: 100%; height: 100%; background-color: rgba(85,145,134,0.3); position: absolute; top: 0; left: 0;}
/* .worksDiv li:hover a::before{content: ''; width: 48px; height: 48px; background: url(../img/icon2.png) no-repeat; position: absolute; left: 50%; top: 50%; margin-left: -24px; margin-top: -24px;} */
/*展览产品大图*/
.imgbody{display: none; position:fixed; z-index:21; left:0; top:0; width:100%;height:100%;z-index: 100;}
/*.imgCont{width: 600px;height: 500px;position: absolute;left: 50%;top: 50%;margin-left: -300px;margin-top: -250px;z-index: 2;}*/
#smallOuter img{max-width: 100%;max-height: 100%;}
.imgCont{width: 600px;height: 500px;position: absolute;left: 50%;top: 50%;margin-left: -300px;margin-top: -250px;z-index: 2;}

#smallOuter{height: 500px;width: 600px;text-align: center;}
.imgCont .picCell {height: 500px;line-height: 500px;overflow: hidden;position: relative;width: 600px;}
.imgCont .circle {-moz-user-select: none;background-color: #000;background-repeat: no-repeat;border: 1px solid #999;border-radius: 100px;box-shadow: 0 0 8px #000;cursor: none;height: 200px;left: 0;opacity: 0;filter:alpha(opacity=0);
  overflow: hidden;position: absolute;top: 0;width: 200px;z-index: 99;}

.imgbody .arrow{position: absolute;top:50%;border-width:38px 41px 38px 0;z-index: 3;margin-top: -40px;width:0;height:0;border-style: solid;vertical-align: middle;cursor: pointer;
  -webkit-transition:border-color .3s ease;
  -moz-transition: border-color .3s ease;
  -ms-transition: border-color .3s ease;
  -o-transition: border-color .3s ease;
  transition: border-color .3s ease;}
.imgbody .arrow:before{position: absolute;border-width: 6px 0 6px 10px;display: inline-block;width:0;height:0;border-style: solid;vertical-align: middle;content: "";}
.imgbody .prev{border-color:  transparent transparent transparent rgba(39,40,45,.8);left:0;border-width:38px 0 38px 41px;}
.imgbody .prev:before{border-color: transparent #ffffff transparent transparent; position: absolute;left:-26px;top:50%;margin-top: -6px;border-width:6px 10px 6px 0;}
.imgbody .next{border-color: transparent rgba(39,40,45,.8) transparent transparent;right:0;}
.imgbody .next:before{border-color: transparent  transparent transparent #ffffff;position: absolute;right:-26px;top:50%;margin-top: -6px;}
.imgbody .prev:hover{border-color: transparent transparent transparent rgba(80,192,212,.8);}
.imgbody .next:hover{border-color: transparent rgba(80,192,212,.8) transparent transparent;}
.imgbody .prev.unClick{border-color:  transparent transparent transparent #cccccc;}
.imgbody .next.unClick{border-color: transparent #cccccc transparent transparent;}
.photoBody{display: none; position:fixed; z-index:21; left:0; top:0; width:100%;height:100%;z-index: 100;}
.bigPic{ position: absolute;width: 100%; left: 0; top: 0; z-index: 10;height:100%;}
.bigBg{ position: absolute;width: 100%;background-color: #000;opacity: .9;filter:alpha(opacity=90); z-index: 1; display: block;height:100%;}
.bigClose{ display: block;background-image: url(../img/close.png);background-repeat: no-repeat; background-position: center 16px; width: 50px;height: 50px;position: absolute;right: 0px;top: -50px; z-index: 2;cursor: pointer; left: 50%;margin-left: -25px; }
.imgCont{width: 600px;height: 500px;position: absolute;left: 50%;top: 50%;margin-left: -300px;margin-top: -250px;z-index: 2;}
/*#photoSmallOuter img{position: absolute;}*/
#photoSmallOuter img{max-width: 100%;max-height: 100%;}
#photoSmallOuter{height: 500px;width: 600px;text-align: center;}
.imgCont .picCell {height: 500px;line-height: 500px;overflow: hidden;position: relative;width: 600px;}
.imgCont .circle {-moz-user-select: none;background-color: #000;background-repeat: no-repeat;border: 1px solid #999;border-radius: 100px;box-shadow: 0 0 8px #000;cursor: none;height: 200px;left: 0;opacity: 0;filter:alpha(opacity=0);
  overflow: hidden;position: absolute;top: 0;width: 200px;z-index: 99;}
.photoBody .arrow{position: absolute;top:50%;border-width:38px 41px 38px 0;z-index: 3;margin-top: -40px;width:0;height:0;border-style: solid;vertical-align: middle;cursor: pointer;
  -webkit-transition:border-color .3s ease;
  -moz-transition: border-color .3s ease;
  -ms-transition: border-color .3s ease;
  -o-transition: border-color .3s ease;
  transition: border-color .3s ease;}
.photoBody .arrow:before{position: absolute;border-width: 6px 0 6px 10px;display: inline-block;width:0;height:0;border-style: solid;vertical-align: middle;content: "";}
.photoBody .prev{border-color:  transparent transparent transparent rgba(39,40,45,.8);left:0;border-width:38px 0 38px 41px;}
.photoBody .prev:before{border-color: transparent #ffffff transparent transparent; position: absolute;left:-26px;top:50%;margin-top: -6px;border-width:6px 10px 6px 0;}
.photoBody .next{border-color: transparent rgba(39,40,45,.8) transparent transparent;right:0;}
.photoBody .next:before{border-color: transparent  transparent transparent #ffffff;position: absolute;right:-26px;top:50%;margin-top: -6px;}
.photoBody .prev:hover{border-color: transparent transparent transparent rgba(80,192,212,.8);}
.photoBody .next:hover{border-color: transparent rgba(80,192,212,.8) transparent transparent;}
.photoBody .prev.unClick{border-color:  transparent transparent transparent #cccccc;}
.photoBody .next.unClick{border-color: transparent #cccccc transparent transparent;}
.art_pic .intro_txt{ padding: 40px 0;}
.art_pic .intro_txt img{max-width:100%;height:auto;}
.art_pic .swiper-slide img{ width: 1120px; height: 620px; display: block;}
.art_show .arrow{ width: 50px; height: 50px; border-radius: 50%; background:rgba(0,0,0,0.5); position: absolute; top: 50%; margin-top: -25px; z-index: 10;}
.art_show .prev{ left: 15px;}
.art_show .next{ right: 15px;}
.art_show .arrow i{ width: 12px; height: 17px; display: block; margin: 17px auto;}
.art_show .prev i{ background-position: -149px -66px;}
.art_show .next i{ background-position: -174px -66px;}
.art_show .arrow:hover{ background-color: #559186;}
.zx_share li a{position: relative;}
.zx_share li:hover a::after{ content: ''; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-color: rgba(85,145,134,0.8); z-index: 1;}
/* .zx_share li:hover a::before{ content: ''; position: absolute;  z-index: 2; top: 50%; left: 50%; margin-left: -25px; margin-top: -25px;  width: 50px; height: 50px; background: url(../img/icon.png) no-repeat; background-position: -205px -56px;} */
.zt_nav a::before{ width: 14px; height: 14px; background: url(../img/icon.png); background-position:-260px -25px;top:15px;}
.zt_nav a{ padding-left: 25px; margin-right: 20px;}
.zt_nav a.on{ color: #559186;}
.zt_nav a.on::before{ background-position:-260px -3px;}
.showroom{ background: url(../img/bg3.jpg) no-repeat; width: 1200px; height: 450px; padding: 40px;}
.showroom h2{ color: #559186; font-size: 20px;}
.show_txt{ width: 570px;}
.txt_scroll{ height: 285px; overflow: auto; padding-right: 40px;}
.txt_scroll p{ font-size: 14px; line-height: 180%; color: #000; margin-bottom: 15px;}
.txt_scroll::-webkit-scrollbar {
  width:6px;
  height:320px; background-color: #ccc;
}
.txt_scroll::-webkit-scrollbar-track {
  width: 6px;
  height: 37px;
  background-color:#0d1b20;
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius:2em;
}
.txt_scroll::-webkit-scrollbar-thumb {
  background-color:#ccc;
  background-clip:padding-box;
  min-height:28px;
 width: 6px;
}
.show_pic,.show_pic img{ width: 505px; height: 326px;}
.school_news>div{ padding:40px 40px 1px;width:520px; background:#fff; position: relative;    min-height:390px;}
.school_news>div:first-child::after{ content: ''; width: 1px; height: 360px; background-color: #ccc; position: absolute; right: 0; top: 40px;}

.school_news a{ margin-bottom: 40px; position: relative;font-size:16px;}
.school_news a:hover{color: #559186;}
.school_news a i{ font-style: normal; color: #999; font-size:14px; position: absolute; right: 0;}
.school_news a i em{ display: inline-block; width: 14px; height: 14px; background-position: -150px -25px; margin-right: 8px; vertical-align: middle;}
.school_news a.img{width:100%;margin:0;}
.school_news a.img img{width:100%;height:auto;}

.booklist{ width: 1240px; margin-left: -40px;}
.booklist li{ position: relative;width: 370px;height: 480px; margin-left: 40px; float: left; margin-bottom: 40px; }
.booklist li img{ width: 370px; height: 480px; display: block;}
.booklist li>div{ opacity: 0; display: flex; flex-direction: column; justify-content: center; align-content: center; text-align: center; background: rgba(85,145,134,0.8); position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.booklist li>div em{ background-position: -141px -104px; width: 49px; height: 49px; margin:0 auto 10px; display: none;}
.booklist li>div .date{ margin-top: 5px;}
.booklist li:hover>div{ opacity: 1;}
.black_bg{width: 100%; height: 100%; position: fixed; top:0;left: 0; background: rgba(0,0,0,0.9); z-index: 100; display: none;}
.post_scroll{ width: 1200px; position: absolute; left: 50%; margin-left: -600px; top: 200px; z-index: 101;display: none;}
.post_scroll img{ display: block; margin: 0 auto; max-width: 1120px;}
.post_scroll  p{margin-top: 20px; text-align: center;}
.post_scroll .prev,.post_scroll .next{ position: absolute; width:25px; height: 50px; top: 50%; margin-top: -25px; z-index: 10;}
.post_scroll .prev{ background-position: -27px 0; left: 0;}
.post_scroll .next{ background-position: -76px 0; right: 0;}
.post_scroll .prev:hover{background-position: -27px -52px;}
.post_scroll .next:hover{background-position: -76px -52px;}
.post_scroll .swiper-pagination{ bottom: 50px; color: #fff; width: 45px; height: 26px; line-height: 26px;  background-color: rgba(0,0,0,0.5); left: 50%; margin-left: -22.5px;}


.card,.card__picture{ position: relative; width: 370px; overflow: hidden; }
.card__picture>img{ width: 370px; display: block;}
.card_txt{ opacity: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-color: rgba(85,145,134,0.8);}
.card_txt div .img{ margin-right: 8px; vertical-align: middle;width: 14px;height: 16px;display: inline-block;}
.card_txt div .icon-3{background: url('../img/icon3.png') no-repeat;}
.card_txt div .icon-4{background: url('../img/icon4.png') no-repeat;}
.card_txt div{ margin-top: 10px;}
.card_txt div em{ margin: 0 5px;}
.card-infos{ width: 100%; height: 60px;  position: relative; background: #fff; line-height: 60px; text-align: center;}
.card-infos p{ position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
.card-infos span{ width: 20px; height: 20px; position: absolute;  left: 50%; top: 50%; margin-left: -210px;  margin-top: -10px;background-position: -279px -2px;}
.card:hover .card-infos p{ left: 370px;}
.card:hover .card-infos span{ margin-left: -10px;}
.card:hover  .card_txt{ opacity: 1;}

.sjs-default{
  margin: 0 auto;
  transition: height .2s ease-out, opacity .2s ease-out .2s;
}
.flatty{ margin-right: 30px; margin-bottom: 40px; width: 370px;}
/* [data-sjsel]{
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  transition: transform .2s ease-out;
} */
.work_type span{ cursor: pointer; display: inline-block; width: 134px; height: 43px; line-height: 43px; font-size: 20px; color: #559186; text-align: center; border-right: #559186 1px solid;} 
.works_pop{ position: fixed; top: 100px; z-index: 200; width: 1200px;  left: 50%; margin-left: -600px;}
.work_type{ border:#559186 1px solid; font-size: 0;width: 405px; margin: 0 auto; border-right: none;}
.work_type span.on{ background-color: #559186; color: #fff;}
.works_area .post_scroll{ display: block; margin: 50px auto 0; position: static; min-height: 400px;}
.post_scroll .title{ text-align: center; margin-bottom: 20px;}
.post_scroll .title em{ margin: 0 10px;}
.works_text{ padding: 40px;}
#close{ position: absolute; right: 100px; top: 50px;}
#close:hover{ transform: rotate(180deg);}
.install .li{ position: relative; margin-bottom: 50px;}
.install .li img{ max-width: 780px; }
.install .li p,.team_form>div p{ position: absolute; padding-bottom: 15px;  top: 50%; left: 50%; transform: translate(-50%,-50%);-moz-transform: translate(-50%,-50%);-webkit-transform: translate(-50%,-50%);}
.install .li p::before,.team_form>div p::before{ content: ''; width: 20px; height: 2px; background-color: #fff; position: absolute; bottom: 0; left: 50%; margin-left: -10px;}
.team_form>div img{ display: block; width: 560px; height: 320px;}
.team_form{ padding: 40px;}
.form_div{ width: 530px;}
.input_div input{ width: 238px; border: #ccc 1px solid; height: 43px; text-indent: 20px; font-size: 14px;}
.input_div textarea{ height: 80px;border: #ccc 1px solid; width: 100%; text-indent: 20px; padding-top: 10px;font-size: 14px;}
.submit_btn{ width: 135px; height: 45px; border:1px solid #559186; background: none; color: #559186; }
.input_div select{border: #ccc 1px solid; height: 43px; width: 100%;color: #999;text-indent: 20px;font-size: 14px;}
.submit_btn:hover{ background: #559186; color: #fff;}

/* 公共start */
.margin_right40{ margin-right: 40px;}
.bg_559186{ background-color: #559186;}
.borderbox{ box-sizing: border-box;}
.icon{background: url(../img/icon.png);}
._block{ display: block;}
.text_input::-webkit-input-placeholder {
  color: #fff;
}
.text_input::-moz-input-placeholder {   
  color: #fff;
}
.text_input::-ms-input-placeholder {
  color: #fff;
}
.transtion3,.picNum li,.width1::after,.Artist::after,.nav li>a{
  transition: all 0.3s cubic-bezier(0, 0.31, 0.22, 0.43);
   -webkit-transition: all 0.3s cubic-bezier(0, 0.31, 0.22, 0.43);
   -moz-transition: all 0.3s cubic-bezier(0, 0.31, 0.22, 0.43);
   -o-transition: all 0.3s cubic-bezier(0, 0.31, 0.22, 0.43);
   -ms-transition: all 0.3s cubic-bezier(0, 0.31, 0.22, 0.43); 
}
.transtion6,.tech_text,.nav li>a::before{
  transition: all 0.6s cubic-bezier(0, 0.31, 0.22, 0.43);
   -webkit-transition: all 0.6s cubic-bezier(0, 0.31, 0.22, 0.43);
   -moz-transition: all 0.6s cubic-bezier(0, 0.31, 0.22, 0.43);
   -o-transition: all 0.6s cubic-bezier(0, 0.31, 0.22, 0.43);
   -ms-transition: all 0.6s cubic-bezier(0, 0.31, 0.22, 0.43); 
}
.bg{ background: url(../img/bg1.jpg); width: 100%; padding-bottom:10px;}
.padding_top_105{ padding-top: 105px;}
.padding_top_60{ padding-top: 60px;}
.padding_top_20{ padding-top:20px;}
.margin_top_25{ margin-top: 25px;}
.margin_top_35{ margin-top: 35px; }
.margin_top_40{ margin-top: 40px;}
.margin_top_70{ margin-top: 70px;}
.margin_bottom_25{ margin-bottom: 25px;}
.margin_bottom_40{ margin-bottom: 40px;}
.margin_bottom_60{ margin-bottom: 60px;}
.color_999{ color: #999;}
.color_559186{ color: #559186;}
.font24{font-size: 24px;line-height: 120%;}
.font16{font-size: 16px;}
.font18{font-size: 18px;}
.font20{font-size: 20px;}
.font14{font-size: 14px;}
.margin_top_120{ margin-top: 100px;}
.bold_normal{ font-weight: normal;}
.color_fff{ color: #fff;}
.bg_fff{ background-color: #fff;}
.relative_div{ position: relative;}
.hide{ display: none;}
.margin-top0{ margin-top: 0;}


@media screen and (max-width:1440px){
  .nav {
    margin-right: 50px;
}
  .nav li{ margin-right: 30px;}
}

.nodata{padding: 100px 0; background: #fff; color: #559186; font-size: 18px; text-align: center;}