.aboutUs{ width: 100%; height: 88vh; /* background: palegoldenrod; */ position: relative; } .aboutUs .container{ width: 100%; height: 83%; /* background: palevioletred; */ background-image: url(../imgs/关于我们图.jpg); background-size:100% auto; background-position: 100% 100%; background-repeat: no-repeat; } .aboutUs-content{ width:20vw; height: 20vh; /* background: palevioletred; */ position: absolute; bottom: 6vh; left: 15vw; display: flex; } .aboutUs-content-img{ width: 43%; } .with-border{ padding: 3px; background: #fff; border-radius: 50%; box-shadow: 0 0 10px 0 rgba(0,0,0,0.5); overflow: hidden; } .with-border img{ width: 100%; height:auto; } .exaboutUs-content-tt{ /* background: palevioletred; */ width: 48%; display: flex; flex-direction: column; justify-content: end; align-items: center; } .exaboutUs-content-tt p:nth-of-type(1){ font-size: 1.3vw; font-weight: 600; color: rgba(0,0,0,0.7); text-align: left; width: 80%; } .exaboutUs-content-tt p:nth-of-type(2){ font-size: 0.8vw; font-weight: 600; color: rgba(0,0,0,0.3); text-align: left; width: 80%; } .textBox{ width: 19vw; height: 30vh; position: absolute; top: 5vh; left: 8vw; } .textBox-title{ margin-top: 1vh; } .textBox-title p{ line-height: 30px; color: rgba(0,0,0,0.7); } .textBox-title p:nth-of-type(1){ font-size: 0.9vw; } .textBox-title p:nth-of-type(2){ font-size: 0.75vw; margin-top: 0.5vh; } .staffBox{ width: 100%; height: 45vh; display: flex; justify-content: center; align-items: start; } .staffBox-left,.staffBox-right{ width: 13vw; height: 68%; box-shadow: 5px 5px 5px 5px rgba(0,0,0,0.2); border-radius: 15px; overflow: hidden; display: flex; flex-direction: column; justify-content: center; align-items: center; } .top, .bottom{ width: 100%; height: 50%; display: flex; } .top div{ width: 50%; height:100%; text-align: right; } .top-title{ display: flex; flex-direction: column; justify-content: flex-end; align-items: end; } .top-title p:nth-of-type(1){ font-size: 1vw; color: rgba(0,0,0,0.7); text-align: right; width: 80%; padding-right: 0.4vw; } .top-title p:nth-of-type(2){ font-size: 2vw; color: rgba(0,0,0,0.3); text-align: right; font-weight: 600; width: 80%; } .top-img { text-align: center !important; padding-top: 4vh; } .top-img img{ width: 55%; height: auto; } .bottom-title{ width: 50%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; } .bottom-title p{ width: 100%; height:auto; display: flex; justify-content: left; align-items: center; margin-top: 0.5vh; padding-left: 1vw; } .colorBlock{ display: inline-block; width: 0.8vw; height: 1.1vh; background: #29C2EB; border-radius: 3px; margin-right: 0.5vw; } .colorBlock2{ display: inline-block; width: 0.8vw; height: 1.1vh; border-radius: 3px; margin-right: 0.5vw; background: #1F589B; } .colorBlock3{ display: inline-block; width: 0.8vw; height: 1.1vh; border-radius: 3px; margin-right: 0.5vw; background: #0C3660; } .colorBlock4{ display: inline-block; width: 0.8vw; height: 1.1vh; border-radius: 3px; margin-right: 0.5vw; background: #B160A2; } .colorBlock5{ display: inline-block; width: 0.8vw; height: 1.1vh; border-radius: 3px; margin-right: 0.5vw; background: #601A56; } .Block2 , .Block3{ font-size: 0.7vw; color: rgba(0,0,0,0.7); margin-right: 0.5vw; } .bottom-img{ width: 50%; height: 100%; text-align: center; /* padding-top: 2vh; */ } .bottom-img img{ width: 80%; height: auto; } /* .staffBox-left{ width: 12vw; height: 70%; box-shadow: 5px 5px 5px 5px rgba(0,0,0,0.2); border-radius: 15px; } */ .staffBox-right{ margin-left: 8vw; }