*, *:before, *:after {
  box-sizing: border-box;
}



.slide-container {
  margin: auto;
  width: 630px;
  text-align: center;
  font-weight: 300;
}

.wrapper {
  padding-top: 40px;
  padding-bottom: 40px;
}
.wrapper:focus {
  outline: 0;
}

.clash-card {
  background: white;
  width: 500px;
  display: inline-block;
  margin: auto;
  border-radius: 8px;
  position: relative;
  text-align: center;
  z-index: 99;
}

.clashcard_img {
  position: relative;
  height: 330px;
  margin-bottom: 35px;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

.clashcard_img_red {
  /*background: url("../img/barbarian-bg.jpg");野蛮人卡片背景*/
}
.clashcard_img_red img {/*野蛮人卡片前景*/
  width: 540px;
  position: absolute;
  top: -45px;
  left: -20px;
}

.clashcard_img_pink {
  
}
.clashcard_img_pink img {
  width: 400px;
  position: absolute;
  top: -34px;
  left: -10px;
}

.clashcard_img_orange {
  
}
.clashcard_img_orange img {
  width: 340px;
  position: absolute;
  top: -30px;
  left: -25px;
}

.clashcard_img_green {
  
}
.clashcard_img_green img {
  width: 540px;
  position: absolute;
  top: -60px;
  left: -20px;
}

.clashcard_img_blue {/*巫师背景*/
  
}
.clashcard_img_blue img {/*巫师前景*/
  width: 540px;
  position: absolute;
  top: -60px;
  left: -20px;
}

.clashcard_2ndtit {
  text-transform: uppercase;
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 3px;
}
/*以下是小标题颜色*/
.clashcard_2ndtit_red {
  color: #EC9B3B;
}

.clashcard_2ndtit_pink {
  color: #EE5487;
}

.clashcard_2ndtit_orange {
  color: #F6901A;
}

.clashcard_2ndtit_green {
  color: #82BB30;
}

.clashcard_2ndtit_blue {
  color: #4FACFF;
}

.clashcard_title {/*大标题*/
  font-size: 32px;
  color: black;
  font-weight: 800;
  margin-bottom: 5px;
}

.clashcard_descp {/*说明*/
  padding: 10px 20px;
  margin-bottom: 10px;
  text-align: justify;
  font-size: 24px;
    height: 190px;
    
}
/*以下是底部配色*/
.clashcard_botm_red {
  background: #e74c3c;/*底部配色*/
}
.clashcard_botm_red .one-third {
  border-right: 1px solid #EC766A;/*底部分隔线*/
}

.clashcard_botm_pink {
  background: #EE5487;
}
.clashcard_botm_pink .one-third {
  border-right: 1px solid #D04976;
}

.clashcard_botm_orange {
  background: #F6901A;
}
.clashcard_botm_orange .one-third {
  border-right: 1px solid #de7b09;
}

.clashcard_botm_green {
  background: #82BB30;
}
.clashcard_botm_green .one-third {
  border-right: 1px solid #71a32a;
}

.clashcard_botm_blue {
  background: #4FACFF;
}
.clashcard_botm_blue .one-third {
  border-right: 1px solid #309eff;
}

.clashcard_botm {
  color: white;
  font-weight: 700;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}
.clashcard_botm a, a:hover, a:visited {
    color: #fff;
}
.clashcard_botm .one-third {
  width: 33%;
  float: left;
  padding: 20px 15px;
}
.clashcard_botm sup {
  position: absolute;
  bottom: 4px;
  font-size: 45%;
  margin-left: 2px;
}
.clashcard_botm .stat {
  position: relative;
  font-size: 24px;
  margin-bottom: 10px;
}
.clashcard_botm .stat span {font-size: 12px;}
.clashcard_botm .stat-value {
  text-transform: uppercase;
  font-weight: 400;
  font-size: 12px;
}
.clashcard_botm .no-border {
  border-right: none;
}

.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}

.slick-prev {
  left: 15px;
  z-index: 999;
}

.slick-next {
  right: 15px;
  z-index: 999;
}