html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } :focus { outline: 0; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-decoration, input[type=search]::-webkit-search-results-button, input[type=search]::-webkit-search-results-decoration { -webkit-appearance: none; } input[type=search] { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } textarea { overflow: auto; vertical-align: top; resize: vertical; } audio, canvas, video { display: inline-block; max-width: 100%; } audio:not([controls]) { display: none; height: 0; } [hidden] { display: none; } html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } a:focus { outline: thin dotted; } a:active, a:hover { outline: 0; } img { border: 0; -ms-interpolation-mode: bicubic; } figure { margin: 0; } form { margin: 0; } fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; } legend { border: 0; padding: 0; white-space: normal; margin-left: -7px; } button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; vertical-align: middle; } button, input { line-height: normal; } button, select { text-transform: none; } button, html input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; overflow: visible; } button[disabled], html input[disabled] { cursor: default; } input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; height: 13px; width: 13px; } input[type="search"] { -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; } input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } textarea { overflow: auto; vertical-align: top; } table { border-collapse: collapse; border-spacing: 0; } html, button, input, select, textarea { color: #222; } ::-moz-selection { background: #b3d4fc; text-shadow: none; } ::selection { background: #b3d4fc; text-shadow: none; } img { vertical-align: middle; } fieldset { border: 0; margin: 0; padding: 0; } textarea { resize: vertical; } .chromeframe { margin: 0.2em 0; background: #ccc; color: #000; padding: 0.2em 0; } :root { --max-width-size: 1920px; --marginSideSize: 17.75rem; --marginSideSize2: 32rem; --marginSideSizeR: 5.84rem; --marginSideSizeL: 18rem; --background1: #FFFFFF; --background2: #EDE3D7; --footer-back-color: #222832; --footer-border-color: #CBC1BC; --footer-pen-color1: #4462DA; --footer-pen-color2: #FFFFFF; --footer-pen-color3: #000000; --footer-pen-color4: #203AA1; --background-button-color: #203AA1; --background-button-select-color: #142566; --background-button-hover-color: #1B3188; --carousel-color: #946C3B; --abi: #0033A1; --Charcot-Gray: #222832; --grid-margin: 50px; --grid-margin2: 20px; --grid-margin4: 50px; --grid-margin3: 90%; --border-radius: 1.5rem; --border-radius2: 0.8rem; --grid-margin5: 2rem; --grid-margin6: 1rem; --articleWidth: 65%; } @media only screen and (min-width:0px) and (max-width:500px) and (orientation:portrait) and (pointer: coarse) { :root { --grid-margin: 10px; --border-radius: 1rem; } } @font-face { font-family: 'TTH Pro'; src: url('/font/TTHPTRegular.woff2') format('woff2'), url('/font/TTHPTRegular.woff') format('woff'), url('/font/TTHPTRegular.ttf') format('truetype'); font-weight: 400; font-style: normal; } @font-face { font-family: 'TTH Pro'; src: url('/font/TTHPTDemiBold.woff2') format('woff2'), url('/font/TTHPTDemiBold.woff') format('woff'), url('/font/TTHPTDemiBold.ttf') format('truetype'); font-weight: 600; font-style: normal; } ::selection { background: #203AA1; color: #fff; text-shadow: none; } html { font-size: 16px; font-family: 'TTH Pro' !important; /* text-align: justify; */ /* scroll-behavior: smooth; */ scroll-padding-top: 0; overflow: auto; direction: ltr; scrollbar-width: 2rem; } @media only screen and (min-width:0px) and (max-width:500px) and (orientation:portrait) and (pointer: coarse) { html { --device: mobileP; font-size: clamp(0px, 3.80952380952381vw, 16px); scrollbar-width: none; -ms-overflow-style: none; } } @media only screen and (min-width:0px) and (max-width:900px) and (orientation:landscape) and (pointer: coarse) { html { --device: mobileL; font-size: clamp(0px, 1.3vw, 16px); scrollbar-width: none; -ms-overflow-style: none; } } @media only screen and (min-width:501px) and (max-width:2500px) and (orientation:portrait) and (pointer: coarse) { html { --device: tabletP; font-size: clamp(0px, 0.64vw, 16px); scrollbar-width: none; -ms-overflow-style: none; } } @media only screen and (min-width:901px) and (max-width:2900px) and (orientation:landscape) and (pointer: coarse) { html { --device: tabletL; font-size: clamp(0px, 0.5517241379310345vw, 16px); scrollbar-width: none; -ms-overflow-style: none; } } @media only screen and (pointer: fine) { html { font-size: clamp(0px, 0.8333333333333333vw, 16px); } @media only screen and (orientation:landscape) { html { --device: desktopL; scrollbar-width: auto; -ms-overflow-style: none; } } @media only screen and (orientation:portrait) { html { --device: desktopP; scrollbar-width: auto; -ms-overflow-style: none; } } @media only screen and (min-width:0px) and (max-width:1024px) { :root { --marginSideSize: 10rem; --marginSideSize2: 20rem; --articleWidth: 60%; } } } * { font-family: 'TTH Pro' !important; } *:focus-visible { transition: none !important; outline: 4px solid var(--background-button-color) !important; outline-offset: 8px; z-index: 1000; } body { position: relative; } .paddingBigFirstPage { padding-left: calc(((100% - min(100%, var(--max-width-size))) / 2) + var(--marginSideSizeL)) !important; padding-right: calc(((100% - min(100%, var(--max-width-size))) / 2) + var(--marginSideSizeR)) !important; padding-top: 6.13rem; } .paddingBigFirstPage2 { padding-left: calc(((100% - min(100%, var(--max-width-size))) / 2)) !important; padding-right: calc(((100% - min(100%, var(--max-width-size))) / 2)) !important; padding-top: 6.13rem; } .paddingBig { padding-left: calc(((100vw - min(100vw, var(--max-width-size))) / 2) + var(--marginSideSize)) !important; padding-right: calc(((100vw - min(100vw, var(--max-width-size))) / 2) + var(--marginSideSize)) !important; box-sizing: border-box !important; } .paddingBig2 { padding-left: calc(((100vw - min(100vw, var(--max-width-size))) / 2)) !important; padding-right: calc(((100vw - min(100vw, var(--max-width-size))) / 2)) !important; box-sizing: border-box !important; } .paddingBig3 { padding-left: calc(((100vw - min(100vw, var(--max-width-size))) / 2) + var(--marginSideSize2)) !important; padding-right: calc(((100vw - min(100vw, var(--max-width-size))) / 2) + var(--marginSideSize2)) !important; } .paddingBig4 { padding-left: calc(((100vw - min(100vw, var(--max-width-size))) / 2) + (var(--marginSideSize) / 2)) !important; padding-right: calc(((100vw - min(100vw, var(--max-width-size))) / 2) + (var(--marginSideSize) / 2)) !important; } @media only screen and (min-width:0px) and (max-width:500px) and (orientation:portrait) and (pointer: coarse) { .paddingBig, .paddingBig3, .paddingBig4 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; } .paddingBig2 { padding-left: 0 !important; padding-right: 0 !important; } .paddingBigFirstPage { padding-left: 1.5rem !important; padding-right: 1.5rem !important; padding-top: 0; } .paddingBigFirstPage2 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; padding-top: 0; } } .h1Top { padding: 2.6rem 0 4rem; } @media only screen and (min-width:0px) and (max-width:500px) and (orientation:portrait) and (pointer: coarse) { .h1Top { padding: 2.6rem 0 2rem; } } h1 { box-sizing: border-box; font-size: 1.125rem; line-height: 1.375rem; font-weight: 600; color: var(--footer-pen-color4); display: flex; flex-direction: column; } h1 em { padding-top: 1rem; font-size: 3.875rem; font-weight: 600; line-height: 4.375rem; color: var(--footer-pen-color3); box-sizing: border-box; display: block; position: relative; } h1 em>span { font-size: 4rem; color: var(--footer-pen-color4); } @media only screen and (min-width:0px) and (max-width:500px) and (orientation:portrait) and (pointer: coarse) { h1 em { font-size: 1.875rem; line-height: 2.125rem; } h1 em>span { font-size: 2rem; } } .fadeIn { opacity: 1 !important; -webkit-transition: all 0.8s ease; -moz-transition: all 0.8s ease; -o-transition: all 0.8s ease; transition: all 0.8s ease; } main { /* padding-top: 6.13rem; */ } main.noPadding { padding-top: 0rem; } header.firstPage+main { padding-top: 0rem; } @media only screen and (min-width:0px) and (max-width:500px) and (orientation:portrait) and (pointer: coarse) { main { overflow: hidden; } header.firstPage+main { padding-top: 4.46rem; } } b { font-weight: bold; } main { width: 100%; } .firstSlide { background-color: #F0EDEB; overflow-x: hidden; width: 100%; height: 100vh; box-sizing: border-box; position: sticky; top: 0; left: 0; /* display: flex; justify-content: flex-start; */ align-content: center; } .firstSlide::after { content: ''; width: 100%; height: 100svh; background: linear-gradient(180deg, rgb(237, 227, 215) 0%, rgb(237, 227, 215) 6%, rgba(237,227,215,0.73) 22%, rgba(237,227,215,0.73) 100%); position: absolute; left: 0; top: 0; } .firstSlide a.bt { position: absolute; right: 15rem; bottom: 10rem; z-index: 1; } .firstSlide video { z-index: 0; position: absolute; top: 0; left: 0; width: 100%; height: 100svh; object-fit: cover; } .firstSlide>h1 { z-index: 2; display: inline-flex; flex-direction: column; position: relative; padding-bottom: 5rem; } .firstSlide>h1>span.t1 { display: none; } .firstSlide.loadCompleted>h1>span.t1 { display: block; /* flex-direction: column; */ color: var(--Charcot-Gray, var(--charcot, #222832)); font-family: 'TTH Pro' !important; font-size: 8.5rem; font-style: normal; font-weight: 600; line-height: 8.625rem; opacity: 0; animation: draw5 1.2s ease 0.5s 1; animation-fill-mode: forwards; position: relative; } html[lang="Fr"] .firstSlide.loadCompleted>h1>span.t1 { font-size: 4.5rem; line-height: 4.625rem; } @keyframes draw5 { 0% { opacity: 0; } 100% { opacity: 1; } } .firstSlide>h1>span.t1::after { content: ''; clip-path: polygon(calc(var(--S)) calc(0px), calc(var(--S)) calc(var(--S)), 0 calc(var(--S)), calc((var(--S) * 4) / 10) calc((var(--S) * 6) / 10), calc((var(--S) * 6) / 10) calc((var(--S) * 6) / 10), calc((var(--S) * 6) / 10) calc((var(--S) * 4) / 10)); background-color: #203AA1; position: absolute; width: var(--S); height: var(--S); display: inline-block; right: -2.75rem; bottom: -2.75rem; box-sizing: border-box; } .firstSlide>h1>span.t1>span { display: none; } .firstSlide.loadCompleted>h1>span.t1>span { display: initial; font-size: 8.5rem; font-style: normal; font-weight: 600; line-height: 8.625rem; color: var(--primary-principal, #203AA1); } html[lang="Fr"] .firstSlide.loadCompleted>h1>span.t1>span { font-size: 4.5rem; line-height: 4.625rem; } @keyframes draw4 { 0% { margin-left: 2rem; } 100% { margin-left: 0.5px; } } .firstSlide>h1>span.t2 { display: none; } .firstSlide.loadCompleted>h1>span.t2 { display: initial; color: var(--Primary-Principal-5---Bouton, var(--primary-principal, #203AA1)); font-size: 0.875rem; font-style: normal; font-weight: 400; line-height: 2rem; position: absolute; bottom: 0; left: 1rem; opacity: 0; animation: draw3 0.5s ease 2s 1; animation-fill-mode: forwards; } @keyframes draw3 { 0% { opacity: 0; } 100% { opacity: 1; } } .firstSlide>h1>span.t2::after { content: 'SCROLL'; background-image: url(/image/arrowB.svg); background-repeat: no-repeat; background-size: 0.75rem 0.75rem; background-position: right bottom; width: 4.5rem; height: 2rem; position: absolute; bottom: -0.65rem; left: 0; animation: scrollAnim2 5s linear 0s infinite forwards; } html[lang="Fr"] .firstSlide>h1>span.t2::after { content: 'Défiler'; } @keyframes scrollAnim2 { 0%, 100%, 20%, 50%, 80% { background-position: right 0.6rem; /* transform: translateY(0) */ } 40% { background-position: right calc(0.6rem - 7px); /* transform: translateY(-7px) */ } 60% { background-position: right calc(0.6rem - 5px); /* transform: translateY(-5px) */ } } .firstSlide>h1>span.t2:before { content: unset; } .firstSlide>h1::before { content: unset; } .firstSlide>div>h1::after { content: unset; } @media only screen and (min-width:0px) and (max-width:500px) and (orientation:portrait) and (pointer: coarse) { .firstSlide { position: relative; height: 30rem; padding-left: 0 !important; padding-right: 0 !important; } .firstSlide::after { height: 100%; } .firstSlide video { width: 100%; height: 30rem; z-index: 0; } .firstSlide a.bt { right: unset; left: 1rem; bottom: 3rem; } .firstSlide.loadCompleted>h1 { height: 7.75rem; margin: 3.61rem 1.25rem 7.6rem; box-sizing: border-box; padding: 0; } .firstSlide.loadCompleted>h1>span.t1 { font-size: 3.5rem; line-height: 3.875rem; } html[lang="Fr"] .firstSlide.loadCompleted>h1>span.t1 { font-size: 2.5rem; line-height: 2.625rem; } .firstSlide>h1>span.t1::after { clip-path: polygon(calc(var(--S2)) calc(0px), calc(var(--S2)) calc(var(--S2)), 0 calc(var(--S2)), calc((var(--S2) * 4) / 10) calc((var(--S2) * 6) / 10), calc((var(--S2) * 6) / 10) calc((var(--S2) * 6) / 10), calc((var(--S2) * 6) / 10) calc((var(--S2) * 4) / 10)); width: var(--S2); height: var(--S2); right: -1rem; bottom: -3rem; } .firstSlide.loadCompleted>h1>span.t1>em { font-size: 3.5rem; line-height: 3.875rem; padding: 0; } .firstSlide.loadCompleted>h1>span.t1>span { font-size: 3.5rem; line-height: 3.875rem; } html[lang="Fr"] .firstSlide.loadCompleted>h1>span.t1>span { font-size: 2.5rem; line-height: 2.625rem; } .firstSlide.loadCompleted>h1>span.t2 { bottom: 0rem; left: -2.5rem; } .firstSlide.loadCompleted>h1>span.t2::after { content: unset; } html[lang="Fr"] .firstSlide.loadCompleted>h1>span.t2::after { content: unset; } .firstSlide.loadCompleted>h1>span.t2:before { width: 5.3rem; bottom: -4.72rem; left: 3.5rem; background-size: 5.3rem auto; } @keyframes draw2 { 0% { opacity: 0; bottom: -5.1rem; } 100% { opacity: 1; bottom: -4.72rem; } } .firstSlide.loadCompleted>h1::before { width: 2rem; height: 10rem; bottom: -1rem; left: -0.5rem; --wA: 2rem; --hA: 10rem; --kA: 8rem; --zA: 1.2px; } .firstSlide.loadCompleted>h1::after { width: 2rem; height: 5.5rem; bottom: -5rem; left: 3.5rem; --wA: 2rem; --hA: 5.5rem; --kA: 3.5rem; --zA: 1.2px; } } @media only screen and (min-width:501px) and (max-width:2500px) and (pointer: coarse) { .firstSlide { position: relative; height: 100svh; /* padding-left: 0 !important; */ /* padding-right: 0 !important; */ } } .team { width: 100%; height: 100vh; display: inline-flex; flex-direction: row; align-items: center; justify-content: flex-start; box-sizing: border-box; position: relative; /* top: 0; left: 0; */ background-color: #fff; } .team>div { display: inline-flex; flex-direction: column; justify-content: center; margin-bottom: 5rem; } .team>div>h2::after { content: ''; clip-path: polygon(calc(var(--S)) calc(0px), calc(var(--S)) calc(var(--S)), 0 calc(var(--S)), calc((var(--S) * 4) / 10) calc((var(--S) * 6) / 10), calc((var(--S) * 6) / 10) calc((var(--S) * 6) / 10), calc((var(--S) * 6) / 10) calc((var(--S) * 4) / 10)); background-color: #203AA1; width: calc(100% - var(--articleWidth)); /* position: -webkit-sticky; */ position: absolute; width: var(--S); height: var(--S); display: inline-block; right: -2.75rem; top: -2.25rem; box-sizing: border-box; rotate: -90deg; } .team>div>h2 { color: var(--black, #000); font-family: 'TTH Pro'; font-size: 1.375rem; font-style: normal; font-weight: 600; line-height: 1.25rem; margin-bottom: 2.94rem; position: relative; width: 50rem; } .team>div>p { color: var(--black, #000); font-family: 'TTH Pro'; font-size: 8.5rem; font-style: normal; font-weight: 600; line-height: 8.625rem; margin-bottom: 3rem; position: relative; display: inline-flex; flex-direction: column; } .team>div>p>span.part1 { padding-left: calc(6rem + (var(--ratio) * 4rem)); } .team>div>p>span.part2 { padding-left: calc(6rem - (var(--ratio) * 6rem)); } @media only screen and (min-width:0px) and (max-width:500px) and (orientation:portrait) and (pointer: coarse) { .team { height: unset; } .team>div { margin-bottom: 3.75rem; width: 100%; } .team>div>h2 { margin-bottom: 1.5rem; margin-top: 3rem; width: 100%; } .team>div>h2::after { content: ''; clip-path: polygon(calc(var(--S2)) calc(0px), calc(var(--S2)) calc(var(--S2)), 0 calc(var(--S2)), calc((var(--S2) * 4) / 10) calc((var(--S2) * 6) / 10), calc((var(--S2) * 6) / 10) calc((var(--S2) * 6) / 10), calc((var(--S2) * 6) / 10) calc((var(--S2) * 4) / 10)); background-color: #203AA1; width: calc(100% - var(--articleWidth)); /* position: -webkit-sticky; */ position: absolute; width: var(--S2); height: var(--S2); display: inline-block; right: 0; top: 0; box-sizing: border-box; rotate: -90deg; } .team>div>p { font-size: 3.5rem; line-height: 3.875rem; margin-bottom: 2rem; } .team>div>p::after { background-size: 6.375rem auto; width: 6.375rem; height: 2.0625rem; left: unset; bottom: 1rem; right: 0; } .team>div>p>span.part1 { padding-left: 0; } .team>div>p>span.part2 { padding-left: 0; } } @media only screen and (min-width:501px) and (max-width:2500px) and (pointer: coarse) { .team { height: unset; } .team>div { margin-bottom: 3.75rem; width: 100%; } .team>div>h2 { margin-bottom: 1.5rem; margin-top: 3rem; } .team>div>p { font-size: 8.5rem; line-height: 10rem; margin-bottom: 2rem; } .team>div>p>span.part1 { padding-left: calc(6rem + (var(--ratio) * 4rem)); } .team>div>p>span.part2 { padding-left: calc(6rem - (var(--ratio) * 6rem)); } } .latestNews { width: 100%; height: 100vh; display: inline-flex; flex-direction: column; justify-content: center; box-sizing: border-box; position: sticky; top: 0; left: 0; background: #EDE3D7; } .latestNews>h2 { color: var(--charcot, #222832); font-family: 'TTH Pro'; font-size: 3.875rem; font-style: normal; font-weight: 600; line-height: 4.375rem; margin-bottom: 2rem; } .latestNews>ol>li>a { opacity: 0.4 !important; } .latestNews.show>ol>li>a { opacity: 1 !important; } .latestNews.active>ol>li:nth-child(1)>a { opacity: 1 !important; -webkit-transition: all 0.5s ease 0.5s; -moz-transition: all 0.5s ease 0.5s; -o-transition: all 0.5s ease 0.5s; transition: all 0.5s ease 0.5s; } .latestNews.active>ol>li:nth-child(2)>a { opacity: 1 !important; -webkit-transition: all 0.5s ease 1.5s; -moz-transition: all 0.5s ease 1.5s; -o-transition: all 0.5s ease 1.5s; transition: all 0.5s ease 1.5s; } .latestNews.active>ol>li:nth-child(3)>a { opacity: 1 !important; -webkit-transition: all 0.5s ease 2.5s; -moz-transition: all 0.5s ease 2.5s; -o-transition: all 0.5s ease 2.5s; transition: all 0.5s ease 2.5s; } @media only screen and (min-width:0px) and (max-width:500px) and (orientation:portrait) and (pointer: coarse) { .latestNews { width: 100%; height: unset; position: relative; padding-top: 3rem; } .latestNews>h2 { font-size: 2.375rem; line-height: 2.625rem; } .latestNews>ol>li>a { gap: 0; opacity: 1; } } @media only screen and (min-width:501px) and (max-width:2500px) and (pointer: coarse) { .latestNews { width: 100%; height: unset; position: relative; padding-top: 10rem; padding-bottom: 10rem; } } .weAre { width: 100%; height: 100vh; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; box-sizing: border-box; position: sticky; top: 0; left: 0; background-color: #fff; } .weAre::before { content: ''; clip-path: polygon(calc(var(--S)) calc(0px), calc(var(--S)) calc(var(--S)), 0 calc(var(--S)), calc((var(--S) * 4) / 10) calc((var(--S) * 6) / 10), calc((var(--S) * 6) / 10) calc((var(--S) * 6) / 10), calc((var(--S) * 6) / 10) calc((var(--S) * 4) / 10)); background-color: #203AA1; position: absolute; rotate: -45deg; width: var(--S); height: var(--S); display: inline-block; /* left: calc(-1 * ((var(--S) * 4) / 10)); bottom: calc(-1 * ((var(--S) * 4) / 10)); */ box-sizing: border-box; top: calc(50vh - 20rem); left: calc(50vw + 5rem - 3.375rem); } .weAre>div.weAre1 { width: 100%; display: inline-flex; flex-direction: row; align-items: flex-start; justify-content: space-between; gap: 9.38rem; box-sizing: border-box; } .weAre>div.weAre1>div { width: 50%; display: inline-flex; flex-direction: column; justify-content: center; } .weAre>div.weAre1>div>h2 { color: var(--black, #000); font-size: 1.375rem; font-style: normal; font-weight: 600; line-height: 1.25rem; margin-bottom: 3rem; } .weAre>div.weAre1>div>p { color: var(--black, #000); font-size: 8rem; font-style: normal; font-weight: 600; line-height: 8.625rem; position: relative; } html[lang="Fr"] .weAre>div.weAre1>div>p { font-size: 7rem; line-height: 7.625rem; } .weAre>div.weAre1>img { height: 50rem; aspect-ratio: 600 / 800; padding-bottom: 2.8rem; box-sizing: border-box; } .weAre>div.weAre2 { width: 100%; display: inline-flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 9.38rem; box-sizing: border-box; opacity: 0; position: absolute; left: -100%; } .weAre>div.weAre2>div { width: 50%; display: inline-flex; flex-direction: column; justify-content: center; position: relative; } .weAre>div.weAre2>div>h2 { color: var(--black, #000); font-family: 'TTH Pro'; font-size: 3rem; font-style: normal; font-weight: 600; line-height: 4rem; margin-bottom: 2rem; padding-bottom: 2rem; border-bottom: 1px solid #AFB2B5; } html[lang="Fr"] .weAre>div.weAre2>div>h2 { font-size: 2.875rem; line-height: 3.375rem; } .weAre>div.weAre2>div>p { color: var(--black, #000); font-family: 'TTH Pro'; font-size: 1.25rem; font-style: normal; font-weight: 400; line-height: 1.5rem; margin-bottom: 2rem; } .weAre>div.weAre2>img { height: 50rem; aspect-ratio: 600 / 800; padding-bottom: 2.8rem; box-sizing: border-box; } /* waitTime */ .weAre>div.weAre1.hidden { animation: hiddenWeAre 0.5s ease-in-out 0.5s 1 forwards; } @keyframes hiddenWeAre { 0% { opacity: 1; position: relative; left: 0; } 99% { opacity: 0; position: relative; left: 0; } 100% { opacity: 0; position: absolute; left: -100%; } } /* waitTime */ .weAre>div.weAre1.hidden+div.weAre2 { animation: showWeAre 1s ease-in-out 1s 1 forwards; } @keyframes showWeAre { 0% { opacity: 0; position: absolute; left: -100%; } 1% { opacity: 0; position: relative; left: 0; } 100% { opacity: 1; position: relative; left: 0; } } @media only screen and (min-width:0px) and (max-width:500px) and (orientation:portrait) and (pointer: coarse) { .weAre { height: unset; position: relative; margin-top: 2.8rem; } .weAre::before { content: unset; } .weAre>div.weAre1.hidden { animation: unset; } .weAre>div.weAre1.hidden+div.weAre2 { animation: unset; } .weAre>div.weAre1 { flex-direction: column; gap: 3.6rem; } .weAre>div.weAre1>div { width: 100%; padding-right: 2.19rem; box-sizing: border-box; } .weAre>div.weAre1>div>h2 { font-size: 1.25rem; margin-bottom: 1.5rem; } .weAre>div.weAre1>div>p { font-size: 3.5rem; line-height: 3.875rem; } html[lang="Fr"] .weAre>div.weAre1>div>p { font-size: 2.5rem; line-height: 2.875rem; } /* .weAre>div.weAre1>div>p::before { content: ''; background-color: var(--primary-principal, #203AA1); bottom: -1.75rem; width: 200%; height: 0.5rem; position: absolute; left: -100%; } */ .weAre>div.weAre1>div>p::after { content: ''; clip-path: polygon(calc(var(--S2)) calc(0px), calc(var(--S2)) calc(var(--S2)), 0 calc(var(--S2)), calc((var(--S2) * 4) / 10) calc((var(--S2) * 6) / 10), calc((var(--S2) * 6) / 10) calc((var(--S2) * 6) / 10), calc((var(--S2) * 6) / 10) calc((var(--S2) * 4) / 10)); background-color: #203AA1; position: absolute; width: var(--S2); height: var(--S2); display: inline-block; right: -2rem; top: -3rem; box-sizing: border-box; rotate: -90deg; } .weAre>div.weAre1>img { width: 100%; height: unset; padding-bottom: 0; } .weAre>div.weAre2 { flex-direction: column; gap: 3.6rem; opacity: 1; position: relative; left: 0; } .weAre>div.weAre2>div { width: 100%; padding-top: 7rem; } .weAre>div.weAre2>div::before { content: ''; clip-path: polygon(calc(var(--S2)) calc(0px), calc(var(--S2)) calc(var(--S2)), 0 calc(var(--S2)), calc((var(--S2) * 4) / 10) calc((var(--S2) * 6) / 10), calc((var(--S2) * 6) / 10) calc((var(--S2) * 6) / 10), calc((var(--S2) * 6) / 10) calc((var(--S2) * 4) / 10)); background-color: #203AA1; position: absolute; width: var(--S2); height: var(--S2); display: inline-block; right: 0; top: 2rem; box-sizing: border-box; rotate: -90deg; } .weAre>div.weAre2>div>h2 { font-size: 2.375rem; line-height: 2.625rem; margin-bottom: 1.5rem; padding-bottom: 1.5rem; } html[lang="Fr"] .weAre>div.weAre2>div>h2 { font-size: 2.375rem; line-height: 2.625rem; margin-bottom: 1.5rem; padding-bottom: 1.5rem; } .weAre>div.weAre2>div>p { font-size: 1.0625rem; line-height: 1.375rem; opacity: 1; } .weAre>div.weAre2>img { width: 100%; height: unset; padding-bottom: 3rem; } } @media only screen and (min-width:501px) and (max-width:2500px) and (pointer: coarse) { .weAre { height: unset; position: relative; margin-top: 2.8rem; padding-bottom: 6.13rem; margin-bottom: 2.8rem; } .weAre::before { content: unset; } .weAre>div.weAre1 { gap: 7rem; } .weAre>div.weAre1.hidden { animation: unset; } .weAre>div.weAre1.hidden+div.weAre2 { animation: unset; } .weAre>div.weAre1>div { /* width: 65%; */ box-sizing: border-box; display: inline-flex; } .weAre>div.weAre1>div>h2 { font-size: 1.5rem; margin-bottom: 2rem; } .weAre>div.weAre1>div>p { font-size: 8rem; line-height: 10rem; } /* .weAre>div.weAre1>div>p::before { content: ''; background-color: var(--primary-principal, #203AA1); bottom: -1.75rem; width: 200%; height: 0.5rem; position: absolute; left: -100%; } */ .weAre>div.weAre1>div>p::after { content: ''; clip-path: polygon(calc(var(--S)) calc(0px), calc(var(--S)) calc(var(--S)), 0 calc(var(--S)), calc((var(--S) * 4) / 10) calc((var(--S) * 6) / 10), calc((var(--S) * 6) / 10) calc((var(--S) * 6) / 10), calc((var(--S) * 6) / 10) calc((var(--S) * 4) / 10)); background-color: #203AA1; position: absolute; width: var(--S); height: var(--S); display: inline-block; right: -4rem; top: -4rem; box-sizing: border-box; rotate: -45deg; } .weAre>div.weAre1>img { width: 35%; height: unset; padding-bottom: 0; } .weAre>div.weAre2 { opacity: 1; position: relative; left: 0; padding-top: 10rem; box-sizing: border-box; gap: 7rem; } .weAre>div.weAre2>div { /* width: 100%; */ /* padding-top: 7rem; */ } .weAre>div.weAre2>div::before { content: ''; clip-path: polygon(calc(var(--S)) calc(0px), calc(var(--S)) calc(var(--S)), 0 calc(var(--S)), calc((var(--S) * 4) / 10) calc((var(--S) * 6) / 10), calc((var(--S) * 6) / 10) calc((var(--S) * 6) / 10), calc((var(--S) * 6) / 10) calc((var(--S) * 4) / 10)); background-color: #203AA1; position: absolute; width: var(--S); height: var(--S); display: inline-block; right: -4rem; top: -4rem; box-sizing: border-box; rotate: -45deg; } .weAre>div.weAre2>div>h2 { font-size: 3.875rem; line-height: 4rem; margin-bottom: 1.5rem; padding-bottom: 1.5rem; } .weAre>div.weAre2>div>p { font-size: 1.25rem; line-height: 1.5rem; opacity: 1; } .weAre>div.weAre2>img { width: 35%; height: unset; padding-bottom: 0; } } body>header { height: 6.13rem; position: fixed; top: 0; z-index: 3; width: 100vw; } body>header.firstPage { background-color: transparent !important; } body>header.ablah { height: 0; } header>.topBar { position: fixed; top: 0; width: 100%; height: 6.13rem; z-index: 4; display: flex; flex-direction: row; align-items: center; justify-content: space-between; padding: 2rem calc(((100% - min(100%, var(--max-width-size))) / 2) + 6.38rem); box-sizing: border-box; --textColor: #FFF; } body>header.firstPage>.topBar { background-color: transparent; } header.ablah>.topBar { padding-top: 5rem; } @media only screen and (min-width:0px) and (max-width:500px) and (orientation:portrait) and (pointer: coarse) { body { position: relative; } body>header.ablah { width: 100%; position: absolute; } header.ablah>.topBar { padding: 3rem 1.5rem; box-sizing: border-box; position: absolute; } body>header.firstPage>.topBar { background-color: #EDE3D7; } } header>.topBar.black { --textColor: #000; background-color: #EDE3D7; } header>.topBar.textWhite { --textColor: #FFF; } @media only screen and (min-width:0px) and (max-width:500px) and (orientation:portrait) and (pointer: coarse) { header>.topBar.textWhite { --textColor: #000; background-color: #F0EDEB !important; } } header>.topBar::before { content: ''; width: 0.5rem; height: 4.375rem; background-color: var(--abi); position: absolute; left: 0; bottom: -10.5rem; transform: rotate(calc(var(--ratio2) * 90deg)); opacity: 1; /* -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; */ } header>.topBar.hideBilbilak::before { /* transform: rotate(calc(var(--ratio2) * 90deg)); */ opacity: 0; -webkit-transition: all 0.5s ease 0.5s; -moz-transition: all 0.5s ease 0.5s; -o-transition: all 0.5s ease 0.5s; transition: all 0.5s ease 0.5s; } header.firstPage>.topBar::before, header.noBilbilak>.topBar::before { content: unset; } header.ablah>.topBar::before { content: unset; } header>.topBar.hide::before { opacity: 0; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } header>.topBar::after { content: ''; width: calc(var(--ratio) * 100%); height: 0.5rem; clip-path: polygon(0 0, 100% 0, 100% 0.5rem, 0.5rem 0.5rem); background-color: var(--abi); position: absolute; right: 0; bottom: -0.5rem; } body>header.firstPage>.topBar::after { content: unset; } header>.topBar>ul { display: flex; flex-direction: row; align-items: center; justify-content: flex-end; } header>.topBar>ul a { color: var(--textColor); font-feature-settings: 'clig' off, 'liga' off; text-decoration: none; font-family: TT Hoves Pro Trial Variable; font-size: 1.25rem; font-style: normal; font-weight: 400; line-height: 1.5rem; padding: 0.4rem 0; margin-right: 3.25rem; position: relative; display: inline-block; } header>.topBar>ul a::first-letter { text-transform: uppercase; } header>.topBar>ul a::before { content: ''; width: 0%; height: 1px; position: absolute; left: unset; right: 0; bottom: 0rem; background-color: var(--footer-pen-color1); -webkit-transition: all 0.3s ease .1s; -moz-transition: all 0.3s ease .1s; -o-transition: all 0.3s ease .1s; transition: all 0.3s ease .1s; } header>.topBar>ul a:hover::before { width: 100%; left: 0; right: unset; -webkit-transition: all 0.3s ease .1s; -moz-transition: all 0.3s ease .1s; -o-transition: all 0.3s ease .1s; transition: all 0.3s ease .1s; } @media only screen and (min-width:501px) and (max-width:2500px) and (pointer: coarse) { header>.topBar>ul>li:nth-child(1), header>.topBar>ul>li:nth-child(2), header>.topBar>ul>li:nth-child(3), header>.topBar>ul>li:nth-child(4) { display: none; } } header>.topBar>ul.about>li:nth-child(1)>a::after, header>.topBar>ul.team>li:nth-child(2)>a::after, header>.topBar>ul.services>li:nth-child(3)>a::after, header>.topBar>ul.contact>li:nth-child(4)>a::after { content: ''; width: 0.4375rem; height: 0.4375rem; background-color: var(--abi); position: absolute; bottom: 0.7rem; right: -0.7475rem; } .hamburger { padding: 0.9625rem 0; width: 3.125rem; height: 2.3rem; box-sizing: border-box; background-color: transparent; position: relative; z-index: 0; border: 0; overflow: hidden; } .hamburger::before { content: ''; width: 2.9375rem; height: max(0.0625rem, 1px); position: absolute; top: 0.9625rem; right: 0; background-color: var(--textColor); ; z-index: 1; } .hamburger::after { content: ''; width: 3.125rem; height: max(0.0625rem, 1px); position: absolute; top: 1.275rem; right: 0; background-color: var(--textColor); ; z-index: 1; } .hamburger:hover::before { animation: hamT 1s ease-in-out 0s 1; } @keyframes hamT { 0% { right: 0; } 45% { right: 3.5rem; } 45.0001% { right: -3.5rem; } 50% { right: -3.5rem; } 100% { right: 0; } } .hamburger:hover::after { animation: hamB 1s ease-in-out 0s 1; } @keyframes hamB { 0% { right: 0; } 45% { right: -3.5rem; } 45.001% { right: 3.5rem; } 50% { right: 3.5rem; } 100% { right: 0; } } header>.topBar>a { background-image: url(/image/logo2.svg); background-size: 11.625rem 3.25rem; background-repeat: no-repeat; width: 11.625rem; display: inline-block; height: 3.25rem; padding: 1.44rem 2rem 1.44rem 0; background-position: center left; } header>.topBar.white>a { background-image: url(/image/logo3.svg); } @media only screen and (min-width:0px) and (max-width:500px) and (orientation:portrait) and (pointer: coarse) { body>header { height: 4.46rem; } header>.topBar { height: 4.46rem; padding: 1rem 1.5rem; } header>.topBar::before { content: unset; } header>.topBar::after { width: calc(var(--ratio) * 100%); height: 0.3rem; clip-path: polygon(0 0, 100% 0, 100% 0.3rem, 0.3rem 0.3rem); bottom: -0.3rem; } header>.topBar>ul { width: 5rem; } header>.topBar>ul>li:not(:nth-last-child(1)) { display: none; } .hamburger:hover::before { animation: none; } .hamburger:hover::after { animation: none; } header>.topBar>a { background-size: 8.25rem 2.46rem; width: 8.25rem; height: 2.46rem; padding: 1rem 0; } } .menuParent { height: 100vh; background-color: #203AA1AA; z-index: 11; display: flex; flex-direction: row; position: fixed; right: -100%; opacity: 0; width: 100%; } header.loaded .menuParent { right: -100%; opacity: 0; animation: hideMenu 0.8s ease-in-out 0s 1; } header.active .menuParent { right: 0; opacity: 1; animation: showMenu 0.8s ease-in-out 0s 1; } @keyframes showMenu { 0% { right: -100%; opacity: 0; } 1% { right: 0; opacity: 0; } 100% { right: 0; opacity: 1; } } @keyframes hideMenu { 0% { right: 0; opacity: 1; } 99% { right: 0; opacity: 0; } 100% { right: -100%; opacity: 0; } } .menuParent>div { height: 100dvh; background-color: #FFF; display: flex; flex-direction: column; justify-content: space-between; position: absolute; right: -100%; z-index: 5; width: calc(((100% - min(100%, var(--max-width-size))) / 2) + 45rem); -webkit-transition: all 0.8s ease; -moz-transition: all 0.8s ease; -o-transition: all 0.8s ease; transition: all 0.8s ease; } header.active .menuParent>div { right: 0; -webkit-transition: all 0.8s ease; -moz-transition: all 0.8s ease; -o-transition: all 0.8s ease; transition: all 0.8s ease; } .menuParent>div>* { width: 100%; } .menuParent>div>div { width: 100%; height: 6.13rem; padding-right: calc(((100vw - min(100vw, var(--max-width-size))) / 2) + 6.38rem); box-sizing: border-box; display: flex; flex-direction: row-reverse; justify-content: right; align-items: center; } .menuParent>div>div>.close { width: 3.125rem; height: 3.125rem; border-radius: 0.5rem; background: var(--charcot, #222832); border: 0; background-image: url(/image/close.svg); background-repeat: no-repeat; background-size: 1.7rem 1.7rem; background-position: center; display: flex; justify-content: center; align-items: center; } .menuParent>div>div>.lang { margin-right: 3.25rem; color: var(--primary-principal, #203AA1); font-family: 'TTH Pro'; font-size: 1.25rem; font-style: normal; font-weight: 400; line-height: 1.5rem; text-decoration: none; position: relative; padding: 0.4rem 0 0.4rem 2.5rem; } .menuParent>div>div>.lang::first-letter{ text-transform: uppercase; } .menuParent>div>div>.lang::after { content: ''; width: 1.5rem; height: 2.3rem; background-image: url(/image/earth.svg); background-repeat: no-repeat; background-size: 1.5rem 1.5rem; background-position: center; position: absolute; left: 0rem; bottom: 0rem; transform-origin: center center; -webkit-transition: all 0.3s linear; -moz-transition: all 0.3s linear; -o-transition: all 0.3s linear; transition: all 0.3s linear; } .menuParent>div>div>.lang:hover::after { rotate: 180deg; -webkit-transition: all 0.3s linear; -moz-transition: all 0.3s linear; -o-transition: all 0.3s linear; transition: all 0.3s linear; } /* .menuParent>div>div>.lang::before { content: ''; width: 0%; height: 1px; position: absolute; left: unset; right: 0; bottom: 0rem; background-color: var(--footer-pen-color1); -webkit-transition: all 0.3s ease .1s; -moz-transition: all 0.3s ease .1s; -o-transition: all 0.3s ease .1s; transition: all 0.3s ease .1s; } .menuParent>div>div>.lang:hover::before { width: 100%; left: 0; right: unset; -webkit-transition: all 0.3s ease .1s; -moz-transition: all 0.3s ease .1s; -o-transition: all 0.3s ease .1s; transition: all 0.3s ease .1s; } */ .menuParent>div>.pages { padding: 0 1rem 5rem 3.5rem; box-sizing: border-box; } .menuParent>div>.pages>li { width: 100%; padding: 1.25rem 0; box-sizing: border-box; cursor: pointer; } .menuParent>div>.pages>li>a { color: var(--black, #000); font-family: 'TTH Pro'; font-size: 3.875rem; font-style: normal; font-weight: 600; line-height: 4.375rem; text-decoration: none; -webkit-transition: all 0.5s ease .1s; -moz-transition: all 0.5s ease .1s; -o-transition: all 0.5s ease .1s; transition: all 0.5s ease .1s; } html[lang="Fr"] .menuParent>div>.pages>li>a { font-size: 2.8rem; line-height: 4rem; } .menuParent>div>.pages>li:hover>a { color: var(--primary-principal, #203AA1); -webkit-transition: all 0.5s ease .1s; -moz-transition: all 0.5s ease .1s; -o-transition: all 0.5s ease .1s; transition: all 0.5s ease .1s; } .menuParent>div>.social { display: flex; flex-direction: row; padding: 0 0 3rem 2.5rem; box-sizing: border-box; } .menuParent>div>.social>li { padding: 0 1.5rem; } .menuParent>div>.social>li>a { padding: 1rem 0 0.5rem; color: var(--charcot, #222832); font-family: 'TTH Pro'; font-size: 1.25rem; font-style: normal; font-weight: 400; line-height: 1.5rem; text-decoration: none; position: relative; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } .menuParent>div>.social>li>a:hover { color: #203AA1; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } .menuParent>div>.social>li>a::after { content: ''; position: absolute; width: 0%; left: unset; right: 0; bottom: 0; height: 1px; background-color: #203AA1; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } .menuParent>div>.social>li>a:hover::after { width: 100%; right: unset; left: 0; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } @media only screen and (min-width:0px) and (max-width:500px) and (orientation:portrait) and (pointer: coarse) { .menuParent { height: 100dvh; } header.loaded .menuParent { animation: hideMenu 0.3s ease-in-out 0s 1; } header.active .menuParent { animation: showMenu 0.3s ease-in-out 0s 1; } .menuParent>div { height: 100dvh; width: 100%; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } header.active .menuParent>div { -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .menuParent>div>* { width: 100%; } .menuParent>div>div { height: 4.46rem; padding-right: 1.5rem; } header.ablah>.menuParent>div>div { padding-right: 1.5rem; padding-top: 1.5rem; } .menuParent>div>div>.close { width: 2.5rem; height: 2.5rem; } .menuParent>div>div>.lang { margin-right: 3rem; } .menuParent>div>.pages { padding-top: 3rem; padding-left: 2rem; } .menuParent>div>.pages>li { padding: 1rem 0; } .menuParent>div>.pages>li>a { font-size: 2.5rem; line-height: 2.625rem; } html[lang="Fr"] .menuParent>div>.pages>li>a { font-size: 2.5rem; line-height: 2.625rem; } .menuParent>div>.social { padding: 0 0 3rem 2rem; } .menuParent>div>.social>li { padding: 0 0.75rem; } .menuParent>div>.social>li>a { font-size: 1rem; line-height: 2rem; } } div.cookies { background-color: #000; flex-direction: row; position: fixed; left: 3rem; bottom: 3rem; z-index: 10000; padding: 1.5rem; max-width: 28rem; display: none; box-sizing: border-box; } div.cookies.show { display: flex; } div.cookies>p { color: var(--background-2, #FFF); font-size: 0.9375rem; font-style: normal; font-weight: 400; line-height: 1.25rem; } div.cookies>p>a { color: var(--primary-01, #889BE7); font-size: 0.875rem; font-style: normal; font-weight: 400; line-height: 1.25rem; text-decoration-line: underline; } div.cookies>button { background-color: transparent; border: 0; background-image: url(/image/zarbdar2.svg); background-repeat: no-repeat; background-size: 0.75rem 0.75rem; background-position: top right; padding: 0 0 1rem 3rem; } @media only screen and (min-width:0px) and (max-width:500px) and (orientation:portrait) and (pointer: coarse) { div.cookies { left: 0; bottom: 0; width: 100%; } } a.bt { text-align: center; box-sizing: border-box; background-color: var(--background-button-color); text-decoration: none; color: var(--footer-pen-color2); display: inline-flex; align-items: center; justify-content: center; position: relative; padding: 0.5rem 1rem; min-width: 7.5rem; height: 2.75rem; margin-right: 0; width: fit-content; } a.bt.type2 { /* background-color: transparent; */ padding: 2rem; border: 1px solid #C6C6C9; /* color: #0033A1; */ outline: none; transition: 1s ease-in-out; width: 14rem !important; height: 4rem !important; } a.bt.type2:hover { /* background-color: #00000014; */ transition: 1s ease-in-out; } a.bt.type2>svg { position: absolute; left: -1px; top: -1px; fill: none; stroke: #fff; /* stroke: red; */ /* transform:translate(5 5); */ stroke-linecap: square; stroke-width: 3; stroke-miterlimit: 4; stroke-dasharray: 700 700; stroke-dashoffset: 700; transition: 1s ease-in-out; width: calc(100% + 2px); height: calc(100% + 2px); } a.bt.type2:hover>svg { stroke-dashoffset: 0; } /* a.bt.type2::before { content: ''; width: calc(100% + 1px) !important; height: calc(100% + 1px) !important; position: absolute; top: 0px; left: 0px; opacity: 1; background-color: red; z-index: 2; box-sizing: border-box; --wA: 14rem; --hA: 4rem; --zA: 1px; clip-path: polygon(0px 0px, 0px 0px, 0px 0px, 0px 0px); } a.bt.type2:hover::before { animation: drawBt 5s; animation-fill-mode: forwards; } @keyframes drawBt { 0% { clip-path: polygon(calc(var(--wA)) calc(0px), calc(var(--wA)) calc(0px + var(--zA)), calc(var(--wA) - var(--zA)) calc(0px + var(--zA)), calc(var(--wA) - var(--zA)) calc(0px)); } 100% { clip-path: polygon(calc(0px) calc(0px), calc(0px) calc(var(--hA) + calc(0px)), calc(0px - var(--zA)) calc(0px + var(--zA)), calc(0px - var(--zA)) calc(0px)); } 0% { clip-path: polygon(calc(var(--wA)) calc(var(--hA)), calc(var(--wA)) calc(var(--hA) + var(--zA)), calc(var(--wA) - var(--zA)) calc(var(--hA) + var(--zA)), calc(var(--wA) - var(--zA)) calc(var(--hA))); } 100% { clip-path: polygon(calc(0px) calc(var(--hA)), calc(0px) calc(var(--hA) + var(--zA)), calc(0px - var(--zA)) calc(var(--hA) + var(--zA)), calc(0px - var(--zA)) calc(var(--hA))); } } */ a.bt.callToAction { transform: rotate(-90deg); transform-origin: 10rem 1.875rem; position: fixed; top: 0; right: 0; width: 11.875rem; height: 3.75rem; clip-path: polygon(0 0, 11.875rem 0, 11.875rem 3.75rem, 2.0588rem 3.75rem); padding: 0 0 0 1.03125rem; z-index: 11; display: flex; flex-direction: row-reverse; } a.bt::before { content: ''; height: 100%; width: 0; position: absolute; left: 0; background-color: var(--background-button-hover-color); -webkit-transition: all .3s ease .1s; -moz-transition: all .3s ease .1s; -o-transition: all .3s ease .1s; transition: all .3s ease .1s; } a.bt.callToAction::before { left: unset; right: 0; } a.bt:hover::before { width: 100%; -webkit-transition: all .3s ease .1s; -moz-transition: all .3s ease .1s; -o-transition: all .3s ease .1s; transition: all .3s ease .1s; } a.bt.type2:hover::before { width: 0%; } a.bt>p { z-index: 1; font-size: 0.875rem; line-height: 1.25rem; font-weight: 400; padding: 0 0.5rem; } a.bt.callToAction>p { z-index: 1; font-size: 1.125rem; line-height: 1.5rem; padding: 0; } a.bt.type2>p { /* color: #0033A1; */ font-size: 1.25rem; font-style: normal; font-weight: 400; line-height: 1.5rem; } a.bt>span { background-image: url('/image/plus.svg'); background-repeat: no-repeat; background-position: center center; background-size: 1.0625rem 1.0625rem; position: relative; display: inline-block; width: 1.0625rem; height: 1.0625rem; margin-left: 0.5rem; transform: rotate(0); -webkit-transition: all 0.5s ease .1s; -moz-transition: all 0.5s ease .1s; -o-transition: all 0.5s ease .1s; transition: all 0.5s ease .1s; transform-origin: center center; } a.bt.type2>span { background-image: url('/image/arrowRight2.svg'); /* transform: rotate(-90deg); */ } a.bt.callToAction>span { background-size: 1.25rem 1.25rem; width: 1.25rem; height: 1.25rem; margin: 0.75rem; } a.bt:hover>span { transform: rotate(90deg); -webkit-transition: all 0.5s ease .1s; -moz-transition: all 0.5s ease .1s; -o-transition: all 0.5s ease .1s; transition: all 0.5s ease .1s; } a.bt.type2:hover>span { transform: translateX(0.5rem); -webkit-transition: all 0.5s ease .1s; -moz-transition: all 0.5s ease .1s; -o-transition: all 0.5s ease .1s; transition: all 0.5s ease .1s; } @media only screen and (min-width:0px) and (max-width:500px) and (orientation:portrait) and (pointer: coarse) { a.bt { min-width: 8.3rem; margin-right: 1rem; height: 3.25rem; } a.bt.type2 { padding: 0.75rem 1.5rem; } a.bt.callToAction { transform-origin: 7.5rem 1.5rem; background-color: var(--background-button-color); clip-path: polygon(0 0, 9rem 0, 9rem 3rem, 1.56rem 3rem); width: 9rem; height: 3rem; margin-right: 0; text-align: center; z-index: 100; padding: 0 0 0 0.78125rem; } a.bt>p { font-size: 0.875rem; line-height: 1.25rem; } a.bt.callToAction>p { font-size: 1.0625rem; line-height: 1.375rem; } a.bt>span { width: 0; height: 0; margin-left: 0; background-image: none; } a.bt.callToAction>span { margin: 0; display: none; } a.bt:hover::before { width: 0; } a.bt.type2>svg{ display: none; } } a.bt.disabled { pointer-events: none; cursor: default; background: var(--primary-01, #889BE7); } .newsCards { margin-bottom: 2rem; } .newsCards>li { margin-bottom: 1.5rem; } .newsCards>li:nth-last-child(1) { margin-bottom: 0; } .newsCards>li>a { display: flex; flex-direction: row; align-items: center; opacity: 1; text-decoration: none; justify-content: space-between; position: relative; } .newsCards>li>a>div.data { display: flex; flex-direction: column; padding: 1.5rem 2rem; width: calc(60% - 1.5rem); margin-right: 1.5rem; box-sizing: border-box; border-bottom: 1px solid var(--charcot, #222832); background: #EDE3D7; position: relative; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; height: 13.75rem; justify-content: center; } .newsCards:not(.firstPage)>li>a>div.data { border-bottom: 0px; } .newsCards.line>li>a>div.data { border-bottom: 1px solid var(--charcot, #222832); z-index: 1; } .newsCards.firstPage>li>a>div.data { padding: 0.125rem 2rem; height: 11rem; background: transparent; } .newsCards:not(.firstPage)>li:hover>a>div.data { border-radius: 1rem; width: calc(64% - 1.5rem); padding: 1.5rem calc(2rem + 4%) 1.5rem 2rem; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .newsCards.line>li:hover>a>div.data { border-radius: 0rem; } .newsCards>li>a>div.data::after { content: ''; background-image: url(/image/arrowRight.svg); background-size: 2.25rem 2rem; background-position: center; background-repeat: no-repeat; width: 2.25rem; height: calc(100% - 3rem); position: absolute; right: 2.5rem; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .newsCards.firstPage>li>a>div.data::after { height: calc(100% - 0.25rem); } .newsCards:not(.firstPage)>li:hover>a>div.data::after { right: 2rem; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .newsCards.firstPage>li>a>div.data:hover::after { right: 2rem; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .newsCards>li>a>div.data>p.order { color: var(--charcot, #222832); font-family: 'TTH Pro'; font-size: 0.75rem; font-style: normal; font-weight: 400; line-height: 1.25rem; margin-bottom: 1.5rem; } .newsCards>li>a>div.data>time { color: var(--charcot, #222832); font-family: 'TTH Pro'; font-size: 0.75rem; font-style: normal; font-weight: 400; line-height: 1.25rem; /* text-transform: uppercase; */ margin-bottom: 1.5rem; display: flex; align-items: center; } .newsCards>li>a>div.data>time::before { content: ''; } .newsCards>li.News>a>div.data>time::before { content: 'NEWS\00a0\00a0|\00a0\00a0'; } .newsCards>li.Publication>a>div.data>time::before { content: 'PUBLICATION\00a0\00a0|\00a0\00a0'; } .newsCards>li>a>div.data>p.article { width: calc(100% - 4rem); color: var(--black, #000); font-family: 'TTH Pro'; font-size: 1.2rem; font-style: normal; font-weight: 400; line-height: 1.7rem; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; height: 3.4rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .newsCards:not(.firstPage)>li:hover>a>div.data>p.article { color: var(--primary-principal, #203AA1); -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .newsCards>li>a>div.data>p.writer { padding-top: 0.5rem; color: var(--primary-principal, #203AA1); font-size: 1rem; font-style: normal; font-weight: 400; line-height: 1.25rem; } .newsCards>li.news>a>div.data>p.writer { display: none; } .newsCards.firstPage>li>a>div.data>p.writer { display: none; } .newsCards>li>a>div.image { width: 40%; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; position: relative; overflow: hidden; } .newsCards:not(.firstPage)>li:hover>a>div.image { width: 36%; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .newsCards.firstPage>li>a>div.image:hover { border-radius: 1rem; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .newsCards>li>a>div.image::after { content: ''; width: 100%; height: 100%; z-index: 0; position: absolute; left: 0; top: 0; background: linear-gradient(0deg, rgba(0, 0, 0, 0.32) 0%, rgba(0, 0, 0, 0.32) 100%); opacity: 0; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .newsCards:not(.firstPage)>li:hover>a>div.image::after { opacity: 1; /* background-blend-mode: multiply, normal; */ -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .newsCards>li>a>div.image>img { height: 13.75rem; aspect-ratio: 546 / 220; box-sizing: border-box; object-fit: cover; width: 100%; } .newsCards.firstPage>li>a>div.image>img { height: 11rem; } @media only screen and (min-width:0px) and (max-width:500px) and (orientation:portrait) and (pointer: coarse) { .newsCards>li { margin-bottom: 1rem; } .newsCards>li>a { gap: 0; opacity: 1; } .newsCards>li>a>div.data { padding: 1.5rem; width: 100%; height: 21rem; margin-right: 0; } .newsCards.firstPage>li>a>div.data { padding: 1.5rem; width: 100%; height: 14rem; margin-right: 0; background: transparent; } .newsCards:not(.firstPage)>li:hover>a>div.data { border-radius: 0; width: 100%; padding: 1.5rem; } .newsCards>li>a>div.data>p.article { font-size: 1.375rem; line-height: 2rem; height: unset; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; } .newsCards>li>a>div.image { display: none; } .newsCards>li>a::before { width: 100%; } .newsCards:not(.firstPage)>li>a::before { display: initial; width: 100%; z-index: 1; } } .newsCards li.hiddencategory { display: none; } .newsCards li.hiddenexpertise { display: none; } .newsCards li.hiddenover { display: none; } .services { height: 100vh; background: #EDE3D7; display: flex; flex-direction: column; position: sticky; top: 0; left: 0; box-sizing: border-box; justify-content: center; } .services>div { display: flex; flex-direction: row; overflow: hidden; margin-left: 10.62rem; justify-content: space-between; align-items: end; } .services>div.dovvom { width: calc(100% - 10.62rem - 1.5rem); margin: 2rem 1.5rem 0 10.62rem; } .services>div>h2 { color: var(--black, #000); font-family: 'TTH Pro'; font-size: 3.875rem; font-style: normal; font-weight: 600; line-height: 3.375rem; display: flex; flex-direction: column; /* padding-left: calc(5rem - (var(--ratio) * 5rem)); */ } /* .services>div>h2>span { text-indent: calc(var(--ratio) * 2rem); } .services>div>h2>em { text-indent: calc((var(--ratio) * 8rem)); font-style: normal; } */ .services>div>div { display: flex; flex-direction: row; margin-right: 15rem; } .services>div>div>p { color: var(--black, #000); font-family: 'TTH Pro'; font-size: 0.75rem; font-style: normal; font-weight: 400; line-height: 1.25rem; text-transform: uppercase; display: flex; justify-content: center; align-items: center; margin-left: 1rem; } .services>div>div>button { background-image: url(/image/arrowRight.svg); background-repeat: no-repeat; background-position: center center; background-size: 2.25rem 2rem; border: 0; width: 3.5rem; height: 3.5rem; background-color: transparent; cursor: pointer; -webkit-transition: all 0.5s ease .1s; -moz-transition: all 0.5s ease .1s; -o-transition: all 0.5s ease .1s; transition: all 0.5s ease .1s; } .services>div>div>button.left { rotate: 180deg; } .services>div>div>button.disable { background-image: url(/image/arrowRightDisable.svg); cursor: default; background-position: center center; } .services>div>div>button:hover { background-position: 1rem center; -webkit-transition: all 0.5s ease .1s; -moz-transition: all 0.5s ease .1s; -o-transition: all 0.5s ease .1s; transition: all 0.5s ease .1s; } .services>div>div>button.disable:hover { background-position: unset; background-position: center center; } .services>div>ul { display: flex; flex-direction: row; padding: 0; transform: translateX(calc((var(--changeX) * -1rem) + (var(--changeXpx) * -1px))); -webkit-transition: all var(--timeX) ease; -moz-transition: all var(--timeX) ease; -o-transition: all var(--timeX) ease; transition: all var(--timeX) ease; width: 100%; box-sizing: border-box; } .services>div>ul>li { display: flex; flex-direction: column; flex: 1 0 23rem; margin: 0 1.5rem 0 0; background: var(--primary-principal, #203AA1); } .services>div>ul>li>a { text-decoration: none; } .services>div>ul>li>a>div { background-color: white; width: 100%; aspect-ratio: 1 / 1; overflow: hidden; position: relative; } .services>div>ul>li>a>div::after { content: ''; background-color: transparent; width: 100%; height: 100%; display: block; z-index: 10000; position: absolute; top: 0; left: 0; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .services>div>ul>li>a:hover>div::after { background-color: rgba(0, 0, 0, 0.5); -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .services>div>ul>li>a>div>img { background-color: white; width: calc(100% + 1px); aspect-ratio: 1 / 1; object-fit: cover; filter: grayscale(1); scale: 1; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .services>div>ul>li>a:hover>div>img { scale: 1.05; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .services>div>ul>li>a>h3 { width: 100%; padding: 0.63rem 0 0.75rem; box-sizing: border-box; text-align: center; font-size: 1.7rem; line-height: 4rem; font-weight: 400; color: var(--footer-pen-color2); -webkit-transition: all .3s ease .1s; -moz-transition: all .3s ease .1s; -o-transition: all .3s ease .1s; transition: all .3s ease .1s; } .services>div>ul>li>a>p { width: 100%; padding: 0 0 0.5rem; box-sizing: border-box; color: var(--footer-pen-color2); display: flex; flex-direction: row; align-items: center; justify-content: flex-end; position: relative; overflow: hidden; } .services>div>ul>li>a>p::after { content: ''; background-image: url(/image/arrowRight2.svg); background-repeat: no-repeat; background-size: 1.375rem 1.125rem; width: 1.375rem; height: 2rem; margin-left: 0.5rem; -webkit-transition: all .3s ease .1s; -moz-transition: all .3s ease .1s; -o-transition: all .3s ease .1s; transition: all .3s ease .1s; padding-right: 1rem; background-position: 0px center; } .services>div>ul>li>a:hover>p::after { background-position-x: 0.3rem; -webkit-transition: all .3s ease .1s; -moz-transition: all .3s ease .1s; -o-transition: all .3s ease .1s; transition: all .3s ease .1s; } .services>div>ul>li>a>p>span { text-align: right; font-size: 0.75rem; line-height: 1.25rem; font-weight: 400; width: calc(100% - 50px); padding: 1rem; height: calc(1.25rem + 2rem); box-sizing: border-box; position: absolute; left: 0; } .services>div>ul>li>a>p>span:nth-child(1) { top: 0; -webkit-transition: all .3s ease .1s; -moz-transition: all .3s ease .1s; -o-transition: all .3s ease .1s; transition: all .3s ease .1s; } .services>div>ul>li>a>p>span:nth-child(2) { top: calc(1.25rem + 2rem); -webkit-transition: all .3s ease .1s; -moz-transition: all .3s ease .1s; -o-transition: all .3s ease .1s; transition: all .3s ease .1s; } .services>div>ul>li>a:hover>p>span:nth-child(1) { top: calc(-1.25rem - 2rem); -webkit-transition: all .3s ease .1s; -moz-transition: all .3s ease .1s; -o-transition: all .3s ease .1s; transition: all .3s ease .1s; } .services>div>ul>li>a:hover>p>span:nth-child(2) { top: 0; -webkit-transition: all .3s ease .1s; -moz-transition: all .3s ease .1s; -o-transition: all .3s ease .1s; transition: all .3s ease .1s; } @media only screen and (min-width:0px) and (max-width:500px) and (orientation:portrait) and (pointer: coarse) { .services { height: unset; position: relative; padding-top: 7.5rem; } .services>div { margin-left: 0rem; width: 100%; } .services>div>div { display: none; } .services>div>h2 { width: 100%; padding: 0; font-size: 2.375rem; line-height: 2.625rem; margin: 0; } .services>div>h2>span { text-indent: 0; } .services>div>h2>em { text-indent: 4rem; } .services>div>p { display: none; } .services>div.dovvom { width: 100%; margin: 1.5rem 0 3rem; } .services>div>ul { padding: 0; } .services>div>ul>li { flex: 1 0 18.4375rem; margin: 0 0.75rem 0 0; } .services>div>ul>li>a>h3 { font-size: 1.25rem; line-height: 1.375rem; padding: 1rem 1rem 3rem; } .services>div>ul>li>a:hover>h3 { color: var(--footer-pen-color2); } .services>div>ul>li { position: relative; } .services>div>ul>li>a>div::after { content: unset; } .services>div>ul>li>a:hover>div>img { scale: 1; } .services>div>ul>li>a>p { position: absolute; bottom: 0; padding: 0.8rem; height: calc(1rem + 1.6rem); font-size: 0.75rem; font-style: normal; font-weight: 400; line-height: 1rem; padding-right: 0; } .services>div>ul>li>a>p::after { background-size: 1.133rem 1rem; width: 1.133rem; height: 1rem; margin-left: 1rem; } .services>div>ul>li>a:hover>p::after { background-position-x: unset; } .services>div>ul>li>a>p>span { font-size: 0.875rem; line-height: 1rem; padding: 0.8rem; height: calc(1rem + 1.6rem); width: calc(100% - 2.133rem); } .services>div>ul>li>a>p>span:nth-child(2) { top: calc(1rem + 1.6rem); } .services>div>ul>li>a:hover>p>span:nth-child(1) { top: calc(-1rem - 1.6rem); } .services>div>ul>li>a:hover>p>span:nth-child(1) { top: unset; } .services>div>ul>li>a:hover>p>span:nth-child(2) { top: unset; } } @media only screen and (min-width:501px) and (max-width:2500px) and (pointer: coarse) { .services { height: unset; position: relative; padding-top: 7.5rem; padding-bottom: 7.5rem; } .services>div>h2 { padding-left: calc(5rem - (var(--ratio) * 5rem)); } .services>div>h2>span { text-indent: calc(var(--ratio) * 2rem); } .services>div>h2>em { text-indent: calc((var(--ratio) * 8rem)); font-style: normal; } } .mainFooter.f1 { width: 100%; max-height: 550px; aspect-ratio: 1920 / 550; background-image: url('/image/team-footer.webp'); background-size: cover; position: relative; padding: 0; box-sizing: border-box; background-position: center center; } .mainFooter.f1.f4 { background-image: url('/image/servicesFooter.png'); } .mainFooter.f1>div { width: calc(50% - (((100% - min(100%, var(--max-width-size))) / 2))); background-color: black; /* position: absolute; */ transform: translateY(calc(var(--ratio) * -7.75rem)); /* height: 31.625rem; */ padding: 6.25rem 9.88rem; box-sizing: border-box; margin-right: calc(((100% - min(100%, var(--max-width-size))) / 2)); } .mainFooter.f1>div>p { color: white; font-size: 3.875rem; font-weight: 600; line-height: 4.375rem; box-sizing: border-box; margin-bottom: 3rem; } @media only screen and (min-width:0px) and (max-width:500px) and (orientation:portrait) and (pointer: coarse) { .mainFooter.f1 { aspect-ratio: 920 / 617; height: 17rem; margin-top: 18rem; background-position: center; } .mainFooter.f1>div { width: 100%; position: absolute; transform: unset; height: unset; padding: 2.5rem 1.5rem; bottom: 100%; } .mainFooter.f1>div>p { font-size: 1.875rem; line-height: 2.175rem; } } .mainFooter.f2 { width: 100%; background-image: url('/image/aboutBottom.webp'); background-repeat: no-repeat; background-size: 100%; aspect-ratio: 1920 / 703; -webkit-clip-path: inset(0 calc(1.5 * var(--grid-margin2) * var(--ratio)) calc(1.5 * var(--grid-margin2) * var(--ratio)) calc(2 * var(--grid-margin2) * var(--ratio)) round calc(2 * var(--border-radius2) * var(--ratio))); clip-path: inset(0 calc(1.5 * var(--grid-margin2) * var(--ratio)) calc(1.5 * var(--grid-margin2) * var(--ratio)) calc(2 * var(--grid-margin2) * var(--ratio)) round calc(2 * var(--border-radius2) * var(--ratio))); padding-top: 7.5rem; box-sizing: border-box; display: flex; justify-content: right; position: relative; } .mainFooter.f2::after { content: ''; width: 100%; height: 100%; z-index: -1; background-color: rgba(0, 0, 0, 0.5); position: absolute; top: 0; left: 0; } .mainFooter.f2.f4 { background-image: url('/image/servicesChildFooter.png'); } .mainFooter.f2>div { width: 20%; } .mainFooter.f2>div>h2 { font-size: 2rem; font-weight: 400; line-height: 3.125rem; color: var(--footer-pen-color2); margin-bottom: 1.5rem; } .mainFooter.f2>div>p { font-size: 1rem; font-weight: 400; line-height: 1.5rem; color: var(--footer-pen-color2); margin-bottom: 2rem; } @media only screen and (min-width:0px) and (max-width:500px) and (orientation:portrait) and (pointer: coarse) { .mainFooter.f2 { background-image: url('/image/aboutBottom.webp'); width: 100%; aspect-ratio: 414 / 490; -webkit-clip-path: inset(0 0 0 0); clip-path: inset(0 0 0 0); padding: 5.5rem 5rem 0 1.5rem; justify-content: left; background-size: auto 100%; background-position: center; } .mainFooter.f2.f4 { background-image: url('/image/servicesChildFooter2.png'); } .mainFooter.f2>div { width: 90%; } .mainFooter.f2>div>h2 { font-size: 1.25rem; line-height: 1.375rem; } .mainFooter.f2>div>p { font-size: 1.0625rem; line-height: 1.375rem; width: 100%; } } .mainFooter.f3 { width: 100%; background: #FFF; position: relative; padding: 0; box-sizing: border-box; display: flex; flex-direction: row; align-items: flex-start; z-index: 1; } .mainFooter.f3>div { width: 100%; max-height: 550px; aspect-ratio: 1920 / 550; background: var(--background2); position: relative; padding: 0; box-sizing: border-box; display: flex; flex-direction: row; align-items: flex-start; margin-top: 5rem; } .mainFooter.f3>div>img { width: calc(50% - (((100% - min(100%, var(--max-width-size))) / 2))); background-color: transparent; /* position: absolute; */ aspect-ratio: 948 / 505; transform: translateY(calc(var(--ratio) * -5rem)); margin-right: calc(((100% - min(100%, var(--max-width-size))) / 2)); object-fit: cover; } .mainFooter.f3>div>div { padding: 8.6rem 0 5rem 8.3rem; } .mainFooter.f3>div>div>h2 { color: var(--black, #000); font-family: 'TTH Pro'; font-size: 3.875rem; font-style: normal; font-weight: 600; line-height: 4.375rem; padding-bottom: 1.19rem; } .mainFooter.f3>div>div>p { color: var(--black, #000); font-family: 'TTH Pro'; font-size: 2rem; font-style: normal; font-weight: 600; line-height: 3rem; padding-bottom: 3.31rem; } @media only screen and (min-width:0px) and (max-width:500px) and (orientation:portrait) and (pointer: coarse) { .mainFooter.f3>div { width: 100%; max-height: unset; aspect-ratio: unset; margin-top: 0; flex-direction: column; } .mainFooter.f3>div>img { width: 100%; transform: translateY(0); } .mainFooter.f3>div>div { padding: 3rem 1.5rem; } .mainFooter.f3>div>div>h2 { font-size: 2.375rem; line-height: 2.625rem; padding-bottom: 0; margin-bottom: 0.75rem; } .mainFooter.f3>div>div>p { font-size: 1.25rem; line-height: 1.75rem; padding-bottom: 0; margin-bottom: 2rem; } } .mainFooter.marginTop { margin-top: 5rem; } main>ul.pageCounter { position: fixed; display: flex; flex-direction: column; justify-content: space-between; top: calc(50vh + 11.19rem); height: calc(50vh - 11.19rem - 2.88rem); max-height: 16.875rem; } main>ul.pageCounter>li { position: relative; display: flex; flex-direction: row; align-items: center; } main>ul.pageCounter>li::before { content: ''; height: 0.5rem; width: 0rem; background-color: var(--primary-principal, #203AA1); margin-right: calc(0.91rem + 2.5rem); -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } main>ul.pageCounter>li.active::before { width: 2.5rem; margin-right: 0.91rem; -webkit-transition: all 0.3s ease 0.3s; -moz-transition: all 0.3s ease 0.3s; -o-transition: all 0.3s ease 0.3s; transition: all 0.3s ease 0.3s; } main>ul.pageCounter.firstShow>li:nth-child(1)::before { rotate: -90deg; width: 4.375rem; transform-origin: 0.25rem 0.25rem; } main>ul.pageCounter.firstShow>li.active:nth-child(1)::before { animation: showBilbilak 1s ease-in-out 1s 1 forwards; } @keyframes showBilbilak { 0% { rotate: -90deg; width: 4.375rem; } 100% { rotate: 0deg; width: 2.5rem; } /* 100% { rotate: 0deg; width: calc(50vw + 5rem); } */ } /* waitTime */ main>ul.pageCounter.firstShow.firstShow2>li.active:nth-child(1)::before { animation: showBilbilak2 0.5s ease-in-out 0.5s 1 forwards; rotate: 0deg; width: 2.5rem; } @keyframes showBilbilak2 { /* 0% { rotate: 0deg; width: calc(50vw + 5rem); } */ 0% { rotate: 0deg; width: 2.5rem; } 100% { rotate: 0deg; width: 2.5rem; } } main>ul.pageCounter>li>button { border: 0; background-color: transparent; width: 1.375rem; height: 1.375rem; padding: 0; position: relative; opacity: 0; } main>ul.pageCounter.show>li>button { opacity: 1; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } main>ul.pageCounter>li>button::before { content: ''; width: 1.375rem; height: 1.375rem; background-image: url(/image/circle.svg); background-size: 0.75rem 0.75rem; background-position: center; background-repeat: no-repeat; position: absolute; top: 0; left: 0; opacity: 1; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } main>ul.pageCounter>li>button::after { content: attr(num); width: 1.375rem; height: 1.375rem; position: absolute; top: 0; left: 0; color: #203AA1; font-size: 1.125rem; font-style: normal; font-weight: 600; line-height: 1.375rem; position: relative; opacity: 0; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } main>ul.pageCounter>li.active>button::before { opacity: 0; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } main>ul.pageCounter>li.active>button::after { opacity: 1; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } main>ul.pageCounter>li>p { position: absolute; color: var(--Primary-Principal-5---Bouton, var(--primary-principal, #203AA1)); font-size: 0.875rem; font-style: normal; font-weight: 400; line-height: 1.25rem; right: -3rem; top: 0; opacity: 0; } main>ul.pageCounter.show>li>p { opacity: 1; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } main>ul.pageCounter>li>p::after { content: ''; background-image: url(/image/arrowB2.svg); background-position: center; background-repeat: no-repeat; background-size: 0.75rem 1.0625rem; width: 1.375rem; height: 1.0625rem; position: absolute; left: -2.2rem; animation: scrollAnim 5s linear 0s infinite forwards; } @keyframes scrollAnim { 0%, 100%, 20%, 50%, 80% { transform: translateY(0) } 40% { transform: translateY(-7px) } 60% { transform: translateY(-5px) } } @media only screen and (min-width:0px) and (max-width:500px) and (orientation:portrait) and (pointer: coarse) { main>ul.pageCounter { display: none; } } @media only screen and (min-width:501px) and (max-width:2500px) and (pointer: coarse) { main>ul.pageCounter { display: none; } } footer.freeze { pointer-events: none; } footer { background-color: var(--footer-back-color); display: flex; flex-direction: row; z-index: 0; position: relative; bottom: 0; padding: 0 calc(((100% - min(100%, var(--max-width-size))) / 2)); width: 100%; box-sizing: border-box; } footer.tah{ position: absolute; bottom: 0; } footer>div { border: 1px solid var(--footer-border-color); text-align: center; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding-left: 2rem; box-sizing: border-box; } footer>div.footerLeft { width: calc(33% - 1.5rem); margin: 1.5rem 0 1.5rem 1.5rem; } footer>div.footerRight { width: calc(67% - 1.5rem); margin: 1.5rem 1.5rem 1.5rem 0; position: relative; border-left: 0; } footer>div.footerLeft>p { font-size: 2rem; line-height: 3.125rem; font-weight: 400; color: var(--footer-pen-color1); margin-bottom: 1.5rem; } footer>div.footerLeft>a { font-size: 2rem; line-height: 2.125rem; font-weight: 600; color: var(--footer-pen-color2); text-decoration: none; padding-bottom: 1rem; } footer>div.footerRight::after { content: ''; background: url(/image/logo.svg); position: absolute; bottom: 1.5rem; right: 1.5rem; width: 11.25rem; height: 4.5625rem; background-size: 100% auto; background-repeat: no-repeat; } footer>div.footerRight>div { display: flex; flex-direction: row; padding-left: 12%; width: 100%; box-sizing: border-box; } footer>div.footerRight>div.footerRightTop { width: 100%; height: 100%; display: flex; flex-direction: row; align-items: flex-start; } footer>div.footerRight>div.footerRightTop>* { padding: 40px 10% 40px 0; display: flex; flex-direction: column; align-items: flex-start; } footer>div.footerRight>div.footerRightTop * { font-size: 1rem; line-height: 1.25rem; font-weight: 400; color: var(--footer-pen-color2); text-decoration: none; text-align: left; -webkit-transition: all 0.5s ease .1s; -moz-transition: all 0.5s ease .1s; -o-transition: all 0.5s ease .1s; transition: all 0.5s ease .1s; display: flex; flex-direction: column; } footer>div.footerRight>div.footerRightTop br { margin-top: 0.75rem; } footer>div.footerRight>div.footerRightTop li { padding-top: 0.75rem; } footer>div.footerRight>div.footerRightTop *.title { font-size: 2rem; line-height: 3.125rem; font-weight: 400; margin-bottom: 1rem; } footer>div.footerRight>div.footerRightTop a:hover { color: var(--footer-pen-color1); -webkit-transition: all 0.5s ease .1s; -moz-transition: all 0.5s ease .1s; -o-transition: all 0.5s ease .1s; transition: all 0.5s ease .1s; } footer>div.footerRight>div.footerRightBottom { width: 100%; padding-bottom: 1.19rem; display: flex; flex-direction: column; align-items: flex-start; } footer>div.footerRight>div.footerRightBottom * { font-size: 0.875rem; line-height: 1.25rem; font-weight: 400; color: var(--footer-pen-color1); margin-bottom: 0.5rem; } @media only screen and (min-width:0px) and (max-width:500px) and (orientation:portrait) and (pointer: coarse) { footer { flex-direction: column; } footer>div.footerLeft { width: calc(100% - 1.5rem); margin: 0.75rem 0.75rem 0; padding: 1.88rem 2.75rem 1.88rem 0.75rem; box-sizing: border-box; } footer>div.footerRight { width: calc(100% - 1.5rem); margin: 0 0.75rem 0.75rem; padding: 1.5rem 0.75rem 4.5rem; box-sizing: border-box; border: 1px solid var(--footer-border-color); border-top: 0; } footer>div.footerLeft>p { font-size: 1.25rem; line-height: 1.375rem; margin-bottom: 25px; } footer>div.footerLeft>a { font-size: 1.75rem; line-height: 2.125rem; } footer>div.footerRight>div { padding-left: 0 2%; box-sizing: border-box; } footer>div.footerRight>div.footerRightTop { flex-wrap: wrap; padding: 0 !important; } footer>div.footerRight>div.footerRightTop>* { width: 65%; padding: 0; box-sizing: border-box; } footer>div.footerRight>div.footerRightTop>*:nth-child(1) { padding-right: 40px; margin-bottom: 2rem; } footer>div.footerRight>div.footerRightTop>*:nth-child(2) { width: 35%; margin-bottom: 2rem; } footer>div.footerRight>div.footerRightTop li { padding-top: 0.25rem; } footer>div.footerRight>div.footerRightTop *.title { font-size: 1.25rem; line-height: 1.375rem; } footer>div.footerRight>div.footerRightBottom { padding: 0; box-sizing: border-box; display: flex; flex-direction: column; justify-content: space-between; margin-top: 1.5rem; } footer>div.footerRight>div.footerRightBottom * { font-size: 0.6875rem; line-height: 0.6875rem; margin: 0 0 0.75rem; } footer>div.footerRight::after { bottom: 25px; right: unset; left: calc(50% - 48px); width: 96px; height: 39px; background-size: 96px 39px; background-repeat: no-repeat; } }