锘 .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: 20px; } #block4-20 { width: 19%; } #block4-30 { width: 30%; } .block3 { display: inline-block; width: 30%; box-sizing: border-box; vertical-align: top; margin: 0 auto; margin-bottom: 1em; } .block3 > header { font-size: 20px; margin-top: 1em; } .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: 0em 3em; } .cell2 header { padding: 0.5em 0; font-size: 26px; } #ljzx { padding: 0.5em 1.8em; margin-top: 0.7em; margin-right: auto; margin-left: auto; cursor: pointer; display: inline-block; color: #C4261D; background: #fff; width: 110px; } #ljzx:hover { background: #a92019; color: #fff; } #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; } #Worth .cell2 { display: flex; flex-direction: column; justify-content: center; } #Worth .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; } #AnalyzOrdBannerText1 { font-size: 22px; line-height: 22px; font-weight: bold; } #AnalyzOrdBannerText2 { font-size: 31px; line-height: 31px; margin: 20px 0; } #AnalyzOrdBannerText3 { } #Banner { background: url(/Images/AnalyzOrdBanner.jpg) no-repeat center; height: auto; position: relative; } #BannerImg { display: block; width: 100%; } .pc { display:block } .mobile { display:none } #Case img { width: 150px; max-width: 50%; height: 85px; } @media(max-width:900px) { .WarpBox.WarpBox2 { margin: 0 100px; } #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; } #AnalyzOrdBannerText3 { display: none; } #Info .block4 { width: 49%; } } @media(max-width:800px) { #Worth .cell2 { padding: 1em 0.5em; } #AnalyzOrdBannerText2 { display: none; } } @media(max-width:700px) { #Info .block4 { width: 100%; margin-top: 20px; } #Choose .block2 { text-align: center; } #Choose .block2 img { float: none; } #Choose .block2 header { padding: 0; margin-top: 1em; } #Choose .block2 p { text-align: left; } #Banner { height: 200px; background-position: center; background-size: cover; } #BannerImg { display: none; } } @media(max-width:600px) { .WarpBox.WarpBox2 { margin: 0 30px; } #Worth .table2, #Worth .table2.right { flex-direction: column; } #Worth .table2 .cell2 { width: 98%; text-align: left; } #Worth .table2 .cell2 header { text-align: center; } .cell2 header { padding: 0.5em 0; font-size: 1.2rem; } #Choose .block2 header { font-size: 1.2rem; margin: 0.2em 0; } .pc { display:none } .mobile { display:block } #Choose .block2 { width: 100%; } }