.content{
    overflow: auto;
}
.topBox{
    width: 100%;
    height: 100vh;
    position: relative;
    padding-top: 34px;
    background: url(../images/topbj.jpg) center center no-repeat;
    background-size: 100% auto;
    background-color: #000;

    animation: ani_opacity_re 0.2s .3s linear both;

}
.headBox{
    width: 1200px;
    margin:  0 auto 0;
    padding: 0 20px;

}
.LogoBox{
    height: 68px;
}
.LogoBox img{
    height: 100%;
}

.midBox{
    width: 618px;
    height: 618px;
    background: url(../images/topCricle.png) center center no-repeat;
    background-size: 618px auto;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    padding-top: 224px;
    /* animation: ani_line 40s linear infinite; */

    animation: ani_opacity_re 1s .3s linear both;
    z-index: 4;

}
.midSmtext{
    font-size: 60px;
    color: #fff;
    text-align: center;
}
.midtext{
    width: 100%;
    text-align: center;
    margin-bottom: 23px;
}

.minbg1{
    width: 624px;
    height: 624px;
    background: url(../images/circlebg1.png) center center no-repeat;
    background-size: 624px auto;
    position: absolute;
    left: calc(50% - 309px);
    top: calc(50% - 309px);
    z-index: 1;
    -webkit-animation: ani_line 20s linear infinite;
    animation: ani_line 20s linear infinite;
    opacity: 0.2;
}
.minbg2{
    width: 500px;
    height: 500px;
    background: url(../images/circlebg2.png) center center no-repeat;
    background-size: 500px auto;
    position: absolute;
    left: calc(50% - 250px);
    top: calc(50% - 250px);
    z-index: 2;
    -webkit-animation: ani_line2 20s linear infinite;
    animation: ani_line2 20s linear infinite;
    opacity: 0.2

    
}
.midCardBox{
    background: url(../images/midcardBg.png) center top no-repeat;
    background-size: 100% auto;
    width: 100%;
    min-height: 900px;
    margin-top: -61px;
    position: relative;
    z-index: 2;
}
.minTitleBox{
    padding-top: 145px;
}
.minTitleBox .word1{
    font-size: 56px;
    color: #308DC5;
    text-align: center;
    opacity: 0.6;

}
.minTitleBox .word2{
    color: #000;
    text-align: center;
    font-weight: 600;
    font-size: 42px;
    margin-top: -38px;
    position: relative;
}
.minTitleBox .word3{
    color: #000;
    text-align: center;
    font-weight: 200;
    font-size: 26px;
    position: relative;
    opacity: 0.6;
    margin-top: 12px;

}
.midlistbox{
    width: 1200px;
    /* margin: 0 -15px; */
    margin: 100px auto 0;
  
}
.midlistboxLi{
    width: 33.3%;
    float: left;
    padding: 0 15px;
}
.midlistboxItem{
    background-color: #fff;
    width: 100%;
    border-radius: 20px;
    box-shadow: 3px 3px 10px 1px rgba(215, 215, 215, 0.5);
    padding: 20px 10px 20px 10px;
}
.midlistboxItem .imgbox{
    height: 240px;
}
.imgbox img{
    height: 100%;
    display: block;
    margin: 0 auto;

}
.shopTitle{
color: #308DC5;
line-height: 22px;
font-size: 24px;
text-align: center;
padding: 50px 0;

}
.detailList{
    width: 100%;
    min-height: 2000px;
    
}
.detailbg1{
    background: url(../images/detailbg1.png) 0 40px no-repeat;
    padding-bottom: 84px;
    

}
.detailbg2{
    background: url(../images/detailbg2.png) right bottom no-repeat;

}
.detailContent{
    width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}
.detailToptitle{
    padding-top: 48px;
    position: relative;
    text-align: center;
    padding-bottom: 45px;
}
.detailToptitle .title1{
    color: #333333;
    font-size: 42px;
    font-weight: 600;
}
.detailToptitle .title2{
    color: #DBDBDB;
    font-size: 32px;
    margin-top: 20px;
}
.detailToptitle::after{
    position: absolute;
    content: '';
    width: 87px;
    height: 10px;
    background: #308DC5;
    display: block;
    left: 50%;
    bottom: 3px;
    transform: translateX(-50%);
}

.detailMess{
    color: #0D1840;
    font-size: 20px;
    margin-top: 15px;
}
.detailTitle{
    font-size: 36px;
    color: #308DC5;
    padding-bottom: 20px;
    position: relative;
    font-weight: 600;
}
.detailTitle::after{
    position: absolute;
    content: '';
    width: 48px;
    height: 6px;
    background: #AAAAAA;
    display: block;
    bottom: 3px;
}
.detailItem{
    margin-top: 120px;
}
.detailItem1 .detailImgbox{
    float: right;
}

.detailItem1 .detailWordBox{
    width: 380px;
    float: left;
    margin-top: 226px;
}

.detailItem2{
    position: relative;
}
.detailItem2 .detailWordBox{
    width: 438px;
    float: left;
    position: absolute;
    left: 762px;
}
.footer{
    box-shadow: 0px -1px 6px 0px rgba(198, 198, 198, 0.5);
    
    height: 150px;
    background: #F9F9F9;
    text-align: center;
    font-size: 16px;
    padding-top: 46px;
}
.footer>div{
    margin-bottom: 22px;
}