/** CSS Reset **/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form, fieldset,input,textarea,p,blockquote,th,td { margin:0; padding:0; }
table { border-collapse:collapse; border-spacing:0; }
fieldset,img { border:0; vertical-align: bottom;}
address,caption,cite,code,dfn,em,strong,th,var { font-style:normal; font-weight:normal; }
ol,ul { list-style:none; }
caption,th { text-align:center; }
h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:normal; }
abbr,acronym { border:0; }
textarea, input, select{resize: none;outline:none;background:none;border:none;}
button {overflow:visible;width:auto;margin:0;padding:0;border:0 none;outline:none;}
input{border:0}
a{text-decoration:none; color:#333;-webkit-tap-highlight-color:transparent; -webkit-touch-callout:none;}
a:hover{ text-decoration:none;color:#000;}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;font-size: 0;}
.clearfix{display:inline-block;}
/* Hide from IE Mac */
.clearfix {display:block;}
html{width: 100%;height:100%;}
body{color:#333;font-size:16px;font-family: "Microsoft YaHei";width: 100%;height:100%;}
.fl{float:left;}
.fr{float:right;}
.mobile{display:none;}
.m1000{width:1000px;margin:0 auto;overflow: hidden;}
/* p{ transition:all 0.2s ease-in 0s;}
p:hover{ transform:translateY(-5px);} */

/* banner */
.header {width: 100%; height: 600px; position: relative;background: url(../images/banner.jpg) no-repeat center top;}
.header_t{position: absolute;top: 120px;left: 50%;margin-left: -26%;}
.header_b{position: absolute;top:450px;left:50%;margin-left: -160px;}
.header_b .btn_header{cursor: pointer;display: block;width: 300px;height: 62px;overflow: hidden;background: url(../images/btn.png) no-repeat center top;text-align: center;line-height: 62px;color:#272a44;font-size: 24px;}
.header_b .btn_header:hover{background: url(../images/btn.png) no-repeat center -62px;line-height: 62px;}
/*rank_list*/
.rank_list{ width:1000px; margin:0 auto; position:relative;}
.rank_list ul{-moz-column-count:2; /* Firefox */-webkit-column-count:2; /* Safari 鍜� Chrome */column-count:2;-moz-column-gap: 20px;-webkit-column-gap: 20px;column-gap: 20px;margin:50px auto;}
.rank_list ul li{ -moz-page-break-inside: avoid;-webkit-column-break-inside: avoid; break-inside: avoid;margin-bottom:20px; padding-bottom:20px;background:#ebfeff;}
.rank_list li h2{ font-size:23px; height:54px;padding-top:26px;padding-left:5%; margin-bottom:26px;font-weight: bold;background: url(../images/list_bg.png) repeat-x center center;}
.rank_list li h2 a{ color:#fff;}
.rank_list li h2 sub{ color:#fff;font-weight: normal;padding-left:4px;}
.rank_list li p{ padding:0 2% 10px 6%;}
.rank_list li p a{ color:#333;}
.rank_list li p a:hover{ text-decoration:underline;}
.rank_list li.active{ background:#ffeae4;}
.rank_list li.active h2{ background:url(../images/list_bg_hover.png) repeat-x center center;}
/*mid_banner*/
.mid_banner{width: 100%;height: 210px;background: url(../images/mid_banner.png) no-repeat center center;}
.mid_banner .fl{margin:30px 0 0 300px;}
.mid_banner .fr{cursor: pointer;margin:30px 30px 0 0;display: block;width: 300px;height: 62px;overflow: hidden;background: url(../images/btn.png) no-repeat center top;text-align: center;line-height: 62px;color:#272a44;font-size: 24px;font-weight: bold;}
.mid_banner .fr:hover{background: url(../images/btn.png) no-repeat center -62px;line-height: 62px;}
/*swiper*/
.swiper-container{margin:60px auto;}
.swiper-container .swiper-slide{padding-bottom:30px;}
.swiper-container .caption{position: relative;width: 24%}
.swiper-container .caption a.btn_lj{cursor: pointer;position: absolute;top:70%;left:16%;padding:10px 26px;border:1px solid #ffffff;color:#ffffff;font-size: 18px}
.swiper-container .caption a.btn_lj:hover{color:#2f4eb6;background: #ffffff;}
.swiper-container .box{width: 76%}
.swiper-container .box div{float: left;width: 33.3%}
.swiper-container .box div img{margin:0 0 20px 20px;}
.swiper-pagination-bullet {width: 20px;height: 20px;background: #90a5a5;border-radius: 10px;opacity: 1;}
.swiper-pagination-bullet-active {opacity: 1;background: #2f4eb6;width: 160px;}
/*nav*/
.nav{width:100%;height:66px;font-size: 20px;background:#2f4eb6;z-index: 10;position: relative;}
.nav li{float:left;padding: 0 15px;text-align: center;cursor: pointer;height:66px;line-height:66px;}
.nav li a{color:#fff;}
.nav li.menuOver a{border-bottom:1px solid #fff;padding-bottom:10px;}
.nav .m1000{padding:0;overflow: hidden;}

@media screen and (max-width:1000px) {
	body{font-size:1.4rem;line-height: 140%;}
	.m1000{width:98%;margin:0 auto;}
	.pc{display:none;}
	.mobile{display:block;}
	
	.page{padding: 20px 5%;}
	/*banner*/
  .header {height: 33rem; background: url(../images/m_banner.jpg) no-repeat center top;}
  .header_t{position: absolute;top: 8rem;left: 35%;width: 70%}
  .header_t img{width: 100%}
  .header_b{top:24rem;}
	/*rank_list*/
	.rank_list{ width:94%; }
	.rank_list ul{-moz-column-count:1; /* Firefox */-webkit-column-count:1; /* Safari 鍜� Chrome */column-count:auto;-moz-column-gap: 0;-webkit-column-gap: 0;column-gap: 0;margin:2rem auto;}
	.rank_list ul li{margin-bottom:2rem; padding-bottom:2rem;}
	.rank_list li h2{ font-size:2rem; height:3.5rem;padding-top:1.5rem;padding-left:5%; margin-bottom:2rem;background-size:contain;background: url(../images/list_bg.png) repeat-x center top;}
	.rank_list li p{ padding:0 2% 1rem 6%;}
  .rank_list li.active h2{background: url(../images/list_bg_hover.png) repeat-x center top; }
  /*mid_banner*/
  .mid_banner{height: 14rem;background: url(../images/m_mid_banner.png) no-repeat center center;}
  .mid_banner .fl{margin:5rem 0 0 2rem;}
  .mid_banner .fr{margin:1rem 3rem 0 0;}
  /*swiper*/
  .swiper-container{margin:5rem auto 0;}
  .swiper-container .swiper-slide {padding-bottom: 3rem;}
  .swiper-container .caption{position: relative;width: 30%}
  .swiper-container .box{width: 70%}
  .swiper-container .box div{float: left;width: 100%;}
  .swiper-container .box div img {float: left;    margin: 0 0 0.4rem 1rem;}
}

/*鍔ㄧ敾*/
.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
@-webkit-keyframes slideInDown {
  from {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideInDown {
  from {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.slideInDown {
  -webkit-animation-name: slideInDown;
  animation-name: slideInDown;
}
@-webkit-keyframes slideInUp {
  from {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideInUp {
  from {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.slideInUp {
  -webkit-animation-name: slideInUp;
  animation-name: slideInUp;
}