.main-title-content{ width: 100%; height: 100%; background: rgba(0, 0, 0, .4); color: #fff; box-sizing: border-box; padding: 9rem 23rem; } h1{ font-size: 4.38rem; font-weight: 600; } h3{ font-size: 1.63rem; letter-spacing: 0.2rem; font-weight: 400; margin-top: 2.5rem; } .introitem-title{ display: flex; align-items: center; font-size: 2rem; color: #333; margin-bottom: 3rem; font-weight: bold; } .introitem-title img{ margin-right: 0.75rem; } .history{ width: 100%; padding: 7rem 23rem; box-sizing: border-box; max-width: 1920px; margin: 0 auto; } .end-img{ display: flex; justify-content: center; position: relative; } .end-img>span{ position: absolute; color: #fff; font-size: 20px; top: 46px; } .line-right { /* display: flex; */ justify-content: end; width: 100%; box-sizing: border-box; } .line-right .year{ font-size: 1.25rem; color: rgba(7, 163, 89, 1); } .right-content{ padding: 3rem 0 0 4rem; box-sizing: border-box; border-left: 2px dashed rgba(7, 163, 89, 0.3); display: flex; margin-left:50%; } .left-content{ padding-right: 50%; } .time-line-img{ width: 32.19rem; margin-top: 1.75rem; height: 16.64rem; } .right-content h4{ font-size: 2.25rem; font-weight: 600; /* letter-spacing: 0rem; */ /* line-height: 2; */ color: rgba(7, 163, 89, 1); } .time-line-text{ display: flex; flex-direction: column; justify-content: center; } .time-line-text p{ padding-top: 1rem; } .history-item-title{ font-size: 1.25rem; font-weight: 600; color: rgba(7, 163, 89, 1); margin-bottom: 0.75rem; position: relative; } .history-item-title>img{ position: absolute; width: 3.75rem; height: 1.5rem; top: 0; left: -4.8rem; } .left-content{ width: 50%; padding: 1rem 4rem 0 0; box-sizing: border-box; border-right: 2px dashed rgba(7, 163, 89, 0.3); text-align: right; position: relative; right: -2px; } .history-item-title>img.left-img{ position: absolute; width: 3.75rem; height: 1.5rem; top: 0.7rem; right: -4.8rem; left:auto; } .honor-content{ width: 100%; height: 30rem; position: relative; } .honor-icon-left{ position: absolute; top: 50%; left: -6rem; width: 3rem; height: 3rem; transform: translate(0, -50%); transition: all 0.3s ease; cursor: pointer; transition: all 0.3s ease; } .honor-icon-left img,.honor-icon-right img{ width: 100%; height: 100%; transition: all 0.3s ease; } .honor-icon-right{ position: absolute; top: 50%; right: -6rem; width: 3rem; height: 3rem; transform: translate(0, -50%); cursor: pointer; transition: all 0.3s ease; } .honor-icon-left:hover .nomal-img, .honor-icon-right:hover .nomal-img{ display: none; } .honor-icon-left:hover .active-img, .honor-icon-right:hover .active-img { display: block; } .nomal-img{ display: block; } .active-img{ display: none; } .honor-content>ul{ width: 100%; height: 100%; overflow: hidden; display: flex; align-items: end; } .honor-content>ul>li{ width: 16.63rem; height: 24.88rem; margin-right: 2rem; list-style: none; flex:0 0 auto; position: relative; } .honor-content>ul>li img{ width: 100%; height: 80%; } .honor-content>ul>li.isactive{ width: 22.5rem; height: 30rem; } .firstInfo{ position: absolute; bottom: 1rem; text-align: center; color: rgba(102, 102, 102, 1); width: 100%; } .honor-content>ul>li div.firstInfo>img{ width: 23px; margin-right: 6px; } p{ line-height: 2; color: rgba(102, 102, 102, 1); text-align: justify; } .honor{ background: #fafafa; width: 100%; box-sizing: border-box; padding: 7rem 23rem; max-width: 1920px; margin: 0 auto; } @media screen and (max-width:1023px){ .honor { padding: 8rem 10rem; } .honor-content>ul>li { width: 17.63rem; } .history { padding: 8rem 10rem; } .right-content{ display: block; } .time-line-img{ width: 30%; margin-bottom: 1rem; } } @media screen and (max-width:750px){ .honor-icon-left{ left: -25px; width: 20px; height: 20px; } .honor-icon-right{ width: 20px; height: 20px; right: -25px; } .main-title { width: 100%; height: 37.19rem; } .time-line-img{ width: 50%; margin-bottom: 10px; } .right-content h4{ font-size: 20px; margin-bottom: 10px; } .introitem-title,h4,.line-right .year { font-size: 16px; } .time-line-text p{ font-size: 12px; } .firstInfo{ font-size: 12px; width: 200px; display:none } }