[v-cloak] {
    display: none;
}

body {
    box-sizing: border-box;
    overflow: scroll;
}

#app {
    position: relative;
    background-color: #f2f2f2;
}

.loading {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 2000;
    display: flex;
    justify-content: center;
    align-items: center;
}

.loading img {
    width: 50px;
    border-radius: 50%;
}

.topBox {
    position: relative;
}

.bgImg {
    width: 100%;
}

.naturalGrow {
    position: absolute;
    top: 24.3467rem;
    left: .5467rem;
    width: 4.1333rem;
    height: 4.1333rem;
    /* background-color: aqua; */
}

.manualFishing {
    position: absolute;
    top: 29.2267rem;
    right: .5467rem;
    width: 4.1333rem;
    height: 4.1333rem;
    /* background-color: aqua; */
}

.storePhoto {
    position: absolute;
    top: 141.04rem;
    right: .96rem;
    width: 6.0533rem;
    height: 5.3333rem;
    /* background-color: aqua; */
}

.factoryPhoto {
    position: absolute;
    top: 148.24rem;
    right: .64rem;
    width: 8.7333rem;
    height: 4.16rem;
    /* background-color: aqua; */
}

.qualityDetectionReportOne {
    position: absolute;
    top: 2.4533rem;
    left: .6533rem;
    width: 4.32rem;
    height: 6.2rem;
    /* background-color: aqua; */
}

.qualityDetectionReportTwo {
    position: absolute;
    top: 2.4533rem;
    right: .4267rem;
    width: 4.32rem;
    height: 6.2rem;
    /* background-color: aqua; */
}

.businessLicense {
    position: absolute;
    top: 9.6267rem;
    left: .6133rem;
    width: 8.9067rem;
    height: 6.2133rem;
    /* background-color: aqua; */
}

.sgsDetectionReport {
    position: absolute;
    top: 16.88rem;
    left: .5867rem;
    width: 4.32rem;
    height: 6.2rem;
    /* background-color: aqua; */
}

.dryHareQuarantineProof {
    position: absolute;
    top: 16.88rem;
    right: .4267rem;
    width: 4.32rem;
    height: 6.2rem;
    /* background-color: aqua; */
}

.customsImportGoodsCustomsDeclaration {
    position: absolute;
    top: 24.1333rem;
    left: .6133rem;
    width: 8.9067rem;
    height: 6.2133rem;
    /* background-color: aqua; */
}

.exportAquaticCertificate {
    position: absolute;
    top: 31.6rem;
    left: .5333rem;
    width: 4.32rem;
    height: 6.2rem;
    /* background-color: aqua; */
}

.quarantineCertificate {
    position: absolute;
    top: 31.6rem;
    right: .5333rem;
    width: 4.32rem;
    height: 6.2rem;
    /* background-color: aqua; */
}

.quarantineProof {
    position: absolute;
    top: 38.96rem;
    left: .5333rem;
    width: 4.32rem;
    height: 6.2rem;
    /* background-color: aqua; */
}

.russianImportAquaticHealthCertificate {
    position: absolute;
    top: 38.96rem;
    right: .5333rem;
    width: 4.32rem;
    height: 6.2rem;
    /* background-color: aqua; */
}

.originCertificate {
    position: absolute;
    top: 46.4rem;
    left: .5333rem;
    width: 4.32rem;
    height: 6.2rem;
    /* background-color: aqua; */
}

.stepBox {
    box-sizing: border-box;
    padding-right: .4533rem;
    padding-top: .4533rem;
    display: flex;
    flex-direction: column;
    align-items: end;
    position: absolute;
    top: 156.5067rem;
    width: 100%;
    /* background-color: rgb(127, 255, 212, .9); */
}

.stepBox>div {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1.1467rem;
    width: 76%;
    height: 5.2rem;
    /* background-color: rgb(245, 245, 220, .4); */
}

.stepBox>div>div {
    flex: 1;
    /* background-color: aqua; */
}

.stepBox>div>div {
    display: flex;
    flex-direction: column;
}

.stepBox>div>div>div {
    flex: 1;
    /* background-color: azure; */
}

.stepBox>div:last-child {
    margin-bottom: 0rem;
}

.videoBox {
    position: fixed;
    top: 0px;
    left: 0px;
    box-sizing: border-box;
    padding: .32rem;
    width: 100vw;
    height: 100vh;
    z-index: 100;
    background-color: rgba(0, 0, 0, 0.9);
}

.videoCon {
    width: 96%;
    height: 96%;
    border-radius: .2133rem;
    z-index: 100;
    position: absolute;
    top: 50%;
    left: 50%;
    /* object-fit: fill; */
    /*这里是关键*/
    -ms-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    /* background: url(../video/cover.jpg) no-repeat; */
    background-size: cover;
    z-index: 10;


}

.closeBtn {
    position: absolute;
    right: 16px;
    top: 16px;
    color: #c8c9cc;
    font-size: 22px;
    cursor: pointer;
    z-index: 20;
}

.navBox {
    box-sizing: border-box;
    padding: 0 .48rem;
    position: absolute;
    top: 13.5467rem;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 100%;
    /* background: rgb(238, 18, 18, .5); */
}

.navBox>div {
    margin-bottom: .4rem;
    width: 24%;
    height: 2.5333rem;
    /* background-color: rgb(0, 255, 255, .3); */
    z-index: 20;
}

.navBox>div:nth-child(n+5) {
    width: 20%;
}

.showCon {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    width: 100%;
}
.showCon>img{
    width: 100%;
}

.showBox {
    position: relative;
    width: 100%;
    height: 5.6rem;
    transition: all .2s ease-in-out;
}

.titleImg {
    width: 100%;
}

.showActive {
    height: 55.52rem;
    transition: all .4s ease-in-out;
}

.bottomBox {
    position: relative;
    top: -0.16rem;
    width: 100%;
    /* background-color: aqua; */
}