.newsBox { max-width: 950px; float: left; box-shadow: 0 2px 17px 1px rgba(223, 223, 223, 0.3); padding: 20px; border: 1px solid #efefef; border-radius: 10px; } .container { background-color: #fff; margin-top: 120px; } .news { width: 1200px; margin: 0 auto 50px; overflow: hidden; } .news_title { font-size: 24px; text-align: center; color: #111; margin-top: 50px; border: none; } .news_date { color: #777; text-align: center; margin: 20px 0 40px; } .media_details { width: 100%; /* margin: 20px auto; */ line-height: 30px; font-family: Microsoft YaHei !important; padding-left: 30px; padding-right: 30px; padding-top: 30px; box-sizing: border-box; border-top: 1px solid #efefef; } .media_details .xz_text { display: flex; justify-content: center; align-items: center; } .media_details .xz_text .xz-desc { font-size: 14px; } .media_details img { margin: 20px auto; } .media_details p, .media_details span { font-size: 16px; line-height: 2; white-space: normal; } .tag-list a { font-size: 14px; color: #333; } .tag-list a:hover { color: #007aff; } .media_page { width: 100%; margin: 50px auto 0px auto; /* line-height: 40px; */ border-top: 1px solid #e3e3e5; padding-top: 15px; } .page_next { /* font-size: 16px; color: #333; cursor: pointer; */ } .page_next a { font-size: 14px; color: #333; /* cursor: pointer; */ } .page_next a:hover { color: #007aff; } .container .container-aside { width: 230px; float: right; } .container .container-aside .card-box { /* margin-top: 20px; */ padding: 10px 20px; margin-bottom: 30px; border: 1px solid #efefef; } .common-shadow-box { box-shadow: 0 1px 17px 1px rgba(223, 223, 223, 0.3); border-radius: 10px; } .container .container-aside .card-box .card-header { border-bottom: 1px solid #F0F0F0; padding: 5px 0; } .container .container-aside .card-box .card-header .card-header__title { position: relative; font-weight: bold; font-size: 16px; padding-left: 10px; float: left; } .container .container-aside .card-box .card-header .card-header__title:before { position: absolute; top: 0; left: 0; content: ''; width: 2px; height: 20px; background-color: #DD1313; display: block; } .container .container-aside .card-box .card-body { /* display: flex; */ flex-direction: column; justify-content: flex-start; align-items: flex-start; padding-top: 1px; } .container .container-aside .card-box .card-body .recent-news { display: flex; justify-content: flex-start; align-items: center; position: relative; margin: 5px 0; } .container .container-aside .card-box .card-body .recent-news .icon { width: 8px; height: 8px; border-radius: 50%; border: 2px solid #DD1313; margin-right: 5px; } .container .container-aside .card-box .card-body .recent-news .text { width: 250px; height: 28px; line-height: 28px; } .container .container-aside .card-box .card-body .dot-txt { color: #333; font-size: 15px; } .text-one-line { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .container .container-aside .card-box .card-body.tag-content { display: table; } .container .container-aside .card-box .card-body .hot-tag:nth-child(2n+1) { margin-right: 6%; } .container .container-aside .card-box .card-body .hot-tag { width: 47%; text-align: center; background-color: #F5F5F5; padding: 5px; margin-top: 10px; display: inline-block; cursor: pointer; color: #666; font-size: 16px; } .clearfix:before, .clearfix:after { width: 0; height: 0; content: ''; clear: both; visibility: hidden; display: block; } .xz_text { text-align: center; } .xz_btn { vertical-align: bottom; width: 200px; height: 60px; margin-left: 50px; border-radius: 10px; background: #007aff; color: #fff; font-size: 15px; font-weight: bold; padding: 10px; display: flex; justify-content: center; align-items: center; } @media (max-width:768px) { .news { width: 100%; } .news_title { margin-top: 20px; } .news_date { margin: 20px 0 20px; } .container-aside { display: none; } .media_details { padding: 20px; } /*.media_details img{width: 100% !important; height: auto !important;}*/ .container { margin-top: 50px; } .newsBox { border: none; } .xz_btn { display: block; margin: 0 auto; } .media_details .xz_text { flex-direction: column; } } .newsBox img { height: auto; } button, input { outline: none; } button, .login { width: 120px; height: 42px; background: #f40; color: #fff; border: none; border-radius: 6px; display: block; margin: 20px auto; cursor: pointer; } .popOutBg { width: 100%; height: 100%; position: fixed; left: 0; top: 0; background: rgba(0, 0, 0, .6); display: none; z-index: 99999999999999999999999999999999; } .popOut { position: fixed; width: 600px; height: 420px; top: 50%; left: 50%; margin-top: -150px; margin-left: -300px; background: #fff; border-radius: 8px; overflow: hidden; display: none; z-index: 99999999999999999999999999999999999; text-align: center; } .popOut>span { position: absolute; right: 10px; top: 0; height: 42px; line-height: 42px; color: #000; font-size: 30px; cursor: pointer; } .popOut table { display: block; margin: 42px auto 0; width: 520px; } .popOut caption { width: 520px; text-align: center; color: #f40; font-size: 14px; line-height: 42px; } .popOut table tr td { color: #666; padding: 6px; font-size: 14px; } .popOut table tr td:first-child { text-align: right; } .inp { width: 280px; height: 30px; line-height: 30px; border: 1px solid #999; padding: 5px 10px; color: #000; font-size: 14px; border-radius: 6px; } .inp:focus { border-color: #f40; } .form-group { border: #ddd 1px solid; width: 80%; margin: 10px auto; padding: 6px 2px; } .form-group>input { border: none; width: 100%; } .form-group .yzm .yzm_img, .form-group .yzm input { width: 49%; display: inline-block; border: none; } .sjyzm input { display: inline-block; } .sjyzm input:nth-child(1) { width: 79%; } .sjyzm input:nth-child(2) { width: 20%; } .m-b-0 button:nth-child(2) { display: none; } .m-b-0 button:nth-child(1) { margin: 0 auto; } @keyframes ani { from { transform: translateX(-100%) rotate(-60deg) scale(.5); } 50% { transform: translateX(0) rotate(0) scale(1); } 90% { transform: translateX(20px) rotate(0) scale(.8); } to { transform: translateX(0) rotate(0) scale(1); } } .ani { animation: ani .5s ease-in-out; }