@media screen and (min-width: 992px) and (max-width: 1439px) { section[data-cattype="324"] .ct-item { width: 300px; height: 450px; } section[data-cattype="324"] .ct-orange { padding: 40px; } section[data-cattype="324"] .ct-clip{ margin-top: 20px !important; } } @media screen and (min-width: 1440px){ section[data-cattype="324"] .ct-item{ width: 397px; height: 574px; } } section[data-cattype="324"] .contact-wrapper{ position:relative; padding:40px 20px 0; } section[data-cattype="324"] .bg-step{ position: absolute; top: -80px; left: 0; width: min(42vw, 520px); z-index: 0; } section[data-cattype="324"] .bg-step img{ width: 100%; height: auto; display: block; } section[data-cattype="324"] .ct-clip{ overflow:hidden; width:100%; margin:0 auto; position:relative; z-index:1; transform: translateX(var(--shift-left, 0)); box-sizing: border-box; padding-top: 70px; } section[data-cattype="324"] .ct-grid{ --gap: 48px; --w: 397px; width: calc(5 * var(--w) + 4 * var(--gap)); display:flex; gap: var(--gap); flex-wrap: nowrap; margin: 0 auto; padding-top:50px; --s1: 50px; --s2: -35px; --s3: 16px; --s4: -84px; --s5: 12px; } section[data-cattype="324"] .ct-item:nth-child(1){ transform: translateY(var(--s1)); } section[data-cattype="324"] .ct-item:nth-child(2){ transform: translateY(var(--s2)); } section[data-cattype="324"] .ct-item:nth-child(3){ transform: translateY(var(--s3)); } section[data-cattype="324"] .ct-item:nth-child(4){ transform: translateY(var(--s4)); } section[data-cattype="324"] .ct-item:nth-child(5){ transform: translateY(var(--s5)); } section[data-cattype="324"] .contact-title{ color:#000; font-size:56px; font-weight:700; text-align:center; margin:60px 0 40px; position:relative; z-index:1; } section[data-cattype="324"] .help-word{ position:relative; display:inline-block; padding-bottom:.25em; } section[data-cattype="324"] .help-word .u{ position: absolute; left: 50%; bottom: 0.2em; transform: translateX(-50%); width: 5ch; height: auto; z-index: -1; pointer-events: none; opacity: 0.8; } section[data-cattype="324"] .ct-clip{ --shift-left: -200px; overflow:hidden; width:120vw; margin:0 auto; position:relative; z-index:1; transform: translateX(var(--shift-left)); box-sizing: border-box; } section[data-cattype="324"] .ct-grid{ --gap: 48px; --w: 397px; width: calc(5 * var(--w) + 4 * var(--gap)); display:flex; gap: var(--gap); flex-wrap: nowrap; margin: 0 auto; } section[data-cattype="324"] .ct-item{ overflow:hidden; box-sizing:border-box; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; } section[data-cattype="324"] .ct-item img{ width:110%; height:100%; object-fit:cover; display:block; } section[data-cattype="324"] .ct-orange{ background:linear-gradient(180deg, #F79206 0%, #FEDE95 100%); color:#fff; padding: 20px; } section[data-cattype="324"] .ct-brown{ background:linear-gradient(180deg, #D9BFA9 0%, #FEDE95 100%); color:#000; padding: 30px; } section[data-cattype="324"] .g-h3{ font-size:40px; line-height:1.15; margin:0 0 12px; } section[data-cattype="324"] .g-h4{ font-size:20px; margin:0 0 14px; } section[data-cattype="324"] .g-p{ max-width:330px; margin:10px auto 0; color: #333; text-align: justify; } section[data-cattype="324"] .btn{ background: linear-gradient(270deg, var(--g1), var(--g2), var(--g1)); background-size: 300% 300%; animation: softGradient 8s ease-in-out infinite; transition: transform .15s ease, background-position .3s ease; border: 0; color: #333; display:block; width:100%; margin:10px 0; font-weight: 400; line-height: 1.5; padding: 18px; border-radius: 10px; font-size: 16px; border: 1px solid rgba(255,255,255,0.3); } section[data-cattype="324"] .ct-brown .btn:nth-of-type(1){ --g1:#FAF3E0; --g2:#FFD97D; } section[data-cattype="324"] .ct-brown .btn:nth-of-type(2){ --g1:#FFD97D; --g2:#FFA6A6; } section[data-cattype="324"] .ct-brown .btn:nth-of-type(3){ --g1:#FFA6A6; --g2:#FEDE95; } @keyframes softGradient{ 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } section[data-cattype="324"] .btn:hover, section[data-cattype="324"] .btn:focus{ background: #dc661d; border-color: #dc661d; color: #fff; } section[data-cattype="324"] a.g-p{ text-decoration: underline; } section[data-cattype="324"] a.g-p:hover, section[data-cattype="324"] a.g-p:active { color: #dc661d; } @media (max-width: 768px){ #ContactForm { padding-top: 0; } section[data-cattype="324"] .contact-wrapper{ position: relative; padding: 80px 16px 56px; } section[data-cattype="324"] .bg-step{ position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; } section[data-cattype="324"] .bg-step img{ width: 100%; height: 100%; object-fit: cover; display: block; opacity: 30%; } section[data-cattype="324"] .contact-title, section[data-cattype="324"] .ct-clip{ position: relative; z-index: 1; font-size: 28px; } section[data-cattype="324"] .ct-item:nth-child(2) { transform: none; width: 100%; } section[data-cattype="324"] .ct-item:nth-child(3) { transform: none; width: 100%; } section[data-cattype="324"] .ct-item:nth-child(1), section[data-cattype="324"] .ct-item:nth-child(4), section[data-cattype="324"] .ct-item:nth-child(5){ display: none; } section[data-cattype="324"] .ct-clip{ width: 100%; padding-top: 0; transform: none; } section[data-cattype="324"] .ct-grid{ display: block; width: 100%; margin: 0; padding-top: 0; } section[data-cattype="324"] .ct-orange, section[data-cattype="324"] .ct-brown{ background: transparent; padding: 0; text-align: center; color: #222; } section[data-cattype="324"] .contact-title{ -webkit-text-stroke: 1px #fff; paint-order: stroke fill; } section[data-cattype="324"] .ct-item{ height: auto; } section[data-cattype="324"] .g-h3{ font-size: 22px; margin: 0; margin-top: 20px; } section[data-cattype="324"] .g-p{ margin: 0 0 18px; font-size: 18px; padding-top: 15px; text-align:center; } section[data-cattype="324"] .g-h4{ font-size: 20px; margin: 12px 0 10px; } section[data-cattype="324"] .btn{ width: min(88vw, 360px); margin: 10px auto; padding: 14px 16px; border-radius: 10px; border: 0; color: #333; } section[data-cattype="324"] .btn{ background: linear-gradient(270deg, var(--g1), var(--g2), var(--g1)); background-size: 300% 300%; animation: softGradient 8s ease-in-out infinite; transition: transform .15s ease; border: 0; color: #333 } section[data-cattype="324"] .btn:active{ transform: scale(.985); } section[data-cattype="324"] .ct-brown .btn:nth-of-type(1){ --g1: #FAF3E0; --g2: #FFD97D; } section[data-cattype="324"] .ct-brown .btn:nth-of-type(2){ --g1: #FFD97D; --g2: #FFA6A6; } section[data-cattype="324"] .ct-brown .btn:nth-of-type(3){ --g1: #FFA6A6; --g2: #FEDE95; } @keyframes softGradient{ 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } @media (prefers-reduced-motion: reduce){ section[data-cattype="324"] .btn{ animation: none; } } } @media (max-width: 768px){ section[data-cattype="324"] .bg-step{ position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; background: #fff; } section[data-cattype="324"] .bg-step img{ width: 100%; height: 100%; object-fit: contain; object-position: center; display: block; opacity: .3; } #HeretoHelp { padding-top: 0; padding-bottom: 0; } } @media(max-width:1450px){ section[data-cattype="324"] .bg-step img width: 71%; } section[data-cattype="324"] .contact-title{ margin:0; } section[data-cattype="324"] .ct-grid{ padding-top: 0; } }