.list1 { --l1p: 10px; --imgw: 300px; margin: calc(var(--l1p)*-1); } .list1 .list1-li { padding: var(--l1p); } .list1 .list1-box { display: flex; box-shadow: 0px 0px 16px 0px rgba(0, 82, 147, 0.1); border-radius: var(--l1p); background: #ffffff; overflow: hidden; align-items: center; transform: translateY(0px); transition: transform 0.3s, background 0.3s; } .list1 .list1-box:hover { transform: translateY(-5px); /* background: #f1f1f1; */ } .list1 .list1-box:hover .list1-title { color: var(--main-color); } .list1 .list1-box:hover .more-box-b { --dc: var(--main-color); } .list1 .img-box { flex-shrink: 0; width: var(--imgw); } .list1 .img-box::before { padding-top: 75%; } .list1 .list1-cont { width: calc(100% - var(--imgw)); padding: 15px 40px; } .list1 .list1-num { font-size: 14px; line-height: 1.4em; color: #999999; } .list1 .list1-title { margin-top: 19px; font-size: 18px; line-height: 1.4em; color: #333333; } .list1 .more-box-b { --dc: #999999; margin-top: 30px; } @media (max-width: 1600px) { .list1 { --l1p: 8px; --imgw: 260px; } .list1 .list1-cont { padding: 15px 30px; } .list1 .list1-title { margin-top: 12px; font-size: 16px; } .list1 .more-box-b { margin-top: 20px; } } @media (max-width: 1441px) { .list1 { --l1p: 7px; --imgw: 220px; } .list1 .list1-cont { padding: 10px 20px; } .list1 .list1-title { margin-top: 10px; font-size: 14px; } .list1 .more-box-b { margin-top: 10px; } } @media (max-width: 1200px) { .list1 { --l1p: 0.1rem; --imgw: 3rem; } .list1 .list1-cont { padding: 0.15rem 0.2rem; } .list1 .list1-title { margin-top: 0.15rem; font-size: 0.28rem; } .list1 .more-box-b { margin-top: 0.15rem; } } .list2 { --color: #ffffff; --hover: var(--main-color); color: var(--color); margin-bottom: var(--fs52); height: 60%; } .list2 .list2-li { border: 1px solid rgba(0, 0, 0, 0.01); margin-left: -1px; margin-top: -1px; box-sizing:border-box; width: 48%; margin: 1%; height: 30%; } .list2 .list2-li .list2-box { position: relative; background: rgba(255, 255, 255, 1); height: 100%; width: 100%; padding:0; overflow: hidden; font-size: 16px; line-height: 1.75em; transition: all 0.4s; } .list2 .list2-li .list2-box:hover { box-shadow: 0px 8px 38px 0px rgba(0, 0, 0, 0.5); } .list2 .list2-li .list2-box:hover .type { background-color: var(--main-color); } .list2 .list2-li .list2-box:hover .more { opacity: 1; transform: translateY(0); } .list2 .list2-li .img-con { width: 40%; text-align: center; } .list2 .list2-li .img-con::before { padding-top: 0; } .list2 .list2-li .img-con img{ height: auto; } .list2 .list2-li .cont { width: 48%; padding-right: 6%; } .list2 .list2-li .type { display: inline-block; margin-bottom: 20px; background-color: var(--main-third-color); border-radius: 3px; padding: 0 0.75em; font-size: 16px; line-height: 33px; color: #ffffff; transition: background 0.3s; } .list2 .list2-li .title { font-size: 24px; font-weight: bold; line-height: 1.66em; letter-spacing: 1px; color: #333333; } .list2 .list2-li .title-en { font-size: 24px; font-weight: bold; line-height: 1.25em; letter-spacing: 1px; color: #333333; } .list2 .list2-li .des { margin-top: 12px; margin-bottom: 18px; font-size: 17px; line-height: 1.5em; color: #666666; } .list2 .list2-li .more { display: inline-block; transform: translateY(5px); border-radius: 6px; background-color: var(--main-color); width: 242px; max-width: 100%; opacity: 0.5; text-align: center; font-size: 15px; line-height: 42px; color: #ffffff; transition: opacity 0.3s, transform 0.4s; } @media (max-width: 1600px) { .list2 .list2-li .list2-box { padding:0; font-size: 15px; line-height: 1.6em; } .list2 .list2-li .cont { padding-right: 3%; } .list2 .list2-li .type { margin-bottom: 10px; padding: 0 0.75em; font-size: 15px; line-height: 32px; } .list2 .list2-li .title { font-size: 22px; } .list2 .list2-li .title-en { font-size: 22px; } .list2 .list2-li .des { margin-top: 10px; margin-bottom: 13px; font-size: 16px; } .list2 .list2-li .more { border-radius: 4px; width: 230px; font-size: 14px; line-height: 40px; } } @media (max-width: 1200px) { .list2 .list2-li .list2-box { padding: 0; font-size: 0.26rem; } .list2 .list2-li .img-box { width: 100%; } .list2 .list2-li .img-con { width: 100%; text-align: center; } .list2 .list2-li .cont { width: 100%; padding: 0.1rem; text-align: center; } .list2 .list2-li .type { margin-bottom: 0.15rem; font-size: 0.26rem; line-height: 1.8em; } .list2 .list2-li .title { font-size: 0.26rem; } .list2 .list2-li .title-en { font-size: 0.28rem; } .list2 .list2-li .des { margin-top: 0.1rem; margin-bottom: 0.15rem; font-size: 0.26rem; } .list2 .list2-li .more { display: none; transform: translate(0); opacity: 1; width: 2rem; font-size: 0.26rem; line-height: 0.5rem; } } .list2 .cont-box { height: 100%; padding: 28px 55px 33px 40px; background: #f7f7f7; } .list2 .cont-box .list2-title { font-size: 20px; font-weight: bold; line-height: 1.4em; color: #333333; } .list2 .cont-box .list2-des { margin-top: 7px; font-size: 16px; line-height: 2em; color: #666666; } @media (max-width: 1600px) { .list2 { --l2p: 12px; } .list2 .list2-li { width: calc(var(--wrapw)*0.3); } .list2 .list2-box { border-radius: 10px; } .list2 .cont-box { padding: 22px 30px 20px; } .list2 .cont-box .list2-des { margin-top: 5px; line-height: 1.8em; } } @media (max-width: 1200px) { .list2 { --l2p: 0.1rem; } .list2 .list2-li { width: calc(var(--wrapw)*0.5); } .list2 .list2-box { border-radius: 0.1rem; } .list2 .cont-box { padding: 0.3rem 0.3rem; } .list2 .cont-box .list2-title { font-size: 0.26rem; } .list2 .cont-box .list2-des { margin-top: 0.1rem; font-size: 0.24rem; line-height: 1.6em; } } .list3 { --l3p: 20px; --imgw: 300px; --btnw: 28px; } .list3 .list3-li { position: relative; padding-bottom: var(--fs14); } .list3 .list3-li + .list3-li { padding-top: var(--fs14); } .list3 .list3-box { box-shadow: 0px 3px 13px 0px rgba(0, 0, 0, 0); height: 100%; transform: translate(0, 0); transition: all 0.3s; } .list3 .list3-box .img-box { border-radius: 10px; width: var(--imgw); } .list3 .list3-box .img-box::before { /*padding-top: 70%;*/ } .list3 .list3-box .list3-cont { width: 905px; max-width: calc(120% - var(--imgw) - var(--btnw)); padding-left: 40px; padding-right: 15px; font-size: 16px; line-height: 1.4em; color: #666666; } .list3 .list3-box .list3-cont .list3-time { display: block; color: var(--main-color); } .list3 .list3-box .list3-cont .list3-title { margin-top: 2px; font-size: var(--fs18); line-height: 1.4em; color: #333333; } .list3 .list3-box .list3-cont .list3-des { --lh: 1.75em; margin-top: 14px; line-height: var(--lh); } .list3 .list3-box .more-div { position: static; right: 0; display: flex; gap:10px; } .list3 .list3-box .more-div .more-box { --size: 34%; --fill: #ffffff; border-radius: 50%; background-color: #cccccc; width: var(--btnw); height: var(--btnw); transition: all 0.3s; float: left; } .list3 .list3-box .more-div i { margin-top:10px; float: left; } .list3 .list3-box::before, .list3 .list3-box::after { content: ''; display: block; margin-bottom: calc(var(--fs14)*-1); position: static; left: 0; bottom: 0; width: 0; height: 1px; transition: width 0.3s; } .list3 .list3-box::before { width: 100%; background-color: #e5e5e5; } .list3 .list3-box::after { background-color: var(--main-color); } .list3 .list3-box:hover { transform: translate(0, -5px); } .list3 .list3-box:hover .list3-cont .list3-title { color: var(--main-color); } .list3 .list3-box:hover .more-div .more-box { background-image: linear-gradient(0deg, #0e4290 0%, #0a3472 100%), linear-gradient(#9dc912, #9dc912); background-blend-mode: normal, normal; } .list3 .list3-box:hover::after { width: 100%; } @media (max-width: 1600px) { .list3 { --l3p: 30px; --imgw: 280px; --btnw: 44px; } .list3 .list3-box .list3-cont { padding-left: 30px; } .list3 .list3-box .list3-cont .list3-title { font-size: 18px; } .list3 .list3-box .list3-cont .list3-des { --lh: 1.65em; margin-top: 10px; } } @media (max-width: 1440px) { .list3 .list3-box .list3-cont .list3-title { margin-top: 0; font-size: 17px; } } @media (max-width: 1200px) { .list3 { --l3p: 0.3rem; --imgw: 2.6rem; --btnw: 0px; } .list3 .list3-box .img-box { border-radius: 0.1rem; } .list3 .list3-box .list3-cont { padding-left: 0.25rem; padding-right: 0.1rem; font-size: 0.24rem; width: 80%; } .list3 .list3-box .more-div{ font-size: 12px } .list3 .list3-box .list3-cont .list3-title { margin-top: 0; font-size: 18px; } .list4 .list4-title{ font-size: 18px; } .list3 .list3-box .list3-cont .list3-des { --lh: 1.5em; margin-top: 0.1rem; } .list3 .list3-box .more-div { /*display: none;*/ } .test-con p{ font-size: 12px } } @media (max-width: 992px) { .list3 .list3-box .list3-cont .list3-title { margin-top: 0; font-size: 15px; } .list4 .list4-title{ font-size: 15px; } } .list4 .list4-li { border-top: 1px solid #e6e6e6; padding-top: 20px; font-size: 18px; line-height: 1.55em; color: #333333; transition: all 0.3s; } .list4 .list4-li + .list4-li { margin-top: 20px; } .list4 .list4-box:hover { color: var(--main-color); } .list4 .list4-time { font-size: 14px; line-height: 1.4em; color: rgba(153, 153, 153, 0.8); transition: all 0.3s; } .list4 .list4-title { margin-top: 5px; } @media (max-width: 1600px) { .list4 .list4-li { padding-top: 15px; font-size: 17px; line-height: 1.4em; } .list4 .list4-li + .list4-li { margin-top: 15px; } } @media (max-width: 1200px) { .list4 .list4-li { padding-top: 0.15rem; font-size: 0.26rem; } .list4 .list4-li + .list4-li { margin-top: 0.15rem; } .list4 .list4-time { font-size: 0.24rem; } .list4 .list4-title { margin-top: 0.05rem; } } .list5 { --br: 10px; --pl: 35px; --pr: 50px; } .list5 .list5-li { border-radius: var(--br); background: #ffffff; overflow: hidden; } .list5 .list5-li + .list5-li { margin-top: 18px; } .list5 .list5-li:hover .list5-top, .list5 .list5-li.on .list5-top { background-color: var(--main-color); color: #ffffff; } .list5 .list5-li:hover .list5-top .self-svg, .list5 .list5-li.on .list5-top .self-svg { --fill: #ffffff; } .list5 .list5-li:hover .list5-top .self-svg svg, .list5 .list5-li.on .list5-top .self-svg svg { transform: scaleY(1); } .list5 .list5-li:hover .list5-top .title, .list5 .list5-li.on .list5-top .title { color: #ffffff; } .list5 .list5-top { background: #f7f7f7; padding: 23px var(--pr) 23px var(--pl); cursor: pointer; font-size: 16px; line-height: 1.6em; color: #999999; transition: all 0.3s; } .list5 .list5-top .title { width: 65%; font-size: 20px; color: #333333; } .list5 .list5-top .self-svg { --sw: 1.25em; --fill: rgba(51, 51, 51, 0.6); flex-shrink: 0; } .list5 .list5-top .self-svg svg { width: var(--sw); height: var(--sw); transform: scaleY(-1); transition: transform 0.3s; } .list5 .list5-top .other { margin: 0 15px; } .list5 .list5-top .other .other-item + .other-item { margin-left: 3em; } .list5 .list5-cont { display: none; border-radius: 0 0 var(--br) var(--br); border: solid 1px #e5e5e5; border-top: 0 none; padding: 32px var(--pr) 40px var(--pl); background-color: #ffffff; font-size: 16px; line-height: 1.75em; color: #666666; } .list5 .list5-cont .tips { margin-top: 8px; color: #999999; } .list5 .list5-cont .tips a:hover { color: var(--main-color); } @media (max-width: 1600px) { .list5 { --pl: 30px; --pr: 30px; } .list5 .list5-top { font-size: 15px; } .list5 .list5-top .title { font-size: 1.2em; } .list5 .list5-top .other { margin: 0 10px; } .list5 .list5-top .other .other-item + .other-item { margin-left: 2em; } .list5 .list5-cont { padding: 2em 2.5em; line-height: 1.9em; } } @media (max-width: 1200px) { .list5 { --br: 0.1rem; --pl: 0.3rem; --pr: 0.3rem; } .list5 .list5-li + .list5-li { margin-top: 0.2rem; } .list5 .list5-top { padding: 0.25rem var(--pr) 0.25rem var(--pl); flex-wrap: wrap; font-size: 0.24rem; } .list5 .list5-top .title { width: calc(100% - 2em); font-size: 1.2em; } .list5 .list5-top .other { order: 2; margin: 0.05rem 0 0 0; width: 100%; } .list5 .list5-top .other .other-item + .other-item { margin-left: 1em; } .list5 .list5-cont { padding: 0.2rem var(--pr) 0.2rem var(--pl); line-height: 1.8em; } .list5 .list5-cont .tips { margin-top: 0.04rem; } } .list6 { --lw: 30%; } .list6::after { content: ''; width: var(--lw); } .list6 .list6-li { margin-top: 36px; width: var(--lw); } .list6 .list6-li:nth-child(1), .list6 .list6-li:nth-child(2), .list6 .list6-li:nth-child(3) { margin-top: 0; } .list6 .list6-box { display: block; transform: translate(0, 0); text-align: center; font-size: 18px; line-height: 1.4em; color: #333333; transition: all 0.3s; } .list6 .list6-box:hover { transform: translate(0, -5px); color: var(--main-color); } .list6 .img-box { margin-bottom: 15px; border-radius: 10px; background-image: linear-gradient(180deg, #dcf7cc 0%, #f3faf0 100%); } .list6 .img-box::before { /*padding-top: 75%;*/ } @media (max-width: 1600px) { .list6 { --lw: 31%; } .list6 .list6-li { margin-top: 26px; } } @media (max-width: 1200px) { .list6 { --lw: calc(50% - 0.07rem); } .list6 .list6-li { margin-top: 0.2rem; } .list6 .list6-li:nth-child(3) { margin-top: 0.2rem; } .list6 .list6-li:nth-child(1), .list6 .list6-li:nth-child(2) { margin-top: 0; } .list6 .list6-box { font-size: 0.26rem; } .list6 .img-box { margin-bottom: 0.1rem; border-radius: 0.15rem; } }