.head-page .item:nth-child(4) span{ color: #0984D2; } .head-page .item:nth-child(4) span::before{ transform: scaleX(01); opacity: 1; } .techinical .list{ padding: 22px 0; box-sizing: border-box; transition: all .4s; position: relative; } .techinical .list:last-child{ margin-bottom: 0; } .techinical .list:nth-child(2n){ flex-direction: row-reverse; } .techinical .list::after{ content: ""; display: block; width: 0; height: 5px; transition: all .6s; position: absolute; left: 0; bottom: 22px; z-index: -1; background: #0984D2; } .techinical .list:nth-child(2n)::after{ left: initial; right: 0; } .techinical .list .img{ width: 50%; /* height: 513px; */ overflow: hidden; display: flex; align-items: center; justify-content: center; } .techinical .list .img img{ transition: all .4s; } .techinical .list .texts{ width: 46%; } .techinical .list .tit{ text-transform: uppercase; font-weight: 600; } .techinical .list .line{ width: 54px; height: 6px; background: #0984D2; margin: 22px 0 24px; transition: all .4s; } .techinical .list .desc{ max-height: 328px; overflow-y: auto; padding-right: 10px; box-sizing: border-box; } .techinical .list .desc p{ margin-bottom: 20px; } .techinical .list .desc p:last-child{ margin-bottom: 0; } @media only screen and (min-width: 1600px) { .techinical .list:hover::after{ width: 100%; } .techinical .list:hover .img img{ transform: scale(1.08); } } @media only screen and (max-width: 1600px) { .techinical .list .desc { max-height: 234px; overflow-y: auto; padding-right: 10px; box-sizing: border-box; } } @media only screen and (max-width: 1280px) { .techinical .list .desc { max-height: 178px; } } @media only screen and (max-width: 1200px) { .techinical .list .desc { max-height: 142px; } } @media only screen and (max-width: 960px) { .techinical .list .desc { max-height: 106px; } } @media only screen and (max-width: 768px) { .techinical .list .img{ width: 100%; } .techinical .list .texts { width: 100%; margin-top: 20px; } .techinical .list .desc { max-height: 90px; } .techinical .list .line { width: 40px; height: 2px; margin: 15px 0 20px; } .techinical .list { padding: 12px 0; } .techinical .list:last-child{ padding-bottom: 0; } .techinical .page_content{ padding-top: 20px; } .techinical .list::after{ bottom: 0; } .techinical .list .desc { max-height: 60px; } }