/* 精品案例页面 */
.inside{ display: flex; flex-direction: column; position: relative;}
.inside .insidePic{ display: flex; flex-direction: column;}
.inside .insidePic img{ display: block; width: 100%; height: 400px; object-fit: cover;}
.inside .insideTent{ display: flex; flex-direction: column; position: absolute; top: 0; left: 0; right: 0; bottom: 0; align-items: center; justify-content: center; z-index: 10;}
.inside .insideTent h2{ font-size: 40px; letter-spacing: 3px; color: #fff;}
.inside .insideTent p{ font-size: 34px; letter-spacing: 3px; color: #fff; opacity: 0.7; text-transform: uppercase;}

.center{ display: flex; flex-direction: column; position: relative; padding: 40px 0;}
.center .inner1440{ width: 1440px; margin: 0 auto; }
.sort{ display: flex; flex-direction: column; border: 1px solid #eee;}
.sort .sortList{ display: -webkit-box; display: -webkit-flex; display: -ms-flexbox;-js-display: flex; display: flex; border-top: 1px dashed #e5e5e5; line-height: 20px;}
.sort .sortList:nth-child(1){ border-top: none;}
.sort .sortList .sortListLeft{ width: 130px; font-size: 15px; padding: 20px 0; border-right: 1px solid #E5E5E5; display: flex; flex-direction: row; align-items: center; justify-content: center; background: #f5f5f5;}
.sort .sortList .sortListRight{-webkit-box-flex:1;-webkit-flex:1; -ms-flex:1; flex:1 1; display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; padding: 0 10px;}
.sort .sortList .sortListRight a{ display: block; padding: 0 8px; margin: 0 10px; color: #555;}
.sort .sortList .sortListRight a.on,.sort .sortList .sortListRight a:hover{ background: #B81C22; color: #fff; border-radius: 3px;}

.screen{ display: flex; flex-direction: row; justify-content: space-between; background: #f8f8f8; padding: 17px 30px; margin-top: 40px;}
.screen .screenLeft{ display: flex; flex-direction: row;}
.screen .screenLeft .screenLeftAnniu{ display: flex; flex-direction: row;}
.screen .screenLeft .screenLeftAnniu dl{ display: flex; margin-right: 20px; flex-direction: row; background: #fff; border: 1px solid #dcdcdc; height: 34px; padding: 0 15px;  align-items: center; cursor: pointer;}
.screen .screenLeft .screenLeftAnniu dl dt{ color: #666; padding-right: 8px;}
.screen .screenLeft .screenLeftAnniu dl dd{ width: 9px; height: 12px; display: block; background: url(../images/screenleftanniu.png) -24px center no-repeat;}
.screen .screenLeft .screenLeftAnniu dl.on{ border-color: #B81C22;}
.screen .screenLeft .screenLeftAnniu dl.on dt{ color: #B81C22;}
.screen .screenLeft .screenLeftAnniu dl.on dd{ background-position: 0 0;}
.screen .screenLeft .screenLeftSou{ position: relative; width: 380px; height: 36px; background: #fff; overflow: hidden;}
.screen .screenLeft .screenLeftSou .text{ position: absolute; left: 0; top: 0; right: 0; bottom: 0; text-indent: 10px; width: 100%; border: 1px solid #DCDCDC; height: 34px; line-height: 34px;}
.screen .screenLeft .screenLeftSou .sub{ position: absolute; right: 0; top: 0; bottom: 0; background: #B81C22; color: #fff; width: 70px; cursor: pointer;}
.screen .screenRight{ color: #666; line-height: 36px; height: 36px;}
.screen .screenRight .num{ font-size: 26px; color: #B81C22; padding: 0 5px;}

.anli{ display: flex; flex-direction: column;}
.anli ol{ display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between;}
.anli ol li{ width: 32%; display: flex; flex-direction: column; position: relative; background: #fff; margin-top: 30px; transition: all 300ms;}
.anli ol li .anliUp{ display: flex; flex-direction: row; position: relative;}
.anli ol li .anliUp .anliUpPic{ display: flex; flex-direction: row; position: relative; overflow: hidden;}
.anli ol li .anliUp .anliUpPic img{ display: block; width: 100%; -webkit-transition:all 0.3s linear; -moz-transition:all 0.3s linear; -o-transition:all 0.3s linear; transition:all 0.3s linear;}
.anli ol li .anliUp .anliUpRen{ position: absolute; left: 50%; height: 80px; width: 80px; border-radius: 50%; overflow: hidden; margin-left: -40px; bottom: -40px; z-index: 10; box-shadow: 0 0 10px 0 rgba(0,0,0,0.1);}
/*.anli ol li .anliUp .anliUpRen .anliUpRenImg{ display: flex; flex-direction: row;}*/
.anli ol li .anliUp .anliUpRen .anliUpRenImg img{ display: block; width: 100%;}
.anli ol li .anliUp .anliUpRen .anliUpRenText{ position: absolute; left: 0; bottom: 0; font-size: 12px; background: rgba(0,0,0,0.7); right: 0; text-align: center; color: #fff; line-height: 24px; z-index: 10;}
.anli ol li .anliDown{ padding: 60px 20px 20px; display: block; flex-direction: column; overflow: hidden; border: 1px solid #eee; justify-content: center; align-items: center;}
.anli ol li .anliDown .anliDownTit{ font-size: 20px; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.anli ol li .anliDown .anliDownFen{ padding: 25px 0; display: flex; flex-direction: row; color: #999; justify-content: space-around; align-items: center; line-height: 20px;}
.anli ol li .anliDown .anliDownFen figure{ display: flex; flex-direction: row; }
.anli ol li .anliDown .anliDownFen figure span{ color: #999;}
.anli ol li .anliDown .anliDownFen figure sup{ color: #B81C22;}
.anli ol li .anliDown .anliDownButton{ display: flex; flex-direction: row; justify-content: space-around;}
.anli ol li .anliDown .anliDownButton span{ display: block;}
.anli ol li .anliDown .anliDownButton span a{ display: block; line-height: 28px; padding: 0 15px; border: 1px solid #eee; border-radius:15px;}
.anli ol li .anliUp .anliUpPic:before{ content: ""; position: absolute; width: 200px; height: 100%; top: 0; left: -150px; z-index: 10;
	overflow: hidden;
	background: -moz-linear-gradient(left, rgba(255, 255, 255, 0)0, rgba(255, 255, 255, .2)50%, rgba(255, 255, 255, 0)100%);
	background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(50%, rgba(255, 255, 255, .2)), color-stop(100%, rgba(255, 255, 255, 0)));
	background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0)0, rgba(255, 255, 255, .2)50%, rgba(255, 255, 255, 0)100%);
	background: -o-linear-gradient(left, rgba(255, 255, 255, 0)0, rgba(255, 255, 255, .2)50%, rgba(255, 255, 255, 0)100%);
	-webkit-transform: skewX(-25deg);
	-moz-transform: skewX(-25deg);}           
.anli ol li:hover .anliUp .anliUpPic:before{ left: 150%; transition: left 1s ease 0s;}
.anli ol li:hover .anliUp .anliUpPic img{ -webkit-transform:scale(1.06); -moz-transform:scale(1.06); -ms-transform:scale(1.06); -o-transform:scale(1.06); transform:scale(1.06);}
.anli ol li:hover .anliDown .anliDownTit a{ color: #B81C22;}
.anli ol li .anliDown .anliDownButton span a:hover{ border-color: #B81C22; background: #B81C22; color: #fff;}
.anli ol li:hover{ box-shadow: 0 0 10px 0 rgba(0,0,0,0.2);}

.look{ display: flex; flex-direction: row; justify-content: center; margin-top: 40px;}
.look a{ display: block; width: 320px; height: 70px; position: relative; transition: all 300ms;}
.look a:before{ content: ''; position: absolute; width: 308px; height: 58px; border: 1px solid #B81C22; transition: all 300ms; left: 0; top: 0;}
.look a:after{ content: ''; position: absolute; width: 308px; height: 58px; border: 1px solid #B81C22; transition: all 300ms; right: 0; bottom: 0;}
.look a span{ display: block; line-height: 60px; font-size: 20px; margin: 5px; text-align: center; color: #B81C22; transition: all 300ms;}
.look a:hover:before{ left: 5px; top: 5px;}
.look a:hover:after{ right: 5px; bottom: 5px;}
.look a:hover span{ background: #B81C22; color: #fff;}


/* 精品案例详情 */
.zhong{ background: #f5f5f5; display: flex; flex-direction: column;}
.blue{ display: flex; flex-direction: row; justify-content: space-between; background: #fff; padding: 20px 0;}
.blue .inner{ display: flex; flex-direction: row; justify-content: space-between; align-items: center;}
.blue .inner .blueLeft{ width: 50%; display: flex; flex-direction: column; line-height: 50px;}
.blue .inner .blueLeft h2{ font-size: 30px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.blue .inner .blueLeft figure{ color: #666;}
.blue .inner .blueRight{ width: 420px; display: flex; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox;-js-display: flex;}
.blue .inner .blueRight .blueRightImg{ display: flex; flex-direction: row; width: 100px; height: 100px; overflow: hidden;}
.blue .inner .blueRight .blueRightImg img{ display: block; width: 100%;}
.blue .inner .blueRight .blueRightCont{-webkit-box-flex:1;-webkit-flex:1; -ms-flex:1; flex:1 1; overflow: hidden; padding-left: 20px;}
.blue .inner .blueRight .blueRightCont .blueRightContText{ line-height: 30px; display: flex; flex-direction: row; justify-content: space-between;}
.blue .inner .blueRight .blueRightCont .blueRightContText h2{ font-size: 24px;}
.blue .inner .blueRight .blueRightCont .blueRightContText a{ display: block; height: 28px; line-height: 28px; border: 1px solid #B81C22; color: #B81C22; transition: all 300ms; border-radius: 15px; padding: 0 20px;}
.blue .inner .blueRight .blueRightCont .blueRightContText a:hover{ background: #B81C22; color: #fff;}
.blue .inner .blueRight .blueRightCont .blueRightContMent{ color: #666; line-height: 20px; margin-top: 10px;}
.blue .inner .blueRight .blueRightCont .blueRightContMent div{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}


.frame{ display: flex; flex-direction: row; overflow: hidden; padding: 25px 0;}
.frame .inner{ display: flex; flex-direction: row; justify-content: space-between;}
.trim{ width:100%; padding: 30px; position: relative; background: #fff; display: flex; flex-direction: column;}
.trim .trimName{ display: flex; flex-direction: row; justify-content: space-between; position: relative;line-height: 36px;}
.trim .trimName h2{ font-size: 22px;}
.trim .trimName .howmuch{ display: flex; flex-direction: row; position: absolute; top: -30px; right: -30px; background: #B81C22; padding: 14px 20px; line-height: 22px;}
.trim .trimName .howmuch span{ display: block; width: 24px; height: 22px; background: url(../images/trimname.png) -80px center no-repeat;}
.trim .trimName .howmuch sup{ color: #fff; font-size: 16px; margin-left: 8px;}
.trim .trimName .howmuch:active{ background: #E62129;}
.trim .trimTable{ display: flex; flex-direction: column; padding: 30px 0;}
.trim .trimTable ol{ display: flex; flex-direction: row; flex-wrap: wrap; border-left: 1px solid #eee; border-top: 1px solid #eee;}
.trim .trimTable ol li{ width:33.3%; border-right: 1px solid #eee; border-bottom: 1px solid #eee; line-height: 2; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 20px 0;}
.trim .trimTable ol li span{ font-size: 18px;}
.trim .trimTable ol li sup{ color: #888;}
.trim .trimName .also{ display: flex; flex-direction: row; align-items: center; border: 1px solid #B81C22; color: #B81C22; line-height: 34px; border-radius: 17px; padding: 0 30px; transition: all 300ms;}
.trim .trimName .also span{ display: block; width: 18px; height: 22px; background: url(../images/trimname.png) -6px center no-repeat; transition: all 300ms;}
.trim .trimName .also sup{ margin-left: 8px; transition: all 300ms;}
.trim .trimName .also:active{ background: #B81C22; color: #fff;}
.trim .trimName .also:active span{ background-position: -37px center;}
.trim .trimDetail{ padding: 30px 0; display: flex; flex-direction: column; font-size: 15px; line-height: 2.2;}
.trim .trimDetail img{ display: block; width: 100%; margin-top: 20px;}
.trim .giveup{ display: flex; flex-direction: row; justify-content: center;}
.trim .giveup a{ display: flex; flex-direction: column; width: 130px; border-radius: 35px; height: 70px; justify-content: center; align-items: center; border: 1px solid #D3D3D3;}
.trim .giveup a span{ display: block; width: 24px; height: 22px; background: url(../images/giveup.png) 2px center no-repeat;}
.trim .giveup a sup{ font-family: arial; font-size: 16px; padding-top: 6px;}
.trim .giveup a:active{ background: #B81C22; color: #fff; border-color: #B81C22;}
.trim .giveup a:active span{ background-position: -27px center;}
.trim .trimSolo{ display: flex; flex-direction: row; justify-content: space-between; margin-top: 30px;}
.trim .trimSolo a{ display: block; text-align: center; border-radius: 3px; line-height: 50px; font-size: 16px; border: 1px solid #eee; width: 44%; transition: all 300ms;}
.trim .trimSolo a:hover{ background: #B81C22; border-color: #B81C22; color: #fff;}

.china{ display: flex; flex-direction: column; width: 360px; position: relative; z-index: 101;}
.fitup{ padding: 20px; background: #fff; width:100%;}
.fitup .fitupTit{ display: flex; flex-direction: row; justify-content: center; align-items: center; border: 2px solid #aaa; border-radius: 10px; height: 86px; font-size: 28px;}
.fitup .fitupTit span{ color: #B81C22;}
.fitup .fitupSuan{ display: flex; flex-direction: column; padding: 20px; border: 2px solid #aaa; border-radius: 10px; margin-top: 20px;}
.fitup .fitupSuan .fitupSuanText{ text-align:justify; text-align-last:justify;}
.fitup .fitupSuan .fitupSuanJiqi{ font-family: 'IMPACT'; font-size: 36px; display: flex; flex-direction: row; padding-right: 25px; justify-content: flex-end; align-items: center; background: url(../images/fitupsuanjiqi.jpg) no-repeat; background-size: 100% 100%; height: 70px; margin: 10px 0 20px;}
.fitup .fitupSuan .fitupSuanFei{ border: 1px solid #eee; border-radius: 4px; padding: 5px 0; line-height: 20px; display: flex; flex-wrap: wrap;}
.fitup .fitupSuan .fitupSuanFei figure{ color: #555; width: 42%; padding: 0 4%;}
.fitup .fitupSuan .fitupSuanShuru{ display: flex; align-items: center; flex-direction: row; border-radius: 4px; position: relative; margin-top: 20px; background: #f5f5f5;}
.fitup .fitupSuan .fitupSuanShuru .text{ width: 100%; text-indent: 10px; height: 40px; line-height: 40px; background: none;}
.fitup .fitupSuan .fitupSuanShuru .sub{ height: 50px; line-height: 50px; background: #B81C22; color: #fff; width: 100%; border-radius: 4px; font-size: 22px; cursor: pointer;}
.fitup .fitupSuan .fitupSuanShuru .sub:active{ background: #E62129;}

.like{ padding: 20px; background: #fff; display: flex; flex-direction: column; margin-top: 20px;}
.like .likeTit{ display: flex; flex-direction: row; justify-content: space-between; border-bottom: 1px solid #eee; padding-bottom: 10px; line-height: 30px;}
.like .likeTit h2{ font-size: 28px;}
.like .likeTit a{ color: #B81C22;}
.like .likeCase{ display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between;}
.like .likeCase a{ display: block; width: 100px; margin-top: 10px; display: flex; flex-direction: row; }
.like .likeCase a img{ display: block; width: 100%; height: 100px; object-fit: cover; transition: all 300ms;}
.like .likeCase a img:hover{ -webkit-transform:scale(1.06); -moz-transform:scale(1.06); -ms-transform:scale(1.06); -o-transform:scale(1.06); transform:scale(1.06);}
.reckon_fixed_top{ position:fixed; top:100px;}
.reckon_fixed_bottom{ position: absolute; bottom: 0;}

.related{ display: flex; flex-direction: column; background: #fff; padding: 0 0 60px;}
.related .inner{ display: flex; flex-direction: column; position: relative;}
.related .inner .relatedTitle{ display: flex; flex-direction: row; justify-content: space-between; height: 90px; border-bottom: 1px solid #EEE; align-items: center;}
.related .inner .relatedTitle h2{ position: relative; padding-left: 15px; line-height: 22px; font-size: 22px;}
.related .inner .relatedTitle h2 span{ color: #aaa; font-family: arial; text-transform: uppercase; padding-left: 10px; font-size: 14px;}
.related .inner .relatedTitle h2:before{ content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: #B81C22;}
.related .relatedList{ display: flex; flex-direction: column;}
.related .relatedList .relatedListUl{ display: flex; flex-direction: row; position: absolute; top: 0; right: 0; z-index: 10;}
.related .relatedList .relatedListUl li{ position: relative; display: flex; flex-direction: row; height: 90px; align-items: center;}
.related .relatedList .relatedListUl li:nth-child(2){ margin: 0 80px;}
.related .relatedList .relatedListUl li a{ color: #555;}
.related .relatedList .relatedListUl li:before{ content: ''; left: 50%; right: 50%; width: 0; height: 1px; position: absolute; bottom: 0; transition: all 300ms; background: #B81C22;}
.related .relatedList .relatedListUl li.on:before{ width: 100%; left: 0; right: 0;}
.related .relatedList .relatedListUl li.on a{ color: #B81C22;}
.related .relatedList .relatedListOne ol{ display: none;}
.related .relatedList .relatedListOne ol.on{ display: flex; flex-direction: row; justify-content: space-between; flex-wrap: wrap;}
.related .relatedList .relatedListOne ol li{ width:400px; box-shadow: 0 0 10px 0 rgba(0,0,0,0.1); position: relative; background: #fff; margin-top: 20px; padding-bottom: 80px;}
.related .relatedList .relatedListOne ol li .relatedListOneCeng{ display: flex; flex-direction: row; position: relative;}
.related .relatedList .relatedListOne ol li .relatedListOneCeng .relatedListOnePic{ display: flex; flex-direction: row;}
.related .relatedList .relatedListOne ol li .relatedListOneCeng .relatedListOnePic img{ display: block; width: 100%;}
.related .relatedList .relatedListOne ol li .relatedListOneCeng .relatedListOneRen{ position: absolute; right: 15px; z-index: 10; bottom: -45px; transition: all 300ms;}
.related .relatedList .relatedListOne ol li .relatedListOneCeng .relatedListOneRen a{ display: block; width: 80px; height: 80px; overflow: hidden; border-radius: 50%; border: 5px solid #fff; box-shadow: 0 0 5px 0 rgba(0,0,0,0.1);}
.related .relatedList .relatedListOne ol li .relatedListOneCeng .relatedListOneRen a img{ display: block; width: 100%;}
.related .relatedList .relatedListOne ol li .relatedListOneTent{ padding: 15px; display: flex; flex-direction: column; height: 50px; position: absolute; bottom: 0; overflow:hidden; z-index: 1; left: 0; right: 0; transition: all 300ms; background: #fff;}
.related .relatedList .relatedListOne ol li .relatedListOneTent .relatedListOneTentWord{ display: flex; flex-direction: column; padding-right: 120px; line-height: 25px;}
.related .relatedList .relatedListOne ol li .relatedListOneTent .relatedListOneTentWord h2 a{ overflow: hidden; font-size: 16px; text-overflow: ellipsis; white-space: nowrap; display: block;}
.related .relatedList .relatedListOne ol li .relatedListOneTent .relatedListOneTentWord figure{ padding-top: 6px; color: #888; display: flex; flex-direction: row; align-items: center;}
.related .relatedList .relatedListOne ol li .relatedListOneTent .relatedListOneTentWord figure b{ display: block; padding: 0 12px; font-size: 12px;}
.related .relatedList .relatedListOne ol li .relatedListOneTent .relatedListOneTentText{ display: flex; flex-direction: column; transition: all 300ms;}
.related .relatedList .relatedListOne ol li .relatedListOneTent .relatedListOneTentText h2,
.related .relatedList .relatedListOne ol li .relatedListOneTent .relatedListOneTentText p{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.related .relatedList .relatedListOne ol li .relatedListOneTent .relatedListOneTentText h2{ margin-top: 15px;}
.related .relatedList .relatedListOne ol li .relatedListOneTent .relatedListOneTentText h2 span{ padding-left: 10px; color: #888;}
.related .relatedList .relatedListOne ol li:hover .relatedListOneCeng .relatedListOneRen{ bottom: 15px;}
.related .relatedList .relatedListOne ol li:hover .relatedListOneTent{ height: 110px;}
.related .relatedList .relatedListOne ol li:hover .relatedListOneTent .relatedListOneTentWord h2 a{ color: #B81C22;}

.alltoo{position:fixed;top:0 !important;left:0 !important; right: 0 !important; bottom: 0!important; display:none;z-index:1000; background:rgba(0,0,0,0.5);}
.alltoo .layer{ position: absolute; width: 420px; left: 50%; margin-left: -210px; top: 50%; margin-top: -230px; background: #fff; box-shadow: 0 0 20px 0 rgba(0,0,0,0.3);}
.alltoo .layer .close{position:absolute;right: 30px; top: 20px; display: flex; flex-direction: column; font-size: 24px;}
.alltoo .layer .kuang{ display: flex; flex-direction: column; padding: 30px;}
.alltoo .layer .kuang .ming{ font-size: 22px; width: 100%; line-height: 30px;}
.alltoo .layer .kuang .kuangPic{ display: flex; flex-direction: column; margin-top: 30px;}
.alltoo .layer .kuang .alform{ display: flex; flex-direction: column;}
.alltoo .layer .kuang .alform .layui{  border-radius: 3px; padding: 0 10px; margin-top: 20px; background: #f5f5f5;}
.alltoo .layer .kuang .alform .layui .text{ width: 100%; height: 50px; line-height: 50px; background: none;}
.alltoo .layer .kuang .tijiao{ width: 100%; overflow: hidden; margin-top:20px;}
.alltoo .layer .kuang .tijiao .sub{ width: 100%; background: #B81C22; border-radius: 4px; color: #fff; height:50px; line-height: 50px; font-size: 18px; cursor: pointer;}


/* 设计师样式 */
.person{ display: flex; flex-direction: column; background: #fff;}
.person .personSheji{ display: flex; flex-direction: row; border-bottom: 1px solid #eee; line-height: 30px; padding: 20px 0;}
.person .personSheji .personShejiLeft{ width: 90px; display: flex; flex-direction: column;}
.person .personSheji .personShejiRight{-webkit-box-flex:1;-webkit-flex:1; -ms-flex:1; flex:1 1; display: flex; flex-direction: row; flex-wrap: wrap; align-items: center;}
.person .personSheji .personShejiRight a{ display: block; padding: 0 8px; margin: 0 10px; color: #555;}
.person .personSheji .personShejiRight a.on,.person .personSheji .personShejiRight a:hover{ background: #B81C22; color: #fff; border-radius: 3px;}
.person .readd{ padding: 25px 0; background: none; margin-top: 0;}

.human{ display: flex; flex-direction: column;}
.human .inner{ display: flex; flex-wrap: wrap; justify-content: space-between;}
.human .inner li{ width: 295px; margin-top: 20px; background: #fff; transition: all 300ms; display: flex; flex-direction: column;}
.human .inner li .humanPic{ display: flex; flex-direction: column; overflow: hidden;}
.human .inner li .humanPic img{ display: block; width: 100%; transition: all 300ms;}
.human .inner li .humanTent{ display: flex; flex-direction: column;}
.human .inner li .humanTent .humanTentName{ display: flex; flex-direction: row; align-items: center; padding: 15px 15px 0;}
.human .inner li .humanTent .humanTentName h2{ font-size: 22px; color: #000;}
.human .inner li .humanTent .humanTentName b{ color: #555; padding-left: 6px;}
.human .inner li .humanTent .humanTentShu{ display: flex; flex-direction: row; justify-content: space-between; padding: 10px 15px 15px; border-bottom: 1px solid #eee;}
.human .inner li .humanTent .humanTentShu figure{ width: 48%; color: #555; display: flex; flex-direction: row;}
.human .inner li .humanTent .humanTentShu figure:nth-child(1){ justify-content: flex-start;}
.human .inner li .humanTent .humanTentShu figure:last-child{ justify-content: flex-end;}
.human .inner li .humanTent .humanTentShu figure span{ color: #B81C22; padding-right: 3px;}
.human .inner li .humanTent .humanTentShu sup{ color: #555;}
.human .inner li .humanTent .humanTentCeng{ padding: 15px; line-height: 32px; display: flex; flex-direction: row; justify-content: space-between;}
.human .inner li .humanTent .humanTentCeng .yuyue{ width: 130px; background: #B81C22; color: #fff; display: block; height: 32px; text-align: center;}
.human .inner li .humanTent .humanTentCeng span i{ color: #B81C22;}
.human .inner li:hover .humanPic img{ -webkit-transform:scale(1.06); -moz-transform:scale(1.06); -ms-transform:scale(1.06); -o-transform:scale(1.06); transform:scale(1.06);}
.human .inner li:hover{ box-shadow: 0 0 10px 0 rgba(0,0,0,0.2);}

/* 设计师详情 */
.arch{ background: #fff; position: relative; z-index: 12; box-shadow: 0 0 5px 0 rgba(0,0,0,0.1);}
.arch .inner{ display: flex; flex-direction: row; justify-content: space-between; color: #555; line-height: 30px; align-items: center;}
.arch .inner .archRight{ display: flex; flex-direction: row; align-items: center; padding: 20px 0;}
.arch .inner .archRight img{ margin-right: 10px;}
.arch .inner .archRight a{ color: #555;}
.arch .inner .archRight b{ padding: 0 6px;}
.arch .inner .archRight a:hover{ color: #B81C22;}
.arch .inner .archRight a:last-child{ color: #B81C22;}
.arch .inner .archBack{ display: flex; flex-direction: column;}
.arch .inner .archBack a{ display: flex; height: 70px; background: #B81C22; transition: all 300ms; flex-direction: row; padding: 0 35px; align-items: center; justify-content: center;}
.arch .inner .archBack a span{ display: flex; flex-direction: column; width: 20px; height: 17px; background: url(../images/archback.png) no-repeat;}
.arch .inner .archBack a sup{ color: #fff; padding-left: 8px;}
.arch .inner .archBack a:hover{ background: rgba(184,28,34,0.85);}


.itect{ display: flex; flex-direction: column; padding: 30px 0;}
.itect .inner{ display: flex; flex-direction: row; justify-content: space-between;}
.itect .inner .itectPic{ display: flex; flex-direction: column; box-shadow: 0 0 10px 0 rgba(0,0,0,0.1);}
.itect .inner .itectPic img{ width: 340px; height: 500px; object-fit: cover;}
.itect .inner .itectLayer{ width: 810px; padding: 30px; box-shadow: 0 0 10px 0 rgba(0,0,0,0.1); background: #fff; display: flex; flex-direction: column;}
.itect .inner .itectLayer .itectLayerOne{ display: flex; flex-direction: row; justify-content: space-between; align-items: center; padding-bottom: 19px; border-bottom: 1px solid #eee;}
.itect .inner .itectLayer .itectLayerOne .itectLayerOneRight{ display: flex; flex-direction: column;}
.itect .inner .itectLayer .itectLayerOne .itectLayerOneRight .seek{ display: flex; flex-direction: row; align-items: center; border: 1px solid #B81C22; color: #B81C22; line-height: 38px; border-radius: 19px; padding: 0 30px; transition: all 300ms;}
.itect .inner .itectLayer .itectLayerOne .itectLayerOneRight .seek span{ display: block; width: 18px; height: 22px; background: url(../images/trimname.png) -6px center no-repeat; transition: all 300ms;}
.itect .inner .itectLayer .itectLayerOne .itectLayerOneRight .seek sup{ margin-left: 8px; transition: all 300ms;}
.itect .inner .itectLayer .itectLayerOne .itectLayerOneRight .seek:active{ background: #B81C22; color: #fff;}
.itect .inner .itectLayer .itectLayerOne .itectLayerOneRight .seek:active span{ background-position: -37px center;}
.itect .inner .itectLayer .itectLayerOne .itectLayerOneLeft{ display: flex; flex-direction: row; position: relative; line-height: 24px;}
.itect .inner .itectLayer .itectLayerOne .itectLayerOneLeft:before{ content: ''; position: absolute; left: 0; top: 0; bottom: 0; left: 0; width: 3px; background: #B81C22;}
.itect .inner .itectLayer .itectLayerOne .itectLayerOneLeft h2{ font-size: 24px; padding-left: 10px;}
.itect .inner .itectLayer .itectLayerOne .itectLayerOneLeft span{ color: #555; padding: 0 40px 0 20px;}
.itect .inner .itectLayer .itectLayerOne .itectLayerOneLeft dl{ display: flex; flex-direction: row; color: #B81C22;}
.itect .inner .itectLayer .itectLayerOne .itectLayerOneLeft dl dt{ display: flex; flex-direction: column; align-items: center; height: 24px; width: 12px; background: url(../images/itectlayeroneleft.png) center center no-repeat;}
.itect .inner .itectLayer .itectLayerOne .itectLayerOneLeft dl dd{ padding-left: 4px;}


.discover{position:fixed;top:0 !important;left:0 !important; right: 0 !important; bottom: 0!important; display:none;z-index:1000; background:rgba(0,0,0,0.5);}
.discover .layer{ position: absolute; width: 420px; left: 50%; margin-left: -210px; top: 50%; margin-top: -230px; background: #fff; box-shadow: 0 0 20px 0 rgba(0,0,0,0.3);}
.discover .layer .close{position:absolute;right: 30px; top: 20px; display: flex; flex-direction: column; font-size: 24px;}
.discover .layer .kuang{ display: flex; flex-direction: column; padding: 30px;}
.discover .layer .kuang .ming{ font-size: 22px; width: 100%; line-height: 30px;}
.discover .layer .kuang .alform{ display: flex; flex-direction: column;}
.discover .layer .kuang .alform .layui{  border-radius: 3px; padding: 0 10px; margin-top: 20px; background: #f5f5f5; position: relative;}
.discover .layer .kuang .alform .layui .text{ width: 100%; height: 50px; line-height: 50px; background: none;}
.discover .layer .kuang .tijiao{ width: 100%; overflow: hidden; margin-top:20px;}
.discover .layer .kuang .tijiao .sub{ width: 100%; background: #B81C22; border-radius: 4px; color: #fff; height:50px; line-height: 50px; font-size: 18px; cursor: pointer;}
.discover .layer .kuang .alform .layui .textarea{ width: 100%; height: 70px; text-align: left; padding-top: 10px;}
.discover .layer .kuang .alform .layui span{ display: block; position: absolute; right: 0; top:0; bottom: 0; z-index: 10;}
.discover .layer .kuang .alform .layui span img{ display: block; width: 120px; height: 50px;}

.itect .inner .itectLayer .itectLayerTwo{ display: flex; flex-direction: column; padding: 20px 0;}
.itect .inner .itectLayer .itectLayerTwo ol{ display: flex; flex-direction: column;}
.itect .inner .itectLayer .itectLayerTwo ol li{ display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; -js-display:flex; display: flex; line-height: 2.4;}
.itect .inner .itectLayer .itectLayerTwo ol li .itectLayerTwoTit{ color: #666;}
.itect .inner .itectLayer .itectLayerTwo ol li .itectLayerTwoCont{ -webkit-box-flex:1; -webkit-flex: 1; -ms-flex: 1; flex: 1 1; display: flex;}
.itect .inner .itectLayer .itectLayerThree{ display: flex; flex-direction: column;}
.itect .inner .itectLayer .itectLayerThree .itectLayerThreeTit{ position: relative; display: flex; flex-direction: column; font-size: 22px;}
.itect .inner .itectLayer .itectLayerThree .itectLayerThreeTit:after{ content: ''; position: absolute; right: 0; top: 50%; width: 88%; height: 0; border-bottom: 1px dashed #ddd;}
.itect .inner .itectLayer .itectLayerThree .itectLayerThreeTent{ margin-top: 10px; display: flex; flex-direction: column; line-height: 30px; height: 90px; overflow-x: hidden; overflow-y: auto;}

.tryto{ display: flex; flex-direction: column; padding: 40px 0; background: #fff;}
.tryto .trytoTitle{ display: flex; flex-direction: column; justify-content: center; align-items: center; font-size: 32px;}
.tryto .trytoList{ display: flex; flex-direction: column; margin-top: 20px;}
.tryto .trytoList ol{ display: flex; flex-wrap: wrap;  justify-content: space-between;}
.tryto .trytoList li{ width:400px; box-shadow: 0 0 10px 0 rgba(0,0,0,0.1); position: relative; background: #fff; margin-top: 20px; padding-bottom: 80px;}
.tryto .trytoList li .trytoListOneCeng{ display: flex; flex-direction: row; position: relative;}
.tryto .trytoList li .trytoListOneCeng .trytoListOnePic{ display: flex; flex-direction: row;}
.tryto .trytoList li .trytoListOneCeng .trytoListOnePic img{ display: block; width: 100%;}
.tryto .trytoList li .trytoListOneCeng .trytoListOneRen{ position: absolute; right: 15px; z-index: 10; bottom: -45px; transition: all 300ms;}
.tryto .trytoList li .trytoListOneCeng .trytoListOneRen a{ display: block; width: 80px; height: 80px; overflow: hidden; border-radius: 50%; border: 5px solid #fff; box-shadow: 0 0 5px 0 rgba(0,0,0,0.1);}
.tryto .trytoList li .trytoListOneCeng .trytoListOneRen a img{ display: block; width: 100%;}
.tryto .trytoList li .trytoListOneTent{ padding: 15px;  height: 50px; position: absolute; bottom: 0; overflow:hidden; z-index: 1; left: 0; right: 0; transition: all 300ms; background: #fff;}
.tryto .trytoList li .trytoListOneTent .trytoListOneTentWord{ display: flex; flex-direction: column; padding-right: 120px; line-height: 25px;}
.tryto .trytoList li .trytoListOneTent .trytoListOneTentWord h2 a{ overflow: hidden; font-size: 16px; text-overflow: ellipsis; white-space: nowrap; display: block;}
.tryto .trytoList li .trytoListOneTent .trytoListOneTentWord figure{ padding-top: 6px; color: #888; display: flex; flex-direction: row; align-items: center;}
.tryto .trytoList li .trytoListOneTent .trytoListOneTentWord figure b{ display: block; padding: 0 12px; font-size: 12px;}
.tryto .trytoList li .trytoListOneTent .trytoListOneTentText{ display: flex; flex-direction: column; transition: all 300ms;}
.tryto .trytoList li .trytoListOneTent .trytoListOneTentText h2,
.tryto .trytoList li .trytoListOneTent .trytoListOneTentText p{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.tryto .trytoList li .trytoListOneTent .trytoListOneTentText h2{ margin-top: 15px;}
.tryto .trytoList li .trytoListOneTent .trytoListOneTentText h2 span{ padding-left: 10px; color: #888;}
.tryto .trytoList li:hover .trytoListOneCeng .trytoListOneRen{ bottom: 15px;}
.tryto .trytoList li:hover .trytoListOneTent{ height: 110px;}
.tryto .trytoList li:hover .trytoListOneTent .trytoListOneTentWord h2 a{ color: #B81C22;}

.tryto .chakan{ display: flex; flex-direction: row; justify-content: center; align-items: center; margin-top: 50px;}
.tryto .chakan a{ display: block; width: 180px; line-height: 50px; height: 50px; border: 1px solid #222; text-align: center; transition: all 300ms; font-size: 16px;}
.tryto .chakan a:hover{ background: #B81C22; color: #fff; border-color: #B81C22;}


.fenye {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 50px 0;
}

.fenye a {
    width: 40px;
    height: 40px;
    background-color: #ffffff;
    color: #666666;
    font-size: 14px;
    border: solid 1px #e0e0e0;
    display: block;
    line-height: 40px;
    text-align: center;
    box-sizing: content-box;
    border-radius: 100%;
    margin: 0 6px;
    transition: all 0.36s;
}

.fenye .prevye,.fenye .nextye {
    width: 77px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    box-sizing: content-box;
    background-color: #ffffff;
    border-radius: 20px;
    border: solid 1px #e0e0e0;
}

.fenye a.on,.fenye a:hover {
    background-color: #E62129;
    color: #fff;
}

.cl {
    clear: both;
}
/*大图样式*/
.picarr{position:relative;margin:20px auto;}
.picarr .picture{width:100%;text-align:center;}
.picarr .picture a{display:none;}
.picarr .preview{width:685px;margin-top:20px;padding:5px;background:#eef3fa;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;}
.picarr .preview li{float:left;margin:4px;}
.picarr .preview li a{width:58px;height:45px;border:1px solid #fff;background:#fff;display:table-cell;vertical-align:middle;text-align:center;*display:block;*font-size:35px;*font-family:Arial;}
.picarr .preview li a img{vertical-align:middle;}
.picarr .preview li.current a{border:1px solid #000;}