.main { width: 1400px; margin: 20px auto; display: flex; justify-content: space-between; } .main .left { width: 940px; position: relative; } .main .left .title { text-align: center; color: #1A1A1A; font-size: 20px; font-weight: bold; } .main .left .info1 { color: #1A1A1A; font-size: 14px; text-align: center; margin: 20px 0 5px; } .main .left .info2 { color: #999999; font-size: 14px; text-align: center; padding-bottom: 20px; margin-bottom: 20px; margin-top: 10px; border-bottom: 1px solid #DBDBDB; } .main .left .content { font-size: 16px; margin-bottom: 100px; } .main .left .content img { max-width: 100%; } .main .right { width: 360px; margin-left: 40px; max-height: 760px; } .main .right .title { height: 58px; line-height: 58px; color: #1A1A1A; font-size: 20px; letter-spacing: 5px; border-bottom: 1px solid #0276DD; } .main .right .title img { margin: 0 10px -5px 4px; } .main .right .item { height: 75px; padding: 20px 20px 0; border-bottom: 1px dashed #DBDBDB; cursor: pointer; font-size: 15px; } .main .right .item p a { color: #1A1A1A; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; /* 璁剧疆鏈€澶ф樉绀鸿鏁 */ -webkit-box-orient: vertical; text-overflow: ellipsis; } .main .right .item p a:hover { color: #0276DD; } .main .right .item p:first-child { margin-bottom: 6px; } .main .right .item p:last-child { text-align: right; } .footer { margin-top: 180px; } .main .left .tabNews a { display: block; font-size: 14px; margin-top: 8px; color: #1A1A1A; } .main .left .tabNews a span { margin-left: 10px; } .main .left .tabNews a:hover { color: #0276DD; } .main .right .item p:last-child { text-align: right; } @media only screen and (max-width: 1550px) { .main { width: 1200px; } .main .left { width: 800px; } .main .right { width: 360px; } } @media only screen and (max-width: 1250px) { .main { width: 1000px; } .main .left { width: 792px; } .main .right { width: 300px; } } @media only screen and (max-width:980px) { .main { width: 95%; display: block; } .main .left { width: 100%; margin-bottom: 20px; } .main .left .title { font-size: 16px; } .main .left .info1 { font-size: 12px; } .main .left .info2 { font-size: 12px; } .main .left .content { font-size: 12px !important; } .main .left .content img { width: 100%; } .main .right { width: 100%; margin-left: 0; } .main .right .item { font-size: 12px; } .main .right .item p:first-child { font-size: 16px; } .main .left .tabNews { position: static; margin-top: 20px; } .main .left .tabNews a { font-size: 12px; } }