.banner{ display: flex; justify-content: center; align-items: center; width: 100%; } .banner>img{ display: flex; justify-content: center; align-items: center; width: 100%; } .introduction{ display: flex; flex-direction: row; width: 100%; margin: 25px 0 20px 0; } .introduction>.author{ display: flex; justify-content: center; align-items: center; width: 36%; } .introduction>.author>img{ display: flex; border: 1px solid #999999; width: 64%; } .introduction>div{ display: flex; flex-direction: column; } .introduction>div>h2{ font-size: 16px; margin: 0 0 10px 0; padding: 0; font-weight: 800; color: #111111; } .introduction>div>h4{ font-size: 14px; margin: 0 0 5px 0; padding: 0; font-weight: bold; color: #333333; } .introduction>div>p{ font-size: 14px; margin: 0; padding: 0; font-weight: 500; color: #666666; line-height: 22px; } .tablist{ display: flex; justify-content: center; align-items: center; width: 100%; } .tablist>ul{ display: flex; width: 90%; } .tablist>ul>li{ display: flex; flex: 1; flex-direction: column; justify-content: center; align-items: center; } .tablist>ul>li>div{ display: flex; width: 28px; height: 36px; border: 1px solid #666666; color: #666666; justify-content: center; align-items: center; margin-bottom: 6px; } .tablist>ul>li>div>img{ display: flex; width: 100%; } .tablist>ul>li>span{ color: #333333; font-weight: bolder; line-height: 22px; } .infor{ display: flex; padding: 30px 0 50px 0; justify-content: center; align-items: center; width: 100%; } .infor>.infor-bg{ display: flex; width: 78%; background: url("../img/create_bg.png") center center/80% no-repeat; } .infor>.infor-bg>section:first-child{ width: 84%; } .infor>.infor-bg>section:first-child>p{ font-size: 14px; color: #666666; } .infor>.infor-bg>section:last-child{ display: flex; flex-direction: column; justify-content: center; align-items: center; width: 16%; } .infor>.infor-bg>section:last-child>h6{ font-size: 20px; color: #333333; font-weight: bolder; }