.container {
    width: 1920px;
    margin: 0 auto;
}

.topbar .container{
    height: 902px;
    overflow: hidden;
    position: relative;
}


/* 轮播容器悬停状态 */
#carousel:hover {
    cursor: pointer;
  }
  /* 小圆点悬停反馈 */
  .dot:hover {
    transform: scale(1.2);
    transition: transform 0.3s;
  }

.topbar .container .carousel-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

.topbar .container .carousel-wrapper .carousel-slide {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    opacity: 0;  /* 默认隐藏 */
    transition: opacity 1s ease-in-out;  /* 添加过渡效果 */
}

.topbar .container .carousel-wrapper .carousel-slide.active { opacity: 1; } 

.carousel-dots {
    position: absolute;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);  /* 水平居中 */
    display: flex;
    gap: 10px;
    z-index: 10;  /* 确保层级高于轮播图 */
  }
  .dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255,255,255,0.5);
    cursor: pointer;
    transition: background 0.3s;
  }
  .dot.active { background: rgba(255,255,255,0.9); }  /* 激活状态样式 */



.welcome {
    position: absolute;
    width: 188px;
    height: 64px;
    left: 140px;
    top: 27px;
    background-image: url("../images/top/白色logo.png");
    background-size: cover;
}

.topbar .topbar-nav{
    position: absolute;
    left: 605px;
    top: 45px;
}

.topbar-nav .list {
    height: 20px;
    list-style-type: none;
}
.topbar-nav .list li {
    float: left;
}
.topbar-nav .list li a {
    padding: 0 0 0 140px;
    /* color: white; */
    font-size: 20px;
    font-family: "PingFang";
    color: rgb(255, 255, 255);
}

.downLine {
    position: absolute;
    top: 108px;
    width: 100%;
}

ul {
    margin: 0%;
}

.content .container .show {
    margin-top: 0px;
    height: 825px;
}


.content .container .show .show-logo {
    width: 210px;
    height: 72px;
    background-image: url("../images/top/原色logo.png");
    background-size: cover;
    margin: 0 auto;
    margin-top: 85px;
}

.content .container .show .show-watch {
    height: 514px;
    margin-top: 61px;
    display: flex;
    /* 主轴从左到右 */
    flex-direction: row;
    justify-content: space-around;
}

.content .container .show .show-watch .watch-pic {
    width: 428px;
    height: 100%;
}

.content .container .show .show-watch .watch-pic .watch-more {
    text-align: center;
    margin-top: 100%;
    cursor: pointer;
}

.index1 {
    background-image: url("../images/watchShow/组\ 3.png");
}

.index2 {
    background-image: url("../images/watchShow/组\ 3\ 拷贝.png");
}

.index3 {
    background-image: url("../images/watchShow/组\ 3\ 拷贝\ 2.png");
}

.content .container .story {
    height: 660px;
    background-image: url("../images/story/矩形\ 6.png");
}

.content .container .story .title{
    font-size: 37px;
    font-family: "PingFang";
    color: rgba(255, 255, 255, 0.502);
    line-height: 0.865;
    text-align: center;
    padding-top: 92px;
}


.content .container .story .story-title {
    font-size: 30px;
    font-family: "PingFang";
    color: rgb(255, 255, 255);
    line-height: 1.067;
    text-align: center;
    margin-top: 33px;
}

.content .container .story .down-line {
    width: 89px;
    height: 6px;
    background-image: url("../images/story/矩形\ 8.png");
    margin: 0 auto;
    margin-top: 26px;
}

.content .container .story .detail {
    font-size: 20px;
    font-family: "PingFang";
    color: rgb(255, 255, 255);
    line-height: 1.8;
    text-align: center;
    width: 1109px;
    height: 163px;
    margin: 0 auto;
    margin-top: 80px;
}

.content .container .story .story-more {
    font-size: 20px;
    font-family: "PingFang";
    color: rgb(255, 255, 255);
    line-height: 1.8;
    text-align: center;
    margin: 0 auto;
    margin-top: 116px;
    cursor: pointer;
}




.content .container .kind {
    width: 100%;
    height: 1189px;
    padding-top: 107px;
}

.content .container .kind .kind-title {
    text-align: center;
    letter-spacing: 2px;
}

.content .container .kind .kind-title h1 {
    font-size: 37px;
    font-family: "PingFang";
    color: rgb(0, 0, 0);
    text-transform: uppercase;
    line-height: 0.865;
}


.content .container .kind .kind-title span {
    font-size: 20px;
    font-family: "PingFang";
    color: rgb(84, 84, 84);
    text-transform: uppercase;
    line-height: 1.6;
}


.content .container .kind .kind-show {
    display: flex;
    /* 主轴方向 */
    flex-wrap: wrap;
}

.content .container .kind .kind-show .watch {
    width: 334px;
    height: 431px;
    margin-left: 20px;
    background-color: rgb(255, 255, 255);
    /* opacity: 0.18; */
    box-shadow: 0px 6px 8.3px 1.7px rgba(148, 148, 148, 0.98);
    margin-top: 30px;
}



.content .container .kind .kind-show .watch img {
    width: 100%;
    height: 365px;
}


.content .container .kind .kind-show .watch .detail span {
    font-size: 17.658px;
    font-family: "PingFang";
    color: rgb(0, 0, 0);
}

.content .container .kind .kind-show div:first-of-type {
    margin-left: 255px
}

.content .container .kind .kind-show div:nth-of-type(5) {
    margin-left: 255px
}

.content .container .kind .kind-show .watch .detail {
    width: 100%;
    height: 65px;
    margin-left: 0px;
    font-size: 20px;
    font-family: "PingFang";
    color: rgb(0, 0, 0);
    display: flex;
    justify-content: center;
    align-items: center;
    
}

.content .container .area {
    width: 100%;
    height: 1000px;
}

.content .container .area .area-title {
    text-align: center;
}

.content .container .area .area-title h1 {
    font-size: 37px;
    font-family: "PingFang";
    color: rgb(0, 0, 0);
    text-transform: uppercase;
    line-height: 0.865;
}


.content .container .area .area-title span {
    font-size: 20px;
    font-family: "PingFang";
    color: rgb(84, 84, 84);
    text-transform: uppercase;
    line-height: 1.6;
}

.content .container .area .area-img {
    width: 100%;
    height: 736px;
}

.content .container .area .area-img img {
    width: 100%;
    height: 100%;
}

.content .container .product {
    width: 100%;
    height: 724px;
}

.content .container .product .product-title {
    text-align: center;
}

.content .container .product .product-title  h1 {
    font-size: 37px;
    font-family: "PingFang";
    color: rgb(0, 0, 0);
    text-transform: uppercase;
    line-height: 0.865;
}


.content .container .product .product-title span {
    font-size: 20px;
    font-family: "PingFang";
    color: rgb(84, 84, 84);
    text-transform: uppercase;
    line-height: 1.6;
}

.content .container .product .product-ins {
    height: 486px;
    width: 1400px;
    display: flex;
    margin: 0 auto;
    justify-content: center;
    align-items: center;
    margin-top: 65px;
    justify-content: space-between
}

.content .container .product .product-ins .ins {
    height: 100%;
    width: 410px;
    background-color: rgb(246, 249, 252);
}

.content .container .product .product-ins .ins .intructor h1 {
    font-size: 20px;
    font-family: "PingFang";
    color: rgb(0, 0, 0);
    text-transform: uppercase;
    line-height: 0.865;
    text-align: center;
}

.content .container .product .product-ins .ins .intructor .down-line {
    text-align: center;
    margin-top: 20px;
}

.content .container .product .product-ins .ins .intructor .inner {
    margin-left: 15px;
    text-align: center;
    margin-right: 15px;
    margin-top: 30px;
}

.content .container .product .product-ins .ins .intructor .news-more {
    text-align: center;
    margin-top: 40px;
    cursor: pointer;
}

.content .container .product .product-ins .ins .intructor span {
    font-size: 14px;
    font-family: "PingFang";
    color: rgb(113, 107, 107);
    text-transform: uppercase;
    line-height: 0.865;
}

  

.footer .container .footer-ins {
    width: 100%;
    height: 513px;
    background-image: url("../images/footer/矩形\ 51.png");
}

.footer .container .footer-ins .footer-header {
    display: flex;
}

.footer .container .footer-ins .footer-header .logo {
    margin-top: 35px;
    margin-left: 260px;
}

.footer .container .footer-ins .footer-header .jump {
    margin-left: 160px;
    margin-top: 58px;
}



.footer .container .footer-ins .footer-header .jump ul li {
    list-style-type: none;
    float: left;
    padding: 0;
}

.footer .container .footer-ins .footer-header .jump ul li a {
    font-size: 20px;
    font-family: "PingFang";
    color: rgb(255, 255, 255);
    padding-left: 140px;
}

.footer .container .footer-ins .footer-content {
    display: flex;
}
.footer .container .footer-ins .footer-content .phone{
    width: 400px;
    height: 162px;
    font-size: 22px;
    font-family: "PingFang";
    color: rgb(255, 255, 255);
    line-height: 1.455;
    margin-top: 90px;
    margin-left: 300px;
}




.footer .container .footer-ins .footer-content .erwei {
    display: flex;
    margin-left: 580px;
    margin-top: 114px;
    text-align: center;
}

.footer .container .footer-ins .footer-content .erwei .ma {
    margin-left: 40px;
}

.footer .container .footer-ins .footer-bottom {
    text-align: center;
    padding-top: 35px;
}



span {
    letter-spacing: 2px;
    font-size: 20px;
    color: rgb(255, 255, 255);
}

ul {
    margin: 0%;
}

a {
    text-decoration: none;
}