.ability_ul2 { margin-top: 100px; } .ability_ul2 li { transition: all 0.5s; margin-bottom: 30px; } .ability_ul2 li .li_head { transition: all 0.2s; display: flex; justify-content: space-between; align-items: center; padding: 23px 45px; background: #E7E7E7; font-size: 20px; color: #fff; } .ability_ul2 li .li_head .iconfont { transition: all 0.5s; transform: rotate(90deg); font-size: 18px; } .ability_ul2 li .li_cont { height: 0; overflow: hidden; transition: .5s; } .ability_ul2 li .li_cont img{ width: 100%; } .ability_ul2 li.li_act { box-shadow: 0px 6px 15px 0px rgba(0, 0, 0, 0.06); } .ability_ul2 li.li_act .li_head { background: transparent; border-bottom: 1px solid rgba(0, 0, 0, 0.1); /*color: var(--themeColor);*/ } .ability_ul2 li.li_act .li_head .iconfont { transform: rotate(0deg); font-size: 18px; } .ability_ul2 li .li_cont { position: relative; background: url(/web/image/rencai.png) no-repeat; background-size: cover; background-position: right bottom; } .ability_ul2 li .li_cont .li_txt { padding: 30px 0; padding-left: 20px; /*font-size: 14px;*/font-size: 18px; } .ability_ul2 li .li_cont .li_txt ul { margin-bottom: 20px; } .ability_ul2 li .li_cont .li_txt ul li { /*font-size: 14px;*/ margin-bottom: 5px; } .ability_ul2 li .li_cont .li_txt div { color: #333; } .ability_ul2 li .li_cont .li_txt .btn_a { margin-top: 45px; width: 135px; } .ability_ul2 li:nth-child(1) .li_head{ background-color: #cf0f19; } .ability_ul2 li:nth-child(2) .li_head{ background: rgba(207,15,25,0.8); } .ability_ul2 li:nth-child(3) .li_head{ background:rgba(207,15,25,0.6); } .ability_ul2 li:nth-child(4) .li_head{ background: rgba(207,15,25,0.4); } .ability_ul2 li:nth-child(5) .li_head{ background: rgba(207,15,25,0.3); } .ability_ul3 { margin-top: 100px; margin-bottom: 200px; } .ability_ul3 li { display: flex; margin-bottom: 40px; align-items: stretch; } .ability_ul3 li:nth-child(2n) { flex-direction: row-reverse; } .ability_ul3 li img { width: 50%; } .ability_ul3 li .ul3_txt { width: 50%; background: #E7E7E7; padding: 0 55px; display: flex; flex-direction: column; justify-content: center; position: relative; } .ability_ul3 li .ul3_txt h6 { color: var(--themeColor); font-size: 24px; margin-bottom: 25px; } .ability_ul3 li .ul3_txt p { font-size: 18px; color: #333; } .ability_ul3 li .ul3_txt img { position: absolute; width: 35px; } .ability_ul3 li .ul3_txt .bkuang { top: 30px; left: 40px; } .ability_ul3 li .ul3_txt .akuang { transform: rotate(180deg); bottom: 30px; right: 40px; } .search-box{ margin: 60px auto 0; display: flex; padding: 20px; gap: 20px; background-color: #f4f4f4; position: sticky; top: 80px; z-index: 11; } .filesearch input{ height: 40px; min-width: 300px; background: transparent; flex: 1; font-size: 16px; } .filea{ color: #fff !important; position: relative; cursor: pointer; } .filea input{ opacity: 0; position: absolute; top: 0; left: 0;right: 0;bottom: 0; cursor: pointer; } .filesearch{ display:flex; justify-content: flex-end; align-items: center; gap: 20px; padding: 0 20px; min-width: 300px; /*width: 40%;*/ /*border: 1px solid #d6d6d6;*/ background-color: #fff; flex: 1; flex-shrink:0 ; cursor: pointer; } .filesearch img{ width: 15px; } .search-item .span{ font-size: 16px; } .search-item{ display: flex; flex-direction: column; gap: 5px; flex: 1; max-width: 300px; font-size: 16px; } @media (max-width:1400px){ .ability_ul3 li .ul3_txt h6{ font-size: 20px; } .ability_ul3 li .ul3_txt p{ font-size: 14px; } } @media (max-width:600px){ .ability_ul2 li.li_act .li_cont{ /*overflow: hidden;*/ } .ability_ul2 li.li_act .li_cont .li_txt{ left: 0; padding-left: 20px; } .ability_ul2 li .li_cont img{ display: none; } .ability_ul2 li{ visibility: inherit !important; } .ability_ul3 li{ flex-direction: column; margin-bottom: 20px; } .ability_ul3 li:nth-child(2n){ flex-direction: column; } .ability_ul3 li .ul3_txt,.ability_ul3 li img{ width: 100%; } .ability_ul3 li .ul3_txt{ padding:10px 25px; } .ability_ul3 li .ul3_txt h6{ font-size: 18px; margin-bottom: 10px; } .ability_ul3 li .ul3_txt .bkuang,.ability_ul3 li .ul3_txt .akuang{ display: none; } .ability_ul3{ margin-bottom: 50px; } .ability_ul2{ margin-top: 30px; } .ability_ul2 li{ margin-bottom: 20px; } .ability_ul2 li .li_head{ padding: 10px 20px; font-size: 16px; } .ability_ul2 li .li_cont{ background-position: none; } .search-box{ flex-direction: column; position: static; } .filesearch{ min-width: min-content; width: 100%; } .filesearch input{ min-width: min-content; flex: 0; } }