锘 .block2 { display: inline-block; width: 49%; box-sizing: border-box; vertical-align: top; margin: 0; } .block4 { display: inline-block; width: 24%; box-sizing: border-box; vertical-align: top; margin: 0; margin-top: 50px; } .table2 { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: stretch; width: 100%; position: relative; } .table2 .cell2 { text-align: left; } .table2.right { flex-direction: row-reverse; } .table2.right .cell2 { text-align: right; } .cell2 { width: 50%; box-sizing: border-box; padding: 0 3em; } .cell2 header { padding: 0.5em 0; font-size: 26px; } #ljzx, #fays { border: 1px solid #C4261D; padding: 0.7em 2.1em; margin-top: 0.7em; margin-right: 0.7em; font-size: 1.1em; cursor: pointer; box-shadow: 2px 2px 3px #d5d5d5; display: inline-block; } #ljzx { color: #fff; background: #C4261D; } #fays { color: #C4261D; } #ljzx:hover, #fays:hover { border: 1px solid #a92019; background: #a92019; color: #fff; } #Advantage .block4 { width: 22%; margin: 0 1%; } #Advantage .block4 > div { height: 140px; } #Choose .block2 { text-align: left; margin: 1em 1%; box-sizing: border-box; width: 47%; } #Choose .block2 img { margin-right: 12px; float: left; width: 100px; } #Choose .block2 header { font-size: 22px; margin: 0.2em 0; } #ERP .cell2 { display: flex; flex-direction: column; justify-content: center; } #ERP .cell2 img { max-width: 100%; } #Banner .WarpBox.WarpBox2 { justify-content: center; } #BannerLeft { width: 32%; text-align: left; } #BannerRight { width: 60%; float: right; } #BannerLeft header { font-size: 28px; text-align: left; line-height: 1.5em; padding: 1em 0; margin-top: 2em; } #Case img { width: 150px; max-width: 50%; height: 85px; } .pc { display:block } .mobile { display:none } @media(max-width:1000px) { #Info .WarpBox.WarpBox2 { flex-direction: column; } #Info .block2 { width: 80%; margin: 0.5em auto; } } @media(max-width:900px) { .WarpBox.WarpBox2 { margin: 0 100px; } #Advantage .block4 { width: 47%; margin: 1em 1%; } #Info .block2 { width: 100%; } #Choose .block2 img { width: 80px; } #Choose .block2 header { padding: 30px 0; margin: 0; } #Banner .WarpBox.WarpBox2 { flex-direction: column-reverse; } #BannerLeft { width: 100%; } #BannerRight { width: 100%; float: none; } #BannerLeft header { margin-top: 0; } } @media(max-width:800px) { #ERP .cell2 { padding: 1em 0.5em; } } @media(max-width:700px) { #Advantage .block4 { width: 100%; margin-top: 20px; } #Advantage .block4 > div { height: auto; margin-bottom: 0.5em; } #Choose .block2 { text-align: center; } #Choose .block2 img { float: none; } #Choose .block2 header { padding: 0; margin-top: 1em; } #Choose .block2 p { text-align: left; } } @media(max-width:600px) { .WarpBox.WarpBox2 { margin: 0 30px; } #ERP .table2, #ERP .table2.right { flex-direction: column; } #ERP .table2 .cell2 { width: 98%; text-align: left; } #ERP .table2 .cell2 header { text-align: center; font-size:1.2rem } #Choose .block2 header { font-size: 1.2rem; } .pc { display:none } .mobile { display:block } #Choose .block2 { width: 100%; } }