/* ==========================================================================
   全局
   ========================================================================== */
.content {
  min-height: 300px;
  padding: .4rem 0;
}

.content img {
  max-width: 100%;
}

.sub-banner {
  --bannerH: 540px;
  height: var(--bannerH);
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: cover;
}

.sub-banner .wrapper {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.bgtitle1 {
  font-family: 'baloo';
  font-size: .8rem;
  line-height: 1;
  color: #fff;
  position: relative;
}

.bgtitle1::before {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -0.08rem;
  width: 4.8rem;
  height: .02rem;
  background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.8) 45%, rgba(255, 255, 255, 0.8) 55%, transparent);
}

@media only screen and (max-width:1536px) {
  .sub-banner {
    height: calc(var(--bannerH) / 1.25);
  }
}

@media only screen and (max-width:1440px) {
  .sub-banner {
    height: calc(var(--bannerH) * 0.75);
  }
}

@media only screen and (max-width:1280px) {
  .sub-banner {
    height: calc(var(--bannerH) / 1.5);
  }
}

@media only screen and (max-width:1024px) {
  .sub-banner {
    height: calc(var(--bannerH) / 1.875);
  }
}

@media only screen and (max-width:960px) {
  .sub-banner {
    height: calc(var(--bannerH) / 2);
  }
}

@media only screen and (max-width:768px) {
  .sub-banner {
    height: calc(var(--bannerH) / 2.5);
  }
}

.wrapper {
  max-width: 1560px;
}

@media only screen and (min-width: 2560px) {
  .wrapper {
    max-width: calc(1560px / 0.75);
  }
}

@media only screen and (max-width: 1560px) {
  .wrapper {
    max-width: 90%;
  }
}

@media only screen and (max-width: 960px) {
  .wrapper {
    max-width: 100%;
  }
}




/* ==========================================================================
   关于我们
   ========================================================================== */
.about_list {
  padding: .8rem 0 1.6rem;
}

.about_list li:nth-child(odd) {
  padding-left: 10.4167vw;
}

.about_list li:nth-child(even) {
  padding-right: 10.4167vw;
}

.about_list li:not(:last-of-type) {
  margin-bottom: 2rem;
}

.about_flex {
  position: relative;
}

.about_list li:nth-child(even) .about_flex {
  flex-direction: row-reverse;
}

.about_left {
  width: 51.17%;
}

.about_right {
  width: 48.83%;
}

.cat_img {
  padding: 0 .6rem;
}

.about_list li:nth-child(even) .cat_img {
  justify-content: flex-end;
}

.cat_img img {
  max-height: .6rem;
}

.dog_img {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -0.4rem;
  width: 15.625vw;
  z-index: 2;
}

.about_area img {
  width: 100%;
}

.about_area {
  position: relative;
}

.about_pa {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  flex-direction: column;
  justify-content: center;
  padding: 0 .7rem;
}

.about_title {
  color: rgba(0, 36, 77, 1);
  font-size: var(--font36);
  line-height: 1.2;
  font-weight: 700;
  margin-bottom: .4rem;
}

.about_info {
  color: rgba(52, 64, 84, 1);
  font-size: var(--font18);
  line-height: 2;
  font-weight: 400;
  max-height: calc(var(--font18) * 16);
  overflow: auto;
}

.about_info::-webkit-scrollbar {
  width: 4px;
  background-color: transparent;
}

.about_info::-webkit-scrollbar-track {
  display: none;
}

.about_info::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: var(--primary);
}

@media only screen and (max-width: 920px) {
  .about_list li:not(:last-of-type) {
    margin-bottom: 1rem;
  }

  .about_list li:nth-child(odd) {
    padding-left: .4rem;
  }

  .about_list li:nth-child(even) {
    padding-right: .4rem;
  }

  .about_info {
    line-height: 1.5;
    max-height: calc(var(--font18) * 12);
  }
}

@media only screen and (max-width: 768px) {
  .about_pa {
    padding: 0 .4rem;
  }
}

@media only screen and (max-width: 500px) {
  .about_left {
    width: 100%;
  }

  .about_right {
    width: 100%;
  }

  .about_info {
    max-height: calc(var(--font18) * 9);
  }

  .about_list li:nth-child(odd) {
    padding: 0 20px;
  }

  .about_list li:nth-child(even) {
    padding: 0 20px;
  }

  .dog_img {
    width: 100px;
    left: 0;
    transform: translateX(0);
  }

  .about_list li:nth-child(odd) .dog_img {
    left: auto;
    right: 0;
  }

  .about_list {
    padding: 20px 0 40px;
  }
}









/* ==========================================================================
   联系我们
   ========================================================================== */
.contact {
  padding: .8rem 0 1rem;
}

.map {
  padding: 0 .4rem;
}

.map img {
  width: 100%;
}

.contact_list {
  padding: .75rem 0 0;
  gap: .36rem;
}

.contact_list li {
  width: calc(33.33% - .24rem);
  transition: all .35s;
}

.contact_list li:hover {
  filter: drop-shadow(0px 0px .1rem rgba(0, 0, 0, 0.2));
}

.contact_box {
  border-radius: .2rem;
  background: rgba(237, 245, 250, 1);
  padding: .45rem 0 .45rem .9rem;
  height: 100%;
}

.contact_title {
  color: rgba(0, 36, 77, 1);
  font-size: var(--font24);
  font-weight: 500;
  margin-bottom: .3rem;
  position: relative;
}

.contact_title::before {
  content: "";
  position: absolute;
  left: -0.6rem;
  bottom: 0;
  width: .33rem;
  height: .41rem;
  background: url(../images/icon10.svg) no-repeat center;
  background-size: 100% auto;
}

.contact_area {
  font-size: var(--font18);
  color: rgba(52, 64, 84, 1);
  font-weight: 300;
}

.leave_container {
  background: rgba(237, 245, 250, 1);
  padding: .8rem 0 1.15rem;
}

.leave_title {
  color: rgba(0, 104, 183, 1);
  font-family: 'baloo';
  font-size: .6rem;
  font-weight: 400;
  text-align: center;
  margin-bottom: .55rem;
}

.leave_form {
  border-radius: .1rem;
  background: rgba(255, 255, 255, 1);
  padding: .6rem 1.65rem .75rem;
  position: relative;
}

.con_dog {
  position: absolute;
  right: 0;
  bottom: -0.9rem;
  width: 5.6rem;
}

.form_list {
  gap: .3rem;
}

.form_list li {
  width: 100%;
}

.form_list li:nth-child(-n+3) {
  width: calc(33.33% - .2rem);
}

.leave_form .layui-input,
.leave_form .layui-textarea {
  border-color: rgba(76, 78, 100, 0.22);
}

.leave_form .layui-input:focus,
.leave_form .layui-textarea:focus {
  border-color: rgba(0, 104, 183, 1) !important;
}

.form_label {
  color: rgba(0, 36, 77, 1);
  font-size: var(--font18);
  font-weight: 400;
  margin-bottom: .1rem;
}

.leave_form .layui-btn {
  margin-top: .6rem;
  width: 3.2rem;
  height: .6rem;
  line-height: .6rem;
  border: none;
  border-radius: 100px;
  background: rgba(0, 104, 183, 1);
  font-size: var(--font18);
}

@media only screen and (max-width: 920px) {
  .leave_form {
    padding: 0.6rem 0.6rem 0.75rem;
  }
}

@media only screen and (max-width: 768px) {
  .form_list li:nth-child(-n+3) {
    width: 100%;
  }
}

@media only screen and (max-width: 500px) {
  .contact_list li {
    width: 100%;
  }

  .contact_area {
    font-size: 12px;
  }

  .map {
    padding: 0;
  }

  .leave_form {
    padding: 0.6rem 20px 0.75rem;
  }

  .con_dog {
    width: 200px;
  }
}










/* ==========================================================================
   新闻列表
   ========================================================================== */
.news_list li {
  padding: .6rem 0;
  border-bottom: .02rem solid rgba(206, 206, 206, 1);
}

.news_left {
  width: 42%;
}

.news_mid {
  width: .8rem;
  margin: 0 .6rem;
}

.news_right {
  width: calc(58% - 2rem);
  flex-direction: column;
}

.news_more {
  justify-content: flex-end;
  margin-top: auto;
}

.news_date {
  font-family: 'baloo';
  line-height: 1;
  text-align: center;
  border-radius: .04rem;
  background: rgba(0, 104, 183, 1);
  padding: .1rem 0;
}

.news_day {
  color: rgba(255, 255, 255, 1);
  font-size: var(--font36);
  font-weight: 400;
}

.news_year,
.news_month {
  color: rgba(255, 255, 255, 1);
  font-size: var(--font20);
  font-weight: 400;
}

.news_title {
  margin: .1rem 0 .2rem;
  color: rgba(0, 36, 77, 1);
  font-size: var(--font24);
  line-height: 1.2;
  font-weight: 500;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  line-clamp: 2;
  -webkit-line-clamp: 2;
}

.news_intro {
  color: rgba(52, 64, 84, 1);
  font-size: var(--font16);
  font-weight: 300;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  line-clamp: 3;
  -webkit-line-clamp: 3;
}

.news_box:hover .news_title {
  color: var(--primary);
}

@media only screen and (max-width: 500px) {
  .news_left {
    width: 100%;
    margin-bottom: 20px;
  }

  .news_mid {
    width: 50px;
    margin: 0 20px 0 0;
  }

  .news_right {
    width: calc(100% - 70px);
  }

  .news_more {
    margin-top: 20px;
  }

  .home_link {
    font-size: 12px;
  }

  .news_intro {
    font-size: 12px;
  }
}












/* ==========================================================================
   新闻详情
   ========================================================================== */
.news_details {
  padding: .6rem 0;
}

.nd_left {
  width: calc(100% - 4.85rem);
  float: left;
}

.nd_right {
  float: right;
  width: 3.85rem;
  box-sizing: border-box;
}

.nd_area {
  padding-bottom: .3rem;
  border-bottom: 1px solid #e5e8ef;
  box-sizing: border-box;
}

.nd_title {
  color: rgb(0, 0, 0);
  font-size: .3rem;
  font-weight: 400;
}

.nd_date {
  font-size: .16rem;
  color: rgb(85, 85, 85);
  margin: .1rem 0;
}

.nd_main {
  font-size: .16rem;
  font-weight: 400;
  color: rgb(85, 85, 85);
  line-height: 2;
  padding: .5rem 0;
  box-sizing: border-box;
}

.nd_main img {
  margin: .4rem 0;
}

.nd_toolbar {
  border-top: 1px solid #e5e8ef;
  padding: .4rem 0 0;
  align-items: center;
  justify-content: space-between;
}

.tool_left {
  width: calc(100% - 1.9rem);
}

.tool_right {
  width: 1.58rem;
}

.tool_toggle {
  font-size: .16rem;
  font-weight: 400;
  line-height: 2;
  align-items: center;
}

.tool_toggle span {
  flex-shrink: 0;
}

.tool_toggle a {
  color: rgb(102, 102, 102);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.tool_toggle a:hover {
  color: var(--primary);
}

.back_btn {
  width: 1.34rem;
  height: .42rem;
  font-size: .16rem;
  color: #fff;
  border-radius: 100px;
  background: var(--primary);
  transition: all .3s;
}

.back_btn:hover {
  color: #fff;
}

.top_btn {
  margin-left: .2rem;
}





/* ———————————————— 右边列表 ———————————————— */
.gdtj {
  border-radius: .04rem;
  background: rgb(241, 247, 247);
  height: 1.8rem;
  width: 100%;
  overflow: hidden;
}

.gdtj_list {
  margin: .4rem 0 0 0;
}

.gdtj_list li {
  margin-bottom: .3rem;
  border-bottom: 1px solid rgb(238, 238, 238);
}

.gdtj_title {
  color: rgb(102, 102, 102);
  font-size: 14px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.gdtj_date {
  color: rgb(153, 153, 153);
  font-size: 12px;
  justify-content: space-between;
  align-items: center;
  margin: 15px 0;
}

.gdtj_box:hover .gdtj_title {
  color: var(--primary);
}

.tjxw {
  color: var(--primary);
  font-size: .24rem;
  font-weight: 400;
  margin-bottom: .3rem;
  position: relative;
}

.tjxw::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.15rem;
  width: .4rem;
  height: 1px;
  background: var(--primary);
}


@media only screen and (max-width: 920px) {
  .nd_right {
    display: none;
  }

  .nd_left {
    width: 100%;
  }
}

@media only screen and (max-width: 768px) {

  .tool_toggle,
  .nd_main,
  .nd_date {
    font-size: 12px;
  }
}

@media only screen and (max-width: 500px) {
  .nd_main {
    padding: 20px 0;
    line-height: 1.5;
  }

  .tool_left {
    width: 100%;
  }

  .tool_right {
    margin-top: 10px;
  }

  .tool_toggle {
    line-height: 2;
  }

  .nd_title {
    font-size: 14px;
  }

  .back_btn {
    width: 90px;
    height: 26px;
    font-size: 12px;
  }

}















/* ==========================================================================
   SonoClub vet
   ========================================================================== */
.sonoclub .bgtitle1::after {
  content: "VET";
  position: absolute;
  right: -0.65rem;
  top: 50%;
  transform: translateY(-50%) rotate(-90deg);
  color: rgba(255, 255, 255, 1);
  font-family: "baloo";
  font-size: var(--font30);
  font-weight: 400;
}

.inner_nav {
  margin: .6rem 0 -0.3rem;
}

.inner_nav li {
  min-width: 2.6rem;
  padding: 0 .2rem;
  position: relative;
}

.inner_nav li:not(:last-of-type)::before {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: .28rem;
  background: rgba(255, 255, 255, 1);
}

.subNav_item {
  text-align: center;
  color: rgba(255, 255, 255, 1);
  font-size: var(--font18);
  font-weight: 700;
  transition: all .35s;
}

.subNav_item:hover {
  transform: translateY(-0.05rem);
}

@media only screen and (max-width: 768px) {
  .inner_nav {
    margin: .6rem 0 0;
  }

  .inner_nav li {
    min-width: 100px;
  }
}

@media only screen and (max-width: 500px) {}

.sono_club {
  padding: 0 0 .6rem;
}

.sonoClub_title {
  padding: .6rem 0;
  color: rgba(0, 104, 183, 1);
  font-family: 'baloo';
  font-size: .6rem;
  line-height: 1;
  font-weight: 400;
}


.sono_list {
  gap: .4rem 1.2rem;
}

.sono_list li {
  width: calc(50% - .6rem);
}

.sono_box .pic {
  border-radius: .1rem;
}

.sono_area {
  padding: .4rem 0 0;
}

.sono_name {
  color: rgba(0, 36, 77, 1);
  font-size: var(--font36);
  line-height: 1;
  font-weight: 700;
}

.sono_desc {
  color: rgba(52, 64, 84, 1);
  font-size: var(--font18);
  font-weight: 400;
  margin: .2rem 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  line-clamp: 2;
  -webkit-line-clamp: 2;
}

.sono_arrow img {
  transition: all .35s;
}

.sono_box:hover .sono_arrow img {
  transform: translateX(0.1rem);
}

.sono_box:hover .sono_name {
  color: var(--primary);
}

@media only screen and (max-width: 768px) {
  .sono_list {
    gap: .4rem;
  }

  .sono_list li {
    width: calc(50% - .2rem);
  }
}

@media only screen and (max-width: 500px) {
  .sono_list li {
    width: 100%;
  }
}









/* ==========================================================================
   SonoClub详情
   ========================================================================== */
.sono_details {
  padding: .6rem 0;
}

.sonodt_title {
  color: rgba(0, 36, 77, 1);
  font-size: var(--font36);
  font-weight: 700;
  margin-bottom: .2rem;
}

.sonodt_info {
  line-height: 2;
  font-size: var(--font18);
}

.sonodt_back {
  margin-top: .4rem;
  justify-content: center;
}













/* ==========================================================================
   产品列表
   ========================================================================== */
.product {
  padding: .6rem 0;
}

.pro_heading {
  justify-content: space-between;
  align-items: center;
}

.pro_title {
  color: rgba(0, 104, 183, 1);
  font-family: 'baloo';
  font-size: .6rem;
  line-height: 1;
  font-weight: 400;
}

.proNav_list {
  gap: .2rem 1.2rem;
}

.proNav_list li {
  position: relative;
}

.proNav_list li:not(:last-of-type)::before {
  content: "";
  position: absolute;
  right: -0.6rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: .28rem;
  background: rgba(206, 206, 206, 1);
}

.proNav_item {
  color: rgba(0, 36, 77, 1);
  font-size: var(--font18);
  font-weight: 700;
}

.pro_item {
  margin-top: 1rem;
}

.pro_h2 {
  position: relative;
  border-bottom: .02rem solid rgba(0, 104, 183, 1);
  color: rgba(0, 104, 183, 1);
  font-size: var(--font30);
  line-height: 1;
  font-weight: 700;
  padding-bottom: .4rem;
}

.pro_h2::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 2.6rem;
  height: .04rem;
  background: rgba(0, 104, 183, 1);
}

.pro_list {
  margin-top: .6rem;
  gap: .6rem .28rem;
}

.pro_list li {
  width: calc(25% - .21rem);
}

.pro_box {
  border-radius: .2rem;
  background: rgba(248, 249, 249, 1);
  padding: .2rem;
  position: relative;
  height: 100%;
  transition: all .35s;
}

.pro_box:hover {
  box-shadow: 0px 0px .16rem rgba(0, 104, 183, 0.5);
}

.pro_area {
  border-top: 1px solid rgba(206, 206, 206, 1);
  padding: .3rem 0 0;
}

.pro_h3 {
  color: rgba(0, 36, 77, 1);
  font-size: var(--font24);
  font-weight: 500;
  margin-bottom: .05rem;
}

.pro_intro {
  color: rgba(52, 64, 84, 1);
  font-size: var(--font16);
  font-weight: 300;
  height: calc(var(--font16) * 6);
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  line-clamp: 4;
  -webkit-line-clamp: 4;
}

.pro_jia {
  position: absolute;
  right: 0;
  bottom: 0;
  width: .7rem;
  height: .64rem;
  border-radius: .2rem 0px .2rem 0px;
  font-size: var(--font24);
  background: #0068B7;
  color: #fff;
}

@media only screen and (max-width: 768px) {
  .pro_list li {
    width: calc(50% - .14rem);
  }
}

@media only screen and (max-width: 500px) {
  .pro_intro {
    font-size: 12px;
  }

  .pro_title {
    margin-bottom: 10px;
  }
}











/* ==========================================================================
   产品详情
   ========================================================================== */
.breadcrumb {
  align-items: center;
  padding-bottom: .1rem;
  border-bottom: .02rem solid rgba(224, 224, 224, 1);
}

.breadcrumb a {
  color: rgba(52, 64, 84, 1);
  font-size: var(--font16);
  font-weight: 400;
}

.breadcrumb a:hover {
  color: var(--primary);
}

.prodt_flex {
  justify-content: space-between;
}

.prodt_left {
  width: calc(50% - .5rem);
}

.prodt_right {
  width: calc(50% - .5rem);
}

.prodt_swiper {
  position: relative;
}

.mySwiper1 {
  width: 62%;
}

.pro_prev {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: .62rem;
  height: .6rem;
  background: url(../images/arrow_left.png) no-repeat center;
  background-size: .62rem auto;
  cursor: pointer;
}

.pro_prev:hover {
  background-image: url(../images/arrow_left2.png);
}

.pro_next {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: .62rem;
  height: .6rem;
  background: url(../images/arrow_right.png) no-repeat center;
  background-size: .62rem auto;
  cursor: pointer;
}

.pro_next:hover {
  background-image: url(../images/arrow_right2.png);
}

.prodt_area {
  margin-top: .7rem;
}

.prodt_title {
  color: rgba(0, 36, 77, 1);
  font-size: var(--font48);
  line-height: 1;
  font-weight: 700;
}

.prodt_sub {
  color: rgba(52, 64, 84, 1);
  font-size: var(--font24);
  line-height: 1;
  font-weight: 400;
  margin: .2rem 0 .4rem;
}

.prodt_info {
  margin-bottom: .4rem;
}

.animal_list {
  gap: .2rem;
  margin: 1rem 0 0;
}

.animal_img {
  width: .67rem;
  height: .67rem;
  border-radius: .04rem;
  background: rgba(245, 248, 251, 1);
  margin: 0 auto;
}

.animal_name {
  margin-top: 5px;
  color: rgba(52, 64, 84, 1);
  font-size: 12px;
  text-align: center;
}

.prodt_main ol,
.prodt_main ul {
  padding-left: .25rem;
}

.prodt_main ol li,
.prodt_main ul li {
  list-style: initial;
}

.prodt_item {
  margin-top: 1rem;
}

.prodt_item .pro_h2 {
  margin-bottom: .4rem;
}

.speci_flex {
  justify-content: space-between
}

.speci_left {
  width: calc(55% - .75rem);
  background: rgba(248, 249, 249, 1);
  padding: .4rem .35rem;
  color: rgba(52, 64, 84, 1);
  font-size: var(--font18);
  font-weight: 400;
}

.speci_right {
  width: 45%;
}

.play_video {
  width: .77rem;
}

.speci_img {
  margin-top: .4rem;
}

.prodt_msg {
  background: rgba(248, 249, 249, 1);
  padding: .55rem;
  color: rgba(52, 64, 84, 1);
  font-size: var(--font18);
}

.feature_area {
  background: rgba(248, 249, 249, 1);
  padding: .4rem .3rem;
  color: rgba(52, 64, 84, 1);
  font-size: var(--font18);
}

.feature_h4 {
  color: rgba(0, 36, 77, 1);
  font-size: var(--font24);
  font-weight: 700;
  margin-bottom: 5px;
}

.feature_list {
  gap: .3rem;
}

.feature_item {
  width: calc(33.33% - .2rem);
}

.feature_box {
  height: 100%;
}




.demo_container {
  background: rgba(248, 249, 249, 1);
  padding: 1rem 0;
}

.prodet_list {
  justify-content: center;
  gap: .3rem;
}

.prodet_list .tab_item {
  cursor: pointer;
  font-size: var(--font30);
  color: rgba(0, 36, 77, 1);
  font-weight: 700;
  padding: 0 .4rem .2rem;
  border-bottom: .06rem solid transparent;
}

.prodet_list .tab_item.active {
  color: rgba(0, 104, 183, 1);
  border-color: rgba(0, 104, 183, 1);
}

.demo_column {
  margin-top: .5rem;
}

.demo_column .demo_item {
  display: none;
  padding: .8rem;
  min-height: 4rem;
  background: rgba(255, 255, 255, 1);
}

.demo_column .demo_item.active {
  display: block;
}

.demo_list {
  gap: .4rem .2rem;
}

.demo_list li {
  width: calc(25% - .15rem);
}

.demo_box {
  height: 100%;
}

.demo_name {
  color: rgba(0, 36, 77, 1);
  font-size: var(--font18);
  font-weight: 700;
  text-align: center;
  margin-top: .1rem;
}

.related_container {
  padding: 1rem 0;
}

@media only screen and (max-width: 768px) {
  .demo_column .demo_item {
    padding: 20px;
  }
}

@media only screen and (max-width: 500px) {
  .feature_item {
    width: calc(50% - .15rem);
  }

  .demo_list li {
    width: calc(50% - .1rem);
  }

  .demo_name {
    font-size: 12px;
  }

  .prodt_msg {
    padding: 20px;
  }

  .speci_right,
  .speci_left,
  .prodt_right,
  .prodt_left {
    width: 100%;
  }

  .feature_area {
    font-size: 12px;
  }
}










/* ==========================================================================
   向下滚动
   ========================================================================== */
.mouse_box {
  display: flex;
  justify-content: center;
  margin: .5rem 0 0;
}

.mouse_roll {
  display: flex;
  align-items: center;
  border-radius: 8px;
  padding: .06rem .2rem;
  cursor: default;
}

.loading {
  color: #555;
  font-size: var(--font18);
  font-weight: 300;
  margin-left: .1rem;
}

.mouse_img {
  width: .24rem;
  opacity: 0;
  animation: rolldown 2.3s infinite;
  -webkit-animation: rolldown 2.3s infinite;
}

#gdnone {
  display: none;
}

@keyframes rolldown {
  0% {
    opacity: 0;
    transform: translateY(-100%);
  }

  50% {
    opacity: 1;
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    transform: translateY(100%);
  }
}

@-webkit-keyframes rolldown {
  0% {
    opacity: 0;
    transform: translateY(-100%);
  }

  50% {
    opacity: 1;
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    transform: translateY(100%);
  }
}

@media only screen and (max-width: 500px) {
  .mouse_img {
    width: 18px;
  }

  .mouse_roll {
    padding: 5px 10px;
  }
}








/* ==========================================================================
     Pagination分页
     ========================================================================== */
#Lb_pager {
  margin: .3rem 0;
}

#Lb_pager .pages {
  display: flex;
  justify-content: center;
  gap: 6px;
}

#Lb_pager .pages a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: .36rem;
  height: .36rem;
  color: rgba(0, 36, 77, 1);
  font-size: var(--font14);
  font-weight: 400;
  cursor: pointer;
  background: #fff;
  border: 1px solid rgba(233, 233, 233, 1);
  border-radius: 4px;
  transition: all .35s;
}

#Lb_pager .pages .pgnext {
  min-width: .8rem;
}

#Lb_pager .pages .pgnext .fa-angle-left {
  margin-right: 5px;
}

#Lb_pager .pages .pgnext .fa-angle-right {
  margin-left: 5px;
}

#Lb_pager .pages a.pgcurrent {
  color: #fff;
  cursor: default;
  background-color: var(--primary);
  border-color: var(--primary);
}

#Lb_pager .pages a:hover {
  color: #fff;
  text-decoration: none;
  background-color: var(--primary);
  border-color: var(--primary);
}

#Lb_pager .pages .pgempty {
  cursor: not-allowed;
}

@media only screen and (max-width: 768px) {
  #Lb_pager .pages a {
    width: 28px;
    height: 28px;
  }

  #Lb_pager .pages .pgnext {
    min-width: 56px;
  }
}