.afterSales { margin-top: 50px; } .afterSales hr { width: 3vw; background-color: rgb(234 85 41); height: 3px; border-top: none; margin-top: 2vw; margin-bottom: 2vw; } .afterSales .swiper-container { width: 100%; margin: 0 auto; background-color: #e2e3ec; margin-top: 50px; padding: 0 0 60px 0; } .afterSales .swiper-slide { width: 98%; height: 100%; margin-left: -3px !important; background: none !important; border-radius: 10px; } .afterSales .swiper-slide img { width: 100%; cursor: pointer; border-radius: 10px; box-shadow: 0px 5px 8px #a0a0a0; transition: 300ms; transform: scale(0.85); } .afterSales .swiper-slide-active img, .swiper-slide-duplicate-active img { transform: scale(1); } .afterSales .swiper-pagination-custom { bottom: 40px; left: 0; width: 100%; } .afterSales .swiper-pagination-bullet { width: 32px !important; height: 6px !important; border-radius: 10px !important; display: inline-block !important; background: #a0a0a0 !important; z-index: 10 !important; margin-left: 10px !important; opacity: 1 !important; } .afterSales .swiper-pagination-bullet-active { background-color: #ea5529 !important; } .afterSales h2 { font-weight: bolder; margin-top: 2vw; margin-bottom: 2vw; } .afterSales-Banner { background-image: url(https://static.bodor.com/images/aftersales2022/banner-service.webp); background-repeat: no-repeat; background-size: cover; padding: 12vw 0 20vw 0; } .afterSales-Banner h1 { color: #ee7820; font-size: 70px; font-weight: bolder; letter-spacing: 4px; line-height: 100px; } .afterSales-Banner h3 { color: #fff; } .afterSales-Service { background-color: #e2e3ec; padding: 5vw 0 5vw 0; } .afterSales-Online { background-color: #f1f4ff; padding: 6vw 0 6vw 0; } .afterSales-Online-block{ position: absolute; background-color: #000; opacity: 0.6    ; height: 100%; z-index: 20; top: 0px; display: none; } .afterSales-Online-card-box{ display: flex; } .afterSales-Online-card { background-color: #fff; padding: 40px 0; margin: 30px; flex: 1; border-radius: 10px; cursor: pointer; border: 2px solid #fff; } .afterSales-Online-card:hover{ box-shadow: 0px 5px 8px #a0a0a0; border-bottom: 3px solid #ea5529; border-bottom: 30%; } .afterSales-Online-card p { margin-top: 10px; margin-bottom: 10px; } .afterSales-Online-card img { width: 50%; } .afterSales-Online-card-box-notification{ display: none; position: absolute; top: 2%; background-color: #fff; padding: 1vw 0 1vw 0; border-radius: 15px; z-index: 25; } .close-card-box-notification{ font-size: 1vw; border-style: none; background: none; text-align: right; color: #b9b9b9; } .afterSales-Online-card-ticket-notification .form-group{ display: flex!important; font-size: 16px; margin-bottom: 10px!important; } .afterSales-Online-card-ticket-notification .form-group .form-style{ display: inline-block; width: 70%; padding: 3px 12px; border-radius: 4px; border: 1.5px solid rgb(146 145 145); position:absolute; right: 0; border-left: 3px solid #ff6448 !important } .afterSales-Online-card-ticket-notification label{ font-size: 18px; } .afterSales-Online-card-ticket-notification, .afterSales-Online-card-telephone-notification{ display: none; } .afterSales-Online-card-telephone-notification{ padding: 2vw 0 5vw 0; } .afterSales-Center{ background-color: #e4e5ee; padding: 5vw 0 5vw 0; } .afterSales-Center img{ width: 100%; margin-top: 50px; } @media screen and (min-width: 1200px) and (max-width: 1500px) { .afterSales .swiper-slide img{ width: 80%; } .afterSales-Online-card{ margin: 10px; } } @media only screen and (max-width: 500px){ .afterSales hr { width: 12vw; height: 2px; margin-top: 5vw; margin-bottom: 5vw; } .afterSales-Banner { background-image: url(https://static.bodor.com/images/aftersales2022/banner-service-m.webp); padding: 30vw 0 90vw 0; } .afterSales-Banner h1{ font-size: 40px; } .afterSales-Service,.afterSales-Online{ padding: 20vw 0 15vw 0; } .afterSales-Online-card-box{ clear: both; display: inline-block; } .afterSales-Online-card { margin: 20px; display: flex; } .afterSales-Online-card-email a{ display: flex; } .afterSales-Online-card img{ width: 20%; margin: auto 30px; } .close-card-box-notification{ font-size: 6vw; border-style: none; background: none; text-align: right; color: #b9b9b9; } .afterSales-Online-card-ticket-notification .form-group{ display: block!important; font-size: 16px; margin-bottom: 10px!important; } .afterSales-Online-card-ticket-notification .form-group .form-style{ display: block; width: 100%; padding: 3px 12px; border-radius: 4px; border: 1.5px solid rgb(146 145 145); position:relative; right: 0; border-left: 3px solid #ff6448 !important } .afterSales-Online-card-ticket-notification label{ font-size: 16px; display: block; } }