@charset "UTF-8";
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-size: 16px; }

a {
  text-decoration: none; }

li {
  list-style: none; }

img {
  vertical-align: top;
  border: none; }

button {
  border: 0;
  background-color: none;
  outline: none;
  -webkit-appearance: none; }

select {
  border: none;
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none; }

h1, h2, h3, h4, h5, h6 {
  font-weight: normal; }

input, textarea {
  outline: none;
  border: none; }

textarea {
  resize: none;
  overflow: auto; }

i {
  font-weight: normal; }

input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0; }

input {
  -moz-appearance: textfield; }

.animated {
  visibility: visible !important; }

.J_clear {
  clear: both; }

html {
  font-size: 100px; }

@media (min-width: 320px) {
  html {
    font-size: 50px; } }
@media (min-width: 360px) {
  html {
    font-size: 56.25px; } }
@media (min-width: 400px) {
  html {
    font-size: 62.5px; } }
@media (min-width: 640px) {
  html {
    font-size: 100px; } }
html::-webkit-scrollbar {
  width: 5px;
  height: 5px; }

html::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1); }

html::-webkit-scrollbar-thumb {
  background: #4e7ca1;
  border-radius: 6px; }

html::-webkit-scrollbar-corner {
  background: #82AFFF; }

.formError {
  width: 280px;
  pointer-events: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  z-index: 101;
  background-color: #f6f6f6;
  border: 1px solid #ec2c31;
  padding: 10px;
  border-radius: 5px;
  opacity: 0;
  transition: .6s all;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.7); }
  .formError.active {
    opacity: 1; }
  .formError i {
    display: block;
    width: 35px;
    height: 35px;
    margin: 0 auto; }
    .formError i.success {
      background: url("../images/success.png") no-repeat;
      background-size: contain; }
    .formError i.fail {
      background: url("../images/fail.png") no-repeat;
      background-size: contain; }
  .formError h6 {
    font-size: 16px;
    color: #333;
    margin-top: 10px;
    text-align: center; }

.notice {
  width: 280px;
  pointer-events: none;
  position: fixed;
  text-align: center;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  z-index: 101;
  background-color: #f6f6f6;
  border: 1px solid #3eb135;
  padding: 10px;
  border-radius: 5px;
  opacity: 0;
  transition: .6s all;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.7); }
  .notice.active {
    opacity: 1; }
  .notice h6 {
    font-size: 16px;
    color: #3eb135;
    text-align: center; }

.bdshare-button-style0-24 a {
  transition: 0.6s;
  float: left;
  padding: 15.5px !important;
  margin: 0 10px 0 0 !important;
  font-size: 14px !important;
  color: #717171;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 31px !important;
  line-height: 31px !important;
  border-radius: 50% !important;
  background-position: unset !important; }
  .bdshare-button-style0-24 a.bds_more {
    padding: 0 !important;
    margin: 0 5px 0 0 !important;
    border-radius: 0% !important;
    background: transparent !important; }
  .bdshare-button-style0-24 a.bds_weixin {
    background: url(../images/wxfx.png) #3eb135 center no-repeat !important; }
  .bdshare-button-style0-24 a.bds_tsina {
    background: url(../images/wb.png) #df4d69 center no-repeat !important; }
  .bdshare-button-style0-24 a.popup_qzone {
    background: url(../images/kj.png) #eecf3d center no-repeat !important; }
  .bdshare-button-style0-24 a.popup_tqq {
    background: url(../images/txwb.png) #45aaf2 center no-repeat !important; }
  .bdshare-button-style0-24 a.popup_renren {
    background: url(../images/rr.png) #1361a7 center no-repeat !important; }

.joan {
  width: 100%; }
  .joan .joan-1 {
    padding: 85px 0;
    padding-top: 130px; }
    .joan .joan-1 .joan-1-con {
      width: 1230px;
      margin: 0 auto;
      margin-top: 55px;
      background: url("../images/joan-1.jpg") no-repeat;
      background-size: cover; }
      .joan .joan-1 .joan-1-con .swiper-container {
        width: 1230px;
        height: 600px;
        margin: 0 auto; }
        .joan .joan-1 .joan-1-con .swiper-container .swiper-wrapper {
          background-color: rgba(0, 0, 0, 0.2); }
          .joan .joan-1 .joan-1-con .swiper-container .swiper-wrapper .swiper-slide {
            display: flex;
            justify-content: center;
            flex-direction: column;
            align-items: center;
            padding: 0 20px;
            position: relative; }
            .joan .joan-1 .joan-1-con .swiper-container .swiper-wrapper .swiper-slide:after {
              content: '';
              opacity: .5;
              display: block;
              width: 1px;
              height: 80%;
              position: absolute;
              top: 50%;
              left: 0;
              transform: translateY(-50%);
              background-color: #fff;
              border-radius: 10px; }
            .joan .joan-1 .joan-1-con .swiper-container .swiper-wrapper .swiper-slide:before {
              content: '';
              opacity: 0;
              display: block;
              width: 100%;
              height: 100%;
              position: absolute;
              top: 0;
              left: 0;
              background: url("../images/joan-1-bag.jpg") center #000 no-repeat;
              background-size: 350px 280px;
              transition: .4s all; }
            .joan .joan-1 .joan-1-con .swiper-container .swiper-wrapper .swiper-slide.active:before {
              opacity: .6; }
            .joan .joan-1 .joan-1-con .swiper-container .swiper-wrapper .swiper-slide figure {
              width: 100%;
              position: relative;
              z-index: 3; }
              .joan .joan-1 .joan-1-con .swiper-container .swiper-wrapper .swiper-slide figure h3 {
                font-size: 24px;
                color: #fff;
                font-weight: bold;
                text-transform: uppercase;
                text-align: center;
                font-family: "fontFamily"; }
                .joan .joan-1 .joan-1-con .swiper-container .swiper-wrapper .swiper-slide figure h3 span {
                  display: block;
                  font-size: 24px;
                  color: #fff;
                  margin-top: 5px;
                  text-align: center; }
                .joan .joan-1 .joan-1-con .swiper-container .swiper-wrapper .swiper-slide figure h3 i {
                  display: block;
                  width: 50px;
                  height: 2px;
                  background-color: #d3b167;
                  margin: 0 auto;
                  margin-top: 15px; }
              .joan .joan-1 .joan-1-con .swiper-container .swiper-wrapper .swiper-slide figure p {
                display: none;
                margin-top: 50px;
                color: #fff;
                font-size: 16px;
                line-height: 30px; }
            .joan .joan-1 .joan-1-con .swiper-container .swiper-wrapper .swiper-slide:first-child figure p {
              display: block; }
        .joan .joan-1 .joan-1-con .swiper-container .swiper-pagination {
          display: none;
          position: absolute;
          bottom: 10px; }
          .joan .joan-1 .joan-1-con .swiper-container .swiper-pagination .swiper-pagination-bullet {
            width: 50px;
            height: 2.5px;
            background-color: #fff;
            opacity: 1;
            border-radius: 0; }
            .joan .joan-1 .joan-1-con .swiper-container .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
              background-color: #d3b167; }
  .joan .joan-2 {
    background-color: #f1f1f1; }
    .joan .joan-2 .joan-2-con {
      margin-top: 55px; }
      .joan .joan-2 .joan-2-con .top {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: unset; }
        .joan .joan-2 .joan-2-con .top ul {
          width: 20%;
          position: relative;
          order: -1; }
          .joan .joan-2 .joan-2-con .top ul li {
            width: 100%;
            background-color: #d3b167;
            padding: 40px 0;
            position: relative; }
            .joan .joan-2 .joan-2-con .top ul li+li{
              border-top:1px solid #fff;
            }
            .joan .joan-2 .joan-2-con .top ul li.active:before {
              opacity: 1; }
            .joan .joan-2 .joan-2-con .top ul li:before {
              content: '';
              opacity: 0;
              display: block;
              width: 100%;
              height: 100%;
              position: absolute;
              top: 0;
              left: 0;
              background: url("../images/joan-1-bag.jpg") center #781d22 no-repeat;
              background-size: cover;
              transition: .4s all; }
            .joan .joan-2 .joan-2-con .top ul li h3 {
              width: 100%;
              text-align: center;
              font-size: 72px;
              color: #fff;
              font-weight: bold;
              position: relative;
              z-index: 3; }
              .joan .joan-2 .joan-2-con .top ul li h3 span {
                display: block;
                text-align: center;
                color: #fff;
                font-size: 18px;
                font-weight: bold; }
        .joan .joan-2 .joan-2-con .top figure {
          width: 80%; }
          .joan .joan-2 .joan-2-con .top figure img {
            width: 100%;
            height: 100%;
            object-fit: cover; }
      .joan .joan-2 .joan-2-con .bottom {
        width: 100%;
        padding: 30px 40px;
        background-color: #fff;
        transition: .4s all; }
        .joan .joan-2 .joan-2-con .bottom h4 {
          font-size: 16px;
          color: #781d22;
          margin-bottom: 10px;
          font-weight: bold;
          transition: .4s all; }
        .joan .joan-2 .joan-2-con .bottom p {
          font-size: 15px;
          color: #333;
          line-height: 30px;
          transition: .4s all; }
  .joan .joan-3 .joan-3-con {
    width: 100%; }
    .joan .joan-3 .joan-3-con p {
      width: 75%;
      margin: 0 auto;
      margin-top: 20px;
      margin-bottom: 60px;
      font-size: 16px;
      color: #666;
      line-height: 30px;
      text-align: center; }
    .joan .joan-3 .joan-3-con .swiper-wrapper {
      height:auto;
      width: 100%; }
      .joan .joan-3 .joan-3-con .swiper-wrapper figure {
        display: block;
        width: 100%;
        position: relative;
        padding: 24.5%; }
        .joan .joan-3 .joan-3-con .swiper-wrapper figure img {
          width: 100%;
          height: 100%;
          display: block;
          position: absolute;
          object-fit: contain;
          left: 0;
          top: 0; }
    .joan .joan-3 .joan-3-con .swiper-button-prev {
      left:3%;
      opacity: 1;
      background-image: url("../images/joan-3-btn.png"); }
    .joan .joan-3 .joan-3-con .swiper-button-next {
      right:3%;
      opacity: 1;
      background-image: url("../images/joan-3-btn.png");
      transform: rotate(180deg); }
  .joan .joan-4 {
    background-color: #f1f1f1;
    padding-bottom: 85px; }
    .joan .joan-4 .joan-1230 {
      padding-bottom: 60px; }
      .joan .joan-4 .joan-1230 .put-title {
        text-align: left; }
        .joan .joan-4 .joan-1230 .put-title span {
          text-align: left; }
      .joan .joan-4 .joan-1230 .joan-4-p {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        align-content: space-between;
        justify-content: space-between;
        position: relative; }
        .joan .joan-4 .joan-1230 .joan-4-p p {
          width: 80%;
          font-size: 16px;
          color: #666;
          text-align: left;
          line-height: 26px;
          margin-top: 10px; }
    .joan .joan-4 .joan-4-con {
      position: relative; }
      .joan .joan-4 .joan-4-con .swiper-slide:hover h5 {
        color: #d3b167; }
      .joan .joan-4 .joan-4-con .swiper-slide a {
        display: block;
        width: 100%;
        position: relative;
        padding: 35%; }
        .joan .joan-4 .joan-4-con .swiper-slide a img {
          width: 100%;
          height: 100%;
          display: block;
          position: absolute;
          object-fit: cover;
          left: 0;
          top: 0; }
      .joan .joan-4 .joan-4-con .swiper-slide h5 {
        font-size: 16px;
        color: #333;
        text-align: center;
        margin-top: 25px;
        transition: .4s all; }
      .joan .joan-4 .joan-4-con .joan-4-btn2 {
        display: none;
        width: 94%;
        top: 46%;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);
        z-index: 1; }
  .joan .joan-5 {
    width: 100%;
    background: url("../images/joan-5-bag.jpg") no-repeat;
    background-size: 100% 100%; }
    .joan .joan-5 .put-title {
      color: #fff; }
      .joan .joan-5 .put-title span {
        color: #fff; }
    .joan .joan-5 .joan-5-form {
      margin-top: 50px;
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: flex-start;
      align-items: unset; }
      .joan .joan-5 .joan-5-form .left {
        width: 56%;
        padding: 50px 20px;
        background-color: #fff; }
        .joan .joan-5 .joan-5-form .left .top {
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          align-content: space-between;
          justify-content: space-between;
          align-items: unset; }
          .joan .joan-5 .joan-5-form .left .top h2 {
            width: 50%;
            font-size: 24px;
            color: #000; }
            .joan .joan-5 .joan-5-form .left .top h2 span {
              display: block;
              font-size: 16px;
              color: #666;
              margin-top: 15px; }
          .joan .joan-5 .joan-5-form .left .top div {
            width: 50%; }
            .joan .joan-5 .joan-5-form .left .top div span {
              display: block;
              font-size: 16px;
              color: #666;
              margin-bottom: 15px;
              text-align: right;
              position: relative; }
              .joan .joan-5 .joan-5-form .left .top div span:before {
                content: '';
                opacity: 1;
                display: block;
                position: absolute;
                top: 50%;
                right: 70px;
                transform: translateY(-50%);
                width: 18px;
                height: 18px;
                background: url("../images/joan-5-tel.png") no-repeat;
                background-size: 100% 100%; }
            .joan .joan-5 .joan-5-form .left .top div a {
              display: block;
              font-size: 24px;
              color: #c8171f;
              font-weight: bold;
              text-align: right; }
        .joan .joan-5 .joan-5-form .left .bottom {
          margin-top: 55px;
          width: 100%;
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          align-content: space-between;
          justify-content: space-between; }
          .joan .joan-5 .joan-5-form .left .bottom li {
            width: 100%; }
            .joan .joan-5 .joan-5-form .left .bottom li.small {
              width: 48%;
              margin-top: 0; }
            .joan .joan-5 .joan-5-form .left .bottom li + li {
              margin-top: 30px; }
            .joan .joan-5 .joan-5-form .left .bottom li.submit {
              margin: 0 auto;
              margin-top: 50px;
              width: 50%;
              display: flex;
              flex-wrap: wrap;
              align-items: center;
              align-content: space-between;
              justify-content: space-between; }
              .joan .joan-5 .joan-5-form .left .bottom li.submit button {
                width: 100%;
                padding: 12px 0;
                font-size: 16px;
                color: #fff;
                text-align: center;
                cursor: pointer;
                transition: .4s all; }
                .joan .joan-5 .joan-5-form .left .bottom li.submit button:first-child {
                  background-color: #781d22; }
                .joan .joan-5 .joan-5-form .left .bottom li.submit button:last-child {
                  display:none;
                  background-color: #d3b167; }
                .joan .joan-5 .joan-5-form .left .bottom li.submit button:hover {
                  border-radius: 20px; }
            .joan .joan-5 .joan-5-form .left .bottom li input {
              width: 100%;
              height: 47px;
              background-color: #f1f1f1;
              padding: 0 20px;
              color: #999;
              font-size: 16px;
              transition: .4s all; }
              .joan .joan-5 .joan-5-form .left .bottom li input::-webkit-input-placeholder {
                color: #999;
                font-size: 16px; }
              .joan .joan-5 .joan-5-form .left .bottom li input:hover {
                box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); }
            .joan .joan-5 .joan-5-form .left .bottom li textarea {
              width: 100%;
              height: 100px;
              resize: auto;
              background-color: #f1f1f1;
              padding: 10px 20px;
              color: #999;
              font-size: 16px;
              transition: .4s all; }
              .joan .joan-5 .joan-5-form .left .bottom li textarea:hover {
                box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); }
      .joan .joan-5 .joan-5-form .right {
        width: 44%;
        background: url("../images/joan-1-bag.jpg") #d3b167 no-repeat;
        background-size: 100% 100%;
        padding: 0 20px;
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center; }
        .joan .joan-5 .joan-5-form .right h3 {
          font-size: 24px;
          color: #fff;
          text-align: center; }
        .joan .joan-5 .joan-5-form .right #box {
          width: 100%;
          height: 320px;
          overflow: hidden;
          margin-top: 25px;
          margin-bottom: 35px; }
          .joan .joan-5 .joan-5-form .right #box ul {
            width: 100%; }
            .joan .joan-5 .joan-5-form .right #box ul li {
              width: 100%;
              height: 55px;
              border-bottom: 1px solid #fff;
              display: flex;
              flex-wrap: wrap;
              align-items: center;
              align-content: space-between;
              justify-content: space-between; }
              .joan .joan-5 .joan-5-form .right #box ul li time {
                font-size: 16px;
                color: #fff;
                line-height: 55px;
                position: relative;
                order: -1; }
              .joan .joan-5 .joan-5-form .right #box ul li p {
                font-size: 16px;
                color: #fff;
                line-height: 55px; }
        .joan .joan-5 .joan-5-form .right h4 {
          width: 100%;
          font-size: 16px;
          color: #fff; }
          .joan .joan-5 .joan-5-form .right h4 span {
            color: #c8171f; }

@font-face {
  font-family: fontFamily;
  src: url(../font/fontFamily.ttf); }
.put-title {
  font-size: 54px;
  color: #000;
  font-weight: bold;
  text-align: center;
  text-transform: uppercase;
  line-height: 110%;
  font-family: "fontFamily"; }
  .put-title span {
    display: block;
    text-align: center;
    color: #000;
    font-size: 20px;
    font-weight: normal;
    margin-top: 5px;
    font-family: none; }

.joan-1230 {
  max-width: 1230px;
  padding: 85px 0;
  margin: 0 auto; }

.joan-4-btn {
  width: 75px;
  height: 32px;
  position: absolute;
  bottom: 0;
  right: 0; }
  .joan-4-btn .swiper-button-prev {
    width: 32px;
    height: 32px;
    background-image: url("../images/joan-4-btn.png");
    background-size: 100% 100%;
    bottom: 0;
    left: 0; }
  .joan-4-btn .swiper-button-next {
    width: 32px;
    height: 32px;
    background-image: url("../images/joan-4-btn.png");
    transform: rotate(180deg);
    background-size: 100% 100%;
    bottom: 0;
    right: 0; }
/*新增*/
.title-p{
    width: 75%;
    margin: 0 auto;
    margin-top: 20px;
    margin-bottom: 60px;
    font-size: 16px;
    color: #666;
    line-height: 30px;
    text-align: center;
    font-weight:normal;
}
.joan-4 .swiper-wrapper.baguetteBox{height:auto;}
@media screen and (max-width: 1250px) {
  .joan .joan-1 .joan-1-con .swiper-container {
    width: 100%; }

  .put-title {
    font-size: 40px; }

  .joan .joan-1 .joan-1-con {
    width: 100%; }

  .joan .joan-1 {
    padding-top: 8%;
    padding-bottom: 5%; }

  .joan .joan-1 .joan-1-con .swiper-container .swiper-wrapper {
    background-color: transparent; }

  .joan .joan-1 .joan-1-con .swiper-container .swiper-wrapper .swiper-slide figure h3 {
    font-size: 20px; }

  .joan .joan-1 .joan-1-con .swiper-container .swiper-wrapper .swiper-slide figure h3 span {
    font-size: 20px; }

  .joan .joan-1 .joan-1-con .swiper-container .swiper-wrapper .swiper-slide figure p {
    font-size: 14px;
    margin-top: 20px; }

  .joan .joan-1 .joan-1-con .swiper-container .swiper-pagination {
    display: block; }

  .joan .joan-2 .joan-2-con {
    width: 100%; }

  .joan .joan-1230 {
    width: 100%;
    padding-top: 8%;
    padding-bottom: 5%; }

  .joan .joan-4 {
    padding-bottom: 5%; }

  .joan .joan-4 .joan-1230 {
    padding: 8% 4%;
    padding-bottom: 4%; }

  .joan .joan-5 .joan-5-form {
    display: block;
    height: auto; }

  .joan .joan-5 .joan-5-form .left {
    width: 100%; }

  .joan .joan-5 .joan-5-form .right {
    width: 100%;
    padding: 50px 20px;
    margin-top: 3%; }

  .joan .joan-5 .joan-1230 {
    padding: 8% 4%; }

  .joan .joan-5 {
    background-size: cover; }

  .joan .joan-5 .joan-5-form .left .bottom li.submit button {
    padding: 17px 0; } }
@media screen and (max-width: 1024px) {
  .put-title {
    font-size: 38px; }

  .joan .joan-1 .joan-1-con .swiper-container {
    height: 500px; }

  .joan .joan-2 .joan-2-con .top ul li h3 {
    font-size: 52px; }

  .joan .joan-2 .joan-2-con .top ul li h3 span {
    font-size: 16px; }

  .joan .joan-2 .joan-2-con .bottom {
    padding: 2%; }
    .title-p{
      margin-top: 10px;
      margin-bottom: 4%;
      width: 80%;
    }
  .joan .joan-3 .joan-3-con p {
    margin-top: 10px;
    margin-bottom: 4%;
    width: 80%; } }
@media screen and (max-width: 850px) {
  /*小于850px*/ }
@media screen and (max-width: 768px) {
  .put-title {
    font-size: 26px; }

  .put-title span {
    font-size: 18px; }

  .joan .joan-1 .joan-1-con {
    margin-top: 5%; }

  .joan .joan-1 .joan-1-con .swiper-container {
    height: 400px; }

  .joan .joan-1 .joan-1-con .swiper-container .swiper-pagination .swiper-pagination-bullet {
    height: 1.5px;
    width: 30px; }

  .joan .joan-1 .joan-1-con .swiper-container .swiper-wrapper .swiper-slide figure h3 {
    font-size: 18px; }

  .joan .joan-1 .joan-1-con .swiper-container .swiper-wrapper .swiper-slide figure h3 span {
    font-size: 18px; }

  .joan .joan-2 .joan-2-con {
    margin-top: 5%; }

  .joan .joan-2 .joan-2-con .top {
    display: block; }

  .joan .joan-2 .joan-2-con .top figure {
    display: block;
    width: 100%;
    position: relative;
    padding: 30%; }

  .joan .joan-2 .joan-2-con .top figure img {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    object-fit: cover;
    left: 0;
    top: 0; }

  .joan .joan-2 .joan-2-con .top ul {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start; }

  .joan .joan-2 .joan-2-con .top ul li {
    width: 33.33333%;
    padding: 20px 0; }

  .joan .joan-2 .joan-2-con .top ul li h3 {
    font-size: 42px; }

  .joan .joan-2 .joan-2-con .top ul li h3 span {
    font-size: 14px; }

  .joan .joan-2 .joan-2-con .bottom {
    padding: 5% 4%; }

  .joan .joan-3 .joan-3-con p {
    width: 100%;
    margin: 5% 0;
    font-size: 14px;
    padding: 0 4%;
    line-height: 26px; }

  .joan .joan-3 .joan-3-con .swiper-wrapper figure {
    padding: 25% 0; }

  .joan .joan-3 .joan-3-con .swiper-button-prev {
    left: 3%;
    transform: scale(0.8); }

  .joan .joan-3 .joan-3-con .swiper-button-next {
    right: 3%;
    transform: scale(0.8) rotate(180deg); }

  .joan .joan-4 .joan-1230 .put-title {
    text-align: center; }

  .joan .joan-4 .joan-1230 .put-title span {
    text-align: center; }

  .joan .joan-4 .joan-1230 .joan-4-p p {
    font-size: 14px;
    margin-top: 5%;
    width: 100%; }

  .joan .joan-4 .joan-4-con .joan-4-btn2 {
    display: block; }

  .joan-4-btn {
    display: none; }

  .joan .joan-4 .joan-4-con .swiper-slide h5 {
    margin-top: 15px;
    font-size: 14px; }

  .joan .joan-5 .joan-5-form {
    margin-top: 5%; }

  .joan .joan-5 .joan-5-form .left {
    padding: 4% 2%; }

  .joan .joan-5 .joan-5-form .left .top h2 {
    width: auto; }

  .joan .joan-5 .joan-5-form .left .top h2 span {
    display: none; }

  .joan .joan-5 .joan-5-form .left .top div {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    width: auto; }

  .joan .joan-5 .joan-5-form .left .top div span {
    font-size: 16px;
    margin-bottom: 0;
    color: #000; }

  .joan .joan-5 .joan-5-form .left .top div span:before {
    display: none; }

  .joan .joan-5 .joan-5-form .left .top div a {
    font-size: 16px;
    margin-left: 5px; }

  .joan .joan-5 .joan-5-form .left .bottom {
    margin-top: 5%; }

  .joan .joan-5 .joan-5-form .left .bottom li + li {
    margin-top: 3%; }

  .joan .joan-5 .joan-5-form .left .bottom li.submit {
    margin-top: 4%;
    width: 100%; }

  .joan .joan-5 .joan-5-form .left .bottom li input {
    font-size: 14px; }

  .joan .joan-5 .joan-5-form .left .bottom li input::-webkit-input-placeholder {
    font-size: 14px; }

  .joan .joan-5 .joan-5-form .left .bottom li input {
    height: 40px; }

  .joan .joan-5 .joan-5-form .left .bottom li textarea {
    height: 80px; }

  .joan .joan-5 .joan-5-form .left .bottom li.submit button {
    font-size: 14px;
    padding: 10px 0; }
    .title-p{
      width: 100%;
      margin: 5% 0;
      font-size: 14px;
      padding: 0 4%;
      line-height: 26px;
    }
    .joan .joan-2 .joan-2-con .top ul li+li{
      border-top:none;
      border-left:1px solid #fff;
    }
    .joan .joan-3 .joan-3-con .swiper-wrapper figure img{
      left: 50%;
      top: 0;
      width: 94%;
      transform: translateX(-50%);
    }
  .joan .joan-5 .joan-5-form .right {
    padding: 4% 2%; } }
@media screen and (max-width: 620px) {
  /*小于620px*/ }
@media screen and (max-width: 520px) {
  .put-title {
    font-size: 22px; }

  .put-title span {
    font-size: 15px; }

  .joan .joan-1 .joan-1-con .swiper-container .swiper-wrapper .swiper-slide figure h3 {
    font-size: 16px; }

  .joan .joan-1 .joan-1-con .swiper-container .swiper-wrapper .swiper-slide figure h3 span {
    font-size: 16px; }

  .joan .joan-1 .joan-1-con .swiper-container .swiper-wrapper .swiper-slide figure p {
    margin-top: 10px;
    line-height: 26px; }

  .joan .joan-2 .joan-2-con .top ul {
    align-items: unset; }

  .joan .joan-2 .joan-2-con .top ul li h3 {
    font-size: 36px; }

  .joan .joan-2 .joan-2-con .top ul li h3 span {
    font-size: 12px;
    padding: 0 5px; }

  .joan .joan-2 .joan-2-con .bottom p {
    font-size: 14px;
    line-height: 26px; }

  /* .joan .joan-3 .joan-3-con .swiper-wrapper figure {
    padding: 45% 0; } */

  .joan .joan-5 .joan-5-form .left .bottom li.small {
    width: 100%; }

  .joan .joan-5 .joan-5-form .left .bottom li.small + li.small {
    margin-top: 3%; }

  .joan .joan-5 .joan-5-form .left .bottom li input {
    padding: 0 10px; }

  .joan .joan-5 .joan-5-form .left .bottom li textarea {
    padding: 10px;
    font-size: 14px; }

  .joan .joan-5 .joan-5-form .left .bottom li.submit button {
    padding: 8px 0; }

  .joan .joan-5 .joan-5-form .right #box ul li {
    display: block;
    height: auto;
    padding: 5px 0; }

  .joan .joan-5 .joan-5-form .right #box ul li time {
    line-height: 100%;
    font-size: 14px; }

  .joan .joan-5 .joan-5-form .right #box ul li p {
    line-height: 100%;
    margin-bottom: 5px;
    font-size: 14px; }

  .joan .joan-5 .joan-5-form .right #box {
    margin: 5% 0; }

  .joan .joan-5 .joan-5-form .right h3 {
    font-size: 18px; } }
@media screen and (max-width: 420px) {
  .joan .joan-5 .joan-5-form .left .top {
    display: block; }

  .joan .joan-5 .joan-5-form .left .top h2 {
    font-size: 18px; }

  .joan .joan-5 .joan-5-form .left .top div {
    margin-top: 3px; }

  .joan .joan-5 .joan-5-form .left .top div span {
    font-size: 14px; }

  .joan .joan-5 .joan-5-form .left .top div a {
    font-size: 14px; }

  .joan .joan-2 .joan-2-con .top figure {
    padding: 40% 0; } }
@media screen and (max-width: 320px) {
  /*小于320px*/ }
@media only screen and (min-width: 1200px) and (max-width: 1400px) {
  /*大于1200小于1400*/ }
@media only screen and (min-width: 1024px) and (max-width: 1200px) {
  /*大于1024小于1200*/ }
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  /*大于768小于1024*/ }
@media only screen and (min-width: 520px) and (max-width: 768px) {
  /*大于520小于768*/ }
@media only screen and (min-width: 420px) and (max-width: 520px) {
  /*大于420小于520*/ }
@media only screen and (min-width: 320px) and (max-width: 420px) {
  /*大于320小于420*/ }

/*# sourceMappingURL=joan.css.map */