@charset "utf-8";
body{ overflow-x:hidden;}
body{ color:#54565A; height:auto; box-sizing:border-box; font-size:16px; line-height: 1.4;}
.user-select{-moz-user-select: none; /*火狐*/
-webkit-user-select: none;  /*webkit浏览器*/
-ms-user-select: none;   /*IE10*/
-khtml-user-select: none; /*早期浏览器*/
user-select: none;}
a{ color:#3f3b3a; text-decoration:none;}
a:hover{ text-decoration:none; color:#a90000;}
i,em{ font-style:normal;}

.fNav .h3 span,
.fNav .h3 i,
.menu .h3 span,
.menu .h3 i{
font-family:"iconfont" !important; font-size:1em; font-style:normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;
}

.menu,
.menu .h3 a,
.header .wp,
.logo img{
transition: all 0.3s ease-out;
}
.ddddddddd{ transform:scale(1.05,1.05);}


.videoAD{ position: fixed; left: 0px; top: 0px; right: 0px; bottom: 0px; background: #000; z-index: 9999; overflow: hidden; cursor: pointer;}
.videoAD video{ width: 100vw; height: 100vh; object-fit: cover;}
.videoClose{position: absolute; left: 50%; bottom:30px; font-size: 18px; width: 2em; height: 2em; line-height: 2em; text-align: center; color: #a90000; background: #fff; border-radius: 50%; text-align: center; transform: translateX(-50%);}

/*淡入 向上 循环*/
.FmovefadeInDown,
.pageNext:before{animation:FmovefadeInDown 1.5s infinite ease both;}
@keyframes FmovefadeInDown{0%{opacity:0;transform:translateY(-10px)}90%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(15px)}}
.FmovefadeInUp{animation:FmovefadeInUp 1.5s infinite ease both;}
@keyframes FmovefadeInUp{0%{opacity:0;transform:translateY(30px)}70%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-20px)}}
.Frotation360{animation:Frotation360 2s linear infinite;}
@keyframes Frotation360 {from{transform:rotate(0)}to{transform:rotate(360deg)}}
.FpulseSlow{animation:FpulseSlow infinite alternate 1s ease-in-out;}
@keyframes FpulseSlow {0% {transform:scale(1);opacity:1;}100%{transform:scale(0.9);opacity:0.5;}}
.lightSpeedIn{animation:lightSpeedIn infinite alternate 3s ease-in-out;}
@keyframes lightSpeedIn{0%{transform:skewX(-10deg);}60%{transform:skewX(10deg);}90%{transform:skewX(-5deg);}100%{transform:none;}}



.menu-link { display:none; box-sizing: border-box; position:absolute; top:50%; margin-top:-20px; right:-8px;font-size: 11px;z-index: 10;width:40px;height:40px; padding:7px; transition: all 0.2s ease-out;}
.menu-link em{ position:absolute; z-index:3; right:100%; top:50%; text-transform:uppercase; height:40px; line-height:40px; margin-top:-20px; font-size:16px; color:#000; display: none;}
.menu-link:hover,
.menu-link:focus {}
.menu-link span {position: relative;display: block;margin-top:12px;}
.menu-link span,
.menu-link span:before,
.menu-link span:after {background-color: #000;width: 100%;height:2px; transition: all 0.4s;box-sizing: border-box;}
.menu-link span{transition:none;}
.menu-link span:before,
.menu-link span:after {position: absolute;top: -8px;content: " ";}
.menu-link span:after {top:8px;}
/*.menu-link.active{ background:#a90000; border-radius: 50%;}*/
.menu-link.active span {background: transparent;}
.menu-link.active span:before { background-color:#fff; transform: rotate(45deg); top:0px;}
.menu-link.active span:after { background-color:#fff; transform: rotate(-45deg); top:0px;}
.menu-link.active em{ display:none;}

.wp{ position: relative; width: 1240px; margin: 0 auto;}

.header{ position:relative; padding-top: 70px; z-index: 9;}
.header .wp{ width: 1280px;}
.header .wp:before{ content: ''; position: absolute; left: 0; bottom: 0; right: 0; height: 1px; background:#7b7a78;}


.logo{ position:absolute; left:0px; top:50%; margin-top:-0.5em; font-size:36px; line-height: 1;}
.logo img{ height:1em; width:auto; display: block;}

.instagram{ position: absolute; right: 0px; top: -70px;  height: 44px; width: 44px; line-height: 44px; text-align: center; font-size:24px;}

.tNav{ position: absolute; top: -70px; right:54px; padding: 0; display: none;}
.tNav .i{ display: none; width: 32px; height: 32px; line-height: 32px; border-radius: 50%; font-size:20px; color: #fff; text-align: center;}
.tNav.active .i:before{ content:"\e80c";}
.tNav .box{}
.tNav .box .pd{ display: flex;}
.tNav .box a{ height: 44px; line-height: 44px; font-size: 16px; padding: 0 10px; display: block;}



.menu{ text-align: center; margin: 0 0 0 392px; position: relative;}
.menu ul{ display: flex; justify-content: space-between;}
.menu li{ float: left; position: relative; margin: 0 6px;}
.menu li:last-child{ margin-right: 0px;}
.menu .h3{ position: relative;}
.menu .h3 a{ display: block; color: #000; height:90px; line-height: 90px; font-size: 16px; font-weight: bold;  position: relative; }
/*.menu .h3 a:before{content: '';position: absolute;left: 50%; bottom:0px; margin: 0 0 0 -7px;width: 0;height: 0;border-left: 8px solid transparent;border-right: 8px solid transparent; border-bottom: 9px solid #d9471b; opacity:1; display: none;}*/

.menu .h3 strong{ font-weight:normal;}
.menu .h3 span{ display:none; position:absolute; right:30px; top:50%; margin-top:-20px; font-size: 16px; width:40px; height:40px; text-align:center; line-height:40px; cursor:pointer; margin-right:-10px; }
.menu .h3 span:before{ content: "\e604"; }
.menu .h3 span.active:before { content: "\e606"; }
.menu .h3 i{ display:none; position:absolute; right:30px; top:50%; margin-top:-20px; font-size: 16px; width:40px; height:40px; text-align:center; line-height:40px; margin-right:-10px;}
.menu .h3 i:before { content:"\e8e9"; }

.menu .box{ position: absolute; top: 100%; left:50%; width: 160px; margin-left: -80px; text-align: center; opacity: 0; transform: translateY(-10px); pointer-events: none; transition: 0.4s all;  padding:10px 0; background: #fff; border-radius: 6px; box-shadow: 0 0 5px rgba(0,0,0,0.2); transition-delay: 0.2s; display: none;}
.menu .box .npd{}
.menu .box .li{ }
.menu .box .t{ padding: 6px 0;}
.menu .box .t a{ font-size: 14px; line-height: 1.4; display: block; text-align: center; color:#000; font-weight: normal; box-sizing: border-box; position: relative; overflow: hidden; width: 8.4em; margin: 0 auto; transition: 0.4s all;}

.menu .box .c{ position: absolute; left:0; top: 100%; padding-top: 10px; visibility: hidden; opacity: 0; transform: translateY(-10px); pointer-events: none; transition: 0.3s all; text-align: left;}
.menu .box .c .nnpd{background:rgba(255,255,255,0.5); border-radius: 0 0 5px 5px; box-sizing: border-box; padding: 16px 26px; box-shadow: 0 0 5px rgba(0,0,0,0.2);}
.menu .box .c a{ margin: 0 1em; font-size: 16px; color: #000; position: relative; line-height: 2; display: block;}
.menu .box .c a:hover{ color:#204d9e;}
.menu .box .c a:hover:before{ display: block;}

.menu li:hover .h3 a{ color:#a90000;}
.menu li:hover .h3 a:after{ content: ''; left: 50%; transform: translateX(-50%); width: 4em;}
/*.menu li:hover .box{ visibility: visible; opacity: 1; transform: translateY(0px); pointer-events:auto;}*/


.menu li.curr .h3 a{ color: #a90000;}
.menu li.curr .h3 a strong{ font-weight: bold;}


.menu .box .li:hover .t a{ color:#a90000;}
.menu .box .li:hover .c{ visibility: visible; opacity: 1; transform: translateY(0px); pointer-events:auto;}



.iBannerB{ position: relative; z-index: 4; overflow: hidden; min-height: 100vh; background: #fff;}
.iBannerB:before{ content: ''; position: absolute; bottom: 0px; border-radius: 50%;height: 60px;transform: translate(0,50%);background: #f7b614;left: -3%;right: -3%; z-index: 2; display: none;}
.iBannerB .pd{ display: block; background: #fff;}
.iBannerB .img{ width: 100%; position: relative; overflow: hidden;}
.iBannerB .img:before{ content: ''; position: absolute; left: 0px; top: 0px; height: 200px; right: 0px; background: linear-gradient(to bottom,rgba(0,0,0,0.3),rgba(0,0,0,0));}
.iBannerB .img img{ height:calc(100vh - 0px); width:100vw; object-fit: cover; /*aspect-ratio: 1920/1080;*/}
.iBannerB .text{ position: absolute; left: 0px; right: 0px; bottom: 80px; color: #fff;}
.iBannerB .npd{ padding: 0;}
.iBannerB .text .h3{ font-size:64px; line-height: 1.4; font-weight: bold;}
.iBannerB .text .m{ padding-top: 50px;}
.iBannerB .swiperArrow{ display: block;}
.iBannerB .swiperPrev{}
.iBannerB .swiperNext{}
.iBannerB .swiperDots{ display: flex; bottom: 60px; left: auto; right: 110px; margin-right: 30px;}

.iBannerB .h3{ opacity: 0; transform: translateY(-20px); transition: 0.6s all; transition-delay: 0.6s;}
.iBannerB .m{ opacity: 0; transform: translateY(-20px); transition: 0.6s all; transition-delay: 1s;}

.iBannerB .swiper-slide-active .h3{ opacity: 1; transform: translateY(0px);}
.iBannerB .swiper-slide-active .em{ opacity: 1; transform: translateY(0px);}
.iBannerB .swiper-slide-active .m{ opacity: 1; transform: translateY(0px);}

.pageNext{ position: absolute; top: 140px; right: 7.8125%; cursor: pointer; z-index: 3;}
.pageNext a{ display: block; color: #fff;}
.pageNext i{ display: block; height: 2em; width: 2em; line-height: 2em; margin: 0 auto; border: 1px solid #fff; font-size: 16px; color: #fff; border-radius: 50%; text-align: center;}
.pageNext span{ display: block; line-height: 1; padding-top: 0.5em; font-size: 14px;}
.pageNext a:hover i{ background: #a90000; color: #fff; border-color: #a90000;}

.more1{ }

.iMain{ background:no-repeat center center; background-size:cover; position: relative; overflow: hidden; width: 100%;}





.home{ position: fixed; left: 0; top: 0; right: 0; bottom: 0; background: url("../images/home_bg.png") no-repeat center center; background-size:100% 100%;}
.home .pd{ display: block; position: absolute; left: 0; top: 0; right: 0; bottom: 0;}
.home .img{ width: 50%; position: absolute; left: 0; top: 0; bottom: 0; /*background: url("../images/home_img.jpg") no-repeat center center;*/ background-size:cover;}
.home .img img{ width: 100%; height: 100%; object-fit: cover; object-position: center center;}
.home .img .em{ position: absolute; top: 0; right: 0; bottom: 0; width: 4em; text-align: center; background: rgba(0,0,0,0.5); display: flex;}
.home .img .em em{ white-space: nowrap; display: block; transform: rotate(-90deg); transform-origin: left center; color: #fff; position: absolute; left:50%; bottom: 1em; font-size:1.25em;}


.home .img1{ display: block;}
.home .img2{ display: none;}
.home .text{ position: absolute; left: 50%; top: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; color: #000;}
.home .npd{ width: 60%; text-align: center;}
.home .h3{ font-size:1.6em; padding-bottom: 1.875em; margin-bottom: 0.625em; border-bottom: 16px solid #000;}
.home .p{ display: flex; justify-content: space-between;}
.home .p img{ height: 2em; width: auto;}
.home{ font-size: 1.04166666666667vw;}


.pMain{ padding: 40px 0;}
.pMainFl{ width: 310px; position: absolute; left: 0; top: 0;}
.pNavA{}
.pNavA li{ border-bottom: 1px solid #000; margin-bottom: 25px;}
.pNavA a{ display: block; height: 25px; line-height: 25px; color: #666;}
.pNavA li.curr a{ color: #a90000; font-weight: bold;}
.pMainFr{ margin-left: 372px; min-height: 400px;}

.infoA{ font-size: 18px; line-height: 1.75; text-align: justify;}
.infoA strong{ font-weight: bold;}
.infoA p{ margin-bottom: 1em;}
.infoA p:last-child{ margin-bottom: 0em;}
.infoA img{ display: inline-block; max-width: 100%; height: auto;}
.infoA video{aspect-ratio:640/360; width: 100%; height: auto; display: inline-block; object-fit: contain;}
.infoA hr{ height: 1px; border: none; background: #ccc;}



.pImg{ padding-top: 40px;}
.pImg.full .wp{ width: auto;}
.pImg img{ width: 100%; height: auto; display: block;}

.proInfo{}
.proInfo table{ width: 100%; border:none; border-collapse: collapse; table-layout:fixed; font-size: 16px; line-height: 1.2;}
.proInfo td{ padding:8px 0; border:none; vertical-align: text-top; height: 34px;}
.proInfo tr td:nth-child(1),
.proInfo tr td:nth-child(3){ font-weight: bold; width: 7em;}

/*
.proInfo tr:nth-child(1) td,
.proInfo tr:nth-child(5) td,
.proInfo tr:nth-child(6) td{ height: 60px;}
*/


.proInfoHead{ display: block;}
.proImgB{ width: 480px; float: right; margin-top: 25px; position: relative;}
.proImg{ position: relative;}
.proImg img{ width: 100%; height: auto; display: block;}
.proImg .swiperArrow{ display: block; z-index: 2;}
.pNavB{ width: 260px;}
.pNavB li{ border-bottom: 1px solid #000; margin-bottom: 25px;}
.pNavB li:last-child{ margin-bottom: 0;}
.pNavB a{ display: block; height: 25px; line-height: 25px; color: #666; overflow: hidden;}
.pNavB li.curr a{ color: #a90000; font-weight: bold;}

.proInfoA{ display: flex; justify-content:space-between; position: relative; margin-bottom:60px;}
.proHead{ width: 580px;}
.proHead h1{ display: none;}
.proImgA{ display: none;}
.proHead .text{ display: flex; justify-content: space-between;}
.proGrapes{ width: 260px;}
.proProduction{ width: 260px;}

.ptit1{ height:25px; line-height:25px; border-bottom: 1px solid #b9b9b9; margin-bottom: 10px; font-size: 16px; font-weight: bold;}

.proInfoB{ position: relative; margin-bottom:24px;}

.proTechnical{ width: 348px; float: left;}
.proTasting .c{ text-align: justify;}

.contact{ padding: 50px 0 ;}
.contact .pd{ display: block;}
.contact .img{ width: 480px; margin: 0 auto 30px auto;}
.contact .text{ text-align: center;}
.contact .h3{ font-size:24px; line-height: 1.2; margin-bottom: 0.5em; font-weight: bold;}
.contact .p{ font-size: 16px; line-height: 1.4;}

.msg{}
.msgTit{ font-size: 24px; line-height: 1.2; margin-bottom: 1em; font-weight: bold; text-align: center;}
.msgCon{ width: 768px; margin: 0 auto;}
.msgCon ul{ display: flex; flex-wrap: wrap; margin: 0 -40px;}
.msgCon li{ width: 50%; margin-bottom: 10px;}
.msgCon li.w100{ width: 100%;}
.msgCon .pd{ margin: 0 40px;}
.msgCon .t{ line-height: 1.2; font-size: 12px; margin-bottom: 0.2em;}
.msgCon .c{ font-size: 14px;}


.ipt_t2{ width: 100%; height: 32px; display: block; border: 1px solid #ccc; border-radius: 6px; padding: 0 15px; font-size: 1em; box-sizing: border-box;}
.ipt_t2:focus{ box-shadow: 0 0 6px rgba(164,0,0,0.3);outline:none;}
.ipt_text2{ width: 100%; height: 72px; display: block; border: 1px solid #ccc; border-radius: 6px; padding: 8px 15px; font-size: 1em; box-sizing: border-box;}
.ipt_text2:focus{ box-shadow: 0 0 6px rgba(164,0,0,0.3);outline:none;}
.ipt_b2{ height: 32px; width: 200px; background: #000; color: #fff; font-size: 1em; border: none; border-radius: 6px; display: block; margin: 0 auto;}


.proList{}
.proList li{ border-bottom: 1px solid #ccc; padding: 30px 0;}
.proList li:first-child{ padding-top: 0;}
.proList li:last-child{ border-bottom: none; padding-bottom: 0;}
.proList .pd{ display: block;}
.proList .img{ width: 320px; float: left;}
.proList .text{ margin-left: 320px; padding-left: 40px; padding-top: 20px;}
.proList .h3{ font-size: 2em; line-height: 1.2; margin-bottom:0.5em;}
.proList .p{ font-size: 1em; text-align: justify;}






@media screen and (min-width:1920px){
}
@media screen and (max-width:1680px){
}
@media screen and (max-width:1600px){
}
@media screen and (max-width:1440px){
}
@media screen and (max-width:1366px){

}
@media screen and (max-width:1280px){
body{ font-size: 14px;}
.wp{ width: 1100px;}
.header .wp{ width: 1140px;}
.proTechnical{ width: 308px;}
.proImgB{ width: 420px;}
.pMainFl{ width: 275px;}
.pMainFr{ margin-left: 330px;}
.proHead{ width: 480px;}
.proGrapes{ width: 180px;}
.proInfo table{ font-size: 14px;}
.proInfo td{ height: 32px;}
.infoA{ font-size: 14px;}
.contact{ padding: 0 0 30px 0 ;}
.menu .h3 a{ height: 76px; line-height: 76px;}
}
@media screen and (max-width:1200px){

.header .wp{ width: 960px;}
}
@media screen and (max-width:1024px){
body{ min-width:inherit; font-size: 14px;}
.header .wp{ margin: 0 30px; width: auto;}
.wp{ margin:0 60px; width: auto;}
.header{}
.logo{ font-size: 32px;}
.menu .h3 a{ height: 60px; line-height: 60px;}
.pMainFl{ width: 230px;}
.pMainFr{ margin-left: 304px;}

.proTechnical{ width: auto; float:none;}
.proImgB{ width: auto; float: none;}


}
@media screen and (max-width:980px){
.header .wp,
.wp{ margin: 0 30px;}
.logo{ position: relative; left: auto; top: auto; margin-top: auto;}
.pMainFl{ width: auto; position: relative; left: auto; top: auto;}
.logo{ text-align: center; left: 50%; transform: translateX(-50%); display: block; margin-bottom: 20px;}
.logo img{ display: inline-block;}
.menu{ margin: 0px; padding: 20px 0; }
.menu ul{ }
.menu li{ float: none; margin: 0;}
.menu .h3 a{ font-size: 14px; height: 24px; line-height: 24px;}
.pNavA{ margin-bottom: 50px;}
.pNavA a{ text-align: center;}
.pMainFr{ margin: 0px;}
.infoA{ font-size: 14px;}
.proInfoA{ display: block;}
.pNavB{ width: auto; margin-bottom: 50px;}
.proHead{ display: block; width: auto;}

.proHead .text{ display: block;}
.proGrapes{ width: auto; margin-bottom: 40px;}
.proProduction{ width: auto; }
.proTechnical{ width: auto; float: none;}
.contact .img{ width: 320px;}
.msgCon{ width: auto;}
.msgCon ul{ margin: 0 -20px;}
.msgCon .pd{ margin: 0 20px;}


.proImgA{ display: block; margin-bottom:40px;}
.proImgB{ width: auto; float: none; display: none;}
}
@media screen and (max-width:720px){
.home{ font-size:4.16666666666667vw;}
.home .img{ width: auto; right: 0;}
.home .img .em{ background: rgba(0,0,0,0.75); width: 3em;}
.home .text{ left: 0; background: rgba(0,0,0,0.5); color: #fff; right: 0;}
.home .npd{ width: 80%;}
.home .h3{ border-bottom:5px solid #fff;}
.home .img1{ display: none;}
.home .img2{ display: block;}
.home .p{ font-size: 0.8em;}

.proList .img{ width: auto; float: none;}
.proList .text{ margin: 0px; padding: 30px 0 0 0;}
}
@media screen and (max-width:640px){

}
@media screen and (max-width:480px){
.header .wp,
.wp{ margin: 0 5%;}
.contact .img{ width: 80%;}
.contact .h3{ font-size: 24px;}
.contact .p{ font-size: 14px;}
.msgTit{ font-size: 24px; margin-bottom: 1em;}
.msgCon ul{ width: auto; display: block; margin: 0px;}
.msgCon li{ width: auto;}
.msgCon .pd{ margin: 0px;}
}
@media screen and (max-width:413px){

}
@media screen and (max-width:374px){

}



.backTop{ position: fixed; right: 20px; bottom: 100px; width: 48px; height: 48px; background: #ccf0ff; color: #333; border-radius: 8px; cursor: pointer; text-align: center; line-height: 48px; z-index: 10; font-size: 24px;}
.backTop:hover{ background: #a90000; color: #fff;}

/*视频*/
.play_btn{ background:#000; display:block;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;-ms-transition: all 0.3s ease;-o-transition: all 0.3s ease;transition: all 0.3s ease; position:relative;}
.play_btn i{ position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; background: rgba(0,0,0,0.1); transform: translateZ(0); transition: 0.3s all; z-index: 2;}
.play_btn i:before{ font-size: 80px; width: 1em; height: 1em; line-height: 1; position: absolute; top: 50%; left: 50%; margin: -0.5em 0 0 -0.5em; color: #fff;}
.play_btn:hover i{ color:#fff; background:rgba(0,0,0,0.5);}

.video_bg{ position:fixed; left:0px; top:0px; right:0px; bottom:0px; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:42; display:none;}
.video_box{ position:fixed; width:1200px; height:auto; left:50%; top:50%; margin:-360px 0 0 -600px; z-index:43; display:none;}
.video_box .img_cut{ background:#000;}
.video_box i{ color:#fff; width:40px; height:40px; position:absolute; text-align:center; line-height:40px; background-color:#C01924; border-radius:50%; cursor:pointer; z-index:37; left:50%; bottom:-50px; margin-left:-20px;}
.video_box i:hover{ background: #802C19;}
.video_box video{ width:100%; height:auto; display:block;}
.video_box iframe{ width:100%; height:100%; display:block; position:absolute; left:0px; top:0px; right:0px; bottom:0px; z-index:36;}
.video_box_vr i{ position:fixed; top:30px; right:30px; bottom:auto; left:auto; margin:0px;}
@media screen and (max-width:768px){
.video_box{ left:0px; margin:0; top:0px; height:auto; right:0px; width:auto;}
.video_box video{ height:auto;}
}

/*搜索*/
.searchMain1{ background: #f5f5f5;}
.search_tit{ font-size:18px; height:20px; line-height:20px; color:#333; border-left:2px solid #a90000; padding-left:14px; margin-bottom:24px;}
.search_tit span{ color:#a90000; margin-left:0.5em;}
.search_list{ background:#fff; padding:40px; min-height:25vh; border-radius: 12px;}
.search_list ul{ border-top:1px dashed #ccc;}
.search_list li{ padding:15px 0; border-bottom:1px dashed #ccc;}
.search_list .pd{}
.search_list .h3{ font-size:18px;}
.search_list .h3 em{ color:#a90000; margin-right:10px;}
.search_list .em{ font-size:14px; color:#ccc;}
.search_list .p{ font-size:14px; color:#666;}

@media screen and (max-width:768px){
.iMainSearch1{ padding: 40px 0;}
.search_tit{}
.search_list{ padding: 30px; min-height: 20vh;}
.search_list .h3{ font-size:14px;}
}
@media screen and (max-width:480px){
.search_list{ padding: 25px;}
}
@media screen and (max-width:413px){
.search_list{ padding: 20px;}
}
@media screen and (max-width:374px){
.search_list{ padding: 15px;}
}




/*分页*/
.fpage{ text-align:center; padding:30px 0 0 0; font-size:20px;}
.fpage ul{ display:inline-block; vertical-align:bottom;}
.fpage li{ padding:0 0.25em; float:left;}
.fpage .disabled{}
.fpage a{}
.fpage a,
.fpage span{height: 32px;line-height: 30px;display: block;border-radius:3px;color: #fff;font-size: 14px;float: left; min-width: 30px; text-align: center; padding: 0 5px; box-sizing: border-box;background: rgba(255,255,255,0.5); border: 1px solid #d9d9d9; color: #333;}

.fpage .active a,
.fpage .active span{ background:#a90000; color:#fff; border-color:#a90000;}

@media screen and (max-width:640px){
.fpage li{ padding: 0 3px;}
.fpage a,
.fpage span{ height: 24px; line-height: 24px; font-size: 10px; min-width: 24px;}
}












