@import url("Swiper-3.4.2.css");

.cow_l_row {
  background-image: url("../img/cow-landingpage/d/bg.png");
  padding-bottom: 140px;
  background-position: center;
  background-size: contain;
}
.cow_l_header {
  background-color: #fff;
}
.cow_l_kv {
  position: relative;
}
.cow_l_kv_img {
  width: 100%;
}
.cow_l_kv_btn {
  position: absolute;
  left: 50%;
  bottom: 9%;
  transform: translate(-50%, 90%);
}
.cow_l_kv_btn {
  max-width: 100%;
  display: block;
}
.cow_l_kv_btn img {
  width: 100%;
}
.cow_l_content {
  width: 1540px;
  margin: 0 auto;
  padding: 0 15px;
}
.cow_l_1 {
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&1+0,0+14 */
  background: -moz-linear-gradient(
    top,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 255, 255, 0) 14%,
    rgba(255, 255, 255, 0) 100%
  ); /* FF3.6-15 */
  background: -webkit-linear-gradient(
    top,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 255, 255, 0) 14%,
    rgba(255, 255, 255, 0) 100%
  ); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 255, 255, 0) 14%,
    rgba(255, 255, 255, 0) 100%
  ); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0 ); /* IE6-9 */
}
.title {
  max-width: 867px;
  margin: 0 auto;
  padding: 15px 0 0;
}
.title img {
  width: 100%;
}
.p_kv_row {
  position: relative;
}
.p_kv {
  max-width: 560px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
  padding: 260px 0 250px;
}
.p_kv_1 {
  position: absolute;
  top: 80px;
  left: 60px;
  cursor: pointer;
}
.p_kv_2 {
  position: absolute;
  top: 80px;
  right: 60px;
  cursor: pointer;
}
.p_kv_3 {
  position: absolute;
  bottom: 0px;
  left: 60px;
  cursor: pointer;
}
.p_kv_4 {
  position: absolute;
  bottom: 0px;
  right: 60px;
  cursor: pointer;
}
.cow_l_2 {
  background-image: url("../img/cow-landingpage/d/bg_2.png");
  padding: 165px 0 0px;
  background-position: center top;
  background-size: contain;
  background-repeat: no-repeat;
  background-size: cover;
}
.sub_title {
  width: 100%;
  text-align: center;
  margin: 0 auto;
}
.sub_title img {
  max-width: 100%;
  display: inline-block;
}
.cow_l_2_swiper {
  width: 100%;
  padding: 60px 0;
}
.swiper-container {
  width: 100%;
  /* height: 100%; */
}
.cow_swiper-slide {
  text-align: center;
  font-size: 18px;

  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}
.cow_l_2_swiper {
  width: 1340px;
  margin: 0 auto;
}
.cow_l_2_swiper .cow_l_2_swiper_js .swiper-slide {
  max-width: inherit;
}

.cow_l_2_swiper_js .kv_swiper-button-next,
.swiper-container-rtl .kv_swiper-button-prev {
  background-image: url("../img/cow-landingpage/d/next.png");
  right: 0px;
  left: auto;
}

.cow_l_2_swiper_js .kv_swiper-button-prev,
.swiper-container-rtl .kv_swiper-button-next {
  background-image: url("../img/cow-landingpage/d/back.png");
  left: 0px;
  right: auto;
}

.cow_l_2_swiper_js .kv_swiper-button-next,
.cow_l_2_swiper_js .kv_swiper-button-prev {
  position: absolute;
  top: 50%;
  width: 55px;
  height: 55px;
  margin-top: -22px;
  z-index: 10;
  cursor: pointer;
  -moz-background-size: 55px 55px;
  -webkit-background-size: 55px 55px;
  background-size: 55px 55px;
  background-position: center;
  background-repeat: no-repeat;
}
.cow_l_3_table {
  width: 100%;
  text-align: center;
  padding: 30px 0 60px;
  position: relative;
  z-index: 5;
}

.cow_l_3_table img {
  max-width: 100%;
  display: inline-block;
}
.cow_l_3 {
  position: relative;
  padding: 0 0 65px;
}
.cow_l_3_table_ol {
  position: absolute;
  top: 150px;
  left: 50px;
}
.cow_l_3_table_btn {
  width: 100%;
  text-align: center;
}

.cow_l_3_table_btn img {
  max-width: 100%;
  display: inline-block;
}
.cow_l_4_row {
}
.cow_l_4_title {
  width: 100%;
  text-align: center;
}
.cow_l_4_title img {
  max-width: 100%;
  display: inline-block;
  padding: 60px 0;
}
.cow_l_4_img {
  width: 100%;
  text-align: center;
}
.cow_l_4_img img {
  max-width: 100%;
  display: inline-block;
}
.cow_l_5 {
  position: relative;
  padding: 100px 0 0;
}
.cow_l_5_img {
  width: 100%;
  text-align: center;
  font-size: 0;
  padding: 30px 0 0;
}
.cow_l_5_img img {
  font-size: 16px;
  max-width: 100%;
  display: block;
  display: inline-block;
}

.cow_l_5_btn {
  width: 100%;
  text-align: center;
}

.cow_l_5_btn img {
  max-width: 100%;
  display: inline-block;
}
.cow_l_5_ds {
  width: 100%;
  text-align: center;
  font-size: 0;
  padding: 30px 0 0;
}
.cow_l_5_ds img {
  font-size: 16px;
  max-width: 100%;
  display: block;
  display: inline-block;
}
.cow_dk {
  display: block;
}
.cow_mo {
  display: none;
}

@media (max-width: 1700px) {
  .cow_l_3_table_ol {
    position: absolute;
    top: 130px;
    left: -30px;
    transform: scale(0.65);
  }
  .p_kv_row{
    transform: scale(0.8);
    margin: 60px 0 0;
  }
  .p_kv {
    max-width: 560px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
    padding: 80px 0 180px;
  }
  .cow_l_content {
    width: 1240px;
    margin: 0 auto;
    padding: 0 15px;
  }
  .p_kv_1 {
    position: absolute;
    top: -60px;
    left: 0px;
    cursor: pointer
    /* transform: scale(0.8); */
  }
  .p_kv_2 {
      position: absolute;
    top: -60px;
    right: 0px;
    cursor: pointer;
    /* transform: scale(0.8); */
  }
  .p_kv_3 {
    position: absolute;
    bottom: -37px;
    left: 0px;
    cursor: pointer;
    /* transform: scale(0.75); */
  }
  .p_kv_4 {
    position: absolute;
    bottom: -73px;
    right: -51px;
    cursor: pointer;
    /* transform: scale(0.7); */
  }
  .cow_l_2_swiper {
    width: 1200px;
    margin: 0 auto;
  }
}
@media (max-width: 1600px) {
  .cow_l_3_table_ol {
    position: absolute;
    top: 60px;
    left: -30px;
    transform: scale(0.6);
  }
}

@media (max-width: 1400px) {
  .cow_l_3_table_ol {
    position: absolute;
    top: 36px;
    left: -79px;
    transform: scale(0.5);
  }
  .cow_l_content {
    width: 1140px;
    margin: 0 auto;
    padding: 0 15px;
  }
  .p_kv_row {
    transform: scale(0.75) translate(0%, -5%);
    margin: 60px 0 0;
  }
  .cow_l_2_swiper {
    width: 1100px;
    margin: 0 auto;
  }
  .p_kv_1 {
    position: absolute;
    top: -60px;
    left: -15px;
    cursor: pointer
    /* transform: scale(0.8); */
  }
  .p_kv_2 {
      position: absolute;
    top: -60px;
    right: -55px;
    cursor: pointer;
    /* transform: scale(0.8); */
  }
  .p_kv_3 {
    position: absolute;
    bottom: -37px;
    left: -35px;
    cursor: pointer;
    /* transform: scale(0.75); */
  }
  .p_kv_4 {
    position: absolute;
    bottom: -73px;
    right: -91px;
    cursor: pointer;
    /* transform: scale(0.7); */
  }
}

@media (max-width: 1200px) {
  .cow_l_content {
    width: 940px;
    margin: 0 auto;
    padding: 0 15px;
  }
  .cow_l_2_swiper {
    width: 900px;
    margin: 0 auto;
  }
  .p_kv_1 {
    position: absolute;
    top: -60px;
    left: -110px;
    cursor: pointer
    /* transform: scale(0.8); */
  }
  .p_kv_2 {
      position: absolute;
    top: -60px;
    right: -130px;
    cursor: pointer;
    /* transform: scale(0.8); */
  }
  .p_kv_3 {
    position: absolute;
    bottom: -37px;
    left: -160px;
    cursor: pointer;
    /* transform: scale(0.75); */
  }
  .p_kv_4 {
    position: absolute;
    bottom: -73px;
    right: -200px;
    cursor: pointer;
    /* transform: scale(0.7); */
  }
}
@media (max-width: 1079px) {
  .p_kv_row {
    transform: initial;
    margin: initial;
}
  .cow_l_header {
    background-color: initial;
  }
  .cow_l_1 {
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&1+0,0+100;White+to+Transparent */
    background: transparent; /* FF3.6-15 */
    background: transparent; /* Chrome10-25,Safari5.1-6 */
    background: transparent; /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: initial; /* IE6-9 */
  }
  .title {
    max-width: 867px;
    margin: 0 auto;
    padding: 0 70px;
  }
  .cow_l_content {
    width: 100%;
    margin: 0 auto;
    padding: 20px 0px 0;
  }
  .cow_dk {
    display: none;
  }
  .cow_mo {
    display: block;
  }
  .cow_l_row {
    background-image: url("../img/cow-landingpage/m/bg_m.png");
    padding: 80px 0 140px;
    background-position: center;
    background-size: contain;
  }
  .p_kv {
    max-width: 255px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
    padding: 100px 0 100px;
  }

  .p_kv_1 {
    position: absolute;
    top: 60px;
    left: 0px;
    cursor: pointer;
    transform: inherit;
    width: 160px;
    z-index: 6;
  }
  .p_kv_2 {
    position: absolute;
    top: 71px;
    right: 0px;
    cursor: pointer;
    transform: inherit;
    width: 159px;
    z-index: 5;
  }
  .p_kv_3 {
    position: absolute;
    bottom: 67px;
    left: 0px;
    cursor: pointer;
    transform: inherit;
    width: 149px;
    z-index: 5;
  }
  .p_kv_4 {
    position: absolute;
    bottom: 62px;
    right: 0px;
    cursor: pointer;
    transform: inherit;
    width: 150px;
    z-index: 5;
  }
  .cow_l_2 {
    background-image: url("../img/cow-landingpage/d/bg_2.png");
    padding: 65px 0px 0px;
    background-position: top center;
    background-size: contain;
    background-repeat: no-repeat;
  }

  .cow_l_2_swiper .cow_l_2_swiper_m .swiper-slide {
    max-width: inherit;
  }

  .cow_l_2_swiper_m .kv_swiper-button-next,
  .swiper-container-rtl .kv_swiper-button-prev {
    background-image: url("../img/cow-landingpage/d/next.png");
    right: 0px;
    left: auto;
  }

  .cow_l_2_swiper_m .kv_swiper-button-prev,
  .swiper-container-rtl .kv_swiper-button-next {
    background-image: url("../img/cow-landingpage/d/back.png");
    left: 0px;
    right: auto;
  }

  .cow_l_2_swiper_m .kv_swiper-button-next,
  .cow_l_2_swiper_m .kv_swiper-button-prev {
    position: absolute;
    top: 50%;
    width: 55px;
    height: 55px;
    margin-top: -22px;
    z-index: 10;
    cursor: pointer;
    -moz-background-size: 55px 55px;
    -webkit-background-size: 55px 55px;
    background-size: 55px 55px;
    background-position: center;
    background-repeat: no-repeat;
  }
  .cow_l_2_swiper {
    width: 100%;
    margin: 0 auto;
    padding: 60px 30px 0;
  }
  .cow_l_3_table_btn {
    width: 185px;
    text-align: center;
    margin: 0 auto;
  }
  .cow_l_5 {
    position: relative;
    padding: 60px 0 0;
  }
  .sub_title {
    width: 100%;
    text-align: center;
    margin: 0 auto;
    padding: 0 15px;
  }
  .cow_l_3_table {
    width: 100%;
    text-align: center;
    padding: 35px 15px 0px;
    position: relative;
    z-index: 5;
  }
  .cow_l_3_text {
    text-align: center;
    font-size: 11px;
    color: #838383;
    padding: 15px 0 25px;
  }
  .cow_l_5_ds ul {
    list-style: decimal;
    padding: 25px 15px 0 30px;
  }
  .cow_l_5_ds ul li {
    text-align: left;
    font-size: 11px;
    color: #838383;
  }
  .cow_l_4_title {
    width: 100%;
    text-align: center;
    padding: 0px;
  }
  .cow_l_4_img {
    width: 100%;
    text-align: center;
    padding: 0 15px;
  }
  .cow_l_5_btn {
    width: 180px;
    text-align: center;
    margin: 0 auto;
  }
  .cow_l_kv_btn {
    width: 170px;
    display: block;
  }
  .cow_l_kv_btn {
    position: absolute;
    left: 50%;
    top: 55%;
    transform: translate(-50%, 90%);
  }
  .cow_l_5_ds {
    width: 100%;
    text-align: center;
    font-size: 0;
    padding: 30px 15px 0;
  }
  .cow_l_4_title img {
    max-width: 100%;
    display: inline-block;
    padding: 30px 0px 30px;
  }
  .cow_l_5_img {
    width: 100%;
    text-align: center;
    font-size: 0;
    padding: 30px 0 0;
  }
}
@media (max-width: 430px) {
  .p_kv_1 {
    position: absolute;
    top: 56px;
    left: 27px;
    cursor: pointer;
    transform: inherit;
    width: 153px;
    z-index: 6;
  }
  .p_kv_2 {
    position: absolute;
    top: 60px;
    right: 19px;
    cursor: pointer;
    transform: inherit;
    width: 157px;
    z-index: 5;
  }
  .p_kv_3 {
    position: absolute;
    bottom: 51px;
    left: 20px;
    cursor: pointer;
    transform: inherit;
    width: 155px;
    z-index: 5;
  }
  .p_kv_4 {
    position: absolute;
    bottom: 35px;
    right: 0px;
    cursor: pointer;
    transform: inherit;
    width: 160px;
    z-index: 5;
  }
}

@media (max-width: 390px) {
  .p_kv {
    max-width: 220px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
    padding: 60px 0 100px;
}
  .p_kv_1 {
    position: absolute;
    top: 15px;
    left: 11px;
    cursor: pointer;
    transform: inherit;
    width: 143px;
    z-index: 6;
}
  .p_kv_2 {
    position: absolute;
    top: 16px;
    right: 13px;
    cursor: pointer;
    transform: inherit;
    width: 145px;
    z-index: 5;
  }
  .p_kv_3 {
    position: absolute;
    bottom: 39px;
    left: 7px;
    cursor: pointer;
    transform: inherit;
    width: 147px;
    z-index: 5;
  }
  .p_kv_4 {
    position: absolute;
    bottom: 35px;
    right: 0px;
    cursor: pointer;
    transform: inherit;
    width: 150px;
    z-index: 5;
}
}