| .innerhero__pic--acid{ |
| right: -182px; |
| top: -10px; |
| } |
| .acid1 { |
| padding-top: 13rem; |
| padding-bottom: 13rem; |
| } |
| .acid1__h2 { |
| max-width: 700px; |
| padding-bottom: 7rem; |
| } |
| .acid1__wrap { |
| justify-content: space-between; |
| } |
| .acid1__item { |
| width: calc(100% / 3 - 60px); |
| } |
| .acid1__title { |
| font-weight: 700; |
| line-height: 24px; |
| padding-left: 38px; |
| background: url(../img/features/icon-check-ok.svg) left center no-repeat; |
| background-size: 24px; |
| } |
| |
| .acid2 { |
| } |
| .acid2__h2 { |
| font-size: 3.2rem; |
| line-height: 1.3; |
| font-weight: 400; |
| } |
| .acid2__main { |
| flex-grow: 1; |
| max-width: 630px; |
| padding-right: 5rem; |
| } |
| .acid2__main p:not(:last-child){ |
| margin-bottom: 1rem; |
| } |
| .acid2__subtitle { |
| padding-top: 8rem; |
| font-weight: 700; |
| } |
| .acid2__right { |
| margin-left: auto; |
| width: 546px; |
| flex-shrink: 0; |
| } |
| .acid2__funcimg { |
| display: block; |
| width: 100%; |
| height: auto; |
| } |
| |
| |
| .acid3 { |
| padding-bottom: 1rem; |
| } |
| .acid3__wrap { |
| justify-content: space-between; |
| } |
| .acid3__col { |
| width: calc(50% - 4rem); |
| } |
| .acid3__collead{ |
| max-width: 400px; |
| } |
| .acid3__col .h5 { |
| font-weight: 700; |
| } |
| .acid3__small{ |
| max-width: 575px; |
| } |
| .acid3__small p:not(:last-child){ |
| margin-bottom: 1rem; |
| } |
| .acid3__detwrap{ |
| margin-top: 2rem; |
| height: 0; |
| transition: height 0.3s ease; |
| overflow: hidden; |
| } |
| .acid3__detlink { |
| margin-top: 2rem; |
| text-decoration: none; |
| border-bottom: 1px dotted var(--blue); |
| display: inline-block; |
| } |
| .acid3__detlink::after{ |
| content: ""; |
| display: inline-block; |
| position: relative; |
| margin-left: 6px; |
| width: 10px; |
| height: 10px; |
| background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%230070CC' d='M441.9 167.3l-19.8-19.8c-4.7-4.7-12.3-4.7-17 0L224 328.2 42.9 147.5c-4.7-4.7-12.3-4.7-17 0L6.1 167.3c-4.7 4.7-4.7 12.3 0 17l209.4 209.4c4.7 4.7 12.3 4.7 17 0l209.4-209.4c4.7-4.7 4.7-12.3 0-17z'%3E%3C/path%3E%3C/svg%3E"); |
| background-repeat: no-repeat; |
| background-size: contain; |
| transition: transform 0.4s ease; |
| } |
| .acid3__detmore { |
| background: var(--grey); |
| border-radius: 1rem; |
| padding: 2rem 7rem 2rem 3rem; |
| position: relative; |
| } |
| .acid3__close { |
| position: absolute; |
| top: 2rem; |
| right: 2rem; |
| width: 30px; |
| height: 30px; |
| background: no-repeat; |
| border:none; |
| } |
| .acid3__close img{ |
| display: block; |
| width: 24px; |
| height: 24px; |
| margin: 0 auto; |
| transform-origin: center center; |
| transform: rotate(45deg); |
| cursor: pointer; |
| } |
| |
| |
| |
| |
| |
| |
| @media (max-width:1199px){ |
| .innerhero__pic--acid{ |
| width: 500px; |
| } |
| .acid1__item{ |
| width: calc(100% / 3 - 30px); |
| } |
| .acid2__right{ |
| width: 50%; |
| } |
| |
| } /* END MEDIA 1199px */ |
| |
| |
| |
| |
| |
| @media (max-width:992px){ |
| .innerhero__pic--acid{ |
| width: 400px; |
| } |
| |
| } /* END MEDIA 992px */ |
| |
| |
| |
| |
| |
| |
| @media (max-width:767px){ |
| .acid1{ |
| padding-top: 8rem; |
| padding-bottom: 6rem; |
| } |
| .acid1__h2{ |
| padding-bottom: 5rem; |
| } |
| .acid1__wrap{ |
| flex-flow: column nowrap; |
| align-items: stretch; |
| } |
| .acid1__item{ |
| width: auto; |
| padding-bottom: 4rem; |
| } |
| .acid1__title{ |
| font-size: 16px; |
| padding-left: 35px; |
| } |
| .acid1__text { |
| padding-top: 1.5rem; |
| } |
| .acid2__h2{ |
| font-size: 2.8rem; |
| } |
| .acid2__h2 br{ |
| display: none; |
| } |
| .acid2__wrap { |
| flex-flow: column nowrap; |
| align-items: stretch; |
| } |
| .acid2__main{ |
| padding-right: 0; |
| } |
| .acid2__subtitle{ |
| padding-top: 2rem; |
| } |
| .acid2__right{ |
| width: 100%; |
| padding-top: 3rem; |
| } |
| .acid3{ |
| padding-top: 8rem; |
| } |
| .acid3__wrap{ |
| flex-flow: column nowrap; |
| align-items: stretch; |
| } |
| .acid3__col{ |
| width: 100%; |
| padding-bottom: 4rem; |
| } |
| .acid3__col:last-child{ |
| padding-bottom: 0; |
| } |
| .acid3__small{ |
| padding-top: 3rem; |
| } |
| } /* END MEDIA 767px */ |