@charset "utf-8";
*{ margin: 0; padding: 0;box-sizing: border-box;}
html,body{ background: #e0dfdd; height: 100%;color: #000;
 font-size: 14px; line-height: 1.8em; font-family: -apple-system,"黑体",Segoe UI,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Helvetica Neue,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;}
a{ text-decoration: none;color: #000;}
ul,li{ list-style: none;}
img{ border: 0;vertical-align: middle;}
.lf{ float: left;}
.rf{ float: right;}
.clear{ clear: both;}
.DX{ text-transform: uppercase;}
.tC{ text-align: center;}
.maincont{ width: 1200px; margin: 0 auto;}

/* 首页 */

.flexCont{display: flex; align-items: center;}
.tTitle{ font-size: 18px}
.tTitle span:first-child{ font-size: 16px;}
.search span{display: block; width: 20px; height: 18px;background: url(../wjimages/search.png) no-repeat;background-size: 100% 100%;}
.maintop{ justify-content: space-between; padding: 8px 3%;}
.tTitle{ margin-right: 10px}
.tTitle span{padding-right: 5px;}
.es span{ padding: 0 5px; position: relative;font-size: 18px;}
.es span:first-child::after{ content: "";display: block; width: 1px; height: 24px;background: #000;position: absolute; right: 0;top: -3px;}
.meun li{ position: relative; padding: 0 15px; font-size:16px}
.meun li::after{ content: "";display: block; width: 1px; height: 26px;background: #000;position: absolute; right: 0;top: 4px;}
.meun li:last-child::after{ display: none}
.meun li a{ padding: 7px 5px;display: inline-block; position: relative;}
.meun li a::after{ content: ""; height: 3px;background: #000; width: 0;position: absolute;bottom: 0; left: 0;transition: .5s;}
.meun li a:hover::after,.meun li a.thisclss::after{ width: 100%;}
.meun li a.down{ background: url(../wjimages/down.png) right center no-repeat;padding-right: 25px;}
.phone_meun,.phone_open{ display: none;}
.banner{ padding: 63px 0; width: 1200px; margin: 0 auto;}
.banner .swiper-slide img{ border-radius: 10px; width: 100%;}
.banner .swiper-button-next,.banner .swiper-button-prev{ width: 20px; height: 11px;bottom: 30px;top: auto;}
.banner .swiper-button-next{ background: url(../wjimages/right.png) no-repeat;background-size: 100% 100%; right: 17px;}
.banner .swiper-button-prev{ background: url(../wjimages/left.png) no-repeat;background-size: 100% 100%; left: auto; right: 73px;}
.banner .swiper-button-next::after,.banner .swiper-button-prev::after{ font-size: 0;}

/* 个人简介 */

.resuneCont{padding: 60px 19% 60px 23%;align-items: flex-start;}
.headInfo{ padding-left: 60px;}
.infoCont{ margin-bottom: 40px;}
.infoCont h2.ts{ font-size: 18px; text-shadow: 1px 1px 1px #fff; margin-bottom: 20px;width: 90px;text-align: justify; text-align-last:justify}
.infoCont li{display: flex;}
.infoCont li > p{ width: 130px; text-shadow: 1px 1px 1px #fff;}
.infoCont li .iRight{ flex: 1;color: #737374;}
.infoCont li .iRight p{ margin-bottom: 12px;}
.exinfo{ margin-bottom: 30px;}
.exinfo strong{ font-size: 20px;}
.exinfo span{ color: #737373;}

/* 作品 */

.worksCont{ width: 1200px; margin: 0 auto; padding: 80px 0;}
.worksCont ul{ justify-content: space-between;flex-wrap: wrap;}
.worksCont li{ width: 582px; height: 338px;margin-bottom: 35px; position: relative;overflow: hidden; border-radius: 10px;}
.worksCont li a{display: block; width: 100%; height: 100%;}
.worksCont li a p{ position: absolute;top: 0; left: 0; width: 100%; height: 100%; background-position: center;transition: 0.5s;width: 100%;height: 100%;}
.worksCont li a:hover p{ transform: scale(1.1);}
.worksCont li span{ z-index: 1; position: absolute;bottom: 18px; right: 28px; letter-spacing:2px; color: #fff;font-size: 18px;text-shadow: 1px 1px 2px rgba(0,0,0,.6);}

/* 作品详情 */

.mainTopAbs{ position: absolute; left: 0; right: 0;color: #fff;}
.mainTopAbs .es span:first-child::after{ background: #fff;}
.mainTopAbs .meun a,.mainTopAbs .es a{ color: #fff;}
.mainTopAbs .search .icon{ background: url(../wjimages/search2.png) no-repeat;background-size: 100% 100%;}
.mainTopAbs .meun li::after{ background: #fff;}
.mainTopAbs .meun li a::after{ background: #fff;}
.mainTopAbs .meun li a.down{ background: url(../wjimages/down2.png) right center no-repeat;background-size: 16px 10px;}
.workBanner img{ width: 100%;}
.worksBody{ width: 620px; margin: 0 auto; padding: 50px 0;}
.wTitle{ margin-bottom: 15px;}
.wTitle h1{ font-size: 22px;letter-spacing: 2px;color: #020001;}
.wTime{ color: #808080;margin-bottom: 46px;}
.wBody{ color: #424242;text-align: justify;font-size: 14px;}
.wBody p{ margin-bottom: 18px;}
.worksList{ padding-bottom:100px}
.worksList ul{ flex-wrap: wrap; margin: 0 -20px;}
.worksList li{ padding: 20px; width: 310px; overflow: hidden;}
.worksList li img{ border-radius: 10px; width: 100%; height: 270px;transition: 0.5s; cursor: pointer;}
.worksList li:hover img{ opacity: 0.8;}
.worksList li .imgInfo{ padding-top: 20px; font-size: 16px; height: 96px;}
.worksList li .imgInfo p:last-child{ font-size:14px}

/* 展览 */

.bigcont{ position: relative;}
.exhCont{ padding: 60px 0 60px 30px;}
.exhList{ margin-bottom: 43px;}
.exhList .thub{ width: 547px;}
.exhList dl{ flex: 1;text-align: center;}
.exhList dt{ font-size: 18px;font-weight: bold;letter-spacing: 2px;margin-bottom: 10px;}
.exhList dd.f13{ font-size: 13px;}
.exhList dd{ width: 70%; margin: 0 auto;}
.headTitle{ position: absolute;left: 52px;top: 20px;}
.headTitle::before{ content:""; position: absolute;top: 0;width: 40px; height: 8px;background: #000;}
.headTitle h2{ padding-top: 19px;display: inline-block;padding-right: 30px;position: relative;}
.headTitle h2::after{ content: "";position: absolute;right: 0; bottom: 7px; display: block; width: 16px; height: 10px;background: url(../wjimages/down.png) no-repeat;}
.exhDetail{ padding-top: 100px; position: relative;}
.noAfer.headTitle h2::after{ display: none;}
.bTitle{ font-size: 20px; font-weight:bold;letter-spacing: 2px;}
.bTime{ font-size:13px; padding: 15px 0;}
.heBody{color: #464646; padding: 30px 0;}
.heBody img{ max-width: 100%;}
.heBody div,.heBody p{ margin-bottom: 20px;}

/* 图片展示 */

.bigModal{ position: fixed;top: 0; left: 0; right: 0; bottom: 0; display: none;background: #a29c9e;}
.showModal{display: flex;animation: option .5s forwards; opacity: 0;}
.bigModal .close{ width: 60px; height: 60px;position: absolute;top: 10px;left: 10px;background: url(../wjimages/close.png) no-repeat; z-index: 10; cursor: pointer;}
.bigModal .mySwiper2{ flex: 1;}
.bigModal .mySwiper{ width: 270px; height: 100vh; padding: 10px 20px;background: url(../wjimages/rightBg.png) no-repeat;background-size: 100% 100%;}
.bigModal .mySwiper .swiper-slide{ padding: 5px; height: 220px;}
.bigModal .mySwiper .swiper-slide img{ width: 100%; height: 200px; border-radius: 10px;box-shadow: 2px 3px 5px rgba(62,60,60,.5);}
.bigModal .mySwiper2 .swiper-button-next,.bigModal .mySwiper2 .swiper-button-prev{ color: #fff;}
.bigModal .mySwiper2 .swiper-slide{display: flex;align-items: flex-end;}
.bigModal .mySwiper2 .imgInfo{ color: #000; padding: 0 60px 110px 60px; position: relative; z-index: 100; max-width: 400px;}
.bigModal .mySwiper2 .imgInfo dt{ font-size: 22px;margin-bottom: 10px;}
.bigModal .mySwiper2 .imgInfo dd{ font-size: 18px;}
.bigModal .mySwiper2 .swiper-zoom-container{ display: flex;align-items: center;flex: 1; height: 100vh;justify-content: center; position: relative; z-index: 1;}
.bigModal .mySwiper2 .swiper-zoom-container img{ max-width: 100%;max-height: 100%;}
.xuhua{ position: absolute; z-index: 0; width: 100%; height: 100%; filter: blur(20px);}
@keyframes option{
	0%{ opacity: 0;}
	100%{ opacity: 1;}
}


@media screen and (max-width: 1200px) {
	.flexCont{ flex-wrap: wrap;}
	.hidden{ display: none;}
	.banner{ width: 100%;}
	.banner .swiper-slide img{ border-radius: 0;}
	.phone_open{ position: fixed; z-index: 100; right: 10px; top: 10px; width: 25px;display: block;}
	.phone_open span{ display: block; height: 2px; width: 100%; background: #000; margin-bottom: 6px;}
	.mainTopAbs .phone_open span{ background: #fff;}
	.es span{ font-size: 16px;}
	.phone_meun{ position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 101; background: rgba(255,255,255,.9); display: none;}
	.phone_meun li{ text-align: right;}
	.phone_meun ul{ padding-top: 80px; padding-right: 15px; font-size: 18px;text-transform: uppercase;}
	.phone_meun li a{ display: inline-block; padding: 7px 0;}
	.meunClose{ width: 30px; height: 30px; background: url("../wjimages/meunClose.png") no-repeat; position: absolute; right: 10px; top: 10px;}
	.resuneCont{ padding: 15px;}
	.headImg, .headImg img{ width: 100%;}
	.headInfo{ padding: 20px 0 0 0;}
	.worksCont{ width: 100%; padding: 15px;}
	.worksCont li{ width: 100%; height: 200px; margin-bottom: 20px;}
	.maincont{ padding: 15px; width: 100%;}
	.worksBody{ width: 100%; padding: 20px 0;}
	.wTime{ margin-bottom: 20px;}
	.worksList{ padding-bottom: 0;}
	.worksList ul{ margin: 0 -10px;}
	.worksList li{ width: 50%; padding: 10px;}
	.worksList li img{height: auto;}
	.worksList li .imgInfo{ padding-top: 10px;}
	.bigModal .mySwiper2 .swiper-slide{ flex-wrap: wrap; align-items: center;}
	.bigModal .mySwiper{ display: none;}
	.bigModal .mySwiper2 .imgInfo{ position: absolute; top: 0; left: 0; padding: 20px; text-align: center; width: 100%;}
	.bigModal .mySwiper2 .img{ width: 100%; flex: none; height: auto;}
	.bigModal .close{ background-size: 30px 30px;}
	.exhList .thub{ width: 100%;}
	.exhList{ margin-bottom: 20px;}
	.exhList dl{ padding-top: 15px;}
	.headTitle{ position: relative; left: 15px; margin-bottom: 20px;width: 80%;}
	.exhDetail{ padding-top: 20px;}
	.exhDetail .headTitle{ display: none;}
	.heBody{ padding-top: 0;}
}