/** pc-header **/
.pc-header{
    height: 4.06vw;
    background: url(/static/web/images/index/h.png) no-repeat;
    background-size: 100% 100%;
    z-index: 10;
}
.pc-header .logo{
    width: 14.1vw;
    left: 1.6vw;
    top: .46vw;
}

.pc-header .menu{
   /* margin-left: 20.57vw; */
   margin-left: 24.6vw;
}
.pc-header .menu .menu-item{
    margin-right: 8.18vw;
    float: left;
}
.pc-header .menu .menu-item::after{
    content: '';
    position: absolute;
    opacity: 0;
    width: 11.51vw;
    height: 4.58vw;
    left: 50%;
    bottom: -1.36vw;
    transform: translateX(-50%);
    -webkit-transition: all 0.2s ease-in 0;
    transition: all 0.2s ease-in 0s;
}
.pc-header .menu .menu-item:nth-child(1)::after{
    background: url(/static/web/images/index/h1-2.png) no-repeat center center;
    background-size: 100% 100%;
    margin-left: -.02vw;
    bottom: -1.35vw;
}
.pc-header .menu .menu-item:nth-child(2)::after{
    background: url(/static/web/images/index/h2-2.png) no-repeat center center;
    background-size: 100% 100%;
    margin-left: -.02vw;
}
.pc-header .menu .menu-item:nth-child(3)::after{
    background: url(/static/web/images/index/h3-2.png) no-repeat center center;
    background-size: 100% 100%;
    margin-left: .04vw;
}
.pc-header .menu .menu-item:nth-child(4)::after{
    background: url(/static/web/images/index/h4-2.png) no-repeat center center;
    background-size: 100% 100%;
    margin-left: .03vw;
}
.pc-header .menu .menu-item:hover::after{
    opacity: 1;
}
.pc-header .menu .m-img{
    height: 3.85vw;
    bottom: -.85vw;
    opacity: 1;
}

.pc-header .down{
    margin-top: .5vw;
    width: 9.63vw;
    height: 2.91vw;
    background: url(/static/web/images/index/b1-2.png) no-repeat center center;
    background-size: 100% 100%;
}
.pc-header .down:hover{
    background: url(/static/web/images/index/b1-1.png) no-repeat center center;
    background-size: 100% 100%;
}
/** m-header **/
.m-header{
    height: 12.87vw;
    background: url(/static/web/images/index/m/header.png) no-repeat;
    background-size: 100% 100%;
    z-index: 10;
}
.m-header .logo{
    width: 17.59vw;
    left: 2.31vw;
    top: 0.555vw;
}
.m-header .menu{
    padding: 0 2.78vw 0 21.8vw;
}
.m-header .text{
    color: #fff;
}
.m-header .text .name{
    margin-left: -1.3vw;
    font-size: 2.828vw;
    font-weight: bold;
    margin-top: 1.39vw;
    line-height: 4.26vw;
}
.m-header .text .slogan{
    font-size: 2.34vw;
    line-height: 3.52vw;
}
.m-header .pay{
    width: 24.444vw;
    height: 7.407vw;
    margin-top: 3.056vw;
    background: url(/static/web/images/index/m/pay.png) no-repeat center center;
    background-size: 100% 100%;
}

@media screen and (orientation: landscape) {
    .m-header{
        display: none;
    }
}

@media screen and (orientation: portrait) {
    .pc-header{
        display: none;
    }
}