.box1{ padding: 265px 0 97px; background-image: url(../img/introduce-box1-bg.jpg); text-align: center; background-size: cover; background-position: center; } .box1 .en{ font-size: 71px; font-family: FandolSong; /* font-weight: bold; */ color: #FFFFFF; text-transform: uppercase; } .box1 .zh{ font-size: 36px; font-family: PingFang; font-weight: 400; color: #FFFFFF; line-height: 1; margin-top: 10px; } .box1 .line{ width: 171px; height: 4px; background: #F6F6F6; margin: 36px auto 0; } .box1 .text-box{ font-size: 18px; font-family: PingFang; font-weight: 400; color: #FFFFFF; line-height: 36px; margin-top: 31px; } .box1 .img{ margin-top: 75px; } .box1 .img .text1{ font-size: 24px; font-family: PingFang; font-weight: 800; color: #FFFFFF; line-height: 1; margin-top: 19px; } .box1 .img .text{ font-size: 18px; font-family: PingFang; font-weight: 500; color: #FFFFFF; line-height: 1; margin-top: 16px; } .box1 .img .icon{ margin-top: 40px; } .box1 .img .icon .iconfont{ font-size: 36px; color: #fff; } .box2{ padding-top: 93px; } .box2 .zh{ font-size: 36px; font-family: PingFang; font-weight: 400; color: #000000; line-height: 1; text-align: center; } .box2 .zh span{ color: rgba(205, 167, 102, 1); } .box2 .en{ font-size: 36px; font-family: PingFang; font-weight: 800; color: #000000; line-height: 36px; margin-top: 15px; text-align: center; /*text-transform: uppercase;*/ } .box2 .des{ width: 1400px; max-width: 100%; font-size: 16px; font-family: PingFang; font-weight: 400; color: #666666; line-height: 36px; margin: 34px auto 0; } .box2 .img{ display: flex; margin: 109px 0 0; } .box2 .img .l{ position: relative; width: 47.58%; } .box2 .img .pic{ height: 100%; width: 100%; } .box2 .img .pic video{ width: 100%; height: 100%; } .box2 .img .pic img{ width: 100%; height: 100%; object-fit: cover; } .box2 .img .l .l-box{ position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); text-align: center; } .box2 .img .l .l-box .iconfont{ font-size: 88px; color: #fff; opacity: 0.45; } .box2 .img .l .l-box p{ margin-top: 17px; font-size: 30px; font-family: PingFang; font-weight: 400; color: #CDA766; line-height: 1; } .box2 .img .r{ flex: 1; } .box3{ margin-top: 172px; padding-bottom: 71px; } .box3 .content1700{ display: flex; justify-content: space-between; } .box3 .l{ width: 44.1%; } .box3 .l .l-t{ display: flex; justify-content: space-between; padding-right: 122px; } .box3 .l .zh{ font-size: 36px; font-family: PingFang; /*font-weight: 800;*/ color: #000000; line-height: 1; } .box3 .l .en{ font-size: 36px; font-family: PingFang; font-weight: 800; color: #000000; line-height: 1; margin-top: 36px; } .box3 .l .l-t-r{ margin-top: 26px; } .box3 .l .text{ font-size: 16px; font-family: PingFang; font-weight: 400; color: #000000; line-height: 36px; margin-top: 84px; } .box3 .l .list{ margin-top: 80px; } .box3 .l .list .swiper-slide{ height: 223px; border: 1px solid #C9C9C9; border-radius: 10px; box-sizing: border-box; padding: 23px 30px 0; } .box3 .l .list .swiper-slide .icon{ height: 38px; line-height: 38px; display: inline-block; } .box3 .l .list .swiper-slide .iconfont{ display: block; font-size: 28px; color: #333; transition: all 0.6s; } .box3 .l .list .swiper-slide:hover .iconfont{ transform: rotateY(180deg); } .box3 .l .list .swiper-slide .text-title{ font-size: 16px; font-family: PingFang; font-weight: 400; color: #000000; line-height: 36px; margin-top: 13px; } .box3 .l .list .swiper-slide .text-des{ font-size: 14px; font-family: PingFang; font-weight: 400; color: #000000; line-height: 34px; margin-top: 3px; } .box3 .l .list .swiper-slide .iconfont.icon-wangzhantubiaoji2_huaban1fuben21{ font-size: 38px; } .box3 .l .btn{ display: flex; padding-left: 26px; margin-top: 63px; } .box3 .l .btn>div{ width: 61px; height: 46px; line-height: 46px; text-align: center; border: 1px solid #141414; margin-right: 6px; cursor: pointer; } .box3 .l .btn>div:hover{ background-color: rgba(205, 167, 102, 1); border-color: rgba(205, 167, 102, 1); } .box3 .l .btn>div:hover .iconfont{ color: #fff; } .box3 .l .btn>div .iconfont{ font-size: 20px; color: #141414; } .box3 .r{ width: 48%; } .box3 .r .pic{ height: 100%; } .box3 .r .pic .imgScale{ height: 100%; object-fit: cover; } .box4{ background-image: url(../img/introduce-box4-bg.jpg.png); background-repeat: no-repeat ; background-size: cover; padding: 87px 0 95px; } .box4 .zh{ font-size: 36px; font-family: PingFang; /*font-weight: 800;*/ color: #272727; line-height: 1; } .box4 .en{ font-size: 36px; font-family: PingFang; font-weight: 800; color: #000000; line-height: 1; margin-top: 32px; } .box4 .gallery-thumbs-box{ position: relative; height: 373px; background-image: url(../img/line.png); background-position: left bottom; background-size: contain; background-repeat: no-repeat; } .box4 .gallery-thumbs-box .btn{ position: absolute; width: 40px; height: 40px; line-height: 40px; text-align: center; background: #FFFFFF; box-shadow: 0px 0px 27px 0px rgba(190, 190, 190, 0.35); border-radius: 50%; bottom: 123px; cursor: pointer; z-index: 3; } .box4 .gallery-thumbs-box .btn.btn-prev{ left: -3%; } .box4 .gallery-thumbs-box .btn.btn-next{ right: -3%; } .box4 .gallery-thumbs-box .btn .iconfont { color: rgba(205, 167, 102, 1); } .box4 .gallery-thumbs-box .gallery-thumbs{ height: 100%; padding: 0 10px; } .box4 .gallery-thumbs-box .swiper-slide{ position: relative; width: 330px; height: 100%; padding-bottom: 23px; cursor: pointer; } .box4 .gallery-thumbs-box .swiper-slide .date{ font-size: 16px; font-family: PingFang; font-weight: 800; color: #000000; line-height: 1; } .box4 .gallery-thumbs-box .swiper-slide .text{ font-size: 18px; font-family: PingFang; font-weight: 800; color: #000000; line-height: 36px; margin-top: 13px; } .box4 .gallery-thumbs-box .swiper-slide .box{ position: absolute; left: 0; bottom: 15px; /* padding-bottom: 100px; */ height: 156px; padding-left: 15px; transition: height 0.6s; } .box4 .gallery-thumbs-box .swiper-slide.swiper-slide-thumb-active .box{ height: 199px; } .box4 .gallery-thumbs-box .swiper-slide.swiper-slide-thumb-active .box::before{ height: 90%; } .box4 .gallery-thumbs-box .swiper-slide .box::before{ position: absolute; content: ""; left: 0; bottom: 0; width: 2px; background-color: rgba(181, 181, 181, 1); height: 66.6%; } .box4 .gallery-thumbs-box .swiper-slide .box::after{ content: ""; position: absolute; left: -4px; bottom: -4px; width: 8px; height: 8px; background: #757576; border-radius: 50%; } .box4 .gallery-thumbs-box .swiper-slide .line{ position: absolute; width: 2px; height: 11px; background-color: #7a7b7b; bottom: 15px; } .box4 .gallery-thumbs-box .swiper-slide .line1{ left: 16.66%; } .box4 .gallery-thumbs-box .swiper-slide .line2{ left: 33.32%; } .box4 .gallery-thumbs-box .swiper-slide .line3{ left: 49.98%; } .box4 .gallery-thumbs-box .swiper-slide .line4{ left: 66.64%; } .box4 .gallery-thumbs-box .swiper-slide .line5{ left: 83.3%; } .box4 .gallery-thumbs-box .lines{ margin-top: -45px; } .box4 .gallery-thumbs-box .lines img{ display: block; width: 100%; } .box4 .gallery-top{ margin-top: 36px; } .box4 .gallery-top .swiper-slide{ display: flex; justify-content: space-between; } .box4 .gallery-top .swiper-slide .l{ flex: 1; padding-right: 10px; display: flex; justify-content: center; padding-top: 54px; } .box4 .gallery-top .swiper-slide .l .year{ font-size: 24px; color: rgba(51, 51, 51, 1); } .box4 .gallery-top .swiper-slide .l .year span{ font-size: 36px; font-weight: bold; } .box4 .gallery-top .swiper-slide .l .text{ font-size: 24px; font-family: Microsoft YaHei; font-weight: bold; color: #333333; line-height: 2; margin-top: 30px; } .box4 .gallery-top .swiper-slide .r{ width: 39.11%; } .box5{ padding: 130px 0 170px; } .box5 .content1700{ display: flex; justify-content: space-between; align-items: center; } .box5 .l .zh{ font-size: 36px; font-family: PingFang; /*font-weight: 800;*/ color: #272727; line-height: 1; } .box5 .l .en{ font-size: 36px; font-family: PingFang; font-weight: 800; color: #000000; line-height: 1; margin-top: 40px; } .box5 .l .text{ font-size: 30px; font-family: PingFang; font-weight: 800; color: #000000; line-height: 1; margin-top: 36px; } .box5 .l ul{ margin-top: 32px; } .box5 .l ul li{ font-size: 18px; font-family: PingFang; font-weight: 400; color: #000000; line-height: 48px; cursor: pointer; } .box5 .l ul li.active{ color: rgba(205, 167, 102, 1); } .box5 .r-box{ flex: 1; margin-left: 157px; } .box5 .r-box li{ display: none; justify-content: space-between; align-items: center; padding-right: 130px; } .box5 .r-box li.active{ display: flex; } .box5 .r-box li>div{ } .box5 .r-box li .c{ font-size: 14px; font-family: PingFang; font-weight: 400; color: #333333; line-height: 30px; flex: 1; max-height: 450px; overflow-y: scroll; margin-right: 130px; } .box5 .r-box li .c::-webkit-scrollbar { width: 1px; } .box5 .r-box li .c::-webkit-scrollbar-track { background-color: rgba(211, 180, 125, 0); border-radius: 2em; } .box5 .r-box li .c::-webkit-scrollbar-thumb { background: rgba(0, 72, 13, 1); border-radius: 2em; } .box5 .r-box li .c a{ color: #333333; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; text-overflow: ellipsis; overflow: hidden; } .box5 .r-box li .c p.active a{ font-size: 16px; font-weight: bold; } .box5 .r-box li .c .text-box:not(:last-child){ margin-bottom: 30px; } .box5 .r-box li .r{ width: 403px; background-color: rgba(238, 238, 238, 0.36); text-align: center; padding: 46px 0 34px; } .box5 .r-box li .r .pic .text{ font-size: 14px; font-family: PingFang; font-weight: 500; color: #000000; line-height: 1; margin-top: 37px; } @media (max-width: 1700px){ .box5 .r-box li .c { margin-right: 40px; } } @media (max-width:1500px) { .box5 .r-box{ margin-left: 60px; } .box5 .r-box li .r{ width: 300px; margin-left: 10px; } .box5 .r-box li{ padding-right: 0px; } } @media锛坢ax-width锛?400px锛墈 } @media (max-width:1199px) { .box1 .en{ font-size: 40px; } .box1 .zh{ font-size: 28px; } .box1 .line{ height: 3px; } .box1{ padding: 130px 0 70px; } .box3 .content1700{ flex-wrap: wrap; } .box3 .l{ width: 100%; } .box3 .r{ width: 100%; margin-top: 30px; } .box3 .r .pic .imgScale{ width: 100%; max-width: 100%; height: auto; } .box2 .zh, .box2 .img .l .l-box p, .box3 .l .zh, .box3 .l .en, .box4 .zh, .box4 .en, .box5 .l .zh, .box5 .l .en, .box2 .en{ font-size: 28px; } .box2 .img .l .l-box .iconfont{ font-size: 60px; } .box3 .l .en,.box4 .en,.box5 .l .en, .box2 .en{ margin-top: 20px; } .box5 .content1700{ flex-wrap: wrap; } .box5 .r-box{ flex: none; width: 100%; margin-left: 0; margin-top: 30px; } .box5 .l ul{ display: flex; justify-content: flex-start; } .box5 .l ul li:not(:last-child){ margin-right: 20px; } } @media (max-width:800px) { .box4 .gallery-thumbs-box .btn{ bottom: auto; top: 30px; } .box2 .img{ flex-wrap: wrap; margin-top: 60px; } .box2 .img .l{ width: 100%; margin-bottom: 20px; } .box2 .img .r{ width: 100%; flex: none; } .box4 .gallery-thumbs-box{ height: 240px; } .box4 .gallery-thumbs-box .swiper-slide .text{ font-size: 16px; line-height: 1.7; } .box4 .gallery-top .swiper-slide .l .text{ font-size: 20px; margin-top: 15px; } .box4 .gallery-top .swiper-slide{ flex-wrap: wrap; } .box4 .gallery-top .swiper-slide .l{ flex: none; width: 100%; justify-content: flex-start; padding-top: 0; } .box4 .gallery-top .swiper-slide .r{ width: 100%; margin-top: 30px; } .box4 .gallery-top .swiper-slide .l .year span{ font-size: 26px; } .box5 .r-box li{ flex-wrap: wrap; } .box5 .r-box li .c{ flex: none; width: 100%; } .box5 .r-box li .c .text-box{ /*display: flex;*/ justify-content: flex-start; flex-wrap: wrap; } .box5 .r-box li .c .text-box:not(:last-child){ margin-bottom: 5px; } .box5 .r-box li .c .text-box p{ /*margin-right: 20px;*/ } .box5 .r-box li .r{ max-width: 100%; margin-top: 30px; } } @media (max-width:500px) { .box1 .en{ font-size: 26px; } .box1 .zh{ font-size: 22px; } .box1 .line{ margin-top: 20px; height: 2px; } .box1 .text-box{ font-size: 16px; line-height: 1.5; } .box1 .img{ margin-top: 30px; } .box1 .img img{ width: 80px; } .box1 .img .text1{ font-size: 20px; } .box1{ padding: 100px 0 50px; } .box1 .img .icon{ margin-top: 25px; } .box2{ padding-top: 50px; } .box2 .zh, .box2 .img .l .l-box p, .box3 .l .zh, .box3 .l .en, .box4 .zh, .box4 .en, .box5 .l .zh, .box5 .l .en, .box2 .en{ font-size: 24px; } .box2 .img .l .l-box p{ font-size: 20px; } .box3{ margin-top: 60px; } .box3 .l .l-t{ padding-right: 0; flex-wrap: wrap; justify-content: flex-end; } .box3 .l .l-t .l-t-l{ width: 100%; } .box3 .l .text{ margin-top: 40px; } .box3 .l .list{ margin-top: 50px; } .box3 .l .btn{ margin-top: 40px; } .box4 .gallery-thumbs-box .swiper-slide .line, .box4 .gallery-thumbs-box .swiper-slide .box{ bottom: 6px; } .box4 .gallery-thumbs-box .swiper-slide .box{ height: 100px; } .box4 .gallery-thumbs-box .swiper-slide.swiper-slide-thumb-active .box{ height: 144px; } .box4 .gallery-top .swiper-slide .l .text{ font-size: 16px; } .box4 .gallery-top .swiper-slide .l .year{ font-size: 20px; } .box5{ padding: 60px 0 80px; } }