@charset "utf-8"; @font-face { font-family: "syht"; src: url(../font/SourceHanSerifSC-Heavy.otf) format("woff"), /* chrome, firefox */ url(../font/SourceHanSerifSC-Heavy.otf) format("truetype"), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */ url("../font/SourceHanSerifSC-Heavy.otf#FZZHUNYSK") format("svg"); /* iOS 4.1- */ font-style: normal; font-weight: normal; } .index_top { background-image: url(../image/indexback1.png); background-size: cover; } .index_bottom { background-image: url(../image/indexback2.png); background-size: cover; padding-bottom: 60px; } .title1 { position: relative; margin-bottom: 30px; } .title1 .tname { font-size: 30px; padding-left: 65px; line-height: 50px; background-repeat: no-repeat; background-image: url(../image/index3.png); } .title1 .tmore { font-size: 14px; color: #4d0b75; font-weight: 600; position: absolute; right: 0px; bottom: 7px; } .title1 .tmore:hover { opacity: 0.7; } .title1 .tmore span { margin-left: 5px; font-size: 18px; } .box1 .list { width: calc(100% + 40px); } .box1 .list .item { margin-bottom: 40px; margin-right: 40px; width: calc(25% - 40px); float: left; } .box1 .list .img { overflow: hidden; } .box1 .list .img img { width: 100%; object-fit: cover; height: 230px; } .box1 .list .text { position: relative; border-bottom: 2px solid #be72ec; padding: 50px 0px 25px 0; } .box1 .list .text .date { font-family: 'Georgia'; background-image: url(../image/index38.png); background-size: 100% 100%; text-align: center; padding-top: 5px; padding-bottom: 10px; position: absolute; height: 70px; left: 20px; top: -35px; color: #ffffff; width: 80px; } .box1 .list .text .date1 { font-size: 30px; line-height: 30px; font-weight: 600; } .box1 .list .text .date2 { line-height: 14px; font-size: 14px; margin-top: 6px; } .box1 .list .text .title { line-height: 26px; font-weight: 600; height: 52px; } .box1 .list .item:hover img { transition: all 0.4s; transform: scale(1.05); } .box1 .list .item:hover .title { color: #4d0b75; transition: all 0.4s; } .box1 .list .item:nth-child(odd) { padding-top: 40px; } .box1 .box1list { width: calc(100% + 40px); } .box1 .box1list .item { float: left; box-sizing: border-box; margin-right: 40px; width: calc(33.33% - 40px); box-shadow: 0px 0px 10px 0px rgb(77, 11, 117, 0.1); background-color: #ffffff; padding: 35px 35px; /* border-bottom: 2px solid #be72ec; */ position: relative; background-image: linear-gradient(to right, #ffffff, #ffffff); } .box1 .box1list .item .title { line-height: 26px; font-weight: 600; height: 52px; } .box1 .box1list .item .date { color: #4d0b75; font-family: 'Georgia'; margin-top: 15px; } .box1 .box1list .item::before { position: absolute; top: 5%; width: 70px; height: 95%; right: 0px; content: ''; background-repeat: no-repeat; background-size: contain; background-image: url(../image/index7.png); opacity: 0; } .box1 .box1list .item::after { position: absolute; height: 2px; width: 100%; bottom: 0px; left: 0px; content: ''; background-color: #be72ec; } .box1 .box1list .item:hover::after { opacity: 0; } .box1 .box1list .item:hover { border-top-left-radius: 10px; border-bottom-right-radius: 10px; color: #ffffff; background-image: linear-gradient(to right, #843daf, #3c0061); transition: all 0.4s; } .box1 .box1list .item:hover .date { transition: all 0.4s; color: rgba(255, 255, 255, 0.3); } .box1 .box1list .item:hover::before { transition: all 0.4s; opacity: 1; } .box2 {} .list313{ width: calc(100% + 40px); margin-bottom: 60px; } .list313 .itme{ width: calc(50% - 40px); float: left; margin-right: 40px; } .list313 .itme:hover{ transition: all 0.4s; opacity: 0.6; } .list313 .itme img{ width: 100%; } .box2 .left, .box2 .right { width: calc(50% - 20px); margin-bottom: 60px; } .box2 .left .list .item { border-bottom: 1px solid #e2e2e2; } .box2 .left .list .item:nth-child(1) { border-top: 1px solid #e2e2e2; } .box2 .left .list .item .date { float: right; line-height: 53px; color: #4d0b75; font-family: 'Georgia'; } .box2 .left .list .item .title { line-height: 52px; box-sizing: border-box; padding: 0px 10px; } .hov1:hover .title, .hov1:hover .date { color: #be72ec; transition: all 0.4s; } .box2 .right {} .box2 .right .item { box-sizing: border-box; padding-right: 10px; padding-bottom: 11px; margin-bottom: 15px; position: relative; } .box2 .right .item a { background-color: #ffffff; box-sizing: border-box; padding: 30px 30px; border-top-left-radius: 10px; border-bottom-right-radius: 10px; position: relative; z-index: 2; } .box2 .right .item .date { font-family: 'Georgia'; color: #4d0b75; } .box2 .right .item .date span { font-size: 30px; margin-right: 5px; } .box2 .right .item .title { font-weight: 600; margin-top: 20px; } .box2 .right .item::before { position: absolute; bottom: 0px; right: 0px; height: 100%; width: 80%; content: ''; background-color: #eee5f7; border-bottom-right-radius: 10px; z-index: 1; } .box2 .right .item:last-child { margin-bottom: 0; } .box3 .title1 { color: #ffffff; } .box3 .title1 .tname { background-image: url(../image/index3_c.png); } .box3 .title1 .tmore { color: #ffffff; } .box3 .left { width: calc(62% - 20px); } .box3 .right { width: calc(38% - 20px); } .box3 .left, .box3 .right { padding-bottom: 14px; position: relative; } .box3 .left .img { border-top-left-radius: 20px; border-bottom-right-radius: 20px; overflow: hidden; position: relative; z-index: 3; } .box3 .left .fade-1{ z-index: 3; } .box3 .left .img img { height: 498px; width: 100%; object-fit: cover; } .box3 .left .fade-1 .slick-dots li{ background:#ffffff; } .box3 .back1 { position: absolute; bottom: 0px; left: 50%; transform: translateX(-50%); border-radius: 10px; height: 50%; width: calc(100% - 160px); background-color: #e4dcec; z-index: 1; } .box3 .back2 { position: absolute; bottom: 7px; left: 50%; transform: translateX(-50%); border-radius: 10px; height: 50%; width: calc(100% - 60px); background-color: #c7b3d5; z-index: 2; } .box3 .left .img:hover img { transform: scale(1.05); transition: all 0.4s; } .box3 .right .block { background-color: #ffffff; border-top-left-radius: 20px; border-bottom-right-radius: 20px; box-sizing: border-box; padding: 30px 25px; position: relative; z-index: 3; background-size: contain; background-image: url(../image/index65.png); } .box3 .right .back1 { width: calc(100% - 120px); } .box3 .right .back2 { background-color: #c7b3d5; } .box3 .right .block .item { padding: 20px 0; border-bottom: 1px dashed #e0e0e0; } .box3 .right .block .item:nth-child(1) { border-top: 1px dashed #e0e0e0; } .box3 .right .block .item .title { margin-bottom: 8px; } .box3 .right .block .item .date { font-family: 'Georgia'; color: #4d0b75; } .box2 .list .item:hover .title, .box2 .list .item:hover .date, .box3 .right .block .item:hover .title, .box3 .right .block .item:hover .date { transition: all 0.4s; color: #4d0b75; } .box4 {} .box4 .list { width: calc(100% + 140px); } .box4 .list .item { width: 25%; box-sizing: border-box; padding-right: 140px; float: left; } .box4 .list .item a { position: relative; } .box4 .list .item a:hover, .footer .item1 .block .links .item:hover, .cblj .list .item:hover { opacity: 0.7; transition: all 0.4s; } .box4 .list img { width: 100%; } .box4 .list .title { position: absolute; font-size: 26px; width: 26px; box-sizing: border-box; left: 50%; transform: translateX(-50%); top: 0px; color: #ffffff; font-family: "syht"; height: 100%; padding: 60px 0px; /* padding-bottom: 140px; */ /* writing-mode: vertical-rl; writing-mode: tb-rl; letter-spacing: 4px; margin: 0 auto; text-indent: 10px; */ } .box4 .list .item4 .title { width: 60px; /* padding-bottom: 140px; */ writing-mode: vertical-rl; writing-mode: tb-rl; letter-spacing: 4px; margin: 0 auto; text-indent: 10px; } .cblj { width: 80px; border-radius: 100px; background-color: #c19fde; position: fixed; top: 50%; transform: translateY(-50%); right: -80px; z-index: 200; color: #ffffff; padding-bottom: 40px; /* display: none; */ transition: all 0.5s; } .cblj.style{ /* display:block; */ right: 0; } .cblj .list { padding: 0px 10px; padding-top: 7px; } .cblj .list .item { text-align: center; border-bottom: 1px solid #d4bce8; padding-top: 15px; padding-bottom: 10px; } .cblj .list .item img { margin: auto; } .cblj .list .item .text { color: #ffffff; font-size: 14px; text-align: center; margin-top: 10px; width: calc(100% + 20px); transform: translateX(-10px); } @media screen and (max-width: 1300px) { .box1 .list .img img { height: 200px; } .box4 .list { width: calc(100% + 100px); } .box4 .list .item { padding-right: 100px; } } @media screen and (max-width: 1180px) { .box4 .list { width: calc(100% + 60px); } .box4 .list .item { padding-right: 60px; } } @media screen and (max-width: 1150px) { .box1 .list .img img { height: 165px; } } @media screen and (max-width: 1040px) { .box4 .list .title { padding-top: 50px; padding-bottom: 40px; } } @media screen and (max-width: 1000px) { .box4 .box { padding: 0px; } .box4 .title1 { padding-top: 40px; width: 94vw; margin-left: 3%; } .cblj { display: none; } .box1 .list { width: calc(100% + 20px); } .box1 .list .item { width: calc(50% - 20px); margin-right: 20px; margin-bottom: 40px; } .box1 .list .img img { height: calc((94vw - 20px)/2/32*23); } .box1 .list .item:nth-child(odd) { padding-top: 0px; } .box1 .box1list .item { width: calc(100% - 40px); margin-top: 25px; } .box1 .box1list .item:nth-child(1) { margin-top: 0px; } .box2 .left, .box2 .right { width: 100%; } .box3 .left { width: calc(100%); } .box3 .right { width: 100%; margin-top: 25px; } .box3 .left .img img { height: calc(94vw / 848*498); } .box4 .list { width: calc(100%); } .box4 .list .item { padding-right: 0px; width: 25%; } .box4 .list .item a { width: 80%; max-width: 200px; margin: auto; } .box4 .list .title { font-size: 20px; width: 20px; } .box4 .list .item4 .title { width: 40px; } } @media screen and (max-width: 800px) { .list313 { margin-bottom: 0px; } .list313 .itme{ width: calc(100% - 40px); margin-bottom: 20px; } .index_bottom { padding-bottom: 10px; } .box4 .list .item { margin-bottom: 20px; } .box4 .list .item a { width: 80%; } .box4 .list .item { width: 50%; } .box4 .title1 { padding-top: 0px; } .box3 .left .img, .box3 .right .block { border-top-left-radius: 10px; border-bottom-right-radius: 10px; } .box3 .right .block { padding: 20px 15px; } .box2 .left, .box2 .right { margin-bottom: 30px; } .box3 .right .block .item { padding: 15px 0; } .box2 .box { padding-top: 0px; padding-bottom: 0px; } .box1 .box1list .item { padding: 20px; } .title1 { margin-bottom: 20px; } .box1 .box1list .item .date { margin-top: 10px; } .title1 .tname { font-size: 20px; padding-left: 35px; line-height: 30px; background-size: contain; } .title1 .tmore { bottom: 2px; } .box1 .list .text .date { width: 72px; height: 60px; } .box1 .list .text .date1 { font-size: 24px; line-height: 24px; font-weight: 600; } .box1 .list .text .date2 { line-height: 12px; font-size: 12px; margin-top: 6px; } .box1 .list .text .date { width: 68px; height: 58px; left: 15px; } .box1 .list .text { padding: 35px 0px 15px 0; } .box1 .list .item { margin-bottom: 25px; } } @media screen and (max-width: 450px) { .box1 .list .item { width: calc(100% - 20px); } .box1 .list .img img { height: calc((94vw)/32*23); } .box2 .right .item a { padding: 20px; } .box2 .right .item .date span { font-size: 26px; } /* .box2 .right .item .title { margin-top: 15px; } */ } @media screen and (max-width: 400px) { .box4 .list .title{ padding-top: 40px; padding-bottom: 30px; } } @media screen and (max-width: 360px) { .box4 .list .title { font-size: 18px; width: 18px; } .box4 .list .item4 .title { padding-top: 30px; padding-bottom: 20px; } }