/* * CSS for hpp.com, design 2017 * design @ 2017 radikant.com * adaption @ 2017 ruhmesmeile.com * adaption @ 2022-2026 koenige.org */ /* normalize + base elements */ html { font-family: sans-serif; line-height: 1.15; -webkit-text-size-adjust: 100%; } body { margin: 0; --font-regular: HelveticaNeueLTStd-Roman, Helvetica, "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif; --font-bold: HelveticaNeueLTStd-Bd, Helvetica, "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif; font-family: var(--font-regular); font-weight: 400; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; letter-spacing: 0.018em; color: #000; background-color: #fff; } article, aside, footer, header, nav, section { display: block; } h1 { margin: 0.67em 0; font-size: 2em; } figcaption, figure, main { display: block; } figure { margin: 1em 40px; } hr { overflow: visible; box-sizing: content-box; height: 0; } pre { font-family: monospace, monospace; font-size: 1em; } a { background-color: transparent; text-decoration: none; color: inherit; } a:active, a:hover { outline-width: 0; } abbr[title] { border-bottom: none; text-decoration: underline dotted; } b, strong { font-weight: inherit; font-weight: bolder; font-family: var(--font-bold); font-weight: 400; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } code, kbd, samp { font-family: monospace, monospace; font-size: 1em; } dfn { font-style: italic; } mark { color: #000; background-color: #ff0; } small { font-size: 80%; } sub, sup { position: relative; font-size: 75%; line-height: 0; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } audio, video { display: inline-block; } audio:not([controls]) { display: none; height: 0; } img { border-style: none; max-width: 100%; height: auto; } svg:not(:root) { overflow: hidden; } button, input, optgroup, select, textarea { margin: 0; font-family: sans-serif; font-size: 100%; line-height: 1.15; } button, input { overflow: visible; } button, select { text-transform: none; } [type="reset"], [type="submit"], button, html [type="button"] { appearance: button; } [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner, button::-moz-focus-inner { padding: 0; border-style: none; } [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring, button:-moz-focusring { outline: 1px dotted ButtonText; } fieldset { margin: 0 2px; padding: 0.35em 0.625em 0.75em; border: 1px solid silver; } legend { display: table; box-sizing: border-box; max-width: 100%; padding: 0; color: inherit; white-space: normal; } progress { display: inline-block; vertical-align: baseline; } textarea { overflow: auto; } [type="checkbox"], [type="radio"] { box-sizing: border-box; padding: 0; } [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; } [type="search"] { outline-offset: -2px; appearance: textfield; } [type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration { appearance: none; } ::-webkit-file-upload-button { font: inherit; appearance: button; } details, menu { display: block; } summary { display: list-item; } canvas { display: inline-block; } template { display: none; } [hidden] { display: none; } /* grid */ .l-main-wrap { max-width: 1100px; margin-left: auto; margin-right: auto; padding-right: 40px; padding-left: 40px; position: relative; } .l-main-wrap:after, .l-main-wrap:before { display: table; content: ""; } .l-main-wrap:after { clear: both; } .l-row { display: block; } .l-row:after, .l-row:before { display: table; content: ""; } .l-row:after { clear: both; } /* base layout */ body, html { width: 100%; height: 100%; -webkit-text-size-adjust: none; font-size: 19px; line-height: 1.8; } .loading-indicator { font-size: 20px; margin: 0 auto; border-width: 0.2em; border-style: solid; border-color: rgba(0, 0, 0, 0.15); border-left-color: #000; transform: translateZ(0); animation: spinner 1.1s infinite linear; } .loading-indicator, .loading-indicator:after { border-radius: 50%; width: 2em; height: 2em; } @keyframes spinner { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } } .anchor-target:before, .content-wrap:before { content: ""; display: block; width: 0; height: 0; margin: 0; visibility: hidden; } .header-is-scrolling .anchor-target:before, .header-is-scrolling .content-wrap:before { height: 0; margin: 0; } /* typography */ .headline, h1, h2, h3 { margin: 0; padding: 0; font-size: 100%; border: 0; vertical-align: baseline; font-weight: 400; font-style: normal; } .headline-1, h1 { font-family: var(--font-bold); font-weight: 400; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; letter-spacing: 0; margin-bottom: 1em; font-size: 3em; line-height: 1.1; } .lang-zh .headline-1, .lang-zh h1 { font-weight: 700; } .headline-1 a, h1 a { text-decoration: none; } .headline-2, h2 { font-family: var(--font-bold); font-weight: 400; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; letter-spacing: -0.005em; margin-bottom: 1em; font-size: 2.1em; line-height: 1.1; } .lang-zh .headline-2, .lang-zh h2 { font-weight: 700; } .headline-2 a, h2 a { text-decoration: none !important; } .headline-3, h3 { font-family: var(--font-bold); font-weight: 400; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; margin-bottom: 1em; font-size: 1.5em; line-height: 1.1; } .lang-zh .headline-3, .lang-zh h3 { font-weight: 700; } .headline-3 a, h3 a { text-decoration: none !important; } .section-headline { margin-bottom: 1em; font-family: var(--font-bold); font-weight: 400; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: 0.85em; line-height: 1.4; text-transform: uppercase; letter-spacing: 4px; } .lang-zh .section-headline { font-weight: 700; } .content-headline { text-align: center; margin-bottom: 2em; float: left; display: block; margin-right: 1.40845%; width: 49.29577%; margin-left: 25.35211%; } .content-headline:last-child { margin-right: 0; } .template--content-70-sidebar-30 .template__content .content-headline { float: left; display: block; margin-right: 1.40845%; width: 74.64789%; margin-left: 12.67606%; } .template--content-70-sidebar-30 .template__content .content-headline:last-child { margin-right: 0; } .template--content-70-sidebar-30 .template__sidebar__content .content-headline { float: left; display: block; margin-right: 1.40845%; width: 100%; margin-left: 0; margin-bottom: 1em; } .template--content-70-sidebar-30 .template__sidebar__content .content-headline:last-child { margin-right: 0; } .content-headline--page_header { float: left; display: block; margin-right: 1.40845%; width: 100%; margin-left: 0; float: left; display: block; margin-right: 1.40845%; width: 66.19718%; margin-left: 16.90141%; } .content-headline--page_header:last-child { margin-right: 0; margin-right: 0; } .content-headline--align_left { float: left; display: block; margin-right: 1.40845%; width: 49.29577%; margin-left: 0; text-align: left; } .content-headline--align_left:last-child { margin-right: 0; } .template--content-70-sidebar-30 .template__content .content-headline--align_left { float: left; display: block; margin-right: 1.40845%; width: 66.19718%; margin-left: 0; } .template--content-70-sidebar-30 .template__content .content-headline--align_left:last-child { margin-right: 0; } .content-headline--align_leftin { float: left; display: block; margin-right: 1.40845%; width: 49.29577%; margin-left: 16.90141%; text-align: left; } .content-headline--align_leftin:last-child { margin-right: 0; } .template--content-70-sidebar-30 .template__content .content-headline--align_leftin { float: left; display: block; margin-right: 1.40845%; width: 66.19718%; margin-left: 0; } .template--content-70-sidebar-30 .template__content .content-headline--align_leftin:last-child { margin-right: 0; } .content-headline--page_header.content-headline--align_left { margin-left: 0; } .content-headline__subheader { line-height: 1.4; margin: 0.5em 0 0; font-family: var(--font-bold); font-weight: 400; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .lang-zh .content-headline__subheader { font-weight: 700; } .l-header-only-wrap { padding-top: 4rem; padding-bottom: 4rem; padding-bottom: 0; } a:not([class]) { transition-property: background; transition-duration: 0.15s; transition-timing-function: ease-in-out; font-family: var(--font-bold); font-weight: 400; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #000; text-decoration: underline; } .lang-zh a:not([class]) { font-weight: 700; } a:not([class]):focus, a:not([class]):hover { color: rgba(0, 0, 0, 0.5); } .link-more { text-decoration: none; } .link-more:focus, .link-more:hover { color: rgba(0, 0, 0, 0.5); } p a[target="_blank"]::after { display: inline-block; padding: 0 0.1em 0 0.2em; font-size: 0.9em; content: "\25F3"; vertical-align: top; text-decoration: none; } ol, ul { margin: 0; margin-bottom: 1em; padding: 0; padding-left: 1em; } ol li, ul li { margin-bottom: 0.5em; } ul { list-style: disc; } ul ul { margin-top: 0.5em; margin-bottom: 0; } ol { list-style: decimal; } ol ol { margin-top: 0.5em; margin-bottom: 0; } .text, p { margin: 0; padding: 0; border: 0; vertical-align: baseline; margin-bottom: 1em; line-height: 1.8; } .text--teaser { font-size: 1.2em; line-height: 1.5; } .text-center { text-align: center; } .lang-zh b, .lang-zh strong { font-weight: 700; } em, i { font-style: italic; } ::selection { text-shadow: inherit; background-color: #000; color: #fff; } svg { width: 24px; height: 24px; } .icon { display: inline-block; vertical-align: middle; fill: currentColor; } .form-row { margin-bottom: 0.75rem; } /* intro visual */ .intro-visual { position: relative; z-index: 500; width: 100%; overflow: hidden; } .intro-visual__content { position: absolute; top: 0; width: 100%; height: 100%; z-index: 100; box-sizing: border-box; transition-property: all; transition-duration: 0.5s; transition-timing-function: ease-in-out; } .intro-visual__content.js-video-is-loaded { opacity: 1; } .intro-visual__image, .intro-visual__video { z-index: 5; position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; } .intro-visual__overlay { position: absolute; top: 0; left: 0; z-index: 10; width: 100%; height: 100%; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoAgMAAADxkFD+AAAACVBMVEUAAAD///8AAABzxoNxAAAAA3RSTlMAAJlzpe8+AAAAG0lEQVQY02NcwAAFjIxITAaszFG1A6w2FM4GAMpWDSVzkJMQAAAAAElFTkSuQmCC); background-size: 20px 20px; } .intro-visual-background { display: flex; align-items: center; text-align: center; position: absolute; z-index: 50; top: 0; left: 0; width: 100%; height: 100%; background-color: #f2f2f2; } .intro-visual-background picture { width: 100%; height: 100%; } .intro-visual-background .loading-indicator { transform: translate(-50%, -50%); position: absolute; top: 50%; left: 50%; z-index: 10; border-color: rgba(255, 255, 255, 0.15); border-left-color: #fff; } .intro-visual-background.js-video-is-loaded .loading-indicator { display: none; } .intro-visual-background img { opacity: 0.7; } .intro-visual__content--image .intro-visual-background img { opacity: 1; } .intro-visual__box { position: absolute; z-index: 20; width: 100%; padding: 3em; max-width: 700px; box-sizing: border-box; background-color: rgba(0, 0, 0, 0.85); color: #fff; } .intro-visual__box-wrap { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 20; opacity: 0; } .intro-visual__box a:not(.button) { color: inherit; } .intro-visual__box--light { background-color: rgba(255, 255, 255, 0.9); color: #000; } .intro-visual__box--transparent { background-color: transparent; padding: 0; } .intro-visual__box--transparent_text_dark { background-color: transparent; color: #000; } .intro-visual__box--line-padded { background-color: transparent; color: #000; padding: 0; } .intro-visual__box--line-padded .intro-visual__text > p, .intro-visual__box--line-padded .intro-visual__topic { display: inline; padding: 0.5rem 0; -webkit-box-decoration-break: clone; box-decoration-break: clone; font-size: 1.6em; line-height: 2; color: #000; background: #fff; box-shadow: 1rem 0 0 #fff, -1rem 0 0 #fff; } .intro-visual__box--line-padded .intro-visual__text { margin: 0; } .intro-visual__box--line-padded-dark .intro-visual__text > p, .intro-visual__box--line-padded-dark .intro-visual__topic { color: #fff; background: #000; box-shadow: 1rem 0 0 #000, -1rem 0 0 #000; } .pos--left .intro-visual__box { left: 40px; } .pos--left .intro-visual__box.intro-visual__box--line-padded .intro-visual__text, .pos--left .intro-visual__box.intro-visual__box--line-padded .intro-visual__topic { margin-left: 1rem; } .pos--hor-middle .intro-visual__box { transform: translateX(-50%); left: 50%; text-align: center; } .pos--hor-middle .intro-visual__box.intro-visual__box--line-padded .intro-visual__text, .pos--hor-middle .intro-visual__box.intro-visual__box--line-padded .intro-visual__topic { margin: 0; } .pos--right .intro-visual__box { right: 40px; text-align: right; } .pos--right .intro-visual__box.intro-visual__box--line-padded .intro-visual__text, .pos--right .intro-visual__box.intro-visual__box--line-padded .intro-visual__topic { margin-right: 1rem; } .pos--vert-middle .intro-visual__box { top: 50%; transform: translateY(-50%); } .pos--vert-middle.pos--hor-middle .intro-visual__box { left: 50%; top: 50%; transform: translate(-50%, -50%); } .pos--vert-bottom .intro-visual__box { bottom: 80px; } .intro-visual__topic { font-size: 1.2em; line-height: 1.1; margin-bottom: 0.6em; font-family: var(--font-bold); font-weight: 400; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .lang-zh .intro-visual__topic { font-weight: 700; } .intro-visual__text { margin-bottom: 1.5em; line-height: 1.4em; } .intro-visual__link { margin-top: 0.25em; } .intro-visual__hint { transition-property: transform; transition-duration: 0.3s; transition-timing-function: ease-in-out; transform: translate(0, -15px); position: absolute; z-index: 120; bottom: 0; left: 50%; margin-left: -25px; cursor: pointer; } .intro-visual__hint .icon { fill: #fff; width: 50px; height: 50px; } /* keyvisual + slider */ .keyvisual.is-scrollable { position: relative; z-index: 1; } .keyvisual.is-scrollable .keyvisual__item { background: 0 0; } .keyvisual.is-scrollable .keyvisual__item__image { opacity: 0; } .keyvisual.is-fixed { position: fixed; width: 100%; top: 0; left: 0; } .keyvisual.is-fixed .keyvisual__item__content { display: none; } .keyvisual__item { position: relative; width: 100%; background-color: rgba(0, 0, 0, 0.1); } .keyvisual__item__content { width: 100%; position: absolute; top: 0; height: 100%; opacity: 0; } .keyvisual__item__image { position: static; height: auto; } .keyvisual__item__image img { width: 100%; max-width: none; } .keyvisual__box { padding-right: 40px; padding-left: 40px; float: left; padding: 2.2rem; width: auto; box-sizing: border-box; max-width: 45%; background-color: rgba(0, 0, 0, 0.85); color: #fff; position: absolute; } .keyvisual__box a:not(.button) { color: inherit; } .keyvisual__box--light { background-color: rgba(255, 255, 255, 0.9); color: #000; } .keyvisual__box--transparent { background-color: transparent; padding: 0; } .keyvisual__box--transparent_text_dark { background-color: transparent; color: #000; } .keyvisual__box--line-padded { background-color: transparent; color: #000; padding: 0; } .keyvisual__box--line-padded .keyvisual__text > p, .keyvisual__box--line-padded .keyvisual__topic { display: inline; padding: 0.5rem 0; -webkit-box-decoration-break: clone; box-decoration-break: clone; font-size: 1.6em; line-height: 2.1; color: #000; background: #fff; box-shadow: 1rem 0 0 #fff, -1rem 0 0 #fff; } .keyvisual__box--line-padded .keyvisual__text { margin: 0; } .keyvisual__box--line-padded-dark .keyvisual__text > p, .keyvisual__box--line-padded-dark .keyvisual__topic { color: #fff; background: #000; box-shadow: 1rem 0 0 #000, -1rem 0 0 #000; } .pos--left .keyvisual__box { left: 40px; } .pos--left .keyvisual__box.keyvisual__box--line-padded .keyvisual__text, .pos--left .keyvisual__box.keyvisual__box--line-padded .keyvisual__topic { margin-left: 1rem; } .pos--hor-middle .keyvisual__box { transform: translateX(-50%); left: 50%; text-align: center; } .pos--hor-middle .keyvisual__box.keyvisual__box--line-padded .keyvisual__text, .pos--hor-middle .keyvisual__box.keyvisual__box--line-padded .keyvisual__topic { margin: 0; } .pos--right .keyvisual__box { right: 40px; text-align: right; } .pos--right .keyvisual__box.keyvisual__box--line-padded .keyvisual__text, .pos--right .keyvisual__box.keyvisual__box--line-padded .keyvisual__topic { margin-right: 1rem; } .pos--vert-middle .keyvisual__box { top: 50%; transform: translateY(-50%); } .pos--vert-middle.pos--hor-middle .keyvisual__box { left: 50%; top: 50%; transform: translate(-50%, -50%); } .pos--vert-bottom .keyvisual__box { bottom: 40px; } .keyvisual__topic { font-size: 2em; line-height: 1.1; margin-bottom: 0.4em; font-family: var(--font-bold); font-weight: 400; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .lang-zh .keyvisual__topic { font-weight: 700; } .keyvisual__text { margin-top: 0.4em; } .keyvisual__text p:last-child { margin-bottom: 0; } .keyvisual__link { margin-top: 0.25em; } /* content elements */ .template--content-100 .ce-textpic { float: left; display: block; margin-right: 1.40845%; width: 66.19718%; margin-left: 16.90141%; } .template--content-100 .ce-textpic:last-child { margin-right: 0; } .ce-textpic--center .ce-media { text-align: center; } .ce-textpic--right .ce-gallery { max-width: 50%; float: right; margin-left: 2em; } .ce-textpic--left .ce-gallery { max-width: 50%; float: left; margin-right: 2em; } .ce-textpic--nowrap .ce-bodytext { overflow: hidden; } .ce-textpic p:last-child { margin-bottom: 0; } .ce-gallery__column { margin-bottom: 1em; } .ce-textpic--below .ce-gallery__column { margin-bottom: 0; margin-top: 1em; } .ce-media__video iframe, .ce-media__video video { max-width: 100%; } /* navigation */ .nav-sidebar { transition-property: transform; transition-duration: 0.4s; transition-timing-function: ease-in-out; width: 100%; max-width: 500px; margin: 0 auto; position: relative; left: 175px; transform: translateY(100px); padding-bottom: 1rem; } .sidebar-is-shown .nav-sidebar { transform: translateY(0); } .nav-sidebar__icon { display: flex; flex-shrink: 0; float: right; position: relative; top: 3px; width: 1.6em; height: 1.6em; padding-left: 2px; margin-left: auto; vertical-align: middle; fill: currentColor; pointer-events: none; display: none; } .nav-sidebar__list { margin: 0; padding: 0; list-style: none; } .nav-sidebar__list li { margin: 0; padding: 0; } .nav-sidebar__list__item a, .nav-sidebar__list__item span { font-family: var(--font-bold); font-weight: 400; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; position: relative; display: inline-block; padding: 0.2rem 1rem; margin-bottom: 5px; text-decoration: none; font-size: 2rem; letter-spacing: 0; transition-duration: 0s; outline: 0; } .lang-zh .nav-sidebar__list__item a, .lang-zh .nav-sidebar__list__item span { font-weight: 700; } .nav-sidebar__list__item a:hover, .nav-sidebar__list__item span:hover, .nav-sidebar__list__item a:focus, .nav-sidebar__list__item span:focus { cursor: pointer; background-color: #000; color: #fff; } .nav-sidebar__list__item--current a { color: #000; font-family: var(--font-bold); font-weight: 400; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .lang-zh .nav-sidebar__list__item--current a { font-weight: 700; } .nav-sidebar__list__item--submenu-is-open > span { background-color: #000; color: #fff; } .nav-sidebar__list__item--submenu-is-open > span + ul { display: block; } .nav-sidebar__list__item--meta-item { display: none; } .nav-sidebar__list__item--meta-item svg { margin-right: 0.5em; } .nav-sidebar__submenu { display: none; margin: 0; padding: 0; list-style: none; list-style: none; } .nav-sidebar__submenu li { margin: 0; padding: 0; list-style: none; } .nav-sidebar__submenu li a, .nav-sidebar__submenu li span { font-family: var(--font-regular); font-weight: 400; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; padding: 0; font-size: 1rem; padding-top: 0.75em; padding-bottom: 0.75em; padding-left: 1rem; padding-right: 1rem; } .nav-sidebar__submenu li.nav-sidebar__list__item--current a, .nav-sidebar__submenu li.nav-sidebar__list__item--current span { font-family: var(--font-bold); font-weight: 400; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .lang-zh .nav-sidebar__submenu li.nav-sidebar__list__item--current a, .lang-zh .nav-sidebar__submenu li.nav-sidebar__list__item--current span { font-weight: 700; } .nav-lang { display: none; } .nav-lang { display: block; } .nav-lang #nav-lang { display: none; } .nav-lang--desktop { display: flex; } .nav-lang--desktop .nav-lang__list { margin: 0; padding: 0; list-style: none; display: flex; margin-left: -0.3em; } .nav-lang--desktop .nav-lang__list li { margin: 0; padding: 0; } .nav-lang--desktop .nav-lang__list__item { position: relative; font-size: 0.8em; } .nav-lang--desktop .nav-lang__list__item a, .nav-lang--desktop .nav-lang__list__item strong { padding: 0 0.3em; text-decoration: none; font-family: var(--font-regular); font-weight: 400; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .nav-lang--desktop .nav-lang__list__item--current { color: rgba(0, 0, 0, 0.5); } .nav-lang__list__item--disabled .nav-lang__list__label { opacity: 0.45; cursor: not-allowed; } .nav-lang--desktop .nav-lang__list__item--disabled .nav-lang__list__label { display: inline-block; padding: 0 0.3em; font-family: var(--font-regular); font-weight: 400; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .nav-lang__list__item--current-disabled strong { opacity: 0.45; cursor: not-allowed; } /* hamburger toggle */ .menu_sidebar-toggle-wrap { position: fixed; top: 50px; transform: translateY(-50%); left: 40px; z-index: 2960; display: flex; align-items: center; justify-content: center; padding: 20px; margin-left: -20px; transition-property: background; transition-duration: 0.2s; transition-timing-function: ease-in-out; transition-delay: 0.3s; } /* animated elements */ .content-wrap { background-color: #fff; min-height: 100vh; } .ext-team-gallery { opacity: 0; } /* footer */ .main-footer { width: 100%; padding: 50px 0; background: #000; font-size: 0.8em; line-height: 1.5; color: #fff; } .main-footer.is-fixed { position: fixed; bottom: 0; left: 0; z-index: 0; } .main-footer a { transition-property: opacity; transition-duration: 0.15s; transition-timing-function: ease-in-out; } .main-footer a:hover { opacity: 0.6; color: #fff; background: 0 0; } /* page layout + sidebar + templates */ .page-wrap { display: flex; align-items: stretch; width: 100%; } .page-wrap__sidebar { position: relative; z-index: 2950; width: 100%; min-height: 100vh; background-color: rgba(255, 255, 255, 0.98); flex-shrink: 0; } .page-wrap__sidebar--fixed { position: fixed; top: 0; left: 0; height: 100vh; overflow: hidden; } .page-wrap__sidebar--fixed .page-wrap__sidebar__content { height: 100%; overflow-y: scroll; } .page-wrap__sidebar--fixed + .page-wrap__content { position: absolute; top: 0; right: 0; width: calc(100% - 100%); } .page-wrap__sidebar--hidden { left: -100%; opacity: 0; transform: translateY(150px); transition-property: opacity, transform; transition-duration: 0.3s; transition-timing-function: ease-out; } .sidebar-is-shown .page-wrap__sidebar--hidden { left: 0; opacity: 1; transform: translateY(0); } .page-wrap__sidebar--hidden + .page-wrap__content { position: static; width: 100%; } .page-wrap__sidebar .nav-lang { display: block; } .page-wrap__content { height: 100%; min-height: 100vh; flex: 1; overflow-x: hidden; } .template--content-70-sidebar-30 { max-width: 1100px; margin-left: auto; margin-right: auto; position: relative; } .template--content-70-sidebar-30:after, .template--content-70-sidebar-30:before { display: table; content: ""; } .template--content-70-sidebar-30:after { clear: both; } .template--content-70-sidebar-30 .template__content { float: left; display: block; margin-right: 1.40845%; width: 66.19718%; min-height: 1px; } .template--content-70-sidebar-30 .template__content:last-child { margin-right: 0; } .template--content-70-sidebar-30 .template__sidebar { float: left; display: block; margin-right: 1.40845%; width: 32.39437%; } .template--content-70-sidebar-30 .template__sidebar:last-child { margin-right: 0; } .template--content-70-sidebar-30 .template__sidebar__content { padding-left: 50px; font-size: 0.8em; padding-top: calc(4rem - 1.5rem); } .l-section { padding-top: 4rem; padding-bottom: 4rem; background-color: #fff; } .template--content-70-sidebar-30 .template__sidebar__content .l-section { padding-top: 4rem; padding-bottom: 4rem; padding-top: 1.5rem; padding-bottom: 1.5rem; } .l-section--bg-1 { background-color: #ededed; } .l-section--space-before-small { padding-top: 1rem; } .l-section--space-after-small { padding-bottom: 1rem; } /* responsive */ /* responsive – desktop */ @media (min-width: 950px) { .template--content-70-sidebar-30 .template__sidebar__content .content-headline__subheader { font-size: 1.1em; } .template--content-70-sidebar-30 .template__sidebar__content .ce-textpic--right .ce-gallery { max-width: 40%; margin-left: 1em; } .template--content-70-sidebar-30 .template__sidebar__content .ce-textpic--left .ce-gallery { max-width: 40%; margin-right: 1em; } .template--content-70-sidebar-30 .template__sidebar__content .ce-gallery__column { margin-bottom: 0.5em; } .template--content-70-sidebar-30 .template__sidebar__content .content-headline h2, .template--content-70-sidebar-30 .template__sidebar__content .content-headline h3 { font-size: 1.2em; text-transform: none; } .template--content-70-sidebar-30 { padding-right: 40px; padding-left: 40px; } .template--content-70-sidebar-30 .l-main-wrap { margin: 0; padding: 0; } .template--content-70-sidebar-30 .template__sidebar__content .l-section .l-main-wrap { padding-left: 20px; padding-right: 20px; } .template--content-70-sidebar-30 .template__content .l-section { width: 100%; padding-right: 40px; padding-left: 40px; margin-left: -40px; } } @media (min-width: 950px) and (max-width: 639px) { .template--content-70-sidebar-30 { padding-right: 10px; padding-left: 10px; } .template--content-70-sidebar-30 .template__content .l-section { padding-right: 10px; padding-left: 10px; margin-left: -10px; } } @media screen and (min-width: 950px) and (max-width: 950px), print and (min-width: 950px) { .template--content-70-sidebar-30 { padding-right: 25px; padding-left: 25px; } .template--content-70-sidebar-30 .template__content .l-section { padding-right: 25px; padding-left: 25px; margin-left: -25px; } } /* responsive – large screens */ @media (max-width: 1900px) { .keyvisual__item { height: 600px; } .keyvisual__item.keyvisual__item--small { height: 300px; } .keyvisual__item__image { position: relative; height: 600px; overflow: hidden; width: 100%; } .keyvisual__item--small .keyvisual__item__image { height: 300px; } .keyvisual__item__image img { transform: translate(-50%, -50%); position: absolute; top: 50%; left: 50%; z-index: 0; height: 600px; width: auto !important; } .keyvisual__item--small .keyvisual__item__image img { height: 300px; } } @media (max-width: 1400px) { .page-wrap__sidebar { width: 100%; } .page-wrap__sidebar--fixed + .page-wrap__content { width: calc(100% - 100%); } } /* responsive – tablet */ @media (max-width: 1080px) { .menu_sidebar-toggle-wrap { top: 40px; padding: 10px; margin-left: -9px; } .page-wrap__sidebar { position: fixed; top: 0; left: -100%; right: auto; height: 100vh; width: 100%; overflow: hidden; } .sidebar-is-shown .page-wrap__sidebar { left: 0; right: auto; } .page-wrap__sidebar .page-wrap__sidebar__content { height: 100%; overflow-y: auto; } .page-wrap__sidebar--fixed + .page-wrap__content { position: static; width: 100%; } .page-wrap__content { width: 100%; } } /* responsive – tablet small */ @media screen and (max-width: 950px), print { .l-main-wrap { padding-right: 25px; padding-left: 25px; } .anchor-target:before, .content-wrap:before { height: 0; margin: 0; } .content-headline { float: left; display: block; margin-right: 1.40845%; width: 74.64789%; margin-left: 12.67606%; margin-bottom: 1em; } .content-headline:last-child { margin-right: 0; } .template--content-70-sidebar-30 .template__sidebar__content .content-headline { float: left; display: block; margin-right: 1.40845%; width: 74.64789%; margin-left: 12.67606%; text-align: center; } .template--content-70-sidebar-30 .template__sidebar__content .content-headline:last-child { margin-right: 0; } .content-headline--align_left { float: left; display: block; margin-right: 1.40845%; width: 66.19718%; margin-left: 0; } .content-headline--align_left:last-child { margin-right: 0; } .template--content-70-sidebar-30 .template__content .content-headline--align_left { float: left; display: block; margin-right: 1.40845%; width: 66.19718%; margin-left: 0; } .template--content-70-sidebar-30 .template__content .content-headline--align_left:last-child { margin-right: 0; } .template--content-70-sidebar-30 .template__sidebar__content .content-headline--align_left { float: left; display: block; margin-right: 1.40845%; width: 66.19718%; margin-left: 0; } .template--content-70-sidebar-30 .template__sidebar__content .content-headline--align_left:last-child { margin-right: 0; } .content-headline--align_leftin { float: left; display: block; margin-right: 1.40845%; width: 66.19718%; margin-left: 0; } .content-headline--align_leftin:last-child { margin-right: 0; } .template--content-70-sidebar-30 .template__content .content-headline--align_leftin { float: left; display: block; margin-right: 1.40845%; width: 66.19718%; margin-left: 0; } .template--content-70-sidebar-30 .template__content .content-headline--align_leftin:last-child { margin-right: 0; } .template--content-70-sidebar-30 .template__sidebar__content .content-headline--align_leftin { float: left; display: block; margin-right: 1.40845%; width: 66.19718%; margin-left: 0; } .template--content-70-sidebar-30 .template__sidebar__content .content-headline--align_leftin:last-child { margin-right: 0; } .l-header-only-wrap { padding-top: 3rem; padding-bottom: 3rem; padding-bottom: 0; } .intro-visual-background img { opacity: 1; } .intro-visual__box { max-width: 650px; } .pos--left .intro-visual__box { left: 25px; } .pos--right .intro-visual__box { right: 25px; } #page_1 .intro-visual__hint { display: none; } .keyvisual__item { height: auto !important; } .keyvisual__item__content { position: static; height: auto; transform: translate(0, 0); background-color: #bfbfbf; } .keyvisual__item__image { height: 400px; } .keyvisual__item--small .keyvisual__item__image { height: 250px; } .keyvisual__item__image--offset img { margin-left: -200px; } .keyvisual__item__image img { height: 400px; } .keyvisual__item--small .keyvisual__item__image img { height: 250px; } .keyvisual__box { padding-right: 25px; padding-left: 25px; zoom: 1; max-width: 1100px; margin-left: auto; margin-right: auto; position: static !important; max-width: none !important; transform: translate(0, 0) !important; padding-top: 1.5em; padding-bottom: 1.5em; float: none; border: 1px solid transparent; } .keyvisual__box:after, .keyvisual__box:before { display: table; content: ""; } .keyvisual__box:after { clear: both; } .keyvisual__box--light { background-color: #fff; border-bottom: 1px solid rgba(0, 0, 0, 0.15); } .keyvisual__box--transparent { color: #000; background-color: #fff; border-bottom: 1px solid rgba(0, 0, 0, 0.15); } .keyvisual__box--transparent .button--ghost_light { background: 0 0; border-color: #000; color: #000; } .keyvisual__box--transparent .button--ghost_light svg { fill: currentColor; } .keyvisual__box--transparent .button--ghost_light:before { background: #ccc; } .keyvisual__box--transparent .button--ghost_light:hover { border-color: #000; text-decoration: none; color: #000; } .keyvisual__box--transparent .button--ghost_light:hover:before { background: #ccc; } .keyvisual__box--transparent .button--ghost_light:active { border-color: #fff; transform: scale(0.95); color: #000; color: #000; } .keyvisual__box--transparent .button--ghost_light:active:before { background: #999; } .keyvisual__box--transparent .button--ghost_light[disabled] { background-color: transparent; color: #000; opacity: 0.75; } .keyvisual__box--transparent_text_dark { background-color: #fff; border-bottom: 1px solid rgba(0, 0, 0, 0.15); } .keyvisual__box--line-padded .keyvisual__text > p, .keyvisual__box--line-padded .keyvisual__topic { font-size: 1.5rem; padding: 0; line-height: 1.5; font-size: 1.3rem; } .keyvisual__box--line-padded .keyvisual__text > p .button, .keyvisual__box--line-padded .keyvisual__topic .button { border-color: #000; } .keyvisual__box--line-padded { background-color: #fff; border-bottom: 1px solid rgba(0, 0, 0, 0.15); } .keyvisual__box--line-padded-dark { background: #000; } .keyvisual__box--line-padded-dark .button { border-color: #fff; } .keyvisual__topic { font-size: 1.8em; } .template--content-100 .ce-textpic { float: left; display: block; margin-right: 1.40845%; width: 100%; margin-left: 0; } .template--content-100 .ce-textpic:last-child { margin-right: 0; } .nav-sidebar { max-width: 300px; left: 75px; } .nav-sidebar__list__item a, .nav-sidebar__list__item span { font-size: 1.75rem; margin-bottom: 10px; } .menu_sidebar-toggle-wrap { left: 25px; } .template--content-70-sidebar-30 .template__content { float: left; display: block; margin-right: 1.40845%; width: 100%; margin: 0; } .template--content-70-sidebar-30 .template__content:last-child { margin-right: 0; } .template--content-70-sidebar-30 .template__sidebar { float: left; display: block; margin-right: 1.40845%; width: 100%; margin: 0; } .template--content-70-sidebar-30 .template__sidebar:last-child { margin-right: 0; } .template--content-70-sidebar-30 .template__sidebar__content { padding: 0; font-size: 1em; } .l-section { padding-top: 3rem; padding-bottom: 3rem; } .template--content-70-sidebar-30 .template__sidebar__content .l-section { padding-top: 3rem; padding-bottom: 3rem; } .l-section--space-before-small { padding-top: 0.5rem; } .l-section--space-after-small { padding-bottom: 0.5rem; } } /* responsive – mobile */ @media (max-width: 639px) { .l-main-wrap { padding-right: 10px; padding-left: 10px; } body, html { font-size: 15px; } .loading-indicator { font-size: 15px; } .anchor-target:before, .content-wrap:before { height: 80px; margin: -80px 0 0; } .headline-1, h1 { font-size: 1.7em; margin-bottom: 0.5em; } .headline-2, h2 { font-size: 1.4em; margin-bottom: 0.5em; } .headline-3, h3 { font-size: 1.2em; margin-bottom: 0.5em; } .content-headline { float: left; display: block; margin-right: 1.40845%; width: 100%; margin-left: 0; } .content-headline:last-child { margin-right: 0; } .template--content-70-sidebar-30 .template__content .content-headline { float: left; display: block; margin-right: 1.40845%; width: 100%; margin-left: 0; } .template--content-70-sidebar-30 .template__content .content-headline:last-child { margin-right: 0; } .template--content-70-sidebar-30 .template__sidebar__content .content-headline { float: left; display: block; margin-right: 1.40845%; width: 100%; margin-left: 0; text-align: left; } .template--content-70-sidebar-30 .template__sidebar__content .content-headline:last-child { margin-right: 0; } .content-headline__subheader { font-size: 1.1em; } .l-header-only-wrap { padding-top: 2rem; padding-bottom: 2rem; padding-bottom: 0; } .text--teaser { font-size: 1.2em; } .intro-visual { min-height: 100px; } .intro-visual__box { max-width: 300px; font-size: 0.8em; } .intro-visual__box--line-padded .intro-visual__text > p, .intro-visual__box--line-padded .intro-visual__topic { line-height: 2.1; } .pos--left .intro-visual__box { left: 10px; } .pos--right .intro-visual__box { right: 10px; } .intro-visual__topic { font-size: 1.6em; margin-bottom: 1em; line-height: 1.5; } .keyvisual__item__image { height: 300px; } .keyvisual__item--small .keyvisual__item__image { height: 200px; } .keyvisual__item__image--offset img { margin-left: -180px; } .keyvisual__item__image img { height: 300px; } .keyvisual__item--small .keyvisual__item__image img { height: 200px; } .keyvisual__box { padding-right: 10px; padding-left: 10px; margin: auto; } .keyvisual__topic { font-size: 1.5em; } .ce-textpic--right .ce-gallery { float: none; min-width: 100%; margin-left: 0; } .ce-textpic--left .ce-gallery { float: none; min-width: 100%; margin-right: 0; } .ce-textpic--nowrap .ce-bodytext { overflow: visible; } .ce-media { text-align: center; } .nav-sidebar { max-width: 300px; left: 0; } .nav-sidebar__list { padding-bottom: 5rem; } .nav-sidebar__list__item a, .nav-sidebar__list__item span { font-size: 1.5rem; margin-bottom: 10px; } .nav-sidebar__list__item--meta-item { display: block; } .nav-sidebar__list__item--meta-item svg { width: 22px; height: 22px; } .nav-sidebar__submenu li a, .nav-sidebar__submenu li span { margin-bottom: 5px; } .nav-lang--desktop .nav-lang__list { margin-left: -0.5em; } .nav-lang--desktop .nav-lang__list__item a, .nav-lang--desktop .nav-lang__list__item strong { padding: 0 0.5em; } .menu_sidebar-toggle-wrap { left: 10px; top: 25px; padding: 2px; margin-left: -6px; } .main-footer.is-fixed { position: static; } .page-wrap__sidebar { width: 100%; } .l-section { padding-top: 2rem; padding-bottom: 2rem; } .template--content-70-sidebar-30 .template__sidebar__content .l-section { padding-top: 2rem; padding-bottom: 2rem; } .l-section--space-before-small { padding-top: 0.5rem; } .l-section--space-after-small { padding-bottom: 0.5rem; } } /* responsive – small mobile */ @media (max-width: 425px) { .nav-sidebar { max-width: 250px; left: 65px; } } @media (max-width: 375px) { .nav-sidebar { max-width: 200px; left: 40px; } } /* print */ @media print { .headline, h1, h2, h3 { page-break-after: avoid; } a:not([class]) { color: inherit; } .keyvisual__item__image { display: none; } .keyvisual__box { background-color: transparent; border: 2px solid rgba(0, 0, 0, 0.25); margin: 1cm 0; width: auto; } .keyvisual__box, .keyvisual__box a { color: #000; } .ce-textpic--right .ce-gallery { max-width: 30%; } .ce-textpic--left .ce-gallery { max-width: 30%; } .ce-textpic--nowrap .ce-bodytext { overflow: visible; } .ce-gallery__column { max-width: 60%; margin-right: auto; margin-left: auto; } .nav-sidebar { display: none; } .nav-lang { display: none; } .main-footer { padding: 1em 0 0; border-top: 1px solid rgba(0, 0, 0, 0.5); color: inherit; page-break-inside: avoid; } .main-header { position: static; background: #ddd; box-shadow: none; -webkit-print-color-adjust: exact; print-color-adjust: exact; } } /* animations */ body.overlay-open { box-sizing: border-box; overflow: hidden } body:before { display: none; content: "breakpoint-xl" } @keyframes fadeInUp { from { opacity: 0; transform: translate3d(0, 100px, 0) } to { opacity: 1; transform: none } } @keyframes fadeInUpMobile { from { opacity: 0; transform: translate3d(0, 50px, 0) } to { opacity: 1; transform: none } } .fadeInUp { animation-name: fadeInUp } @media (max-width: 639px) { .fadeInUp { animation-name: fadeInUpMobile } } .animated { animation-duration: .5s; animation-fill-mode: both; animation-timing-function: ease-out } .animated.infinite { animation-iteration-count: infinite } /* buttons */ .button, .button-call-to-action { box-sizing: border-box; display: inline-block; position: relative; margin: 0; padding: .85em 1.1em .7em 1.1em; font-size: .9em; text-align: center; text-decoration: none; line-height: 1.2; border-width: 1px; border-style: solid; vertical-align: middle; cursor: pointer; appearance: none; background-clip: padding-box; font-family: var(--font-bold); font-weight: 400; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition-property: background, color, border, transform; transition-duration: .35s; z-index: 1; overflow: hidden; position: relative; background: #000; border-color: #000; color: #fff } .button-call-to-action:after, .button-call-to-action:before, .button:after, .button:before { display: table; content: "" } .button-call-to-action:after, .button:after { clear: both } .lang-zh .button, .lang-zh .button-call-to-action { font-weight: 700 } .button-call-to-action:before, .button:before { display: block; content: ''; position: absolute; height: 120%; width: 120%; top: 100%; left: 0; z-index: -1; transition-property: all; transition-duration: .3s; transition-timing-function: ease-in-out; background: #fff } .button-call-to-action:active:before, .button-call-to-action:hover:before, .button:active:before, .button:hover:before { top: -10% } .button-call-to-action>span, .button>span { display: block } .button svg, .button-call-to-action svg { fill: currentColor } .button-call-to-action:hover, .button:hover { border-color: #000; text-decoration: none; color: #000 } .button-call-to-action:hover:before, .button:hover:before { background: #fff } .button-call-to-action:active, .button:active { border-color: #fff; transform: scale(.95); color: #000 } .button-call-to-action:active:before, .button:active:before { background: #fff } .button-call-to-action[disabled], .button[disabled] { background-color: #000; color: #fff; opacity: .75 } .button--inverted, .button-call-to-action--inverted { box-sizing: border-box; display: inline-block; position: relative; margin: 0; padding: .85em 1.1em .7em 1.1em; font-size: .9em; text-align: center; text-decoration: none; line-height: 1.2; border-width: 1px; border-style: solid; vertical-align: middle; cursor: pointer; appearance: none; background-clip: padding-box; font-family: var(--font-bold); font-weight: 400; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition-property: background, color, border, transform; transition-duration: .35s; z-index: 1; overflow: hidden; position: relative; background: #fff; border-color: #fff; color: #000 } .button--inverted:after, .button--inverted:before, .button-call-to-action--inverted:after, .button-call-to-action--inverted:before { display: table; content: "" } .button--inverted:after, .button-call-to-action--inverted:after { clear: both } .lang-zh .button--inverted, .lang-zh .button-call-to-action--inverted { font-weight: 700 } .button--inverted:before, .button-call-to-action--inverted:before { display: block; content: ''; position: absolute; height: 120%; width: 120%; top: 100%; left: 0; z-index: -1; transition-property: all; transition-duration: .3s; transition-timing-function: ease-in-out; background: #000 } .button--inverted:active:before, .button--inverted:hover:before, .button-call-to-action--inverted:active:before, .button-call-to-action--inverted:hover:before { top: -10% } .button--inverted>span, .button-call-to-action--inverted>span { display: block } .button--inverted svg, .button-call-to-action--inverted svg { fill: currentColor } .button--inverted:hover, .button-call-to-action--inverted:hover { border-color: #000; text-decoration: none; color: #fff } .button--inverted:hover:before, .button-call-to-action--inverted:hover:before { background: #000 } .button--inverted:active, .button-call-to-action--inverted:active { border-color: #000; transform: scale(.95); color: #fff } .button--inverted:active:before, .button-call-to-action--inverted:active:before { background: #000 } .button--inverted[disabled], .button-call-to-action--inverted[disabled] { background-color: #fff; color: #000; opacity: .75 } .button--small, .button-call-to-action--small, .template__sidebar .contact .button { font-size: .75em; padding: .55em 1em .45em 1em } .button--small.button--is-loading::after, .button-call-to-action--small.button--is-loading::after, .template__sidebar .contact .button--is-loading.button::after { height: 1.5em; width: 1.5em } .button--large, .button-call-to-action--large { font-size: 1.1em; padding: .55em 1.7em .4em } .button--large.button--is-loading::after, .button-call-to-action--large.button--is-loading::after { height: 1.5em; width: 1.5em } .button--icon, .button-call-to-action--icon { padding-right: 1em } .button--icon svg, .button-call-to-action--icon svg { width: 1.2em; height: 1.2em; position: relative; top: -1px; fill: currentColor } .button--ghost, .button-call-to-action--ghost { background: 0 0; border-color: #000; color: #000 } .button--ghost svg, .button-call-to-action--ghost svg { fill: currentColor } .button--ghost:before, .button-call-to-action--ghost:before { background: #000 } .button--ghost:hover, .button-call-to-action--ghost:hover { border-color: #000; text-decoration: none; color: #fff } .button--ghost:hover:before, .button-call-to-action--ghost:hover:before { background: #000 } .button--ghost:active, .button-call-to-action--ghost:active { border-color: #000; transform: scale(.95); color: #fff } .button--ghost:active:before, .button-call-to-action--ghost:active:before { background: #000 } .button--ghost[disabled], .button-call-to-action--ghost[disabled] { background-color: transparent; color: #000; opacity: .75 } .button--ghost_light, .button-call-to-action--ghost_light { background: 0 0; border-color: #fff; color: #fff } .button--ghost_light svg, .button-call-to-action--ghost_light svg { fill: currentColor } .button--ghost_light:before, .button-call-to-action--ghost_light:before { background: #fff } .button--ghost_light:hover, .button-call-to-action--ghost_light:hover { border-color: #fff; text-decoration: none; color: #000 } .button--ghost_light:hover:before, .button-call-to-action--ghost_light:hover:before { background: #fff } .button--ghost_light:active, .button-call-to-action--ghost_light:active { border-color: #fff; transform: scale(.95); color: #000 } .button--ghost_light:active:before, .button-call-to-action--ghost_light:active:before { background: #fff } .button--ghost_light[disabled], .button-call-to-action--ghost_light[disabled] { background-color: transparent; color: #fff; opacity: .75 } /* forms */ .form-row.form-controls { display: block } .form-row.form-controls:after, .form-row.form-controls:before { display: table; content: "" } .form-row.form-controls:after { clear: both } .form-row.form-controls>.button { float: right } .form-legend { float: left; margin-right: .5em; font-size: .65em; font-style: italic; line-height: 1.4 } .form-legend, .form-legend a { color: rgba(0, 0, 0, .5) } span.form-item--error { display: block; padding: .5em; margin-top: .5em; color: #fff; background-color: #e60201; font-size: .7rem; line-height: 1.1; font-family: var(--font-bold); font-weight: 400; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; border-radius: 3px } .lang-zh span.form-item--error { font-weight: 700 } label+span.form-item--error { font-size: .72em } @media (max-width: 639px) { span.form-item--error { font-size: .8rem } } /* media + captions */ iframe { border: none } img { margin-bottom: 0; vertical-align: top } figure { margin: 0 } .caption, .table caption { margin-top: .5em; font-size: .65em; font-style: italic; line-height: 1.5 } a img { transition-property: opacity; transition-duration: .15s; transition-timing-function: ease-in-out } a:hover img { opacity: .5 } /* input fields */ .input-field { box-sizing: border-box; font-family: var(--font-regular); font-weight: 400; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: .9rem; line-height: normal; width: 100%; padding: .7rem .75rem; margin-top: .25em; border: 1px solid #bfbfbf; border-radius: 2px; background-color: #fff; color: #000; appearance: none; outline: 0; vertical-align: bottom } .input-field:focus { border-color: #000 } .input-field.form-item--error, .input-field.form-item--error:focus { color: #e60201; border-color: #e60201; border-bottom-left-radius: 0; border-bottom-right-radius: 0 } .input-field+.form-item--error { margin-top: 0; border-radius: 0; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px } @media (max-width: 639px) { .input-field { font-size: 1rem } } /* floating labels */ .float-label { position: relative } .float-label__field { margin: 0; padding: 1.2rem .75rem .3rem } .float-label__field::placeholder { color: transparent } .float-label__field:placeholder-shown:not(:focus)+label { top: 1.1rem; font-size: .9rem; color: gray; font-weight: 400 } .float-label__field.placeholder-shown:not(:focus)+label { top: 1.1rem; font-size: .9rem; color: gray; font-weight: 400 } .float-label__label { display: block; position: absolute; left: 0; cursor: text; opacity: 1; transition: all .2s; line-height: 1; left: .75rem; font-size: .65rem; top: 8px; color: #000; font-weight: 700 } kbd { font-family: var(--font-regular); font-weight: 400; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; display: inline-block; margin: 0 .1em; padding: .1em .5em 0; font-size: .8em; line-height: 1.5; border: 1px solid #bfbfbf; border-radius: 3px; box-shadow: 0 1px 0 rgba(0, 0, 0, .25); vertical-align: .1em; white-space: nowrap } @media (max-width: 639px) { .float-label__label { top: 5px } } /* tables */ .table { float: left; display: block; margin-right: 1.40845%; width: 100%; overflow-x: auto; max-width: 100%; background-image: radial-gradient(ellipse at left, rgba(64, 64, 64, .3) 0, rgba(64, 64, 64, 0) 75%), radial-gradient(ellipse at right, rgba(64, 64, 64, .3) 0, rgba(64, 64, 64, 0) 75%); background-size: .5rem 100%; background-position: left, right; background-repeat: no-repeat } .table:last-child { margin-right: 0 } .table table { vertical-align: top; width: 100%; border-spacing: 0; background-image: linear-gradient(to right, #fff 100%, rgba(255, 255, 255, 0) 100%), linear-gradient(to left, #fff 100%, rgba(255, 255, 255, 0) 100%); background-size: .5rem 100%; background-position: left, right; background-repeat: no-repeat } .l-section--bg-1 .table table { background-image: linear-gradient(to right, #ededed 100%, rgba(237, 237, 237, 0) 100%), linear-gradient(to left, #ededed 100%, rgba(237, 237, 237, 0) 100%) } .table caption { caption-side: bottom; margin: 0; padding-top: 1em; text-align: left; background: inherit } .table td, .table th { font-size: .8em; line-height: 1.5; text-align: left; vertical-align: top; padding: .75rem 2rem .75rem .25rem; border-bottom: 1px solid rgba(0, 0, 0, .1) } .l-section--bg-1 .table td, .l-section--bg-1 .table th { border-color: rgba(0, 0, 0, .15) } .table th { font-family: var(--font-bold); font-weight: 400; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale } .lang-zh .table th { font-weight: 700 } .table td { font-family: var(--font-regular); font-weight: 400; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale } /* checkboxes */ textarea { height: 200px } /* scroll to top */ .scroll-to-top { position: fixed; bottom: 40px; right: 40px; width: 50px; height: 50px; display: none; z-index: 1500; color: #fff; background: #000; border: none; border-radius: 100%; transition-property: background, transform; transition-duration: .15s; transition-timing-function: ease-in-out } .scroll-to-top:hover { cursor: pointer; background-color: #0d0d0d; transform: translateY(-5px) } .scroll-to-top .icon { transform: translate(-50%, -50%); position: absolute; top: 50%; left: 50% } @media (max-width: 639px) { .scroll-to-top { display: none!important } } /* select field */ .select-field { box-sizing: border-box; font-family: var(--font-regular); font-weight: 400; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: .9rem; line-height: normal; width: 100%; padding: .7rem .75rem; margin-top: .25em; border: 1px solid #bfbfbf; border-radius: 2px; background-color: #fff; color: #000; appearance: none; outline: 0; vertical-align: bottom; padding-right: 2rem; min-width: 200px; width: auto; background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24\a ' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M7.41 7.84L12 12.42l4.59-4.58L18 9.25l-6 6-6-6z' fill='black'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: calc(100% - 10px) center; background-size: 25px } .select-field:focus { border-color: #000 } .select-field:required:invalid { color: rgba(0, 0, 0, .5) } @media (max-width: 639px) { .select-field { font-size: 1rem } } /* skip navigation */ .nav-skip { display: flex; align-items: center; justify-content: flex-end; width: 100%; } .nav-skip ul { margin: 0; padding: 0; list-style: none; display: block } .nav-skip li { margin: 0; padding: 0 } .nav-skip a { position: absolute; top: -999em; right: 0; z-index: 1; left: 0; display: block; padding: .5em 1em; background-color: #fff; text-align: center } .nav-skip a:focus { top: 0; z-index: 2951; background-color: #fff } /* highlight text */ .template--content-100 .highlight-text-wrap { float: left; display: block; margin-right: 1.40845%; width: 66.19718%; margin-left: 16.90141% } .template--content-100 .highlight-text-wrap:last-child { margin-right: 0 } .highlight-text__item { text-align: center } .highlight-text__item__text { font-family: var(--font-bold); font-weight: 400; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: 1.1em; line-height: 1.4em; letter-spacing: .15px; color: #000 } .lang-zh .highlight-text__item__text { font-weight: 700 } .highlight-text h1 { margin-top: 0; margin-bottom: 1em } @media screen and (max-width: 950px), print { .template--content-100 .highlight-text-wrap { float: left; display: block; margin-right: 1.40845%; width: 100%; margin-left: 0 } .template--content-100 .highlight-text-wrap:last-child { margin-right: 0 } } @media (max-width: 639px) { .highlight-text__item { text-align: left } .highlight-text__item__text { font-size: 1em; line-height: 1.8 } } /* collapsible boxes */ .collapsible-boxes { border-top: 1px solid rgba(0, 0, 0, .1) } .l-section--bg-1 .collapsible-boxes { border-color: rgba(0, 0, 0, .15) } .template--content-100 .collapsible-boxes { float: left; display: block; margin-right: 1.40845%; width: 66.19718%; margin-left: 16.90141% } .template--content-100 .collapsible-boxes:last-child { margin-right: 0 } .collapsible_box { border-bottom: 1px solid rgba(0, 0, 0, .1) } .l-section--bg-1 .collapsible_box { border-color: rgba(0, 0, 0, .15) } .collapsible_box__header { position: relative; margin: 0; padding: 1em; cursor: pointer; display: flex; justify-content: space-between; align-items: center } .collapsible_box__header__text { display: block; flex: 1; padding-right: 20px; margin-right: auto; font-family: var(--font-bold); font-weight: 400; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale } .lang-zh .collapsible_box__header__text { font-weight: 700 } .collapsible_box__header__icon .icon { width: 35px; height: 35px } .is-open .collapsible_box__header__icon { transform: rotate(-180deg) } .collapsible_box__header__icon svg { pointer-events: none } .collapsible_box__content__item { padding: 1em; padding-right: 75px } .is-closed .collapsible_box__content { display: none } @media screen and (max-width: 950px), print { .template--content-100 .collapsible-boxes { float: left; display: block; margin-right: 1.40845%; width: 100%; margin-left: 0 } .template--content-100 .collapsible-boxes:last-child { margin-right: 0 } } @media (max-width: 639px) { .collapsible_box__header { padding-left: 0; padding-right: 0 } .collapsible_box__header__text { padding-right: 0 } .collapsible_box__header__icon .icon { width: 25px; height: 25px } .collapsible_box__content__item { padding-left: 0; padding-right: 0 } } /* teaser boxes */ .template--content-100 .teaser-box-wrap--col-1 { float: left; display: block; margin-right: 1.40845%; width: 66.19718%; margin-left: 16.90141% } .template--content-100 .teaser-box-wrap--col-1:last-child { margin-right: 0 } .teaser-box { display: flex; align-items: stretch; flex-wrap: wrap } .teaser-box__item { flex-direction: column; align-items: stretch; margin-bottom: 1.40845%; border: 1px solid rgba(0, 0, 0, .1); box-sizing: border-box } @supports (-moz-appearance:none) { .teaser-box__item { margin-bottom: 13px } } .teaser-box__item.js-linked:hover { cursor: pointer } .l-section--bg-1 .teaser-box__item { border-color: rgba(0, 0, 0, .15) } .teaser-box-wrap--col-1 .teaser-box__item { width: 100% } .teaser-box-wrap--col-2 .teaser-box__item { float: left; margin-right: 1.40845%; width: 49.29577%; display: flex } .teaser-box-wrap--col-2 .teaser-box__item:last-child { margin-right: 0 } .teaser-box-wrap--col-2 .teaser-box__item:nth-child(2n) { margin-right: 0 } .teaser-box-wrap--col-2 .teaser-box__item:nth-child(2n+1) { clear: left } .teaser-box-wrap--col-3 .teaser-box__item { float: left; margin-right: 1.40845%; width: 32.39437%; display: flex } .teaser-box-wrap--col-3 .teaser-box__item:last-child { margin-right: 0 } .teaser-box-wrap--col-3 .teaser-box__item:nth-child(3n) { margin-right: 0 } .teaser-box-wrap--col-3 .teaser-box__item:nth-child(3n+1) { clear: left } .teaser-box__item__image { flex-grow: 0; flex-shrink: 0; width: 100% } .teaser-box__item__box { display: flex; flex-direction: column; align-items: stretch; flex: 1 auto; padding: 20px 20px 25px 20px } .template--content-70-sidebar-30 .template__content .teaser-box-wrap--col-2 .teaser-box__item__box { font-size: .85em; padding: 25px 15px } .teaser-box-wrap--col-3 .teaser-box__item__box { padding: 30px 20px; font-size: .85em } .template--content-70-sidebar-30 .template__content .teaser-box-wrap--col-3 .teaser-box__item__box { font-size: .75em; padding: 20px 10px } .teaser-box__topic { font-size: 1.5em; font-family: var(--font-bold); font-weight: 400; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; margin-bottom: 0; text-align: center } .lang-zh .teaser-box__topic { font-weight: 700 } .teaser-box__text { flex: 1 auto } .teaser-box__text__item { text-align: center; margin-bottom: .7em } .teaser-box__link { margin: .5em 0; text-align: center } .teaser-box .image--spacing { padding: 20px } @media screen and (max-width: 950px), print { .template--content-100 .teaser-box-wrap--col-1 { float: left; display: block; margin-right: 1.40845%; width: 100%; margin-left: 0 } .template--content-100 .teaser-box-wrap--col-1:last-child { margin-right: 0 } .teaser-box-wrap--col-2 .teaser-box__item__box { font-size: .85em } .template--content-70-sidebar-30 .template__content .teaser-box-wrap--col-3 .teaser-box__item__box { font-size: .75em; padding: 20px 10px } .teaser-box-wrap--col-3 .teaser-box__item__box { font-size: .75em; padding: 20px 10px } } @media (max-width: 639px) { .teaser-box-wrap--col-2 .teaser-box__item { float: left; display: block; margin-right: 1.40845%; width: 100%; margin-right: 0; margin-bottom: 10px } .teaser-box-wrap--col-2 .teaser-box__item:last-child { margin-right: 0 } .teaser-box-wrap--col-3 .teaser-box__item { float: left; display: block; margin-right: 1.40845%; width: 100%; margin-right: 0; margin-bottom: 10px } .teaser-box-wrap--col-3 .teaser-box__item:last-child { margin-right: 0 } .teaser-box__item__box { padding: 15px } .teaser-box-wrap--col-1 .teaser-box__item__box { font-size: .85em; padding: 20px 10px } .teaser-box-wrap--col-2 .teaser-box__item__box { font-size: .85em; padding: 20px 10px } .template--content-70-sidebar-30 .template__content .teaser-box-wrap--col-3 .teaser-box__item__box { font-size: .85em } .teaser-box-wrap--col-3 .teaser-box__item__box { font-size: .85em } } /* Gallery */ .cce-gallery { max-width: 1100px; margin-left: auto; margin-right: auto } .cce-gallery:after, .cce-gallery:before { display: table; content: "" } .cce-gallery:after { clear: both } .cce-gallery__items { display: block } .cce-gallery__items:after, .cce-gallery__items:before { display: table; content: "" } .cce-gallery__items:after { clear: both } .cce-gallery__item { float: left; display: block; margin-right: 1.40845%; width: 32.39437%; margin-bottom: 1.40845% } .cce-gallery__item:nth-child(4n) { margin-right: 1.40845% } .cce-gallery__item:nth-child(4n+1) { clear: none } .cce-gallery__item:last-child { margin-right: 0 } .cce-gallery__item:nth-child(3n) { margin-right: 0 } .cce-gallery__item__caption { display: none } .cce-gallery--4 .cce-gallery__item { float: left; display: block; margin-right: 1.40845%; width: 23.94366%; margin-bottom: 1.40845% } .cce-gallery--4 .cce-gallery__item:nth-child(5n) { margin-right: 1.40845% } .cce-gallery--4 .cce-gallery__item:nth-child(5n+1) { clear: none } .cce-gallery--4 .cce-gallery__item:last-child { margin-right: 0 } .cce-gallery--4 .cce-gallery__item:nth-child(4n) { margin-right: 0 } .cce-gallery--5 .cce-gallery__item { float: left; display: block; margin-right: 1.40845%; width: 18.87324%; margin-bottom: 1.40845% } .cce-gallery--5 .cce-gallery__item:nth-child(6n) { margin-right: 1.40845% } .cce-gallery--5 .cce-gallery__item:nth-child(6n+1) { clear: none } .cce-gallery--5 .cce-gallery__item:last-child { margin-right: 0 } .cce-gallery--5 .cce-gallery__item:nth-child(5n) { margin-right: 0 } .cce-gallery-slider-loading-indicator { text-align: center; padding: 150px 0 200px } .cce-gallery-slider .slick-prev { margin: 0; left: 40px } .cce-gallery-slider .slick-prev .icon { position: relative; left: -1px } .cce-gallery-slider .slick-next { margin: 0; right: 40px } .cce-gallery-slider .slick-arrow { margin-top: -1.5rem; background: #000; color: #fff; opacity: 1; border-radius: 100%; padding: .7rem; transition-property: all; transition-duration: .15s; transition-timing-function: ease-in-out } .cce-gallery-slider .slick-arrow:hover { background: #fff; color: #000 } .cce-gallery-slider .slick-arrow .icon { fill: currentColor; width: 24px; height: 24px } .cce-gallery-slider .slick-track { display: flex; justify-content: stretch } .cce-gallery-slider .slick-slide { height: auto } .cce-gallery-slider, .cce-gallery-slider-nav { transition-property: opacity; transition-duration: .3s; transition-timing-function: ease-in-out; opacity: 1 } .cce-gallery-slider-nav:not(.slick-initialized), .cce-gallery-slider:not(.slick-initialized) { opacity: 0; height: 0; overflow: hidden; margin: 0 } .cce-gallery-slider-nav.slick-initialized+.cce-gallery-slider-loading-indicator, .cce-gallery-slider.slick-initialized+.cce-gallery-slider-loading-indicator { display: none } .cce-gallery-slider__item { margin: 0 .5rem } .cce-gallery-slider__item.slick-current .cce-gallery-slider__text { opacity: 1 } .cce-gallery-slider__content img { height: 100%; width: auto; max-width: none } .cce-gallery-slider__content a { display: flex; flex: 1 auto; flex-direction: column; align-items: center; overflow: hidden; position: relative; text-decoration: none; height: 100%; max-width: 90vw } .cce-gallery-slider__content .caption, .cce-gallery-slider__content .table caption, .table .cce-gallery-slider__content caption { display: none } .cce-gallery-slider__text { position: absolute; bottom: 0; left: 0; width: 100%; padding: 1em; color: #000; box-sizing: border-box; font-family: var(--font-regular); font-weight: 400; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; opacity: 0; transition-property: all; transition-duration: .35s; transition-timing-function: ease-in-out } .cce-gallery-slider__text__content { padding: 1em; background: rgba(255, 255, 255, .97) } .cce-gallery-slider__text p:last-child { margin-bottom: 0 } /* small gallery */ .l-section--bg-2 .cce-gallery-slider__content img { height: 90px; } .l-section--bg-2 .cce-gallery-slider__text { display: none; } @media (max-width: 639px) { .l-section--bg-2 .cce-gallery-slider__content img { height: 300px; } } @media (max-width: 1050px) { .cce-gallery--5 .cce-gallery__item { float: left; display: block; margin-right: 1.40845%; width: 23.94366%; margin-bottom: 1.40845% } .cce-gallery--5 .cce-gallery__item:nth-child(5n) { margin-right: 1.40845% } .cce-gallery--5 .cce-gallery__item:nth-child(5n+1) { clear: none } .cce-gallery--5 .cce-gallery__item:last-child { margin-right: 0 } .cce-gallery--5 .cce-gallery__item:nth-child(4n) { margin-right: 0 } } @media (max-width: 1000px) { .cce-gallery--4 .cce-gallery__item { float: left; display: block; margin-right: 1.40845%; width: 32.39437%; margin-bottom: 1.40845% } .cce-gallery--4 .cce-gallery__item:nth-child(4n) { margin-right: 1.40845% } .cce-gallery--4 .cce-gallery__item:nth-child(4n+1) { clear: none } .cce-gallery--4 .cce-gallery__item:last-child { margin-right: 0 } .cce-gallery--4 .cce-gallery__item:nth-child(3n) { margin-right: 0 } .cce-gallery--5 .cce-gallery__item { float: left; display: block; margin-right: 1.40845%; width: 32.39437%; margin-bottom: 1.40845% } .cce-gallery--5 .cce-gallery__item:nth-child(4n) { margin-right: 1.40845% } .cce-gallery--5 .cce-gallery__item:nth-child(4n+1) { clear: none } .cce-gallery--5 .cce-gallery__item:last-child { margin-right: 0 } .cce-gallery--5 .cce-gallery__item:nth-child(3n) { margin-right: 0 } } @media screen and (max-width: 950px), print { .cce-gallery-slider .slick-prev { left: 25px } .cce-gallery-slider .slick-next { right: 25px } } @media (max-width: 639px) { .cce-gallery__item { float: left; display: block; margin-right: 1.40845%; width: 49.29577%; margin-bottom: 1.40845% } .cce-gallery__item:nth-child(3n) { margin-right: 1.40845% } .cce-gallery__item:nth-child(3n+1) { clear: none } .cce-gallery__item:last-child { margin-right: 0 } .cce-gallery__item:nth-child(2n) { margin-right: 0 } .cce-gallery--4 .cce-gallery__item { float: left; display: block; margin-right: 1.40845%; width: 49.29577%; margin-bottom: 1.40845% } .cce-gallery--4 .cce-gallery__item:nth-child(3n) { margin-right: 1.40845% } .cce-gallery--4 .cce-gallery__item:nth-child(3n+1) { clear: none } .cce-gallery--4 .cce-gallery__item:last-child { margin-right: 0 } .cce-gallery--4 .cce-gallery__item:nth-child(2n) { margin-right: 0 } .cce-gallery--5 .cce-gallery__item { float: left; display: block; margin-right: 1.40845%; width: 49.29577%; margin-bottom: 1.40845% } .cce-gallery--5 .cce-gallery__item:nth-child(3n) { margin-right: 1.40845% } .cce-gallery--5 .cce-gallery__item:nth-child(3n+1) { clear: none } .cce-gallery--5 .cce-gallery__item:last-child { margin-right: 0 } .cce-gallery--5 .cce-gallery__item:nth-child(2n) { margin-right: 0 } .cce-gallery-slider-loading-indicator { padding: 100px 0 150px } .cce-gallery-slider .slick-prev { left: 10px } .cce-gallery-slider .slick-next { right: 10px } .cce-gallery-slider .slick-track { display: block } .cce-gallery-slider__content img { height: 300px } .cce-gallery-slider__content a { max-width: 100%; height: auto } .cce-gallery-slider__text__content { padding: 0; background: 0 0; display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis } .cce-gallery-slider__text { position: static; color: #000; background: 0 0; padding: 0; margin-top: 5px; font-size: 1em; line-height: 1.8 } } /* downloads */ .template--content-100 .ce-download { float: left; display: block; margin-right: 1.40845%; width: 66.19718%; margin-left: 16.90141% } .template--content-100 .ce-download:last-child { margin-right: 0 } .template--content-100 .ce-download--event, .template--content-100 .ce-download--news, .template--content-100 .ce-download--product { float: left; display: block; margin-right: 1.40845%; width: 100%; margin-left: 0 } .template--content-100 .ce-download--event:last-child, .template--content-100 .ce-download--news:last-child, .template--content-100 .ce-download--product:last-child { margin-right: 0 } .ce-download__item { display: flex; align-items: center; transition-property: background; transition-duration: .15s; transition-timing-function: ease-in-out; border-top: 1px solid rgba(0, 0, 0, .1); padding: 1.5rem; font-size: .8em; line-height: 1.5 } .ce-download__item:first-child { border: none } .ce-download__item:hover { background-color: rgba(0, 0, 0, .07); cursor: pointer } .ce-download__item:hover a { background: 0 0 } .ce-download__item__icon { flex-shrink: 0; width: 70px; padding-right: 1.5em } .ce-download__item__icon img, .ce-download__item__icon svg { width: 100%; height: auto } .ce-download__item__icon-base { fill: #000 } .ce-download__item__icon-element { fill: #fff } .ce-download__item__icon-base-corner { fill: rgba(0, 0, 0, .25) } .ce-download__item__title-text { flex: 1 auto } .ce-download__item__headline { font-family: var(--font-bold); font-weight: 400; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-wrap: break-word; word-wrap: break-word; word-break: break-word; display: block; padding-left: 1em; text-indent: -1em; line-height: 1.2; margin: 0 } .lang-zh .ce-download__item__headline { font-weight: 700 } .ce-download__item__description { font-size: .8em; line-height: 1.5 } .ce-download__item__meta { flex-shrink: 0; padding-left: 2em } .ce-download__item__meta span { display: inline-block; min-width: 3em; margin-right: 1.5em; text-align: right } .ce-download__item__format { text-transform: uppercase } .ce-download__item__download { flex-shrink: 0 } .ce-download__item__download a { font-size: 1em } .ce-download__item__download .icon { margin-right: .5em } .download-icon__bg { fill: #000 } .download-icon__drawing { fill: #fff } @media screen and (max-width: 950px), print { .template--content-100 .ce-download { float: left; display: block; margin-right: 1.40845%; width: 100%; margin-left: 0 } .template--content-100 .ce-download:last-child { margin-right: 0 } .ce-download__item__icon { grid-column: auto/span 1; grid-row: auto/span 3 } .ce-download__item__download a { box-sizing: border-box; display: inline-block; position: relative; margin: 0; padding: .85em 1.1em .7em 1.1em; font-size: .9em; text-align: center; text-decoration: none; line-height: 1.2; border-width: 1px; border-style: solid; vertical-align: middle; cursor: pointer; appearance: none; background-clip: padding-box; font-family: var(--font-bold); font-weight: 400; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition-property: background, color, border, transform; transition-duration: .35s; z-index: 1; overflow: hidden; position: relative; background: #fff; border-color: #fff; color: #000; font-size: .75em; padding: .55em 1em .45em 1em } .ce-download__item__download a:after, .ce-download__item__download a:before { display: table; content: "" } .ce-download__item__download a:after { clear: both } .lang-zh .ce-download__item__download a { font-weight: 700 } .ce-download__item__download a:before { display: block; content: ''; position: absolute; height: 120%; width: 120%; top: 100%; left: 0; z-index: -1; transition-property: all; transition-duration: .3s; transition-timing-function: ease-in-out; background: #000 } .ce-download__item__download a:active:before, .ce-download__item__download a:hover:before { top: -10% } .ce-download__item__download a>span { display: block } .ce-download__item__download a svg { fill: currentColor } .ce-download__item__download a:hover { border-color: #000; text-decoration: none; color: #fff } .ce-download__item__download a:hover:before { background: #000 } .ce-download__item__download a:active { border-color: #000; transform: scale(.95); color: #fff } .ce-download__item__download a:active:before { background: #000 } .ce-download__item__download a[disabled] { background-color: #fff; color: #000; opacity: .75 } } @media (max-width: 639px) { .ce-download__item { display: grid; grid-template-columns: auto 1fr 1.5fr; align-items: start; grid-auto-rows: max-content; font-size: 1em; padding: 1.5em 1em } .ce-download__item:hover { background: 0 0 } .ce-download__item__icon { padding-right: 1.5em; width: 40px } .ce-download__item__title-text { grid-column: 2/span 2 } .ce-download__item__headline { margin-bottom: .5em } .ce-download__item__description { margin-bottom: .5em } .ce-download__item__meta { align-self: center; padding: 0; font-size: .8em } .ce-download__item__meta span { text-align: left; min-width: auto; margin: 0 } .ce-download__item__meta span:first-child { margin-right: 1em } .ce-download__item__download { text-align: right } } @media print { .ce-download__item { page-break-inside: avoid } .ce-download__item__download a { overflow-wrap: break-word; word-wrap: break-word; word-break: break-word; display: block; padding-left: 1em; text-indent: -1em; line-height: 1.2; background-color: inherit } .ce-download__item__download a:after { overflow-wrap: break-word; word-wrap: break-word; word-break: break-word; display: block; padding-left: 1em; text-indent: -1em; line-height: 1.2; content: attr(href); opacity: 1 } } /* contact */ .template--content-100 .contact { float: left; display: block; margin-right: 1.40845%; width: 66.19718%; margin-left: 16.90141% } .template--content-100 .contact:last-child { margin-right: 0 } .contact__wrap { display: block; margin-bottom: 1em } .contact__wrap:after, .contact__wrap:before { display: table; content: "" } .contact__wrap:after { clear: both } .contact__context { float: left; display: block; margin-right: 1.40845%; width: 23.94366%; margin-bottom: 1em; font-size: .8em; line-height: 1.5; word-wrap: break-word } .contact__context:last-child { margin-right: 0 } .contact__context img { display: block; margin-bottom: 1em } .contact__form { float: left; display: block; margin-right: 1.40845%; width: 72.53521%; margin-left: 2.11268% } .contact__form:last-child { margin-right: 0 } .contact #emailcheck { display: none } @media (min-width:951px) { .template--content-70-sidebar-30 .template__sidebar__content .contact__context img { float: left; display: block; margin-right: 1.40845%; width: 32.39437% } .template--content-70-sidebar-30 .template__sidebar__content .contact__context img:last-child { margin-right: 0 } .template--content-70-sidebar-30 .template__sidebar__content .contact__context__text { float: left; display: block; margin-right: 1.40845%; width: 66.19718%; padding-left: 5px; box-sizing: border-box } .template--content-70-sidebar-30 .template__sidebar__content .contact__context__text:last-child { margin-right: 0 } .template--content-70-sidebar-30 .template__sidebar__content .contact__context, .template--content-70-sidebar-30 .template__sidebar__content .contact__form { float: left; display: block; margin-right: 1.40845%; width: 100%; margin-left: 0 } .template--content-70-sidebar-30 .template__sidebar__content .contact__context:last-child, .template--content-70-sidebar-30 .template__sidebar__content .contact__form:last-child { margin-right: 0 } } @media screen and (max-width: 950px), print { .template--content-100 .contact { float: left; display: block; margin-right: 1.40845%; width: 100%; margin-left: 0 } .template--content-100 .contact:last-child { margin-right: 0 } .contact__context img { float: left; display: block; margin-right: 1.40845%; width: 32.39437% } .contact__context img:last-child { margin-right: 0 } .contact__context__text { float: left; display: block; margin-right: 1.40845%; width: 66.19718% } .contact__context__text:last-child { margin-right: 0 } .contact__context, .contact__form { float: left; display: block; margin-right: 1.40845%; width: 100%; margin-left: 0 } .contact__context:last-child, .contact__form:last-child { margin-right: 0 } } /* environment flag */ .env-flag { position: fixed; top: -5.3em; right: -5.3em; width: 10em; height: 10em; transform: rotate(45deg); font-size: .8rem; font-weight: 700; font-family: sans-serif; text-transform: uppercase; cursor: ne-resize; z-index: 2999 } .env-flag::after { position: absolute; bottom: .5em; width: 100%; color: #fff; text-align: center } .env-flag--local { background-color: rgba(60, 168, 255, .7); letter-spacing: .1em } .env-flag--local::after { content: "Local" } .env-flag--tech { background-color: rgba(255, 0, 0, .7); letter-spacing: .2em } .env-flag--tech::after { content: "Dev" } .env-flag--review { background-color: rgba(255, 129, 0, .8); letter-spacing: .1em } .env-flag--review::after { content: "Review" } @media print { .env-flag { display: none } } /* notifications */ #notifications { transform: translateX(-50%); position: absolute; left: 50%; box-sizing: border-box; width: 100%; max-width: 45rem } .overlay-open #notifications { visibility: hidden } #notifications-overlay { transform: translateX(-50%); position: absolute; left: 50%; position: fixed; top: 0; box-sizing: border-box; width: 100%; max-width: 45rem; z-index: 6000 } .notification { position: relative; padding: .5em 2em; text-align: center; border: 1px solid rgba(255, 255, 255, .6); border-top: 0; transition: padding-top .3s } .notification:hover { padding-top: .75em } .notification--info { background-color: rgba(60, 168, 255, .9); color: #fff } .notification--success { background-color: rgba(141, 198, 63, .9); color: #fff } .notification--error { background-color: rgba(230, 2, 1, .9); color: #fff } .notification__close { position: absolute; top: 0; right: 0; border: 0; padding: .5em .4em; line-height: 1; transform: scale(1); appearance: none; color: inherit; background: 0 0; cursor: pointer; transition: transform .2s } .notification__close:hover { background: rgba(0, 0, 0, .1) } .notification__close:focus { outline: 0 } .notification__close:active { transform: initial; transition: none } .notification h2 { font-size: 1.5em; margin-bottom: .4em; color: inherit } .notification p { margin-bottom: 0 } @media (max-width: 639px) { .notification { padding-left: .5em } } /* pagination */ .nav-pagination { float: left; display: block; margin-right: 1.40845%; width: 100%; margin: 1em 0 } .nav-pagination:last-child { margin-right: 0 } .nav-pagination__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: row; justify-content: center; flex-wrap: wrap } .nav-pagination__list__item { font-size: .8em; min-width: 40px; height: 40px; margin: 2px } .nav-pagination__list__item .number, .nav-pagination__list__item .spacer, .nav-pagination__list__item a { display: flex; align-items: center; justify-content: center; box-sizing: border-box; border-radius: 3px; height: 100%; width: 100%; line-height: 1; text-decoration: none } .nav-pagination__list__item .number svg, .nav-pagination__list__item .spacer svg, .nav-pagination__list__item a svg { fill: rgba(0, 0, 0, .5) } .nav-pagination__list__item a:hover { background: rgba(0, 0, 0, .1); text-decoration: none; color: inherit } .nav-pagination__list__item--current .number, .nav-pagination__list__item--current a { background: #000; color: #fff } @media screen and (max-width: 950px), print { .nav-pagination__list__item .number, .nav-pagination__list__item .spacer, .nav-pagination__list__item a { background: rgba(0, 0, 0, .1) } .nav-pagination__list__item--current .number, .nav-pagination__list__item--current a { background: #000 } } /* overlay */ html.overlay-open { overflow: hidden } .overlay { font-size: 1rem; position: fixed; top: 0; right: 0; left: 0; position: fixed; z-index: 5000; display: none; height: 100vh; background-color: rgba(0, 0, 0, .7); overflow-x: hidden; overflow-y: scroll } .overlay, .overlay .form-legend { color: #e6e6e6 } .overlay__close { transition-property: color; transition-duration: .3s; appearance: none; position: absolute; top: 1em; right: 1em; padding: 1em; color: inherit; border: 0; outline: 0; background: 0 0; cursor: pointer } .overlay__close:focus, .overlay__close:hover { color: #666 } .overlay__close .icon { height: 2.5em; width: 2.5em; fill: currentColor } .overlay__inner { max-width: 1100px; margin-left: auto; margin-right: auto; padding-right: 40px; padding-left: 40px; position: relative; margin: 0 auto; display: flex; align-items: center; min-height: 100vh } .overlay__inner:after, .overlay__inner:before { display: table; content: "" } .overlay__inner:after { clear: both } .overlay__content { box-sizing: border-box; margin: 7em 0; width: 100% } @media screen and (max-width: 950px), print { .overlay__inner { padding-right: 25px; padding-left: 25px } } @media (max-width: 639px) { .overlay__close { top: 0; right: 0 } .overlay__close .icon { height: 2em; width: 2em } .overlay__inner { padding-right: 10px; padding-left: 10px } .overlay__content { margin: 4em 0 } } /* divider */ .ce-div { border: 0; height: 1px; background-color: rgba(0, 0, 0, .15); margin: 0 } /* slick slider */ .slick-slider { position: relative; display: block; box-sizing: border-box; -webkit-touch-callout: none; user-select: none; touch-action: pan-y; -webkit-tap-highlight-color: transparent; line-height: normal } .slick-list { position: relative; overflow: hidden; display: block; margin: 0; padding: 0; padding-bottom: 1px } .slick-list.dragging { cursor: pointer; cursor: hand } .slick-slider .slick-list, .slick-slider .slick-track { transform: translate3d(0, 0, 0) } .slick-track { position: relative; left: 0; top: 0; display: block !important; } .slick-track:after, .slick-track:before { content: ""; display: table } .slick-track:after { clear: both } .slick-loading .slick-track { visibility: hidden } .slick-slide { float: left; height: 100%; min-height: 1px; display: none } [dir=rtl] .slick-slide { float: right } .slick-slide img { display: block } .slick-slide.slick-loading img { display: none } .slick-slide.dragging img { pointer-events: none } .slick-initialized .slick-slide { display: block } .slick-loading .slick-slide { visibility: hidden } .slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent } .slick-arrow.slick-hidden { display: none } .slick-slider:hover .slick-arrow { opacity: 1 } .slick-slider img { transition-property: opacity; transition-duration: .15s; transition-timing-function: ease-in-out; opacity: 1 } .slick-slider img.slick-loading { opacity: 0 } .slick-slider img[data-lazy] { height: 0; width: 0 } .slick-no-slide .slick-track { width: 100%!important; text-align: center!important; transform: inherit!important } .slick-no-slide .slick-slide { float: none!important; display: inline-block!important } .slick-arrow { z-index: 100; position: absolute; top: 50%; display: block; line-height: 0; font-size: 0; cursor: pointer; padding: 0; border: none; outline: 0; transform: translate(0, -50%); transition-property: background, opacity; transition-duration: .3s; transition-timing-function: ease-in-out; opacity: 0 } .slick-arrow:focus, .slick-arrow:hover { cursor: pointer; background-color: rgba(0, 0, 0, .1) } .slick-arrow .icon { fill: #000; width: 50px; height: 50px } .slick-prev { left: 0; margin-left: -50px } .slick-next { right: 0; margin-right: -50px } .slick-dots { display: block; list-style: none; text-align: center; padding: 0; margin: 0; width: 100%; margin-top: 2em } .slick-dots li { position: relative; display: inline-block; margin: 0 5px; padding: 0; cursor: pointer } .slick-dots li button { border: 0; background: 0 0; display: block; height: 100%; width: 100%; line-height: 0; font-size: 0; color: transparent; cursor: pointer; padding: 0 } .slick-dots li button:before { display: block; content: ''; width: 10px; height: 10px; border-radius: 100%; border: 1px solid rgba(0, 0, 0, .25); background-color: transparent; transition-property: background, border; transition-duration: .3s; transition-timing-function: ease-in-out } .slick-dots li button:focus:before, .slick-dots li button:hover:before { background-color: rgba(0, 0, 0, .1) } .slick-dots li.slick-active button:before { background-color: #000; border-color: #000; opacity: 1 } @media screen and (max-width: 950px), print { .slick-arrow { display: none!important } } @media (max-width: 639px) { .slick-dots { margin-top: 1em } } /* content visual */ .content-visual__item { position: relative; width: 100%; background-color: rgba(0, 0, 0, .1) } .content-visual__item.content-visual__item--bg_color:not(.content-visual__item--bg_image) { height: auto } .content-visual__item__content { width: 100%; position: absolute; top: 0; height: 100% } .content-visual__item--bg_color:not(.content-visual__item--bg_image) .content-visual__item__content { padding-top: 4rem; padding-bottom: 4rem; position: static; box-sizing: content-box; transform: none } .content-visual__item__image { position: static; height: auto } .template--content-70-sidebar-30 .template__content .content-visual__item__image { position: relative; height: 720px; overflow: hidden; width: 100% } .content-visual__item__image img { width: 100%; max-width: none } .template--content-70-sidebar-30 .template__content .content-visual__item__image img { transform: translate(-50%, -50%); position: absolute; top: 50%; left: 50%; z-index: 0; height: 720px; width: auto!important } .content-visual__box { padding-right: 40px; padding-left: 40px; position: absolute; padding: 2.2rem; width: auto; max-width: 45%; box-sizing: border-box; background-color: rgba(0, 0, 0, .8); color: #fff } .content-visual__box a:not(.button) { color: inherit } .content-visual__box--light { background-color: rgba(255, 255, 255, .9); color: #000 } .content-visual__box--transparent { background-color: transparent; padding: 0 } .content-visual__box--transparent_text_dark { background-color: transparent; color: #000 } .content-visual__box--line-padded { background-color: transparent; color: #000; padding: 0 } .content-visual__box--line-padded .content-visual__text>p, .content-visual__box--line-padded .content-visual__topic { display: inline; padding: .5rem 0; background: #fff; -webkit-box-decoration-break: clone; box-decoration-break: clone; font-size: 1.6em; line-height: 2; color: #000; background: #fff; box-shadow: 1rem 0 0 #fff, -1rem 0 0 #fff } .content-visual__box--line-padded .content-visual__text { margin: 0 } .content-visual__box--line-padded-dark .content-visual__text>p, .content-visual__box--line-padded-dark .content-visual__topic { color: #fff; background: #000; box-shadow: 1rem 0 0 #000, -1rem 0 0 #000 } .pos--left .content-visual__box { left: 40px } .pos--left .content-visual__box.content-visual__box--line-padded .content-visual__text, .pos--left .content-visual__box.content-visual__box--line-padded .content-visual__topic { margin-left: 1rem } .pos--hor-middle .content-visual__box { transform: translateX(-50%); left: 50%; text-align: center } .pos--hor-middle .content-visual__box.content-visual__box--line-padded .content-visual__text, .pos--hor-middle .content-visual__box.content-visual__box--line-padded .content-visual__topic { margin: 0 } .pos--right .content-visual__box { right: 40px; text-align: right } .pos--right .content-visual__box.content-visual__box--line-padded .content-visual__text, .pos--right .content-visual__box.content-visual__box--line-padded .content-visual__topic { margin-right: 1rem } .pos--vert-middle .content-visual__box { top: 50%; transform: translateY(-50%) } .pos--vert-middle.pos--hor-middle .content-visual__box { left: 50%; top: 50%; transform: translate(-50%, -50%) } .pos--top .content-visual__box { top: 40px } .pos--bottom .content-visual__box { bottom: 40px } .content-visual__topic { font-size: 1em; line-height: 1.1; margin-bottom: .6em; font-family: var(--font-bold); font-weight: 400; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale } .lang-zh .content-visual__topic { font-weight: 700 } .content-visual__link { margin-top: .25em } @media (min-width: 950px) { .template--content-70-sidebar-30 .template__content .content-visual__item.content-visual__item--bg_color:not(.content-visual__item--bg_image) { width: 100%; padding-right: 40px; padding-left: 40px; margin-left: -40px } .template--content-70-sidebar-30 .template__content .content-visual__box { max-width: 70% } } @media (min-width: 950px) and (max-width: 639px) { .template--content-70-sidebar-30 .template__content .content-visual__item.content-visual__item--bg_color:not(.content-visual__item--bg_image) { padding-right: 10px; padding-left: 10px; margin-left: -10px } } @media screen and (min-width: 950px) and (max-width: 950px), print and (min-width: 950px) { .template--content-70-sidebar-30 .template__content .content-visual__item.content-visual__item--bg_color:not(.content-visual__item--bg_image) { padding-right: 25px; padding-left: 25px; margin-left: -25px } } @media (max-width: 1920px) { .content-visual__item { height: 720px } .content-visual__item__image { position: relative; height: 720px; overflow: hidden; width: 100% } .content-visual__item__image img { transform: translate(-50%, -50%); position: absolute; top: 50%; left: 50%; z-index: 0; height: 720px; width: auto!important } } @media (max-width: 1250px) { .content-visual__box--line-padded { margin-left: 0 } } @media screen and (max-width: 950px), print { .content-visual__item { height: auto } .content-visual__item__content { position: static; height: auto; transform: translate(0, 0); background-color: #bfbfbf } .content-visual__item--bg_color:not(.content-visual__item--bg_image) .content-visual__item__content { padding-top: 3rem; padding-bottom: 3rem; background-color: transparent; padding: 4em; height: auto!important; box-sizing: border-box } .content-visual__item__image { height: 400px!important } .content-visual__item__image--offset img { margin-left: -200px } .content-visual__item__image img { height: 400px!important } .content-visual__box { padding-right: 25px; padding-left: 25px; position: static!important; max-width: none!important; transform: translate(0, 0)!important; padding-top: 1.5em; padding-bottom: 1.5em; border: 1px solid transparent } .content-visual__item--bg_image .content-visual__box--light { background-color: #fff; border-bottom: 1px solid rgba(0, 0, 0, .15) } .content-visual__item--bg_image .content-visual__box--transparent { color: #000; background-color: #fff; border-bottom: 1px solid rgba(0, 0, 0, .15) } .content-visual__item--bg_image .content-visual__box--transparent .button--ghost_light { background: 0 0; border-color: #000; color: #000 } .content-visual__item--bg_image .content-visual__box--transparent .button--ghost_light svg { fill: currentColor } .content-visual__item--bg_image .content-visual__box--transparent .button--ghost_light:before { background: #ccc } .content-visual__item--bg_image .content-visual__box--transparent .button--ghost_light:hover { border-color: #000; text-decoration: none; color: #000 } .content-visual__item--bg_image .content-visual__box--transparent .button--ghost_light:hover:before { background: #ccc } .content-visual__item--bg_image .content-visual__box--transparent .button--ghost_light:active { border-color: #fff; transform: scale(.95); color: #000; color: #000 } .content-visual__item--bg_image .content-visual__box--transparent .button--ghost_light:active:before { background: #999 } .content-visual__item--bg_image .content-visual__box--transparent .button--ghost_light[disabled] { background-color: transparent; color: #000; opacity: .75 } .content-visual__item--bg_image .content-visual__box--transparent_text_dark { background-color: #fff; border-bottom: 1px solid rgba(0, 0, 0, .15) } .content-visual__box--line-padded .content-visual__text>p, .content-visual__box--line-padded .content-visual__topic { padding: 0; font-size: 1.2rem; padding: 0; font-size: 1.1rem } .content-visual__box--line-padded { background: #fff; border-bottom: 1px solid rgba(0, 0, 0, .15) } .content-visual__box--line-padded-dark { background: #000 } .content-visual__box--line-padded-dark .button { border-color: #fff } .pos--left .content-visual__box.content-visual__box--line-padded .content-visual__text, .pos--left .content-visual__box.content-visual__box--line-padded .content-visual__topic { margin: 0 } .pos--right .content-visual__box.content-visual__box--line-padded .content-visual__text, .pos--right .content-visual__box.content-visual__box--line-padded .content-visual__topic { margin: 0 } .content-visual__topic { font-size: 1em; margin-bottom: .6em } } @media (max-width: 639px) { .content-visual__item--bg_color:not(.content-visual__item--bg_image) .content-visual__item__content { padding-top: 2rem; padding-bottom: 2rem; padding-left: 0; padding-right: 0 } .content-visual__item__image { height: 300px!important } .content-visual__item__image--offset img { margin-left: -180px } .content-visual__item__image img { height: 300px!important } .content-visual__box { padding-right: 10px; padding-left: 10px } .content-visual__topic { font-size: 1em } } @media print { .content-visual__item__image { display: none } .content-visual__box { background-color: transparent; border: 2px solid rgba(0, 0, 0, .25); margin: 1cm 0; width: auto } .content-visual__box, .content-visual__box a { color: #000 } } @media only screen and (min-width: 1025px) { .content-visual, .content-visual .content-visual__item__content { opacity: 0; } } /* overlapping images */ .cce-overlapping-images { display: flex; justify-content: center; } .cce-overlapping-images__1 { margin-right: -50px; opacity: 0; } .cce-overlapping-images__2 { position: relative; margin-left: -50px; margin-top: 100px; opacity: 0; } .cce-overlapping-images__caption { display: none; } @media (max-width: 639px) { .cce-overlapping-images { display: block } .cce-overlapping-images__1 { margin: 0 } .cce-overlapping-images__2 { margin: 0; margin-top: -30px; text-align: right } .cce-overlapping-images img { max-width: 90%; max-height: 400px } } /* blockquote */ .cce-blockquote { float: left; display: block; margin-right: 1.40845%; width: 66.19718%; opacity: 0; } .cce-blockquote:last-child { margin-right: 0 } .cce-blockquote blockquote { margin: 0; padding: 0; margin-left: 1rem } .cce-blockquote--align-right { margin-left: 33.80282%; text-align: right } .cce-blockquote--align-right blockquote { margin-right: 1rem } .cce-blockquote p { display: inline; padding: .5rem 0; -webkit-box-decoration-break: clone; box-decoration-break: clone; font-size: 2rem; line-height: 1.8; font-family: var(--font-bold); font-weight: 400; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #fff; background: #000; box-shadow: 1rem 0 0 #000, -1rem 0 0 #000 } .lang-zh .cce-blockquote p { font-weight: 700 } .cce-blockquote cite { font-style: normal } @media screen and (max-width: 950px), print { .cce-blockquote { float: left; display: block; margin-right: 1.40845%; width: 83.09859% } .cce-blockquote:last-child { margin-right: 0 } .cce-blockquote--align-right { margin-left: 16.90141% } .cce-blockquote p { font-size: 1.5rem; line-height: 2 } } @media (max-width: 639px) { .cce-blockquote { float: left; display: block; margin-right: 1.40845%; width: 91.5493% } .cce-blockquote:last-child { margin-right: 0 } .cce-blockquote--align-right { margin-left: 8.4507% } .cce-blockquote p { font-size: 1.2rem; line-height: 2.2 } .cce-blockquote cite { font-size: .8em } } /* numbers */ .cce-numbers { width: 100%; display: flex; align-items: stretch; flex-wrap: wrap; justify-content: center; text-align: center } .cce-numbers__item { display: flex; align-items: stretch; flex-direction: column; box-sizing: border-box; padding: 0 1em; margin-bottom: 2em } @supports (-moz-appearance:none) { .cce-numbers__item { margin-bottom: 13px } } .l-section--bg-1 .cce-numbers__item { border-color: rgba(0, 0, 0, .15) } .cce-numbers__number { font-family: var(--font-bold); font-weight: 400; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: 2.1em } .lang-zh .cce-numbers__number { font-weight: 700 } .cce-numbers__topic { font-size: 1.2em; line-height: 1.4 } .cce-numbers__text { flex: 1 auto; margin-top: 1rem; font-size: .8em } .cce-numbers__text p:last-child { margin-bottom: 0 } .cce-numbers__link { margin-top: 1.2rem } @media (max-width: 639px) { .cce-numbers { display: block } .cce-numbers__item { margin-bottom: 0; padding: 0 } .cce-numbers__item+.cce-numbers__item { margin-top: 2em } } /* gallery */ .cce-tab-gallery { position: relative; margin: 0 calc(40px - .5em); max-width: 2000px } .cce-tab-gallery__tabs { display: flex; align-items: center; justify-content: center; margin-bottom: 2em } .cce-tab-gallery__tabs__item, .cce-tab-gallery__categories__item { background: 0 0; border: 0; color: inherit; font: inherit; line-height: inherit; overflow: visible; padding: 0; margin: 0 .5em; padding: .25em 0; font-size: 1.5em; line-height: 1.1; font-family: var(--font-bold); font-weight: 400; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; letter-spacing: -.005em; border-bottom: 5px solid transparent; color: rgba(0, 0, 0, .5); transition-property: all; transition-duration: .15s; transition-timing-function: ease-in-out } .lang-zh .cce-tab-gallery__tabs__item, .lang-zh .cce-tab-gallery__categories__item { font-weight: 700 } .cce-tab-gallery__tabs__item.is-active, .cce-tab-gallery__categories__item.is-active { color: #000; border-color: #000 } .cce-tab-gallery__tabs__item:focus, .cce-tab-gallery__tabs__item:hover, .cce-tab-gallery__categories__item:focus, .cce-tab-gallery__categories__item:hover { outline: 0; cursor: pointer; color: #000 } .cce-tab-gallery__tabcontent { animation: fadeEffect 1.5s } .cce-tab-gallery__tabcontent.is-first { opacity: 0 } .cce-tab-gallery__tabcontent:not(.is-active) { display: none } @keyframes fadeEffect{ from { opacity: 0 } to { opacity: 1 } } .cce-tab-gallery__item, .cce-tab-gallery__sizer { width: 16.667% } .cce-tab-gallery__item { padding: .5em; box-sizing: border-box; opacity: 0 } .cce-tab-gallery__item a { text-decoration: none } .cce-tab-gallery__item__topic { font-size: .65em; font-family: var(--font-bold); font-weight: 400; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; line-height: 1.4; margin-top: .5em } .lang-zh .cce-tab-gallery__item__topic { font-weight: 700 } .cce-tab-gallery__item--width2 { width: 33.334% } .cce-tab-gallery__item--width3 { width: 50.001% } .cce-tab-gallery__item--width4 { width: 66.668% } .cce-tab-gallery__item--width5 { width: 83.335% } .cce-tab-gallery__item--width6 { width: 100.002% } .cce-tab-gallery-loading-indicator { transform: translateX(-50%); position: absolute; left: 50%; top: 250px } .template--content-100 .cce-description { display: none; margin-bottom: 4rem; } .cce-description.is-active { display: block; } .gallery_subtabs { text-align: center; margin-bottom: 1rem; } .gallery_subtabs .cce-tab-gallery__tabs__item { font-size: 1.2rem; font-weight: normal; border-bottom: none; } .gallery_subtabs_hidden { display: none; } @media screen and (min-width: 2000px) { .cce-tab-gallery { margin: 0 auto } } @media screen and (max-width: 950px), print { .cce-tab-gallery { margin: 0 calc(25px - .3em) } .cce-tab-gallery__item { padding: .3em } } @media (max-width: 639px) { .cce-tab-gallery { margin: 0 calc(10px - .25em) } .cce-tab-gallery__tabs__item, .cce-tab-gallery__categories__item { font-size: 1.2em; line-height: 1.2; border-width: 4px } .cce-tab-gallery__item, .cce-tab-gallery__sizer { width: 25% } .cce-tab-gallery__item { padding: .25em } .cce-tab-gallery__item__topic { margin-top: .3em } .cce-tab-gallery__item--width2 { width: 50% } .cce-tab-gallery__item--width3 { width: 50% } .cce-tab-gallery__item--width4 { width: 75% } .cce-tab-gallery__item--width5 { width: 100% } .cce-tab-gallery__item--width6 { width: 100% } } /* quote with image element */ .cce-quote-with-image { position: relative } .cce-quote-with-image:after, .cce-quote-with-image:before { display: table; content: "" } .cce-quote-with-image:after { clear: both } .cce-quote-with-image__img { text-align: center; opacity: 0; } .template--content-100 .cce-quote-with-image__img { float: left; display: block; margin-right: 1.40845%; width: 66.19718%; margin-left: 16.90141% } .template--content-100 .cce-quote-with-image__img:last-child { margin-right: 0 } .cce-quote-with-image__img figure { display: inline-block } .cce-quote-with-image__img .caption, .cce-quote-with-image__img .table caption, .table .cce-quote-with-image__img caption { text-align: left } .cce-quote-with-image__img img { display: inline-block; width: 100% } .cce-quote-with-image__blockquote { position: absolute; top: 50%; width: 50%; opacity: 0; } .cce-quote-with-image--align-right .cce-quote-with-image__blockquote { left: 50%; text-align: right } .cce-quote-with-image__blockquote__content { transform: translateY(-50%) } .cce-quote-with-image__blockquote blockquote { margin: 0; padding: 0 } .cce-quote-with-image__blockquote cite { display: inline-block; font-style: normal; padding: .5rem 0; margin-top: .25em; color: #000; background: #fff; box-shadow: 1rem 0 0 #fff, -1rem 0 0 #fff } .cce-quote-with-image__blockquote p { display: inline; padding: .5rem 0; -webkit-box-decoration-break: clone; box-decoration-break: clone; font-size: 2rem; line-height: 1.8; font-family: var(--font-bold); font-weight: 400; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #000; background: #fff; box-shadow: 1rem 0 0 #fff, -1rem 0 0 #fff } .lang-zh .cce-quote-with-image__blockquote p { font-weight: 700 } @media screen and (max-width: 950px), print { .template--content-100 .cce-quote-with-image__img { float: left; display: block; margin-right: 1.40845%; width: 100%; margin-left: 0 } .template--content-100 .cce-quote-with-image__img:last-child { margin-right: 0 } .cce-quote-with-image__blockquote { position: static; width: auto; float: left; margin-top: -3rem } .cce-quote-with-image__blockquote__content { transform: translateY(0) } .cce-quote-with-image__blockquote p { font-size: 1.5rem; line-height: 1.6 } } @media (max-width: 639px) { .cce-quote-with-image__blockquote cite { font-size: .8em } .cce-quote-with-image__blockquote p { font-size: 1.2rem; line-height: 1.4 } } /* newsletter form */ .template--content-100 .newsletter-form { float: left; display: block; margin-right: 1.40845%; width: 66.19718%; margin-left: 16.90141% } .template--content-100 .newsletter-form:last-child { margin-right: 0 } .newsletter-form input[type=email], .newsletter-form input[type=text] { box-sizing: border-box; font-family: var(--font-regular); font-weight: 400; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: .9rem; line-height: normal; width: 100%; padding: .7rem .75rem; margin-top: .25em; border: 1px solid #bfbfbf; border-radius: 2px; background-color: #fff; color: #000; appearance: none; outline: 0; vertical-align: bottom; padding: .7rem .75rem!important; border: 1px solid #bfbfbf!important } .newsletter-form input[type=email]:focus, .newsletter-form input[type=text]:focus { border-color: #000 } .newsletter-form input[type=checkbox]+label { padding-left: .5em } .newsletter-form__message { box-sizing: border-box; padding: .5em 1em; background: #000; color: #fff; margin-bottom: 1em } .template--content-100 .newsletter-form__message { float: left; display: block; margin-right: 1.40845%; width: 66.19718%; margin-left: 16.90141% } .template--content-100 .newsletter-form__message:last-child { margin-right: 0 } @media screen and (max-width: 950px), print { .template--content-100 .newsletter-form { float: left; display: block; margin-right: 1.40845%; width: 100%; margin-left: 0 } .template--content-100 .newsletter-form:last-child { margin-right: 0 } .template--content-100 .newsletter-form__message { float: left; display: block; margin-right: 1.40845%; width: 100%; margin-left: 0 } .template--content-100 .newsletter-form__message:last-child { margin-right: 0 } } @media (max-width: 639px) { .newsletter-form input[type=email], .newsletter-form input[type=text] { font-size: 1rem } } /* content wrap */ .content-wrap { background-color: #fff; } .content-wrap:focus { outline: 0 } @media print { .content-wrap { background-color: transparent } } /*! PhotoSwipe Default UI CSS by Dmitry Semenov | photoswipe.com | MIT license */ .pswp__button { width: 44px; height: 44px; position: relative; background: 0 0; cursor: pointer; overflow: visible; appearance: none; display: block; border: 0; padding: 0; margin: 0; float: right; opacity: .75; transition: opacity .2s; box-shadow: none } .pswp__button:focus, .pswp__button:hover { opacity: 1 } .pswp__button:active { outline: 0; opacity: .9 } .pswp__button::-moz-focus-inner { padding: 0; border: 0 } .pswp__ui--over-close .pswp__button--close { opacity: 1 } .pswp__button, .pswp__button--arrow--left:before, .pswp__button--arrow--right:before { background: url(../Images/lightbox/default-skin.png) 0 0 no-repeat; background-size: 264px 88px; width: 44px; height: 44px } .pswp__button--close { background-position: 0 -44px } .pswp__button--share { background-position: -44px -44px } .pswp__button--fs { display: none } .pswp--supports-fs .pswp__button--fs { display: block } .pswp--fs .pswp__button--fs { background-position: -44px 0 } .pswp__button--zoom { display: none; background-position: -88px 0 } .pswp--zoom-allowed .pswp__button--zoom { display: block } .pswp--zoomed-in .pswp__button--zoom { background-position: -132px 0 } .pswp--touch .pswp__button--arrow--left, .pswp--touch .pswp__button--arrow--right { visibility: hidden } .pswp__button--arrow--left, .pswp__button--arrow--right { background: 0 0; top: 50%; margin-top: -50px; width: 70px; height: 100px; position: absolute } .pswp__button--arrow--left { left: 0 } .pswp__button--arrow--right { right: 0 } .pswp__button--arrow--left:before, .pswp__button--arrow--right:before { content: ''; top: 35px; height: 30px; width: 32px; position: absolute } .pswp__button--arrow--left:before { left: 6px; background-position: -138px -44px } .pswp__button--arrow--right:before { right: 6px; background-position: -94px -44px } .pswp__counter, .pswp__share-modal { user-select: none } .pswp__share-modal { display: block; background: rgba(0, 0, 0, .5); width: 100%; height: 100%; top: 0; left: 0; padding: 10px; position: absolute; z-index: 4600; opacity: 0; transition: opacity .25s ease-out; -webkit-backface-visibility: hidden; will-change: opacity } .pswp__share-modal--hidden { display: none } .pswp__share-tooltip { z-index: 4620; position: absolute; background: #fff; top: 56px; border-radius: 2px; display: block; width: auto; right: 44px; box-shadow: 0 2px 5px rgba(0, 0, 0, .25); transform: translateY(6px); transition: transform .25s; -webkit-backface-visibility: hidden; will-change: transform } .pswp__share-tooltip a { display: block; padding: 8px 12px; color: #000; text-decoration: none; font-size: 14px; line-height: 18px } .pswp__share-tooltip a:hover { text-decoration: none; color: #000 } .pswp__share-tooltip a:first-child { border-radius: 2px 2px 0 0 } .pswp__share-tooltip a:last-child { border-radius: 0 0 2px 2px } .pswp__share-modal--fade-in { opacity: 1 } .pswp__share-modal--fade-in .pswp__share-tooltip { transform: translateY(0) } .pswp--touch .pswp__share-tooltip a { padding: 16px 12px } a.pswp__share--facebook:before { content: ''; display: block; width: 0; height: 0; position: absolute; top: -12px; right: 15px; border: 6px solid transparent; border-bottom-color: #fff; -webkit-pointer-events: none; -moz-pointer-events: none; pointer-events: none } a.pswp__share--facebook:hover { background: #3e5c9a; color: #fff } a.pswp__share--facebook:hover:before { border-bottom-color: #3e5c9a } a.pswp__share--twitter:hover { background: #55acee; color: #fff } a.pswp__share--pinterest:hover { background: #ccc; color: #ce272d } a.pswp__share--download:hover { background: #ddd } .pswp__counter { position: absolute; left: 0; top: 0; height: 44px; font-size: 13px; line-height: 44px; color: #fff; opacity: .75; padding: 0 10px } .pswp__caption { position: absolute; left: 0; bottom: 0; width: 100%; min-height: 44px } .pswp__caption small { font-size: 11px; color: #bbb } .pswp__caption__center { text-align: left; max-width: 420px; margin: 0 auto; font-size: 13px; padding: 10px; line-height: 20px; color: #ccc } .pswp__caption--empty { display: none } .pswp__caption--fake { visibility: hidden } .pswp__preloader { width: 44px; height: 44px; position: absolute; top: 0; left: 50%; margin-left: -22px; opacity: 0; transition: opacity .25s ease-out; will-change: opacity; direction: ltr } .pswp__preloader__icn { width: 20px; height: 20px; margin: 12px } .pswp__preloader--active { opacity: 1 } .pswp__preloader--active .pswp__preloader__icn { background: url(../Images/lightbox/preloader.gif) 0 0 no-repeat } .pswp--css_animation .pswp__preloader--active { opacity: 1 } .pswp--css_animation .pswp__preloader--active .pswp__preloader__icn { animation: clockwise .5s linear infinite } .pswp--css_animation .pswp__preloader--active .pswp__preloader__donut { animation: donut-rotate 1s cubic-bezier(.4, 0, .22, 1) infinite } .pswp--css_animation .pswp__preloader__icn { background: 0 0; opacity: .75; width: 14px; height: 14px; position: absolute; left: 15px; top: 15px; margin: 0 } .pswp--css_animation .pswp__preloader__cut { position: relative; width: 7px; height: 14px; overflow: hidden } .pswp--css_animation .pswp__preloader__donut { box-sizing: border-box; width: 14px; height: 14px; border: 2px solid #fff; border-radius: 50%; border-left-color: transparent; border-bottom-color: transparent; position: absolute; top: 0; left: 0; background: 0 0; margin: 0 } @keyframes clockwise { 0% { transform: rotate(0) } 100% { transform: rotate(360deg) } } @keyframes donut-rotate { 0% { transform:rotate(0) } 50% { transform:rotate(-140deg) } 100% { transform:rotate(0) } } .pswp__ui { -webkit-font-smoothing: auto; visibility: visible; opacity: 1; z-index: 4550 } .pswp__top-bar { position: absolute; left: 0; top: 0; height: 44px; width: 100% } .pswp--has_mouse .pswp__button--arrow--left, .pswp--has_mouse .pswp__button--arrow--right, .pswp__caption, .pswp__top-bar { -webkit-backface-visibility: hidden; will-change: opacity; transition: opacity 333ms cubic-bezier(.4, 0, .22, 1) } .pswp--has_mouse .pswp__button--arrow--left, .pswp--has_mouse .pswp__button--arrow--right { visibility: visible } .pswp__caption, .pswp__top-bar { background-color: rgba(0, 0, 0, .5) } .pswp__ui--fit .pswp__caption, .pswp__ui--fit .pswp__top-bar { background-color: rgba(0, 0, 0, .3) } .pswp__ui--idle .pswp__top-bar { opacity: 0 } .pswp__ui--idle .pswp__button--arrow--left, .pswp__ui--idle .pswp__button--arrow--right { opacity: 0 } .pswp__ui--hidden .pswp__button--arrow--left, .pswp__ui--hidden .pswp__button--arrow--right, .pswp__ui--hidden .pswp__caption, .pswp__ui--hidden .pswp__top-bar { opacity: .001 } .pswp__ui--one-slide .pswp__button--arrow--left, .pswp__ui--one-slide .pswp__button--arrow--right, .pswp__ui--one-slide .pswp__counter { display: none } .pswp__element--disabled { display: none!important } .pswp--minimal--dark .pswp__top-bar { background: 0 0 } /*! PhotoSwipe main CSS by Dmitry Semenov | photoswipe.com | MIT license */ .pswp { display: none; position: absolute; width: 100%; height: 100%; left: 0; top: 0; overflow: hidden; touch-action: none; z-index: 4500; -webkit-text-size-adjust: 100%; -webkit-backface-visibility: hidden; outline: 0 } .pswp * { box-sizing: border-box } .pswp img { max-width: none } .pswp--animate_opacity { opacity: .001; will-change: opacity; transition: opacity 333ms cubic-bezier(.4, 0, .22, 1) } .pswp--open { display: block } .pswp--zoom-allowed .pswp__img { cursor: -webkit-zoom-in; cursor: -moz-zoom-in; cursor: zoom-in } .pswp--zoomed-in .pswp__img { cursor: -webkit-grab; cursor: -moz-grab; cursor: grab } .pswp--dragging .pswp__img { cursor: -webkit-grabbing; cursor: -moz-grabbing; cursor: grabbing } .pswp__bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #000; opacity: 0; transform: translateZ(0); -webkit-backface-visibility: hidden; will-change: opacity; will-change: opacity; transition: opacity 333ms cubic-bezier(.4, 0, .22, 1) } .pswp__scroll-wrap { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden } .pswp__container, .pswp__zoom-wrap { touch-action: none; position: absolute; left: 0; right: 0; top: 0; bottom: 0; -webkit-backface-visibility: hidden } .pswp__container, .pswp__img { user-select: none; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none } .pswp__zoom-wrap { position: absolute; width: 100%; transform-origin: left top; transition: transform 333ms cubic-bezier(.4, 0, .22, 1) } .pswp--animated-in .pswp__bg, .pswp--animated-in .pswp__zoom-wrap { transition: none } .pswp__item { position: absolute; left: 0; right: 0; top: 0; bottom: 0; overflow: hidden } .pswp__img { position: absolute; width: auto; height: auto; top: 0; left: 0 } .pswp__img--placeholder { -webkit-backface-visibility: hidden } .pswp__img--placeholder--blank { background: 0 0 } .pswp--ie .pswp__img { width: 100%!important; height: auto!important; left: 0; top: 0 } .pswp__error-msg { position: absolute; left: 0; top: 50%; width: 100%; text-align: center; font-size: 14px; line-height: 16px; margin-top: -8px; color: #ccc } .pswp__error-msg a { color: #ccc; text-decoration: underline } @media screen and (max-width: 1024px) { .pswp__preloader { position: relative; left: auto; top: auto; margin: 0; float: right } } @media (-webkit-min-device-pixel-ratio: 1.1), (-webkit-min-device-pixel-ratio: 1.09375), (min-resolution: 105dpi), (min-resolution: 1.1dppx) { .pswp--svg .pswp__button, .pswp--svg .pswp__button--arrow--left:before, .pswp--svg .pswp__button--arrow--right:before { background-image: url(../Images/lightbox/default-skin.svg) } .pswp--svg .pswp__button--arrow--left, .pswp--svg .pswp__button--arrow--right { background: 0 0 } } /* news latest */ .news-latest__item { float: left; display: block; margin-right: 1.40845%; width: 32.39437%; float: none; box-sizing: border-box; font-size: .8em; line-height: 1.5; display: flex; flex-direction: column } .news-latest__item:last-child { margin-right: 0 } .news-latest__item__date { color: rgba(0, 0, 0, .5); margin-bottom: .5em } .news-latest__item__image { order: -2; overflow: hidden; margin-bottom: -2.3em } .news-latest__item__headline { position: relative; order: -1; line-height: 1.2; font-size: 1.5em } .news-latest__item:not(.news-latest__item--without_image) .news-latest__item__headline { margin-bottom: 0 } .news-latest__item:not(.news-latest__item--without_image) .news-latest__item__headline a { display: inline-block; box-sizing: border-box; max-width: 90%; background: #fff; padding: var(--gap-quarter) 0; } .l-section--bg-1 .news-latest__item:not(.news-latest__item--without_image) .news-latest__item__headline a { background-color: #ededed } .news-latest__item__more { display: inline-block } .news-latest__more { text-align: center; margin-top: 2em } @media screen and (max-width: 950px), print { .news-latest { display: block } .news-latest__item { float: left; display: block; margin-right: 1.40845%; width: 49.29577%; display: flex; margin-bottom: 2em } .news-latest__item:last-child { margin-right: 0 } .news-latest__item:nth-child(2n) { margin-right: 0 } .news-latest__item:nth-child(2n+1) { clear: left } .news-latest__item__image { margin-bottom: -2.4em } } @media (max-width: 639px) { .news-latest__item { float: left; display: block; margin-right: 1.40845%; width: 100%; display: flex; font-size: 1em; line-height: 1.8; margin-bottom: 0; padding: 15px 0 } .news-latest__item:last-child { margin-right: 0 } .news-latest__item__image { margin-bottom: -2.2em } .news-latest__more { margin-bottom: 2em } } @media print { .news-latest__item { page-break-inside: avoid } .news-latest__item__more a { overflow-wrap: break-word; word-wrap: break-word; word-break: break-word; display: block; padding-left: 1em; text-indent: -1em; line-height: 1.2 } .news-latest__item__more a:after { content: attr(href) } } /* news list */ .news-list { margin-bottom: 2em } .template--content-100 .news-list { float: left; display: block; margin-right: 1.40845%; width: 66.19718%; margin-left: 16.90141% } .template--content-100 .news-list:last-child { margin-right: 0 } .news-list__item { display: block; padding: 30px 0; border-bottom: 1px solid rgba(0, 0, 0, .1) } .news-list__item:after, .news-list__item:before { display: table; content: "" } .news-list__item:after { clear: both } .news-list__item:first-child { padding-top: 0 } .news-list__item p:last-child { margin-bottom: 0 } .news-list__item__date { color: rgba(0, 0, 0, .5); font-size: .8em; line-height: 1.5 } .news-list__item__image { float: left; display: block; margin-right: 1.40845%; width: 40.84507%; box-sizing: border-box } .news-list__item__image:last-child { margin-right: 0 } .news-list__item__teaser { float: left; display: block; margin-right: 1.40845%; width: 57.74648%; box-sizing: border-box } .news-list__item__teaser:last-child { margin-right: 0 } .news-list__item--without_image .news-list__item__teaser { width: 100% } .news-list__item__more { margin: 2em 0 1em 0 } @media screen and (max-width: 950px), print { .template--content-100 .news-list { float: left; display: block; margin-right: 1.40845%; width: 100%; margin-left: 0 } .template--content-100 .news-list:last-child { margin-right: 0 } .news-list__item { padding: 30px 0; padding: 15px 0 } } @media (max-width: 639px) { .news-list__item__image { width: 100%; margin: 0; margin-bottom: 1em; float: none } .news-list__item__teaser { width: 100%; margin: 0; float: none } .news-list__item__more { margin: 1em 0; margin-bottom: 0 } } /* news detail */ .news-detail:last-child { margin-right: 0 } .news-detail h1 { margin: .5em 0 } .news-detail__image { text-align: center; margin-bottom: 2em } .news-detail__image figure { display: inline-block } .news-detail__image figure .caption, .news-detail__image figure .table caption, .table .news-detail__image figure caption { text-align: left } .news-detail__gallery { max-width: 1100px; margin-left: auto; margin-right: auto } .news-detail__gallery:after, .news-detail__gallery:before { display: table; content: "" } .news-detail__gallery:after { clear: both } .news-detail__gallery__items { display: block; margin: 2em 0 } .news-detail__gallery__items:after, .news-detail__gallery__items:before { display: table; content: "" } .news-detail__gallery__items:after { clear: both } .news-detail__gallery__item__caption { display: none } .news-detail__download:after, .news-detail__download:before { display: table; content: "" } .news-detail__download:after { clear: both } .news-detail__more { text-align: center; margin-top: 3em } @media screen and (max-width: 950px), print { .news-detail:last-child { margin-right: 0 } .news-detail__image { margin-bottom: 1em } } @media (max-width: 639px) { .news-detail__gallery__items { margin-top: 0; margin-bottom: 2em } .news-detail__more { margin-top:1em } } /* team gallery */ .ext-team-gallery { opacity: 1; position: relative; max-width: 2000px; margin-right: 40px; margin-left: 40px } .ext-team-gallery h2.is-active { color: #000; border-color: #000 } .ext-team-gallery__topic { font-family: var(--font-bold); font-weight: 400; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: 1.5em; margin-bottom: 1.5rem } .lang-zh .ext-team-gallery__topic { font-weight: 700 } .ext-team-gallery__topic--alphabetical { font-size: 2.1em } .ext-team-gallery__group { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--gap-quarter); margin-bottom: 3em } .ext-team-gallery__group>* { min-width: 0; box-sizing: border-box } .ext-team-gallery__item { display: inline-flex; flex-direction: column } .ext-team-gallery__item--overlay > figure > .ext-team-gallery__item__image:hover, .ext-team-gallery__item--overlay > figure figcaption:hover { cursor: pointer } .ext-team-gallery__item--overlay > figure > .ext-team-gallery__item__image { transition-property: opacity; transition-duration: .15s; transition-timing-function: ease-in-out } .ext-team-gallery__item--overlay > figure > .ext-team-gallery__item__image:hover { opacity:.5 } .ext-team-gallery figure { display: flex; flex-direction: column; margin: 0; flex: 1 1 auto; min-width: 0 } .ext-team-gallery__item__image { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; object-position: center center; display: block; flex-shrink: 0; background: rgba(0, 0, 0, .1) } .ext-team-gallery figcaption { position: relative; margin: 0; width: 100%; font-size: var(--font-size-project); line-height: 1.4 } .ext-team-gallery__item__text__name { font-family: var(--font-regular); font-weight: normal; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; margin: .5rem 0 0; display: block; max-width: none; padding: 0; background: transparent } .ext-team-gallery__item__text__location { margin-top: .25rem; font-family: var(--font-regular); font-weight: normal } .overlay--team-gallery .overlay__content { position: relative; background-color: #fff; padding: 3em 5em; padding-top: 5em; transform: translateY(100px); transition-property: all; transition-duration: .3s; transition-timing-function: ease-in-out } .overlay-open .overlay--team-gallery .overlay__content { transform: translateY(0) } .overlay--team-gallery .overlay__content, .overlay--team-gallery .overlay__content a { color: #000 } .overlay--team-gallery .overlay__close { top: -100px; right: -1.5em; color: #fff } .ext-team-gallery-overlay__content { display: flex } .ext-team-gallery-overlay__content__image { width: 100%; max-width: 300px; margin-right: 3em; flex-shrink: 0 } @media screen and (min-width: 2000px) { .ext-team-gallery { margin: 0 auto } } @media screen and (max-width: 950px), print { .ext-team-gallery { margin-right: 25px; margin-left: 25px } .ext-team-gallery__group { grid-template-columns: repeat(4, 1fr); margin-bottom: 3em } .overlay--team-gallery .overlay__content { padding: 2em } .ext-team-gallery-overlay__content__image { max-width: 200px; margin-right: 1.5em } } @media (max-width: 639px) { .ext-team-gallery { margin-right: 10px; margin-left: 10px } .ext-team-gallery__topic { font-size: 1.2em; margin-bottom: .5em; margin-top: 2.5rem; } .ext-team-gallery__group { grid-template-columns: repeat(3, 1fr); margin-bottom: 1em } .overlay--team-gallery .overlay__content { padding: 1em } .overlay--team-gallery .overlay__close { top: -60px } .ext-team-gallery-overlay__content { flex-direction: column } .ext-team-gallery-overlay__content__image { max-width: 250px; margin: 0; margin-bottom: 1em } } /* miscellaneous */ .js-hidden { display: none } .l-centered { text-align: center } .l-align-right { text-align: right } /* responsive */ @media (max-width: 1200px) { body:before { content: "breakpoint-l" } } @media (max-width: 1080px) { body:before { content: "breakpoint-nav-main" } } @media screen and (max-width: 950px), print { body:before { content:"breakpoint-m" } } @media (max-width: 639px) { body:before { content: "breakpoint-s" } } @media only screen and (max-width: 319px) { body, html { overflow-x: visible } } @media print { body { background-color: transparent; color: #000; widows: 3; orphans: 3 } @page { margin: 2cm } } /* team gallery, female leaders */ q.statement_citation { font-style: normal; font-weight: bold; font-family: var(--font-bold); margin: 1.5em 0; display: block; position: relative; } q.statement_citation::after { content: ""; } q.statement_citation::before { content: "”"; font-size: 4rem; position: absolute; left: -.6em; top: -.5em; } .ext-team-gallery h2.female_leaders { color: #FC4C4E; } .ext-team-gallery h2.female_leaders:hover { color: #000; } .ext-team-gallery h2.is-active.female_leaders { color: #FC4C4E; border-bottom-color: #FC4C4E; } /* https://www.hpp.com/karriere/offene-stellen/ */ .bite-jobs-list--noresult { text-align: center; }