.banner { position: relative; height: 0; padding-top: 18.75%; background-image: url(../images/about-banner.jpg); background-position: center; background-size: 100% 100%; } .tab { margin-bottom: 0; } .culture-block { padding: 60px 0; } .culture-block .cnt-grid { display: flex; } .culture-block .block-l { width: 50%; padding-right: 120px; } .culture-block .block-l .block-img { width: 100%; padding-top: 66.667%; background-size: cover; position: relative; border-radius: 10px; } .culture-block .block-l .block-img.img-1 { background-image: url(../images/culture-1.png); } .culture-block .block-l .block-img.img-2 { background-image: url(../images/culture-2.jpg?t=1); } .culture-block .block-l .block-img.img-3 { background-image: url(../images/culture-3.jpg); padding-top: 68.965%; } .culture-block .block-l .block-img .block-tag { position: absolute; bottom: -37px; padding: 15px 30px; font-size: 18px; left: 0; color: #fff; border-radius: 0 15px 0 15px; background: var(--theme); } .culture-block .block-r { width: 50%; } .culture-block .block-r .block-title-en { color: rgba(1, 89, 163, 0.05); font-size: 36px; font-weight: 900; } .culture-block .block-r .block-title-cn { color: var(--theme); font-size: 32px; font-weight: 700; margin-bottom: 20px; } .culture-block .block-r .avatar { display: flex; margin-bottom: 20px; } .culture-block .block-r .avatar img { width: 50px; height: 50px; object-fit: cover; border-radius: 50%; margin-right: 15px; } .culture-block .block-r .avatar .name { font-size: 18px; font-weight: 700; } .culture-block .block-r .avatar .tip { color: #666; } .culture-block .block-r .block-cnt p { font-size: 16px; margin: 0 0 16px 0; line-height: 2; } .culture-block .block-r .block-cnt p:last-child { margin-bottom: 0; } .culture-block .block-r .block-cnt .block-cnt-title { font-size: 16px; color: var(--theme); font-weight: 700; line-height: 2; margin: 20px 0 10px 0; padding-left: 26px; position: relative; } .culture-block .block-r .block-cnt .block-cnt-title::before { content: ""; width: 14px; height: 14px; border: 2px solid var(--theme); border-radius: 50%; display: block; position: absolute; left: 0; top: 6px; } .culture-block.reverse .cnt-grid { flex-direction: row-reverse; } .culture-block.reverse .block-r { width: calc(50% + 20px); } .culture-block.reverse .block-l { width: calc(50% - 20px); padding-right: 0; padding-left: 120px; } .culture-block.reverse .block-l .block-img { padding-top: 80%; } .culture-block.reverse .block-l .block-img .block-tag { left: auto; right: 0; border-radius: 15px 0 15px 0; } .culture-block.block-list .cnt-grid { display: block; } .culture-block.block-list .list { display: flex; flex-wrap: wrap; } .culture-block.block-list .list.list-m { display: none; } .culture-block.block-list .list .item { width: calc(33.333%); background: #FAFBFC; position: relative; } .culture-block.block-list .list .item .item-inner { padding: 160px 40px 0 40px; } .culture-block.block-list .list .item .item-title { color: var(--theme); font-size: 24px; font-weight: 700; margin-bottom: 20px; } .culture-block.block-list .list .item .item-cnt { font-size: 18px; } .culture-block.block-list .list .item::before { position: absolute; content: ""; width: 180px; background: #EBEFF2; height: 100px; border-radius: 100px 0px 0px; left: 0; top: 0; } .culture-block.block-list .list .item::after { position: absolute; content: ""; width: calc(100% - 180px); background: #F5F7FA; height: 100px; right: 0; top: 0; } .culture-block.block-list .list .item-img { padding-top: 22.222%; background-size: 100% 100%; } .culture-block.block-list .list .item-img.img-1 { background-image: url(../images/culture-list-1.jpg); } .culture-block.block-list .list .item-img.img-2 { background-image: url(../images/culture-list-2.jpg); } .culture-block.block-list .list .item-img.img-3 { background-image: url(../images/culture-list-3.jpg); } .culture-block.block-list .list .item-img::before, .culture-block.block-list .list .item-img:after { display: none; } .culture-block:nth-child(2n) { background: #fff; } .culture-block:nth-child(2n+1) { background: #FAFBFC; } @media screen and (max-width: 768px) { .wrapper .banner { padding-top: 33.333%; height: 0; background-size: cover; position: relative; } .wrapper .banner .cnt-grid { position: absolute; height: 100%; top: 0; } .wrapper .banner .cnt-grid .banner-title-en { display: none; } .wrapper .banner .cnt-grid .banner-title { font-size: 18px; } .wrapper .banner .cnt-grid .banner-tip { font-size: 12px; } .wrapper .tab { margin-bottom: 0; } .wrapper .culture-block { padding-top: 40px; padding-bottom: 40px; background: #fff; } .wrapper .culture-block .cnt-grid { display: block; } .wrapper .culture-block .block-l { width: 100%; padding-right: 0; margin-bottom: 60px; padding-left: 0; } .wrapper .culture-block .block-l .block-img { padding-top: 66.667%; } .wrapper .culture-block .block-l .block-img .block-tag { padding: 7px 20px; font-size: 12px; bottom: -16px; } .wrapper .culture-block .block-r { width: 100%; } .wrapper .culture-block .block-r .block-title-en { display: none; } .wrapper .culture-block .block-r .block-title-cn { font-size: 18px; margin-bottom: 20px; text-align: center; } .wrapper .culture-block .block-r .block-cnt p { font-size: 14px; } .wrapper .culture-block .block-r .block-cnt .block-cnt-title { font-size: 14px; } .wrapper .culture-block .block-r .block-cnt .block-cnt-title::before { width: 12px; height: 12px; } .wrapper .culture-block.block-list .list { display: none; } .wrapper .culture-block.block-list .list.list-m { display: block; } .wrapper .culture-block.block-list .list.list-m .item-wrap { border-radius: 10px; overflow: hidden; margin-bottom: 20px; } .wrapper .culture-block.block-list .list.list-m .item-wrap:last-child { margin-bottom: 0; } .wrapper .culture-block.block-list .list.list-m .item { width: 100%; padding: 20px; background-color: #F5F7FA; } .wrapper .culture-block.block-list .list.list-m .item.item-img { padding: 66.5625% 0 0 0; } .wrapper .culture-block.block-list .list.list-m .item .item-inner { padding: 0; } .wrapper .culture-block.block-list .list.list-m .item .item-title { font-size: 16px; margin-bottom: 5px; } .wrapper .culture-block.block-list .list.list-m .item .item-cnt { font-size: 14px; } .wrapper .culture-block.block-list .list.list-m .item::before, .wrapper .culture-block.block-list .list.list-m .item::after { display: none; } .container { padding-bottom: 0; } .tab .cnt-grid { justify-content: flex-start; } }