.main-index section.banner {
  background: url("/images/bg/index-banner.png") center no-repeat;
  background-size: cover;
  height: 400px; }
  .main-index section.banner .banner-search-bar {
    width: 100%;
    max-width: 470px; }
  .main-index section.banner .bootstrap-datetimepicker-widget {
    bottom: 0; }

.main-index section.dairy-news .structure-wrapper {
  display: flex; }
  @media only screen and (max-width: 992px) {
    .main-index section.dairy-news .structure-wrapper {
      flex-direction: column; } }
  .main-index section.dairy-news .structure-wrapper .left {
    flex-basis: 45%; }
    @media only screen and (max-width: 992px) {
      .main-index section.dairy-news .structure-wrapper .left {
        flex-basis: 80%; } }
    .main-index section.dairy-news .structure-wrapper .left .gradient-dark-filter {
      position: relative;
      width: 100%;
      padding-top: 100%;
      border-radius: 5px;
      overflow: hidden; }
      .main-index section.dairy-news .structure-wrapper .left .gradient-dark-filter::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(180deg, rgba(51, 51, 51, 0) 0%, rgba(31, 31, 31, 0.31) 55.73%, #000000 100%); }
      .main-index section.dairy-news .structure-wrapper .left .gradient-dark-filter .new-content {
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: 99; }
        .main-index section.dairy-news .structure-wrapper .left .gradient-dark-filter .new-content .desc,
        .main-index section.dairy-news .structure-wrapper .left .gradient-dark-filter .new-content .postDate {
          color: #bdbdbd; }
  .main-index section.dairy-news .structure-wrapper .right {
    flex-basis: 55%; }
    @media only screen and (max-width: 992px) {
      .main-index section.dairy-news .structure-wrapper .right {
        flex-basis: 100%; } }

.main-index section.dairy-news .btn-news {
  width: 100%;
  height: 307.77px;
  max-width: 100%; }
  @media (max-width: 1200px) {
    .main-index section.dairy-news .btn-news {
      height: 170px; } }
  @media (max-width: 992px) {
    .main-index section.dairy-news .btn-news {
      height: 307.77px; } }

.main-index section.advertise-step .ads-card-list {
  padding-top: 20px;
  width: 200px;
  max-width: 100%;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: start;
  flex-direction: column; }

.main-index section.advertise-cta {
  background: url("/images/bg/index-1.png") center no-repeat;
  background-size: cover;
  min-height: 315px; }

.main-index section.senmentor {
  background: url("/images/bg/index-2.png") center no-repeat;
  background-size: cover;
  min-height: 630px; }
  .main-index section.senmentor .content {
    max-width: 100%;
    width: 330px;
    margin: auto; }

@media (min-width: 992px) and (max-width: 1200px) {
  .main-index .structure-wrapper .right .more {
    display: none; } }

.main-index section.columnist .columnist--wrapper {
  max-width: 100%;
  width: 382px;
  max-height: 100%;
  height: 395px;
  background: #ffffff;
  box-shadow: 0px 4px 10px rgba(0, 8, 80, 0.15);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center; }
  @media only screen and (max-width: 576px) {
    .main-index section.columnist .columnist--wrapper {
      box-shadow: none; } }
  .main-index section.columnist .columnist--wrapper .columnist--image {
    max-width: 100%;
    padding-top: 38.22%;
    width: 146px;
    height: 146px;
    max-height: 100%; }
    .main-index section.columnist .columnist--wrapper .columnist--image img {
      border-radius: 50%; }
  .main-index section.columnist .columnist--wrapper .columnist--desc {
    height: calc(395px - 257px);
    text-align: center; }
    .main-index section.columnist .columnist--wrapper .columnist--desc h3 {
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
      overflow: hidden; }
    .main-index section.columnist .columnist--wrapper .columnist--desc p {
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden; }
  .main-index section.columnist .columnist--wrapper .columnist--btn {
    width: 161px;
    height: 50px;
    color: #fefefe;
    background: linear-gradient(180deg, #1c77da 0%, #075cb8 100%);
    border-radius: 5px;
    transition: .3s ease-in; }
    .main-index section.columnist .columnist--wrapper .columnist--btn:hover {
      color: #000000; }

.main-index section.columnist .owl-theme .owl-dots .owl-dot span {
  width: 10px;
  height: 10px;
  margin: 5px 7px;
  background: #075cb8;
  display: block;
  -webkit-backface-visibility: visible;
  transition: opacity 0.2s ease;
  border-radius: 30px; }

.main-index section.columnist .owl-theme .owl-nav [class*="owl-"]:hover {
  background: none;
  color: #869791;
  text-decoration: none; }

.main-index section.columnist .owl-next,
.main-index section.columnist .owl-prev {
  position: absolute;
  top: 45%;
  transform: translateY(-50%);
  transition: 0.3s ease; }
  .main-index section.columnist .owl-next:after,
  .main-index section.columnist .owl-prev:after {
    content: "";
    position: absolute;
    top: 0;
    right: 0; }

.main-index section.columnist .owl-theme .owl-item:not(.active) {
  visibility: hidden; }

.main-index section.columnist .owl-carousel .owl-nav button.owl-next:focus {
  background: url(/images/icons/next-active.png) no-repeat center !important;
  background-size: 100% !important; }

.main-index section.columnist .owl-carousel .owl-nav button.owl-prev:focus {
  background: url(/images/icons/prev-active.png) no-repeat center !important;
  background-size: 100% !important; }

.main-index section.columnist .owl-carousel .owl-nav button:focus img {
  visibility: hidden; }

.main-index section.columnist .owl-theme .owl-item:not(.active) {
  visibility: hidden; }

.main-index section.columnist .owl-next {
  right: 5%; }

.main-index section.columnist .owl-prev {
  left: 5%; }

.main-index section.columnist .owl-nav [class*="owl-"]:hover {
  background: none; }