.vipNav,.match-list,.match-list .info .box,.contribute-box { display: -webkit-flex; display: flex;}

.vip-works-list .item a { display: -webkit-box;-webkit-box-orient: vertical; overflow: hidden;}


.vipNav { margin: 40px auto;}
.vipNav .item { flex: 1; position: relative; text-align: center;}
.vipNav .item a { display: block; height: 59px; line-height: 59px;  font-size: 18px; background-color: #eee;}
.vipNav .item span { margin-left:  10px; }
.vipNav .item:hover > a,.vipNav .item.on > a,.vipNav .item .vipSub a:hover { border-top: solid 2px #cc0005; background-color: #fff;}
.vipNav .item .vipSub {z-index: 99; display: none; position: absolute; top: 59px; left: 0; width: 100%;}
.vipNav .item:hover .vipSub { display: block;}
.vipNav .item.on span,.vipNav .item.on > a {color: #cc0005}

.vip-box { margin-bottom: 50px;}

.vip-ty-form {z-index: 98; margin: 0 auto; width: 510px;}
.vip-ty-form .layui-form-label { width: 120px; text-align: right;}
.vip-ty-form .layui-input-inline { width: 55%;}
.vip-ty-form .layui-input-inline2 { float: right; width: 30%; cursor: pointer;}
.vip-ty-form .layui-input-inline2 span { display: block; height: 38px; line-height: 38px; text-align: center; color: #fff; background-color: #aaa;}
.vip-ty-form .layui-input-inline2:hover span {background-color: #cc0005;}
.vip-ty-form .layui-btn.sumbit {background-color: #cc0005}

.vip-ty-form .layui-input-inline2 #sendmsgbtn { display: block; height: 38px; line-height: 38px; text-align: center; color: #fff; background-color: #aaa; width:100%}
.vip-ty-form .layui-input-inline2 #sendmsgbtn:hover {background-color: #cc0005;}
.match-list { margin-bottom: 30px;}
.match-list:nth-of-type(2n) { flex-direction: row-reverse}
.match-list .img {flex: 0 0 680px}
.match-list .info { flex: 1; padding: 0 30px; font-size: 16px; background-color: #f5f5f5}
.match-list .info .box span { flex: 0 0 90px;}
.match-list .info .box .text { flex: 1;}
.match-list .info h2 { margin: 20px 0; font-size: 24px; font-weight: bold;}
.match-list .info .box .text p { line-height: 28px;}
.match-list .info .box:last-of-type { margin-top: 20px;}
.match-list .info .box .text a { display: block;margin: 20px auto; width: 160px; height: 44px; line-height: 44px; text-align: center; color: #fff;background-color: #cc0005; border-radius: 5px; cursor: pointer;}
.match-list .info .box .text a:hover  {background-color: #ea3a3f}

.vip-works-list { display: grid; grid-template-columns:  420px 420px 420px; grid-gap: 50px; }
.vip-works-list .item .img { height: 260px; overflow: hidden;}
.vip-works-list .item .img img { transition: all .3s;}
.vip-works-list .item a { display: block; font-size: 16px; -webkit-line-clamp:1; color: #cc0005; line-height:30px}
.vip-works-list .item a.h2 { line-height: 58px; color: #333; font-size:18px}
.vip-works-list .item:hover .img img { transform: scale(1.05)}
/*.vip-works-list .item:hover a { text-decoration: underline;}*/
.vip-works-list .item a:hover {color:#000000}
.works .swiper-wrapper { margin: 0 auto; height: 730px;}
.works .item { width: 100%; max-height: 620px;}
.works img { position: absolute; top: 0; right: 0; bottom: 0;left: 0;  margin: auto;}
.works h2 { text-align: center; margin-top: 650px;}
.workds-modify { display: block; margin: 20px auto; width: 320px; height: 54px; line-height: 54px; text-align: center;font-size: 18px; color: #fff; background-color: #cc0005;}
.workds-modify:hover { color: #fff;background-color: #ea3a3f}

.contribute-box .img { flex: 0 0 620px;}
.upload-img {
    padding: 5% 2%
}
.upload-img-text{ padding:2% 0; font-size:16px; font-weight:bold}
.contribute-upload { flex: 1; margin-left: 50px;}
.contribute-upload h1 { font-size: 24px; font-weight: bold;}
.contribute-upload .layui-form-item { margin: 30px auto;}
.contribute-upload .layui-form-label { padding: 0; width: 120px; line-height: 38px; font-size: 18px; padding-right:10px}
.contribute-upload .tips { margin-top: 30px; color: #666; font-size: 16px;}

.btnlist{width:100%; margin-top:10px}
.btnlist li{width:70px; height:30px; line-height:30px; text-align:center; cursor:pointer; float:left; margin-right:10px; background:#cc0005; color:#FFFFFF;border-radius:5px}
.btnlist li a.editworks{color:#FFFFFF; font-size:14px}
.btnlist li a.editworks:hover{color:#FFFFFF; font-size:14px; }


.bj { width:31%; border-bottom:#454545 dashed 1px;  margin-right:3%; position:relative; margin-bottom:15px}
    .bj:nth-child(3) {
        margin-right: 0;
    }
.bj img {width:100%; height:150px}

.zcl3 { float:left; border-left:#454545 dotted 1px; margin-left:30px;}
.zcl3 span { width:110px; display:inline-block; text-align:right; font-size:14px;}
.syinp2 { width:110px; height:25px; border:#dedede solid 1px;  display:inline-block; margin:5px 0px; padding:0 5px}
.frspan { display:block; line-height:20px; position:relative; top:0px;float:left}
.zcl3  textarea { display:block; float:left; width:325px;height:75px; border:#dedede solid 1px;}

.gb { width:15px; height:15px; background:url(../images/24.jpg); position:relative; left:-0px; top:-0px; cursor:pointer; position:absolute}
.zcl4 { width:90%; margin:0 auto; height:200px; padding:20px 0px; font-size:14px; line-height:35px; margin-bottom:30px}
.zcl4 a{margin-top:10px}
#testListAction,#SaveEdite{width:113px; margin-top:15px}

/*²¹³ä*/