@charset "utf-8";


#topup{margin: 0 auto;}
#topup .wrap{margin: 0 auto; max-width: 1460px;padding-top: 50px;}
#topup .title{text-align: left;margin: 0 auto; padding: 30px 0;}
#topup .title>h3{display: block;font-size: 3rem;}
#topup .swiper{margin: 0 auto; padding: 0; border-radius: 16px;}
#topup .swiper .swiper-slide>a{display: block; position: relative;z-index: 50; background: #fff;}
#topup .swiper .swiper-slide>a:before, #topup .swiper .swiper-slide>a:after { content: ""; display: table; }
#topup .swiper .swiper-slide>a:after { clear: both; }
#topup .swiper .swiper-slide>a { zoom: 1; }
#topup .swiper .swiper-slide>a .img{ position: relative; width: 50%;overflow: hidden;}
#topup .swiper .swiper-slide>a .img>img{width: 100%;height: auto; border-radius: 16px; transition: all 1s;}
#topup .swiper .swiper-slide>a .img>.more{position: absolute;z-index: 50; right: 0;bottom: 0; width: 90px; height: 90px; overflow: hidden;}
#topup .swiper .swiper-slide>a .img>.more .radian { position: absolute; right: -15px; bottom: -15px;z-index: 10; width: 140px; transform: scale3d(0, 1, 0);transition: transform 1.8s cubic-bezier(0.19, 1, 0.22, 1);transform-origin: right bottom;fill: #fff;}
#topup .swiper .swiper-slide>a .img>.more .ico{ position: absolute;z-index: 30; right: 10px; bottom: 10px; width: 50px;height: 50px; line-height: 50px; text-align: center; display: block; background: #12479b; border-radius: 100%; color: #fff; opacity: 0; transform: translateX(-30px) scale(.8); transition: all .5s;}
#topup .swiper .swiper-slide>a .img>.more .ico>i{font-size: 1.8rem;}
#topup .swiper .swiper-slide>a .box{ width: 50%;box-sizing: border-box;padding: 50px 100px; text-align: left;}
#topup .swiper .swiper-slide>a .box>.time{font-size: 1.4rem; color: #12479b; }
#topup .swiper .swiper-slide>a .box>.title{ padding: 10px 0; height: 90px; position: relative; font-size: 3rem; line-height: 4rem; color: #000; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;overflow: hidden; transition: all .35s;}
#topup .swiper .swiper-slide>a .box>.text{ margin-top: 10px; font-size: 1.6rem; color: #666; line-height: 2.8rem; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;overflow: hidden;}
#topup .swiper .swiper-slide>a:hover .box>.title{color: #12479b;}
#topup .swiper .swiper-slide>a:hover .img>.more .radian{transform:scale3d(1, 1, 1);}
#topup .swiper .swiper-slide>a:hover .img>.more .ico{opacity: 1; transform: translateX(0) scale(1);}
#topup .swiper .swiper-pagination{text-align: right; bottom: 30px; padding-right: 30px;}
#topup .swiper .swiper-pagination .swiper-pagination-bullet{ width: 10px;height: 10px; border: 2px solid #000;}
#topup .swiper .swiper-pagination .swiper-pagination-bullet-active{ border-color: #12479b; background: none;}




#events{margin: 0 auto; position: relative;z-index: 90;}
#events .wrap{margin: 0 auto; max-width: 1460px;padding: 50px 0 300px 0;}
#events .title{text-align: left;margin: 0 auto; padding: 30px 0;}
#events .title>h3{display: block;font-size: 3rem;}
#events .lists{margin: 0 auto;}
#events .lists>ul{margin: 0 auto;}
#events .lists>ul>li{ position: relative; z-index: 10; display: block; float: left; width: 31.33%; margin-right: 3%; margin-bottom: 3%;  background: #fff;border-radius: 16px; overflow: hidden; box-sizing: border-box; transition: all .35s;}
#events .lists>ul>li:nth-child(3n){margin-right: 0;}
#events .lists>ul>li a{display: block; position: relative; text-align: left; box-sizing: border-box;}
#events .lists>ul>li a>.date{ position: absolute;z-index: 12; right: 20px; top: 30px; padding: 10px; border-radius: 5px; text-align: center; font-family: 'Roboto', sans-serif; color: #fff; background: rgba(18,71,155,.8); transition: all .35s;}
#events .lists>ul>li a>.date>h3{ font-size: 4rem; font-weight: bold;}
#events .lists>ul>li a>.date>span{ font-size: 1.2rem;}
#events .lists>ul>li a>.img{overflow: hidden; border-radius: 10px; }
#events .lists>ul>li a>.img>img{ width: 100%;height: auto; transition: all 1s;}
#events .lists>ul>li a>.box{ position: relative; z-index: 10; box-sizing: border-box;padding: 40px 30px; overflow: hidden;transition: all .35s;}
#events .lists>ul>li a>.box>.time{ display: none; position: relative;z-index: 10;}
#events .lists>ul>li a>.box>.time>span{display: inline-block; text-transform: uppercase; font-size: 1.4rem; color: #12479b;}
#events .lists>ul>li a>.box>.title{ padding: 10px 0; position: relative; font-size: 2rem; line-height: 2.8rem; color: #000; overflow: hidden; text-overflow:ellipsis; white-space: nowrap; transition: all .35s;}
#events .lists>ul>li a>.box>.text{ margin-top: 10px; height: 50px; font-size: 1.4rem; color: #999; line-height: 2.4rem; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;overflow: hidden;}
#events .lists>ul>li a>.box>.more{padding-top: 15px;}
#events .lists>ul>li a>.box>.more>i{ position: relative; display: inline-block; width: 30px; height: 30px; line-height: 30px;text-align: center;  background: #12479b; border-radius: 100%; color: #fff; font-size: 2rem; transition: all .35s;}
#events .lists>ul>li a:hover .box>.title{color: #12479b;}
#events .lists>ul>li a:hover .box>.more>i{ background: #999; }
#events .lists>ul>li a:hover .img>img{transform: scale(1.1);}
#events .lists>ul>li:hover{box-shadow: 0 3px 16px rgba(0,0,0,.04);}


#events .view{margin: 0 auto;}
#events .view .details{ margin: 0 auto;}
#events .view .details>.title{font-size: 4rem; line-height: 4.6rem; color: #333;}
#events .view .details>.summary{text-align: left; border-bottom: 1px solid #ddd;padding: 20px 0;}
#events .view .details>.summary>div{float: left;margin-right: 30px; font-size: 1.6rem; color: #999;}
#events .view .details>.summary>.time{ line-height: 38px;}
#events .view .details>.summary>.visit{ line-height: 38px;}
#events .view .details>.summary>.social a{ width: 30px; height: 30px; line-height: 30px; font-size: 16px; transition: all .35s;}
#events .view .details>.summary>.social a:hover{ background: #12479b; border-color: #12479b; transform: translateY(-3px);}
#events .view .details>.content{ padding: 50px 0; font-size: 1.6rem; line-height: 2.8rem; color: #666;}
#events .view .details>.content>p{margin-bottom: 15px;}
#events .view .details>.content .table-container{position: relative;}
#events .view .details>.content .table-container>.table-wrapper{ position: relative; overflow:hidden; overflow-x:auto;}
#events .view .details>.content .table-container:after{ display: none; position: absolute;z-index: 10; left: 0; bottom: -30px; font-size: 1.1rem; color: #ccc; content: '拖动表格进行浏览';}
#events .view .details>.content table{  box-sizing: border-box; width: 100%!important; min-width: 1200px; border: 1px solid #ddd;}
#events .view .details>.content table td{border-right: 1px solid #ddd; border-bottom: 1px solid #ddd; color: #666; font-size: 1.6rem;padding:15px;}
#events .view .details>.content img{max-width: 100%;height: auto;}

#events .view .pageurl{ position: fixed; right: 50px; top: 30%}
#events .view .pageurl>a{ position: relative; z-index: 10; display: block; margin-bottom: 20px; width: 50px; height: 50px; line-height: 50px;text-align: center; color: #fff; background: #12479b; border-radius: 100%;transition: all .35s;}
#events .view .pageurl.active>a{background: #1e61ca;}
#events .view .pageurl>a:after{  display: none; opacity: 0; position:absolute;z-index: 1; right: 60px; top: 50%; transform: translateY(-50%); border-radius: 5px; height: 30px; line-height: 30px; width: 60px; font-size: 1.2rem; color: #fff; background: rgba(0,0,0,.6); content: attr(data-title); transition: all .35s; }
#events .view .pageurl>a>i{font-size: 2.4rem;}
#events .view .pageurl>a:hover{background: rgba(0,0,0,.7);  box-shadow: 0 1px 8px rgba(0,0,0,.1);}
#events .view .pageurl>a:hover:after{ display: block; animation:ani_opacity .3s ease-out 0.3s both;}


@-webkit-keyframes ani_opacity {
    0% {opacity: 0; transform: translateY(-50%) translateX(-20px); }
    100% { opacity: 1; transform: translateY(-50%) translateX(0); }
}


@media only screen and (max-width: 1380px){

    #topup .swiper .swiper-slide>a .box{ padding: 50px 80px;}
    #topup .swiper .swiper-slide>a .box>.title { height: 72px;font-size: 2.4rem;line-height: 3rem;}
    #topup .swiper .swiper-slide>a .box>.text{ -webkit-line-clamp: 2;}



    #events .lists>ul>li a>.box>.title { font-size: 1.8rem; line-height: 2.4rem; }








}

@media only screen and (max-width: 1280px){


    #topup .swiper .swiper-slide>a .img>.more{ width: 70px; height: 70px;}
    #topup .swiper .swiper-slide>a .img>.more .radian { right: -15px; bottom: -15px; width: 120px;}
    #topup .swiper .swiper-slide>a .img>.more .ico{ width: 40px;height: 40px; line-height: 40px; }



    #events .wrap{padding: 50px  0 200px 0;}

    #events .lists>ul>li a>.box{padding: 30px;}
    #events .lists>ul>li a>.box>.title{ font-size: 1.6rem;}
    #events .lists>ul>li a>.box>.more>i{font-size: 1.6rem; width: 24px;height: 24px; line-height: 24px;}
    #events .lists>ul>li a>.date{transform: scale(.9)}


    #events .view .details>.title{font-size: 3.2rem; line-height: 4rem;}

    #events .view .pageurl{ right:20px;}

}

@media only screen and (max-width: 1080px){

    #topup .title>h3{font-size: 2.4rem;}
    #topup .swiper .swiper-slide>a .box{ padding: 50px;}


    #events .title>h3{font-size: 2.4rem;}

    #events .lists>ul>li a>.date{transform: scale(.8)}
    #events .lists>ul>li a>.box>.text { font-size: 1.2rem;line-height: 2rem;}




}
@media only screen and (max-width: 980px){

    #events .lists>ul>li{ width: 48%; margin-right: 0;}
    #events .lists>ul>li:nth-child(even){ float: right;}

}
@media only screen and (max-width: 860px){

    #topup .swiper .swiper-slide>a .img{width: 100%; float: none;}
    #topup .swiper .swiper-slide>a .box{ width: 100%; float: none;  }
    #topup .swiper .swiper-pagination{ bottom: 20px; text-align: center;}



    #events .view .details>.title{font-size: 3rem; }
    #events .view .details>.summary>div { font-size: 1.4rem;}
    #events .view .details>.content{ padding: 30px 0; font-size: 1.4rem; line-height: 2.4rem;}



    #events .view .pageurl .prev a>span, #events .view .pageurl .next a>span{  width: 60%;}


}



@media only screen and (max-width: 780px){

    #events .view .pageurl{ position: relative; right: 0; top: 0; margin: 0 auto; display: flex; justify-content: center; align-content: center; align-items: center; }
    #events .view .pageurl>a{display: inline-block; margin: 0 10px; width: 40px; height: 40px; line-height: 40px;}
    #events .view .pageurl>a>i{font-size: 2rem;}
    #events .view .pageurl>a:hover:after{display: none;}

}
@media only screen and (max-width: 640px){

    #topup .wrap{padding-top: 30px;}
    #topup .title>h3{font-size: 2rem;}
    #topup .swiper .swiper-slide>a .box { padding: 30px 30px 50px 30px;}
    #topup .swiper .swiper-slide>a .box>.title { font-size: 1.8rem; height: 65px; }
    #topup .swiper .swiper-slide>a .box>.text { font-size: 1.4rem; line-height: 2.4rem;}



    #events .wrap{padding: 30px 0 100px 0; }
    #events .title>h3{font-size: 2rem;}

    #events .lists>ul>li{ width: 100%; float: none; margin-bottom: 20px;}
    #events .lists>ul>li:nth-child(even){ float: none;}
    #events .lists>ul>li a>.box{padding: 20px;}

    #events .view .details { padding: 0; }
    #events .view .details>.title {font-size: 2.4rem;line-height: 3rem;}
    #events .view .details>.content {  padding: 30px 0;  font-size: 1.4rem;  line-height: 2rem; }



}


@media only screen and (max-width: 520px){




}