@charset "UTF-8";
/******公用头部******/
/* This CSS is generated by My Snazzy Framework version 1.2.3 */
@import url("header.css");
@import url("foot.css");
.flex { display: flex; }

#section02 { padding: 4% 0; }

#section02 .itemBox3 { position: relative; }

#section02 .item01 { max-width: 1400px; margin: 0 auto; }

#section02 .item02 { position: relative; padding-bottom: 4%; margin-top: 45px; }

#section02 .item02 .group_26 { width: 100%; height: 40px; max-width: 1200px; margin-right: auto; margin-left: auto; margin-bottom: 30px; display: flex; justify-content: center; align-items: center; gap: 40px; }

#section02 .item02 .group_26 .buttons { margin-right: 0; margin-left: auto; display: flex; gap: 20px; }

@media screen and (max-width: 1024px) { #section02 .item02 .group_26 { width: 80%; height: 40px; gap: 20px; } }

#section02 .item02 .group_26 .text { font-size: 18px; color: #000; text-align: center; height: 100%; width: 100%; max-width: 160px; background-size: contain; /* vertical-align: middle; */ background-repeat: no-repeat; background-position: center; display: flex; align-items: center; justify-content: center; cursor: pointer; border: 1px solid #ccc; }

#section02 .item02 .group_26 .text.active, #section02 .item02 .group_26 .text:hover { color: #ac0800; border: 1px solid #ac0800; }

@media screen and (max-width: 1024px) { #section02 .item02 .group_26 .text { font-size: 14px; } }

#section02 .item02 .prd_div { display: flex; width: 100%; height: calc(680/ 1600 * 100%); gap: calc(60/ 1600 * 100%); }

#section02 .item02 .prd_div .pDiv_left { width: calc(1185/ 1600 * 100%); }

@media screen and (max-width: 1024px) { #section02 .item02 .prd_div .pDiv_left { width: calc(1600/ 1600 * 100%); } }

#section02 .item02 .prd_div .pDiv_left ul { width: 100%; height: auto; display: flex; flex-wrap: wrap; gap: 30px; }

@media screen and (max-width: 1024px) { #section02 .item02 .prd_div .pDiv_left ul { gap: 10px; } }

#section02 .item02 .prd_div .pDiv_left ul li { width: calc((100% - 132px) / 3); height: auto; padding: 15px 12px; background-color: #ffffff; cursor: pointer; box-shadow: 1px 0px 16px 0px rgba(121, 121, 121, 0.2); text-align: center; }

@media screen and (max-width: 1024px) { #section02 .item02 .prd_div .pDiv_left ul li { width: calc((100% - 58px) / 2); } }

#section02 .item02 .prd_div .pDiv_left ul li#item_prc-4, #section02 .item02 .prd_div .pDiv_left ul li#item_prc-5 { width: calc((100% - 78px) / 2); }

#section02 .item02 .prd_div .pDiv_left ul li#item_prc-4 .prd_img, #section02 .item02 .prd_div .pDiv_left ul li#item_prc-5 .prd_img { max-height: calc(230/ 1920 * 100vw); }

@media screen and (max-width: 1024px) { #section02 .item02 .prd_div .pDiv_left ul li#item_prc-4 .prd_img, #section02 .item02 .prd_div .pDiv_left ul li#item_prc-5 .prd_img { max-height: calc(750/ 1920 * 100vw); } }

@media screen and (max-width: 1024px) { #section02 .item02 .prd_div .pDiv_left ul li#item_prc-22 { width: calc((100% - 24px) / 1); }
  #section02 .item02 .prd_div .pDiv_left ul li#item_prc-22 .prd_img { max-height: calc(1440/ 1920 * 100vw); } }

#section02 .item02 .prd_div .pDiv_left ul li:hover img { transform: scale(1.05); }

#section02 .item02 .prd_div .pDiv_left ul li:hover .prd_p { color: var(--base); }

#section02 .item02 .prd_div .pDiv_left ul li .prd_img { width: 100%; height: 100%; max-height: calc(400/ 1920 * 100vw); overflow: hidden; }

@media screen and (max-width: 1024px) { #section02 .item02 .prd_div .pDiv_left ul li .prd_img { height: calc(750/ 1920 * 100vw); max-height: 100%; } }

#section02 .item02 .prd_div .pDiv_left ul li .prd_img img { vertical-align: middle; width: 100%; height: 100%; object-fit: cover; }

#section02 .item02 .prd_div .pDiv_left ul li .prd_p { width: 100%; height: 45px; margin-top: 10px; background-color: #fafafa; font-size: 16px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; display: flex; justify-content: center; align-items: center; }

#section02 .item02 .prd_div .pDiv_right { width: calc(355/ 1600 * 100%); }

@media screen and (max-width: 1024px) { #section02 .item02 .prd_div .pDiv_right { display: none; } }

#section02 .item02 .prd_div .pDiv_right .project__image { width: 100%; height: auto; }

#section02 .item02 .prd_div .pDiv_right img { width: 100%; height: 100%; object-fit: cover; }

#section03 { padding: 5% 0; width: 100%; }

#section03 .itemBox3 .item02 { width: 100%; height: auto; margin-top: 45px; display: flex; justify-content: space-between; gap: 60px; }

@media screen and (max-width: 1024px) { #section03 .itemBox3 .item02 { flex-wrap: wrap; height: auto; gap: 20px; } }

#section03 .itemBox3 .item02 .c_div01 .c_videoBox { width: 100%; height: auto; position: relative; overflow: hidden; display: flex; justify-content: space-between; align-items: center; align-items: flex-start; gap: 50px; }

@media screen and (max-width: 1024px) { #section03 .itemBox3 .item02 .c_div01 .c_videoBox { gap: 10px; } }

#section03 .itemBox3 .item02 .c_div01 .c_videoBox .c_video { width: auto; height: auto; position: relative; overflow: hidden; }

#section03 .itemBox3 .item02 .c_div01 .c_videoBox .c_video:hover img { transform: scale(1.05); }

#section03 .itemBox3 .item02 .c_div01 .c_videoBox .c_video div { width: 100%; height: 100%; cursor: pointer; position: relative; overflow: hidden; }

#section03 .itemBox3 .item02 .c_div01 .c_videoBox .c_video img { width: 100%; display: block; transition: 0.5s; }

#section03 .itemBox3 .item02 .c_div01 .c_videoBox .c_video .video_btn { width: 71px; height: 71px; position: absolute; top: 50%; left: 50%; margin-top: -35px; margin-left: -35px; opacity: 1; transition: 0.5s; }

#section03 .itemBox3 .item02 .c_div01 .c_videoBox .c_video p { color: #333; font-size: 16px; text-align: center; margin-top: 15px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; }

@media screen and (max-width: 1024px) { #section03 .itemBox3 .item02 .c_div01 .cul_div { width: 100%; height: auto; overflow-x: scroll; padding-bottom: 5px; } }

#section03 .itemBox3 .item02 .c_div01 .cul_div .c_ul { width: 100%; height: auto; margin-top: 25px; display: flex; justify-content: flex-start; align-items: center; gap: 50px; }

@media screen and (max-width: 1024px) { #section03 .itemBox3 .item02 .c_div01 .cul_div .c_ul { gap: 10px; width: 160%; } }

#section03 .itemBox3 .item02 .c_div01 .cul_div .c_ul .c_li { width: 100%; height: auto; position: relative; overflow: hidden; cursor: pointer; }

#section03 .itemBox3 .item02 .c_div01 .cul_div .c_ul .c_li:hover .c_liBtn { border: 1px solid rgba(255, 255, 255, 0.6); }

#section03 .itemBox3 .item02 .c_div01 .cul_div .c_ul .c_li:hover img { transform: scale(1.05); }

#section03 .itemBox3 .item02 .c_div01 .cul_div .c_ul .c_li .c_liBtn { width: 140px; height: 40px; border: 1px solid rgba(255, 255, 255, 0); font-size: 16px; color: #ffffff; position: absolute; top: 50%; left: 50%; margin-top: -20px; margin-left: -70px; text-align: center; transition: 0.5s; line-height: 40px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; }

#section03 .itemBox3 .item02 .c_div02 { width: auto; height: 100%; position: relative; overflow: hidden; }

#section03 .itemBox3 .item02 .c_div02:hover img { transform: scale(1.05); }

#section03 .itemBox3 .item02 .c_div02 .c_more { width: 140px; height: 40px; border: 1px solid rgba(255, 255, 255, 0.6); position: absolute; top: 50%; left: 50%; margin-top: -20px; margin-left: -70px; font-size: 16px; color: #ffffff; display: flex; justify-content: center; align-items: center; /* opacity: 0; */ transition: 0.5s; }

#section03 .itemBox3 .item03 { margin: 30px auto 0; width: 120px; height: 40px; border-color: var(--base); border-width: 1px; border-style: solid; text-align: center; transition: all .3s ease-out 0s; display: flex; justify-content: center; align-items: center; }

@media screen and (max-width: 1024px) { #section03 .itemBox3 .item03 { height: calc( 40px*0.8); width: calc( 120px*0.8); } }

#section03 .itemBox3 .item03 a { font-size: 16px; color: var(--base); }

@media screen and (max-width: 1024px) { #section03 .itemBox3 .item03 a { font-size: 12px; } }

#section03 .itemBox3 .item03:hover { background-color: var(--base); }

#section03 .itemBox3 .item03:hover a { color: #fff; }

#section04 { background: #f6f6f6 url(../img/list/news_bag.jpg) no-repeat center; background-size: cover; padding: 5% 0; }

#section04 .item02 { --n: 1600; display: flex; justify-content: space-between; align-items: unset; height: auto; }

@media screen and (max-width: 1024px) { #section04 .item02 { flex-wrap: wrap; height: auto; } }

#section04 .item02 .item02Box02 { --w: 1600; flex-basis: calc(var(--w) / var(--n) * 100%); overflow: hidden; height: 100%; }

@media screen and (max-width: 1024px) { #section04 .item02 .item02Box02 { --n: var(--w); } }

#section04 .item02 .item02Box02 .section_15 { height: 60px; width: 100%; }

#section04 .item02 .item02Box02 .section_15 .text-wrapper_9 { width: auto; margin: 0 auto; display: flex; align-items: center; justify-content: center; height: 100%; gap: 20px; }

#section04 .item02 .item02Box02 .section_15 .text-wrapper_9 span { width: 212px; overflow-wrap: break-word; font-size: 20px; text-align: center; font-family: MicrosoftYaHeiLight; font-weight: 500; white-space: nowrap; cursor: pointer; }

#section04 .item02 .item02Box02 .section_15 .text-wrapper_9 span.active { color: #fff; background: url("../img/list/new_titleBag.png") no-repeat center right; background-size: contain; }

#section04 .item02 .item02Box02 .section_15 .text-wrapper_9 .text_25 { margin-right: 0; margin-left: auto; color: #333333; font-size: 16px; font-family: MicrosoftYaHeiLight; font-weight: 500; }

#section04 .item02 .item02Box02 .block_5 ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-gap: 24px; grid-template-areas: 'battery1 battery2 ' 'battery1 battery3 ' 'battery1 battery4 '; }

@media screen and (max-width: 1024px) { #section04 .item02 .item02Box02 .block_5 ul { grid-template-areas: 'battery1  ' 'battery2  ' 'battery3  ' 'battery4  '; grid-template-columns: repeat(1, minmax(0, 1fr)); } }

#section04 .item02 .item02Box02 .block_5 ul li { column-gap: 10px; background-color: white; box-shadow: 0px 0px 10px 0px rgba(164, 14, 41, 0.1); /*****forEND****/ }

@media screen and (max-width: 1024px) { #section04 .item02 .item02Box02 .block_5 ul li { flex-direction: column; } }

#section04 .item02 .item02Box02 .block_5 ul li:nth-child(1) { grid-area: design; flex-direction: column; column-gap: 0; }

#section04 .item02 .item02Box02 .block_5 ul li:nth-child(1) .imgs { width: 100%; }

#section04 .item02 .item02Box02 .block_5 ul li:nth-child(1) { grid-area: battery1; }

#section04 .item02 .item02Box02 .block_5 ul li:nth-child(2) { grid-area: battery2; }

#section04 .item02 .item02Box02 .block_5 ul li:nth-child(3) { grid-area: battery3; }

#section04 .item02 .item02Box02 .block_5 ul li:nth-child(4) { grid-area: battery4; }

#section04 .item02 .item02Box02 .block_5 ul li .imgs { width: calc(240 / 1920 * 100vw); overflow: hidden; }

@media screen and (max-width: 1024px) { #section04 .item02 .item02Box02 .block_5 ul li .imgs { width: 100%; } }

#section04 .item02 .item02Box02 .block_5 ul li .imgs img { width: 100%; height: 100%; object-fit: cover; transition: all 0.8s ease; transform: scale(1); }

#section04 .item02 .item02Box02 .block_5 ul li .titel { margin-left: auto; flex: 1; padding: 10px; }

#section04 .item02 .item02Box02 .block_5 ul li .titel .titelPS { display: flex; justify-content: space-between; gap: 20px; margin-bottom: 20px; }

@media screen and (max-width: 1024px) { #section04 .item02 .item02Box02 .block_5 ul li .titel .titelPS { margin-bottom: 5px; } }

#section04 .item02 .item02Box02 .block_5 ul li .titel h5 { color: #333; font-size: 22px; font-weight: 500; text-overflow: ellipsis; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; }

@media screen and (max-width: 1024px) { #section04 .item02 .item02Box02 .block_5 ul li .titel h5 { font-size: 16px; } }

#section04 .item02 .item02Box02 .block_5 ul li .titel span { width: 140px; text-align: right; }

#section04 .item02 .item02Box02 .block_5 ul li .titel span, #section04 .item02 .item02Box02 .block_5 ul li .titel p { font-size: 20px; color: #666; text-overflow: ellipsis; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

@media screen and (max-width: 1024px) { #section04 .item02 .item02Box02 .block_5 ul li .titel span, #section04 .item02 .item02Box02 .block_5 ul li .titel p { font-size: 12px; } }

#section04 .item02 .item02Box02 .block_5 ul li .titel p { font-size: 16px; }

@media screen and (max-width: 1024px) { #section04 .item02 .item02Box02 .block_5 ul li .titel p { font-size: 12px; } }

#section04 .item02 .item02Box02 .block_5 ul li:hover .imgs img { transform: scale(1.08); }

#section04 .item02 .item02Box02 .block_5 ul li:hover .titel h5, #section04 .item02 .item02Box02 .block_5 ul li:hover .titel span, #section04 .item02 .item02Box02 .block_5 ul li:hover .titel p { color: var(--base); }

#section05 { width: 100%; }

#section05 .itemBox5 { padding: 5% 0 1px 0; background: url("../img/list/item5Bag.jpg") center; background-size: cover; }

#section05 .itemBox5 .item01 { width: auto; }

#section05 .itemBox5 .item01 .h1_title span { color: #fff; }

#section05 .itemBox5 .item02 { height: auto; padding: 5% 0; }

#section05 .itemBox5 .item02 .commslist ul { display: flex; justify-content: unset; align-items: unset; gap: 20px; flex-wrap: wrap; }

#section05 .itemBox5 .item02 .commslist ul li { width: calc((100% - 593px) /5);    padding-left: 3%;    padding-right: 3%; }

#section05 .itemBox5 .item02 .commslist ul li .imgs { aspect-ratio: 4/3; width: 100%; overflow: hidden; }

#section05 .itemBox5 .item02 .commslist ul li .imgs img { width: 100%; height: 100%; object-fit: cover; transition: all 1.2s ease; transform: scale(1); }

#section05 .itemBox5 .item02 .commslist ul li .imgs img:hover { transform: scale(1.1); }

#section05 .itemBox5 .item02 .commslist ul li .titel { padding: 15px 5px; width: calc(100% - 10px); margin: 0 auto; display: flex; justify-content: space-around; align-items: center; flex-direction: column; gap: 10px; }

#section05 .itemBox5 .item02 .commslist ul li .titel h5 { font-size: 24px; color: #333; }

#section05 .itemBox5 .item02 .commslist ul li .titel p { color: #666; line-height: 1.5em; -webkit-line-clamp: 2; text-align: center; }

#section05 .itemBox5 .item02 .commslist ul li .titel span { color: #666666; font-size: 20px; }

#section05 .itemBox5 .item02 .commslist ul li .titel .more { width: 100%; text-align: center; color: var(--base); font-size: 14px; }

#section05 .itemBox5 .item02 .commslist ul li .titel:hover h5, #section05 .itemBox5 .item02 .commslist ul li .titel:hover h4, #section05 .itemBox5 .item02 .commslist ul li .titel:hover p, #section05 .itemBox5 .item02 .commslist ul li .titel:hover span { color: var(--base); }

@media screen and (max-width: 1024px) { #section05 .itemBox5 .item02 .commslist ul li { width: 100%; } }

@media screen and (max-width: 1024px) { #section05 .itemBox5 .item02 .commslist ul li { width: 50%;    padding-left: 25%;    padding-right: 0%; } }

#section05 .itemBox5 .item02 .commslist ul li .imgs { width: auto; aspect-ratio: 1; border-radius: 50%; border: 8px solid #a47e62; }

#section05 .itemBox5 .item02 .commslist ul li .titel span, #section05 .itemBox5 .item02 .commslist ul li .titel h5, #section05 .itemBox5 .item02 .commslist ul li .titel p { color: #fff; }

#section05 .itemBox5 .item02 .commslist ul li .titel h5 { font-size: 20px; }

#section05 .itemBox5 .item02 .commslist ul li .titel p { font-size: 16px; }

#section05 .itemBox5 .item02 .commslist ul li .titel i { width: 60px; height: 8px; background-color: var(--base); }

@media screen and (max-width: 1024px) { #section05 .itemBox5 .item02 ul li { width: 47%; } }

#section05 .itemBox5 .item02 ul li .imgs { width: auto; aspect-ratio: 1; border-radius: 50%; border: 8px solid #a47e62; }

#section05 .itemBox5 .item02 ul li .titel span, #section05 .itemBox5 .item02 ul li .titel h5, #section05 .itemBox5 .item02 ul li .titel p { color: #fff; }

#section05 .itemBox5 .item02 ul li .titel h5 { font-size: 20px; }

#section05 .itemBox5 .item02 ul li .titel p { font-size: 16px; }

#section05 .itemBox5 .item02 ul li .titel i { width: 60px; height: 8px; background-color: var(--base); }

#section06 { padding: 4% 0; }

#section06 .itemBox3 { position: relative; }

#section06 .item01 { max-width: 1400px; /* margin-right: 0; */ margin: 0 auto; }

#section06 .item02 { position: relative; padding-bottom: 4%; }

#section06 .item02 .group_26 { width: 100%; height: 62px; margin: 0 auto; display: flex; justify-content: center; align-items: center; gap: 80px; }

#section06 .item02 .group_26 .buttons { margin-right: 0; margin-left: auto; display: flex; gap: 20px; }

@media screen and (max-width: 1024px) { #section06 .item02 .group_26 { width: 80%; height: 45px; gap: 30px; } }

#section06 .item02 .group_26 .text { font-size: 20px; color: #ca8330; height: 100%; width: 100%; max-width: 200px; background-size: contain; background-repeat: no-repeat; background-position: center; display: flex; align-items: center; cursor: pointer; padding-left: 35px; }

#section06 .item02 .group_26 .text.active { color: #fff; background-image: url("../img/list/new_titleBag.png"); }

@media screen and (max-width: 1024px) { #section06 .item02 .group_26 .text { font-size: 14px; } }

#section06 .item02 .group_29 { margin-top: 3%; }

#section06 .item02 .group_29 .group_30 { background-color: rgba(255, 255, 255, 0.8); overflow: hidden; }

#section06 .item02 .group_29 .group_30 .swiper-slide { overflow: hidden; }

#section06 .item02 ul li { width: 400px; height: 400px; background: #fff; box-shadow: 0 5px 30px #ddd; display: flex; align-items: center; position: relative; }

#section06 .item02 ul li a { width: 100%; height: 100%; }

#section06 .item02 ul li::after { content: ''; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 9; background: rgba(0, 0, 0, 0.1); opacity: 0.5; }

#section06 .item02 ul li.swiper-slide-active, #section06 .item02 ul li .swiper-slide-duplicate-active { transform: scale(1); background-color: #0e6eb8; }

#section06 .item02 ul li.swiper-slide-active h2, #section06 .item02 ul li.swiper-slide-active p, #section06 .item02 ul li .swiper-slide-duplicate-active h2, #section06 .item02 ul li .swiper-slide-duplicate-active p { color: #fff !important; }

#section06 .item02 ul li.swiper-slide-active::after, #section06 .item02 ul li .swiper-slide-duplicate-active::after { height: 0; }

#section06 .item02 ul li a .img { width: 100%; height: 100%; overflow: hidden; border-radius: 0%; margin: 0 auto; background-color: #88bce6; }

#section06 .item02 ul li a .img img { width: 100%; height: 100%; object-fit: cover; }

#section06 .item02 ul li a .text { padding: 5%; }

#section06 .item02 ul li a .text h2 { font-size: 28px; color: #0e6eb8; font-weight: 500; margin-bottom: 5%; text-overflow: -o-ellipsis-lastline; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; text-align: center; }

#section06 .item02 ul li a .text p { font-size: 16px; color: #0e6eb8; text-overflow: -o-ellipsis-lastline; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; text-align: center; }

#section07 { margin-bottom: 5%; }

#section07 .itemBox1 ul { display: flex; gap: calc(60 / 1920 * 100vw); }

@media screen and (max-width: 1024px) { #section07 .itemBox1 ul { width: 100%; flex-direction: column; } }

#section07 .itemBox1 ul li { background-position: center; background-position: center; background-size: cover; flex: 1; display: flex; flex-direction: column; gap: 120px; padding: calc(60 / 1920 * 100%); }

#section07 .itemBox1 ul li h5 { font-size: 34px; color: #ffffff; font-weight: 500; }

#section07 .itemBox1 ul li dl { display: flex; gap: 15px; }

#section07 .itemBox1 ul li dl dt { padding: 10px; border-bottom: 2px solid #fff; }

#section07 .itemBox1 ul li dl dt a { font-size: 16px; color: #fff; }

#section07 .itemBox1 ul li dl dt a:hover { color: var(--base); }

.h1_title { display: flex; align-items: center; flex-direction: column; row-gap: 15px; position: relative; }

@media screen and (max-width: 1024px) { .h1_title { row-gap: 5px; } }

.h1_title h1 { width: auto; height: auto; overflow-wrap: break-word; color: #d9d9d9; font-size: 80px; font-family: MicrosoftYaHei-Bold; font-weight: bold; white-space: nowrap; /* line-height: 0px; */ opacity: 0.5; z-index: 1; }

@media screen and (max-width: 1024px) { .h1_title h1 { font-size: 28px; font-weight: 600; } }

.h1_title span { overflow-wrap: break-word; color: #333333; font-size: 40px; font-weight: bold; white-space: nowrap; z-index: 9; position: absolute; /* transform: translateY(-24px); */ bottom: 10%; }

@media screen and (max-width: 1024px) { .h1_title span { font-size: 24px; } }

.h1_title i { background-color: var(--base); width: 80px; height: 10px; margin: 0px auto; position: absolute; bottom: 0; }

@media screen and (max-width: 1024px) { .h1_title i { margin: 0px auto 0; } }

.itemxxx { position: sticky; top: 0; left: 0; background-image: radial-gradient(#08020278 1px, #fff 1px); background-size: 2px 2px; backdrop-filter: saturate(50%) blur(2px); }

/**视频弹出**/
.videos { display: none; position: fixed; width: 100%; height: 100%; z-index: 9999; top: 0; left: 0; background-color: rgba(0, 0, 0, 0.9); }

#video_bg { width: 80%; height: auto; top: 50%; position: absolute; left: 50%; transform: translate(-50%, -50%); }

.vclose { position: absolute; right: 2%; top: 2%; border-radius: 100%; cursor: pointer; }

.button { transition: 0.5s; outline: none; position: absolute; width: auto; z-index: 10; top: 50%; transform: translateY(-50%); cursor: pointer; }

.button { transition: 0.5s; outline: none; position: absolute; width: auto; z-index: 10; top: 50%; transform: translateY(-50%); cursor: pointer; }

.button .iconfont { color: var(--base); font-size: 60px; font-weight: bold; }

@media screen and (max-width: 1024px) { .button .iconfont { font-size: 24px; } }