.list {
display: flex;
padding: 30px 0;
}
.list_left {
width: 299px;
border-right: 1px solid #E2E2E2;
}
.list_left > div > h1 {
line-height: 70px;
}
.list_left > div:first-child ul > li > a {
display: inline-block;
padding: 20px 90px;
color: #898989;
border-bottom: 1px solid #E2E2E2;
font-size: 20px;
}
.list_left > div:first-child ul > li > a.active {
background: #D22829;
color: #fff;
}
.list_right {
flex: 1;
margin-left: 20px;
}
.list_right > h1 {
line-height: 70px;
margin-bottom: 20px;
border-bottom: 2px solid #D22829;
display: inline-block;
width: 170px;
}
.about-us-right-content > p {
color: #7F7E7F;
text-indent: 0;
padding-left: 90px;
position: relative;
}
.about-us-right-content > p > strong {
width: 70px;
text-align: right;
display: inline-block;
position: absolute;
left: 0;
}
.about-us-right-content > p > strong::after {
content: '';
display: block;
width: 8px;
height: 8px;
border-radius: 50%;
position: absolute;
top: 50%;
right: -19px;
transform: translateY(-50%);
z-index: 999;
background: #D22829;
}
.about-us-right-content {
position: relative;
}
.about-us-right-content::after {
content: '';
display: block;
width: 1px;
height: 100%;
position: absolute;
top: 0;
left: 85px;
background: #7F7E7F;
}
.about-history-back-title {
display: inline-block;
position: relative;
color: #D22829;
margin-bottom: 15px;
}
.about-history-back-title::after {
margin-bottom: 20px;
content: '';
display: block;
width: 10px;
height: 10px;
border-radius: 50%;
top: 50%;
right: -21px;
transform: translateY(-50%);
z-index: 999;
background: #D22829;
position: absolute;
}
.list-wapper-type-selcet {
position: absolute;
right: 0;
}
.aaa {
display: none;
}
#menu {
width: 1200px;
margin: 0 auto;
display: flex;
align-items: center;
}
#menu > div {
width: 100%;
padding: 22px;
font-size: 18px;
color: #8E8E8E;
margin: 3px 0 60px;
border-right: 2px solid #D22829;
position: relative;
display: flex;
justify-content: center;
}
#menu > div.active > span {
display: block;
}
#menu > div > span {
position: absolute;
bottom: 0px;
width: 0;
height: 0;
border-left: 13px solid transparent;
border-right: 13px solid transparent;
border-bottom: 15px solid #fff;
display: none;
}
#menu > div:first-child {
border-left: 2px solid #D22829;
}
#menu > div.active {
background-color: #D22829;
color: #fff;
}
#linksContent > li {
padding: 60px;
position: relative;
}
#linksContent > li > div:first-child {
width: 60%;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
#linksContent > li > div:first-child > img {
width: 100%;
}
#linksContent > li > div:nth-child(2) {
width: 40%;
position: absolute;
bottom: 90px;
right: 60px;
background: #D22829;
padding: 50px 40px 20px;
color: #fff;
text-align: justify;
text-indent: 2em;
line-height: 1.5em;
font-size: 16px;
box-sizing: border-box;
}
#linksContent > li > div:nth-child(2) > div:nth-child(2) {
text-align: right;
margin-top: 30px;
}
#linksContent > li > div:nth-child(2) > div:nth-child(2) > a {
padding: 10px 20px;
background: #fff;
border-radius: 20px;
text-align: center;
}
table {
width: 100%;
text-align: center;
font-size: 18px;
}
table th span {
padding: 10px 30px;
background: #D22829;
border-radius: 10px;
color: #fff;
font-size: 22px;
}
table th span::after,
table tr:nth-child(3) span::before,
table tr:nth-child(3) span::after,
table tr:nth-child(5) td > a > span::before,
table tr:nth-child(5) td:first-child::before,
table tr:nth-child(5) td:nth-child(5)::before {
content: '';
width: 2px;
height: 50px;
position: absolute;
top: 110px;
left: 50%;
background: #D22829;
transform: translateX(-50%);
}
table tr:nth-child(3) span::after {
height: 20px;
top: 40px;
}
table tr:nth-child(3) span::before {
top: -65px;
}
table tr:nth-child(2) > td > span {
width: calc(90% + 2px);
height: 2px;
background: #D22829;
display: block;
margin: 0 auto;
}
table tr {
display: flex;
}
table tr,
table td,
table th {
width: 100%;
}
table tr:nth-child(3) > td > span {
position: relative;
padding: 10px 10px;
background: #D22829;
color: #fff;
border-radius: 50%;
display: inline-block;
margin-bottom: 20px;
}
table tr:nth-child(4) a {
border: 2px solid #D22829;
width: 122px;
height: 46px;
display: inline-block;
line-height: 44px;
border-radius: 7px;
color: #6B6B6B;
}
table tr:nth-child(5) td {
display: flex;
justify-content: center;
position: relative;
}
table tr:nth-child(5) td > a > span {
width: 20px;
border: 2px solid #D22829;
display: block;
padding: 10px;
font-size: 16px;
color: #6B6B6B;
border-radius: 7px;
}
table tr:nth-child(5) td a + a {
margin-left: 7px;
}
table tr:nth-child(5) td a {
position: relative;
}
table tr:nth-child(5) td > a > span::before {
top: -50px;
}
table tr:nth-child(5) td:first-child > a > span::before,
table tr:nth-child(5) td:nth-child(5) > a > span::before {
height: 20px;
top: -30px;
}
table tr:nth-child(5) td:first-child::before,
table tr:nth-child(5) td:nth-child(5)::before {
height: 20px;
top: -50px;
}
table tr:nth-child(5) .span {
position: absolute;
top: -30px;
left: 50%;
transform: translateX(-50%);
width: 50px;
height: 2px;
background: #D22829;
}
table tr:nth-child(5) td:nth-child(4) > a > span {
display: flex;
width: 40px;
}
#menu > div > a {
position: absolute;
width: 100%;
height: 100%;
}
@media screen and (max-width: 768px){
.breadcrumb{
width: 98% !important;
}
.wapper {
width: 100%;
}
body{
background: #FFFFFF;
font-size: 14px;
}
.list-wapper {
background-color: #ffffff;
}
.list_right > div:nth-child(2) {
margin-left: 0;
}
.list {
display: flex;
padding: 30px 0;
flex-wrap: wrap;
}
.list>.list_left>div>ul{
display: flex;
flex-wrap: wrap;
}
.list>.list_left>div>ul>li{
margin: 7px;
}
.list_right {
flex: auto;
}
.list_left {
width: 100%;
}
.list_left > div:first-child ul > li > a {
padding: 20px 72px;
}
.about-us-right {
padding: 30px 0;
width: 90vw;
}
.about-us-right-content p {
line-height: 40px;
padding-left: 120px;
}
}