/*header*/ #header { position: fixed; top: 0; width: 100%; z-index: 8; padding: 0.17rem 0; } #header .inner { position: relative; display: flex; align-items: center; justify-content: space-between; } #header:not(.fixed)#header:not(.white) { position: relative; background-color: #fff; } @media only screen and (max-width: 1024px) { #header.fixed { position: absolute; } } /*logo*/ #logo { width: 2.45rem; position: relative; z-index: 10; } #logo a { display: block; overflow: hidden; padding-bottom: 26.93877551%; position: relative; } #logo img { display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: contain; z-index: 5; } #logo img:nth-child(2) { opacity: 0; } #logo i { position: absolute; width: 100%; height: 100%; text-indent: -99999em; display: block; overflow: hidden; } .fp-viewing-0 #logo img:nth-child(1) { opacity: 0; } .fp-viewing-0 #logo img:nth-child(2) { opacity: 1; } .fp-viewing-0 #fp-nav { filter: invert(1) brightness(100); } @media only screen and (max-width: 1024px) { #logo { width: 2rem; } } /*button*/ #button { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; align-items: center; gap: 0.3rem; font-size: 0.16rem; } @media only screen and (max-width: 640px) { #button { font-size: 0.13rem; gap: 0.1rem; } } /*entrance*/ #entrance { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; gap: 0.3rem; } #entrance a { background-color: #243d97; display: flex; align-items: center; justify-content: center; color: #fff; border-radius: 0.25em; height: 2.5em; width: 7.5em; text-align: center; } @media only screen and (max-width: 640px) { #entrance { gap: 0.1rem; } #entrance a { width: 7em; } } /*navbtn*/ #navbtn { display: none; } @media only screen and (max-width: 1024px) { /*1024*/ #navbtn { position: relative; cursor: pointer; width: 2.5em; height: 2.5em; display: block; background-color: #243d97; border-radius: 0.04rem; z-index: 10; overflow: hidden; } #navbtn:before, #navbtn:after, #navbtn i { width: 60%; height: 0.02rem; background-color: #fff; display: block; position: absolute; left: 20%; transition: all 0.3s; content: ''; border-radius: 0.01rem; } #navbtn:before { top: 27%; } #navbtn:after { bottom: 27%; } #navbtn i { top: 50%; transform: translatey(-50%); } #navbtn.active:before { transform: rotate(45deg); top: 50%; } #navbtn.active:after { transform: rotate(-45deg); bottom: auto; top: 50%; } #navbtn.active i { opacity: 0; } } /*navi*/ #navi { width: calc(100% - 5.15rem); font-size: 0.18rem; line-height: 2.22222222em; padding: 0 2.60416667vw; } #navi a { display: block; position: relative; } #navi .parent { padding: 0.13rem 1vw; position: relative; } #navi .drop { font-size: 0.88888889em; line-height: 2em; display: none; } #navi .drop a { padding: 0.5em 0; } @media only screen and (min-width: 1025px) { #navi .menu { display: flex; justify-content: flex-end; } #navi .parent > a:after { content: ''; display: block; position: absolute; left: 0; bottom: -0.3rem; width: 100%; background-color: #243d97; height: 0.03rem; opacity: 0; } #navi #navi0 > a:after { display: none; } #navi .on > a:after, #navi .cur > a:after { opacity: 1; } #navi .drop { position: absolute; top: 100%; left: 50%; min-width: 120%; transform: translatex(-50%); z-index: 5; padding-top: 0.17rem; } #navi .drop ul { background-color: #fff; box-shadow: 0 0.05rem 0.15rem rgba(0, 0, 0, 0.1); text-align: center; padding: 0.5em 1em; } #navi .drop li { border-bottom: 1px solid rgba(0, 0, 0, 0.1); } #navi .drop li:last-child { border-bottom: none; } #navi .drop a { white-space: nowrap; } .fp-viewing-0 #navi .parent > a { filter: brightness(100); } } @media only screen and (max-width: 1024px) { /*1024px*/ #navi { position: fixed; width: 100%; max-width: 30em; height: calc(100% - 0.85333rem); transform: translate(100%); background-color: #fff; z-index: 9; right: 0; top: 0.85333rem; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 0.5rem 0; opacity: 0; transition: all 0.3s; } #navi.active { transform: translate(0); opacity: 1; } #navi .menu { display: block; } #navi a { color: #333; } #navi .parent { padding: 0 0.5rem; line-height: 2em; margin: 0; position: relative; } #navi .parent > a { padding: 1.5em 0; border-bottom: 1px solid #e4e4e4; } #navi em { display: block; position: absolute; right: 0.3rem; width: 3.61111111em; height: 5.05555556em; z-index: 2; top: 0; cursor: pointer; } #navi em:after { width: 0.66666667em; height: 0.66666667em; border-right: 0.05555556em solid #333; border-bottom: 0.05555556em solid #333; content: ''; display: block; position: absolute; top: 50%; left: 50%; transform: rotate(-45deg); background-color: transparent; margin: -0.38888889em 0 0 -0.38888889em; transition: inherit; } #navi .on { background-color: #f9f9f9; } #navi .on > em:after { transform: rotate(45deg); } #navi .drop { position: static; background-color: transparent; box-shadow: none; padding: 1em 0 0 2em; display: none; } #navi .drop a { padding: 0.5em 0; } #navi dt { display: none; } #navi dl { width: 100%; display: block; } #header:not(.fixed)#header:not(.white) #navi .ness { filter: none; } } @media only screen and (max-width: 750px) { #navi { padding: 0; } #navi .parent { padding: 0 3.125%; } #navi em { right: 0; } } /*copyright*/ #copyright { padding: 1.5625em 0; background-color: #243d97; color: #fff; font-size: 0.16rem; line-height: 1.875em; } #copyright .inner { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; flex-direction: row-reverse; text-align: center; gap: 0.1rem; } #copyright a { color: #fff; display: inline-block; } #copyright span { display: inline-block; } #copyright .page { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; flex-wrap: wrap; gap: 1.5em; align-items: center; } #copyright .page a { display: block; } #copyright .page i { display: block; width: 0.01rem; height: 0.875em; background-color: #fff; opacity: 0.2; } #copyright .page i:last-child { display: none; } @media only screen and (max-width: 1024px) { #copyright .inner { flex-direction: column; align-items: center; justify-content: center; } } /*bottom*/ #bottom { background-image: linear-gradient(0deg, #f5f6fa 0%, #fafbfc 100%); padding: 0.7rem 0 0.6rem; } #bottom .inner { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; flex-wrap: wrap; justify-content: space-between; } @media only screen and (max-width: 640px) { #bottom { padding: 0.5rem 0; } } /*links*/ #links { font-size: 0.16rem; width: 100%; } #links h3 { font-size: 1em; color: #333; line-height: 2em; font-weight: normal; } #links ul { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; flex-wrap: wrap; } #links li { line-height: 2em; position: relative; color: #666666; } #links li:not(:last-child) { padding-right: 0.75em; margin-right: 0.75em; } #links li:not(:last-child):after { content: ''; display: block; position: absolute; top: 50%; transform: translatey(-50%); right: 0; background-color: #000000; opacity: 0.15; width: 0.01rem; height: 0.875em; } @media only screen and (max-width: 640px) { #links li:not(:last-child) { padding-right: 0.5em; margin-right: 0.5em; } } /*infor*/ #infor { width: 3.3rem; color: #333; margin-bottom: 0.05rem; } #infor .logo { width: 2.45rem; max-width: 100%; margin-bottom: 0.36rem; } #infor .logo img { display: block; width: 100%; height: auto; } #infor .meta { font-size: 0.16rem; line-height: 1.875em; } #infor .meta li { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; } #infor .meta span { display: block; width: 5em; } #infor .meta span:nth-child(2) { width: calc(100% - 5em); } @media only screen and (max-width: 1024px) { #infor { width: 100%; } #infor .meta span { width: 6em; } #infor .meta span:nth-child(2) { width: calc(100% - 6em); } } @media only screen and (max-width: 640px) { #infor .logo { margin-bottom: 0.2rem; } } /*menu*/ #menu { width: calc(100% - 4.05rem); display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; justify-content: space-between; flex-wrap: wrap; margin-bottom: 0.05rem; } #menu dt { font-size: 0.18rem; line-height: 1.66666667em; margin-bottom: 0.25rem; } #menu dd { font-size: 0.16rem; line-height: 1.875em; } @media only screen and (max-width: 1024px) { #menu { display: none; } } /*slides*/ #slides .img { display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; object-fit: cover; } #slides .figure { padding-bottom: 100vh; position: relative; } #slides .info { position: absolute; top: 50%; transform: translatey(-75%); left: 0; width: 100%; } #slides .textimg { padding-bottom: 13.88888889%; } #slides .textimg img { object-fit: contain; } #slides .swiper-pagination { bottom: 5.20833333%; left: 50%; transform: translatex(-50%); display: flex; justify-content: center; gap: 0.2rem; } #slides .swiper-pagination-bullet { background-color: #fff; opacity: 0.4; width: 0.12rem; height: 0.12rem; display: block; } #slides .swiper-pagination-bullet-active { opacity: 1; } @media only screen and (max-width: 1024px) { #slides .figure { padding-bottom: 75%; } } /*fullpage*/ #fullpage {opacity:0;} #fullpage.fullpage-wrapper {opacity:1;} .section { background: no-repeat center center; background-size: cover; } @media only screen and (max-width: 1024px) { .haspd { padding: 0.6rem 0; } #fullpage .fp-section, #fullpage .fp-tablecell { height: auto!important; } } /*search*/ #search { width: 28.88888889em; max-width: 90%; position: absolute; left: 50%; transform: translatex(-50%); bottom: 22.91666667%; z-index: 5; border: 1px solid #fff; border-radius: 0.04rem; overflow: hidden; font-size: 0.18rem; } #search .input { position: relative; padding-right: 6.66666667em; background-color: rgba(255, 255, 255, 0.75); backdrop-filter: blur(10px); } #search .text { display: block; width: 100%; font-size: 1em; height: 3.22222222em; line-height: 1.55555556em; padding: 0.83333333em 1.25em; border: none; background-color: transparent; } #search input::-moz-placeholder { opacity: 1; color: #333; } #search input:-moz-placeholder { opacity: 1; color: #333; } #search input::-webkit-input-placeholder { opacity: 1; color: #333; } #search input:-ms-input-placeholder { opacity: 1; color: #333; } #search textarea::-moz-placeholder { opacity: 1; color: #333; } #search textarea:-moz-placeholder { opacity: 1; color: #333; } #search textarea::-webkit-input-placeholder { opacity: 1; color: #333; } #search textarea:-ms-input-placeholder { opacity: 1; color: #333; } #search .submit { display: flex; align-items: center; justify-content: center; position: absolute; right: 0; top: 0; height: 100%; border: none; width: 6.66666667em; cursor: pointer; background-color: #243d97; border-radius: 0.04rem; color: #fff; font-size: 1em; gap: calc(8em/18); } #search .submit:before { display: block; content: ''; width: 0.88888889em; height: 0.88888889em; background: url(/uploads/image/crimages/search_01.svg) no-repeat center center; background-size: contain; } @media only screen and (max-width: 1024px) { #search { font-size: 0.16rem; } } @media only screen and (max-width: 750px) { #search { font-size: 0.14rem; } } .section-bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.75rem; } .section-name { margin: 0; font-size: 0.4rem; line-height: 1.25em; font-weight: 500; color: #333; } .section-more a { font-size: 0.18rem; line-height: 1.66666667em; color: #243d97; background: url(/uploads/image/crimages/more_arrow_01.svg) no-repeat right center; background-size: 1em auto; padding-right: 1.88888889em; display: block; } @media only screen and (max-width: 640px) { .section-bar { margin-bottom: 0.45rem; } .section-name { font-size: 0.32rem; } .section-more a { font-size: 0.16rem; } } /*party-news*/ #party-news { background-image: url(/uploads/image/crimages/bg_party_news.jpg); } #party-news .content { display: flex; justify-content: space-between; flex-wrap: wrap; } #party-news .istop { width: 50%; } #party-news .istop .figure { padding-bottom: 71.42857143%; position: relative; border-radius: 0.04rem; overflow: hidden; } #party-news .istop img { display: block; width: 100%; height: 100%; object-fit: cover; position: absolute; left: 0; top: 0; transition: all 0.3s; } #party-news .istop .text { position: absolute; left: 0; bottom: 0; width: 100%; z-index: 5; padding: 0.35rem 1rem 0.35rem 0.4rem; } #party-news .istop .date { font-size: 0.16rem; line-height: 2.25em; margin-bottom: 0.1rem; } #party-news .istop .title { font-size: 0.24rem; line-height: 1.33333333em; font-weight: 500; max-height: 2.66666667em; margin: 0; } #party-news .istop a { display: block; overflow: hidden; position: relative; color: #fff; } #party-news .istop a:after { content: ''; display: block; position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), transparent); } #party-news .istop a:hover img { transform: scale(1.1); } #party-news .list { width: 47.91666667%; font-size: 0.16rem; } #party-news .list .date { width: 1.05rem; text-align: center; color: #243d97; line-height: 2.25em; } #party-news .list .date i { font-style: normal; display: block; font-weight: bold; font-size: 0.42rem; line-height: 1em; } #party-news .list .text { width: calc(100% - 1.35rem); } #party-news .list .title { font-size: 1.125em; line-height: 2em; font-weight: 500; margin: 0 0 0.05rem; } #party-news .list .intro { line-height: 1.625em; color: #666; } #party-news .list a { display: flex; align-items: center; justify-content: space-between; padding: 0.39rem 1.1rem 0.39rem 0; position: relative; transition: all 0.3s; } #party-news .list a:after { width: 1.5em; height: 1.5em; background: url(/uploads/image/crimages/readmore_01.svg) no-repeat center center; background-size: contain; content: ''; display: block; position: absolute; right: 0.25rem; top: 50%; transform: translatey(-50%); filter: invert(1) brightness(0); opacity: 0.3; } #party-news .list a:hover { background-color: #ffffff; box-shadow: 0px 0.2rem 0.24rem 0px rgba(0, 0, 0, 0.05); } #party-news .list a:hover:after { filter: none; opacity: 1; } @media only screen and (max-width: 1024px) { #party-news .istop { width: 100%; margin-bottom: 0.3rem; } #party-news .list { width: 100%; } #party-news .list a { padding-top: 0.25rem; padding-bottom: 0.25rem; } } @media only screen and (max-width: 640px) { #party-news .istop .text { padding: 0.25rem 0.3rem; } #party-news .istop .title { font-size: 0.2rem; } #party-news .list .date { width: auto; } #party-news .list .text { width: calc(100% - 0.9rem); } #party-news .list a { padding: 0.2rem 0.6rem 0.2rem 0.2rem; } } /*association-news*/ #association-news { background-image: url(/uploads/image/crimages/bg_association_news.jpg); } #association-news .tab { display: flex; align-items: center; gap: 0.75em; } #association-news .tab .section-name { color: #666; cursor: pointer; } #association-news .tab .current { color: #333; font-weight: 500; } #association-news .box { display: none; } #association-news .box:first-child { display: block; } #association-news .content { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 2.08333333%; } #association-news .item { width: 31.94444444%; } #association-news .date { color: #243d97; font-size: 0.16rem; line-height: 2.25em; } #association-news .istop .figure { padding-bottom: 66.30434783%; position: relative; overflow: hidden; } #association-news .istop .figure img { display: block; width: 100%; height: 100%; object-fit: cover; position: absolute; left: 0; top: 0; transition: all 0.3s; } #association-news .istop .text { padding: 0.3rem 0.35rem; } #association-news .istop .title { font-size: 0.18rem; line-height: 1.77777778em; margin: 0 0 0.1rem; font-weight: 500; } #association-news .istop .intro { font-size: 0.16rem; line-height: 1.625em; color: #666; height: 3.25em; margin-bottom: 0.26rem; } #association-news .istop a { display: block; overflow: hidden; background-color: #fff; border-radius: 0.04rem; height: 100%; transition: all 0.3s; } #association-news .istop a:hover { box-shadow: 0px 0.2rem 0.24rem 0px rgba(0, 0, 0, 0.05); } #association-news .istop a:hover img { transform: scale(1.1); } #association-news .list { background-color: #fff; border-radius: 0.04rem; overflow: hidden; padding: 0 0.3rem; } #association-news .list li { border-bottom: 0.01rem solid #e6e6e6; } #association-news .list li:last-child { border-bottom: none; } #association-news .list .title { font-size: 0.18rem; line-height: 1.55555556em; height: 3.11111111em; font-weight: 500; margin: 0 0 0.02rem; } #association-news .list a { display: block; overflow: hidden; padding: 0.2rem 0 0.16rem; } @media only screen and (max-width: 1024px) { #association-news .content { gap: 2%; } #association-news .istop { width: 49%; margin-bottom: 2%; } #association-news .list { width: 100%; } } @media only screen and (max-width: 640px) { #association-news .istop .text { padding: 0.2rem; } #association-news .istop .intro { margin-bottom: 0.1rem; } } /*recently*/ #recently { background-image: url(/uploads/image/crimages/bg_recently.jpg); } #recently .inner { display: flex; justify-content: space-between; flex-wrap: wrap; } #recently .section-bar { margin-bottom: 0.4rem; } #recently li { border-bottom: 1px solid #e6e6e6; font-size: 0.18rem; line-height: 2em; padding: 0.2rem 0; } @media only screen and (max-width: 640px) { #recently .recently-notice .section-bar { margin-bottom: 0.2rem; } #recently li { line-height: 1.875em; } } /*recently-notice*/ .recently-notice { width: 62.5%; } .recently-notice li .td { display: table-cell; } .recently-notice li .tag span { display: block; color: #243d97; font-size: 0.77777778em; height: 1.57142857em; line-height: 1.57142857em; white-space: nowrap; background-color: rgba(1, 65, 155, 0.1); border-radius: 0.78571429em; text-align: center; padding: 0 0.5em; } .recently-notice li .title { padding: 0 0.55555556em; width:100%; } .recently-notice li .title span { display: block; max-width: 40em; } .recently-notice li .date { font-size: 0.88888889em; color: #999; width: 5.125em; text-align: right; } .recently-notice li a { display: table; width: 100%; } .recently-notice li a:hover .date { color: #243d97; } @media only screen and (max-width: 1024px) { .recently-notice { width: 100%; margin-bottom: 0.5rem; } .recently-notice li .title span { max-width: 28em; } } @media only screen and (max-width: 640px) { .recently-notice li .title span { max-width: 16em; } } /*recently-recruit*/ .recently-recruit { width: 31.94444444%; } .recently-recruit .cover { padding-bottom: 32.60869565%; position: relative; overflow: hidden; border-radius: 0.04rem; margin-bottom: 0.04rem; } .recently-recruit .cover img { display: block; width: 100%; height: 100%; object-fit: cover; position: absolute; left: 0; top: 0; } .recently-recruit li time { color: #243d97; position: absolute; right: 0; top: 0; font-size: 0.88888889em; } .recently-recruit li a { display: block; overflow: hidden; position: relative; padding-right: 5.55555556em; } @media only screen and (max-width: 1024px) { .recently-recruit { width: 100%; } } /*quick-access*/ #quick-access .list { width: 102.08333333%; overflow: hidden; } #quick-access .item { float: left; width: 50%; padding: 1.02040816% 2.04081633% 1.02040816% 0; } #quick-access .bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; } #quick-access .info { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; padding: 0.5rem 0.4rem 0.45rem; } #quick-access .icon { display: block; object-fit: contain; width: auto; height: 0.54rem; } #quick-access .name { font-size: 0.24rem; line-height: 1.25em; font-weight: 500; position: relative; width: 100%; } #quick-access .name:after { width: 1em; height: 1em; content: ''; display: block; position: absolute; right: 0; top: 50%; transform: translatey(-50%); background: url(/uploads/image/crimages/more_arrow_01.svg) no-repeat center center; background-size: contain; opacity: 0; transition: opacity 0.2s; } #quick-access .box { display: block; overflow: hidden; position: relative; padding-bottom: 30.73913043%; background-color: rgba(255, 255, 255, 0.8); border-radius: 0.04rem; backdrop-filter: blur(0.1rem); } #quick-access .box:hover .name:after { opacity: 1; } @media only screen and (max-width: 1024px) { #quick-access .item { width: 50%; } #quick-access .info { padding: 0.35rem 0.3rem 0.3rem; } #quick-access .icon { height: 0.45rem; } #quick-access .box { padding-bottom: 47.8%; } } @media only screen and (max-width: 640px) { #quick-access .item:nth-child(n 1) { float: none; width: 100%; } } /*button-more*/ .button-more { display: flex; } .button-more .go { display: flex; align-items: center; justify-content: center; color: #243d97; font-size: 0.18rem; border: solid 1px #01419b; height: 2.77777778em; border-radius: 0.22222222em; width: 8.88888889em; gap: 0.88888889em; transition: all 0.2s; } .button-more .go:after { width: 1em; height: 1em; background: url(/uploads/image/crimages/more_arrow_01.svg) no-repeat center center; background-size: contain; display: block; content: ''; } .button-more .go:hover { background-color: #243d97; color: #fff; border-color: transparent; } .button-more .go:hover:after { filter: invert(1) brightness(100); } /*profile*/ #profile .inner { display: flex; justify-content: space-between; flex-wrap: wrap; height: inherit; } #profile .data { height: inherit; position: relative; width: 7rem; font-size: 0.18rem; padding: 20.83333333vh 1rem; line-height: 1.66666667em; } #profile .data .bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; display: block; } #profile .data ul { position: relative; z-index: 2; display: flex; flex-wrap: wrap; } #profile .data li { width: 50%; margin-bottom: 0.48rem; } #profile .data .num { color: #243d97; margin-bottom: 0.05rem; } #profile .data span { font-size: 2.33333333em; line-height: 1em; font-weight: bold; margin-right: 0.23809524em; } #profile .text { background: url(/uploads/image/crimages/bg_profile.png) no-repeat left center; background-size: cover; width: calc(100% - 7rem); padding: 20.83333333vh 10.41666667% 0 3.125%; display: flex; justify-content: flex-end; } #profile .box { width: 7.8rem; max-width: 100%; } #profile .section-name { margin-bottom: 0.83333333em; } #profile .section-name:after { width: 0.95238095em; height: 0.07142857em; display: block; content: ''; background-color: #243d97; margin-top: 0.47619048em; } #profile .intro { font-size: 0.18rem; line-height: 1.66666667em; margin-bottom: 0.45rem; } #profile .intro p { margin: 0; } #profile .quick { margin-top: 0.65rem; } #profile .quick ul { display: flex; flex-wrap: wrap; width: 101.92307692%; } #profile .quick li { width: 33.333%; padding: 1.88679245% 1.88679245% 0 0; font-size: 0.2rem; line-height: 1.5em; } #profile .quick .icon { width: 3em; height: 3em; border-radius: 50%; background-color: rgba(36, 61, 151, 0.1); display: flex; align-items: center; justify-content: center; transition: all 0.2s; } #profile .quick .icon img { display: block; width: 43.33333333%; height: 43.33333333%; object-fit: contain; } #profile .quick .name { width: calc(100% - 4em); font-weight: 500; } #profile .quick a { display: flex; background-color: #fff; border-radius: 0.04rem; padding: 0.4rem 0.25rem; align-items: center; justify-content: space-between; transition: all 0.2s; } #profile .quick a:hover { box-shadow: 0px 0.2rem 0.24rem 0px rgba(0, 0, 0, 0.05); } #profile .quick a:hover .icon { background-color: #243d97; } #profile .quick a:hover .icon img { filter: invert(1) brightness(100); } #profile .quick a:hover .name { color: #243d97; } @media only screen and (max-width: 1024px) { #profile .data { width: 100%; height: auto; padding: 0.5rem 3.125% 3rem; text-align: center; } #profile .data .box { width: 100%; } #profile .text { width: 100%; padding: 0.5rem 3.125% 0.6rem; background-size: cover; } #profile .quick { margin-top: 0.2rem; } } @media only screen and (max-width: 640px) { #profile .quick .name { width: 100%; text-align: center; } #profile .quick a { flex-direction: column; padding: 0.2rem; gap: 0.1rem; } } /*widget*/ #widget { position: fixed; right: 2.34375%; bottom: 6.25%; z-index: 9; font-size: 0.16rem; display:none; } #widget .icon { display: block; width: 40.74074074%; height: 40.74074074%; object-fit: contain; } #widget a { display: flex; width: 3.375em; height: 3.375em; border-radius: 50%; align-items: center; justify-content: center; background-color: #243d97; transition: all 0.3s; } #widget a:hover { box-shadow: 0 0 2em rgba(1, 65, 155, 0.5); } /*follow*/ #follow { position: fixed; right:0.6%; top: 50%; transform: translatey(-50%); z-index: 9; font-size: 0.16rem; line-height: 1.25em; width: 6.875em; border-radius: 0.04rem; text-align: center; } #follow li { padding: 0.625em; } #follow li:not(:last-child) { border-bottom: 1px solid #e6e6e6; } #follow p { margin: 0.57142857em 0 0; font-size: 0.875em; white-space: nowrap; }