@charset "utf-8";
/* CSS Document */

body{background:#fff;line-height:150%;color:#595959; }
a{color:#737373;}
a:hover{color:#000;}
.floatleft{float:left;}
.floatright{float:right;}

.header{ background:url(../images/topbg.png) repeat-x left top; height:125px; border-bottom:1px solid #e3e3e3;}
.header .con{ width:100%;max-width:1200px; margin:0 auto;}
.headerleft{width: 35%;float: left;}
.headerlogo{padding: 15px 0;float: left;}
/*.headerlogo img{width:100%;}*/
.headerlogo img{width:350px;height: 85px}
/*.headerzizhi{padding: 28px 0;width: 18%;float: right;}*/
.headerright{width: 65%;float: right;}
.headserch{padding-left: 60px;width: 60%;float: left;}
.search{width: 100%;padding-top: 32px;}
.searchkeyword{color: #999;font-size: 12px;padding-top: 44px;width: 100%;}
.searchkeyword p{white-space: nowrap;overflow:hidden;}
.searchkeyword p a{color: #999;padding-right:8px;}
.searchkeyword p a:hover{color:#e60b0b;}
.headtel{line-height: 40px;padding: 20px 0;float: right;width: 25%;}
.headtel .en{font-size: 12px;float: right;width:88px;background: url(../images/en.png) no-repeat 0 50%;}
.headtel .tel{font-size: 12px;width: 120px;float: right;background:url(../images/i-search.png) no-repeat 0 50%;}
.headserch .search .i-txt{color:#999999; float:left; height:32px; width:60%; background:#e8eaed; border-width:1px; border-style:solid; border-color:#d1d2d5 #fff #fff #d1d2d5; padding:0 10px;}
.headserch .search .i-txt:focus{box-shadow:0 0 6px rgba(253,255,123,.8); background:#f2f2f2;}
/*.headserch .search .i-btn{height:33px; background:#e60b0b url(../images/btn-search.png)!! 50% 50% no-repeat; float:left; border:0; width:15%; cursor:pointer;}*/
/*.headserch .search .i-btn:hover{ background-color:#d20c0c;}*/
/*.headserch .search .i-btn:active{ background-color:#c70c0c;box-shadow:0 0 10px rgba(253,255,123,1); }*/

.headserch .search .i-btn{height:33px; background:#333333 url(../images/btn-search.png) 50% 50% no-repeat; float:left; border:0; width:15%; cursor:pointer;}
.headserch .search .i-btn:hover{ background-color:#ffffff;}
.headserch .search .i-btn:active{ background-color:#c70c0c;box-shadow:0 0 10px rgba(253,255,123,1); }

.topNav{ background:#e8e8e8; height:52px; line-height:52px;border-top:1px solid #f8f8f8; position:relative; z-index:20;}
.topNav .con{ width:1200px; margin:0 auto; position:relative;}
.topNav .xunjia{ position:absolute; right:0;top:0; *top:10px;}
.topNav .xunjia:hover{ opacity:.8;}
.topNav dl{ float:left; position:relative;}
.topNav dt { position:relative; z-index:13; background:#e8e8e8;}
.topNav dt a{ display:block; vertical-align:top; width:120px; border-top:#ededed 3px solid; line-height:49px; text-align:center; font-size:14px;}
.topNav dt a:hover{ background:#ffffff;border-top:#e60b0b 3px solid; color:#e60b0b;}
.topNav dt a.cur{ background:#e60b0b; border-top:3px solid #e60b0b; color:#fff;}
.topNav dd{ overflow:hidden; width:242px; display:none; position:absolute; top:50px; z-index:10; background:#f8f8f8; padding:20px 0; box-shadow:0 3px 3px rgba(0,0,0,.3);}
.topNav dd .item{ padding:0 26px;}
.topNav dd .item a{ line-height:37px; width:170px; padding:0 10px; display:block; border-bottom:1px solid #dcdcdd; height:37px;  color:#737373; font-size:14px;}
.topNav dd .item a:hover{ color:#e60b0b; background:#f2f2f2 url(../images/icon-r4.png)/*tpa=http://www.yupan91.com/skin/images/icon-r4.png*/ no-repeat 170px 50%;}

.topNav .icondd { padding:0; width:760px;}
.topNav .icondd .left{ float:left; width:244px; padding:20px 0;}
.topNav .icondd .right{ float:left; width:516px;}
.topNav .icondd .right a{ display:none; height:230px; width:500px; position:relative;}
.topNav .icondd .right .rt{ background:url(../images/btn3.png)/*tpa=http://www.yupan91.com/skin/images/btn3.png*/ 480px 50% no-repeat #1b1f26; position:absolute; left:0; bottom:0; width:100%; font-size:14px; color:#fff; height:30px; line-height:30px; padding:0 20px;}
.topNav .icondd .right a:hover .rt{ background-color:#e60b0b;}

.topNav .hover dt a{ background:#f8f8f8;border-top:#e60b0b 3px solid; color:#e60b0b;}

.tpgrid{display: grid;grid-template-columns: repeat(3, 1fr);grid-gap: 0 2%;}
.cpgrid{display: grid;grid-template-columns: repeat(6, 1fr);grid-gap: 10px;}

.indexbody .footer-bottom .links{ display:block;}

.index-banner{ width:100%; overflow:hidden; height:480px; position:relative;}
.index-banner-wrap{width:1920px; position:relative; left:50%; margin-left:-960px;}


.index-brand{margin:2% auto; width:100%;max-width:1200px;}
.index-brand .item{height:160px;}
.index-brand .item .itembox{display: flex;background: #1b1f26;}
.index-brand .item .itembox .boxleft{width:100%;}
.index-brand .item .itembox .boxleft p{ overflow:hidden; height:4.2em; line-height:1.4em; margin:0 20px; font-size:.85em;color:#fff;}
.index-brand .item .itembox .boxleft h3{  margin:10px 20px; padding-bottom:10px; border-bottom:1px solid #e60b0b; font-size:1.25em; color:#fff;}
.index-brand .item .itembox .boxright{width:70%;overflow: hidden;}
.index-brand .item .btns{ margin-left:20px;
    -webkit-transition: all .2s ease-in-out;
	-moz-transition:all .2s ease-in-out;
	transition: all .2s ease-in-out;
    display:inline-block;
    background: url(../images/ic1.png)/*tpa=http://www.yupan91.com/skin/images/ic1.png*/ no-repeat right 50%;
    background-color:#e60b0b;
    padding-right:20px;
    height:20px;
    border-radius:10px;}
.index-brand .item .btns em{ display:none; font-size:12px; height:20px; line-height:20px; padding-left:10px;}
.index-brand a:hover .boxleft{ background-color:#e60b0b;}
.index-brand .item a:hover h3{border-bottom:1px solid #fff;}
.index-brand .item a:hover .btns{ background:url(../images/ic2.png)/*tpa=http://www.yupan91.com/skin/images/ic2.png*/ no-repeat right 50% #fff;}
.index-brand .item a:hover .btns em{ display:inline-block; vertical-align:top; padding-top:1px;}

.index-brand .itemr{float:right; width:386px; height:160px; background:#1b1f26; }
.index-brand .itemr dl{ height:160px;}
.index-brand .itemr dt{ float:left; height:160px; width:226px; background:#1b1f26;}
.index-brand .itemr p{ overflow:hidden; height:4.2em; line-height:1.4em; margin:0 20px; font-size:.85em;color:#fff;}
.index-brand .itemr h3{  margin:10px 20px; padding-bottom:10px; border-bottom:1px solid #e60b0b; font-size:1.25em; color:#fff;}
.index-brand .itemr .btns{ margin-left:20px;
    -webkit-transition: all .2s ease-in-out;
	-moz-transition:all .2s ease-in-out;
	transition: all .2s ease-in-out;
    display:inline-block;
    background: url(../images/ic1.png)/*tpa=http://www.yupan91.com/skin/images/ic1.png*/ no-repeat right 50%;
    background-color:#e60b0b;
    padding-right:20px;
    height:20px;
    border-radius:10px;}
.index-brand .itemr .btns em{ display:none; font-size:12px; height:20px; line-height:20px; padding-left:10px;}
.index-brand a:hover dt{ background-color:#e60b0b;}
.index-brand .itemr a:hover h3{border-bottom:1px solid #fff;}
.index-brand .itemr a:hover .btns{ background:url(../images/ic2.png)/*tpa=http://www.yupan91.com/skin/images/ic2.png*/ no-repeat right 50% #fff;}
.index-brand .itemr a:hover .btns em{ display:inline-block; vertical-align:top; padding-top:1px;}

.indexForm{ float:right; width:386px; height:160px; background:#1b1f26; color:#fff;}
.indexForm h3{ font-size:1.25em;  color:#fff; margin:10px 20px 0; padding-bottom:10px;border-bottom:1px solid #111317;}
.indexForm .clearfix{margin-top:15px;}
.indexForm input[type="text"]{ color:#737373; background:#fff; border:0; height:30px; padding:0 10px; width:326px;}
.indexForm input.text2{ width:236px;}
.indexForm .btn{ color:#fff; float:right;height:30px; background:#e60b0b; border:0; width:90px; text-align:center; cursor:pointer;}
.indexForm .btn:hover{ background-color:#d20c0c;}
.indexForm .btn:active{ background-color:#c70c0c;box-shadow:0 0 3px rgba(255,255,255,.3); }
.indexForm .inputList{ margin:0 20px; border-top:1px solid #292f39;padding-top:15px;}

.indexPro{ background:#edeff2; padding:2%;}
.indexPro .con{max-width: 1200px;width: 100%; margin:0 auto;}
.indexPro .nav{ height:40px; background:url(../images/bg-x.png)/*tpa=http://www.yupan91.com/skin/images/bg-x.png*/ repeat-x left bottom; margin-bottom:20px; position:relative;}
.indexPro .nav .left em{ margin:0 15px; color:#d8dadd;}
.indexPro .nav .left a{ font-size:1.25em; display:inline-block; height:35px; }
.indexPro .nav .left a.cur{border-bottom:3px solid #e60b0b; color:#e60b0b;} 

.moreRight{ position:absolute; right:0; top:0;}
.moreRight .more{ 
    -webkit-transition: all .2s ease-in-out;
	-moz-transition:all .2s ease-in-out;
	transition: all .2s ease-in-out;display:inline-block; vertical-align:middle; width:20px; height:20px; background:url(../images/icon-more2.png)/*tpa=http://www.yupan91.com/skin/images/icon-more2.png*/ 0 0 no-repeat;}
.moreRight .more:hover{ width:60px; background-position:right bottom;}
.moreRight a{ font-size:.75em;}

.indexPro .list ul{max-width: 1200px;width: 100%;}
.indexPro .list{ display:none;}
.indexPro .list li{position: relative;overflow: hidden;}
.indexPro .list li img{width: 100%;height: auto;}
.indexPro .list li span{ display:block; height:34px; line-height:34px; padding:0 38px 0 10px; color:#737373; font-size:.75em;overflow: hidden;background:#fff;bottom: 0px;position: absolute;}
.indexPro .list li a{ display:block;height:180px; background:#fff;}
.indexPro .list li a:hover span{ color:#fff; background:#e60b0b url(../images/hvimg.png)/*tpa=http://www.yupan91.com/skin/images/hvimg.png*/ right top no-repeat;}


.inInfos{ margin:30px auto 0; width:100%;max-width:1200px;}
.inInfos .bar{ border-bottom:1px solid #e6e6e6; position:relative; height:34px; margin-bottom:15px;}
.inInfos .content,.inInfos .news li{ font-size:.75em;}
.inInfos .about{ float:left; width:60%; height:250px;border:1px solid #e6e6e6; padding:15px 20px;}
.inInfos .about td{padding-left:20px; color:#737373; line-height:24px;}
.inInfos .news{ float:right;width:31%; height:250px; border:1px solid #e6e6e6; padding:15px 20px;}
.inInfos .news li{ height:30px; line-height:30px;display: flex;justify-content: space-between;}
.inInfos .news li a{width: 75%;overflow: hidden;}
.inInfos .news em{float: right;}


.footer-nav { background:#f2f2f2 url(../images/foot-lbg.png)/*tpa=http://www.yupan91.com/skin/images/foot-lbg.png*/ repeat-x left 54px; padding:20px 20px; margin-top:40px;}
.footer-nav .con{ 
    margin:0 auto;
    width: 100%;
    max-width: 1200px;
    display: grid;
    grid-template-columns: repeat(5, 20%);
}

.footer-nav dt { height:50px;}
.footer-nav dd{ font-size:.75em;}
.footer-nav dd a,
.footer-nav dd p{ display:block; color:#737373; border-bottom:1px solid #dcdcdd; height:30px; line-height:30px;}
.footer-nav dd a:hover,
.footer-nav dd p:hover{ background:url(../images/bg-hov1.png)/*tpa=http://www.yupan91.com/skin/images/bg-hov1.png*/ repeat-x left top #fff;}
.footer-nav .wx{ margin:0;}
.foot-ewm img{width:100%;}
.foot-contact em{ width:30px; height:30px; display:inline-block; vertical-align:middle;}
.foot-contact p:hover em,
.foot-contact a:hover em{ background-position:right top;}
.foot-contact .i-add{ background:url(../images/addBg_01.png)/*tpa=http://www.yupan91.com/skin/images/addBg_01.png*/ no-repeat;}
.foot-contact .i-tel{ background:url(../images/addBg_02.png)/*tpa=http://www.yupan91.com/skin/images/addBg_02.png*/ no-repeat;}
.foot-contact .i-fax{ background:url(../images/addBg_03.png)/*tpa=http://www.yupan91.com/skin/images/addBg_03.png*/ no-repeat;}
.foot-contact .i-eml{ background:url(../images/addBg_04.png)/*tpa=http://www.yupan91.com/skin/images/addBg_04.png*/ no-repeat;}
.foot-contact .i-qq{ background:url(../images/addBg_05.png)/*tpa=http://www.yupan91.com/skin/images/addBg_05.png*/ no-repeat;}

.footer-bottom{ background:#4d4d4d; padding:20px 20px; font-size:.75em;}
.footer-bottom .con{ margin:0 auto; width: 100%;max-width: 1200px;}
.footer-bottom .con .top{ color:#fff; }
.footer-bottom .con .top a{ color:#a6a6a6;}
.footer-bottom .con .top a:hover{color:#a6a6a6;}
.footer-bottom .links {border-top: 1px solid #6e6e6e;padding-top: 20px;display:none;}
.footer-bottom .links a{ display:inline-block; color:#7e7e7e; }
.footer-bottom .links a:hover{ color:#9d9d9d;}
.footer-bottom .links em{ color:#575757; margin:0 3px;}
.footer-bottom .link{ display:none; color:#9d9d9d;border-top:1px solid #666666;padding-top:10px;margin-top:10px; }
.footer-bottom .link a{ display:inline-block; color:#7e7e7e; }
.footer-bottom .link a:hover{ color:#9d9d9d;}
.footer-bottom .link em{ color:#575757; margin:0 3px;}
.footkeyword{color:#fff;}
.footkeyword p{text-transform: uppercase;}
.footkeyword p a{color:#fff;padding-right:15px;float:left;}
.footkeyword p a:hover{color:#e60b0b;}

.brand{
    margin: 30px auto 0;
    width: 100%;
    max-width: 1200px;
    background: #f7f7f7;
    padding: 15px 20px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
.brand .bar{ border-bottom:1px solid #e6e6e6; position:relative; height:34px; margin-bottom:15px;}
.brand li{ float:left; width:194px;}
.brand li img{background-color: #fff;}

.model{margin:30px auto 0; width:100%;max-width:1200px; padding:15px 20px 0;border:1px solid #e6e6e6;box-sizing: border-box;
  -moz-box-sizing: border-box; /* Firefox */
  -webkit-box-sizing: border-box; /* Safari */ }
.model .bar{ border-bottom:1px solid #e6e6e6; position:relative; height:34px;} 

.inBn{ background:#102037;overflow:hidden; width:100%; margin:0 auto;display: flex;justify-content: center;align-items: center;}
.inBn img{max-width: 100%;max-height: 100%;overflow: hidden;}


.ovOh{ overflow:hidden;height:104px;}

.ileft{ float:left; width: 30%;margin-top: 5px;margin-right: 10px;}

.inWrap{ width:100%;max-width:1200px; margin:1px auto;box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;}

.leftNav a{margin-top:-1px; border:1px solid #dcdcdd; font-size:.85em; background:url(../images/nav-left1.png)/*tpa=http://www.yupan91.com/skin/images/nav-left1.png*/ repeat-x left top; height:39px; line-height:39px; padding:0 20px; color:#4d4d4d; display:block;overflow: hidden;}
.leftNav a:hover{ color:#e60b0b;}
.leftNav a.cur{ position:relative; color:#fff; border:1px solid #1c2027; background:url(../images/nav-left2.png)/*tpa=http://www.yupan91.com/skin/images/nav-left2.png*/ repeat-x left top;}
.leftNav a.cur:after{ position:absolute; width:5px; height:9px; right:20px;top:50%; margin-top:-4px; background:url(../images/btn3.png)/*tpa=http://www.yupan91.com/skin/images/btn3.png*/ no-repeat; content:"\20"}

.leftNav2 li{ position:relative;}
.leftNav2 a.ali{position:relative;margin-top:-1px; border:1px solid #dcdcdd; font-size:.85em; background:url(../images/nav-left1.png)/*tpa=http://www.yupan91.com/skin/images/nav-left1.png*/ repeat-x left top; height:39px; line-height:39px; padding:0 20px; color:#4d4d4d; display:block;overflow:hidden;}
.leftNav2 a.ali:hover{ color:#e60b0b;}
.leftNav2 .senk{ border:1px solid #dcdcdd; border-top:0;border-bottom:0; position:relative;display: none;}
.leftNav2 .senk a{ display:block; font-size:.75em; padding:0 20px; height:30px; line-height:30px; position:relative;}
.leftNav2 .senk a:hover{ background:#f2f2f2;}
.leftNav2 .senk a:hover:after{ position:absolute; content:"\20"; left:-1px;top:0; height:30px; width:3px; background:#e60b0b;}
.leftNav2 .senk a.current{ background:#f2f2f2; color:#e60b0b;}
.leftNav2 a.cur{ background:url(../images/nav-left2.png)/*tpa=http://www.yupan91.com/skin/images/nav-left2.png*/ repeat-x left top; color:#fff;}
.leftNav2 a.cur:hover{color:#fff}

.leftNav2 .senk a.hv{ background:#f2f2f2;}
.leftNav2 .senk a.hv:after{ position:absolute; content:"\20"; left:-1px;top:0; height:30px; width:3px; background:#e60b0b;}

.leftNav2 p{position:relative;margin-top:-1px; cursor:pointer; border:1px solid #dcdcdd; font-size:.85em; background:url(../images/nav-left1.png)/*tpa=http://www.yupan91.com/skin/images/nav-left1.png*/ repeat-x left top; height:39px; line-height:39px; padding:0 20px; color:#4d4d4d; display:block;}
.leftNav2 p.cur{ color:#fff; border:1px solid #1c2027; background:url(../images/nav-left2.png)/*tpa=http://www.yupan91.com/skin/images/nav-left2.png*/ repeat-x left top;}
.leftNav2 p .iconDown{width:10px; height:10px; position:absolute; right:17px;top:15px;background:url(../images/icon-right.png)/*tpa=http://www.yupan91.com/skin/images/icon-right.png*/ no-repeat;}
.leftNav2 .iconRight{height:10px; width:10px; position:absolute; right:17px;top:15px;background:url(../images/icon-right.png)/*tpa=http://www.yupan91.com/skin/images/icon-right.png*/ no-repeat;}
.leftNav2 p.cur .iconDown{ background:url(../images/icon-down.png)/*tpa=http://www.yupan91.com/skin/images/icon-down.png*/ no-repeat; }
.leftNav2 a.cur .iconRight{ background:url(../images/icon-right2.png)/*tpa=http://www.yupan91.com/skin/images/icon-right2.png*/ no-repeat; }

.leftNav2 .popFl{ display:none; position:absolute; width:710px; background:#fff; border:1px solid #dcdcdd; padding:20px; left:199px; top:0; font-size:12px;box-shadow:0 3px 3px rgba(0,0,0,.3);}
.leftNav2 .popFl dl{ border-bottom:1px solid #eee; margin-bottom:10px; padding-bottom:5px;}
.leftNav2 .popFl dt{ float:left; width:80px; line-height:30px;}
.leftNav2 .popFl dt a{ color:#e60b0b;}
.leftNav2 .popFl dd{ line-height:30px; width:630px; float:right;}
.leftNav2 .popFl dd a{ display:inline-block; margin-right:20px;}



.leftCom{margin-top:20px;}
.leftWrap{width:200px; float:left;position: sticky;top: 1px;z-index:1;}
.leftewm{background:#1b1f26; color:#fff; padding:10px 0 20px;margin-top:20px;}
.leftewm h3{ font-size:1.0em;  color:#fff; margin:10px 20px 0; padding-bottom:10px;border-bottom:1px solid #111317;}
.leftewm .leftewmimg{padding:20px;border-top:1px solid #292f39;}

.leftForm{background:#1b1f26; color:#fff; padding:10px 0 20px;margin-top:20px;}
.leftForm h3{ font-size:1.25em;  color:#fff; margin:10px 20px 0; padding-bottom:10px;border-bottom:1px solid #111317;}
.leftForm .clearfix{margin-top:15px;}
.leftForm input[type="text"]{ color:#737373; background:#fff; border:0; height:30px; padding:0 10px; width:140px;}
.leftForm input.text2{ width:140px;}
.leftForm .btn{ color:#fff; height:30px; background:#e60b0b; border:0; width:90px; margin-top:20px; text-align:center; cursor:pointer;}
.leftForm .btn:hover{ background-color:#d20c0c;}
.leftForm .btn:active{ background-color:#c70c0c;box-shadow:0 0 3px rgba(255,255,255,.3); }
.leftForm .inputList{ margin:0 20px; border-top:1px solid #292f39;padding-top:15px;}

.rightWrap{ float:right; width:970px;}
.contentTxt{margin-top:30px; font-size:.75em; color:#4d4d4d; padding-bottom:30px;}
.smlNav{display: flex;border-bottom: 1px solid #ededed;height: 39px;margin-top: 10px;justify-content: space-between;align-items: center;}
.smlNav .name{ color:#1b1f26; font-size:1em;  border-bottom:1px solid #e60b0b;}
.smlNav .right{ font-size:.75em; padding-left:20px;color:#e60b0b; background:url(../images/icon-home.png)/*tpa=http://www.yupan91.com/skin/images/icon-home.png*/ no-repeat left 50%;}
.smlNav .right em{ color:#4d4d4d; margin:0 9px;}
.smlNav .right label{ color:#4d4d4d;}
.smlNav .right a{ color:#e60b0b;}
.smlNav .right a:hover{  color:#333;}

.aboutTxt{ text-align:justify;}
.c-about-img {width:40% !important; float:right; margin:0 0 30px 30px;}
.c-about-img2 img{width:80%; text-align:center;  margin:30px 0 0 0;}
.aboutTxt p img{width:80%;}


.proNali{margin-top:20px;}
.proNali li{ float:left; width:16.666666666%;}
.proNali li:first-child a{ border-left:1px solid #e3e3e3;}
.proNali li.first a{ border-left:1px solid #e3e3e3;}
.proNali li a{ display:block; height:58px; line-height:58px; border:1px solid #e3e3e3; border-left:1px solid #fff; text-align:center; background:url(../images/pro-nav1.png)/*tpa=http://www.yupan91.com/skin/images/pro-nav1.png*/ repeat-x;}
.proNali li a.cur{ background:url(../images/pro-nav2.png)/*tpa=http://www.yupan91.com/skin/images/pro-nav2.png*/ repeat-x; color:#fff;}

.inPro {margin:10px 0;}
.inPro .list ul{ width: 100%;max-width: 1200px;}
.inPro .list li{ overflow:hidden; border:1px solid #e6e6e6;position: relative;}
.inPro .list li img{width: 100%;height: auto;}
.inPro .list li span{ display:block; height:34px;line-height:34px; padding:0 38px 0 10px; color:#737373; font-size:.75em;border-top:1px solid #e6e6e6;bottom: 0px;position: absolute;background:#fff;}
.inPro .list li a{display:block;height:180px; background:#fff;}
.inPro .list li a:hover span{ color:#fff; background:#e60b0b url(../images/hvimg.png)/*tpa=http://www.yupan91.com/skin/images/hvimg.png*/ right top no-repeat; border:0;}

.inPro .list li:hover{ box-shadow:0 0 6px rgba(0,0,0,.3);}

.modellist .mdl{margin-top: 0;margin-bottom: 20px;border: 1px #ededed solid;}
.modellist .mdl:nth-child(1){margin-top: 20px;}
.modellist .mdl:nth-child(2){margin-top: 70px;}
.modellist .mdl .mdltit{background-color:#ededed;width:100%;padding: 6px 10px;line-height: 28px;box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;}
.modellist .mdl .mdltit h2{text-align:left;width:120px;float:left;}
.modellist .mdl .mdltit h2 a{font-weight:bold;}
.modellist .mdl .mdltit span{float:right;}
.modellist .mdl .mdltit span a{text-transform: uppercase;font-size:12px;padding:0px 10px;;white-space:nowrap;}
.mdlgrid{display: grid;grid-template-columns: 50% 50%;}
.mdlgridtit{
    background: linear-gradient(to left, transparent 50%,#e60b0b 50%);
    background-size: 200% 100%;
    background-position: right;
    transition: background-position 0.5s ease-in-out;
    border-bottom: 1px #ededed dashed;
}
.mdlgridtit:nth-child(2n){border-left: 1px #ededed solid;}
.mdlgridtit span{float:right;}
.mdlgridtit span a{padding:0;text-transform: uppercase;}
.mdlgridtit a{font-size:12px;padding-left:20px;line-height:50px;color: #737373;transition: 0.5s ease, transform 1s ease-in-out;}
.mdlgridtit h2 a{font-size:16px;}
.mdlgridtit p{font-size:12px;padding:0 40px 10px 40px;color:#a5a5a5;}
.mdlgridtit:hover{background-position: left;border-bottom: 1px #e60b0b solid;transition: 0.5s ease, transform 1s ease-in-out; }
.mdlgridtit:hover a{color:#fff;transition: 0.5s ease, transform 1s ease-in-out;}
.mdlgridtit:hover p{color:#fff;transition: 0.5s ease, transform 1s ease-in-out;}
.mdintag{float:right;padding-right:20px;}
.mdintag a{border-radius: 20px;border: 1px #ededed solid;text-transform: uppercase;padding: 2px 10px;}
.mdlborder{border: 1px #ededed solid;}


.pages { text-align:center; margin:30px 0; font-size:.75em;}
.pages a,
.pages span{ display:inline-block; height:30px; line-height:30px; padding:0 14px; border:1px solid #d8d8d8; margin-left:-1px;}
.pages a:hover{ background:#e70b0b; border:1px solid #e70b0b; color:#fff;}
.pages span.cur{color:#e60b0b; background:#f9f9f9;}
.pages .page-num-current{color:#e60b0b; background:#f9f9f9;}

.proBard { border:1px solid #e6e6e6; margin:20px 0; position:relative;}
.proBard .nav{ width: 100%;background:#ededed; line-height:30px; position:absolute;top:0;}
.proBard .nav li{ float:left;}
.proBard .nav li a{ display:block; height:30px; padding:0 14px; font-size:.75em;}
.proBard .nav li a:hover{ background:#fff;}
.proBard .nav li a.cur{ background:#fff; color:#e60b0b;}

.proBard .list{ padding:20px;margin-top:40px;box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;}
.proBard .list dl{ margin-bottom:30px;}
.proBard .list dt{ margin-bottom:10px;border-bottom:1px solid #e6e6e6; color:#737373; font-family:Arial; font-size:2.25em; height:56px; line-height:56px;}
.proBard .list a{display:inline-block; height:30px;line-height:30px;font-size:.75em;padding-left:10px;overflow:hidden;text-transform: uppercase;}
.proBard .list a:hover{ background:#e60b0b;color:#fff;}
.proBard .list dl:hover dt{ color:#e60b0b;}
.allgrid{
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-gap: 20px 10px;
    width: 100%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;}

.proListC{ margin:20px 0;}
/*.proListC .left{ float:left; width:480px;}
.proListC .right{ float:right; width:480px;}*/
.proListC .leftC{ float:left; width:480px;}
.proListC .rightC{ float:right; width:480px;}
.proListC .item{ margin-bottom:20px; border:1px solid #e6e6e6;  border-bottom:0;}
.proListC .item h3{ background:#f2f2f2; height:38px; line-height:40px; position:relative; position:relative;}
.proListC .item h3 a{ position:absolute; left:-1px; top:-1px; height:40px; padding:0 20px; color:#fff; font-size:.85em; background:#e60b0b;font-weight:700;}

.proListC .item dl{ font-size:.75em; padding:10px 20px; border-bottom:1px solid #e6e6e6;}
.proListC .item dt{float:left; width:80px;}
.proListC .item dt a{ color:#e60b0b; }
.proListC .item dd{ float:left; width:350px;}
.proListC .item dd a{ display:inline-block; padding:0 20px 0 0;}

.productTxt{ margin:30px 0;}
.list2-brand{ background:#f7f7f7; padding:20px 20px;}
.list2-brand .tit{ margin-bottom:20px;}
.list2-brand .tit2{ margin-bottom:10px; border-bottom:1px solid #e6e6e6; padding:20px 0 10px;}
.list2-brand li{ float:left;margin:0px 16px 15px 0/*margin:0 10px 10px 0;*/}
.list2-brand li img{max-width:170px;}
.list2-brand .proSearch a{ font-size:.75em;margin-right:30px; display:inline-block; line-height:30px;}
.list2-brand .proSearch a.cur{ color:#e60b0b; }

.proL2-item {margin-top:30px;}
.proL2-item .tit{ border-bottom:1px solid #e6e6e6; color:#e94848; font-size:1.25em; padding-bottom:14px; margin-bottom:20px;}
.proL2-item .list ul{ width:100%;}
.proL2-item .list li{ height:166px;overflow:hidden;border:1px solid #e6e6e6}
.proL2-item .list li span{ display:block; height:34px; line-height:34px; padding:0 38px 0 10px; color:#737373; font-size:.75em;border:none;border-top:1px solid #e6e6e6 }
.proL2-item .list li a{ display:block;height:165px; background:#fff;}
.proL2-item .list li a:hover span{  color:#fff; background:#e60b0b; border:0; color:#fff; background:#e60b0b url(../images/hvimg.png)/*tpa=http://www.yupan91.com/skin/images/hvimg.png*/ right top no-repeat; }
.proL2-item .list li:hover{ box-shadow:0 0 6px rgba(0,0,0,.3);}
.proL2-item .list li img{ max-width:100%; height:auto;}

.proNewlist{padding: 0 10px;}
.proNewlist ul{font-size: 12px;}
.proNewlist ul li{white-space: nowrap;overflow: hidden;}

.brandCon { font-size:.75em; line-height:24px;}
.brandCon em{text-decoration: underline;font-style: italic;}
.brandCon img:first-child{padding-left: 20px;max-width:250px;float: right;}
.brandCon img:nth-child(2){padding-left: 20px;max-width:250px;display: table-cell;margin: 0 auto;}




.brandcomm{border-top: 1px solid #e6e6e6;margin-top: 30px;padding-top: 20px;font-size: 12px;color: #999;}
.brandcomm img{width:100%;}
.brandcomm h4{padding-top:20px;}

.titBrand{ font-size: 1.5em;border-bottom:1px solid #e6e6e6; color:#e94848; position:relative; padding-bottom:14px; margin-bottom:20px;}
.titBrand span{float:right;color: #595959;font-size: 0.5em;}
.titBrand a{ position:absolute; right:10px;top:0; width:100px; height:20px; line-height:22px; color:#fff; background:url(../images/icon-b.png)/*tpa=http://www.yupan91.com/skin/images/icon-b.png*/  left top no-repeat; font-size:.75em;}
.titBrand a:hover{ background-position:left -20px;}
.titBrand a span{ padding-left:15px;}
.titBrand a.down{background-position:left -40px;}
.titBrand a.down:hover{background-position:left -60px;}

.proTab { background:#ededed; height:35px; border-top:1px solid #ededed; padding:0 1px; line-height:35px;}
.proTab li{ float:left; padding:0 40px; cursor:pointer;}
.proTab li.cur{ background:#fff; color:#e60b0b;}

.comConlist { border-bottom:1px solid #e6e6e6;  padding-bottom:20px; margin-bottom:20px;}
.comConlist a{ display:inline-block; padding:0 0 0 20px; font-size:.75em;}

.comCon{ display:none;}
.boxbod{ border:1px solid #ededed; border-top:0;}
.boxbod .comCon { padding:20px;font-size:0.75em;}
.boxbod .comCon p{ font-size:0.75em}
.boxbod .comCon h3{padding:30px 0 5px 0;font-weight:700;}

.groupImg{ float:left; width:33%;}
.groupImg .img{margin-bottom:10px;}
.groupImg .imgList li{ float:left; width:60px; height:44px; cursor:pointer;margin-right:10px;}
.groupImg .imgList li img{ border:1px solid #e3e3e3;}
.groupImg .imgList li .cur{ border:1px solid #e60b0b;}

.detailTabImg{ margin-bottom:40px;}

.brandcon{ float:right; width:66%;}
.brandcon h1{ font-size:1.25em; margin-bottom:25px; color:#4c4c4c;}
.brandcon .text{font-size:.75em; color:#737373;}

.downCon dl{ padding:20px 0; margin:0 20px; border-bottom:1px solid #e3e3e3;}
.downCon dl:last-child{ border-bottom:0;}
.downCon dt{ float:left; width:178px;}
.downCon dt img{ border:1px solid #e3e3e3;}
.downCon dd{ float:left; width:970px; padding:10px 0 0 0;}
.downCon dd a,
.comCondown a{ vertical-align:top; font-size:.75em; display:inline-block; min-height:30px; background:url(../images/pdf.png)/*tpa=http://www.yupan91.com/skin/images/pdf.png*/ no-repeat 0 2px; padding-left:30px; line-height:18px; width:135px; margin:0 24px 24px 0;}
.comCondown a{margin:0 10px 24px 0;}
.comCondown{ padding:20px 0;}

    .licheng{
        width: 100%;
        max-width: 1200px;
        border: 1px #e3e3e3 solid;
        margin: 0 auto;
        padding: 20px 20px 460px 20px;;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        background: url(../images/licheng.jpg)/*tpa=http://www.yupan91.com/skin/images/licheng.jpg*/ no-repeat 50% 100%;
        }
    .lclist{
        padding-bottom: 40px;
        width: 50%;
        background-image: url(../images/li-icon.png)/*tpa=http://www.yupan91.com/skin/images/li-icon.png*/;
        background-repeat: no-repeat;
    }
    .lclist:nth-child(2n+1){float: left;border-right: 20px #bbbbbb30 solid;position: relative;background-position:103.3% 0%;}
    .lclist:nth-child(2n+1) .lclist-box{margin-right: 30px;}
    .lclist:nth-child(2n){float: right;border-left: 20px #bbbbbb30 solid;position: relative;right: -20px;background-position:-3% 0%;}
    .lclist:nth-child(2n) .lclist-box{margin-left: 30px;}
    .lclist-box{
        padding: 5%;
        margin-right: 30px;
        border: 1px #d3d3d3 solid;
        box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.1);
    }
    .lclist:nth-child(2n+1) .lclist-box::after{
        content: '';
        position: absolute;
        top: 50px;
        left: 97.4%;
        border-right: 15px solid #bbbbbb30;
        border-top: 15px solid transparent;
        border-bottom: 15px solid transparent;
    }
    .lclist:nth-child(2n) .lclist-box::after{
        content: '';
        position: absolute;
        top: 50px;
        left: 0%;
        border-left: 15px solid #bbbbbb30;
        border-top: 15px solid transparent;
        border-bottom: 15px solid transparent;
    }
    .lcyear{font-size: 18px;font-weight: bold;}
    .lctext{font-size: 12px;}


.newsTop dt{ float:left;width:28%;}
.newsTop dt img{width:100%;}
.newsTop dd{ float:right; width:66%;}
.newsTop dd h3 a{ font-size:20px;  color:#4d4d4d;}
.newsTop dd .time{ font-size:12px;}
.newsTop dd .text{ line-height:24px; max-height:120px; overflow:hidden; margin-bottom:10px; }
.newsTop dd .more a{ display:inline-block;background:url(../images/icon-more.png)/*tpa=http://www.yupan91.com/skin/images/icon-more.png*/ no-repeat; width:20px; height:20px;}

.list-tit{ height:35px; line-height:35px; background:#ededed; margin-top:30px;}
.list-tit span{ float:left; margin-left:20px;}
.list-tit em{ float:right; width:90px; float:right;}
.list-tags ul{margin-top:20px;}
.list-tags ul a{text-align: center;
    border: 1px #ededed solid;
    text-transform: uppercase;
    padding: 5px 0px;
    white-space: nowrap;
    overflow: hidden;}
.list-tags ul a:hover{color:#fff;background-color:#e60b0b;border: 1px #e60b0b solid;}

.news-list li{overflow:hidden;padding:0 20px;line-height:40px; border-bottom:1px solid #e6e6e6;}
.news-list li i{float: right;}
.news-list li i a{text-align: right;color:#4c4c4c;}
.news-list li h2{width: 75%;white-space: nowrap;overflow: hidden;}
.news-list li h2 a{color:#4c4c4c;}
.news-list li:hover{background-color:#ededed;}
.news-list li a:hover{ color:#e60b0b;}
.news-list li p{color: #999;line-height: 22px;padding-bottom: 10px;}

.newsH1{ font-size:20px; line-height:22px; text-align:center; margin-bottom:10px;}
.newsTime{ background:#f8f8f8; height:30px; line-height:30px; margin-bottom:30px; text-align:center;}
#newsWrap{border-bottom:1px solid #e6e6e6; padding:0 2%; margin-bottom:30px; min-height:300px;}
#newsWrap h3{padding-bottom:15px;}
#newsWrap p{padding-bottom:15px;}
#newsWrap img{padding: 25px 0;margin: 0 auto;display: table-cell;max-width: 85% !important;height: auto !important;}
#newsWrap ol{margin-inline-start: 2em;margin-block-start: -1em;margin-block-end: 2em;}
#newsWrap ul{padding-bottom:20px;}

.arttags{font-size:12px;padding:6px 10px;margin:0 5px 8px 0;line-height:14px;border: 1px solid #E3E3E3;border-radius: 14px;transition-duration: 1s;}
.arttags:hover{color: #fff;background-color: #e62525;border: 1px solid #e62525;text-decoration: none;}


.cusForm{background:#1b1f26; color:#fff; padding:30px 0; margin-bottom:30px;}
.cusForm input[type="text"]{margin-right:15px; color:#737373; background:#fff; border:0; height:30px; padding:0 10px; width:35%; float:left;}
.cusForm .btn{ color:#fff; height:30px; background:#e60b0b; border:0; width:20%;  text-align:center; cursor:pointer;}
.cusForm .btn:hover{ background-color:#d20c0c;}
.cusForm .btn:active{ background-color:#c70c0c;box-shadow:0 0 3px rgba(255,255,255,.3); }
.cusForm .inputList{ margin:0 20px;}

.cusTxt{margin-top:20px;}
.cus-con .tit{ color:#4d4d4d; margin-bottom:8px;}
.cus-con .pd{ background:#f7f7f7; height:40px; line-height:40px; padding:0 15px; font-size:.75em;}
.cus-con .pd em{ color:#e60b0b;}
.cus-con .pd2{line-height:40px; padding:0 15px; margin-bottom:30px; border-bottom:1px solid #e6e6e6;font-size:.75em;}

.cus-table thead td{ background:#ededed; height:45px; line-height:45px; padding:0 15px; font-size:.85em;}
.cus-table td{ padding:10px 15px; border:1px solid #ededed; font-size:.75em;}
.cus-table td img{ border:1px solid #dfdfdf; margin-right:10px;}
.cus-table td em{ color:#e60b0b;} 

.tousuTxt input[type="text"]{ width:90%; border:1px solid #eaeaea; color:#999999; height:38px;line-height:38px; padding:0 10px;}
.tousuTxt input[type="text"]:focus{ border:1px solid #ccc;}
.tousuTxt textarea{ height:120px; width:97.8%;border:1px solid #eaeaea; color:#999999; padding:10px;}
.tousuTxt td{ padding:8px 0;}
.tousuTxt input[type="reset"],
.tousuTxt input[type="button"]{ margin:0 5px; cursor:pointer; border:0; width:140px; height:40px; color:#737373; background:#e6e6e6; font-size:14px;}
.tousuTxt input[type="reset"]{ color:#737373; background:#e6e6e6;}
.tousuTxt input[type="button"]{ color:#fff; background:#e60b0b;}
.tousuTxt input[type="reset"]:hover{ background:#d9d9d9;}
.tousuTxt input[type="button"]:hover{ background:#ce0909;}
.tousutit{ font-size:14px; margin-bottom:20px;}

.xunjTit{ background:#f7f7f7; height:36px; line-height:36px; padding:0 20px; margin:20px 0 10px; font-size:14px;}
.checkcode{width:50%;display: flex;}
.resetbtn{margin: 0 5px;
    cursor: pointer;
    border: 0;
    width: 140px;
    height: 40px;
    color: #737373;
    background: #e6e6e6;
    font-size: 14px;}
.resetbtn{background: #d9d9d9;}
.subbtn{margin: 0 5px;
    cursor: pointer;
    border: 0;
    width: 140px;
    height: 40px;
    color: #fff;
    background: #e60b0b;
    font-size: 14px;}
.subbtn:hover{background: #ce0909;}

.jobItem{ border-bottom:1px solid #ededed;}
.jobItem:first-child .oh{ display:block;}
.jobItem .oh{ display:none;}
.jobItem .bar{ cursor:pointer; height:46px; line-height:46px; position:relative; padding:0 20px;}
.jobItem .bar a{ position:absolute; right:20px;top:0; padding-right:20px; background:url(../images/job1.png)/*tpa=http://www.yupan91.com/skin/images/job1.png*/ no-repeat right center;}
.jobItem .bar span{ font-size:16px;}
.jobItem .barTxt{ padding:0 20px; background:#f7f7f7; height:40px; line-height:40px;}
.jobItem .barTxt .l,
.jobItem .barTxt .c,
.jobItem .barTxt .r{ width:32%; display:inline-block; color:#999999;}
.jobItem .barTxt .r{ float:right; text-align:right;}
.jobItem .barTxt .c{ text-align:center;}
.jobItem .con{padding:20px;border-bottom:1px solid #e6e6e6;}
.jobItem .btn{ text-align:right; padding:20px 0;}
.jobItem .btn a{ background:url(../images/btn3.png)/*tpa=http://www.yupan91.com/skin/images/btn3.png*/ no-repeat 87px 50% #e60b0b; font-size:14px; color:#fff; height:30px; line-height:30px;  display:inline-block; padding:0 35px 0 15px;}
.jobItem .btn a:hover{ background-color:#d90606;}

.jobCur .bar{ background:#e60b0b; color:#fff;}
.jobCur .bar a{ color:#fff; background:url(../images/job2.png)/*tpa=http://www.yupan91.com/skin/images/job2.png*/ no-repeat right center;}

.aMh{display:inline-block; vertical-align:middle; margin-right:10px;; width:100px; height:30px; cursor:pointer; line-height:30px; text-align:center; color:#fff; font-size:14px; background:#1b1f26; position:relative; overflow:hidden;}
.aMh:hover{background:#e60b0b; color:#fff;}
.aMh input{position:absolute; cursor:pointer; right:0; top:0; font-size:100px; opacity:0; filter:alpha(opacity=0);}

.testclass { position:relative; float:left; background:#1b1f26;margin:0 1px 10px 0; border:1px solid #ccc;}
.testclass img{ max-height:100px; width:auto; min-height:100px;}
.testclass a{ position:absolute; left:0;bottom:0; height:22px; line-height:22px; color:#fff; background:#ccc; width:100%; text-align:center;}
.testclass a:hover{ background:red;}

.qywh .left{ float:left; width:375px;}
.qywh .right{ float:right; width:375px;}
.qywh h4{ height:97px; padding:0 20px; color:#fff; font-size:30px; line-height:97px; background:#325f88;}
.qywh h4 img{margin-right:12px;}
.qywh .left h4{ background:#1c3557;}
.qywh dl{ border:1px solid #e3e3e3; padding:20px; line-height:24px; height:260px;}
.qywh dl dt{ font-size:14px; margin-bottom:10px;}
.qywh dl p{ background:url(../images/icons.png)/*tpa=http://www.yupan91.com/skin/images/icons.png*/ no-repeat 0 8px; padding-left:15px; margin-bottom:8px; color:#737373;}
.qywh dl p strong{ color:#4c4c4c;}

.qywhtab{margin-top:30px; border-bottom:1px solid #f7f7f7;}
.qywhtab th{ width:80px; vertical-align:top; font-size:14px;}
.qywhtab td,.qywhtab th{ padding:10px 20px;}
.qywhtab td{ color:#737373;}
.oddbg{ background:#f7f7f7;}

.fuwuWrap dt{ background:#f7f7f7;  padding:0 20px; line-height:30px; color:#4c4c4c; font-size:14px;}
.fuwuWrap dd{ line-height:24px; padding:20px; color:#737373;}

.disna p{ background:url(../images/icons.png)/*tpa=http://www.yupan91.com/skin/images/icons.png*/ no-repeat 0 8px;padding-left:15px; }

.ccon{ margin-bottom:30px;}
.ccon .cleft{ float:left;}
.ccon .cright{ float:right;}
.ccon .cright img{ float:left;}
.h1s { color:#e60b0b; font-size:20px; border-bottom:1px solid #ededed; padding-bottom:15px; margin-bottom:20px;}
.cleft p{ padding-left:24px; position:relative; line-height:30px; color:#737373;}
.cleft em{ position:absolute; left:-8px; top:0; width:30px; height:30px;}
.cleft .i-add{ background:url(../images/addBg_01.png)/*tpa=http://www.yupan91.com/skin/images/addBg_01.png*/ no-repeat;}
.cleft .i-tel{ background:url(../images/addBg_02.png)/*tpa=http://www.yupan91.com/skin/images/addBg_02.png*/ no-repeat;}
.cleft .i-fax{ background:url(../images/addBg_03.png)/*tpa=http://www.yupan91.com/skin/images/addBg_03.png*/ no-repeat;}
.cleft .i-eml{ background:url(../images/addBg_04.png)/*tpa=http://www.yupan91.com/skin/images/addBg_04.png*/ no-repeat;}



.webLink{ color:Red;}
.webLink:hover{ color:Red;}

.pagenext{margin-top: 30px;border-top: 1px solid #e6e6e6;padding: 22px 0;}
.pageNp { margin-bottom:30px;display: grid;grid-template-columns: repeat(2, 1fr);grid-gap: 10px;}
.pageNp li{white-space: nowrap;overflow: hidden;}
.pageNp li a{font-size:12px;}
.pageNp li a:hover{color:red;}

.tt{ font-weight:700; font-size:14px;}
.newsTj{display: grid;grid-template-columns: repeat(2, 1fr);grid-gap: 5px 10px;}
.newsTj em{ margin-right:10px; color:#999;} 
.newsTj li{white-space: nowrap;overflow: hidden;}
.newsTj li a:hover{color:red;}

.footlogo{display: grid;grid-template-columns: repeat(8, 1fr);grid-gap: 10px;justify-items: center;}
.footlogo .logoteam{position: relative;display: inline-block}
.footlogo .logoteam img{width:100%;height:40px;}
.footlogo .logoteam .text {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  opacity: 0; /* 默认不显示 */
  transition: opacity 0.5s ease; /* 渐变效果 */
  color: white; /* 文字颜色 */
  text-align: center;
  background-color: #000c;
}
 
.footlogo .logoteam:hover .text {
  visibility: visible;
  opacity: 1.0;
}


.erorr{padding:60px 0;margin:0 auto;}
.erorr p{padding:40px 0;font-size:14px;text-align:center;}

#maximg img{margin: 0 auto;display: table-cell;max-width: 85% !important;height: auto !important;}

.yewu{width: 100%;}
.yewu1{width: 100%;}
.yewutit{margin-top:20px;}
.yewuleibie{width: 100px;height: 40px;background-color: #e60b0b;position: relative;}
.yewuleibie::before {
    content: "";
    position: absolute;
    top: 0;
    left: 100px;
    border-top: 40px solid #e60b0b; /* 三角形颜色 */
    border-right: 40px solid transparent;
    }
.yewuleibie p{
    font-size: 16px;
    font-weight: bold;
    line-height: 40px;
    color: #fff;
    text-align: center;}

.yewuyuan{margin:0 auto 35px;width: 100%;border: #ededed 1px solid;}
.yewuyuanlist{
    border-bottom:#f5f5f5 1px solid;
    padding:20px 20px;
    display: grid;
    grid-template-columns:auto 30% 15% 15%;
    grid-gap: 0 20px;
    transition: all 0.5s;
}
.yewuyuanlist:hover{background-color: #ededed;transition: all 0.5s;}
.ywlist{padding: 10px 10px;border: 1px #f5f5f5 solid;box-shadow: 5px 5px 5px 1px rgba(0, 0, 0, 0.2);border-radius: 10px;}
.ywlist p{color:#737373;}
.yewuyuanlist:hover .ywlist{border: 1px #cac9c9 solid;background-color: #cac9c9;transition: all 0.5s;}
.ycewm{visibility: hidden;display: flex;justify-content: center;align-items: center;}
.yewuyuanlist:hover .ycewm{visibility: visible;}

.image-container {
  position: relative;
  display: inline-block; /* 根据需要可以调整 */
  width: 100px; /* 小图容器的宽度，与小图宽度相同或根据需求调整 */
  height: 100px; /* 小图容器的高度，与小图高度相同或根据需求调整 */
}

.small-image {
  width: 100%;
  height: auto;
  display: block;
}

.big-image-container {
  position: absolute;
  top: 0;
  right: 0; /* 初始位置在小图的右侧 */
  width: 350px; /* 根据需要设置大图的显示宽度 */
  height: auto;
  overflow: hidden;
  transition: left 0.3s ease; /* 添加过渡效果，使显示更平滑 */
  background: rgba(0, 0, 0, 0.5); /* 可选：为遮罩层添加背景色 */
  opacity: 0; /* 初始时隐藏大图容器 */
  visibility: hidden; /* 初始时隐藏大图容器 */
}

.big-image {
  width: 100%;
  height: auto;
}

/* 当鼠标悬停在小图上时显示大图 */
.image-container:hover .big-image-container {
  right: 0; /* 调整位置，使大图显示在小图旁边 */
  opacity: 1; /* 显示大图容器 */
  visibility: visible; /* 显示大图容器 */
}

/* 如果需要在大图下方留出一些空间（比如为了显示箭头或文字），可以调整top值 */
.image-container:hover .big-image-container {
  top: 0; z-index: 1;/* 或者其他你需要的值 */
}

.div-container {
  overflow-y: auto; /* 允许滚动 */
  position: relative; /* 可能需要这个以确保子 div 的定位 */
}
.lazy-load {
  opacity: 0;
  transition: opacity 0.5s ease-in-out; /* 简单的淡入过渡效果 */
}

.lazy-load.is-visible {
  opacity: 1;
  transform: translateY(-50px);
  transition: opacity 1.5s ease-in-out, transform 1.5s ease-in-out;
}

.lazy-load.is-visible:first-child{transform:none;transition: opacity 1.5s ease-in-out, transform 1.5s ease-in-out;}
.arrow {position: fixed;
    left: 50%;
    bottom: 0;
    margin: 30px auto 10px;
    width: 40px;
    height: 40px;
    background:linear-gradient(rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.75)),url(../images/arrow_down.gif)/*tpa=http://www.yupan91.com/skin/images/arrow_down.gif*/ center / cover;
    transition: opacity 0.5s ease; }
.arrow.arrow-load {display:none;}