@media screen and (min-width: 768px) { .title { font-size: 34px; text-align: center; margin-top: 100px; } .main .case { -webkit-box-sizing: border-box; box-sizing: border-box; } .main .case:nth-child(1) { padding-top: 80px !important; } .main .case:nth-child(odd) { height: 690px; padding: 120px 0; } .main .case:nth-child(odd) .cover { width: 668px; height: 410px; } .main .case:nth-child(even) { height: 720px; padding: 162px 0; background: url(/img/case-bg.png) no-repeat center; background-size: auto 720px; } .main .case:nth-child(even) .cover { width: 568px; height: 397px; } .main .case .cover { background: pink; } .main .case .content { position: relative; background: skyblue; width: 490px; height: 410px; margin-top: 50px; } .main .case .content img { display: block; width: 580px; height: 516px; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .main .case .cover img { display: block; width: 100%; height: 100%; } .footer { margin-top: 0; } } @media screen and (max-width: 768px) { .title { font-size: 0.34rem; text-align: center; margin-top: 0.8rem; } .main .case { -webkit-box-sizing: border-box; box-sizing: border-box; } .main .case:nth-child(1) { margin-top: 0.8rem; } .main .case .content { position: relative; margin: 0 auto; width: 6.14rem; height: 3.77rem; float: unset !important; -webkit-transform: translateY(-28%); transform: translateY(-28%); } .main .case .content img { display: block; width: 6.14rem; height: 3.77rem; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .main .case .cover { float: unset !important; margin: 0 auto; width: 6.14rem; height: 3.77rem; } .main .case .cover img { display: block; width: 100%; height: 100%; } .footer { margin-top: 0; } }