.banner_area {
   position: relative;
 }


 /* banner style */
 .egg {
   position: absolute;
   right: 0;
   top: 0;
   width: 75%;
   height: 100%;
   background: #f38619d3;
   -webkit-clip-path: circle(60.1% at 92% 6%);
   clip-path: circle(60.1% at 92% 6%);
   z-index: 0;

 }

 .egg1 {
   position: absolute;
   right: 0;
   top: 0;
   width: 74%;
   height: 98%;
   background: #332C2B;
   -webkit-clip-path: circle(60.1% at 92% 6%);
   clip-path: circle(60.1% at 92% 6%);
   z-index: 1;

 }

 .banner_title {
   position: relative;
   background-color: aqua;
 }

 .banner_title h1 {
   text-align: right;
 }








 .about-area {
   padding-bottom: 200px;
   border-bottom: #ebebeb 1px solid;
 }

 .about_area_parts {
   background-color: #fffffff2;
   padding-bottom: 80px;
   padding-left: 160px;
   border-radius: 15px 0px 0px 15px;
   /* border-top: #f0edfd 1px solid; */
   border-left: #ebebeb 1px solid;
   position: relative;
   z-index: 2;

 }


 .about_area_parts h2 {
   color: #171717;
   font-size: 36px;
   font-weight: 600;
   margin-bottom: 20px;

 }

 .titlebox {
   padding-top: 0;
   margin-top: 0;
   color: #ffffff;
   background-color: #f08519;
   border-radius: 0px 0px 15px 15px;
   padding: 5px 30px;
   margin-bottom: 60px;
 }

 .index_show::before {
   position: absolute;
   top: -120px;
   left: 0;
   width: 150%;
   height: 700px;
   border-radius: 0px 15px 15px 0px;
   content: '';
   background: url(../images/about-img.jpg);
   /* background-color: #3c1ddd; */
   background-repeat: no-repeat;
   background-size: cover;
   background-position: center;
   z-index: 0;
   box-shadow: 0 0 15px rgba(0, 0, 0, 0.8);

 }

 @media (max-width: 767px) {
   .index_show::before {
     display: none;
     width: 100%;
   }

   .about_area_parts {
     padding: 0px 15px;
   }



 }






 /* shuzi  */

 .fun-facts-area.fun-facts-about-area {
   padding-top: 120px;
   overflow: hidden;
 }

 .fun-facts-area {
   background: #171717;
   padding-top: 406px;
   position: relative;
   z-index: 10;
 }

 .fun-facts-area .fun-facts-item {
   padding-bottom: 117px;
   position: relative;
 }

 .indexcss .fun-facts-item .title {
   color: #E94609;
 }

 .fun-facts-area .fun-facts-item .title {
   font-size: 60px;
   font-weight: 600;
   color: #000000;
   padding-top: 11px;
   font-family: "Poppins", sans-serif;
 }

 .fun-facts-area .fun-facts-item>span {
   color: #f08519;
   display: block;
   text-transform: capitalize;
 }









 .product-center {
   display: flex;
   justify-content: end;
   background-color: #332C2B;
 }

 .product {
   margin: 0;
   width: 80%;
   padding: 70px 0;
   position: relative;
 }

 @media screen and (max-width:991px) {
   .product {
     width: 95%;
   }
 }

 .product>.text {
   position: relative;
   padding-left: 50px;
 }

 .product>.text::before {
   content: 'OUR PRODUCT';
   position: absolute;
   writing-mode: vertical-rl;
   top: 20px;
   left: 0;
   transform: translateY(-50%);
   transform: rotate(-180deg);
   color: white;
   font-size: 18px;
   color: #F08519;
   font-weight: 600;
 }

 .product>.text .title {
   color: white;
   font-size: 37px;
   max-width: 45%;
 }

 .product>.text p {
   max-width: 40%;
   font-size: 14px;
   margin-top: 20px;
   color: #ffffffbe;
 }

 .product>.text a {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   right: 30%;
 }

 .product>.text a button {
   background-color: #F08519;
   color: white;
   border: none;
   font-size: 14px;
   padding: 15px 28px;
   font-weight: 500;
   transition: 0.3s;
 }

 .product>.text a button:hover {
   background-color: #fff;
   color: #F08519;
 }

 .imgs>div {
   background-color: #FFFFFF;
 }

 .product .page {
   margin-top: 40px;
 }

 .product .page .slick-list.draggable {
   padding: 0 200px 0 0 !important;
 }

 .product .page .slick-prev,
 .product .page .slick-next {
   display: none !important;
 }

 .product .page .imgs {
   padding: 20px;
 }

 @media screen and (max-width:991px) {
   .product .page .imgs {
     padding: 10px;
   }
 }

 .product .page .imgs .img {
   display: block;
   width: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
 }

 .product .page .imgs .img img {
   width: 80%;
   height: 80%;
   object-fit: contain;
 }

 .product .page .imgs .text {
   padding: 20px;
 }

 .product .page .imgs .text h6 {
   font-size: 22px;
 }

 .product .page .imgs .text p {
   font-size: 14px;
   line-height: 1.4;
   margin-top: 10px;
 }

 .product .page .imgs>div>a {
   display: flex;
   align-items: center;
   justify-content: space-between;
   width: 100%;
   padding: 10px 20px;
   background-color: #f0841977;
   color: #000;
 }

 @media screen and (max-width:1400px) {
  .product>.text .title{
    max-width: 60%;
  }
  .product>.text p{
    max-width: 50%;
  }
  .product>.text a{
    right: 15%;
  }
 }
@media screen and (max-width:991px) {
  .product>.text .title{
    font-size: 33px;
  }
  .product>.text::before{
    font-size: 16px;
  }
}
@media screen and (max-width:768px) {
  .product>.text a{
    right: 10%;
  }
  .product>.text a button{
    padding: 13px 22px;

  }
  .product>.text .title{
    max-width: 70%;
    font-size: 30px;
  }
  .product>.text p{
    max-width: 60%;
  }
 

}
@media screen and (max-width:700px) {
  .product>.text .title{
    max-width: 90% ;
  }
  .product>.text p{
    max-width: 90%;
  }
  .product>.text a{
    position: relative;
    right: 0;
    transform: none;
    margin-top: 30px;
  }
}
 @media screen and (max-width: 576px) {
   .product {
     width: 100%;
   }

   .product .page .slick-list.draggable {
     padding-right: 0 !important;
     /* 覆盖原有 200px 内边距 */
   }
 }



 .news {
   padding: 90px 0;
 }

 .news .t1 {
   display: block;
   width: fit-content;
   margin: 0 auto;
   letter-spacing: 2px;
   text-transform: uppercase;
   color: #ff8000;
   margin-bottom: 12px;

 }

 .news .t2 {
   text-align: center;
   font-size: 40px;
 }

 .news .news-list {
   margin-top: 30px;
 }

 .news .new-box {
   padding: 0 15px;
 }

 .news .new-box .text {
   position: relative;
   width: 90%;
   background-color: black;
   color: white;
   padding: 20px;
   margin-left: auto;
   margin-right: 0;
   transform: translateY(-30px);
 }

 .news .new-box .text h6 {
   color: white;
   margin: 10px 0;
 }

 .news .new-box .text p {
   line-height: 1.4;
   color: #ffffffd2;
   overflow: hidden;
   display: -webkit-box;
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
 }

 .news .news-list .slick-prev,
 .news .news-list .slick-next {
   display: none !important;
 }


 .contact {
   background-color: #F08519;
   padding-top: 60px;
 }

 .contact img {
   width: 100%;
   height: 100%;
   object-fit: cover;
 }

 .contact .form form {
   width: 85%;
 }

 .contact .form>span {
   font-size: 14px;
   color: white;
   text-transform: uppercase;
 }

 .contact .form>h6 {
   font-size: 40px;
   color: white;
   margin-bottom: 20px;
 }

 .contact .form form label {
   display: block;
   width: 100%;
   display: flex;
   justify-content: space-between;
 }

 .contact .form form label input {
   width: 48%;
   border: none;
   background-color: transparent;
   border-bottom: 1px solid white;
   padding: 10px 5px;
   margin-bottom: 10px;
   color: white;
 }

 .contact .form form label input::placeholder {
   color: white;
   /* 可选：添加透明度（若需半透明白色），如 opacity: 0.8; */
 }

 /* 针对webkit内核浏览器（Chrome、Safari等）的兼容补充（部分旧版本需此写法） */
 .contact .form form label input::-webkit-input-placeholder {
   color: white;
 }

 /* 针对Firefox浏览器的兼容补充（部分旧版本需此写法） */
 .contact .form form label input::-moz-placeholder {
   color: white;
   opacity: 1;
   /* Firefox默认会降低placeholder透明度，需设为1保持纯白 */
 }

 /* 针对IE浏览器的兼容补充（IE10+） */
 .contact .form form label input:-ms-input-placeholder {
   color: white;
 }

 .contact .form form textarea {
   width: 100%;
   border: none;
   height: 100px;
   background-color: transparent;
   border-bottom: 1px solid white;
   padding: 10px 5px;
  color: white;
  }

 .contact .form form textarea::placeholder {
   color: white;
 }

 .contact .form form textarea::-webkit-input-placeholder {
   color: white;
 }

 .contact .form form textarea::-moz-placeholder {
   color: white;
   opacity: 1;
 }

 .contact .form form textarea:-ms-input-placeholder {
   color: white;
 }

 .contact .form form button {
   background-color: #252525;
   color: white;
   padding: 10px 30px;
   margin-top: 40px;
   transition: 0.3s;
   margin-bottom: 50px;
 }

 .contact .form form button:hover {
   background-color: #fff;
   color: #252525;
 }
@media screen and (max-width:991px) {
  .contact img{
    width: 80%;
    display: block;
    margin: 0 auto;
  }
  .contact .form{
    text-align: center;
    padding-top: 30px;
  }
  .contact .form form{
    width: 80%;
    display: block;
    margin: 0 auto;
  }
}
@media screen and (max-width:576px) {
  .contact .form form label{
    display: block;
  }
  .contact .form form label input{
    width: 100%;
  }
}