@charset 'UTF-8'

.index-main {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 100%;
}

.index-main .title {
  text-transform: lowercase;
  font-size: 84px;
  font-size: 70px\0;
  color: #7da755;
  line-height: 88px;
  letter-spacing: .08px;
  margin-bottom: 4px;
}

.index-main .sub-title {
  font-weight: 100;
  font-size: 21px;
  color: #5f6060;
  letter-spacing: 2px;
}

.index-main .container{margin-top: 100px;}
.index-main .each-col{text-align: center;margin-bottom: 15px;}
.index-main .each-col .img{
  width: 125px;
  height: 125px;
  margin: 0 auto;
}
.index-main .each-col .desc {margin-top: 25px;}
.index-main .each-col .desc a {
  font-weight: 100;
  font-size: 21px;
  color: #5f6060;
  letter-spacing: 2px;
  text-decoration: none;
}

.user-photo {
  transition: all 1s;
  -webkit-transition: all 1s;
  -ms-transition: all 1s;
  -o-transition: all 1s;
}
.user-photo:hover {
  transform: rotate(360deg);
  -webkit-transform: rotate(360deg);
  -ms-transform: rotate(360deg);
  -o-transform: rotate(360deg);
}

@media screen and (max-width: 768px) {
  .index-main{
    position: absolute;
    top: 80px;
    -webkit-transform: none;
    -ms-transform: none;
    -o-transform: none;
    transform: none;
    /*padding-bottom: 80px;*/
  }
  .index-main .each-col {margin-bottom: 30px;}
  .index-main .title {font-size: 28px;}
  .index-main .sub-title {font-size: 18px;}
  .index-main .each-col .img{
    width: 80px;
    height: 80px;
  }
  .index-main .each-col .desc a{font-size: 16px;}
  .row {margin-top: -76px;}
  .index-main .each-col .desc {margin-top: 14px;}
}

@media screen and (max-width: 640px){
  .title{font-size: 20px;}
  .sub-title{font-size: 12px;line-height: 25px;}
}