body {
  min-width: 1280px;
}
/* 轮播图区域样式 */
#index_swiper_img {
  margin: 0 auto;
  clear: both;
  height: 590px;
  overflow: hidden;
  background: #f0f0f0;
}
.swiper-container {
  height: 590px;
}
#index_swiper_img .swiper-slide {
  position: relative;
}
button {
  outline: none;
}
.pagination_box {
  width: 1200px;
  height: 6px;
  margin: 0 auto;
  position: relative;
}
.pagination {
  width: 100%;
  text-align: left;
  padding-left: 20px;
  position: absolute;
  left: 0;
  bottom: 80px;
  z-index: 5;
}

.swiper-pagination-switch {
  display: inline-block;
  width: 60px;
  height: 6px;
  margin-right: 10px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.2);
  cursor: pointer;
}

.swiper-active-switch {
  background: rgba(0, 193, 174, 1);
  width: 60px;
}
/* 快速选择区域样式 */
.page_box_top {
  width: 100%;
  height: 871px;
  background-image: linear-gradient(
    180deg,
    rgba(68, 176, 209, 0.1) 0%,
    rgba(87, 194, 204, 0.2) 52%,
    rgba(105, 212, 200, 0.04) 99%
  );
}
.page_box_top.no_fine_show {
  height: auto;
}
.quick-selection-area {
  margin: 0 auto;
  padding: 0 22px;
  width: 1200px;
  height: 102px;
}
.quick-selection-area li {
  float: left;
  width: 280px;
  height: 102px;
  padding-left: 40px;
  position: relative;
  top: -50px;
  z-index: 998;
  line-height: 102px;
  font-size: 22px;
  color: #333333;
  cursor: pointer;
  transition: transform 1s;
  -webkit-transition: transform 1s; /* Safari */
}
.quick-selection-area li:hover {
  box-shadow: 0 0 20px rgba(193, 227, 238, 0.8);
  transform: scale(1.05, 1.05);
  -ms-transform: scale(1.05, 1.05); /* IE 9 */
  -webkit-transform: scale(1.05, 1.05); /* Safari and Chrome */
}
.quick-selection-area_01 {
  margin-right: 12px;
  background: url(../../img/newindex_img/warranty_inquire.png) no-repeat center;
}
.quick-selection-area_02 {
  margin-right: 12px;
  background: url(../../img/newindex_img/group_code.png) no-repeat center;
}
.quick-selection-area_03 {
  margin-right: 12px;
  background: url(../../img/newindex_img/claim_application.png) no-repeat center;
}
.quick-selection-area_04 {
  background: url(../../img/newindex_img/undone_order.png) no-repeat center;
}
/* 精品推荐区域 */
.fine_show {
  width: 1200px;
  margin: 0 auto;
}
.fine_show .title h4 {
  width: 100%;
  font-size: 32px;
  line-height: 45px;
  font-weight: normal;
  color: #333;
  text-align: center;
}
.fine_show .title p {
  width: 100%;
  font-size: 12px;
  line-height: 17px;
  color: #777;
  text-align: center;
}
.fine_show .main {
  margin: 40px auto 0;
  width: 1200px;
  height: 610px;
  position: relative;
}
.fine_show .main .left_goods {
  width: 562px;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
}
.fine_show .main .right_top_goods {
  width: 746px;
  height: 316px;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 6;
}
.fine_show .main .right_bottom_goods {
  width: 674px;
  height: 276px;
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 4;
}
.left_goods .mask {
  width: 100%;
  height: 100%;
  display: none;
  position: absolute;
  left: 0;
  top: 0;
  background: url(../../img/newindex_img/goods_img/goods_left_hover_box.png) no-repeat center;
  background-size: 100% 100%;
  z-index: 5;
}
.left_goods .bg {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}
.left_goods .bg_hover {
  width: 100%;
  height: 100%;
  position: absolute;
  bottom: -611px;
  left: 0;
  transition: bottom 1s;
  z-index: 4;
}
.left_goods:hover .mask {
  display: block;
}
.left_goods:hover .bg_hover {
  bottom: 0;
}
.left_goods .goods_msg {
  width: 100%;
  height: 176px;
  padding: 15px 117px 0 40px;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 3;
}
.left_goods .goods_msg .user_btn {
  width: 405px;
  position: absolute;
  left: 0;
  bottom: 39px;
  margin-left: 40px;
}
.left_goods .goods_msg_hover {
  display: none;
  width: 100%;
  height: 100%;
  padding-left: 40px;
  padding-top: 209px;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 5;
}
.left_goods:hover .goods_msg_hover {
  display: block;
}
.left_goods:hover .need_hide {
  opacity: 0;
}
.left_goods .goods_msg_hover h4 {
  width: 286px;
  max-height: 60px;
  font-size: 22px;
  color: #fff;
  line-height: 30px;
  margin-bottom: 20px;
}
.left_goods .goods_msg_hover p {
  width: 392px;
  font-size: 14px;
  color: #fff;
  line-height: 20px;
  margin-bottom: 20px;
}
.segmentation {
  width: 40px;
  height: 4px;
  background: #ff5400;
}
.left_goods .goods_msg_hover .user_btn {
  position: absolute;
  width: 100%;
  left: 0;
  bottom: 43px;
  padding-right: 83px;
}
.goods_msg h4 {
  font-size: 22px;
  line-height: 30px;
  width: 100%;
  color: #333;
  font-weight: normal;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: justify;
}
.goods_msg p {
  font-size: 14px;
  margin-top: 12px;
  width: 100%;
  height: 40px;
  line-height: 20px;
  color: #777;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: justify;
}
.user_btn {
  width: 100%;
  height: 36px;
  line-height: 36px;
  font-size: 12px;
  color: #777777;
  text-align: right;
}
.user_btn span {
  font-size: 20px;
  color: #ff5400;
  margin-right: 6px;
}
.user_btn button {
  width: 120px;
  height: 36px;
  color: #fff;
  font-size: 16px;
  border: none;
  background: #ff5400;
  box-shadow: 0 2px 4px 0 rgba(255, 84, 0, 0.8);
  border-radius: 4px;
  margin-left: 20px;
  cursor: pointer;
}
.left_goods .user_btn button {
  margin-left: 30px;
}
.right_top_goods {
  padding-right: 410.4px;
  overflow: hidden;
}
.right_top_goods .bg {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}
.right_top_goods .mask {
  width: 100%;
  height: 100%;
  display: none;
  position: absolute;
  left: 0;
  top: 0;
  background: url(../../img/newindex_img/goods_img/goods_right_top_hover_box.png) no-repeat center;
  background-size: 100% 100%;
  z-index: 5;
}
.right_top_goods .bg_hover {
  width: 100%;
  height: 100%;
  position: absolute;
  top: -315.5px;
  left: 0;
  transition: top 1s;
  z-index: 4;
}
.right_top_goods:hover .mask {
  display: block;
}
.right_top_goods:hover .bg_hover {
  top: 0;
}
.right_top_goods:hover .need_hide {
  opacity: 0;
}
.right_top_goods .goods_msg {
  padding: 36px 410px 0 50px;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
}
.right_top_goods .goods_msg .user_btn {
  width: 286px;
  position: absolute;
  left: 0;
  bottom: 39px;
  margin-left: 50px;
}
.right_top_goods .goods_msg h4 {
  max-height: 60px;
  white-space: normal;
}
.right_top_goods .goods_msg p {
  margin: 13px 0 90px;
}
.right_top_goods .goods_msg_hover {
  display: none;
  width: 100%;
  height: 100%;
  padding-left: 82px;
  padding-top: 29px;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 5;
}
.right_top_goods:hover .goods_msg_hover {
  display: block;
}
.right_top_goods .goods_msg_hover h4 {
  width: 286px;
  max-height: 60px;
  line-height: 30px;
  font-size: 22px;
  color: #fff;
  margin-bottom: 20px;
}
.right_top_goods .goods_msg_hover p {
  width: 280px;
  font-size: 14px;
  color: #fff;
  line-height: 20px;
  margin-bottom: 20px;
}
.right_top_goods .goods_msg_hover .user_btn {
  position: absolute;
  width: 100%;
  left: 0;
  bottom: 38px;
  padding-right: 40px;
}
.right_bottom_goods {
  padding-right: 350px;
  overflow: hidden;
}
.right_bottom_goods .bg {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}
.right_bottom_goods .mask {
  width: 100%;
  height: 100%;
  display: none;
  position: absolute;
  left: 0;
  top: 0;
  background: url(../../img/newindex_img/goods_img/goods_right_bottom_hover_box.png) no-repeat
    center;
  background-size: 100% 100%;
  z-index: 5;
}
.right_bottom_goods .bg_hover {
  width: 100%;
  height: 100%;
  position: absolute;
  top: -276px;
  left: 0;
  transition: top 1s;
  z-index: 4;
}
.right_bottom_goods:hover .mask {
  display: block;
}
.right_bottom_goods:hover .bg_hover {
  top: 0;
}
.right_bottom_goods:hover .need_hide {
  opacity: 0;
}
.right_bottom_goods .goods_msg {
  width: 326.7px;
  height: 100%;
  padding: 35px 0 0 40.7px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
}
.right_bottom_goods .goods_msg .user_btn {
  width: 286px;
  position: absolute;
  left: 0;
  bottom: 39px;
  margin-left: 40px;
}
.right_bottom_goods .goods_msg h4 {
  max-height: 60px;
  white-space: normal;
}
.right_bottom_goods .goods_msg p {
  margin: 13px 0 53px;
}
.right_bottom_goods .goods_msg_hover {
  display: none;
  width: 100%;
  height: 100%;
  padding-left: 77px;
  padding-top: 29px;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 5;
}
.right_bottom_goods:hover .goods_msg_hover {
  display: block;
}
.right_bottom_goods .goods_msg_hover h4 {
  width: 286px;
  max-height: 60px;
  line-height: 30px;
  font-size: 22px;
  color: #fff;
  margin-bottom: 20px;
}
.right_bottom_goods .goods_msg_hover p {
  width: 280px;
  font-size: 14px;
  color: #fff;
  line-height: 20px;
  margin-bottom: 20px;
}
.right_bottom_goods .goods_msg_hover .user_btn {
  position: absolute;
  width: 100%;
  left: 0;
  bottom: 30px;
  padding-right: 40px;
}
/* 优选产品区域样式 */
.optimal_product {
  width: 100%;
  height: 735px;
}
.optimal_product .title h4 {
  width: 100%;
  margin-top: 41px;
  font-size: 32px;
  line-height: 45px;
  font-weight: normal;
  color: #333;
  text-align: center;
}
.optimal_product .title p {
  width: 100%;
  margin-bottom: 40px;
  font-size: 12px;
  line-height: 17px;
  color: #777;
  text-align: center;
}
#index_swiper_goods {
  margin: 0 auto;
  clear: both;
  width: 924px;
  height: 496px;
  position: relative;
}
.swiper_box {
  width: 924px;
  height: 496px;
  margin: 0 auto;
  position: relative;
  z-index: 100;
  overflow: hidden;
}
.swiper-content {
  width: 100%;
  height: 490px;
  position: relative;
  margin: 0 auto;
}
#index_swiper_goods .swiper-wrapper {
  width: 10000px;
  height: 490px;
  position: relative;
}
#index_swiper_goods .swiper-slide {
  height: 490px;
  padding: 0 14px;
  box-sizing: border-box;
  transition: transform 0.5s;
  position: relative;
}
#index_swiper_goods .swiper-slide:hover {
  -webkit-transform: scale(1.06, 1.06); /* Safari and Chrome */
  -ms-zoom: 1.06;
}
.swiper-slide .ele_content {
  height: 100%;
  background: #fff;
  box-shadow: 0 0 6px 4px #f3f5f5;
  border-radius: 8px;
  position: relative;
}
.optimal_product_img {
  width: 100%;
  height: 308px;
}
.optimal_product_img img {
  width: 100%;
  height: 308px;
  border-radius: 8px 8px 0 0;
}
.ele_content .goods_msg {
  padding: 22px 20px 9px;
  height: 182px;
  transition: opacity 0.9s;
}
#index_swiper_goods .swiper-slide:hover .ele_content .goods_msg {
  opacity: 0;
}
#index_swiper_goods .swiper-slide:hover .goods_prices {
  opacity: 0;
}
.ele_content .goods_msg h4 {
  font-size: 18px;
  line-height: 25px;
  color: #333333;
  max-height: 50px;
  white-space: normal;
}
.ele_content .goods_msg p {
  font-size: 14px;
  line-height: 20px;
  margin-top: 10px;
  color: #777;
  height: 60px;
  white-space: normal;
}
#index_swiper_goods .optimal_product_img_hover {
  width: 100%;
  height: 100%;
  padding: 0 14px;
  position: absolute;
  left: 0;
  bottom: 496px;
  transition: bottom 1s;
}
#index_swiper_goods .mask {
  width: 100%;
  height: 100%;
  padding: 0 14px;
  position: absolute;
  left: 0;
  top: 0;
  display: none;
}
#index_swiper_goods .mask img {
  width: 100%;
  height: 100%;
}
#index_swiper_goods .optimal_product_img_hover img {
  width: 100%;
  height: 100%;
}
#index_swiper_goods .swiper-slide:hover .optimal_product_img_hover {
  bottom: 0;
  z-index: 3;
}
#index_swiper_goods .swiper-slide:hover .mask {
  display: block;
  z-index: 5;
}
.ele_content_hover {
  width: 100%;
  height: 100%;
  padding: 70px 44px 0;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 6;
  color: #fff;
  display: none;
}
#index_swiper_goods .swiper-slide:hover .ele_content_hover {
  display: block;
}
.ele_content_hover .goods_msg h4 {
  font-size: 18px;
  color: #ffffff;
  letter-spacing: 0.75px;
  max-height: 50px;
  line-height: 25px;
  white-space: normal;
  margin-top: 40px;
}
.ele_content_hover .goods_msg p {
  font-size: 14px;
  color: #ffffff;
  letter-spacing: 0.58px;
  line-height: 20px;
  height: auto;
  white-space: normal;
  margin-top: 20px;
}
.user_buy_now {
  position: absolute;
  left: 0;
  bottom: 30px;
  width: 100%;
  padding-right: 44px;
  text-align: right;
}
.user_buy_now button {
  width: 100px;
  height: 30px;
  color: #fff;
  font-size: 14px;
  border: none;
  background: #ff5400;
  box-shadow: 0 2px 4px 0 rgba(255, 84, 0, 0.8);
  border-radius: 4px;
  cursor: pointer;
}
.user_buy_now .span-button {
  display: inline-block;
  text-align: center;
  width: 100px;
  height: 30px;
  line-height: 30px;
  color: #fff;
  font-size: 14px;
  border: none;
  background: #ff5400;
  box-shadow: 0 2px 4px 0 rgba(255, 84, 0, 0.8);
  border-radius: 4px;
  cursor: pointer;
}
.ele_content_hover .segmentation {
  width: 30px;
}
.goods_prices {
  position: absolute;
  bottom: 9px;
  left: 0;
  width: 100%;
  height: 28px;
  padding-right: 20px;
  line-height: 28px;
  font-size: 12px;
  color: #777777;
  text-align: right;
}
.goods_prices span {
  font-size: 20px;
  color: #ff5400;
  margin-right: 6px;
}
.swiper-button-prev,
.swiper-button-next {
  width: 42px;
  height: 42px;
  color: #666666;
  background: #f2f2f2;
  border-radius: 42px;
  box-shadow: 0 2px 4px 0 #f2f2f2;
  text-align: center;
  line-height: 42px;
  font-size: 24px;
  cursor: pointer;
  margin-top: -24px;
}
.swiper-button-prev {
  position: absolute;
  left: -100px;
  top: 50%;
  transition-property: background color box-shadow;
  transition-duration: 0.5s;
}
.swiper-button-next {
  position: absolute;
  right: -100px;
  top: 50%;
  transition-property: background color box-shadow;
  transition-duration: 0.5s;
}
.swiper-button-prev:hover,
.swiper-button-next:hover {
  background: #00c1ae;
  color: #fff;
  box-shadow: 0 2px 4px 0 rgba(0, 193, 174, 0.8);
}
.look_more {
  margin-top: 20px;
  text-align: right;
  padding-right: 14px;
}
.look_more button {
  width: 180px;
  height: 40px;
  border: none;
  outline: none;
  font-size: 14px;
  color: #333333;
  letter-spacing: 5.83px;
  background: #ffffff;
  box-shadow: 0 2px 4px 0 #f2f2f2;
  border-radius: 8px;
  cursor: pointer;
  transition-property: background color box-shadow;
  transition-duration: 0.5s;
}
.look_more button:hover {
  background: #00c1ae;
  color: #fff;
  box-shadow: 0 2px 4px 0 rgba(0, 193, 174, 0.8);
}
/* 二维码展示区域 */
.qrcode_show {
  width: 100%;
  height: 601px;
  background: url(../../img/newindex_img/qrcode_box_bg.png) no-repeat center;
  background-size: auto 601px;
}
.qrcode_box {
  width: 1000px;
  height: 100%;
  margin: 0 auto;
  padding: 120px 0 220px;
  position: relative;
}
.qrcode_box h3 {
  height: 70px;
  line-height: 70px;
  font-size: 50px;
  color: #ffffff;
  font-weight: normal;
  margin-bottom: 20px;
}
.qrcode_box .split_line {
  width: 140px;
  height: 2px;
  background: #fff;
  margin: 30px 0;
}
.qrcode_box p {
  font-size: 18px;
  color: #ffffff;
  line-height: 25px;
}
.qrcode_box .qrcode_img {
  width: 200px;
  height: 190px;
  position: absolute;
  bottom: 220px;
  right: 0;
  text-align: center;
}
.qrcode_img button {
  width: 200px;
  height: 40px;
  line-height: 40px;
  margin-top: 20px;
  background: rgba(241, 255, 254, 0.2);
  font-size: 18px;
  color: #ffffff;
  outline: none;
  border: none;
  border-radius: 4px;
  transition-property: background box-shadow;
  transition-duration: 0.5s;
  cursor: pointer;
}
.qrcode_img button:hover {
  background: #00c1ae;
  box-shadow: 0 2px 4px 0 rgba(0, 193, 174, 0.8);
}

/* 指定与团体关系 */
#appoint_relation {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 999;
  /*background: rgba(0,0,0,.3);*/
  background: url(../../img/mask-black.png) repeat;
}
.msg_content {
  width: 570px;
  height: 300px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  text-align: center;
  font-size: 18px;
  background: #ffffff;
}
.content_top,
.content_bottom {
  position: absolute;
  width: 100%;
  background: #14b5b0;
  color: #ffffff;
}
.content_bottom {
  bottom: 0;
  height: 50px;
  line-height: 50px;
  cursor: pointer;
}
.content_top {
  top: 0;
  height: 60px;
  line-height: 60px;
  font-size: 24px;
}
.content_middle {
  margin-top: 60px;
  padding: 20px 50px;
  line-height: 30px;
  background: #ffffff;
}
.middle_tit {
  text-align: left;
}
.mid_wel {
  text-indent: 2em;
}
.radio_check,
.radio_checked {
  display: inline-block;
  margin: 20px 45px;
  width: 65px;
  text-align: right;
  vertical-align: middle;
  cursor: pointer;
}
.radio_check {
  background: url(../../img/radio.png) no-repeat left center;
}
.radio_checked {
  background: url(../../img/radio_checked.png) no-repeat left center;
}
.errMsg {
  color: #ff0000;
  font-size: 16px;
}

/* 节日动画样式 */
#package.pop {
  position: fixed;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  left: 0px;
  top: 0px;
  z-index: 999;
}
#package img {
  position: fixed;
  width: 100px;
  height: auto;
  top: -90px;
  z-index: 999;
}
#package .icon-close {
  display: none;
  position: fixed;
  width: 40px;
  height: 40px;
  border-radius: 20px;
  /* left: 0px; */
  /* top: 0px; */
  z-index: 999;
  cursor: pointer;
  background: url('//static.tkpension.com/tkpmall/imgs/festival/festival-birthday02.png') center
    center no-repeat;
}

@keyframes swing {
  0% {
    transform: translate3d(0px, 0, 0);
  }
  15% {
    transform: translate3d(-40px, 0, 0);
  }

  25% {
    transform: translate3d(-50px, 0, 0);
  }
  50% {
    transform: translate3d(0px, 0, 0);
  }
  65% {
    transform: translate3d(40px, 0, 0);
  }
  75% {
    transform: translate3d(50px, 0, 0);
  }
  100% {
    transform: translate3d(0px, 0, 0);
  }
}
/* 端午活动end */