.hd { height: 509px; background: no-repeat center; background-size: 1920px auto; } .hd_search_wrap { position: relative; top: 330px; left: 50%; margin-left: -260px; background-color: #fff; width: 520px; border-radius: 56px; height: 56px; box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.10); /* border-radius: 100px 0 0 100px; */ } .hd_search_button { width: 60px; height: 56px; position: absolute; right: 0px; border-radius: 0 56px 56px 0px; overflow: hidden; border: none; background: #428cff url(/material/images/zcwd2023/s_button.png) no-repeat center; background-size: 24px auto; } .hd_search_input { border: none; border-radius: 56px; height: 56px; width: 100%; padding-left: 20px; font-size: 16px; } .hd_tabs_wrap { margin-top: -58px; } .hd_tabs_wrap h3 a { display: inline-block; height: 60px; line-height: 56px; text-align: center; width: 350px; padding-top: 4px; font-size: 18px; } .hd_tabs_wrap h3 a.current { background: no-repeat 0px center; background-size: 337px auto; } .hd_content_wrap { margin-top: 30px; } .hd_content_left_menu { padding-top: 30px; /* width: 220px; */ background-color: #eaf3fe; height: 940px; padding-bottom: 30px; height: 100%; margin-bottom: 30px; border-radius: 0 22px 0 22px; font-size: 17px; } .hd_content_left_menu li { line-height: 48px; margin-left: 30px; padding-left: 20px; margin-bottom: 20px; user-select: none; cursor: pointer; font-weight: bold; } .hd_content_left_menu .current { background-color: #fff; font-weight: bold; position: relative;border-radius: 4px 0 0 4px; } .hd_content_left_menu .current::after { display: block; width: 11px; height: 48px; content: ''; background: url(/material/images/zcwd2023/current_bg.png); background-size: 11px 48px; position: absolute; left: -30px; top: 0; } /* .hd_content_wrap .hd_content_left_menu { float: left; } .hd_content_wrap .hd_content_s{ float: left; width: calc(100% - 250px); margin-left: 30px; } */ /* .hd_content_wrap .hd_content_s ul{ height: 800px; overflow-y: scroll; } */ .hd_content_wrap .hd_content_s ul li{ width: 100%; padding: 20px; border: 1px dashed #cccccc; border-radius: 26px; margin-bottom: 30px; } .hd_content_wrap .hd_content_s ul li>h2{ margin-bottom: 10px; } .hd_content_wrap .hd_content_s ul li>h2,.hd_content_wrap .hd_content_s ul li>.hd_content_s_box{ background: no-repeat left center; background-size: 24px 24px; padding-left: 30px; line-height: 44px; } .hd_content_wrap .hd_content_s ul li>.hd_content_s_box{ background-image: ; background-size: 24px 24px; background-position: left 10px; } .orr{ color: #999; } .corr{ background-color: #eee; margin-top: 10px; margin-left: 30px; padding: 10px; margin-bottom: 20px; border-radius: 4px; } .cse_ { margin: 20px 30px; } .cse_ span { padding: 6px 10px; background-color: #eee; font-size: 15px; margin-right: 10px; border-radius: 19px; color: #666; } .cse_ i{ font-weight: 400; font-style: normal; color: #999; } /* .hd_content_s_box .video_box{ width: 320px; height: 400px; margin-left: auto; margin-right: auto; margin-top: 100px; } */ .video-js{ width: 300px !important; height: 200px !important; } .pages a.current,.pages a:hover{ background-color: #428cff !important; } .pages a, .pages span{ border-radius: 20px; } .hd_modal{ position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100vw; height: 100vh; z-index: 9999; background-color: #f7f7f7; background-color: rgb(241 241 241 / 80%); } .hd_modal_content{ top: 30px; left: 30px; right: 30px; bottom: 30px; height: calc(100vh - 60px); width: calc(100vw - 60px); background-color: #fff; position: relative; } .hd_close{ position: absolute; right: 20px; top: 20px; background: ; background-size: 32px 32px; width: 32px; height: 32px; } @media (max-width: 480px) { .hd{ height: 260px; background-size: 280% 270px; } .hd_tabs_wrap h3 a { width: 110px; } .hd_tabs_wrap h3 a.current { background-size: 110% 42px; } .hd_search_wrap{ top: 163px; width: 300px; height: 40px; margin-left: -150px; } .hd_search_input{ height: 40px; border-radius: 40px; } .hd_search_button,.hd_tabs_wrap h3 a { height: 40px; line-height: 40px; } .hd_tabs_wrap { margin-top: -40px; } .hd_content_left_menu .current::after{ background-size: auto 40px; background-repeat: no-repeat; } }