body{
  background-color: #F8F5F0;
}
button{outline:none;}
input:focus{outline:none}
a{outline: none}
.slick-list{
  height:calc(100% - 168px)!important;
}
/* .slick-slide img{
  width: 100%!important;
} */
.slick-dots{
  bottom: -32px!important;
  background-color: #2B2B2B;
  height: 36px!important;
}

.slick-dots li{
  position: relative!important;
  display: inline-block!important;
  bottom: 14px!important;
  margin: 11px 18px !important;
}
.slick-dots li.slick-active button:before{
  color: red!important;
}
.slick-dots li button:before{
  position: relative !important;
  content: '-'!important;
  font-size: 90px!important;
  line-height: 7px!important;
  left: -19px!important;
  color: #8e8e8e!important;
}

.slick-initialized .slick-slide{
  display: inline-table!important;
}
.Block{
  width: 100%;
  height: 3vh;
}
.center{
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
  width: 90%;
}
.center-img{
  padding-top:15px;
}

.commodity-box{
  width: 100%;
  background-color: #ffffff;
  box-shadow: 0px 3px 7px #888888;
  border-top: 2px solid #FC0F19;
  margin-top: 20px;
}
.latest_news-box{
  width: 100%;
  background-color: #ffffff;
  box-shadow: 0px 3px 7px #888888;
  border-top: 2px solid #FC0F19;
}
.title-box{
  width: 100%;
  height: 62px;
  border-bottom: 1px solid rgba(255, 0, 0, 0.23);
}
.title-box img{
  width: 50px;
  margin: 3px 0px 0px 8px;
}
.title-text{
  font-size: 25px;
  display: inline-block;
  font-weight: bold;
  letter-spacing: 2px;
  position: relative;
  top: 8px;
  left: 9px;
}

.box {
  width: 270px;
  position: relative;
  margin: 0 14px;
  display: inline-block;
  height: 100%;
  outline: none;
}

.box img {
  display: block;
  width: 100%;
  height: auto;
  transition: all 0.6s;
}
.box-new{
  width: 50%!important;
  position: absolute;
  z-index: 1;
}

.box-text{
  padding-top: 20px;
}
.box-texr-1 a{
  font-weight: bold;
  font-size: 19px;
  letter-spacing: 1px;
  text-decoration:none;
  color: #000000;
}
.box-texr-1{
  height: 60px!important;
}
.box-texr-2{
  font-size: 19px;
  color: #808080;
  letter-spacing: 2px;
  padding-top: 11px;
}
.box-texr-3{
  font-size: 19px;
  color: #808080;
  letter-spacing: 2px;
  text-decoration: line-through;
}
.box-texr-4{
  font-size: 27px;
  font-weight: bold;
  color: #E22838;
  display: inline-block;
  float: right;
  top: -36px;
  position: relative;
}
.box-ph{
  width: 16vw;
  height: 16vw;
  overflow: hidden;
}
.box-button{
  margin: 25px 50px;
}

.carousel {
  width: 666px;
  height: 500px;
  margin: 50px auto;
  position: relative;
  overflow: hidden;
  text-align: center;
}

.carousel ul {
  width: 100%;
  height: 100%;
  position: relative;
}

.carousel ul li {
  position: absolute;
  background: #999;
  line-height: 500px;
transition:;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-size: 100px;
}

.carousel ul li img { max-width: 100%; }

.carousel ol {
  position: absolute;
  z-index: 3;
  cursor: default;
  bottom: 20px;
  height: 23px;
  left: 0;
  text-align: center;
  width: 100%;
}

.carousel ol li {
  width: 30px;
  height: 0;
  cursor: pointer;
  opacity: 0.2;
  padding-top: 20px;
  border-bottom: 3px solid #fff;
  display: inline-block;
  margin: 0 2px;
}

.carousel ol li.active, .carousel ol li:hover { opacity: 1; }

.carousel .prev, .carousel .next {
  display: inline-block;
  z-index: 4;
  width: 100px;
  height: 100%;
  position: absolute;
  transition: opacity 0.3s;
  line-height: 50px;
  opacity: 0.5;
  top: 0;
  cursor: pointer;
}

.carousel .prev {
  left: 0;
  background: linear-gradient(to right, rgba(0,0,0,0.2), rgba(0,0,0,0));
}

.carousel .next {
  right: 0;
  background: linear-gradient(to left, rgba(0,0,0,0.2), rgba(0,0,0,0));
}

.carousel .prev:hover, .carousel .next:hover { opacity: 1; }
.slick-next{
  right: 15px!important;
  width: 50px!important;
  top: 37%!important;
  height: 0px!important;
}
.slick-prev{
  left: 14px!important;
  width: 50px!important;
  top: 37%!important;
  height: 0px!important;
}
.slick-prev:before, .slick-next:before{
  opacity:0!important;
}
.latest_news{
  padding: 8% 10% 4% 10%;
}
.latest_news p{
  margin: 0 0 2%;
  text-align: justify;
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.latest_news a{
  font-size: 20px;
  text-decoration:none;
  color: #000000;
}
.latest_news a:hover{
  color: #E01A2C;
}
.look p{
  text-align: right;
  padding: 0px 26px 17px 0px;
  margin: 0 0 25px;
}
.look a{
  font-size: 23px;
  color: #E01A2C;
  text-decoration:none;
}

@media screen and (max-width: 1100px){
  .center {
    width: 100%!important;
}
}
@media screen and (max-width: 420px){
.latest_news a{
  font-size: 17px;
}
}
@media screen and (max-width: 581px){
  .box-texr-1{
    height: 70px!important;
}
}
@media screen and (max-width: 1023px){
  .box-ph {
    width: 24vw;
    height: 24vw;
}
}
@media screen and (max-width: 949px){
  .box-ph {
    width: 23vw;
    height: 23vw;
}
}
@media screen and (max-width: 922px){
  .box-ph {
    width: 23vw;
    height: 23vw;
}
}
@media screen and (max-width: 849px){
  .box-ph {
    width: 34vw;
    height: 34vw;
}
}
@media screen and (max-width: 823px){
  .box-ph {
    width: 33vw;
    height: 33vw;
}
}
@media screen and (max-width: 679px){
  .box-ph {
    width: 28vw;
    height: 28vw;
}
}
@media screen and (max-width: 529px){
  .box-ph {
    width: 56vw;
    height: 56vw;
}
}
@media screen and (max-width: 461px){
  .box-ph {
    width: 49vw;
    height: 49vw;
}
}
@media screen and (max-width: 364px){
  .box-ph {
    width: 40vw;
    height: 40vw;
}
}