* { margin: 0; padding: 0; } .header { height: 64px; background-color: #3366df; } .footer { min-width: 100%; padding: 28px 0; text-align: center; font-size: 16px; line-height: 20px; color: #fff; background-color: #3366df; } .main { padding: 100px; background: url(../img/panel-bg08.jpg) center top no-repeat; background-size: cover; } .main .title { text-align: center; } .main .title h2{ font-size: 35px; } .main .title h4 { display: inline-block; color: #3366df; border-bottom: 3px solid #3366df; height: 28px; line-height: 28px; font-weight: 600; text-align: center; border-radius: 3px; white-space: nowrap; text-transform: uppercase; margin-top: 5px; } .main .title p { text-indent: 2em; display: block; margin: 20px auto; text-align: justify; max-width: 1200px; } .content { max-width: 1200px; margin: 20px auto; padding: 50px 0; border: 5px solid #3366df; border-radius: 0 100px; display: flex; justify-content: space-around; box-shadow: 10px 10px 10px #3366df; } .content-img { display: inline-block; } .content-img img { max-width: 300px; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 0 50px; overflow: hidden; } .content-text { max-width: 725px; display: inline-block; } .content-text h3 { margin-top: 20px; } .content-text h4 { margin-top: 20px; } .content-text p { text-align: justify; margin-top: 20px; } @media screen and (max-width: 1000px) { .main { padding: 20px; background: url(../img/2.jpg) center top no-repeat; background-size: cover; } .content { max-width: 1200px; margin: 10px auto; padding: 30px 15px 60px; display: block; border: 5px solid #3366df; border-radius: 0 100px; box-shadow: 10px 10px 10px #3366df; } .content-img { display: block; } .content-img img { max-width: 100px; /* border: 4px solid rgb(5, 5, 25); */ border-radius: 50px 50px; overflow: hidden; border: 1px solid rgba(0, 0, 0, 0.2); } .content-text { max-width: 1000px; display: block; } .content-text h3 { margin-top: 15px; } .content-text h4 { margin-top: 15px; } .content-text p { margin-top: 15px; } }