/* banner */
 .banner_box {
   position: relative;
   width: 100%;
   transition: transform 1s ease-in-out, opacity 1s ease-in-out;
   /* 不让图片超出容器 */
   overflow: hidden;
 }

 .banner {
   display: block;
   width: 100%;
   object-fit: cover;
   transform: scale(1.1);
   transition: transform 1s ease-in-out;
 }

 .banner_box:hover .banner {
   transform: scale(1);
 }

 .banner-text {
   position: absolute;
   width: 80%;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   color: white;
   text-align: center;
   font-size: 64px;
   opacity: 1;
   /* 添加过渡效果 */
   transition: transform 1s ease-in-out, opacity 1s ease-in-out;
   /* background-color: palegoldenrod; */
 }





 /* 左进场动画 */
 .slide-in-left {

   width: 550px;
   object-fit: cover;
   margin: 60px auto;
   animation: slide-in-left 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
 }

 @-webkit-keyframes slide-in-left {
   0% {
     -webkit-transform: translateX(-1000px);
     transform: translateX(-1000px);
     opacity: 0;
   }

   100% {
     -webkit-transform: translateX(0);
     transform: translateX(0);
     opacity: 1;
   }
 }

 @keyframes slide-in-left {
   0% {
     -webkit-transform: translateX(-1000px);
     transform: translateX(-1000px);
     opacity: 0;
   }

   100% {
     -webkit-transform: translateX(0);
     transform: translateX(0);
     opacity: 1;
   }
 }

 /* 右进场动画 */
 .slide-in-right {
   color: #FFF;
   text-align: center;
   font-family: Source Han Sans CN;
   font-size: 60px;
   font-style: normal;
   font-weight: 900;
   line-height: 63px;
   /* 105% */
   letter-spacing: 6px;
   animation: slide-in-right 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
 }

 @-webkit-keyframes slide-in-right {
   0% {
     -webkit-transform: translateX(1000px);
     transform: translateX(1000px);
     opacity: 0;
   }

   100% {
     -webkit-transform: translateX(0);
     transform: translateX(0);
     opacity: 1;
   }
 }

 @keyframes slide-in-right {
   0% {
     -webkit-transform: translateX(1000px);
     transform: translateX(1000px);
     opacity: 0;
   }

   100% {
     -webkit-transform: translateX(0);
     transform: translateX(0);
     opacity: 1;
   }
 }

 /* 选择地区 */
 .area_container {
   box-sizing: border-box;
   padding: 60px 12vw;
 }

 .area_container h1 {
   margin-bottom: 100px;
   color: #000;
   text-align: center;
   font-family: Source Han Sans CN;
   font-size: 60px;
   font-style: normal;
   font-weight: 700;
   letter-spacing: 6px;
 }

 .select_container {
   width: 100%;
   display: flex;
   justify-content: space-between;
 }

 .area_item {
   width: calc(33.3% - 25px);
 }

 .area_item_title {
   display: flex;
   align-items: center;
   margin-bottom: 20px;
 }

 .select_container select {
   width: 100%;
   height: 45px;
   font-size: 20px;
 }

 .area_title {
   display: flex;
   justify-content: space-between;
   font-size: 22px;
   font-weight: bold;
   color: rgba(216, 12, 36, 1);
   margin-left: 10px;
 }


 .label {
   display: block;
   width: 5px;
   height: 20px;
   border-radius: 11px;
   background: rgba(216, 12, 36, 1);
 }

 .more {
   background-color: rgba(216, 12, 36, 1);
   width: 200px;
   height: 65px;
   line-height: 65px;
   font-size: 18px;
   display: block;
   font-weight: bold;
   color: #ffffff;
   border: 1px solid rgba(216, 12, 36, 1);
   margin: 60px auto 60px auto;
   text-align: center;
   transition: all 0.6s;
   cursor: pointer;
   border-radius: 5px;
 }

 .more:hover {
   animation: box-shadow-drop-bottom 0.4s both;
 }

 @-webkit-keyframes box-shadow-drop-bottom {
   0% {
     box-shadow: 0 0 0 rgba(0, 0, 0, 0);
   }

   100% {
     box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
   }
 }

 @keyframes box-shadow-drop-bottom {
   0% {
     box-shadow: 0 0 0 rgba(0, 0, 0, 0);
   }

   100% {
     box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
   }
 }

 .modal {
   /* display: none; */
   /* 默认隐藏提示框 */
   position: fixed;
   /* 固定位置 */
   top: 30%;
   /* 垂直居中 */
   left: 50%;
   /* 水平居中 */
   transform: translate(-50%, -50%);
   /* 使用transform实现居中 */
   background-color: rgba(0, 0, 0, 0.5);
   /* 背景颜色 */
   color: white;
   /* 文字颜色 */
   padding: 20px;
   /* 内边距 */
   border-radius: 5px;
   /* 圆角 */
   animation: fadeInOut 1.6s ease-in-out forwards;
   /* 动画效果 */
 }

 /* 弹出动画 */
 @keyframes fadeInOut {
   0% {
     opacity: 0;
   }

   25% {
     opacity: 0.5;
   }

   50% {
     opacity: 1;
   }

   100% {
     opacity: 1;
   }
 }


 /*小于768像素，为手机*/
 @media (max-width:767px) {
   #header {
     display: none;
   }

   #footer {
     display: none;
   }

   .area_container h1 {
     margin-top: 40px;
     margin-bottom: 40px;
     font-size: 24px;
   }

   .area_container {
     padding: 20px 15px;
   }

   .slide-in-left {
     width: 160px;
     margin: 10px auto;
   }

   .slide-in-right {
     font-size: 14px;
     line-height: 24.609px;
     letter-spacing: 2.344px;
   }

   .select_container {
     width: 100%;
     display: flex;
     flex-direction: column;
     align-items: center;
   }

   .area_item {
     width: 75%;
     margin-bottom: 50px;
   }

   .label {
     height: 15px;
   }

   .area_item_title {
     display: flex;
     align-items: center;
     margin-bottom: 15px;
   }

   .area_title {
     font-size: 16px;
     font-weight: bold;
     color: rgba(216, 12, 36, 1);
     margin-left: 10px;
   }

   .more {
     margin: 0px auto 40px auto;
     width: 140px;
     height: 52px;
     line-height: 52px;
     font-size: 14px;
   }

   .modal {
    top: 32%;
     padding: 6px;
     border-radius: 5px;
     animation: fadeInOut 1.6s ease-in-out forwards;
   }
 }