*{margin: 0;padding: 0;border: 0;outline: none;list-style: none;}
a{text-decoration: none;}



html,body{width: 100%; height: 100%;font-family: Arial;background: #f5f5f5; min-width: 1200px; min-height: 720px;}
.wrap,.sub_wrap{position: relative; width: 100%;overflow: hidden; }
.wrap{ height: 2344px;}
.sub_wrap{padding-bottom: 120px;}
.main{ width: 1200px; margin: 0 auto; position: relative;}
.banner{ width: 1920px; position: absolute; left: 50%; top: 30px; margin-left: -960px;}
.banner_bg{ width: 1920px; height: 93px; background: url("../images/banner_bg.png") no-repeat; position: absolute; bottom: 4px; left: 50%; margin-left: -960px;}
.bar{ width: 100%; height: 81px; background: url("../images/top_bg.png") repeat-x; position: fixed; top: 0; left: 0; z-index: 10;}
.logo{ width: 144px; height: 36px; position: absolute; left: 0; top: 15px;}

.box1,.box2,.box3{ width: 1200px; position: absolute; left: 50%; margin-left: -600px;}
.box1{ top: 750px;}
.title,.title2{ margin: 0 auto; position: relative; font-size: 36px; font-weight: bold; text-align: center;color: #061268;}
.title{ width: 100%;}
.title2{ width: 110%; margin-left: -5%;}
.title_l,.title_r{display: inline-block;vertical-align: middle; width: 267px; height: 11px; background: url("../images/title_bg.png") no-repeat; }
.title_r{transform: rotate(180deg);}
.ico1,.ico2,.ico3,.ico4,.ico5{ width: 205px; height: 176px; position: absolute; top: 82px;}
.ico1{ left: -100px; background: url("../images/ico1.png") no-repeat;}
.ico2{ left: 200px; background: url("../images/ico2.png") no-repeat;}
.ico3{ left: 498px; background: url("../images/ico3.png") no-repeat;}
.ico4{ right: 200px; background: url("../images/ico4.png") no-repeat;}
.ico5{ right: -100px; background: url("../images/ico5.png") no-repeat;}
.ico_text{ width: 270px; text-align: center; position: absolute; bottom: -60px; left: -32.5px; color: #061268; font-size: 18px; font-weight: bold; line-height: 23px;}

.box2{ top: 1182px;}
.explain{ width: 90%; margin: 30px auto 0 auto; text-align: center; font-size: 18px; color: #061268; line-height: 23px;}
.swiper{ width: 1450px; height: 617px; position: absolute; left: -105px; top: 170px;}
.swiper-slide { width: 415px; height: 517px; background: url("../images/box_bg.png") no-repeat; display: flex; justify-content: center; align-items: center;}
.swiper-button-prev,.swiper-button-next{ width: 31px; height: 35px; position: absolute; top: 580px;}
.swiper-button-prev{ left: 560px; background: url("../images/left.png") no-repeat; -webkit-animation: fadeInLeft 1s ease-in-out infinite alternate;animation: fadeInLeft 1s ease-in-out infinite alternate;}
.swiper-button-next{ right: 625px; background: url("../images/right.png") no-repeat; -webkit-animation: fadeInRight 1s ease-in-out infinite alternate;animation: fadeInRight 1s ease-in-out infinite alternate;}
.swiper-button-prev:hover{ background: url("../images/left2.png") no-repeat;}
.swiper-button-next:hover{ background: url("../images/right2.png") no-repeat;}
.swiper-button-prev:after,.swiper-button-next:after{ display: none;}
.game_bg{ width: 385px; height: 185px; position: absolute; left: 15px; top: 15px;}
.game_name,.game_explain{ position: absolute; left: 25px; color: #061268;}
.game_name{ top: 210px; font-size: 28px; font-weight: bold; line-height: 30px;}
.game_explain{ width: 80%; top: 250px; font-size: 18px; line-height: 22px;}

.box3{ top: 2010px;}
.mail{ width: 100%; position: absolute; left: 0; top: 65px; text-align: center; color: #061268; font-size: 18px;}
.mail a{ text-decoration: underline;}
.mail a:hover{ text-decoration: none;}
.explain2{ width: 100%; text-align: center; font-size: 18px; color: #061268; position: absolute; left: 0; top: 150px; font-weight: bold;}

.footer{ width: 100%; height: 138px; position: absolute; bottom: 0; left: 0; background: #060d61;}
.bot_logo{ width: 144px; height: 36px; position: absolute; left: 200px; top: 55px;}
.copyright{ position: absolute; left: 400px; top: 10px; font-size: 14px; line-height: 25px; color: #ffffff;}
.copyright a{ color: #ffffff; text-decoration: underline;}
.copyright a:hover{ text-decoration: none;}



/* 子页面 */
.sub_main{position: relative;width: 1200px;margin: 0 auto;padding-top: 805px;}
.sub_info{width: 1130px;margin: 20px auto 0 auto; font-size: 18px;line-height: 30px;color: #061268;}
.sub_title{font-size: 24px;font-weight: bold;margin-top: 36px;}
.sub_emial{text-decoration: underline;}




@-webkit-keyframes fadeInLeft {
    from {
        /*opacity: 0;*/
        -webkit-transform: translate3d(-10%, 0, 0);
        transform: translate3d(-10%, 0, 0);
    }

    to {
        /*opacity: 1;*/
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes fadeInLeft {
    from {
        /*opacity: 0;*/
        -webkit-transform: translate3d(-10%, 0, 0);
        transform: translate3d(-10%, 0, 0);
    }

    to {
        /*opacity: 1;*/
        -webkit-transform: none;
        transform: none;
    }
}

@-webkit-keyframes fadeInRight {
    from {
        /*opacity: 0;*/
        -webkit-transform: translate3d(10%, 0, 0);
        transform: translate3d(10%, 0, 0);
    }

    to {
        /*opacity: 1;*/
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes fadeInRight {
    from {
        /*opacity: 0;*/
        -webkit-transform: translate3d(10%, 0, 0);
        transform: translate3d(10%, 0, 0);
    }

    to {
        /*opacity: 1;*/
        -webkit-transform: none;
        transform: none;
    }
}