@charset "utf-8";
/*css reset*/
html { font-family: "Helvetica Neue", Helvetica, STHeiTi, Arial, sans-serif;height:100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; min-height: 100%; -ms-touch-action: none; }
body { margin: 0; font-size: 1.4rem; line-height: 1.5; color: #000;height:100%; background-color: #fff; min-height: 100%;-webkit-overflow-scrolling: touch;}

article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary { display: block; }
audio, canvas, progress, video { display: inline-block; vertical-align: baseline; }
audio:not([controls]) { display: none; height: 0; }
template { display: none; }
svg:not(:root) { overflow: hidden; }

a { background: transparent; text-decoration: none; -webkit-tap-highlight-color: transparent; color: #000; }
a:active { outline: none; color:#000;}
abbr[title] { border-bottom: 1px dotted; }
img { border: none; vertical-align: middle;max-width: 100%;font-size: .3rem; }
em,strong{font-style: normal;}
button, input, optgroup, select, textarea { color: inherit; font: inherit; margin: 0; }
button { overflow: visible; }
button, select { text-transform: none; }
button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; cursor: pointer; }
button[disabled], html input[disabled] { cursor: default; }
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
input { line-height: normal;}
input[type="password"]{ -webkit-text-security: disc; }
/* 在部分android 机型中的输入框可能会出现怪异的多余的浮出表单，经过观察与测试发现只有input:password类型的输入框存在，那么我们只要使用input:text类型的输入框并通过样式-webkit-text-security: disc; 隐藏输入密码从而解决。*/
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; }
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { height: auto; }
input[type="search"] { -webkit-appearance: none; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; border-radius: 0;}
textarea { overflow: auto; resize: vertical; }
optgroup { font-weight: bold; }

table { border-collapse: collapse; border-spacing: 0; }
td, th { padding: 0; }
h1, h2, h3, h4, h5, h6{font-size: 100%;font-weight: normal;}
ul, ol, li, dl, dd,h1, h2, h3, h4, h5, h6, p, figure, form, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
input::-moz-placeholder, textarea::-moz-placeholder { color: #999; font-size: .7rem; }
input:-ms-input-placeholder, textarea:-ms-input-placeholder { color: #999; font-size: .7rem;  }
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: #999;font-size: .7rem;}

*{ -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-tap-highlight-color: transparent;}


@font-face {
	font-family: 'icon';
	src:url('../fonts/icomoon.eot?ewquxw');
	src:url('../fonts/icomoon.eot?ewquxw#iefix') format('embedded-opentype'),
		url('../fonts/icomoon.ttf?ewquxw') format('truetype'),
		url('../fonts/icomoon.woff?ewquxw') format('woff'),
		url('../fonts/icomoon.svg?ewquxw#icomoon') format('svg');
	font-weight: normal;
	font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
    /* use !important to prevent issues with browser extensions that change fonts */
	font-family: 'icon' !important;
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;

	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
/*clear*/
.fix:after,.fix:before{content: "";display: table;}
.fix:after{clear: both;}
.fix{*zoom:1;}
.weixinImg{position: absolute;z-index: -1;opacity: 0;pointer-events: none;}
.ue_custom_image,.ue_custom_image_title{text-align: center;}
/*start*/
html{font-size: 20px;}
body{font-size:0.65rem;color:#404040;font-family:"微软雅黑"; -webkit-backface-visibility:hidden;position:relative;overflow-x:hidden;font-weight: 300;}
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
	html,body{height: 812px;}
}
a{color:#404040;}
p {  font-weight: 300; }
.oh{overflow:hidden;}
.noBor{border:none!important;}
.pt0{padding-top:0px!important; }
.body{overflow: hidden;position: relative;min-height: 100%; padding-top: 2.2rem; padding-bottom: 4rem; background:#ffffff; z-index:4;-moz-box-shadow:0 0 1.5rem #333;               /* For Firefox3.6+ */
	-webkit-box-shadow:0 0 1.5rem #333;            /* For Chrome5+, Safari5+ */
	box-shadow:0 0 1.5rem #333;           /* For Latest Opera */}

.bar{ position: fixed; top:45px; left: 0; width: 100%; height: 2.2rem;  z-index: 100; background: #515C6F;color: #ffffff;}
.bar h1{ font-size: 0.7rem; padding:0 3.05rem; color: #ffffff; text-align: center; line-height: 2.2rem;}
.bar .topBtn{ float: right;}
.bar .icon{display: inline-block; vertical-align: top; height: 100%; line-height:2.2rem; font-size:0.7rem;color: #ffffff;}

.topMenu{bottom: 0; display: table; width: 100%;     height: 2rem; padding: 0; table-layout: fixed; border-top: 0; border-bottom: 0; -webkit-touch-callout: none;}
.topMenu li{display: table-cell; overflow: hidden; width: 1%; text-align: center; vertical-align: middle; white-space: nowrap; text-overflow: ellipsis; color: #333;}
.topMenu li a{color: #9e9e9e;font-size: 0.7rem;}
.topMenu li.current{background: #454d5d;}
.topMenu li.current a{color: #fff}
.about{position:relative;width:100%;}
.about .bar{position:absolute;top:0;left:0;}
.about .body{background: #e7e7e7;}
.index{width:100%;height:100%;background-size:cover;position:relative;}
.indexMask{position:absolute;width:100%;height:100%;left:0;top:0;background: rgba(0,0,0,.3)}
.footer{line-height:2.85rem;font-size: 12px;text-align:center; color:#3e3e3e;width: 100%;position: absolute;bottom: 0;left: 0;background-color: #eee;}


@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
	.artistIndex{bottom:4rem;}
	.index .icon{bottom:6.3rem;}
	.count{bottom:4.5rem;}
}
.index .ms-title{position: absolute; top: 26%; left: 18px; width: 100%; transform: rotate(16deg);}
.index .ms-title h1{color: #fff; font-size: .8rem; text-shadow:0 .05rem .125rem  rgba(0,0,0,.55) ;line-height: 1.2;}
.index .ms-title h2{color: #fff; font-size: .4rem; text-shadow:0 .05rem .125rem  rgba(0,0,0,.55) ;line-height: 1.2;}
.index {background-position: center;}

.swiper2_info{text-align: center; margin-top: 40px;}
.swiper2_info .portrait{width: 100px; height: 100px; border-radius: 50%; margin: auto; margin-bottom: 10px;}
.swiper2_info h2{font-size:20px;}
.swiper2_info h3{font-size: 12px; color: #666; font-weight: normal;}
.artistinfo{width: 80%; margin: auto; text-align: left; color: #666; margin-top: 18px; font-size: 15px;}
.artistinfo a{text-decoration: none;}
.artistinfo p{margin-bottom: 5px;font-size: 14px;color: #666;}
.swiper2_bg{height: 100%; width: 100%; object-fit: cover;opacity: 0.1;}

.ms-artworks{margin: 20px;}
.ms-artworks ul{}
.ms-artworks ul li {padding: 15px 15px 10px 15px; background-color: #fff;margin-bottom: 20px; }
.ms-artworks ul li a{}
.ms-artworks ul li img{}
.ms-artworks ul li span{margin-top: 10px; display: block;}



.pt80{padding-top:80px!important}
.pt100{padding-top:100px!important}
.pb80{padding-bottom:80px!important}
.pb30{padding-bottom:30px!important}



.mui-content { background-color: #fff;}

#array { width: 1.25rem; line-height: 1.25rem; position: absolute; bottom: 1.125rem; left: 50%; margin-left: -0.5625rem; -webkit-animation: slideDown 2s ease infinite;}


@-webkit-keyframes fadeOut{
    0%{ -webkit-transform: translate3d(0,0,0) scale(1) ; opacity: 1;}
    100%{  -webkit-transform: translate3d(0,-2rem,0) scale(1.5); opacity:0}
}
@-webkit-keyframes slideTop{
    0%{ opacity:1; }
    100% { opacity: 0; -webkit-transform: translate3d(0,-2rem,0)}
}

@-webkit-keyframes slideDown{
    0%{ opacity:1; -webkit-transform: translate3d(0,0,0)}
    50%{opacity: .2; -webkit-transform: translate3d(0,.5rem,0)}
    100% {opacity:1;-webkit-transform: translate3d(0,0,0) }
}
@-webkit-keyframes rotate {
    0% {-webkit-transform: rotateZ(0deg)}
    100% { -webkit-transform: rotateZ(360deg)}
}
@-webkit-keyframes  tap{
    0%{background-position: 100% 0 ;}
    10%{background-position: 0 0 ;}
    15%{background-position: 100% 0 ;}
    50%{background-position: 100% 0 ;}
    60%{background-position: 0 0 ;}
    75%{background-position: 100% 0 ;}
    100%{background-position: 100% 0 ;}
}
@-webkit-keyframes  tapLeft{
    0%,15%{-webkit-transform:translateX(0)}
    30%{-webkit-transform:translateX(-4rem)}
    75%{-webkit-transform:translateX(-4rem)}
    90%{-webkit-transform:translateX(0)}
    100%{-webkit-transform:translateX(0)}
}
@-webkit-keyframes  tapRight{
    0%,15%{-webkit-transform:translateX(0)}
    30%{-webkit-transform:translateX(4rem)}
    75%{-webkit-transform:translateX(4rem)}
    90%{-webkit-transform:translateX(0)}
    100%{-webkit-transform:translateX(0)}
}
.ms-toplogo{line-height: 44px; font-size: 20px; height: 44px; display: inline-block;color: #515C6F;    font-weight: bold;}
.ms-toplogo img{height: 30px;}
.content { min-height: 10rem; overflow: hidden;  width: 90%; margin: auto; background-color: #fff;    margin-top: 20px;}
.about .line { border-bottom: 1px #e7e7e7 dashed; padding-bottom: 10px; margin-bottom: 10px;}
.about h1 {line-height: 25px; text-align: justify;font-size: 18px; color: #333; font-weight: bold;border-left: 5px #515C6F solid; padding-left: 8px;}
.about em.pinyin { font-style: normal; color: #999; display: block; font-size: .2rem; }
.about em.time { font-style: normal; color: #999; border-bottom: 1px #e7e7e7 dashed; padding: 10px 0; display: block; font-size: .2rem; margin-bottom: 0.2rem; }
.about em.time p{font-size: 14px;display: inline-block;padding: 3px;}
.ms-chronology{margin-top:30px;display: block;}
.ms-chronology article section { padding: 0 0 17px; position: relative;line-height: 28px;}
.ms-chronology article section:before { content: ""; width: 5px; top: 17px; bottom: -17px; left: 20%; background: #e6e6e6; position: absolute; }
.ms-chronology article section:last-child:before { display: none; }
.ms-chronology article section aside{color: #3a3a38; margin-left: 25%; padding-bottom: 15px;}
.ms-chronology article section aside .things{text-align: justify;}
.ms-chronology .point-time {content: ""; position: absolute; width: 13px; height: 13px; top: 3px; left: 20%;  background-color: #515C6F; margin-left: -4px; border-radius: 50%; box-shadow: 0 0 0 5px #fff;}
.ms-chronology article section time { width: 15%; display: block; position: absolute; }
.ms-chronology article section time>span { text-align: center;display: none; }
.ms-chronology article section aside { color: #3a3a38; margin-left: 25%; padding-bottom: 15px; }
.ms-chronology article section:first-child  time>span{display: block; background-color: #515C6F; color: #fff;}

.list-content{padding: 20px;border-bottom: 1px #e7e7e7 dashed;}
.list-content:last-child{border:none;}
.list-content .works_title{  margin-bottom: 10px;font-size: 18px; font-weight: bold;border-left: 5px #515C6F solid; padding-left: 8px;}
.works_list {height: 260px;border-top: 1px solid #eee;padding-top: 10px;}
.works_list img{ }

.imore:before,.back:before{content:"";clear:both;}
.common_news{width: 100%; height: auto; overflow: hidden; margin: 0 auto; border-top: 1px #e7e7e7 dashed; margin-top: 12px;}
.news1,.news1 a,.news2,.news2 a{width:100%;height:auto;overflow:hidden;font:0.2rem/0.691rem "microsoft yahei";display:block;}
.news1,.news2{margin: 10px auto; padding: 10px 0; border-bottom: 1px #e7e7e7 dashed;}
#contentArea li:last-child { border: 0!important;}
.news1 a span:nth-child(1),.news2 a span:nth-child(1){display: block; width: 27%; float: left;height: 18vw;}
.news1 a span:nth-child(2),.news2 a span:nth-child(2){margin-left: 10px;display: inline-block; width: 69%; float: left; color: #666;}
.news1 a span:nth-child(2) p{line-height: 27px; font-size: 14px; text-align: justify;}
.news1 a span:nth-child(2) p:nth-child(1){line-height: 24px; height: 47px; color: #666; display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; text-overflow: ellipsis; -webkit-line-clamp: 2;}
.news1 a span:nth-child(2) p:nth-child(1) em{display: inline-block; font-style: normal; padding: 1px 4px; background-color: #332; color: #fff; font-size: .15rem; line-height: 18px;margin-right: 3px;}
.news1 a span:nth-child(2) p:nth-child(2){text-align: left;color: #999;}
.news1 a span:nth-child(2) p:nth-child(2) em{display: inline-block; float: right; font-style: normal; padding: 1px 5px; background-color: #332; color: #fff; font-size: .15rem; line-height: 18px;}
.news1 a span:nth-child(1) img{width: 100%; height: 100%; object-fit: cover;}
.news2 div{width:100%;font:0.18rem/0.3rem "microsoft yahei";color:#666;max-height:0.9rem;overflow:hidden;}
.news3{width:96%;margin:2% auto;height:auto;overflow:hidden;}
.news3>a{display:block;float:left;width:33%;height:auto;overflow:hidden}
.news1>a>img{display:block;width:100%}
.news3>h1{display:block;float:left;width:64%;margin-left:3%;overflow:hidden}
.news3>h1>a{display:block;width:100%;height:0.3rem;text-overflow: ellipsis;overflow:hidden;white-space: nowrap;font:0.2rem/0.3rem "microsoft yahei";color:#333;}
.news3>div{float:left;width:64%;margin-left:3%;overflow:hidden;font:0.18rem/0.2rem "microsoft yahei";max-height: 0.8rem;color:#999;margin-top:2%}
.news4{width:50%;float:left;height:180px;overflow:hidden;margin:2% auto;}
.news4 a{display:block;width:90%;margin:0 auto;}
.news4 a img{display:block;width:100%;height:150px;}
.news4 a span{display:block;width:100%;text-align:center;font:0.2rem/0.3rem "microsoft yahei";color:#666;text-overflow: ellipsis;overflow:hidden;white-space: nowrap;margin-top:5%}
.nav_s{border-left: 5px #515C6F solid; padding-left: 8px;font-size: 0.8rem; color: #333; font-weight: bold;}
footer{line-height: 2.85rem; font-size: 12px; text-align: center; color: #3e3e3e; width: 100%; position: fixed; bottom: 0; left: 0; background-color: #fafafa;z-index: 999;}
.picContent{margin-top: 10px; display: block;position: relative;}
.picContent p{text-align: justify; margin: 10px 0; line-height: 28px; font-size: 14px; color: #666;}
.upimg a.next {width: 50%;color: #333;float:right}
.upimg a.next img{width: 30%; float: right;}
.upimg a.pre {width: 50%; color: #333;float:left}
.upimg a.pre img{width: 30%; float: left;}
.upimg .fanurl{margin: 10px 0; display: block; overflow: hidden;position: absolute; top: 50%;opacity:0.8}
.upimg .tip { color: #332; text-align: center; display: block; letter-spacing: 3px; margin-bottom: 3px; }
.arc-body{margin-top: 15px;}
.ms-works-attr{margin-top: 15px;}
.ms-works-attr p{border-bottom: 1px dotted #ccc; padding-bottom: 7px; margin-bottom: 7px;}
.ms-works-attr p strong{width: 50px; display: inline-block; color: #fff; background-color: #515C6F; text-align: center;margin-right: 8px;}