.mt_100 {
  margin-top: 100px;
}
.toMore {
  display: flex;
  align-items: center;
  width: auto;
  padding: 14px 50px;
  opacity: 0.8;
  background: #ffffff;
  float: left;
  color: #333333;
  position: relative;
  cursor: pointer;
  border-radius: 0;
  transition: all 0.4s linear;
  -webkit-transition: all 0.4s;
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  -ms-transition: all 0.4s;
  border:1px solid #fff;
}
.toMore::after {
  content: "\271A";
  color: #333333;
  margin-left: 16px;
  font-size: 10px;
  position: relative;
  transition: all 0.4s linear;
  -webkit-transition: all 0.4s;
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  -ms-transition: all 0.4s;
}
.toMore span{
  position: relative;
  line-height: 1;
}
.toMore:hover{
  background:transparent !important;
  color: #fff;
  border-color:#fff;
  font-size:inherit !important;
}
.toMore:hover::after {
  margin-left:20px;
  color: #fff;
}

.bgtoMore::after{
color:#fff;
}
.bgtoMore:hover{
   border-color: #577df1 !important;
  color: #577df1 !important;
}
.bgtoMore:hover::after {
  color: #577df1 !important;
}



@media only screen and (max-width: 1600px){
  .mt_100 {
    margin-top: 80px;
  }
}
@media only screen and (max-width: 1440px){
  .mt_100 {
    margin-top: 60px;
  }
  .toMore{
    padding:10px 32px}
}
@media only screen and (max-width: 1200px){
  .mt_100 {
    margin-top: 40px;
  }
}
@media only screen and (max-width: 768px){
  .mt_100 {
    margin-top: 20px;
  }
  .toMore{
    padding:10px 24px;
    font-size:14px !important; 
 
  }
  .toMore a{
     font-size:14px ;
  }
   .toMore span{
         font-size:14px !important; 
  }
 
}