.historicalList .col_news_con { display: flex; padding-top: 50px; min-height: 900px; } .historicalList .ml { position: relative; z-index: 100; padding-left: 280px; flex: 1; } .post-41 .active .news_con { max-height: 100em; border: 1px solid #E5E5E5; border-left: 0; border-right: 0; padding: 1em 0; } .post-41 .active .news_title { color: #980337; font-weight: bold; } .historicalList .mr {width: 700px;flex: 1;} .historicalList .modr { position: relative; } .historical .Column_Name{ font-size: 40px; color: #265B4B; font-weight: bold; line-height: 3; } .historicalList .news_imgs:after { content: ""; width: 100%; height: 100%; background-color: #FBC600; position: absolute; left: -20px; top: 22px; z-index: -1; box-shadow: 2px 2px 15px 0px rgba(0,0,0,.5); transition: 0.6s; } .historicalList .modr img { position: relative; z-index: 100; width: 100%; height: 70%; } .historicalList .main_logo { position: absolute; right: 0%; top: 50%; transform: translate(50%, -50%); display: inline-block; width: 184px; height: 184px; background: #ae0c0c; border-radius: 50%; z-index: 1; background: linear-gradient(180deg, #7ca472 0%, #255a4b 100%); box-shadow: 0px 0px 12px 0px rgba(26, 56, 33, 0.39); } .historicalList .main_logo:after { content: ""; position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; display: inline-block; border-radius: 50%; background: url(../images/main4_logo.png) no-repeat center center; background-size: 87%; } .historicalList .main_logo_bg { position: absolute; right: 0%; top: 50%; transform: translate(50%, -50%) rotate(0deg); display: inline-block; width: 400px; height: 400px; border-radius: 50%; border: 6px solid #326357; transition: all 0.3s; } .historicalList .main_logo_bg.n0 { transform: translate(50%, -50%) rotate(-25deg); } .historicalList .main_logo_bg.n1 { transform: translate(50%, -50%) rotate(-10deg); } .historicalList .main_logo_bg.n2 { transform: translate(50%, -50%) rotate(5deg); } .historicalList .main_logo_bg.n3 { transform: translate(50%, -50%) rotate(20deg); } .historicalList .main_logo_bg.n4 { transform: translate(50%, -50%) rotate(35deg); } .historicalList .main_logo_bg.n5 { transform: translate(50%, -50%) rotate(50deg); } .historicalList .main_logo_bg.n6 { transform: translate(50%, -50%) rotate(65deg); } .historicalList .main_logo_bg.n7 { transform: translate(50%, -50%) rotate(80deg); } .historicalList .main_logo_bg.n8 { transform: translate(50%, -50%) rotate(95deg); } .historicalList .main_logo_bg:after { content: ""; position: absolute; left: 46px; top: 46px; right: 46px; bottom: 46px; display: inline-block; border-radius: 50%; border: 2px dashed #2a5c4b80; animation: sopplus 30s linear 0s infinite both; } .historicalList .main_logo .main_logom { display: inline-block; height: 100%; width: 100%; } .historicalList .main_logo .main_logom:before, .historicalList .main_logo .main_logom:after { content: ""; position: absolute; left: -65px; top: -65px; right: -65px; bottom: -65px; z-index: 1; display: inline-block; border-radius: 50%; border: 65px solid transparent; border-right: 46px solid #efc459; transform: rotate(80deg); border-bottom: 46px solid #efc459; } .historicalList .main_logo .main_logom:before { transform: rotate(10deg); } .historicalList .main_logo_bg .logo_t { position: absolute; right: 0; top: 100px; display: inline-block; width: 30px; height: 30px; background: #2d6048; z-index: 100; border-radius: 50%; } .historicalList .main_logo_bg .logo_t:after { content: ""; position: absolute; left: -12px; top: -12px; right: -12px; bottom: -12px; display: inline-block; border-radius: 50%; border: 2px dashed #275c4a; animation: sopplus 8s linear 0s infinite both; } .historicalList .news_imgs { aspect-ratio: 700/470; box-shadow: 2px 2px 10px 0px rgba(0,0,0,.5); position: relative; background-image: url(../images/foot.png); background-size: cover; background-position: center; background-repeat: no-repeat; transition: 0.6s ease-in; } .post-41 .news_title { font-size: 20px; color: #666666; line-height: 2.5; } .post-41 .news_text { font-size: 18px; line-height: 30px; color: #666; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; max-height: 90px; margin: 1em 0; } .post-41 .more { width: 100%; text-align: right; display: block; color: #285D4C; font-size: 16px; background: url(../images/icon_more31.png) no-repeat right center; padding-right: 2em; box-sizing: border-box; transition: 0.2s; background-size: 20px; } .post-41 .news_con { max-height: 0px; transition: max-height 0.6s ease-in; overflow: hidden; } .post-41 .news_ftitle { font-size: 20px; color: #333333; font-weight: bold; } .post-41 .more:hover { color: #980337; } .historicalList .news_imgs:hover:after { background:none; top:0; left:0; box-shadow:2px 2px 20px -20px rgba(0,0,0,.5) } \ @keyframes sopplusRotate { to { transform: translate(50%, -50%) rotate(-312deg); } } @keyframes sopplus { to { transform: rotate(360deg); } } @keyframes sopplusReverse { to { transform: rotate(-360deg); } } @media screen and (max-width:999px){ .historicalList .col_news_con { flex-direction: column; } .historicalList .ml { padding: 50px 0; } .historicalList .mr { width: calc(100% - 230px); padding: 0px 20px; box-sizing: border-box; } } @media screen and (max-width:767px){ .historicalList .main_logo_bg , .historicalList .main_logo {display:none;} .historicalList .mr { width: 100%; } } @media screen and (max-width:480px){ .historical .Column_Name { font-size: 20px; } .post-41 .active .news_title { font-size: 18px; } .post-41 .news_ftitle { font-size: 16px; } .post-41 .news_text { font-size: 14px; } .post-41 .more { font-size: 14px; } .post-41 .news_title { font-size: 18px; } }