.f18{ font-size: 24px;font-weight: 500;}
.onlineTools h2{
  margin: 0;
  min-height: 108px;
  line-height: 76px;
  text-align: center;
  color: #333;
}


.onlineTools h2 a{
  text-decoration: none;
}

.onlineTools ul{
  /*margin-top: 108px;*/
  background-color: #fff;
  padding: 0 20px;
  border-radius: 0 0 6px 6px;
}

.onlineTools ul li{
  float: left;
  position: relative;
  top: -22px;
  width: 16.6%;
}


.onlineTools ul li a{
  display: block;
  margin: 0 auto;
  padding: 20px 0;
  max-width: 260px;
  text-decoration: none;
}

.onlineTools ul li h3{
  text-align: center;
  padding: 10px 20px 0;
  font-size: 17px;
  margin: 0;
}

.onlineTools ul li p{
  text-indent: 0;
  padding:10px 20px;
  color: #999;
}


.onlineTools ul li  i{
  /*background-image: url(/themes/default/images/no-repeat.png);
  width: 50px;
  height: 50px;*/
  width: 100px;
  height: 100px;
  background-repeat: no-repeat;
  background-position: center center;
  display: block;
  margin: 20px auto 10px;
}


.onlineTools ul li.toolImage i{
  background-image: url(../../img/index.png);
  /*background-position: -107px 0px;*/
}

.onlineTools ul li.toolZip i{
  background-image: url(../../img/folder.png);
  /*background-position: -160px 0px;*/
}

.onlineTools ul li.toolWatermark i{
  background-image: url(../../img/watermark.png);
  /*background-position: -214px 0px;*/
}

.onlineTools ul li.toolConvert i{
  background-image: url(../../img/convert.png);
  /*background-position: -265px 0px;*/
}

.onlineTools ul li.toolGif i{
  background-image: url(../../img/loading3.gif);
  background-color: #2980b9;
  /*background-position: -368px 0px;*/
}


.onlineTools ul li.toolAvatar i{
  background-image: url(../../img/avatar.png);
  /*background-position: -368px 0px;*/
}

.onlineTools ul li a.active h3,
.onlineTools ul li a:hover h3, 
.onlineTools ul li a:hover p{  
  background-color: #f6f6f6;
}


.cdnzip {
  /*background-color: #fff;*/
}

.cdnzip h2{
  
  text-align: center;
  color: #333;
  margin-top: 20px;
}

.cdnzip ul {
  /*background-color: #fff;*/
  padding: 0px 0;
  border-radius: 6px;
}


.cdnzip ul li{
  float: left;
  position: relative;
  width: 25%;
  overflow: hidden;
  margin: 20px 0;
}

.cdnzip ul li a{
  display: block;
  margin: 0 auto;
  padding: 0px 0;
  max-width: 260px;
  height: 226px;
  position: relative;
  text-align: center;
}


.cdnzip li a.question1{
  background: #19bd9b;
}

.cdnzip li a.question2{
  background: #2ecd71;
}

.cdnzip li a.question3{
  background: #3598dc;
}

.cdnzip li a.question4{
  background: #5f7487;
}

.cdnzip li a.question5{
  background: #b3d01e;
}

.cdnzip li a.question6{
  background: #f2c40f;
}

.cdnzip li a.question7{
  background: #e77e22;
}

.cdnzip li a.question8{
  background: #e84c3d;
}

.cdnzip li a img {
  position: absolute;
  left: 0;
  top: 0;
}

.cdnzip li a .caseBg {
  display: none;
  width: 100%;
  position: absolute;
  top: 195px;
  left: 0;
  background: #000;
  opacity: 0.3;
  height: 250px;
}

.cdnzip li a .case_title {
  display: block;
  width: 100%;
  position: absolute;
  top: 174px;
  left: 0;
  color: #fff;
  font-size: 22px;
}

.cdnzip li a .case_title b {
  font-weight: lighter;
  margin-bottom: 20px;
  display: block;
  font-size: 20px;
}

.cdnzip li a .case_title i {
  display: block;
  padding: 20px 20px 0 20px;
  font-style: normal;
  left: 0;
  color: #fff;
  font-size: 12px;
  line-height: 200%;
}
.cdnzip{
  margin-bottom: 30px;
}

@media screen and (max-width: 470px) {
    .container{
        width: 100%;
        padding: 0;
    }
    .onlineTools ul{
      padding: 0 1% 0 0;
    }
    .content{
      margin-bottom: 15px;
    }
    .onlineTools ul li{
        width: 47%;
        margin: 0 0 3% 2%;
        /*height: 200px;*/
        background-color: #f9f9f9;
    }
    .onlineTools ul li i{
      width: 60px;
      height: 60px;
      background-size: cover; 
    }
    .onlineTools ul li p{
      padding: 3% 5%;
      height: 86px;
    }
    .onlineTools h2{
      line-height: 40px;
      padding: 0 3%;
      min-height: 120px;
    }
    .onlineTools h2 .f18{
      font-size: 20px;
    }
    .onlineTools ul li h3{
      margin-bottom: 10px;
      height: 46px;
    }
    .onlineTools ul li a{
      max-width: auto;
      padding: 0;
    }
    .cdnzip{
      margin-bottom: 15px;
    }
    .cdnzip h2{
      padding: 0 3%;
      font-size: 20px;
      line-height: 40px;
      margin-bottom: 20px;
    }
    .cdnzip ul li{
      width: 50%;
      margin: 0;
    }
    .cdnzip ul li a{
      display: block;
      max-width: 100%;
      height: 310px;
      text-align: left;
    }
    .cdnzip li a img{
      width: 100%;
    }
    .cdnzip li a .case_title{
      top: 130px;
    }

    .cdnzip li a .case_title b{
      margin-bottom: 10px;
      font-size: 16px;
      font-weight: 400;
      text-align: center;
    }
    .cdnzip li a .case_title i{
      padding: 0 20px;
    }
    .hc-content{
        padding: 30px 0 10px 0;
    }
    .hc-content .hc-list{
      width: 100%;
      padding: 0 3%;
      margin-bottom: 20px;
    }
    .hc-content .hc-list .top .info h3{
      line-height: 47px;
    }
    .hc-content .hc-list:last-child .top .info h3{
      line-height: 24px;
    }
    .link{
      margin-top: 0;
      padding: 0 3%;
      line-height: 30px;
    }
    .link p{
      margin-bottom: 10px;
    }
    .footer{
      padding: 5% 3%;
      line-height: 26px;
    }
    .pp_items .pp_temporary_update_retakeWay ul li a{
      width: 100%;
    }
}