.section1 {
    background: url(/static/image/index6.jpg) no-repeat;
    background-size: cover;
}

.section2 {
    background: url(/static/image/index6.jpg) no-repeat;
    background-size: cover;
}
.section3 {
    background: url(/static/image/index6.jpg) no-repeat;
    background-size: cover;
}
.section4 {
    background: url(/static/image/index4.jpg) no-repeat;
    background-size: cover;
}
.section5 {
    background: url(/static/image/index3.jpg) 100% 100%;
    background-size: cover;
}
.section6 {
    background: url(/static/image/index1.jpg) 100% 100%;
    background-size: cover;
}
.section7 {
    background: url(/static/image/index3.jpg) 100% 100%;
    background-size: cover;
}
.section8 {
    background: url(/static/image/index5.jpg) 100% 100%;
    background-size: cover;
}

.m {
width: 100vw;
height: 100vh;
}

.beer-slider {
display: block;
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}

.beer-slider>img {
width: 100%;
height: auto;
}

.beer-reveal {
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 50%;
overflow: hidden;
z-index: 1;
opacity: 0;
transition: opacity 0.35s;
}


.beer-reveal>img:first-child {
height: auto;
}

.beer-range {
position: absolute;
z-index: 2;
top: 0;
bottom: 0;
height: 100%;
margin: 0;
left: -1px;
width: calc(100% + 2px);
cursor: move;
-webkit-appearance: slider-horizontal !important;
-moz-appearance: none;
opacity: 0;
-ms-touch-action: auto;
touch-action: auto;
}

.beer-range::-webkit-slider-thumb {
-webkit-appearance: none;
height: 300vh;
}

.beer-range::-moz-range-thumb {
-webkit-appearance: none;
height: 300vh;
}

.beer-range::-ms-tooltip {
display: none;
}

.beer-handle {
position: absolute;
z-index: 2;
pointer-events: none;
opacity: 0;
top: 30%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
color: #000;
background: rgba(255, 255, 255, 0.5);
width: 48px;
height: 48px;
border-radius: 50%;
box-shadow: 0 0 6px rgba(0, 0, 0, 0);
transition: background 0.3s, box-shadow 0.3s, opacity 0.5s 0.25s;
cursor: move;
}

.beer-handle:before,
.beer-handle:after {
content: '';
position: absolute;
width: 10px;
height: 10px;
top: 50%;
border-top: solid 2px;
border-left: solid 2px;
transform-origin: 0 0;
cursor: move;
display: block;
}

.beer-handle:before {
left: 10px;
transform: rotate(-45deg);
}

.beer-handle:after {
right: 0;
transform: rotate(135deg);
}

.beer-range:focus~.beer-handle {
background: rgba(255, 255, 255, 0.85);
box-shadow: 0 0 3px rgba(0, 0, 0, 0.4);
}

/* .beer-slider[data-beer-label]:after,
.beer-reveal[data-beer-label]:after {
content: attr(data-beer-label);
position: absolute;
top: 1.5rem;
line-height: 1;
padding: 0.5rem;
border-radius: 0.125rem;
background: rgba(255, 255, 255, 0.75);
} */

.beer-slider[data-beer-label]:after {
right: 1.5rem;
}

.beer-reveal[data-beer-label]:after {
left: 1.5rem;
}

.beer-slider[data-beer-label=""]:after,
.beer-reveal[data-beer-label=""]:after {
content: none;
}

.beer-ready .beer-reveal,
.beer-ready .beer-handle {
opacity: 1;

}
#menu { position: fixed; right: 20px; top: 40%; z-index: 10; list-style-type: none; }
#menu li { width: 90px; height: 27px; margin-top: 7px; overflow: hidden;}
#menu a { display: block; height: 27px; padding-right: 30px; line-height: 27px; background: url(demo3/dot.png) right -34px no-repeat; color: #fff; text-align: right; text-shadow: 1px 1px 0px #333; text-decoration: none; overflow: hidden;}
#menu span { display: block; width: 60px; height: 27px; font-size: 12px; text-indent: 200px; opacity: 0.6; filter:alpha(opacity=60); overflow: hidden;}
#menu a:hover span { text-indent: 0;}
#menu .active a { background-position: right 0;}

/* 导航部分 */
.home-nav{
width:100%;
height:80px;
background-color: rgba(0, 0, 0, 0.5);
position: fixed;
top: 0;
left: 0;
z-index: 1000;
}
.home-nav .mid{
height:80px;
max-width: 1400px;
display: flex;
align-items: center;
margin:0 auto;
}

.home-nav .mid .logo img{
height:60px;
}
.home-nav .mid ul{
flex:1;
display: flex;
justify-content: flex-end;
}

.home-nav .mid ul li a{
font-size:15px;
color:#fff;
line-height: 80px;
display: block;
padding:0 15px;
border-bottom:2px solid rgba(0, 0, 0, 0);
border-top:2px solid rgba(0, 0, 0, 0);
}
.home-nav .mid ul li a:hover{
background-color: rgba(0, 0, 0, 0.5);
border-bottom:2px solid #fff;
}


/* 第3屏 */
.section3 .mid{
max-width: 1400px;
margin:0 auto;
}
.section3 .t{
width: 100%;
text-align: center;
}
.section3 .t h1{
font-size:32px;
font-weight: bold;
color:#fff;
position: relative;
}

.section3 .t h1 span{
color:#fff;
}
.section3 .t h2{
font-size:14px;
color:#fff;
opacity: 0.8;
margin-top:20px;
}
.section3 .con{
display: flex;
align-items: center;
justify-content: center;
margin-top:100px;
}
.section3 .con a{
display: flex;
position: relative;
align-items: center;
justify-content: center;
width:270px;
height:380px;
margin-right:40px;
}
.section3 .con a:last-child{
    margin-right:0;
}
.section3 .con a .pic{
    width:100%;
    height:100%;
    position: absolute;
    top:0;
    left:0;
    transition: all 0.4s;
}
.section3 .con a > div{
    position: relative;
    z-index: 1;
    width:150px;
    background-color: #00479dbb;
    text-align: center;
    padding:30px 0;
    border-radius: 10px;
}
.section3 .con a > div h4{
    font-size:16px;
    color:#fff;
    margin-top:10px;
    font-weight: bold;
}
.section3 .con a:hover .pic{
    transform: scale(1.2,1.2);
}

/* 第四板块 */
.section4 .mid{
    position: relative;
    max-width: 1400px;
    margin: 0 auto;
    height:600px;
}

.section4 .mid .lf{
    width:300px;
    height:600px;
    background-color: rgba(0,71,157,0.7);
    position: absolute;
    left:0;
}
.section4 .mid .lf h2{
    font-size:40px;
    font-weight: bold;
    color:#fff;
    text-align: center;
    margin-top:60px;
    padding-bottom: 60px;
    position: relative;
}
.section4 .mid .lf h2::after{
    content: '';
    width:50px;
    height:4px;
    border-radius: 100px;
    background-color: #fff;
    position: absolute;
    bottom: 0;
    left:50%;
    margin-left:-25px;
}
.section4 .mid .rt{
    width: 100%;
    position:absolute;
    z-index: 2;
    bottom: 40px;
}
.section4 .list{
    max-width:1400px;
    margin: 0 auto;
    position: relative;
    margin-top:50px;
    display:none;
    }
    .section4 .swiper{
    width: 90%;
    overflow: hidden;
    margin: 0 auto;
    }
    .section4 .swiper .item{
    background-color: #fff;
    overflow: hidden;
    display: block;
    }
    .section4 .swiper .item .pic{
    width:100%;
    }
    .section4 .swiper .item .pic img{
    width: 100%;
    transition: all 0.3s;
    }
    .section4 .swiper .item p{
    width:100%;
    text-align: center;
    padding:20px 10px;
    background-color: #f5f5f5;
    font-size:15px;
    color:#333;
    line-height: 30px;
    transition: all 0.3s;
    overflow:hidden; white-space: nowrap;text-overflow:ellipsis;
    }
    .section4 .swiper .item:hover img{
    transform:scale(1.1,1.1);
    }
    .section4 .swiper .item:hover p{
    background-color: #00479d;
    color:#fff;
    }
    .section4 .rt h6{
        font-size:15px;
        color:#333;
        text-align: right;
        padding-right:90px;
        font-weight: normal;
        position: relative;
    }
    
    .section4 .rt .tab{
        text-align: right;padding-right:90px;
        margin-top:60px;
    }
    .section4 .rt .tab a{
        display: inline-block;
        margin:0 10px;
        padding:10px 15px;
        border:1px solid #333;
        font-size:14px;
        color:#333;
    }
    .section4 .rt .tab a.cur{
        background-color: #00479d;
        color:#fff;
    }


/* 第五屏 */
.section5 .t{
    width:100%;
    text-align: center;
    }
    .section5 .t h2{
    font-size:36px;
    color:#fff;
    font-weight: bold;
    }
    .section5 .t p{
    color:#fff;
    font-size:20px;
    margin-top:20px;
    }

    .section5 .qr{
        width:250px;
        padding:10px;
        margin:0 auto;
        background-color: #fff;
        margin-top:30px;
    }
    .section5 .qr img{
        width:230px;
        height:230px;
    }
    .section5 .qr p{
        font-size:16px;
        color:#333;
        padding:20px 0 10px;
        text-align: center;
    }
    
    

.section5 .pro-con{max-width:1400px;background:rgba(0, 0, 0, 0.5);margin:0 auto;margin-top:60px;}

.section5 .pro-con ul{ padding: 0;overflow: hidden;width: 100%;}

.section5 .pro-con li{float:left; width:16.66%;height:152px; box-sizing: border-box;padding-top:33px; position: relative;}

.section5 .pro-con li:before{width:1px; height:80px; background:#414141;content:""; position: absolute;right:0;top:36px;}

.section5 .pro-con li em{display: block; width:50px; height:49px;margin:0 auto; position: relative;}

.section5 .pro-con li em i{display: block; width:50px; height:49px; line-height: 0; position: absolute;top:0;left:0;}

.section5 .pro-con li em i.default{-webkit-transform: translateX(0) rotate(0);transform: translateX(0) rotate(0);-webkit-transition: all 0.5s ease-out;transition: all 0.5s ease-out;}

.section5 .pro-con li em i.hover{position: absolute;left:0;top:0;opacity: 0; transform: scale(0);transition: .5s;}

.section5 .pro-con li span{display: block; height:48px; line-height: 48px; text-align: center;font-size: 16px; color:#fff;font-style: normal;}

.section5 .pro-con li:last-child:before{display: none;}

.section5 .pro-con li.cur{background:#00479d; }

.section5 .pro-con li.cur:before{display: none;}

.section5 .pro-con li.cur i.default{opacity: 0;visibility:hidden;-webkit-transform: translateX(100%) rotate(180deg);transform: translateX(100%) rotate(180deg);}

.section5 .pro-con li.cur i.hover{opacity: 1; transform: scale(1);}

.section5 .pro-con li.cur span{color:#FFF; font-weight: bold;}


/* 第六屏 */
.section6 .t{
    max-width: 1400px;
    margin:0 auto;
}
.section6 .t h2{
    font-size:36px;
    font-weight:bold;
    color:#00479d;
}
.section6 .t h3{
    font-size:15px;
    font-weight:normal;
    color:#333;
    margin-top:10px;
}
.section6 .list{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    max-width: 1400px;
    margin: 0 auto;
    margin-top:30px;
}
.section6 .list li{
    margin-bottom: 1.5%;
}
.section6 .list a{
    display: flex;
    width:260px;
    height:102px;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    overflow: hidden;
}
.section6 .list a img{
    max-width: 100%;
    max-height: 100%;
    transition: all 0.4s;
}
.section6 .list a:hover img{
    transform: scale(1.4,1.4)
}

/* 第7屏 */
.section7 .mid{
    max-width: 1200px;
    margin:0 auto;
    position: relative;
    display: flex;
}
.section7 .mid .bg{
    width:400px;
    height:540px;
    background-color: rgba(0,71,157,0.7);
}
.section7 .mid .t{
    font-size:36px;
    color:#fff;
    padding-top:80px;
    padding-left:30px;
}
.section7 .mid .t2{
    font-size:18px;
    color:#fff;
    padding-top:20px;
    padding-left:50px;
}
.section7 .mid .rt{
    flex:1;
    margin-left:-160px;
    text-align: right;
}
.section7 .mid ul {
    clear: both;
    margin-top:30px;
}
.section7 .mid ul li{
    margin-top:10px;
}
.section7 .mid ul li a{
    display: flex;
    align-items: center;
    border:1px solid rgba(255, 255, 255, 0.2);
}
.section7 .mid ul li a .pic{
    width:160px;
    height:120px;
    overflow: hidden;
}
.section7 .mid ul li a .pic img{
    width:100%;
    height:100%;
    transition: all 0.5s;
}
.section7 .mid ul li a  .info{
    background-color:#fff;
    flex:1;
    height:120px;
    text-align: left;
    padding:0 30px;
}
.section7 .mid ul li a .info h2{
    font-size:16px;
    font-weight: bold;
    color:#333;
    margin-top:20px;
}
.section7 .mid ul li a .info p{
    font-size:14px;
    line-height: 1.4;
    margin-top:10px;
    overflow : hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp:1;-webkit-box-orient: vertical;
}
.section7 .mid ul li a .info span{
    font-size:14px;
    color:#999;
    display: inline-block;
    margin-top:16px;
}
.section7 .mid ul li a:hover img{
    transform: scale(1.2,1.2);
}
.section7 .mid ul li a:hover h2{
    color:#00479d;
}
.section7 .mid .more{
    display: inline-block;
    margin:0 10px;
    padding:10px 15px;
    border:1px solid #ddd;
    font-size:14px;
    color:#fff;
    margin-top:20px;
}
.section7 .mid .more:hover{
    background-color: #00479d;
}
.section8 .centerItem {
    width: 800px;
    height: 500px;
    background-color: rgba(0,71,157,0.7);
}
.section8 .mid{
    display: flex;
    max-width: 1400px;
    margin:0 auto;
    align-items: center;
}
.section8 .mid .rt{
    flex:1;
    padding-left:30px;
}
.section8 .mid .rt h2{
    font-size: 32px;
    color:#333;
}
.section8 .mid .rt h3{
    font-size: 16px;
    color:#333;
    font-weight: normal;
    margin-top:30px;
    border-bottom:1px solid #ddd;
    padding-bottom: 30px;
}
.section8 h4{
    font-size:14px;
    color:#333;
    margin-top:40px;
    font-weight: normal;
}
.section8 .mid .rt dl {
    display: flex;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.4);
    border:1px solid rgba(255,255,255,0.7);
    padding:30px;
    margin-top:30px;
}
.section8 .mid .rt dl dt img{
    height:30px;
    margin-right:20px;
}
.section8 .mid .rt dl dd{
    font-size:18px;
    color:#fff;
}
.section8 .index-copy{
    width:100%;
    padding:20px 0;
    text-align: center;
    position: absolute;
    bottom: 0;
    font-size:14px;
    color:#7e7e7e;
    
}
.section8 .index-copy a{
    color:#7e7e7e;
}

/********* 处理动画 ******/

.trans-scale{
    transition: all 1s ease-out;
    transform: scale(0,0);
}
.trans-translateYt{
    transition: all 1.2s ease-out;
    transform:translateY(-300px);
    opacity: 0;
}
.trans-translateYb{
    transition: all 1.2s ease-out;
    transform:translateY(300px);
    opacity: 0;
}

.trans-translateXl{
    transition: all 1.2s ease-out;
    transform:translateX(-300px);
    opacity: 0;
}
.trans-translateXr{
    transition: all 1.2s ease-out;
    transform:translateX(300px);
    opacity: 0;
}
.trans-opcity{
    transition: all 1.2s ease-out;
    opacity: 0;
}

/* 第三屏动画 */
.section3.active .mid .t{
    transform: scale(1,1)
}
.section3.active .con a:nth-of-type(1),
.section3.active .con a:nth-of-type(2),
.section3.active .con a:nth-of-type(3),
.section3.active .con a:nth-of-type(4)
{
    transform:translateY(0);
    opacity: 1;
}
/* 第四屏动画 */
.section4.active .lf{
    transform:translateX(0);
    opacity: 1;
}
.section4.active .rt{
    transform:translateY(0);
    opacity: 1;
}

/* 第五屏动画 */
.section5.active .t{
    transform: scale(1,1)
}
.section5.active .qr{
    opacity: 1;
}
.section5.active .pro-con{
    transform:translateY(0);
    opacity: 1;
}

/* 第六屏动画 */
.section6.active .t{
    transform:translateX(0);
    opacity: 1;
}
.section6.active .list{
    transform:translateY(0);
    opacity: 1;
}

/* 第七屏动画 */
.section7.active .bg{
    transform:translateX(0);
    opacity: 1;
}
.section7.active .rt{
    transform:translateY(0);
    opacity: 1;
}
/* 第八屏动画 */
.section8.active .lf{
    transform:translateX(0);
    opacity: 1;
} 
.section8.active .rt{
    transform:translateX(0);
    opacity: 1;
}