@charset "UTF-8";
/* montserrat-regular - latin */
@font-face {
font-display: swap;
/* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: "Montserrat";
font-style: normal;
font-weight: 400;
src: url("/typo3conf/ext/cc_config/Resources/Public/Fonts/Montserrat/montserrat-v25-latin-regular.woff2")
format("woff2");
/* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
@font-face {
font-family: "Noto Sans JP";
font-style: normal;
font-weight: 100;
src: url("/typo3conf/ext/cc_config/Resources/Public/Fonts/Noto/noto-sans-jp-v42-latin_japanese-100.eot");
/* IE9 Compat Modes */
src: local(""),
url("/typo3conf/ext/cc_config/Resources/Public/Fonts/Noto/noto-sans-jp-v42-latin_japanese-100.eot?#iefix")
format("embedded-opentype"),
/* IE6-IE8 */
url("/typo3conf/ext/cc_config/Resources/Public/Fonts/Noto/noto-sans-jp-v42-latin_japanese-100.woff2")
format("woff2"),
/* Super Modern Browsers */
url("/typo3conf/ext/cc_config/Resources/Public/Fonts/Noto/noto-sans-jp-v42-latin_japanese-100.woff")
format("woff"),
/* Modern Browsers */
url("/typo3conf/ext/cc_config/Resources/Public/Fonts/Noto/noto-sans-jp-v42-latin_japanese-100.ttf")
format("truetype"),
/* Safari, Android, iOS */
url("/typo3conf/ext/cc_config/Resources/Public/Fonts/Noto/noto-sans-jp-v42-latin_japanese-100.svg#NotoSansJP")
format("svg");
/* Legacy iOS */
}
/* noto-sans-jp-300 - latin_japanese */
@font-face {
font-family: "Noto Sans JP";
font-style: normal;
font-weight: 300;
src: url("/typo3conf/ext/cc_config/Resources/Public/Fonts/Noto/noto-sans-jp-v42-latin_japanese-300.eot");
/* IE9 Compat Modes */
src: local(""),
url("/typo3conf/ext/cc_config/Resources/Public/Fonts/Noto/noto-sans-jp-v42-latin_japanese-300.eot?#iefix")
format("embedded-opentype"),
/* IE6-IE8 */
url("/typo3conf/ext/cc_config/Resources/Public/Fonts/Noto/noto-sans-jp-v42-latin_japanese-300.woff2")
format("woff2"),
/* Super Modern Browsers */
url("/typo3conf/ext/cc_config/Resources/Public/Fonts/Noto/noto-sans-jp-v42-latin_japanese-300.woff")
format("woff"),
/* Modern Browsers */
url("/typo3conf/ext/cc_config/Resources/Public/Fonts/Noto/noto-sans-jp-v42-latin_japanese-300.ttf")
format("truetype"),
/* Safari, Android, iOS */
url("/typo3conf/ext/cc_config/Resources/Public/Fonts/Noto/noto-sans-jp-v42-latin_japanese-300.svg#NotoSansJP")
format("svg");
/* Legacy iOS */
}
/* noto-sans-jp-regular - latin_japanese */
@font-face {
font-family: "Noto Sans JP";
font-style: normal;
font-weight: 400;
src: url("/typo3conf/ext/cc_config/Resources/Public/Fonts/Noto/noto-sans-jp-v42-latin_japanese-regular.eot");
/* IE9 Compat Modes */
src: local(""),
url("/typo3conf/ext/cc_config/Resources/Public/Fonts/Noto/noto-sans-jp-v42-latin_japanese-regular.eot?#iefix")
format("embedded-opentype"),
/* IE6-IE8 */
url("/typo3conf/ext/cc_config/Resources/Public/Fonts/Noto/noto-sans-jp-v42-latin_japanese-regular.woff2")
format("woff2"),
/* Super Modern Browsers */
url("/typo3conf/ext/cc_config/Resources/Public/Fonts/Noto/noto-sans-jp-v42-latin_japanese-regular.woff")
format("woff"),
/* Modern Browsers */
url("/typo3conf/ext/cc_config/Resources/Public/Fonts/Noto/noto-sans-jp-v42-latin_japanese-regular.ttf")
format("truetype"),
/* Safari, Android, iOS */
url("/typo3conf/ext/cc_config/Resources/Public/Fonts/Noto/noto-sans-jp-v42-latin_japanese-regular.svg#NotoSansJP")
format("svg");
/* Legacy iOS */
}
/* noto-sans-jp-500 - latin_japanese */
@font-face {
font-family: "Noto Sans JP";
font-style: normal;
font-weight: 500;
src: url("/typo3conf/ext/cc_config/Resources/Public/Fonts/Noto/noto-sans-jp-v42-latin_japanese-500.eot");
/* IE9 Compat Modes */
src: local(""),
url("/typo3conf/ext/cc_config/Resources/Public/Fonts/Noto/noto-sans-jp-v42-latin_japanese-500.eot?#iefix")
format("embedded-opentype"),
/* IE6-IE8 */
url("/typo3conf/ext/cc_config/Resources/Public/Fonts/Noto/noto-sans-jp-v42-latin_japanese-500.woff2")
format("woff2"),
/* Super Modern Browsers */
url("/typo3conf/ext/cc_config/Resources/Public/Fonts/Noto/noto-sans-jp-v42-latin_japanese-500.woff")
format("woff"),
/* Modern Browsers */
url("/typo3conf/ext/cc_config/Resources/Public/Fonts/Noto/noto-sans-jp-v42-latin_japanese-500.ttf")
format("truetype"),
/* Safari, Android, iOS */
url("/typo3conf/ext/cc_config/Resources/Public/Fonts/Noto/noto-sans-jp-v42-latin_japanese-500.svg#NotoSansJP")
format("svg");
/* Legacy iOS */
}
/* noto-sans-jp-700 - latin_japanese */
@font-face {
font-family: "Noto Sans JP";
font-style: normal;
font-weight: 700;
src: url("/typo3conf/ext/cc_config/Resources/Public/Fonts/Noto/noto-sans-jp-v42-latin_japanese-700.eot");
/* IE9 Compat Modes */
src: local(""),
url("/typo3conf/ext/cc_config/Resources/Public/Fonts/Noto/noto-sans-jp-v42-latin_japanese-700.eot?#iefix")
format("embedded-opentype"),
/* IE6-IE8 */
url("/typo3conf/ext/cc_config/Resources/Public/Fonts/Noto/noto-sans-jp-v42-latin_japanese-700.woff2")
format("woff2"),
/* Super Modern Browsers */
url("/typo3conf/ext/cc_config/Resources/Public/Fonts/Noto/noto-sans-jp-v42-latin_japanese-700.woff")
format("woff"),
/* Modern Browsers */
url("/typo3conf/ext/cc_config/Resources/Public/Fonts/Noto/noto-sans-jp-v42-latin_japanese-700.ttf")
format("truetype"),
/* Safari, Android, iOS */
url("/typo3conf/ext/cc_config/Resources/Public/Fonts/Noto/noto-sans-jp-v42-latin_japanese-700.svg#NotoSansJP")
format("svg");
/* Legacy iOS */
}
/* noto-sans-jp-900 - latin_japanese */
@font-face {
font-family: "Noto Sans JP";
font-style: normal;
font-weight: 900;
src: url("/typo3conf/ext/cc_config/Resources/Public/Fonts/Noto/noto-sans-jp-v42-latin_japanese-900.eot");
/* IE9 Compat Modes */
src: local(""),
url("/typo3conf/ext/cc_config/Resources/Public/Fonts/Noto/noto-sans-jp-v42-latin_japanese-900.eot?#iefix")
format("embedded-opentype"),
/* IE6-IE8 */
url("/typo3conf/ext/cc_config/Resources/Public/Fonts/Noto/noto-sans-jp-v42-latin_japanese-900.woff2")
format("woff2"),
/* Super Modern Browsers */
url("/typo3conf/ext/cc_config/Resources/Public/Fonts/Noto/noto-sans-jp-v42-latin_japanese-900.woff")
format("woff"),
/* Modern Browsers */
url("/typo3conf/ext/cc_config/Resources/Public/Fonts/Noto/noto-sans-jp-v42-latin_japanese-900.ttf")
format("truetype"),
/* Safari, Android, iOS */
url("/typo3conf/ext/cc_config/Resources/Public/Fonts/Noto/noto-sans-jp-v42-latin_japanese-900.svg#NotoSansJP")
format("svg");
/* Legacy iOS */
}
/* poppins-regular - latin */
@font-face {
font-family: "Poppins";
font-style: normal;
font-weight: 400;
src: url("/typo3conf/ext/cc_config/Resources/Public/Fonts/Poppins/poppins-v20-latin-regular.eot");
/* IE9 Compat Modes */
src: local(""),
url("/typo3conf/ext/cc_config/Resources/Public/Fonts/Poppins/poppins-v20-latin-regular.eot?#iefix")
format("embedded-opentype"),
/* IE6-IE8 */
url("/typo3conf/ext/cc_config/Resources/Public/Fonts/Poppins/poppins-v20-latin-regular.woff2")
format("woff2"),
/* Super Modern Browsers */
url("/typo3conf/ext/cc_config/Resources/Public/Fonts/Poppins/poppins-v20-latin-regular.woff")
format("woff"),
/* Modern Browsers */
url("/typo3conf/ext/cc_config/Resources/Public/Fonts/Poppins/poppins-v20-latin-regular.ttf")
format("truetype"),
/* Safari, Android, iOS */
url("/typo3conf/ext/cc_config/Resources/Public/Fonts/Poppins/poppins-v20-latin-regular.svg#Poppins")
format("svg");
/* Legacy iOS */
}
/* poppins-italic - latin */
@font-face {
font-family: "Poppins";
font-style: italic;
font-weight: 400;
src: url("/typo3conf/ext/cc_config/Resources/Public/Fonts/Poppins/poppins-v20-latin-italic.eot");
/* IE9 Compat Modes */
src: local(""),
url("/typo3conf/ext/cc_config/Resources/Public/Fonts/Poppins/poppins-v20-latin-italic.eot?#iefix")
format("embedded-opentype"),
/* IE6-IE8 */
url("/typo3conf/ext/cc_config/Resources/Public/Fonts/Poppins/poppins-v20-latin-italic.woff2")
format("woff2"),
/* Super Modern Browsers */
url("/typo3conf/ext/cc_config/Resources/Public/Fonts/Poppins/poppins-v20-latin-italic.woff")
format("woff"),
/* Modern Browsers */
url("/typo3conf/ext/cc_config/Resources/Public/Fonts/Poppins/poppins-v20-latin-italic.ttf")
format("truetype"),
/* Safari, Android, iOS */
url("/typo3conf/ext/cc_config/Resources/Public/Fonts/Poppins/poppins-v20-latin-italic.svg#Poppins")
format("svg");
/* Legacy iOS */
}
/* poppins-600 - latin */
@font-face {
font-family: "Poppins";
font-style: normal;
font-weight: 600;
src: url("/typo3conf/ext/cc_config/Resources/Public/Fonts/Poppins/poppins-v20-latin-600.eot");
/* IE9 Compat Modes */
src: local(""),
url("/typo3conf/ext/cc_config/Resources/Public/Fonts/Poppins/poppins-v20-latin-600.eot?#iefix")
format("embedded-opentype"),
/* IE6-IE8 */
url("/typo3conf/ext/cc_config/Resources/Public/Fonts/Poppins/poppins-v20-latin-600.woff2")
format("woff2"),
/* Super Modern Browsers */
url("/typo3conf/ext/cc_config/Resources/Public/Fonts/Poppins/poppins-v20-latin-600.woff")
format("woff"),
/* Modern Browsers */
url("/typo3conf/ext/cc_config/Resources/Public/Fonts/Poppins/poppins-v20-latin-600.ttf")
format("truetype"),
/* Safari, Android, iOS */
url("/typo3conf/ext/cc_config/Resources/Public/Fonts/Poppins/poppins-v20-latin-600.svg#Poppins")
format("svg");
/* Legacy iOS */
}
/* poppins-600italic - latin */
@font-face {
font-family: "Poppins";
font-style: italic;
font-weight: 600;
src: url("/typo3conf/ext/cc_config/Resources/Public/Fonts/Poppins/poppins-v20-latin-600italic.eot");
/* IE9 Compat Modes */
src: local(""),
url("/typo3conf/ext/cc_config/Resources/Public/Fonts/Poppins/poppins-v20-latin-600italic.eot?#iefix")
format("embedded-opentype"),
/* IE6-IE8 */
url("/typo3conf/ext/cc_config/Resources/Public/Fonts/Poppins/poppins-v20-latin-600italic.woff2")
format("woff2"),
/* Super Modern Browsers */
url("/typo3conf/ext/cc_config/Resources/Public/Fonts/Poppins/poppins-v20-latin-600italic.woff")
format("woff"),
/* Modern Browsers */
url("/typo3conf/ext/cc_config/Resources/Public/Fonts/Poppins/poppins-v20-latin-600italic.ttf")
format("truetype"),
/* Safari, Android, iOS */
url("/typo3conf/ext/cc_config/Resources/Public/Fonts/Poppins/poppins-v20-latin-600italic.svg#Poppins")
format("svg");
/* Legacy iOS */
}
/* poppins-700 - latin */
@font-face {
font-family: "Poppins";
font-style: normal;
font-weight: 700;
src: url("/typo3conf/ext/cc_config/Resources/Public/Fonts/Poppins/poppins-v20-latin-700.eot");
/* IE9 Compat Modes */
src: local(""),
url("/typo3conf/ext/cc_config/Resources/Public/Fonts/Poppins/poppins-v20-latin-700.eot?#iefix")
format("embedded-opentype"),
/* IE6-IE8 */
url("/typo3conf/ext/cc_config/Resources/Public/Fonts/Poppins/poppins-v20-latin-700.woff2")
format("woff2"),
/* Super Modern Browsers */
url("/typo3conf/ext/cc_config/Resources/Public/Fonts/Poppins/poppins-v20-latin-700.woff")
format("woff"),
/* Modern Browsers */
url("/typo3conf/ext/cc_config/Resources/Public/Fonts/Poppins/poppins-v20-latin-700.ttf")
format("truetype"),
/* Safari, Android, iOS */
url("/typo3conf/ext/cc_config/Resources/Public/Fonts/Poppins/poppins-v20-latin-700.svg#Poppins")
format("svg");
/* Legacy iOS */
}
/* poppins-700italic - latin */
@font-face {
font-family: "Poppins";
font-style: italic;
font-weight: 700;
src: url("/typo3conf/ext/cc_config/Resources/Public/Fonts/Poppins/poppins-v20-latin-700italic.eot");
/* IE9 Compat Modes */
src: local(""),
url("/typo3conf/ext/cc_config/Resources/Public/Fonts/Poppins/poppins-v20-latin-700italic.eot?#iefix")
format("embedded-opentype"),
/* IE6-IE8 */
url("/typo3conf/ext/cc_config/Resources/Public/Fonts/Poppins/poppins-v20-latin-700italic.woff2")
format("woff2"),
/* Super Modern Browsers */
url("/typo3conf/ext/cc_config/Resources/Public/Fonts/Poppins/poppins-v20-latin-700italic.woff")
format("woff"),
/* Modern Browsers */
url("/typo3conf/ext/cc_config/Resources/Public/Fonts/Poppins/poppins-v20-latin-700italic.ttf")
format("truetype"),
/* Safari, Android, iOS */
url("/typo3conf/ext/cc_config/Resources/Public/Fonts/Poppins/poppins-v20-latin-700italic.svg#Poppins")
format("svg");
/* Legacy iOS */
}
@-webkit-keyframes show {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes show {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@-webkit-keyframes scroll-visible {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes scroll-visible {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes show {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@-webkit-keyframes hide {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
@keyframes hide {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
@-webkit-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.main {
position: relative;
overflow: hidden;
}
@media screen and (min-width: 768px) {
.other {
padding-top: 5.625em;
}
}
@media screen and (max-width: 767px) {
.other {
padding-top: 4.28571em;
padding-right: 0 !important;
padding-bottom: 0px;
padding-left: 0 !important;
}
}
@media screen and (min-width: 768px) {
.other__inner {
padding-bottom: 6.25em;
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
}
@media screen and (max-width: 767px) {
.other__inner.innerEl-wide {
padding-right: 0;
padding-left: 0;
}
}
.module {
padding-top: 5.625em;
padding-bottom: 5.625em;
}
.page {
position: relative;
left: 0;
overflow: hidden;
-webkit-transition: left 0.4s 0.1s cubic-bezier(0.215, 0.61, 0.355, 1);
transition: left 0.4s 0.1s cubic-bezier(0.215, 0.61, 0.355, 1);
}
@media screen and (min-width: 768px) {
.products {
padding-top: 5em;
padding-bottom: 6.25em;
}
}
@media screen and (max-width: 767px) {
.products {
padding-top: 3.57143em;
padding-bottom: 2.85714em;
}
}
@media screen and (max-width: 767px) {
.products__inner.innerEl-tight {
padding-right: 0;
padding-left: 0;
}
}
@media screen and (max-width: 767px) {
.products__more {
margin-top: 2.85714em;
text-align: center;
}
}
.section {
position: relative;
}
@media screen and (min-width: 768px) {
.section.-border-bottom {
padding-top: 5.625em;
padding-bottom: 5.625em;
}
}
@media screen and (max-width: 767px) {
.section.-border-bottom {
padding-top: 3.21429em;
padding-bottom: 3.21429em;
}
.section.-border-bottom.feature.-separate {
padding-bottom: 0;
}
}
.section.-border-bottom:after {
position: absolute;
bottom: 0;
left: 50%;
display: block;
height: 1px;
background: rgba(0, 0, 0, 0.08);
content: "";
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
}
@media screen and (min-width: 768px) {
.section.-border-bottom:after {
width: calc(100vw - 5em * 2);
}
}
@media screen and (max-width: 767px) {
.section.-border-bottom:after {
width: calc(100vw - 0.71429em * 2);
}
}
.section__header {
position: relative;
}
@media screen and (min-width: 768px) {
.section__header {
padding-bottom: 2.75em;
}
.txtalign-c .section__header {
text-align: center;
}
}
@media screen and (max-width: 767px) {
.section__header {
padding-bottom: 2em;
}
}
@media screen and (max-width: 767px) {
.global .section__header {
margin-right: auto;
margin-left: auto;
width: 80%;
}
}
.section__header.-flex {
text-align: left;
}
@media screen and (min-width: 768px) {
.section__header.-flex {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
-webkit-box-align: center;
}
}
.section__header.-align-l {
text-align: left;
}
@media screen and (min-width: 768px) {
.section__title {
font-size: 3.2rem;
}
}
@media screen and (max-width: 767px) {
.section__title {
font-size: 2.7rem;
}
}
@media screen and (max-width: 320px) {
.section__title {
font-size: 2.4rem;
}
}
@media screen and (min-width: 768px) {
.section__summary {
padding-top: 0.75em;
}
}
@media screen and (max-width: 767px) {
.section__summary {
padding-top: 0.57143em;
}
}
@media screen and (min-width: 768px) {
.about .section__summary,
.splitEl .section__summary {
padding-right: 4.375em;
}
}
@media screen and (max-width: 767px) {
.about .section__summary,
.splitEl .section__summary {
line-height: 1.2;
}
}
.-flex .section__summary {
position: relative;
}
@media screen and (min-width: 768px) {
.-flex .section__summary {
margin-left: 1.875em;
padding-top: 0;
padding-left: 1.875em;
}
.-flex .section__summary:before {
position: absolute;
top: 50%;
left: 0;
display: block;
width: 1px;
height: 1em;
background: rgba(0, 0, 0, 0.08);
content: "";
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}
}
.section__more {
font-weight: 600;
}
@media screen and (min-width: 768px) {
.section__more {
padding-top: 1em;
}
}
@media screen and (max-width: 767px) {
.section__more {
padding-top: 0.71429em;
}
}
.section__category {
position: relative;
font-weight: 600;
}
@media screen and (min-width: 768px) {
.section__category {
margin: 0.5em 0 1.75em;
padding-top: 1.25em;
font-size: 2.4rem;
}
.section__header .section__category {
margin: 2.08333em 0 0;
}
}
@media screen and (max-width: 767px) {
.section__category {
margin: 2.33333em 0.55556em 1.11111em;
padding-top: 1.33333em;
font-size: 1.8rem;
}
.section__header .section__category {
margin-right: 0;
margin-left: 0;
}
.section__header + .section__category {
margin-top: 0;
}
}
@media screen and (max-width: 320px) {
.section__category {
font-size: 2rem;
}
}
.section__category:before {
position: absolute;
top: 0;
top: 0;
left: 0;
display: block;
width: 1.25em;
height: 1px;
background: #000;
content: "";
}
.txtalign-c .section__category:before,
.-align-c .section__category:before {
left: 50%;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
}
.-txtalign-l .section__category:before,
.-align-l .section__category:before {
left: 0;
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0);
}
.modal-video-close-btn {
top: -95px;
right: -10px;
width: 75px;
height: 75px;
}
@media screen and (max-width: 767px) {
.modal-video-close-btn {
top: -50px;
right: -10px;
width: 40px;
height: 40px;
}
}
.modal-video-close-btn:before,
.modal-video-close-btn:after {
position: absolute;
top: 50%;
left: 0;
margin-top: 0;
width: 100%;
height: 1px;
background: #fff;
content: "";
-webkit-transform-origin: center center;
-ms-transform-origin: center center;
-o-transform-origin: center center;
transform-origin: center center;
moz-transform-origin: center center;
}
.modal-video-close-btn:before {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.modal-video-close-btn:after {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.modal-video-movie-wrap.-modal-img {
position: relative;
padding-bottom: 67.2%;
}
.modal-video-movie-wrap.-modal-img img {
width: 100%;
height: auto;
}
.lad3cover-container {
z-index: 1001;
}
@media screen and (min-width: 768px) {
.bnrImg {
padding-top: 6.25em;
padding-bottom: 6.25em;
}
}
@media screen and (max-width: 767px) {
.bnrImg {
padding-top: 2.14286em;
padding-bottom: 3.42857em;
}
}
.bnrImg__item {
overflow: hidden;
width: 100%;
height: 100%;
}
.bnrVideo {
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
}
@media screen and (min-width: 768px) {
.bnrVideo {
padding-top: 6.25em;
padding-bottom: 6.25em;
}
}
@media screen and (min-width: 768px) {
.bnrVideo__inner {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: justify;
-ms-flex-align: center;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
background-image: none !important;
-webkit-box-align: center;
-webkit-box-pack: justify;
-ms-flex-wrap: wrap;
}
}
@media screen and (max-width: 767px) {
.bnrVideo__inner {
padding-top: 3.57143em;
padding-bottom: 3.57143em;
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
}
}
.bnrVideo__header {
color: #fff;
text-align: center;
}
@media screen and (min-width: 768px) {
.bnrVideo__header {
order: 2;
width: calc(50% - 2.5em);
-webkit-box-ordinal-group: 3;
-ms-flex-order: 2;
}
}
@media screen and (min-width: 768px) {
.bnrVideo__content {
order: 1;
width: 50%;
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
}
}
.bnrVideo__video {
position: relative;
width: 100%;
}
@media screen and (max-width: 767px) {
.bnrVideo__video {
margin-top: 1.42857em;
}
}
.bnrVideo__video:before {
position: absolute;
top: 50%;
left: 50%;
z-index: 1;
display: block;
width: 2.5625em;
height: 2.5625em;
background: url("../images/ico-play.svg") center center no-repeat;
background-size: contain;
content: "";
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.carousel {
overflow: hidden;
}
@media screen and (min-width: 768px) {
.carousel .slick-slide {
width: 21.625em;
}
}
@media screen and (max-width: 767px) {
.carousel .slick-slide {
width: 17.14286em;
}
}
.carousel .slick-arrow {
z-index: 1;
height: calc(100% + 1px);
}
@media screen and (min-width: 768px) {
.carousel .slick-arrow {
width: calc((100vw - 19.125em * 4 - 2.5em / 2) / 2);
}
}
@media screen and (min-width: 1500px) {
.carousel .slick-arrow {
width: 200px;
}
}
@media screen and (max-width: 767px) {
.carousel .slick-arrow {
width: calc((100vw - 12.5em - 2.5em * 2) / 2);
}
}
.carousel .slick-arrow:before {
display: none;
}
.carousel .slick-arrow.slick-next {
right: -1px;
}
.carousel .slick-arrow.slick-prev {
left: 0;
}
.carousel .slick-track {
margin: 0;
-webkit-transition: margin 0.5s ease-out;
transition: margin 0.5s ease-out;
}
.carousel__arw {
display: block;
height: 100%;
background: -webkit-gradient(
linear,
left top,
right top,
from(white),
color-stop(20%, rgba(255, 255, 255, 0.8)),
color-stop(80%, rgba(255, 255, 255, 0)),
to(rgba(255, 255, 255, 0))
);
background: -webkit-linear-gradient(
left,
white,
rgba(255, 255, 255, 0.8) 20%,
rgba(255, 255, 255, 0) 80%,
rgba(255, 255, 255, 0)
);
background: linear-gradient(
90deg,
white,
rgba(255, 255, 255, 0.8) 20%,
rgba(255, 255, 255, 0) 80%,
rgba(255, 255, 255, 0)
);
}
@media screen and (min-width: 1500px) {
.global .carousel__arw {
background: -webkit-gradient(
linear,
left top,
right top,
from(white),
color-stop(20%, rgba(255, 255, 255, 0.8)),
color-stop(50%, rgba(255, 255, 255, 0)),
to(rgba(255, 255, 255, 0))
);
background: -webkit-linear-gradient(
left,
white,
rgba(255, 255, 255, 0.8) 20%,
rgba(255, 255, 255, 0) 50%,
rgba(255, 255, 255, 0)
);
background: linear-gradient(
90deg,
white,
rgba(255, 255, 255, 0.8) 20%,
rgba(255, 255, 255, 0) 50%,
rgba(255, 255, 255, 0)
);
}
}
@media screen and (max-width: 767px) {
.global .carousel__arw {
width: 1.42857em;
background: -webkit-gradient(
linear,
left top,
right top,
from(rgba(255, 255, 255, 0.9)),
to(rgba(255, 255, 255, 0))
);
background: -webkit-linear-gradient(
left,
rgba(255, 255, 255, 0.9),
rgba(255, 255, 255, 0)
);
background: linear-gradient(
90deg,
rgba(255, 255, 255, 0.9),
rgba(255, 255, 255, 0)
);
}
}
.slick-next .carousel__arw {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
@media screen and (max-width: 767px) {
.slick-next .carousel__arw {
margin-right: 0;
margin-left: auto;
}
}
@media screen and (min-width: 768px) {
.carousel__item {
padding: 0 1.25em;
}
}
@media screen and (max-width: 767px) {
.carousel__item {
padding: 0 calc(1.42857em / 2);
}
}
@media screen and (min-width: 768px) {
.carousel__img + .carousel__detail {
margin-top: 1.5em;
text-align: center;
}
}
@media screen and (max-width: 767px) {
.carousel__img + .carousel__detail {
margin-top: 1.14286em;
text-align: center;
}
}
@media screen and (min-width: 768px) {
.carousel__detail:first-child {
padding: 3.5em 0 1em;
border-top: 1px solid rgba(0, 0, 0, 0.08);
}
}
@media screen and (max-width: 767px) {
.carousel__detail:first-child {
margin-top: 1.14286em;
}
}
.carousel__title {
font-weight: 600;
}
@media screen and (min-width: 768px) {
.carousel__summary {
margin-top: 0.75em;
}
}
@media screen and (max-width: 767px) {
.carousel__summary {
margin-top: 0.57143em;
line-height: 1.3;
}
}
@media screen and (min-width: 768px) {
.carousel__more {
margin-top: 0.75em;
}
}
@media screen and (max-width: 767px) {
.carousel__more {
margin-top: 0.57143em;
}
}
@media screen and (min-width: 768px) {
.feature {
padding-top: 3em;
}
.-verticalSize .feature {
padding-top: 2.1875em;
}
}
@media screen and (max-width: 767px) {
.feature {
padding-top: 2.1875em;
padding-left: 0 !important;
padding-right: 0 !important;
}
}
.feature__panel {
display: -ms-grid;
display: grid;
}
@media screen and (min-width: 768px) {
.feature__panel {
max-height: 750px;
height: 43.9vw;
-ms-grid-rows: 1fr 50%;
-ms-grid-columns: 66.2% 1fr;
grid-template: "box-a box-b" 1fr "box-a box-c" 50% / 66.2% 1fr;
}
}
@media screen and (max-width: 1023px) {
.feature__panel {
max-height: inherit;
height: auto;
-ms-grid-rows: 65vw 33vw;
-ms-grid-columns: 50% 1fr;
grid-template: "box-a box-a" 65vw "box-b box-c" 33vw / 50% 1fr;
}
}
@media screen and (min-width: 768px) {
.-half .feature__panel {
height: 37vw;
-ms-grid-rows: 1fr 50%;
-ms-grid-columns: 50% 1fr;
grid-template: "box-a box-b" 1fr "box-a box-c" 50% / 50% 1fr;
}
}
@media screen and (max-width: 1023px) {
.-half .feature__panel {
max-height: inherit;
height: auto;
-ms-grid-rows: 65vw 33vw;
-ms-grid-columns: 50% 1fr;
grid-template: "box-a box-a" 65vw "box-b box-c" 33vw / 50% 1fr;
}
}
.-card .feature__panel,
.-separate .feature__panel {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: start;
justify-content: flex-start;
flex-wrap: wrap;
-ms-flex-wrap: wrap;
-webkit-box-pack: start;
}
@media screen and (min-width: 768px) {
.-card .feature__panel,
.-separate .feature__panel {
max-height: inherit;
height: auto;
}
}
.feature__item {
overflow: hidden;
background: #000;
display: flex;
flex-direction: column;
}
@media screen and (max-width: 1023px) {
.-card .feature__panel,
.-separate .feature__panel {
height: auto;
flex-direction: column;
}
.feature__item {
width: 100% !important;
margin-bottom: 20px;
}
.feature__item:last-child {
margin-bottom: 0;
}
}
.feature__item.box-a {
grid-area: box-a;
}
.feature__item.box-b {
grid-area: box-b;
}
.feature__item.box-c {
grid-area: box-c;
}
@media screen and (min-width: 768px) {
.feature__item.box-a {
-ms-grid-row: 1;
-ms-grid-row-span: 2;
-ms-grid-column: 1;
}
.feature__item.box-b {
-ms-grid-row: 1;
-ms-grid-column: 2;
}
.feature__item.box-c {
-ms-grid-row: 2;
-ms-grid-column: 2;
}
}
@media screen and (max-width: 1023px) {
.feature__item.box-a {
-ms-grid-row: 1;
-ms-grid-row-span: 1;
-ms-grid-column: 1;
-ms-grid-column-span: 2;
}
.feature__item.box-b {
-ms-grid-row: 2;
-ms-grid-column: 1;
}
.feature__item.box-c {
-ms-grid-row: 2;
-ms-grid-column: 2;
}
}
@media screen and (max-width: 1023px) {
.feature__item.box-a {
-ms-grid-row: 1;
-ms-grid-row-span: 1;
-ms-grid-column: 1;
-ms-grid-column-span: 2;
}
.feature__item.box-b {
-ms-grid-row: 2;
-ms-grid-column: 1;
}
.feature__item.box-c {
-ms-grid-row: 2;
-ms-grid-column: 2;
}
}
.-card .feature__item {
background: -webkit-gradient(
linear,
left top,
right top,
from(#f0f4f7),
to(#e9edf0)
);
background: -webkit-linear-gradient(left, #f0f4f7, #e9edf0);
background: linear-gradient(90deg, #f0f4f7, #e9edf0);
}
@media screen and (min-width: 768px) {
.-card .feature__item {
width: calc(100% / 3 - 45px);
margin-left: 45px;
}
.-card .feature__item:first-child {
margin-left: 0px;
}
}
@media screen and (max-width: 767px) {
.-card .feature__item {
margin-top: 0.71429em;
width: 100%;
}
.-card .feature__item:first-child {
margin-top: 0;
}
}
@media screen and (min-width: 768px) {
.-separate .feature__item {
width: 50%;
}
}
@media screen and (max-width: 767px) {
.-separate .feature__item {
width: 100%;
}
}
.feature__link,
.feature__thumb {
position: relative;
overflow: hidden;
width: 100%;
height: 100%;
}
.feature__link {
position: relative;
display: block;
}
.-card .feature__link,
.-separate .feature__link {
height: auto;
}
.-card .feature__link {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
height: 100%;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
}
.feature__link:after {
position: absolute;
top: 0;
left: 0;
z-index: 0;
display: block;
width: 102%;
height: 102%;
content: "";
}
@media screen and (min-width: 768px) {
.feature__link:after {
background: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(70%, rgba(0, 0, 0, 0)),
to(rgba(0, 0, 0, 0.6))
);
background: -webkit-linear-gradient(
rgba(0, 0, 0, 0) 70%,
rgba(0, 0, 0, 0.6)
);
background: linear-gradient(rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.6));
}
}
@media screen and (max-width: 767px) {
.feature__link:after {
background: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(55%, rgba(0, 0, 0, 0)),
to(rgba(0, 0, 0, 0.6))
);
background: -webkit-linear-gradient(
rgba(0, 0, 0, 0) 55%,
rgba(0, 0, 0, 0.6)
);
background: linear-gradient(rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.6));
}
}
.-card .feature__link:after {
display: none;
}
.feature__thumb {
position: relative;
}
.-card .feature__thumb {
height: auto;
}
.feature__thumb img {
position: absolute;
min-width: 100%;
top: 50%;
left: 50%;
max-width: inherit;
height: 102%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
object-fit: cover;
width: 100%;
height: 100%;
}
@media screen and (min-width: 768px) {
.feature__thumb img {
position: relative;
min-width: inherit;
top: 0;
left: 0;
max-width: inherit;
-webkit-transform: translate(0, 0);
-moz-transform: translate(0, 0);
-ms-transform: translate(0, 0);
-o-transform: translate(0, 0);
transform: translate(0, 0);
object-fit: cover;
width: 100%;
height: 100%;
}
}
.-card .feature__thumb img,
.-separate .feature__thumb img {
position: relative;
top: inherit;
left: inherit;
width: 100%;
height: 460px;
-webkit-transform: translate(0, 0);
-moz-transform: translate(0, 0);
-ms-transform: translate(0, 0);
-o-transform: translate(0, 0);
transform: translate(0, 0);
}
.-separate .feature__thumb img {
width: 100%;
}
.-card .feature__thumb img:after {
position: absolute;
top: 0;
left: 0;
z-index: 0;
display: block;
width: 102%;
height: 102%;
content: "";
}
@media screen and (min-width: 768px) {
.-card .feature__thumb img:after {
background: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(70%, rgba(0, 0, 0, 0)),
to(rgba(0, 0, 0, 0.6))
);
background: -webkit-linear-gradient(
rgba(0, 0, 0, 0) 70%,
rgba(0, 0, 0, 0.6)
);
background: linear-gradient(rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.6));
}
}
@media screen and (max-width: 767px) {
.-card .feature__thumb img:after {
background: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(55%, rgba(0, 0, 0, 0)),
to(rgba(0, 0, 0, 0.6))
);
background: -webkit-linear-gradient(
rgba(0, 0, 0, 0) 55%,
rgba(0, 0, 0, 0.6)
);
background: linear-gradient(rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.6));
}
}
.feature__text {
position: absolute;
bottom: 0;
left: 0;
z-index: 10;
color: #fff;
}
@media screen and (min-width: 768px) {
.feature__text {
padding: 1.125em 1.25em;
}
}
@media screen and (max-width: 767px) {
.feature__text {
padding: 0.71429em;
width: 100%;
}
}
@media screen and (max-width: 320px) {
.feature__text {
padding: 0.57143em;
}
}
.feature__title {
color: #fff;
}
.feature__title.overlayBackground {
/*background: rgba(0, 0, 0, 0.6);*/
background: rgba(0, 0, 0, 0.6);
color: #fff;
width: 100%;
min-height: 120px;
display: flex;
/*justify-content: center;*/
align-items: center;
}
@media screen and (min-width: 768px) {
.feature__title {
font-size: 2.4rem;
}
.-card .feature__title {
padding: 0.75em 0.83333em;
line-height: 1.2;
}
}
@media screen and (max-width: 767px) {
.feature__title {
font-size: 1.5rem;
}
.box-a .feature__title,
.-separate .feature__title {
font-size: 2.3rem;
}
.-card .feature__title {
padding: 0.78261em 0.86957em;
font-size: 2.3rem;
line-height: 1.2;
}
}
@media screen and (max-width: 320px) {
.feature__title {
font-size: 1.3rem;
}
.box-a .feature__title,
.-separate .feature__title {
font-size: 2.3rem;
}
.-card .feature__title {
padding: 0.9em 1em;
font-size: 2rem;
line-height: 1.2;
}
}
.-card .feature__title {
position: absolute;
bottom: 0;
left: 0;
z-index: 1;
box-sizing: border-box;
}
.feature__summary {
line-height: 1.3;
}
@media screen and (min-width: 768px) {
.feature__summary {
margin-top: 0.25em;
}
}
@media screen and (max-width: 767px) {
.feature__summary {
display: -webkit-box;
overflow: hidden;
margin-top: 0.28571em;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.box-b .feature__summary,
.box-c .feature__summary {
display: none;
}
}
.feature__detail {
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 1.125em 1.25em;
}
.feature__detail:nth-of-type(1) {
flex-grow: 2;
}
@media screen and (min-width: 768px) {
.feature__detail {
/*min-height: 11.25em;*/
}
}
.feature__detail p {
margin-top: 0.625em;
}
.feature__detail p:first-child {
margin-top: 0;
}
.frameBlock {
margin-top: 2.5em;
background: #f0f4f7;
}
@media screen and (min-width: 768px) {
.frameBlock {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: justify;
-ms-flex-align: center;
justify-content: space-between;
flex-wrap: wrap;
padding: 3.125em;
-webkit-box-pack: justify;
-webkit-box-align: center;
-ms-flex-wrap: wrap;
}
}
@media screen and (max-width: 767px) {
.frameBlock {
padding: 2.14286em;
}
}
.frameBlock.-border {
border: 1px solid rgba(0, 0, 0, 0.08);
background: none;
}
.frameBlock:first-child {
margin-top: 0;
}
@media screen and (min-width: 768px) {
.frameBlock__img {
width: 19.125em;
}
}
@media screen and (min-width: 768px) {
.frameBlock__detail {
width: calc(100% - 19.125em - 2.5em);
}
}
@media screen and (max-width: 767px) {
.frameBlock__detail {
margin-top: 1.42857em;
}
}
.global {
position: relative;
}
@media screen and (max-width: 767px) {
.global {
padding-right: 0 !important;
padding-left: 0 !important;
}
}
.global__inner {
position: relative;
}
@media screen and (min-width: 768px) {
.global__inner {
padding: 6.25em 0;
}
}
@media screen and (max-width: 767px) {
.global__inner {
padding: 4.375em 0;
}
}
.global__inner:before {
position: absolute;
top: 0;
left: 50%;
display: block;
max-width: 1500px;
height: 100%;
background: #f0f4f7;
content: "";
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
}
@media screen and (min-width: 768px) {
.global__inner:before {
width: 88%;
}
}
@media screen and (max-width: 767px) {
.global__inner:before {
width: calc(100% - 0.71429em * 2);
}
}
.section__header_kc {
position: relative;
margin: 0 auto !important;
top: auto !important;
left: auto !important;
}
/*@media screen and (min-width: 768px) {
.section__header {
padding-bottom: 2.75em;
}
.txtalign-c .section__header {
text-align: center;
}
}*/
.global__content {
position: relative;
}
.global__slider {
visibility: hidden;
opacity: 0;
-webkit-transition: opacity 0.5s ease-out, visibility 0.5s ease-out;
transition: opacity 0.5s ease-out, visibility 0.5s ease-out;
}
@media screen and (min-width: 768px) {
.global__slider {
margin-bottom: 3.125em;
}
}
@media screen and (max-width: 767px) {
.global__slider {
margin-bottom: 1.42857em;
}
}
.global__slider.-loaded {
visibility: visible;
opacity: 1;
}
@media screen and (max-width: 767px) {
.global__sliderItem {
padding: 0 0.35714em;
}
}
@media screen and (min-width: 768px) {
.global__sliderImg {
max-width: 45vw;
}
}
@media screen and (max-width: 767px) {
.global__sliderImg {
max-width: 76vw;
}
}
.global__sliderCaption {
text-align: center;
}
@media screen and (min-width: 768px) {
.global__sliderCaption {
margin-top: 0.75em;
}
.global__sliderCaption.second {
margin-top: 0;
}
}
@media screen and (max-width: 767px) {
.news-style-slider .global__inner {
padding-bottom: 0;
}
.global__sliderCaption {
margin-top: 1em;
font-size: 1.2rem;
max-width: 80vw;
/*margin-left: calc(50% - 33vw);
margin-right: calc(50% - 33vw);*/
margin: 0 auto;
padding-bottom: 20px;
}
.global__sliderCaption.second {
margin-top: 0;
}
}
.global__slider .slick-track {
margin: 0;
-webkit-transition: margin 0.5s ease-out;
transition: margin 0.5s ease-out;
}
.global__slider .slick-slide {
-webkit-transition: -webkit-transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
transition: -webkit-transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1),
-webkit-transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}
@media screen and (min-width: 768px) {
.global__slider .slick-slide {
-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
-ms-transform: scale(0.8);
-o-transform: scale(0.8);
transform: scale(0.8);
}
}
@media screen and (min-width: 768px) {
.global__slider .slick-active,
.global__slider .currentItem {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
}
.global__thumbs {
visibility: hidden;
margin: 0 auto;
opacity: 0;
-webkit-transition: opacity 0.5s ease-out, visibility 0.5s ease-out;
transition: opacity 0.5s ease-out, visibility 0.5s ease-out;
}
@media screen and (min-width: 768px) {
.global__thumbs {
max-width: 1498px;
width: calc(88% - 2px);
}
}
@media screen and (min-width: 1500px) {
.global__thumbs {
width: calc(88% - 2px);
}
}
.global__thumbs:before,
.global__thumbs:after {
position: absolute;
top: 0;
z-index: 1;
height: 100%;
content: "";
}
@media screen and (min-width: 768px) {
.global__thumbs:before,
.global__thumbs:after {
width: calc(8.75em * 1.4);
background: -webkit-gradient(
linear,
left top,
right top,
color-stop(5%, #f0f4f7),
color-stop(50%, rgba(240, 244, 247, 0.8)),
color-stop(70%, rgba(240, 244, 247, 0.4)),
to(rgba(240, 244, 247, 0))
);
background: -webkit-linear-gradient(
left,
#f0f4f7 5%,
rgba(240, 244, 247, 0.8) 50%,
rgba(240, 244, 247, 0.4) 70%,
rgba(240, 244, 247, 0)
);
background: linear-gradient(
90deg,
#f0f4f7 5%,
rgba(240, 244, 247, 0.8) 50%,
rgba(240, 244, 247, 0.4) 70%,
rgba(240, 244, 247, 0)
);
}
}
@media screen and (max-width: 767px) {
.global__thumbs:before,
.global__thumbs:after {
width: calc(4.14286em - 2.1875em * 1.3);
background: -webkit-gradient(
linear,
left top,
right top,
color-stop(5%, white),
color-stop(rgba(255, 255, 255, 0.8)),
to(rgba(255, 255, 255, 0))
);
background: -webkit-linear-gradient(
left,
white 5%,
rgba(255, 255, 255, 0.8),
rgba(255, 255, 255, 0)
);
background: linear-gradient(
90deg,
white 5%,
rgba(255, 255, 255, 0.8),
rgba(255, 255, 255, 0)
);
}
}
.global__thumbs:before {
left: -1px;
}
.global__thumbs:after {
right: -1px;
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
.global__thumbs.-loaded {
visibility: visible;
opacity: 1;
}
.global__thumbsItem {
position: relative;
text-align: center;
line-height: 1;
cursor: pointer;
}
.global__thumbsItem:before {
position: absolute;
top: 0;
left: 50%;
display: block;
height: 2px;
background: #000;
content: "";
opacity: 0;
-webkit-transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
-webkit-transform: translateX(-50%) scale(0, 1);
-moz-transform: translateX(-50%) scale(0, 1);
-ms-transform: translateX(-50%) scale(0, 1);
-o-transform: translateX(-50%) scale(0, 1);
transform: translateX(-50%) scale(0, 1);
-webkit-transform-origin: center center;
-ms-transform-origin: center center;
-o-transform-origin: center center;
transform-origin: center center;
moz-transform-origin: center center;
}
@media screen and (min-width: 768px) {
.global__thumbsItem {
padding: 0 0.625em;
min-width: 8.75em;
max-width: 8.75em;
}
.global__thumbsItem:before {
width: calc(100% - 0.625em * 2);
}
}
@media screen and (max-width: 767px) {
.global__thumbsItem {
padding: 0 0.28571em;
min-width: 4.14286em;
max-width: 4.14286em;
}
.global__thumbsItem:before {
width: calc(100% - 0.28571em * 2);
}
}
.global__thumbsItem span {
position: relative;
display: block;
}
@media screen and (min-width: 768px) {
.global__thumbsItem span {
margin-top: 1.875em;
}
}
@media screen and (max-width: 767px) {
.global__thumbsItem span {
margin-top: 0.85714em;
}
}
.slick-current .global__thumbsItem {
color: red;
}
.slick-current .global__thumbsItem:before {
opacity: 1;
-webkit-transition: opacity 0.6s linear,
-webkit-transform 0.5s 0.1s cubic-bezier(0.23, 1, 0.32, 1);
transition: opacity 0.6s linear,
-webkit-transform 0.5s 0.1s cubic-bezier(0.23, 1, 0.32, 1);
transition: opacity 0.6s linear,
transform 0.5s 0.1s cubic-bezier(0.23, 1, 0.32, 1);
transition: opacity 0.6s linear,
transform 0.5s 0.1s cubic-bezier(0.23, 1, 0.32, 1),
-webkit-transform 0.5s 0.1s cubic-bezier(0.23, 1, 0.32, 1);
-webkit-transform: translateX(-50%) scale(1);
-moz-transform: translateX(-50%) scale(1);
-ms-transform: translateX(-50%) scale(1);
-o-transform: translateX(-50%) scale(1);
transform: translateX(-50%) scale(1);
}
.global__more {
text-align: center;
}
@media screen and (min-width: 768px) {
.global__more {
padding-top: 3.125em;
}
}
@media screen and (max-width: 767px) {
.global__more {
padding-top: 1.875em;
}
}
.global__arw:before {
display: none;
}
.global__arw.slick-arrow {
z-index: 1;
width: 100px;
width: calc((100vw - 56vw) / 2);
height: 100%;
}
.slick-slider .slick-prev::before,
.slick-slider .slick-next::before {
color: #fff;
content: ">";
display: block;
font-size: 40px;
right: calc(50% - 20px);
position: absolute;
top: calc(50% - 20px);
background-color: #000;
height: 40px;
width: 40px;
opacity: 0.5 !important;
}
.slick-slider .slick-prev::before {
left: calc(50% - 25px);
/*transform: rotate(135deg);*/
transform: rotate(180deg);
}
.slick-slider .slick-prev:hover::before,
.slick-slider .slick-next:hover::before {
opacity: 1 !important;
}
.global__arw .arw {
position: absolute;
display: block;
visibility: hidden;
margin-top: -30px;
margin-left: -30px;
width: 60px;
height: 60px;
border-radius: 50%;
background: #fff;
-webkit-box-shadow: 0 0.3rem 0.75rem rgba(0, 0, 0, 0.1);
box-shadow: 0 0.3rem 0.75rem rgba(0, 0, 0, 0.1);
opacity: 0;
-webkit-transition: all 0.2s ease;
transition: all 0.2s ease;
-webkit-transform: scale(0.5);
-moz-transform: scale(0.5);
-ms-transform: scale(0.5);
-o-transform: scale(0.5);
transform: scale(0.5);
}
.global__arw .arw:before {
position: absolute;
top: 50%;
left: 50%;
display: block;
width: 100%;
height: 1em;
color: #000;
text-indent: center;
font-size: 1.6rem;
line-height: 1;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
@media screen and (max-width: 767px) {
.global__arw .arw {
display: none;
}
}
.global__arw.slick-next {
right: 0;
}
.global__arw.slick-next .arw:before {
content: "→";
}
.global__arw.slick-prev {
left: 0;
}
.global__arw.slick-prev .arw:before {
content: "←";
}
.global__arw.-on .arw {
visibility: visible;
width: 60px;
height: 60px;
opacity: 1;
opacity: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
.grid__list {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: justify;
justify-content: space-between;
flex-wrap: wrap;
-ms-flex-wrap: wrap;
-webkit-box-pack: justify;
}
.-clm-3 .grid__list:after {
display: block;
width: calc((100% - 2.5em * 2) / 3);
content: "";
}
.grid__item {
margin-top: 2.5em;
}
@media screen and (min-width: 768px) {
.grid__item {
width: calc((100% - 2.5em) / 2);
}
.grid__item:nth-of-type(-n + 2) {
margin-top: 0;
}
}
@media screen and (max-width: 767px) {
.grid__item {
margin: 0;
margin-bottom: 1em;
width: 100%;
}
}
.-fit .grid__item {
width: 50%;
}
@media screen and (max-width: 767px) {
.-fit .grid__item {
width: 100%;
}
}
@media screen and (min-width: 768px) {
.-clm-3 .grid__item {
width: calc((100% - 2.5em * 2) / 3);
}
.-clm-3 .grid__item:nth-of-type(-n + 3) {
margin-top: 0;
}
.-clm-3 .grid__item.-fit {
width: calc(100% - 1px);
}
}
.grid__link {
display: block;
}
.grid__thumb {
position: relative;
display: block;
}
.grid__thumb.-round {
overflow: hidden;
}
@media screen and (min-width: 768px) {
.grid__thumb.-round {
-webkit-border-radius: 0.625em;
-moz-border-radius: 0.625em;
border-radius: 0.625em;
-ms-border-radius: 0.625em;
}
}
@media screen and (max-width: 767px) {
.grid__thumb.-round {
-webkit-border-radius: 0.4375em;
-moz-border-radius: 0.4375em;
border-radius: 0.4375em;
-ms-border-radius: 0.4375em;
}
}
.grid__thumbMore {
position: absolute;
bottom: 0.625em;
left: 0;
display: block;
width: 100%;
text-align: center;
}
.grid__thumb img {
width: 100%;
}
.grid__detail {
margin-top: 1.25em;
}
.grid__title {
margin-top: 0.66667em;
font-size: 2.4rem;
line-height: 1.3;
}
.infoList {
opacity: 1;
-webkit-transition: opacity 0.2s ease-out;
transition: opacity 0.2s ease-out;
}
.infoList.-loading {
opacity: 0;
-webkit-transition: opacity 0.1s ease-out;
transition: opacity 0.1s ease-out;
}
.infoList__item {
padding: 1.875em 0;
border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.infoList__meta {
margin-bottom: 0.75em;
}
@media screen and (min-width: 768px) {
.infoList__title a:hover {
text-decoration: underline;
}
}
.infoList__category,
.infoList__date {
display: inline-block;
vertical-align: middle;
line-height: 1;
}
.infoList__category {
margin-right: 0.75em;
padding: 0.375em 0.625em;
min-width: 7.1875em;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
background: #f0f4f7;
text-align: center;
-ms-border-radius: 50px;
}
.infoList__date {
color: rgba(0, 0, 0, 0.2);
}
@media screen and (max-width: 767px) {
.imgList__item:first-child {
display: block !important;
opacity: 1 !important;
}
}
.letter {
position: relative;
display: inline-block;
opacity: 0;
-webkit-transform: translateX(2.5rem);
transform: translateX(2.5rem);
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.letter__l {
display: block;
overflow: visible;
}
.letter__w {
display: inline-block;
opacity: 0;
}
.letter__clone,
.letter__cover {
position: absolute;
top: 0;
left: 0;
display: block;
overflow: hidden;
width: 100%;
}
.letter__cover {
opacity: 0.25;
}
.letter-visible {
opacity: 1;
-webkit-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
-webkit-transition-property: opacity, -webkit-transform;
transition-property: opacity, -webkit-transform;
transition-property: transform, opacity;
transition-property: transform, opacity, -webkit-transform;
-webkit-transform: translateX(0);
transform: translateX(0);
}
.letter-animated .letter__w {
opacity: 1;
}
.kv__letter {
position: relative;
display: inline-block;
opacity: 0;
-webkit-transform: translateX(2.5rem);
transform: translateX(2.5rem);
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.kv__letter.letter-visible {
opacity: 1;
-webkit-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
-webkit-transition-property: opacity, -webkit-transform;
transition-property: opacity, -webkit-transform;
transition-property: transform, opacity;
transition-property: transform, opacity, -webkit-transform;
-webkit-transform: translateX(0);
transform: translateX(0);
}
.kv__letter-animated .kv__letter.letter-animated .letter__w {
opacity: 1;
}
.-letterfirst .kv__letter {
opacity: 0;
-webkit-transition: all 1.3s 0s linear;
transition: all 1.3s 0s linear;
-webkit-transition-property: opacity, -webkit-transform;
transition-property: opacity, -webkit-transform;
transition-property: transform, opacity;
transition-property: transform, opacity, -webkit-transform;
-webkit-transform: translateX(0);
transform: translateX(0);
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.-letterfirst .kv__letter .letter__cover {
opacity: 1;
}
.-letterfirst .-active .kv__letter {
opacity: 1;
}
.link {
display: flex;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
-ms-flex-align: center;
align-items: center;
-moz-align-items: center;
-ms-align-items: center;
-webkit-box-align: center;
}
.header .link {
-ms-flex-pack: center;
justify-content: center;
-moz-justify-content: center;
-ms-justify-content: center;
-webkit-box-pack: center;
}
.link.-keycolor {
color: #3088ce;
}
.link__text {
display: inline-block;
vertical-align: middle;
}
.link__svg {
position: relative;
width: 8px;
height: 8px;
}
.link__svg.-s {
width: 6px;
height: 6px;
}
.-external .link__svg {
top: 1px;
margin-left: 8px;
fill: #3088ce;
}
.-keycolor .link__svg {
fill: #3088ce;
}
.-keycolor-icn .link__svg {
fill: #3088ce;
}
.linkText.-ex:after {
display: inline-block;
margin-left: 6px;
width: 8px;
height: 8px;
background: url("../img/icn-external-b.svg") center center no-repeat;
background-size: contain;
vertical-align: middle;
}
@media screen and (min-width: 768px) {
.linkText.-ex:after {
content: "";
}
}
@media screen and (max-width: 767px) {
.linkText.-ex {
padding-right: 0.875em;
background-image: url("../img/icn-external-b.svg");
background-position: right 3px;
background-size: 0.5em auto;
background-repeat: no-repeat;
}
}
.linkText.-hasLine:after {
position: relative;
top: -2px;
}
.rollup__link,
.rollup__text {
-webkit-transition: all 0.45s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: all 0.45s cubic-bezier(0.165, 0.84, 0.44, 1);
-webkit-transition-property: opacity, -webkit-transform;
transition-property: opacity, -webkit-transform;
transition-property: transform, opacity;
transition-property: transform, opacity, -webkit-transform;
}
.rollup__text {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
}
.rollup__link {
position: absolute;
bottom: 0;
left: 0;
display: inline-block;
line-height: 1;
opacity: 0;
-webkit-transform: translateY(1.75em);
-moz-transform: translateY(1.75em);
-ms-transform: translateY(1.75em);
-o-transform: translateY(1.75em);
transform: translateY(1.75em);
}
@media screen and (min-width: 1024px) {
.rollup:hover .rollup__text,
a:hover .rollup .rollup__text,
button:hover .rollup .rollup__text {
-webkit-transform: translateY(-1.16667em);
-moz-transform: translateY(-1.16667em);
-ms-transform: translateY(-1.16667em);
-o-transform: translateY(-1.16667em);
transform: translateY(-1.16667em);
}
.rollup:hover .rollup__link,
a:hover .rollup .rollup__link,
button:hover .rollup .rollup__link {
opacity: 1;
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
}
}
.icn-pdf {
display: inline-block;
background: url("../images/icn-pdf.jpg") center center no-repeat;
background-size: contain;
vertical-align: middle;
text-indent: -9999px;
}
.icn-pdf {
display: block;
margin: 4px auto 0;
}
@media screen and (min-width: 768px) {
.icn-pdf {
width: 26px;
height: 14px;
}
}
@media screen and (max-width: 767px) {
.icn-pdf {
width: 1.85714em;
height: 1em;
}
}
.linkPanel {
position: relative;
border: 1px solid rgba(0, 0, 0, 0.05);
background-position: center center;
background-size: ceover;
background-repeat: no-repeat;
}
.linkPanel:before {
display: block;
padding-top: 60%;
content: "";
}
.linkPanel__inner {
position: absolute;
top: 0;
left: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
width: 100%;
height: 100%;
-ms-flex-wrap: wrap;
}
.linkPanel__item {
width: calc((100% - 0.05em) / 3);
}
.linkPanel__btn {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-pack: center;
-ms-flex-align: center;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
border-right: 1px solid rgba(0, 0, 0, 0.05);
-webkit-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
-webkit-transition-property: border, -webkit-box-shadow;
transition-property: border, -webkit-box-shadow;
transition-property: border, box-shadow;
transition-property: border, box-shadow, -webkit-box-shadow;
-webkit-box-align: center;
-webkit-box-pack: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
}
.linkPanel__item:nth-of-type(3n) .linkPanel__btn {
border-right-width: 0;
}
.linkPanel__item:nth-child(n + 4) .linkPanel__btn {
border-top: 1px solid rgba(0, 0, 0, 0.05);
}
@media screen and (min-width: 768px) {
.linkPanel__btn:hover {
border-color: transparent;
-webkit-box-shadow: 0 2px 30px rgba(4, 0, 0, 0.1);
-moz-box-shadow: 0 2px 30px rgba(4, 0, 0, 0.1);
box-shadow: 0 2px 30px rgba(4, 0, 0, 0.1);
}
}
.linkPanel__btn:before {
display: block;
width: 4.875em;
height: 4.875em;
border: 1px solid rgba(0, 0, 0, 0.08);
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
background: url("../images/icn-pin.png") center center no-repeat #fff;
background-size: 1.4375em auto;
content: "";
-ms-border-radius: 50%;
}
@media screen and (max-width: 767px) {
.linkPanel__btn:before {
width: 3.57143em;
height: 3.57143em;
background-size: 0.85714em auto;
}
}
.linkPanel__ttl {
margin-top: 0.5em;
width: 100%;
color: #000;
text-align: center;
}
@media screen and (min-width: 768px) {
.linkPanel__ttl {
margin-top: 0.5em;
}
}
@media screen and (max-width: 767px) {
.linkPanel__ttl {
margin-top: 0.35714em;
line-height: 1.1;
}
}
@media screen and (max-width: 767px) {
.linkPanel__ttl .more__text {
font-size: 1.3rem;
}
}
.panels {
overflow: hidden;
width: 100%;
}
.panels__frame {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: start;
/*justify-content: flex-start;*/
justify-content: space-evenly;
flex-wrap: wrap;
-ms-flex-wrap: wrap;
-webkit-box-pack: start;
}
@media screen and (min-width: 768px) {
.panels__frame {
/*width: calc( 100% + 2.5em);*/
}
}
@media screen and (max-width: 767px) {
.panels__frame {
width: calc(100% + 0.71429em);
}
}
.-outer .panels__frame {
-ms-flex-pack: justify;
justify-content: space-between;
width: 100%;
-webkit-box-pack: justify;
}
@media screen and (min-width: 768px) {
.panels__item {
margin-right: 2.5em;
margin-bottom: 2.5em;
}
}
@media screen and (max-width: 767px) {
.panels__item {
margin-right: 0.71429em;
margin-bottom: 1.25em;
}
}
.panels__item a {
display: block;
}
.panels__item img {
width: 100%;
}
.panels__item.-hidden {
visibility: hidden;
margin-bottom: 0;
height: 0;
opacity: 0;
}
.panels__item.-visible {
visibility: visible;
opacity: 1;
}
@media screen and (min-width: 768px) {
.panels__item.-visible {
-webkit-animation: fadeIn 0.6s ease-out;
animation: fadeIn 0.6s ease-out;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
}
@media screen and (max-width: 767px) {
.panels__item.-visible {
-webkit-animation: fadeIn 0.3s ease-out;
animation: fadeIn 0.3s ease-out;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
}
.panels__item.-full {
margin-right: 0;
}
@media screen and (min-width: 768px) {
.panels__item.-full {
width: calc(100% - 2.5em);
}
}
@media screen and (max-width: 767px) {
.panels__item.-full {
width: calc(100% - 0.71429em);
}
}
@media screen and (min-width: 768px) {
.panels__item.-col2 {
width: 46%;
display: inline-block;
}
.panels__item.-col2:last-of-type {
margin-right: 0px;
}
}
@media screen and (max-width: 767px) {
.panels__item.-col2 {
width: calc(100% - 0.71429em);
}
}
.splitEl .panels__item.-col2:nth-last-child(-n + 2) {
margin-bottom: 0;
}
@media screen and (max-width: 767px) {
.splitEl .panels__item.-col2 {
width: calc((100% - 0.71429em * 2) / 2);
}
}
@media screen and (min-width: 768px) {
.panels__item.-col3 {
width: calc((100% - 2.5em * 3 - 1px) / 3);
}
}
@media screen and (max-width: 767px) {
.panels__item.-col3 {
width: calc((100% - 0.71429em * 2) / 2);
}
}
@media screen and (min-width: 768px) {
.panels__item.-col4 {
width: calc((100% - 2.5em * 4) / 4);
}
}
@media screen and (max-width: 767px) {
.panels__item.-col4 {
width: calc((100% - 0.71429em * 2) / 2);
}
}
.-fit .panels__item {
margin-right: 0;
}
@media screen and (max-width: 767px) {
.-fit .panels__item {
margin-bottom: 0;
text-align: left;
}
}
@media screen and (min-width: 768px) {
.-fit .panels__item.-col2 {
width: calc((100% - 2.5em) / 2);
}
}
@media screen and (max-width: 767px) {
.-fit .panels__item.-col2 {
width: calc((100% - 0.71429em) / 2);
}
}
@media screen and (min-width: 768px) {
.-fit .panels__item.-col3 {
width: calc((100% - 2.5em) / 3);
}
}
@media screen and (max-width: 767px) {
.-fit .panels__item.-col3 {
width: calc((100% - 0.71429em) / 2);
}
}
@media screen and (min-width: 768px) {
.-fit .panels__item.-col4 {
width: calc((100% - 2.5em) / 4);
}
}
@media screen and (max-width: 767px) {
.-fit .panels__item.-col4 {
width: calc((100% - 0.71429em) / 2);
}
}
@media screen and (max-width: 767px) {
.-fit .panels__item.-cat {
width: calc((100% - 0.71429em * 2) / 2);
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.-fit .panels__item.-cat:nth-of-type(2n) {
margin-left: 0.71429em;
}
.-fit .panels__item.-cat:nth-of-type(-n + 2) {
border-top: 1px solid rgba(0, 0, 0, 0.08);
}
}
.-outer > .panels__frame > .panels__item {
margin-bottom: 0;
}
@media screen and (max-width: 767px) {
.-outer > .panels__frame > .panels__item:first-child {
margin-bottom: 2.14286em;
padding-bottom: 1.42857em;
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
}
.-outer > .panels__frame > .panels__item.-col2 {
position: relative;
margin-right: 0;
}
@media screen and (min-width: 768px) {
.-outer > .panels__frame > .panels__item.-col2 {
width: calc((100% - 2.5em * 2) / 2);
}
.-outer > .panels__frame > .panels__item.-col2:nth-of-type(2n):before {
position: absolute;
top: 0;
left: -2.5em;
display: block;
width: 1px;
height: 100%;
background-color: rgba(0, 0, 0, 0.08);
content: "";
}
}
@media screen and (max-width: 767px) {
.-outer > .panels__frame > .panels__item.-col2 {
width: 100%;
}
}
.-inner > .panels__frame > .panels__item {
margin-right: 0;
margin-bottom: 0;
}
@media screen and (min-width: 768px) {
.-inner > .panels__frame > .panels__item.-col2 {
width: calc((100% - 2.5em) / 2);
}
}
@media screen and (max-width: 767px) {
.-inner > .panels__frame > .panels__item.-col2 {
width: calc((100% - 0.71429em) / 2);
}
}
@media screen and (max-width: 767px) {
.-cat .panels__img img {
display: none;
}
}
@media screen and (min-width: 768px) {
.panels__caption {
margin-top: 0.75em;
font-weight: 600;
}
}
@media screen and (max-width: 767px) {
.panels__caption {
top: 0;
left: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-pack: end;
justify-content: flex-end;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 0 0.71429em 0.57143em;
width: 100%;
height: 100%;
background-color: white;
color: #000;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-box-pack: end;
}
.-cat .panels__caption {
position: relative;
top: inherit;
left: inherit;
display: inline-block;
padding: 1.85714em 0;
width: auto;
background: none;
color: #222;
font-weight: 600;
}
}
@media screen and (max-width: 320px) {
.panels__caption {
padding: 0.66667em;
font-size: 1.2rem;
}
}
@media screen and (max-width: 767px) {
.-cat .panels__caption .lineout {
position: relative;
display: inline-block;
padding-right: 10px;
width: auto;
background-image: url("../images/arw.svg");
background-position: center right;
background-size: 5px auto;
background-repeat: no-repeat;
vertical-align: middle;
word-break: break-all;
}
}
@media screen and (min-width: 768px) {
.panels__img + .panels__detail {
margin-top: 1.5em;
}
}
@media screen and (max-width: 767px) {
.panels__img + .panels__detail {
margin-top: 1.14286em;
}
}
@media screen and (min-width: 768px) {
.panels__detail:first-child {
padding: 3.5em 0 1em;
border-top: 1px solid rgba(0, 0, 0, 0.08);
}
}
@media screen and (max-width: 767px) {
.panels__detail:first-child {
margin-top: 1.14286em;
}
}
.panels__title {
font-weight: 600;
}
@media screen and (min-width: 768px) {
.panels__summary {
margin-top: 0.75em;
}
}
@media screen and (max-width: 767px) {
.panels__summary {
margin-top: 0.57143em;
line-height: 1.3;
}
}
@media screen and (min-width: 768px) {
.panels__more {
margin-top: 0.75em;
}
}
@media screen and (max-width: 767px) {
.panels__more {
margin-top: 0.57143em;
}
}
@media screen and (min-width: 768px) {
.panels__img + .panels__links {
margin-top: 1.25em;
}
}
@media screen and (max-width: 767px) {
.panels__img + .panels__links {
margin-top: 1.14286em;
}
}
@media screen and (min-width: 768px) {
.panels__links:first-child {
padding: 3.5em 0 1em;
border-top: 1px solid rgba(0, 0, 0, 0.08);
}
}
@media screen and (max-width: 767px) {
.panels__links:first-child {
margin-top: 1.14286em;
}
}
.panels__linksTitle {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-align: end;
align-items: flex-end;
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
line-height: 1.3;
-webkit-box-align: end;
}
@media screen and (min-width: 768px) {
.panels__linksTitle {
padding-bottom: 0.75em;
font-size: 2.4rem;
}
}
@media screen and (max-width: 767px) {
.panels__linksTitle {
padding-bottom: 0.70588em;
font-size: 1.7rem;
}
}
@media screen and (max-width: 320px) {
.panels__linksTitle {
padding-bottom: 0.85714em;
font-size: 1.4rem;
}
}
.panels__linksTitleStr {
display: inline-block;
vertical-align: bottom;
}
.panels__linksList {
margin-top: 1.625em;
}
.panels__linksItem {
line-height: 1;
}
@media screen and (min-width: 768px) {
.panels__linksItem {
margin-top: 1.25em;
}
}
@media screen and (max-width: 767px) {
.panels__linksItem {
margin-top: 1.28571em;
}
}
@media screen and (min-width: 768px) {
.panels__linksItem.-with-margin,
.panels__linksItem.-top {
margin-bottom: 2.1875em;
}
}
@media screen and (max-width: 767px) {
.panels__linksItem.-with-margin,
.panels__linksItem.-top {
margin-bottom: 2.14286em;
}
}
@media screen and (min-width: 768px) {
.panels__linksItem p {
padding-top: 1.25em;
}
}
@media screen and (max-width: 767px) {
.panels__linksItem p {
padding-top: 1.28571em;
}
}
.panels__linksItem p:first-child {
padding-top: 0;
}
.panels__linksItem a {
display: inline-block;
}
.panels__linksItem span {
padding-bottom: 4px;
vertical-align: middle;
}
@media screen and (max-width: 320px) {
.panels__linksItem {
font-size: 1.2rem;
}
}
.about .splitEl {
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
@media screen and (max-width: 767px) {
.splitEl {
padding: 2.1875em 0 2.85714em;
}
.splitEl.innerEl-wide {
padding-right: 0;
padding-left: 0;
}
}
@media screen and (min-width: 768px) {
.splitEl__panel {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
}
.-verticalSize .splitEl__panel.innerEl-tight {
padding-right: 0;
padding-left: 0;
}
@media screen and (min-width: 768px) {
.splitEl__header,
.splitEl__content {
padding-bottom: 5.625em;
}
}
@media screen and (max-width: 767px) {
.splitEl__header,
.splitEl__content {
padding-top: 2em;
}
}
@media screen and (min-width: 768px) {
.splitEl__header {
padding-top: 5.625em;
width: 33.3%;
}
}
.splitEl__content {
position: relative;
}
@media screen and (min-width: 768px) {
.splitEl__content {
padding-top: 0.625em;
padding-top: 6.25em;
padding-left: 3.75em;
width: calc(100% - 33.3%);
}
.splitEl__content:before {
position: absolute;
top: 0;
left: 0;
display: block;
width: 1px;
height: 100%;
background: rgba(0, 0, 0, 0.08);
content: "";
opacity: 1;
-webkit-transition: all 0.8s 0.3s ease-out;
transition: all 0.8s 0.3s ease-out;
-webkit-transition-property: height, opacity;
transition-property: height, opacity;
}
.splitEl__content.-none-border {
padding-left: 0;
}
.splitEl__content.-none-border:before {
display: none;
}
}
@media screen and (max-width: 768px) {
.splitEl__content:before {
left: 25px;
}
}
.tabs {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
line-height: 1;
-ms-flex-wrap: wrap;
}
.tabs__item {
margin: 0 1.25em 0.625em 0;
}
.tabs__btn {
display: inline-block;
padding: 0.3125em 0.625em;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
-webkit-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
-webkit-transition-property: background, color;
transition-property: background, color;
-ms-border-radius: 50px;
}
.tabs__btn.-current,
.tabs__btn:hover {
background: #000;
color: #fff;
}
.tabs__btn.-current {
font-weight: 600;
}
.textTabs {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
margin-bottom: 2.5em;
line-height: 1;
-ms-flex-wrap: wrap;
}
@media screen and (min-width: 768px) {
.tabs + .textTabs {
margin-top: 2.5em;
}
}
@media screen and (max-width: 767px) {
.tabs + .textTabs {
margin-top: 1.25em;
}
}
.textTabs__item {
position: relative;
margin-bottom: 1.25em;
}
.textTabs__item:before {
position: absolute;
top: 0;
left: -1px;
display: block;
width: 1px;
height: 100%;
background: #ebebeb;
content: "";
}
.textTabs__btn {
display: inline-block;
-webkit-box-sizing: border-box;
box-sizing: border-box;
min-width: 4.375em;
border-right: 1px solid rgba(0, 0, 0, 0.08);
color: rgba(0, 0, 0, 0.2);
-webkit-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
-webkit-transition-property: background, color;
transition-property: background, color;
}
.textTabs__btnLabel {
position: relative;
display: inline-block;
vertical-align: middle;
line-height: 1;
}
.textTabs__btnLabel:after {
position: absolute;
bottom: -0.625em;
left: 0;
display: block;
width: 100%;
height: 1px;
background: #000;
content: "";
opacity: 0;
-webkit-transition: opacity 0.2s ease-out;
transition: opacity 0.2s ease-out;
}
.textTabs__btn.-current,
.textTabs__btn:hover {
color: #000;
}
.textTabs__btn.-current .textTabs__btnLabel:after,
.textTabs__btn:hover .textTabs__btnLabel:after {
opacity: 1;
}
.textTabs__btn.-current {
font-weight: 700;
}
.icnTabs {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
margin-bottom: 3.75em;
line-height: 1;
-ms-flex-wrap: wrap;
}
@media screen and (max-width: 767px) {
.icnTabs {
display: none;
}
}
.tabs + .icnTabs {
margin-top: 2.5em;
}
.icnTabs__item {
padding-right: 1.25em;
padding-left: 1.25em;
border-left: 1px solid rgba(0, 0, 0, 0.08);
}
@media screen and (min-width: 768px) {
.icnTabs__item:first-child {
padding-left: 0;
border-left: 0px;
}
}
.icnTabs__btn {
display: inline-block;
-webkit-box-sizing: border-box;
box-sizing: border-box;
color: rgba(0, 0, 0, 0.2);
-webkit-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
-webkit-transition-property: background, color;
transition-property: background, color;
}
.icnTabs__btnLabel,
.icnTabs__btnIcn {
position: relative;
display: inline-block;
vertical-align: middle;
line-height: 1;
}
.icnTabs__btnIcn {
margin-right: 0.25em;
width: 0.9375em;
height: 0.9375em;
background-image: url("../images/icn-pin-gray.png");
background-position: center center;
background-size: contain;
background-repeat: no-repeat;
}
.icnTabs__btn.-current {
font-weight: 600;
}
.icnTabs__btn.-current .icnTabs__btnIcn {
background-image: url("../images/icn-pin.png");
}
.icnTabs__btn.-current,
.icnTabs__btn:hover {
color: #000;
}
.toggle__more {
position: relative;
z-index: 0;
text-align: center;
cursor: pointer;
}
@media screen and (max-width: 1023px) {
.toggle__more {
padding-right: 1.07143em;
padding-left: 1.07143em;
}
}
.toggle__more.-show {
visibility: visible;
opacity: 1;
}
@media screen and (min-width: 768px) {
.toggle__more.-show {
height: 6.875em;
}
}
@media screen and (max-width: 1023px) {
.toggle__more.-show {
height: 5.71429em;
}
}
.toggle__more.-show:after {
position: absolute;
bottom: 0;
left: 0;
z-index: 10;
display: block;
width: 100%;
background: #fff;
content: "";
opacity: 1;
}
@media screen and (min-width: 768px) {
.toggle__more.-show:after {
height: 3.4375em;
}
}
@media screen and (max-width: 1023px) {
.toggle__more.-show:after {
height: 2.85714em;
}
}
@media screen and (min-width: 768px) {
.five .toggle__more.-show:after {
height: 4.0625em;
}
}
@media screen and (max-width: 1023px) {
.five .toggle__more.-show:after {
height: 2.14286em;
}
}
.-opened .toggle__more.-show:after {
opacity: 0;
}
.-opened .toggle__more.-show {
visibility: hidden;
height: 0;
opacity: 0;
}
.toggle__more.-hide {
visibility: hidden;
height: 0;
opacity: 0;
-webkit-transition: all 0.1s ease-out;
transition: all 0.1s ease-out;
-webkit-transition-property: opacity, visibility;
transition-property: opacity, visibility;
}
.-opened .toggle__more.-hide {
visibility: visible;
height: auto;
opacity: 1;
-webkit-transition-delay: 0.5s;
transition-delay: 0.5s;
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
}
.five .-opened .toggle__more.-hide {
padding-top: 3.75em;
}
.clean .-opened .toggle__more {
padding-top: 1.875em;
}
.toggle__moreInner {
position: relative;
z-index: 11;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: center;
-ms-flex-align: center;
justify-content: center;
align-items: center;
overflow: hidden;
-webkit-box-align: center;
-webkit-box-pack: center;
}
.-show .toggle__moreInner {
background-color: #f0f4f7;
}
@media screen and (min-width: 768px) {
.-show .toggle__moreInner {
height: 6.875em;
}
}
@media screen and (max-width: 1023px) {
.-show .toggle__moreInner {
height: 5em;
}
}
.five .-show .toggle__moreInner {
-webkit-box-sizing: content-box;
box-sizing: content-box;
margin: 0 auto;
max-width: 62.5em;
border: 10px solid #fff;
}
.toggle__moreBtn {
display: block;
}
.-show .toggle__moreBtn {
width: 100%;
}
.-hide .toggle__moreBtn {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: center;
-ms-flex-align: center;
justify-content: center;
align-items: center;
width: 12.5em;
height: 3.75em;
border: 1px solid #ebebeb;
-webkit-border-radius: 40px;
-moz-border-radius: 40px;
border-radius: 40px;
background: #f0f4f7;
-webkit-box-align: center;
-webkit-box-pack: center;
-ms-border-radius: 40px;
}
.relax .-hide .toggle__moreBtn {
background: #fff;
}
.toggle__moreText {
position: relative;
color: #3088ce;
font-weight: 600;
}
.-show .toggle__moreText {
display: block;
line-height: 1;
}
@media screen and (min-width: 768px) {
.-show .toggle__moreText {
font-size: 1.8rem;
}
}
@media screen and (max-width: 767px) {
.-show .toggle__moreText {
font-size: 1.4rem;
}
}
.-hide .toggle__moreText {
padding-left: 1.11111em;
}
.-hide .toggle__moreText:before {
position: absolute;
top: 50%;
left: 0;
display: block;
width: 0.8125em;
height: 0.8125em;
background-image: url("../images/icn-close.png");
background-position: center center;
background-size: contain;
background-repeat: no-repeat;
content: "";
font-size: 1.6rem;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}
.toggle__moreIcn {
position: relative;
top: 1px;
display: block;
width: 100%;
}
@media screen and (min-width: 768px) {
.toggle__moreIcn {
margin-top: 0.5em;
height: 14px;
}
}
@media screen and (max-width: 1023px) {
.toggle__moreIcn {
margin-top: 0.25em;
height: 10px;
}
}
.toggle__moreIcn:after {
display: block;
margin: 0 auto;
width: 100%;
height: 100%;
background-image: url("../images/arw.svg");
background-position: center center;
background-size: contain;
background-repeat: no-repeat;
content: "";
-webkit-transform: translateX(0) rotate(90deg);
-moz-transform: translateX(0) rotate(90deg);
-ms-transform: translateX(0) rotate(90deg);
-o-transform: translateX(0) rotate(90deg);
transform: translateX(0) rotate(90deg);
}
.toggle__container {
position: relative;
min-height: calc(6.875em / 2);
}
.toggle__container .toggle__more.-show {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.toggle__content {
display: none;
}
.-debug .toggle__content {
display: block;
}
@media screen and (min-width: 768px) {
.-for-sp .toggle__content {
display: block;
}
}
@media screen and (min-width: 768px) {
.toggle__content-inner {
padding-bottom: 2.5em;
}
}
@media screen and (max-width: 1023px) {
.toggle__content-inner {
padding-bottom: 2.5em;
}
}
.zoom {
display: block;
-webkit-transition: -webkit-transform 0.8s cubic-bezier(0.23, 1, 0.32, 1);
transition: -webkit-transform 0.8s cubic-bezier(0.23, 1, 0.32, 1);
transition: transform 0.8s cubic-bezier(0.23, 1, 0.32, 1);
transition: transform 0.8s cubic-bezier(0.23, 1, 0.32, 1),
-webkit-transform 0.8s cubic-bezier(0.23, 1, 0.32, 1);
-webkit-transform: scale(1.01);
-moz-transform: scale(1.01);
-ms-transform: scale(1.01);
-o-transform: scale(1.01);
transform: scale(1.01);
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
@media screen and (min-width: 768px) {
button:hover .zoom,
button:focus .zoom,
a:hover .zoom,
a:focus .zoom,
.zoom:hover,
.zoom:focus {
-webkit-transform: scale(1.025);
-moz-transform: scale(1.025);
-ms-transform: scale(1.025);
-o-transform: scale(1.025);
transform: scale(1.025);
}
}
.zoomPanel {
display: block;
overflow: hidden;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.zoomPanel img {
-webkit-transition: -webkit-transform 0.3s ease-out;
transition: -webkit-transform 0.3s ease-out;
transition: transform 0.3s ease-out;
transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out;
-webkit-transform: scale(1.01);
-moz-transform: scale(1.01);
-ms-transform: scale(1.01);
-o-transform: scale(1.01);
transform: scale(1.01);
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
@media screen and (min-width: 768px) {
button:hover .zoomPanel img,
button:focus .zoomPanel img,
a:hover .zoomPanel img,
a:focus .zoomPanel img,
.zoomPanel:hover img,
.zoomPanel:focus img {
-webkit-transform: scale(1.025);
-moz-transform: scale(1.025);
-ms-transform: scale(1.025);
-o-transform: scale(1.025);
transform: scale(1.025);
}
}
.menu__link a {
text-transform: uppercase;
}
#loading {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
background: #f0f0f0;
z-index: 999;
pointer-events: none;
/* Luminous Circles */
}
#loading.is-load {
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
#loading.is-ready {
opacity: 0 !important;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
-webkit-transition: opacity 1s ease;
transition: opacity 1s ease;
}
#loading .pl-circles {
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
text-align: center;
}
#loading .pl-circles .loader {
position: absolute;
top: 45%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 100px;
height: 60px;
}
#loading .pl-circles .loader span,
#loading .pl-circles .loader:before,
#loading .pl-circles .loader:after {
position: absolute;
display: block;
width: 15px;
height: 15px;
border-radius: 50%;
opacity: 0.2;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
background: #a0a0a0;
}
#loading .pl-circles .loader span {
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-animation: lightUp 1.5s linear infinite 0.5s;
animation: lightUp 1.5s linear infinite 0.5s;
}
#loading .pl-circles .loader:before,
#loading .pl-circles .loader:after {
content: "";
}
#loading .pl-circles .loader:before {
top: 50%;
left: 0;
-webkit-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
transform: translate(0, -50%);
-webkit-animation: lightUp 1.5s linear infinite;
animation: lightUp 1.5s linear infinite;
}
#loading .pl-circles .loader:after {
top: 50%;
right: 0;
-webkit-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
transform: translate(0, -50%);
-webkit-animation: lightUp 1.5s linear infinite 1s;
animation: lightUp 1.5s linear infinite 1s;
}
@-webkit-keyframes lightUp {
0% {
opacity: 0.2;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
}
40% {
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
60% {
opacity: 0.2;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
}
100% {
opacity: 0.2;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
}
}
/* Slider */
.slick-slider {
position: relative;
display: block;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-ms-touch-action: pan-y;
touch-action: pan-y;
-webkit-tap-highlight-color: transparent;
}
.slick-list {
position: relative;
overflow: hidden;
display: block;
margin: 0;
padding: 0;
}
.slick-list:focus {
outline: none;
}
.slick-list.dragging {
cursor: pointer;
cursor: hand;
}
.slick-slider .slick-track,
.slick-slider .slick-list {
-webkit-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.slick-track {
position: relative;
left: 0;
top: 0;
display: block;
margin-left: auto;
margin-right: auto;
}
.slick-track:before,
.slick-track:after {
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;
}
#body_inner {
position: relative;
}
#body_inner:after {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #fff;
z-index: 99999;
-webkit-transition: all 0.8s ease 0.2s;
transition: all 0.8s ease 0.2s;
}
#body_inner:before {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #fff;
z-index: -1;
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#body_inner.is-loaded:after {
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
z-index: -1;
}
#body_inner.is-removing:before {
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
z-index: 99999;
}
#body_inner.is-fixed {
position: fixed !important;
width: 100%;
}
.mat-s {
margin-top: 30px !important;
}
@media screen and (min-width: 0) and (max-width: 640px) {
.mat-s {
margin-top: 15px !important;
}
}
.mat-m {
margin-top: 40px !important;
}
@media screen and (min-width: 0) and (max-width: 640px) {
.mat-m {
margin-top: 20px !important;
}
}
@media screen and (min-width: 0) and (max-width: 640px) {
.mat-l-sp {
margin-top: 50px !important;
}
}
.sub {
font-size: 50%;
}
[data-js-fixed].is-stop {
position: fixed;
top: 0 !important;
-webkit-transition: none !important;
transition: none !important;
-webkit-transform: translate3d(0px, 0px, 0px) !important;
transform: translate3d(0px, 0px, 0px) !important;
}
[data-src] {
background-repeat: no-repeat;
background-size: 100% auto;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
background-color: #f0f0f0;
}
[data-pj-mv] {
position: relative;
z-index: 99999;
}
.m-box-headnav {
position: relative;
}
.m-box-headnav .headnav-area {
position: absolute;
top: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.75);
z-index: 1000;
}
.m-box-headnav .headnav-area .headnav-inner {
margin: 0 40px;
position: relative;
*zoom: 1;
}
.m-box-headnav .headnav-area .headnav-inner:after {
content: " ";
display: table;
clear: both;
}
@media screen and (max-width: 1024px) {
.m-box-headnav .headnav-area .headnav-inner {
width: auto;
margin: 0 20px;
}
}
.m-box-headnav .headnav-area .headnav-inner .headnav-logo {
float: left;
padding: 32px 0;
line-height: 0.1;
position: relative;
}
@media screen and (max-width: 1024px) {
.m-box-headnav .headnav-area .headnav-inner .headnav-logo {
float: none;
padding: 40px 0;
}
}
@media screen and (min-width: 0) and (max-width: 640px) {
.m-box-headnav .headnav-area .headnav-inner .headnav-logo {
padding: 20px 0;
}
}
.m-box-headnav .headnav-area .headnav-inner .headnav-logo a {
display: inline-block;
margin-top: -13px;
}
@media screen and (max-width: 1024px) {
.m-box-headnav .headnav-area .headnav-inner .headnav-logo a {
margin-top: -20px;
}
}
@media screen and (min-width: 0) and (max-width: 640px) {
.m-box-headnav .headnav-area .headnav-inner .headnav-logo a {
margin-top: -10px;
}
}
.m-box-headnav .headnav-area .headnav-inner .headnav-logo img {
width: 123px;
}
@media screen and (max-width: 1024px) {
.m-box-headnav .headnav-area .headnav-inner .headnav-logo img {
width: 172px;
}
}
@media screen and (min-width: 0) and (max-width: 640px) {
.m-box-headnav .headnav-area .headnav-inner .headnav-logo img {
width: 86px;
}
}
.m-box-headnav .headnav-area .headnav-inner .headnav-logo.has-ttl .logo-ttl {
position: absolute;
left: 153px;
bottom: 25px;
display: block;
color: #fff;
line-height: 1.7;
padding-left: 30px;
font-size: 18.56px;
font-size: 1.16rem;
font-family: "Montserrat", sans-serif;
}
.m-box-headnav
.headnav-area
.headnav-inner
.headnav-logo.has-ttl
.logo-ttl:before {
content: "";
display: inline-block;
width: 1px;
height: 16px;
background: #fff;
position: absolute;
left: 0;
top: 50%;
margin-top: -8px;
}
@media screen and (max-width: 1024px) {
.m-box-headnav .headnav-area .headnav-inner .headnav-logo.has-ttl .logo-ttl {
display: none;
}
}
.m-box-headnav .headnav-area .headnav-inner .headnav-menu {
float: right;
font-family: "Montserrat", sans-serif;
color: #fff;
}
@media screen and (max-width: 1024px) {
.m-box-headnav .headnav-area .headnav-inner .headnav-menu {
float: none;
}
}
.m-box-headnav .headnav-area .headnav-inner .headnav-menu .menu-burger {
display: none;
}
@media screen and (max-width: 1024px) {
.m-box-headnav .headnav-area .headnav-inner .headnav-menu .menu-burger {
display: block;
position: absolute;
top: 0;
right: -17px;
width: 100px;
height: 100px;
cursor: pointer;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.m-box-headnav
.headnav-area
.headnav-inner
.headnav-menu
.menu-burger
> span {
position: absolute;
top: 50%;
left: 50%;
width: 28px;
height: 4px;
margin-left: -14px;
background-color: #fff;
display: inline-block;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.m-box-headnav
.headnav-area
.headnav-inner
.headnav-menu
.menu-burger
> span:nth-of-type(1) {
margin-top: -12px;
}
.m-box-headnav
.headnav-area
.headnav-inner
.headnav-menu
.menu-burger
> span:nth-of-type(2) {
margin-top: -2px;
}
.m-box-headnav
.headnav-area
.headnav-inner
.headnav-menu
.menu-burger
> span:nth-of-type(3) {
margin-top: 8px;
}
.m-box-headnav
.headnav-area
.headnav-inner
.headnav-menu
.menu-burger.is-active
> span:nth-of-type(1) {
margin-top: 0 !important;
-webkit-transform: rotateZ(45deg);
-ms-transform: rotate(45deg);
transform: rotateZ(45deg);
transition: margin 0.2s cubic-bezier(0.36, 0, 0.59, 0.99) 0.1s,
-webkit-transform 0.25s ease 0.36s;
}
.m-box-headnav
.headnav-area
.headnav-inner
.headnav-menu
.menu-burger.is-active
> span:nth-of-type(2) {
-webkit-transition: 0.2s ease 0.1s;
transition: 0.2s ease 0.1s;
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}
.m-box-headnav
.headnav-area
.headnav-inner
.headnav-menu
.menu-burger.is-active
> span:nth-of-type(3) {
margin-top: 0 !important;
-webkit-transform: rotateZ(-45deg);
-ms-transform: rotate(-45deg);
transform: rotateZ(-45deg);
-webkit-transition: margin 0.2s cubic-bezier(0.36, 0, 0.59, 0.99) 0.1s,
-webkit-transform 0.25s ease 0.36s;
transition: margin 0.2s cubic-bezier(0.36, 0, 0.59, 0.99) 0.1s,
-webkit-transform 0.25s ease 0.36s;
transition: margin 0.2s cubic-bezier(0.36, 0, 0.59, 0.99) 0.1s,
transform 0.25s ease 0.36s;
transition: margin 0.2s cubic-bezier(0.36, 0, 0.59, 0.99) 0.1s,
transform 0.25s ease 0.36s, -webkit-transform 0.25s ease 0.36s;
}
}
@media screen and (min-width: 0) and (max-width: 640px) {
.m-box-headnav .headnav-area .headnav-inner .headnav-menu .menu-burger {
right: -13px;
width: 40px;
height: 50px;
}
.m-box-headnav
.headnav-area
.headnav-inner
.headnav-menu
.menu-burger
> span {
width: 14px;
height: 2px;
margin-left: -7px;
}
.m-box-headnav
.headnav-area
.headnav-inner
.headnav-menu
.menu-burger
> span:nth-of-type(1) {
margin-top: -7px;
}
.m-box-headnav
.headnav-area
.headnav-inner
.headnav-menu
.menu-burger
> span:nth-of-type(2) {
margin-top: -1px;
}
.m-box-headnav
.headnav-area
.headnav-inner
.headnav-menu
.menu-burger
> span:nth-of-type(3) {
margin-top: 5px;
}
}
.m-box-headnav .headnav-area .headnav-inner .headnav-menu .menu-list {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
@media screen and (max-width: 1024px) {
.m-box-headnav .headnav-area .headnav-inner .headnav-menu .menu-list {
display: none;
margin: 0 -20px;
max-height: calc(100vh - 150px);
overflow: auto;
}
}
.m-box-headnav .headnav-area .headnav-inner .headnav-menu .menu-list > li + li {
margin-left: 80px;
}
@media screen and (max-width: 1024px) {
.m-box-headnav
.headnav-area
.headnav-inner
.headnav-menu
.menu-list
> li
+ li {
margin-left: 30px;
}
}
@media screen and (max-width: 1024px) {
.m-box-headnav
.headnav-area
.headnav-inner
.headnav-menu
.menu-list
> li
+ li {
margin-left: 0;
border-top: 1px solid #fff;
}
}
.m-box-headnav
.headnav-area
.headnav-inner
.headnav-menu
.menu-list
> li
.menu-item {
display: block;
color: #fff;
padding: 27px 0 26px;
position: relative;
font-size: 16px;
font-size: 1rem;
cursor: pointer;
}
@media screen and (max-width: 1024px) {
.m-box-headnav
.headnav-area
.headnav-inner
.headnav-menu
.menu-list
> li
.menu-item {
padding: 10px 20px;
font-size: 0.9375rem;
}
}
.m-box-headnav
.headnav-area
.headnav-inner
.headnav-menu
.menu-list
> li
.menu-item:before {
content: "";
display: inline-block;
position: absolute;
bottom: 24px;
left: 50%;
width: 0;
height: 2px;
background: #fff;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
}
@media screen and (max-width: 1024px) {
.m-box-headnav
.headnav-area
.headnav-inner
.headnav-menu
.menu-list
> li
.menu-item:before {
display: none;
}
}
.m-box-headnav
.headnav-area
.headnav-inner
.headnav-menu
.menu-list
> li
.menu-item:hover {
text-decoration: none;
}
@media screen and (min-width: 1024px) {
.m-box-headnav
.headnav-area
.headnav-inner
.headnav-menu
.menu-list
> li
.menu-item:hover:before {
width: 100%;
margin-left: -50%;
}
}
.m-box-headnav
.headnav-area
.headnav-inner
.headnav-menu
.menu-list
> li
.menu-item.is-current:before {
width: 100%;
margin-left: -50%;
}
.m-box-headnav
.headnav-area
.headnav-inner
.headnav-menu
.menu-list
> li
.menu-item.border {
padding-right: 14px;
padding-left: 14px;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
}
@media screen and (max-width: 1024px) {
.m-box-headnav
.headnav-area
.headnav-inner
.headnav-menu
.menu-list
> li
.menu-item.border {
padding: 10px 20px;
}
}
.m-box-headnav
.headnav-area
.headnav-inner
.headnav-menu
.menu-list
> li
.menu-item.border:before {
background: transparent;
border: 1px solid #fff;
top: 20px;
left: 0;
right: 0;
bottom: 20px;
width: auto;
height: auto;
}
.m-box-headnav
.headnav-area
.headnav-inner
.headnav-menu
.menu-list
> li
.menu-item.border:after {
content: "";
display: inline-block;
position: absolute;
top: 20px;
left: 0;
bottom: 20px;
width: 0;
background: #fff;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
}
@media screen and (max-width: 1024px) {
.m-box-headnav
.headnav-area
.headnav-inner
.headnav-menu
.menu-list
> li
.menu-item.border:after {
display: none;
}
}
.m-box-headnav
.headnav-area
.headnav-inner
.headnav-menu
.menu-list
> li
.menu-item.border
span {
display: inline-block;
position: relative;
z-index: +1;
}
@media screen and (max-width: 1024px) {
.m-box-headnav
.headnav-area
.headnav-inner
.headnav-menu
.menu-list
> li
.menu-item.border
span {
display: block;
text-align: center;
border: 1px solid #fff;
padding: 5px;
}
}
.m-box-headnav
.headnav-area
.headnav-inner
.headnav-menu
.menu-list
> li
.menu-item.border:hover {
color: #262626;
}
.m-box-headnav
.headnav-area
.headnav-inner
.headnav-menu
.menu-list
> li
.menu-item.border:hover:before {
width: auto;
margin-left: 0;
}
.m-box-headnav
.headnav-area
.headnav-inner
.headnav-menu
.menu-list
> li
.menu-item.border:hover:after {
width: 100%;
}
.m-box-headnav
.headnav-area
.headnav-inner
.headnav-menu
.menu-list
> li
.menu-hasdrop {
display: block;
position: relative;
padding-right: 18px;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.m-box-headnav
.headnav-area
.headnav-inner
.headnav-menu
.menu-list
> li
.menu-hasdrop:after {
content: "";
display: inline-block;
width: 1px;
height: 1px;
border-top: 6px solid #fff;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
position: absolute;
right: 0;
top: 50%;
margin-top: -3px;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
}
@media screen and (max-width: 1024px) {
.m-box-headnav
.headnav-area
.headnav-inner
.headnav-menu
.menu-list
> li
.menu-hasdrop:after {
width: 12px;
height: 2px;
border: none;
background: #fff;
left: auto;
right: 20px;
margin-top: -1px;
}
}
@media screen and (max-width: 1024px) {
.m-box-headnav
.headnav-area
.headnav-inner
.headnav-menu
.menu-list
> li
.menu-hasdrop:before {
content: "";
display: inline-block;
width: 2px;
height: 12px;
background: #fff;
position: absolute;
right: 25px;
top: 50%;
margin-top: -6px;
}
}
.m-box-headnav
.headnav-area
.headnav-inner
.headnav-menu
.menu-list
> li
.menu-hasdrop.is-open:after {
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}
@media screen and (max-width: 1024px) {
.m-box-headnav
.headnav-area
.headnav-inner
.headnav-menu
.menu-list
> li
.menu-hasdrop.is-open {
background: #626262;
}
.m-box-headnav
.headnav-area
.headnav-inner
.headnav-menu
.menu-list
> li
.menu-hasdrop.is-open:before {
display: none;
}
}
.m-box-headnav
.headnav-area
.headnav-inner
.headnav-menu
.menu-list
> li
.menu-hasdrop.is-open
.menu-item:before {
width: 100%;
margin-left: -50%;
}
.m-box-headnav
.headnav-area
.headnav-inner
.headnav-menu
.menu-list
> li
.menu-drop {
position: absolute;
top: 80px;
width: 740px;
left: 50%;
margin-left: -370px;
z-index: +1;
display: none;
max-height: calc(100vh - 300px);
overflow: auto;
}
@media screen and (max-width: 1024px) {
.m-box-headnav
.headnav-area
.headnav-inner
.headnav-menu
.menu-list
> li
.menu-drop {
position: relative;
top: auto;
width: auto;
left: auto;
margin: 0;
padding: 0;
max-height: none;
}
}
.m-box-headnav
.headnav-area
.headnav-inner
.headnav-menu
.menu-list
> li
.menu-drop
.drop-area {
background: rgba(0, 0, 0, 0.85);
padding: 40px 85px 40px 50px;
font-size: 14px;
font-size: 0.875rem;
position: relative;
*zoom: 1;
}
.m-box-headnav
.headnav-area
.headnav-inner
.headnav-menu
.menu-list
> li
.menu-drop
.drop-area:after {
content: " ";
display: table;
clear: both;
}
@media screen and (max-width: 1024px) {
.m-box-headnav
.headnav-area
.headnav-inner
.headnav-menu
.menu-list
> li
.menu-drop
.drop-area {
padding: 10px 0;
}
}
.m-box-headnav
.headnav-area
.headnav-inner
.headnav-menu
.menu-list
> li
.menu-drop
.drop-area:before {
content: "";
display: inline-block;
position: absolute;
top: 40px;
left: 370px;
width: 1px;
bottom: 40px;
background: rgba(255, 255, 255, 0.5);
}
@media screen and (max-width: 1024px) {
.m-box-headnav
.headnav-area
.headnav-inner
.headnav-menu
.menu-list
> li
.menu-drop
.drop-area:before {
display: none;
}
}
.m-box-headnav
.headnav-area
.headnav-inner
.headnav-menu
.menu-list
> li
.menu-drop
.drop-area
.drop-ttl {
float: left;
width: 300px;
padding-top: 10px;
font-size: 16px;
font-size: 1rem;
}
@media screen and (max-width: 1024px) {
.m-box-headnav
.headnav-area
.headnav-inner
.headnav-menu
.menu-list
> li
.menu-drop
.drop-area
.drop-ttl {
float: none;
width: auto;
padding: 11px 25px 11px 40px;
font-size: 0.75rem;
}
}
.m-box-headnav
.headnav-area
.headnav-inner
.headnav-menu
.menu-list
> li
.menu-drop
.drop-area
.drop-ttl
a {
color: #fff;
display: inline-block;
padding-right: 20px;
position: relative;
}
@media screen and (max-width: 1024px) {
.m-box-headnav
.headnav-area
.headnav-inner
.headnav-menu
.menu-list
> li
.menu-drop
.drop-area
.drop-ttl
a {
display: block;
}
}
.m-box-headnav
.headnav-area
.headnav-inner
.headnav-menu
.menu-list
> li
.menu-drop
.drop-area
.drop-ttl
a:after {
content: "";
display: inline-block;
width: 8px;
height: 8px;
border-top: 2px solid #fff;
border-right: 2px solid #fff;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
position: absolute;
right: 2px;
top: 50%;
margin-top: -6px;
}
@media screen and (max-width: 1024px) {
.m-box-headnav
.headnav-area
.headnav-inner
.headnav-menu
.menu-list
> li
.menu-drop
.drop-area
.drop-ttl
a:after {
display: none;
}
}
@media screen and (max-width: 1024px) {
.m-box-headnav
.headnav-area
.headnav-inner
.headnav-menu
.menu-list
> li
.menu-drop
.drop-area
.drop-ttl.no-link {
display: none;
}
}
.m-box-headnav
.headnav-area
.headnav-inner
.headnav-menu
.menu-list
> li
.menu-drop
.drop-area
.drop-menu {
float: right;
width: 260px;
font-size: 14px;
font-size: 0.875rem;
}
@media screen and (max-width: 1024px) {
.m-box-headnav
.headnav-area
.headnav-inner
.headnav-menu
.menu-list
> li
.menu-drop
.drop-area
.drop-menu {
float: none;
width: auto;
font-size: 0.75rem;
}
}
.m-box-headnav
.headnav-area
.headnav-inner
.headnav-menu
.menu-list
> li
.menu-drop
.drop-area
.drop-menu
ul {
position: relative;
}
.m-box-headnav
.headnav-area
.headnav-inner
.headnav-menu
.menu-list
> li
.menu-drop
.drop-area
.drop-menu
ul
li {
margin: 0;
}
.m-box-headnav
.headnav-area
.headnav-inner
.headnav-menu
.menu-list
> li
.menu-drop
.drop-area
.drop-menu
ul
li
+ li {
margin: 0;
}
@media screen and (max-width: 1024px) {
.m-box-headnav
.headnav-area
.headnav-inner
.headnav-menu
.menu-list
> li
.menu-drop
.drop-area
.drop-menu
ul
li
+ li {
border: none;
}
}
.m-box-headnav
.headnav-area
.headnav-inner
.headnav-menu
.menu-list
> li
.menu-drop
.drop-area
.drop-menu
ul
li
a {
display: block;
color: #fff;
padding: 11px 20px;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
}
@media screen and (max-width: 1024px) {
.m-box-headnav
.headnav-area
.headnav-inner
.headnav-menu
.menu-list
> li
.menu-drop
.drop-area
.drop-menu
ul
li
a {
float: none;
width: auto;
padding: 11px 40px;
}
}
.m-box-headnav
.headnav-area
.headnav-inner
.headnav-menu
.menu-list
> li
.menu-drop
.drop-area
.drop-menu
ul
li
a:hover {
background: #626262;
text-decoration: none !important;
}
.m-box-headnav
.headnav-area
.headnav-inner
.headnav-menu
.menu-list
> li
.menu-drop
.drop-area
.drop-menu
ul
li
.menu-hassub {
display: block;
color: #fff;
padding: 11px 30px 11px 20px;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
cursor: pointer;
position: relative;
}
@media screen and (max-width: 1024px) {
.m-box-headnav
.headnav-area
.headnav-inner
.headnav-menu
.menu-list
> li
.menu-drop
.drop-area
.drop-menu
ul
li
.menu-hassub {
padding: 11px 45px 11px 40px;
}
}
.m-box-headnav
.headnav-area
.headnav-inner
.headnav-menu
.menu-list
> li
.menu-drop
.drop-area
.drop-menu
ul
li
.menu-hassub:after {
content: "";
display: inline-block;
width: 1px;
height: 1px;
border-left: 6px solid #fff;
border-top: 4px solid transparent;
border-bottom: 4px solid transparent;
position: absolute;
right: 10px;
top: 50%;
margin-top: -4px;
}
@media screen and (max-width: 1024px) {
.m-box-headnav
.headnav-area
.headnav-inner
.headnav-menu
.menu-list
> li
.menu-drop
.drop-area
.drop-menu
ul
li
.menu-hassub:after {
right: 25px;
width: 10px;
height: 2px;
background: #fff;
border: none;
margin-top: -1px;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
}
}
@media screen and (max-width: 1024px) {
.m-box-headnav
.headnav-area
.headnav-inner
.headnav-menu
.menu-list
> li
.menu-drop
.drop-area
.drop-menu
ul
li
.menu-hassub:before {
content: "";
display: inline-block;
width: 2px;
height: 10px;
background: #fff;
position: absolute;
right: 29px;
top: 50%;
margin-top: -5px;
}
}
.m-box-headnav
.headnav-area
.headnav-inner
.headnav-menu
.menu-list
> li
.menu-drop
.drop-area
.drop-menu
ul
li
.menu-hassub:hover {
background: #626262;
}
.m-box-headnav
.headnav-area
.headnav-inner
.headnav-menu
.menu-list
> li
.menu-drop
.drop-area
.drop-menu
ul
li
.menu-hassub.is-open {
background: #626262;
}
@media screen and (max-width: 1024px) {
.m-box-headnav
.headnav-area
.headnav-inner
.headnav-menu
.menu-list
> li
.menu-drop
.drop-area
.drop-menu
ul
li
.menu-hassub.is-open:before {
display: none;
}
}
@media screen and (max-width: 1024px) {
.m-box-headnav
.headnav-area
.headnav-inner
.headnav-menu
.menu-list
> li
.menu-drop
.drop-area
.drop-menu
ul
li
.menu-hassub.is-open:after {
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}
}
.m-box-headnav
.headnav-area
.headnav-inner
.headnav-menu
.menu-list
> li
.menu-drop
.drop-area
.drop-menu
ul
li
.menu-sub {
position: absolute;
top: 0;
right: -335px;
width: 310px;
display: none;
}
@media screen and (max-width: 1024px) {
.m-box-headnav
.headnav-area
.headnav-inner
.headnav-menu
.menu-list
> li
.menu-drop
.drop-area
.drop-menu
ul
li
.menu-sub {
position: relative;
right: auto;
width: auto;
}
}
@media screen and (max-width: 1024px) {
.m-box-headnav
.headnav-area
.headnav-inner
.headnav-menu
.menu-list
> li
.menu-drop
.drop-area
.drop-menu
ul
li
.menu-sub
> li
a {
padding-left: 60px;
}
}
.m-box-headnav
.headnav-area
.headnav-inner
.headnav-menu
.menu-list
> li
.menu-drop
.drop-area
.drop-menu
ul
li
.menu-sub
.sub-sttl {
display: block;
color: #fff;
padding: 11px 30px 11px 20px;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
cursor: pointer;
position: relative;
}
@media screen and (max-width: 1024px) {
.m-box-headnav
.headnav-area
.headnav-inner
.headnav-menu
.menu-list
> li
.menu-drop
.drop-area
.drop-menu
ul
li
.menu-sub
.sub-sttl {
padding: 11px 45px 11px 60px;
}
}
.m-box-headnav
.headnav-area
.headnav-inner
.headnav-menu
.menu-list
> li
.menu-drop
.drop-area
.drop-menu
ul
li
.menu-sub
.sub-sttl:after {
content: "";
display: inline-block;
width: 1px;
height: 1px;
border-top: 6px solid #fff;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
position: absolute;
right: 10px;
top: 50%;
margin-top: -3px;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
}
@media screen and (max-width: 1024px) {
.m-box-headnav
.headnav-area
.headnav-inner
.headnav-menu
.menu-list
> li
.menu-drop
.drop-area
.drop-menu
ul
li
.menu-sub
.sub-sttl:after {
width: 10px;
height: 2px;
background: #fff;
right: 25px;
margin-top: -1px;
border: none;
}
}
@media screen and (max-width: 1024px) {
.m-box-headnav
.headnav-area
.headnav-inner
.headnav-menu
.menu-list
> li
.menu-drop
.drop-area
.drop-menu
ul
li
.menu-sub
.sub-sttl:before {
content: "";
display: inline-block;
width: 2px;
height: 10px;
background: #fff;
position: absolute;
right: 29px;
top: 50%;
margin-top: -5px;
}
}
.m-box-headnav
.headnav-area
.headnav-inner
.headnav-menu
.menu-list
> li
.menu-drop
.drop-area
.drop-menu
ul
li
.menu-sub
.sub-sttl:hover {
background: #626262;
}
.m-box-headnav
.headnav-area
.headnav-inner
.headnav-menu
.menu-list
> li
.menu-drop
.drop-area
.drop-menu
ul
li
.menu-sub
.sub-sttl.is-open {
background: #626262;
}
.m-box-headnav
.headnav-area
.headnav-inner
.headnav-menu
.menu-list
> li
.menu-drop
.drop-area
.drop-menu
ul
li
.menu-sub
.sub-sttl.is-open:after {
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}
@media screen and (max-width: 1024px) {
.m-box-headnav
.headnav-area
.headnav-inner
.headnav-menu
.menu-list
> li
.menu-drop
.drop-area
.drop-menu
ul
li
.menu-sub
.sub-sttl.is-open:before {
display: none;
}
}
.m-box-headnav
.headnav-area
.headnav-inner
.headnav-menu
.menu-list
> li
.menu-drop
.drop-area
.drop-menu
ul
li
.menu-sub
.sub-smenu {
display: none;
padding-left: 20px;
}
.m-box-headnav
.headnav-area
.headnav-inner
.headnav-menu
.menu-list
> li
.menu-drop
.drop-area
.drop-close {
width: 20px;
height: 20px;
position: absolute;
top: 20px;
right: 20px;
cursor: pointer;
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.m-box-headnav
.headnav-area
.headnav-inner
.headnav-menu
.menu-list
> li
.menu-drop
.drop-area
.drop-close:before {
content: "";
display: inline-block;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%) rotate(45deg);
-ms-transform: translate(-50%, -50%) rotate(45deg);
transform: translate(-50%, -50%) rotate(45deg);
width: 28px;
height: 2px;
background: #fff;
}
.m-box-headnav
.headnav-area
.headnav-inner
.headnav-menu
.menu-list
> li
.menu-drop
.drop-area
.drop-close:after {
content: "";
display: inline-block;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%) rotate(-45deg);
-ms-transform: translate(-50%, -50%) rotate(-45deg);
transform: translate(-50%, -50%) rotate(-45deg);
width: 28px;
height: 2px;
background: #fff;
}
.m-box-headnav
.headnav-area
.headnav-inner
.headnav-menu
.menu-list
> li
.menu-drop
.drop-area
.drop-close:hover {
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
@media screen and (max-width: 1024px) {
.m-box-headnav
.headnav-area
.headnav-inner
.headnav-menu
.menu-list
> li
.menu-drop
.drop-area
.drop-close {
display: none;
}
}
.m-box-headnav.is-sticky .headnav-area {
position: fixed;
}
.benefit-nav ul {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.benefit-nav ul li {
width: 20%;
}
.benefit-nav ul li img {
width: 100%;
height: auto;
}
.benefit-nav ul li a {
display: block;
position: relative;
height: 100%;
}
.benefit-nav ul li a img {
width: 100%;
height: 100%;
}
.benefit-nav ul li a span {
display: inline-block;
color: #fff;
font-family: "Montserrat", sans-serif;
font-size: 24px;
font-size: 2.5rem;
text-shadow: 0 0 18px rgba(0, 0, 0, 0.25);
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
@media screen and (max-width: 1024px) {
.benefit-nav ul li a span {
font-size: 1.2rem;
}
}
@media screen and (min-width: 1600px) {
.benefit-nav ul li a span {
font-size: 1.875rem;
}
}
@media screen and (min-width: 0) and (max-width: 640px) {
.benefit-nav ul li a span {
font-size: 0.6em;
}
.benefit-nav ul li a img {
width: 100%;
height: 131px;
}
}
.benefit-nav ul li a:before {
content: "";
display: inline-block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
}
@media screen and (min-width: 1024px) {
.benefit-nav ul li a:hover img {
opacity: 1 !important;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
.benefit-nav ul li a:hover:before {
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}
}
.benefit-nav ul li a.is-current:before {
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}
.m-pagettl {
width: 1024px;
margin: 50px auto 45px;
}
@media screen and (min-width: 0) and (max-width: 640px) {
.m-pagettl {
width: auto;
margin: 22px auto 20px;
}
}
.m-pagettl h1 {
font-family: "Montserrat", sans-serif;
letter-spacing: 0.05em;
text-align: center;
font-size: 36px;
font-size: 2.25rem;
}
@media screen and (min-width: 0) and (max-width: 640px) {
.m-pagettl h1 {
font-size: 1.125rem;
}
}
a.m-btn-video {
font-family: "Montserrat", sans-serif;
letter-spacing: 0.1em;
display: inline-block;
border: 1px solid #000;
font-size: 16px;
font-size: 1rem;
font-weight: bold;
color: #000;
padding: 15px 20px;
min-width: 310px;
text-align: center;
position: relative;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
}
@media screen and (min-width: 1600px) {
a.m-btn-video {
padding: 18px 25px;
font-size: 1.25rem;
}
}
@media screen and (min-width: 0) and (max-width: 640px) {
a.m-btn-video {
display: block;
width: auto;
min-width: 10px;
font-size: 0.875rem;
padding: 13px 20px;
}
}
a.m-btn-video:before {
content: "";
display: inline-block;
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 0;
background: #626262;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
}
a.m-btn-video span {
display: inline-block;
position: relative;
padding-right: 34px;
/*
&:after{
content: '';
display: inline-block;
width: 30px;
height: 30px;
background: url(../images/i_ar_video_on.png) no-repeat;
position: absolute;
right: 0px;
top: 50%;
margin-top: -15px;
transition: all 0.3s ease;
opacity: 0;
@include viewSp() {
width: 22px;
height: 22px;
background-size: 22px 22px;
margin-top: -11px;
}
}
*/
}
@media screen and (min-width: 1600px) {
a.m-btn-video span {
padding-right: 42px;
}
}
@media screen and (min-width: 0) and (max-width: 640px) {
a.m-btn-video span {
padding-right: 25px;
}
}
a.m-btn-video span:before {
content: "";
display: inline-block;
width: 1px;
height: 1px;
border-left: 14px solid #000;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
position: absolute;
right: 0;
top: 50%;
margin-top: -8px;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
transition: all 0.3s ease;
}
@media screen and (min-width: 1600px) {
a.m-btn-video span:before {
border-left: 18px solid #000;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
margin-top: -9px;
}
}
@media screen and (min-width: 0) and (max-width: 640px) {
a.m-btn-video span:before {
border-left: 10px solid #000;
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
margin-top: -7px;
}
}
a.m-btn-video.btn-m {
min-width: 10px;
width: 100%;
font-size: 24px;
font-size: 1.5rem;
padding: 19px 15px;
}
a.m-btn-video.btn-s {
min-width: 10px;
width: auto;
font-size: 16px;
font-size: 1rem;
padding: 10px 15px;
}
a.m-btn-video.btn-s span {
padding-right: 34px;
}
a.m-btn-video:hover {
color: #fff;
border: 1px solid #626262;
}
a.m-btn-video:hover:before {
width: 100%;
}
a.m-btn-video:hover span:before {
border-left-color: #fff;
}
.m-box-regionlink a {
display: block;
background: #626262;
color: #fff;
font-family: "Montserrat", sans-serif;
letter-spacing: 0.05em;
font-size: 24px;
font-size: 1.5rem;
}
@media screen and (min-width: 0) and (max-width: 640px) {
.m-box-regionlink a {
font-size: 1rem;
}
}
.m-box-regionlink a span {
display: block;
width: 1024px;
margin: 0 auto;
text-align: center;
position: relative;
padding: 30px 0;
}
@media screen and (max-width: 1024px) {
.m-box-regionlink a span {
width: auto;
margin: 0 20px;
}
}
@media screen and (min-width: 0) and (max-width: 640px) {
.m-box-regionlink a span {
padding: 12px 0;
}
}
.m-box-regionlink a span:after {
content: "";
display: inline-block;
width: 12px;
height: 12px;
border-top: 3px solid #fff;
border-right: 3px solid #fff;
position: absolute;
right: 4px;
top: 50%;
margin-top: -6px;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
}
@media screen and (min-width: 0) and (max-width: 640px) {
.m-box-regionlink a span:after {
width: 8px;
height: 8px;
margin-top: -4px;
}
}
.m-box-regionlink a:hover {
text-decoration: none;
}
@media screen and (min-width: 1024px) {
.m-box-regionlink a:hover span:after {
right: -1px;
}
}
.modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 99999;
display: none;
}
.modal .modal-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
opacity: 0.8;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
}
.modal .modal-inner {
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
max-width: 1024px;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
z-index: 1;
}
@media screen and (min-width: 1600px) {
.modal .modal-inner {
max-width: 1280px;
}
}
@media screen and (min-width: 0) and (max-width: 640px) {
.modal .modal-inner {
width: 90%;
}
}
.modal #player {
position: absolute;
top: 50%;
left: 50%;
width: 90%;
padding-top: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
@media screen and (min-width: 0) and (max-width: 640px) {
.modal #player {
min-width: 0;
padding-top: 50%;
}
}
.modal #player .video-js {
position: absolute;
top: 0;
right: 0;
width: 100% !important;
height: 100% !important;
}
.modal #player video {
position: absolute;
top: 0;
right: 0;
width: 100% !important;
height: 100% !important;
}
.modal .modal-close {
position: absolute;
top: -70px;
right: 0;
width: 50px;
height: 50px;
z-index: 10;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
cursor: pointer;
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
}
@media screen and (min-width: 0) and (max-width: 640px) {
.modal .modal-close {
top: -50px;
right: 0;
width: 40px;
height: 40px;
}
}
.modal .modal-close:hover {
-webkit-transform: rotate(135deg);
-ms-transform: rotate(135deg);
transform: rotate(135deg);
}
.modal .modal-close:before {
content: "";
position: absolute;
top: 25px;
right: 0;
width: 100%;
height: 2px;
background: #fff;
}
@media screen and (min-width: 0) and (max-width: 640px) {
.modal .modal-close:before {
top: 20px;
}
}
.modal .modal-close:after {
content: "";
position: absolute;
top: 0;
left: 25px;
width: 2px;
height: 100%;
background: #fff;
}
@media screen and (min-width: 0) and (max-width: 640px) {
.modal .modal-close:after {
left: 20px;
}
}
@media screen and (min-width: 0) and (max-width: 640px) {
.view-pc {
display: none !important;
}
}
.view-sp {
display: none !important;
}
@media screen and (min-width: 0) and (max-width: 640px) {
.view-sp {
display: block !important;
}
}
.table {
margin: 0 auto;
margin-top: 20px;
margin-bottom: 20px;
width: 80%;
}
.table table {
width: 100%;
margin: 0 auto;
}
.table table tr:nth-child(odd) {
background-color: rgba(218, 219, 219, 0.3);
font-size: 14px;
}
.table table tr:nth-child(even) {
background-color: white;
font-size: 14px;
}
.table table tr:nth-child(even) {
background-color: white;
font-size: 14px;
}
.table table tr td:first-of-type {
font-weight: bold;
}
.table table td:nth-of-type(odd):first-of-type {
border-right: 1px solid rgba(150, 150, 150, 0.3);
border-spacing: 0px;
}
.table table {
border-collapse: collapse;
}
.table tr td {
padding-top: 5px;
padding-bottom: 5px;
padding-left: 50px;
}
.table table .whiteSpace td {
background-color: #fefefe;
border-right: 0px;
border-left: 0px;
border-bottom: 0px;
}
.sideInfo {
width: 85%;
margin: 0 auto;
font-size: 10px;
margin-top: 5px;
}
.border {
padding-bottom: 30px;
margin-bottom: 50px;
border-bottom: 1px solid black;
width: 10%;
margin: 0 auto;
}
.showFunction {
margin-top: 30px;
width: 100%;
}
.showFunction .pic img {
width: 100% !important;
height: auto !important;
}
.headline {
margin-bottom: 30px;
}
.headline h3 {
font-weight: lighter;
text-align: center;
font-size: 15px;
}
.headline h2 {
text-align: center;
font-weight: 400;
}
.dcetext {
display: none;
}
.column {
width: 25%;
display: inline-block;
float: left;
margin-bottom: 80px;
}
.carousel__img {
min-height: 348px;
max-height: 340px;
}
.carousel__img img {
max-height: 225px;
}
@media screen and (min-width: 767px) {
.carousel__img img {
max-height: 348px;
}
}
.technologyThreeClmns .panels__item.-col3 .zoomPanel img {
height: 325px;
width: 309px;
}
.feature__thumb .zoomPanel img {
max-height: 461px;
}
.text {
margin-top: 15px;
}
.headline {
width: 100%;
max-width: 80%;
margin: 0 auto;
margin-bottom: 35px;
}
.section .feature .feature__thumb img {
height: 460px !important;
width: 445px;
}
.global__inner .carousel__img img {
height: 180px;
width: 100%;
}
.global__inner .carousel__img {
min-height: 25% !important;
width: 100%;
}
.innerEl-max .carousel__img {
min-height: 290px;
}
.section .captionWithLead .panels__item.-col2 .zoomPanel img {
max-width: 100%;
max-height: 385px;
height: 375px;
}
#c198 {
clear: both;
}
.noBorder {
background-color: white !important;
}
@media screen and (min-width: 768px) {
.benefit-nav ul li a img {
height: 100%;
}
.dcetext {
display: block;
font-size: 13px;
margin-top: 10px;
text-align: left;
padding-left: 20px;
padding-right: 20px;
width: 100%;
}
}
/* Cookie Hinweis */
.cookieSection,
.aboSection {
position: fixed;
top: 0;
left: 0;
width: 100%;
min-height: 100%;
z-index: 1000;
color: white;
background-color: #333232;
background-color: #333232ef;
line-height: 24px;
text-transform: none;
font-family: arial;
font-size: 14px;
z-index: 10000;
text-align: left;
}
.cookieSettingsSection {
position: fixed;
top: 0;
left: 0;
width: 100%;
min-height: 100%;
z-index: 1000;
color: white;
background-color: #333232;
background-color: #333232ef;
line-height: 24px;
text-transform: none;
font-family: arial;
font-size: 14px;
z-index: 10000;
text-align: left;
}
.cookieHeadline {
font-family: arial;
font-size: 20px;
color: #fff;
font-weight: bold;
}
.cookieText a {
color: #000;
font-weight: bold;
text-decoration: underline;
}
.cookieText,
.aboForm {
font-family: arial;
font-size: 14px;
line-height: 24px;
margin-bottom: 0;
}
.cookieContent,
.aboContent {
max-width: 480px;
/*height:180px;*/
overflow: auto;
background-color: white;
border-radius: 10px;
color: black;
margin: 0 auto;
padding: 30px 30px 30px 30px;
}
.aboContent {
margin-top: 20px;
}
.cookieButton,
.interests {
display: inline-block;
}
.cookieButton {
padding: 0px;
margin: 10px;
width: 130px;
cursor: pointer;
float: right;
height: 40px;
border-radius: 10px;
background: #000000;
color: white;
line-height: 40px;
text-align: center;
}
.cookieSettingsButton {
padding: 0px;
margin: 10px;
width: 130px;
cursor: pointer;
float: right;
height: 40px;
border-radius: 10px;
background: white;
border: 1px solid grey;
color: grey;
line-height: 40px;
text-align: center;
}
.cookieSaveButton {
padding: 0px;
margin: 10px;
width: 130px;
cursor: pointer;
float: right;
height: 40px;
border-radius: 10px;
background: white;
border: 1px solid grey;
color: grey;
line-height: 40px;
text-align: center;
}
.cookieSection .footerLinks a {
color: #fff;
text-decoration: none;
font-weight: normal;
}
.cookieSection .footerLinks a:last-child {
border: none;
padding-left: 20px;
margin-left: 24px;
border-left: solid 1px;
}
/*Abo Form Modal - Erbt von Cookie Consent Modal*/
.aboSection {
}
.aboContent {
}
.aboForm {
}
.aboSection h2 {
margin-bottom: 20px;
}
.aboSection input[type="email"] {
width: 100% !important;
}
.aboSection .form-check,
.aboSection .form-check label {
width: auto;
}
.aboSection .form-check label > span {
display: block;
float: left;
width: calc(100% - 40px);
}
.aboSection .btn-group.submit {
width: 50%;
}
.aboSection .btn-group.submit.cancel {
text-align: right;
}
.aboSection .btn-group.submit.cancel button {
background-color: #626262;
}
.aboSection #reCaptchaNote {
left: 0 !important;
top: -5px !important;
right: unset !important;
}
/* The switch - the box around the slider */
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
/* Hide default HTML checkbox */
.switch input {
opacity: 0;
width: 0;
height: 0;
}
/* The slider */
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: 0.4s;
transition: 0.4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: 0.4s;
transition: 0.4s;
}
input:checked + .slider {
background-color: black;
}
input:focus + .slider {
box-shadow: 0 0 1px black;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
.embed-container {
position: relative;
padding-bottom: 56.25%;
/* ratio 16x9 */
height: 0;
overflow: hidden;
width: 100%;
height: auto;
}
.embed-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* ratio 4x3 */
.embed-container.ratio4x3 {
padding-bottom: 75%;
}
.product__compare .header {
background: #f0f0f0;
height: 100px;
padding-top: 10px;
padding-bottom: 10px;
margin-bottom: 40px;
}
@media (min-width: 768px) {
.product__compare .header h2 {
text-transform: uppercase !important;
font-size: 1.7em !important;
padding-bottom: 10px !important;
font-weight: 600 !important;
}
}
@media (max-width: 767px) {
.product__compare .header h2 {
text-transform: uppercase !important;
font-size: 1.1em !important;
padding-bottom: 5px !important;
padding-top: 10px;
font-weight: 600 !important;
}
.product__compare .header h3 {
font-size: 15px !important;
}
}
.product__compare .header h3 {
width: 100%;
text-align: center;
font-size: 22px;
line-height: 1.2;
letter-spacing: 0.5px;
font-weight: 400;
}
/* Plugin totoproducts->Washletvergleich */
.compareProductList {
background-image: linear-gradient(to bottom, transparent 0%, #fff 70%),
url(/fileadmin/assets/img/bg-sunlight.jpg);
background-repeat: no-repeat;
background-size: cover;
padding-top: 20px;
padding-bottom: 20px;
}
.compareProductList .module--product-list--header-title {
padding-bottom: 20px;
}
.compareProductList .product-box {
position: relative;
}
.compareProductListCheckbox {
position: absolute;
top: 5%;
right: 5%;
z-index: 2;
}
.compareProductList .btnWrap {
width: 100%;
text-align: center;
}
.compareProductList .btn {
width: auto;
float: none;
display: inline;
}
/* Plugin totoproducts->Washletvergleich ENDE*/
.product-link {
color: #3088ce;
font-weight: 600;
}
.product-link:hover {
text-decoration: underline;
}
/*DCE Page:Design 3columcenteredtable*/
.threecolumcenteredtable {
width: 50%;
margin: 0px auto;
display: flex;
flex-direction: row;
justify-content: space-between;
column-gap: 20px;
padding: 30px 0 80px 0;
}
.threecolumcenteredtable li {
list-style-type: disc;
margin-left: 25px;
}
.threecolumcenteredcol {
flex: 1 1 0;
width: 0;
}
@media screen and (max-width: 767px) {
.threecolumcenteredtable {
width: 90%;
flex-direction: column;
row-gap: 30px;
padding: 30px 0 60px 0;
}
.threecolumcenteredcol {
flex: auto;
width: 100%;
}
}
/*DCE Page:Design 3columcenteredtable ENDE*/
/*DCE ISH Elemente*/
.dce-website_ish_textimage_download h2 {
font-size: 36px;
}
.dce-website_ish_textimage_download h3 {
font-size: 27px;
}
.ish-download-links strong:not(:first-of-type) {
margin-left: 50px;
}
.ish-download-links.link-align-1 {
text-align: center;
}
.dce-website_ish_textimage_download .img-border {
border: 1px solid #bababa;
}
@media screen and (max-width: 767px) {
.ish-download-links strong {
display: block;
width: 100%;
/*text-align: center;*/
}
.dce-website_ish_textimage_download .text-center {
text-align: left;
}
.ish-download-links strong:not(:first-of-type) {
margin-left: 0;
margin-top: 20px;
}
.ish-download-links strong:not(:first-of-type) a {
margin-top: 20px;
}
.ish-download-links.link-align-1 {
text-align: left;
}
}
/*DCE ISH Elemente ENDE*/
.myWashletImageAndText .frameBlock__detail a {
color: #3088ce;
}
/*RTE Link-Styles wie in Press-Releases*/
.press-link-pdf,
.press-link-img {
color: #666 !important;
font-weight: 600;
text-transform: uppercase;
margin: 0 0;
padding-left: 25px;
}
.press-link-pdf::before,
.press-link-img::before {
height: 35px;
width: 35px;
top: -5px;
left: -9px;
background-image: url(/fileadmin/assets/img/sprite-icons.png);
background-size: 2900%;
background-position: 44% 32%;
content: "";
position: absolute;
overflow: hidden;
background-repeat: no-repeat;
}
.press-link-img::before {
top: -6px;
background-position: 40% 32%;
}
/*RTE Link-Styles wie in Press-Releases ENDE*/
/*TOTO Design Seite 2024*/
/*DCE: TOTO DESIGN | N Bilder mit Text*/
.cc-totodesign_imagetext-container {
width: 1164px;
max-width: 80%;
margin-left: auto;
margin-right: auto;
/*gap: 50px;*/
}
.cc-totodesign_imagetext-container_teaser {
line-height: 2em;
}
.cc-totodesign_imagetext-container_columns {
margin: 0 auto;
width: 1000px;
max-width: 90%;
display: flex;
flex-direction: row;
/*gap: 120px;*/
}
.cc-totodesign_imagetext-container .cc-totodesign_imagetext-element {
width: 33%;
padding: 0 60px;
}
.cc-totodesign_imagetext-container .cc-totodesign_imagetext-image {
width: 100%;
height: auto;
}
.cc-totodesign_imagetext-container .cc-totodesign_imagetext-text {
padding-top: 20px;
line-height: 2;
font-size: 14px;
}
.cc-totodesign_imagetext-container .lineheight-2 {
line-height: 2;
}
.cc-totodesign_imagetext-container .lineheight-1 {
line-height: 1;
}
.cc-totodesign_imagetext-container .lineheight-1-5 {
line-height: 1.5;
}
@media screen and (max-width: 1023px) {
.cc-totodesign_imagetext-container {
width: 100%;
max-width: 100%;
background-position: 0 0 !important;
background-size: 100% auto !important;
padding-top: 30px !important;
}
.cc-totodesign_imagetext-container_columns {
flex-direction: column;
}
.cc-totodesign_imagetext-container .cc-totodesign_imagetext-element {
width: 100%;
padding: 0;
margin-bottom: 20px;
}
.cc-totodesign_imagetext-container .cc-totodesign_imagetext-image {
width: 100%;
height: auto;
}
.cc-totodesign_imagetext-container .cc-totodesign_imagetext-text {
padding-top: 20px;
line-height: 2;
font-size: 14px;
}
}
/*DCE: TOTO DESIGN | N Bilder mit Text ENDE*/
/*DCE: dce-awardsdesign - Zusatz von DHO*/
.dce-awardsdesign {
width: 1000px;
max-width: 80%;
}
.dce-awardsdesign header h2 {
font-weight: 600;
font-size: 35px;
}
.dce-awardsdesign .awsImageAndText {
display: flex;
gap: 20px;
flex-direction: row;
}
.dce-awardsdesign .awsImageAndText .product-box {
width: 25%;
}
@media screen and (max-width: 1023px) {
.dce-awardsdesign {
width: 100%;
max-width: 100%;
}
.dce-awardsdesign .awsImageAndText {
flex-direction: column;
height: auto !important;
width: 100% !important;
}
.section.awsImageAndText {
height: auto !important;
width: 100% !important;
}
.dce-awardsdesign .awsImageAndText .product-box {
width: 100%;
margin-left: 0px;
}
}
/*DCE: dce-awardsdesign - Zusatz von DHO ENDE*/
/*DCE: Deisgnpage headervideo*/
.designpage_headervideo {
max-width: 100%;
}
.designpage_headervideo video {
width: 100%;
height: auto;
}
/*DCE: Deisgnpage headervideo ENDE*/
/*DCE: dce-accordion - Zusatz von DHO*/
.accordionForDesignPage .global__inner {
padding-top: 0;
padding-bottom: 0;
}
.accordionForDesignPage {
background-image: none !important;
padding-top: 0;
margin-top: 0;
}
.accordionForDesignPage .linkbox-wrapper {
padding-top: 0 !important;
margin-top: 0 !important;
}
.accordionForDesignPage .accordeonSingle > h3 {
position: relative;
}
.accordionForDesignPage .accordeonSingle > h3::before {
content: "";
position: absolute;
z-index: 1;
top: calc(50% - 20px);
right: 40px;
width: 40px;
height: 40px;
border: 1px solid #fff;
border-radius: 50%;
}
.accordionForDesignPage .icon {
content: "";
position: absolute;
z-index: 1;
top: calc(50% - 20px);
right: 40px;
width: 40px;
height: 40px;
}
.accordionForDesignPage .active .icon::before {
transform: rotate(0);
}
.accordionForDesignPage .icon::before {
content: "";
position: absolute;
z-index: 1;
top: calc(50% - 1px);
right: 30%;
width: 40%;
height: 2px;
background: #fff;
transform: rotate(90deg);
transition: 0.5s;
}
.accordionForDesignPage .icon::after {
content: "";
position: absolute;
z-index: 1;
top: calc(50% - 1px);
right: 30%;
width: 40%;
height: 2px;
background: #fff;
}
.global__sliderImg {
max-width: 100%;
}
@media screen and (max-width: 1023px) {
.accordionForDesignPage .accordeonSingle > h3 {
height: 75px;
padding-top: 25px;
padding-left: 20px;
color: #fff;
}
}
/*DCE: dce-accordion - Zusatz von DHO ENDE*/
/*DCE dce-awardsdesign*/
.dce-awardsdesign .product-box-productcode {
bottom: auto !important;
}
.product-box-content_title {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
margin-bottom: 5px;
}
/*DCE dce-awardsdesign ENDE*/
/*DCE TOTO Design | Bilder*/
.totodesign_images {
width: 58%;
margin-left: auto;
margin-right: auto;
display: flex;
flex-direction: row;
align-items: flex-end;
gap: 20px;
}
.totodesign_images .totodesign_images-image {
flex-grow: 1;
height: auto;
width: 1px;
}
/*DCE TOTO Design | Bilder ENDE*/
/*TOTO Design Seite 2024 ENDE*/
/*Produktdetails | Quickexchange START*/
.ppz-ns .quickexchangeinfo {
margin-bottom: 45px !important;
}
.ppz-ns .quickexchangeinfo .module--product-detail-overview {
text-align: center;
}
.ppz-ns .quickexchangeinfo .quickexchangeinfo_images {
display: flex;
flex-direction: row;
gap: 20px;
margin-top: 20px;
/*space between*/
justify-content: space-between;
}
.ppz-ns .quickexchangeinfo .quickexchangeinfo_images img {
max-width: calc(25% - 20px);
width: auto;
}
.ppz-ns .quickexchangeinfo .quickexchangenote {
text-align: left;
}
/*media query max-with 640px*/
@media screen and (max-width: 640px) {
.ppz-ns .quickexchangeinfo {
margin-bottom: 25px !important;
}
.ppz-ns .quickexchangeinfo .quickexchangeinfo_images {
flex-direction: column;
}
.ppz-ns .quickexchangeinfo .quickexchangeinfo_images img {
width: 100%;
max-width: 100%;
}
}
/*media query min-widht 641px and max-with 1023*/
@media screen and (min-width: 641px) and (max-width: 1023px) {
.ppz-ns .quickexchangeinfo .quickexchangeinfo_images {
/*zwei pro Zeile*/
flex-direction: row;
flex-wrap: wrap;
gap: 10px;
justify-content: center;
}
.ppz-ns .quickexchangeinfo .quickexchangeinfo_images img {
width: calc(50% - 10px);
max-width: calc(50% - 10px);
}
}
/*Produktdetails | Quickexchange ENDE*/