/* event */
.event_banner{
    width:100%;
    height:70px;
    position: fixed;
    bottom: 0;
    left:0;
    z-index: 999;
    box-shadow: 0 0 10px 0 rgba(0,0,0,0.6);

    background-color: #196e93;
}

.event_banner_img{
    width:1440px;
    margin: 0 auto;
}

.event_banner_img img{
    width:100%;
}



/* main */
/* main_top */
.main_top{
    width: 100%;
    height: calc(50vw - 55px);
    min-height: calc(1440px / 2);
    overflow: hidden;
}

.main_top_L{
    width: 50%;
    height: 100%;
    float: left;

    position: relative;
    background-color:#29b8f5;
}

.main_top_L_img{
    width:55%;
    position: absolute;
    left:calc(50% - (50% / 2));
    top: calc(50% - (50% / 2));
}

.main_top_L_img img{
    width:100%;
}

.main_top_b{
    position:absolute;
    top:15.5%;
    left:33%;
}

.main_top_b > img{
    width: 90%;
    animation: main_b 2s 0s infinite;
}

.main_top_b2{
    position:absolute;
    top:25%;
    left:65%;
}

.main_top_b2 > img{
    width: 90%;
    animation: main_b 2s 1s infinite;
}

.main_top_b3{
    position:absolute;
    top:51%;
    left:20%;
}

.main_top_b3 > img{
    width: 90%;
    animation: main_b 2s 1.5s infinite;
}

.main_top_deco{
    position:absolute;
    top:17%;
    left:15%;
}

.main_top_deco2{
    position:absolute;
    top:45%;
    left:89%;
    z-index: 99999;
}

.main_top_deco3{
    position:absolute;
    top:70%;
    left:75%;
    z-index: 99999;
}
.main_top_deco3 > img{
    width:80%;
}

@keyframes main_b {
    0% {transform: translateY(0);}
    50% {transform: translateY(20px);}
    100% {transform: translateY(0px);}
}

.main_top_L_pr{
   width:55%;
   height:55%;
   background-color: rgb(0, 0, 0);
   overflow: hidden;

    position: absolute;
    left:calc(50% - (50% / 2));
    top: calc(50% - (50% / 2));
}

.main_top_L_pr_in{
    width:230%;
    height:130%;
}

.main_top_R{
    width: 50%;
    height: 100%;
    float: left;
    position: relative;
    background-color:#fff;
    /* background: url(../img/main_right.jpg) no-repeat left / 60%; */
}

.main_top_R_img{
    width:50%;

    position: absolute;
    left:calc(50% - (60% / 2));
    top: calc(50% - (60% / 2));

    margin-top:0;
    opacity: 1;

    animation: R_img 1.3s infinite;
    animation-iteration-count:1;
}

@keyframes R_img {
    0% {opacity: 0; margin-top:100px;}
    100% {opacity: 1; margin-top:0px;}
}

.main_top_R_img img{
    width:100%;
}


/* main_sub */
.main_sub{
    width:100%;
    height:737px;
    max-width: 1920px;
    margin: 0 auto;
    font-size: 0;
    overflow: hidden;
    position: relative;
}

.main_sub img{
    width:100%;
    height:100%;
    position: absolute;
    left:100%;
    top:0;
}

/* .main_sub_img{
    width:50%;
    height:730px;
    float: left;
    overflow: hidden;

    position: relative;
}

.main_sub > .main_sub_img:first-child{
    background-color: #95d3ee;
}

.main_sub > .main_sub_img:first-child img{
    position: absolute;
    left:calc(50% - (229px / 2));
    top:calc(50% - (537px / 2));
}

.main_sub > .main_sub_img:last-child{
    background-color: #95d3ee;
    overflow: hidden;
}

.main_sub > .main_sub_img:last-child img{
    width:100%;
    height: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
} */

.main_sub_btns{
    width:100%;
    position: relative;
    text-align: center;
    font-size: 0;
}

.main_sub_btn{
    width:13px;
    height:13px;
    background-color: #dadada;

    display: inline-block;
    margin:20px 7px 0;
    cursor: pointer;
}

.main_sub_btn_ac{
    background-color: royalblue;
}

.btn_slide{
    width:50px;
    height:100%;
    position: absolute;
    top:0;
    cursor: pointer;
}

#right{
    right:0px;
    background: url(../img/main_sub/next.jpg) no-repeat center;
}

#left{
    left:0px;
    background: url(../img/main_sub/prev.jpg) no-repeat center;
}


/* main_att */
.main_att{
    width:100%;
    height:637px;
    margin-top: 118px;
    /* overflow: hidden; */
    position: relative;

    background:url(../img/attach/att_img.png) no-repeat fixed center / cover;
    background-color: #000;
}

.main_att > .main_att_in{
    width:1200px;
    height:400px;
    margin:0 auto ;

    position: absolute;
    top:52%;
    left:50%;
    transform: translate(-50%,-50%);

}

.main_att > .main_att_in > div{
    width:calc((100% - (20px * 2)) / 3 - 0.1px);
    height:100%;

    /* background-color: crimson;*/
    float: left;
    margin-left: 20px;
}

.main_att > .main_att_in > div:nth-child(1){
    margin: 0;
}


/* main_story */
 .main_story{
    margin-top: 158px;
    position: relative;

    width:1200px;
    margin:0 auto ;
}

.main_story_boxs{
    width:100%;
    height: 299px;
    margin-top: 68px;
    position: relative;
    overflow: hidden;
}

.main_story_box{
    width:calc(100% / 4);
    height:299px;
    background-color: royalblue;
    position: absolute;
    left:0;
    top:0;
    cursor: pointer;
}

.btn_slide2{
    width:80px;
    height:299px;
    background-color: lawngreen;
    position: absolute;
    top:0;
    cursor: pointer;
}

#right2{
    right:-160px;
    background: url(../img/story/next.png) no-repeat center;
}

#left2{
    left:-160px;
    background: url(../img/story/prev.png) no-repeat center;
}

/* .main_story_box_hover{
    width:100%;
    height:299px;
} */

.main_story_box_hover > .s_black{
    width:100%;
    height:100%;
    background-color: #000;
    position: absolute;
    left:0;
    top:0;
    opacity: 0;
    pointer-events: none;
}

.main_story_box_hover > .s_line{
    width:1px;
    height:100px;
    background-color: #fff;
    position: absolute;
    left:50%;
    top:-100px;
    z-index: 99;
    transform: translateX(-50%);
}

.main_story_box_hover > .s_circle{
    width:8px;
    height:8px;
    background-color: #fff;
    border-radius: 50%;
    position: absolute;
    left:50%;
    top:-8px;
    z-index: 99;
    transform: translateX(-50%);
}

.main_story_box_hover > .s_txt{
    width:100%;
    position: absolute;
    left:0;
    top:50%;
    z-index: 99;
    transform: translateY(-50%);
    color: #fff;
    text-align: center;
    opacity: 0;
}


/* main_story_boxs2 */
.main_story_boxs2{
    margin-top: 40px;
    width:100%;
    height:452px;

}

.boxs2_pr{
    width:754px;
    height:452px;
    background-color: #000;
    overflow: hidden;
    float: left;
}

.boxs2_pr > iframe{
    width:810px;
    height:624px;
    margin-top: -85px;
    margin-left:-30px;
}

.boxs2_btn{
    width:405px;
    height:452px;
    overflow: hidden;
    float: right;
    position: relative;
    cursor: pointer;
}

.boxs2_btn > img{
    position: absolute;
    left: 0;
    top:0;
}

.boxs2_btn > img:nth-child(2){
    top:20px;
    transition: all 0.3s;
}

.boxs2_btn:hover img:nth-child(2){
    top:0;
}

.boxs2_btn > a > img{
    position: absolute;
    left: 0;
    top:0;
    z-index: 99;
}