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 { padding-top: 6.13rem; } .boldText { width: 100%; box-sizing: border-box; display: flex; justify-content: center; align-items: center; margin-bottom: 7.5rem; } .boldText>p { display: inline-flex; flex-direction: column; font-size: 8rem; font-weight: 600; line-height: 9rem; color: var(--footer-pen-color3); } html[lang="Fr"] .boldText>p { font-size: 6rem; line-height: 7rem; } .boldText>p em { /* color: var(--footer-pen-color4); */ } .boldText>p.showMobile { display: none; } .boldText>p>span.top { transform: translateX(calc(var(--ratio) * 5%)); } .boldText>p>span.bottom { transform: translateX(calc(var(--ratio) * -5%)); } @media only screen and (min-width:0px) and (max-width:500px) and (orientation:portrait) and (pointer: coarse) { .boldText { padding: 2rem 1.5rem 4rem 1.5rem; margin-bottom: 0; justify-content: flex-start; } .boldText>p { font-size: 2.0rem; line-height: 3.875rem; } html[lang="Fr"] .boldText>p { font-size: 2.0rem; line-height: 3.875rem; } .boldText>p.showMobile { display: initial; line-height: 3.5rem; } .boldText>p.showPC { display: none; } .boldText>p>span.top { transform: translateX(0); } .boldText>p>span.bottom { transform: translateX(0); } } .whatWeCover { width: 100%; background-color: var(--background2); display: flex; flex-direction: row; box-sizing: border-box; } .whatWeCover>.left { width: calc(33% - 1.5rem); border: 1px solid #CBC1BC; margin: 1.62rem 0 1.5rem 1.5rem; border-right: 0; padding: 4rem 0; display: flex; flex-direction: column; justify-content: center; align-items: center; } .whatWeCover>.left>h2 { width: 60%; font-size: 1.125rem; font-weight: 600; line-height: 1.375rem; color: var(--footer-pen-color4); display: flex; flex-direction: column; } .whatWeCover>.left>h2 em { padding-top: 1rem; font-size: 2rem; font-weight: 600; line-height: 3rem; color: var(--footer-pen-color3); box-sizing: border-box; display: block; } .whatWeCover>.left>div { width: 60%; margin: 2rem 0 0; } .whatWeCover>.left>div>ul { width: 100%; margin-bottom: 2rem; } .whatWeCover>.left>div>ul>li { width: 100%; border-bottom: 1px solid #CBC1BC; padding: 1.5rem 2rem; box-sizing: border-box; font-size: 1.125rem; font-weight: 400; line-height: 1.5rem; color: var(--footer-pen-color3); } .whatWeCover>.right { width: calc(67% - 1.5rem); border: 1px solid #CBC1BC; margin: 1.62rem 1.5rem 1.5rem 0; display: flex; justify-content: center; align-items: center; padding: 4rem; box-sizing: border-box; } .whatWeCover>.right>img { height: 100%; width: 100%; margin: 0; box-sizing: border-box; object-fit: cover; opacity: 0; aspect-ratio: 1115 / 548; clip-path: polygon(0 0, 100% 0, 100% 100%, 7rem 100%, 0 calc(100% - 7rem)); } @media only screen and (min-width:0px) and (max-width:500px) and (orientation:portrait) and (pointer: coarse) { .whatWeCover { flex-direction: column; } .whatWeCover>.left { width: calc(100% - 1.5rem); margin: 0.75rem 0.75rem 0 0.75rem; padding: 2rem 0.75rem; box-sizing: border-box; border: 1px solid #CBC1BC; border-bottom: 0; } .whatWeCover>.left>h2 { width: 100%; font-size: 1rem; line-height: 1.125rem; } .whatWeCover>.left>h2 em { font-size: 1.25rem; line-height: 1.75rem; } .whatWeCover>.left>div { width: 100%; } .whatWeCover>.left>div>ul>li { padding: 1.5rem; font-size: 1rem; line-height: 1.375rem; } .whatWeCover>.right { width: calc(100% - 1.5rem); margin: 0 0.75rem 0.75rem 0.75rem; padding: 0.75rem; box-sizing: border-box; } .whatWeCover>.right>img { padding: 0rem; aspect-ratio: 100 / 120; object-position: right; } .whatWeCover>.right>div { background-image: url(/image/cover2.png); background-repeat: no-repeat; background-position: center center; background-size: 100%; width: 100%; box-sizing: border-box; border-radius: 0.8rem; margin: 0; aspect-ratio: 366 / 410; /* -webkit-clip-path: inset(0 0 0 calc(2 * var(--grid-margin2) * (1 - var(--ratio))) round calc(2 * var(--border-radius2) * var(--ratio))); */ clip-path: inset(0 0 0 0); } } .teams { width: 100%; padding: 7.5rem 10% 2.5rem; box-sizing: border-box; display: flex; flex-direction: column; justify-content: left; } .teams>h2 { font-size: 1.125rem; font-weight: 600; line-height: 1.375rem; color: var(--footer-pen-color4); display: flex; flex-direction: column; margin-left: 0.75rem; } .teams>h2 em { padding: 1rem 0 0; font-size: 2rem; font-weight: 600; line-height: 3.125rem; color: var(--footer-pen-color3); box-sizing: border-box; display: block; } @media only screen and (min-width:0px) and (max-width:500px) and (orientation:portrait) and (pointer: coarse) { .teams { padding: 3rem 1.5rem 0; } .teams>h2 { font-size: 1rem; line-height: 1.125rem; } .teams>h2 em { font-size: 1.25rem; line-height: 1.375rem; } } 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); } .topPhoto>div { width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; margin-bottom: 16rem; box-sizing: border-box; position: relative; } .topPhoto>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; width: calc(100% - var(--articleWidth)); /* position: -webkit-sticky; */ position: absolute; rotate: 90deg; 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; } /* .topPhoto>div::before { content: ''; background-image: url(/image/Vector.svg); background-repeat: no-repeat; background-size: 5.875rem auto; width: 5.875rem; height: 31.49rem; display: inline-block; position: absolute; bottom: -8rem; left: -2.9375rem; z-index: -1; } */ .topPhoto>div>img { width: 45%; box-sizing: border-box; object-fit: cover; padding-right: 2.38rem; aspect-ratio: 600 / 800; opacity: 0; clip-path: polygon(0 0, 100% 0, 100% 100%, 7rem 100%, 0 calc(100% - 7rem)); } .topPhoto>div>div { width: 55%; padding-top: 3rem; box-sizing: border-box; color: var(--footer-pen-color3); position: relative; } /* .topPhoto>div>div::after { content: ''; background-image: url(/image/Vector2.svg); background-repeat: no-repeat; background-size: 15.875rem auto; width: 15.875rem; height: 5.1875rem; display: inline-block; position: absolute; bottom: -8rem; left: -15.875rem; z-index: -1; transform: rotateX(180deg); } */ .topPhoto>div>div>p.top { font-size: 2rem; font-weight: 600; line-height: 3rem; } .topPhoto>div>div>h2 { margin-top: 3rem; margin-bottom: 1rem; font-size: 1.125rem; font-weight: 600; line-height: 1.375rem; } .topPhoto>div>div>p { margin-bottom: 1rem; font-size: 1.125rem; font-weight: 400; line-height: 1.5rem; text-align: justify; } @media only screen and (min-width:0px) and (max-width:500px) and (orientation:portrait) and (pointer: coarse) { .topPhoto>div { flex-direction: column; padding: 0; box-sizing: border-box; margin-bottom: 0; } .topPhoto>div::before { left: -1rem; top: calc(((100vw - 3rem) / 0.75) - var(--S) + 1rem); } .topPhoto>div>img { width: 100%; margin-top: 0; padding: 0; } .topPhoto>div>div { width: 100%; margin-top: 6rem; padding: 0; } .topPhoto>div>div::after { background-size: 9.25rem auto; width: 9.25rem; height: 3rem; bottom: unset; left: unset; transform: rotateX(0deg); right: -0.75rem; top: -4.5rem; } .topPhoto>div>div>p.top { font-size: 1.25rem; line-height: 1.75rem; } .topPhoto>div>div>h2 { margin-top: 2rem; font-size: 1rem; line-height: 1.125rem; } .topPhoto>div>div>p { font-size: 1.125rem; line-height: 1.375rem; } } .valuesList { width: 100%; background-color: transparent; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; box-sizing: border-box; padding-bottom: 9rem; } .valuesList.gray { background-color: var(--background2); } .valuesList>h2 { margin: 9rem 0 4rem; font-size: 6.75rem; font-weight: 600; line-height: 7.5rem; color: var(--footer-pen-color3); text-align: center; width: 100%; } .valuesList>p { margin: 5rem 0.75rem 1.25rem; color: #000; font-size: 1.25rem; font-style: normal; font-weight: 400; line-height: 1.5rem; } .valuesList>div { width: 100%; display: flex; flex-direction: row; justify-content: left; align-items: center; /* flex-wrap: wrap; */ } .valuesList>div>div { transform: translateY(10rem); opacity: 0; margin: 0.75rem; width: calc(50% - 1.5rem); height: 19rem; box-sizing: border-box; /* background-color: black; */ color: var(--background-2, #FFF); font-family: 'TTH Pro'; font-size: 2rem; font-style: normal; font-weight: 600; line-height: 3rem; padding: 2rem; display: flex; align-items: flex-start; flex-direction: column; justify-content: flex-start; background-repeat: no-repeat; background-size: cover; position: relative; cursor: cell; overflow: hidden; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; flex: 1; } .valuesList.headerHide>div>div { cursor: default; } .valuesList>div>div.show { transform: translateY(0); opacity: 1; -webkit-transition: all 0.8s ease; -moz-transition: all 0.8s ease; -o-transition: all 0.8s ease; transition: all 0.8s ease; } .valuesList>div>div::after { content: ''; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-color: #203AA1; mix-blend-mode: multiply; z-index: 1; } .valuesList>div>div::after { background-color: #000000d1; opacity: 0.75; } /* .valuesList>div:nth-child(3)>div::after { background-color: #000; opacity: 0.75; } .valuesList>div:nth-child(3)>div:nth-child(2)::after { background-color: #203AA1; mix-blend-mode: multiply; opacity: 1; } */ .valuesList>div>div::before { content: ''; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-color: #00000000; z-index: 1; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } .valuesList>div>div:hover::before { background-color: #203AA1; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } .valuesList>div>div:hover::before { background-color: #000; } /* .valuesList>div:nth-child(3)>div:hover::before { background-color: #000; } .valuesList>div:nth-child(3)>div:hover:nth-child(2)::before { background-color: #203AA1; } */ .valuesList>div>div:hover { border-radius: 1rem; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } .valuesList>div>div:hover+div { -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } .valuesList>div>div:hover { flex: 1.3; } .valuesList>div>div>h2 { z-index: 2; margin-top: 12rem; margin-bottom: 1.5rem; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } .valuesList>div>div>p, .valuesList>div>div>div { color: #FFF; font-family: 'TTH Pro'; font-size: 1.25rem; font-style: normal; font-weight: 400; line-height: 1.5rem; z-index: 2; opacity: 0; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; /* width: 100%; */ height: 100%; display: inline-flex; flex-direction: column; } .valuesList>div>div>div>a { color: #FFF; font-size: 2rem; font-style: normal; font-weight: 600; line-height: 3rem; text-decoration: none; padding: 0 0 1rem; position: relative; width: fit-content; } .valuesList>div>div>div>a::before { content: ''; position: absolute; right: 0; bottom: 0.5rem; width: 0; height: 0.125rem; background-color: #FFF; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } .valuesList>div>div>div>a:hover:before { width: 100%; right: unset; left: 0; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } .valuesList>div>div:hover>h2 { margin-top: 0; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } .valuesList.headerHide>div>div:hover>h2 { height: 0px; opacity: 0; margin-bottom: 0; } .valuesList>div>div:hover>p, .valuesList>div>div:hover>div { opacity: 1; -webkit-transition: all 0.2s ease 0.5s; -moz-transition: all 0.2s ease 0.5s; -o-transition: all 0.2s ease 0.5s; transition: all 0.2s ease 0.5s; } .valuesList>div>div { background-image: var(--pic); filter: grayscale(1); } @media only screen and (min-width:0px) and (max-width:500px) and (orientation:portrait) and (pointer: coarse) { .valuesList { padding: 5rem 0 17rem; } .valuesList>p { margin: 0 0 6.25rem; font-size: 1.0625rem; font-weight: 300; line-height: 1.375rem; } .valuesList>h2 { margin: 0; font-size: 3.125rem; line-height: 3.5rem; text-align: center; margin-bottom: 5rem; } .valuesList>ol { flex-direction: column; flex-wrap: nowrap; } .valuesList>div { flex-direction: column; } .valuesList>div>div { transform: translateY(5rem); margin: 0.5rem 0; width: 100%; padding: 1.5rem; height: unset; min-height: 19rem; } .valuesList>div>div:hover>h2 { margin: 0.5rem 0; -webkit-transition: unset; -moz-transition: unset; -o-transition: unset; transition: unset; } .valuesList.headerHide>div>div:hover>h2 { height: initial; opacity: 1; margin-bottom: 1.5rem; margin-top: 0; } .valuesList>div>div::after { opacity: 0 !important; } .valuesList>div>div::before { background-color: #000000; } .valuesList>div>div:nth-child(2n+1)::before { background-color: #203AA1; } .valuesList>div>div:hover::before { background-color: #000000 !important; } .valuesList>div>div:nth-child(2n+1):hover::before { background-color: #203AA1 !important; } .valuesList>div>div:hover { border-radius: 0; } .valuesList>div>div>h2 { margin-top: 0; height: unset; margin-bottom: 1.5rem; } .valuesList>div>div>p, .valuesList>div>div>div { opacity: 1; } .valuesList>div>div>div>a { color: #FFF; font-size: 1.25rem; font-style: normal; font-weight: 600; line-height: 1.75rem; } .valuesList>div>div>div>a:hover:before { width: 0; right: unset; left: 0; -webkit-transition: unset; -moz-transition: unset; -o-transition: unset; transition: unset; } .valuesList.smallBottom{ padding-bottom: 5rem !important; } } .teams>ul { display: flex; flex-direction: row; padding: 0; flex-wrap: wrap; box-sizing: border-box; } .teams>ul>li { display: flex; flex-direction: column; width: calc(100% / 3); padding: 3rem 0.75rem 5rem; background-color: var(--background1); box-sizing: border-box; } .teams>ul>li>a { text-decoration: none; position: relative; overflow: hidden; } .teams>ul>li>a::after { content: attr(role); position: absolute; bottom: 0.5rem; left: 2.5rem; color: var(--footer-pen-color3); text-transform: uppercase; font-size: 0.8rem; } .teams>ul>li>a>h3 { position: relative; } .teams>ul>li>a>h3::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; left: 0; bottom: 2.4rem; box-sizing: border-box; transform-origin: left bottom; transform: rotate(-45deg); } .teams>ul>li>a>div { overflow: hidden; width: 100%; aspect-ratio: 1 / 1; /* clip-path: polygon(0 0, 100% 0, 100% 100%, 7rem 100%, 0 calc(100% - 7rem)); */ -webkit-transition: all .3s ease .1s; -moz-transition: all .3s ease .1s; -o-transition: all .3s ease .1s; transition: all .3s ease .1s; /* background: #EDE3D7; */ clip-path: polygon(0 0, 100% 0, 100% 100%, calc(2.5rem + 1px) 100%, 0 calc(100% - 3rem - 1px)); border: 1px solid #f3f3f3; box-sizing: border-box; } .teams>ul>li>a>div>img { filter: grayscale(1); width: 100%; aspect-ratio: 1 / 1; object-fit: cover; -webkit-transition: all .3s ease .1s; -moz-transition: all .3s ease .1s; -o-transition: all .3s ease .1s; transition: all .3s ease .1s; object-position: top; transform: scale(1.2); transform-origin: 50% 0; } .teams>ul>li>a>h3 { width: 100%; padding: 0.5rem 0rem 2.4rem 2.5rem; text-align: center; font-size: 1.5rem; line-height: 3.125rem; font-weight: 400; color: var(--footer-pen-color3); -webkit-transition: all .3s ease .1s; -moz-transition: all .3s ease .1s; -o-transition: all .3s ease .1s; transition: all .3s ease .1s; box-sizing: border-box; text-align: left; } .teams>ul>li>a:hover>h3 { color: var(--background-button-color); -webkit-transition: all .3s ease .1s; -moz-transition: all .3s ease .1s; -o-transition: all .3s ease .1s; transition: all .3s ease .1s; } .teams>ul>li>a>div:hover { /* clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 100%); */ -webkit-transition: all .3s ease .1s; -moz-transition: all .3s ease .1s; -o-transition: all .3s ease .1s; transition: all .3s ease .1s; } .teams>ul>li>a>div:hover>img { transform-origin: 50% 1rem; transform: scale(1.25); filter: grayscale(0); -webkit-transition: all .3s ease .1s; -moz-transition: all .3s ease .1s; -o-transition: all .3s ease .1s; transition: all .3s ease .1s; } .teams>ul>li>a>p { width: 100%; box-sizing: border-box; color: var(--footer-pen-color3); display: flex; flex-direction: row; align-items: center; justify-content: flex-end; bottom: 0.5rem; right: 2.5rem; position: absolute; } .teams>ul>li>a>p::after { content: ''; background-image: url(/image/arrowRight.svg); background-repeat: no-repeat; background-size: auto 1.125rem; width: 1.375rem; height: 1.125rem; -webkit-transition: all .3s ease .1s; -moz-transition: all .3s ease .1s; -o-transition: all .3s ease .1s; transition: all .3s ease .1s; position: absolute; right: -2rem; } .teams>ul>li>a>p:hover::after, .teams>ul>li>a>h3:hover+p::after { right: -2.5rem; -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) { .teams>ul { flex-direction: column; padding: 3rem 0 2.3rem; } .teams>ul>li { width: 100%; padding: 0; margin: 0 0 1.5rem 0; } .teams.showWithAnim>ul>li { transform: translateY(10rem); opacity: 0; } .teams.showWithAnim>ul>li.show { transform: translateY(0); opacity: 1; -webkit-transition: all 0.8s ease; -moz-transition: all 0.8s ease; -o-transition: all 0.8s ease; transition: all 0.8s ease; } .teams>ul>li>a>h3 { padding: 1.25rem 1.5rem 3rem 2rem; box-sizing: border-box; font-size: 1.25rem; line-height: 1.375rem; } .teams>ul>li>a:hover>h3 { color: var(--footer-pen-color3); } .teams>ul>li>a::after { bottom: 1.250rem; left: 2rem; } .teams>ul>li>a>p { padding: 0; height: 2.5rem; font-size: 0.75rem; line-height: 1rem; right: 2rem; } .teams>ul>li>a>p::after { width: 0.875rem; background-size: auto 0.75rem; height: 0.75rem; right: -1.5rem; } .teams>ul>li>a:hover>p::after { background-position-x: 0; } .teams>ul>li>a>h3::before { 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); bottom: 2.6rem; } .teams>ul>li>a>p:hover::after, .teams>ul>li>a>h3:hover+p::after { right: -1.5rem; } .teams>ul>li>a>div { clip-path: polygon(0 0, 100% 0, 100% 100%, calc(2rem + 1px) 100%, 0 calc(100% - 2.5rem - 1px)); } .teams>ul>li>a>div:hover { border-radius: 0; } .teams>ul>li>a>div:hover>img { transform: scale(1.2); filter: grayscale(1); } } .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; } 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; } }