/*!****************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!./node_modules/postcss-loader/src/index.js??ruleSet[1].rules[0].use[2]!./resource/css/main.css ***!
  \****************************************************************************************************************************************************************************/

:root {
    --color-black: #000000;
    --color-white: #FFFFFF;
    --color-yellow: #FFB300;
    
    --color-red: #ff0000;
    --color-green: #00965F;
    --color-purple: #9f4382;
    
    --color-grey0: #444444;
    --color-grey1: #999999;
    --color-grey2: #ebebeb;

    --color-stdhgl: #FFB300;
}

html, body {
    scrollbar-width: none;
    -ms-overflow-style: none;
}
::-webkit-scrollbar {
    display: none;
    appearance: none;
}

html {
    margin: 0;
    padding: 0;
    height: 100%;
    scrollbar-width: none;
}
body {
    display: flex;
    flex-direction: column;
    position: relative;
    margin: 0;
    padding: 0;
    background-color: var(--color-white);
    font-family: 'Arial', 'Arial Black', sans-serif;
    color: var(--color-black);
    font-size: 16px;
    -ms-word-wrap: normal;
    word-wrap: normal;
    line-height: 1.5;
    height: auto;
    width: 100%;
    overflow-x: hidden; 
    min-height: 100vh;
    min-height: 100dvh;

    overscroll-behavior-x: none;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    counter-reset: all;
}


* { 
    box-sizing: border-box; 
}

::selection {
    color: var(--color-white);
    background: var(--color-yellow);
}
::-o-selection { 
    color: var(--color-white);
    background: var(--color-yellow);
}
::-moz-selection { 
    color: var(--color-white);
    background: var(--color-yellow);
}
::-webkit-selection { 
    color: var(--color-white);
    background: var(--color-yellow);
}


canvas {
    height: auto;
    width: auto;
}

h1,h2,h3,h4,h5,h6,div,p,pre,span,ul,ol,li,cite {
    position: relative;
    color: inherit;
}
ul, ol, li, label {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 1.25rem;
}
ul, ol, li {
    line-height: 1.65;
}
label {
    line-height: 1.35;
}
ul:not(:last-child), ol:not(:last-child) {
    padding-bottom: 20px;
}
h1,h2,h3,h4,h5,h6 {
    line-height: 1.05;
    font-weight: 900;
    margin: 0;
    font-family: 'Arial Black';
}
span, b, strong, figcaption {
    display: initial;
    font-size: inherit;
}
a {
    display: table;
    position: relative;
    width: auto;
    height: auto;
    font-size: inherit;
    text-decoration: none;
    color: inherit;
}



.strcustom p, 
.strcustom ul, 
.strcustom ol, 
.strcustom li, 
.strcustom label,
.strcustom textarea,
.strcustom select,
.strcustom span,
.strcustom blockquote,
.strcustom cite,

.strcustom h1, 
.strcustom h2, 
.strcustom h3, 
.strcustom h4, 
.strcustom h5,
.strcustom h6
{
    font-size: inherit;
    line-height: inherit;
}
.str1, h1 { font-size: 8rem; }
.str2, h2 { font-size: 4.75rem; }
.str3, h3 { font-size: 3.5rem; }
.str4, h4 { font-size: 2.625rem; }
.str5, h5 { font-size: 2rem; }
.str6, h6 { font-size: 1.5rem; }
.str7, p, li { font-size: 1.25rem; }
.str8 { font-size: 1.125rem; }
.str9 { font-size: 1rem; }

.strblack { font-family: 'Arial Black', sans-serif; }
.strbold { font-family: 'Arial', sans-serif; font-weight: bold; }

@media screen and (max-width: 1600px) {
    .str1, h1 { font-size: 6.875rem; }
}
@media screen and (max-width: 1400px) {
    .str1, h1 { font-size: 6rem; }
    .str2, h2 { font-size: 3.5rem; }
    .str3, h3 { font-size: 2.625rem; }
    .str4, h4 { font-size: 2rem; }
    .str5, h5 { font-size: 1.5rem; }
    .str6, h6 { font-size: 1.25rem; }
    .str7, p, li { font-size: 1.125rem; }
}
@media screen and (max-width: 1200px) {
    .str1, h1 { font-size: 5.125rem; }
}
@media screen and (max-width: 970px) {
    .str1, h1 { font-size: 4.2rem; }
    .str2, h2 { font-size: 2.8rem; }
    .str3, h3 { font-size: 2.2rem; }
    .str4, h4 { font-size: 1.625rem; }
    .str5, h5 { font-size: 1.325rem; }
}
@media screen and (max-width: 760px) {
    .str1, h1 { font-size: 9vw; }
    .str2, h2 { font-size: 2.2rem; }
    .str3, h3 { font-size: 1.815rem; }
    .str4, h4 { font-size: 1.5rem; }
    .str5, h5 { font-size: 1.25rem; }
    .str6, h6 { font-size: 1.125rem; }
    .str8 { font-size: 1rem; }
    .str9 { font-size: .875rem; }
}
/* @media screen and (max-width: 760px) {
    .str1, h1 { font-size: 3.4rem; }
    .str2, h2 { font-size: 2.2rem; }
    .str3, h3 { font-size: 1.815rem; }
    .str4, h4 { font-size: 1.5rem; }
    .str5, h5 { font-size: 1.25rem; }
    .str6, h6 { font-size: 1.125rem; }
    .str8 { font-size: 1rem; }
    .str9 { font-size: .875rem; }
} */



#jg--scrollbar {
    position: fixed;
    height: 100%;
    width: 20px;
    background-color: transparent;
    top: 0;
    right: 0;
    transform: translate3d(100%, 0, 0);
    transition: transform .2s cubic-bezier(.75, .25, 0, 1);
    z-index: 1002;
}
#jg--scrollstick {
    display: block;
    position: absolute;
    width: 6px;
    margin: 0 auto;
    left: 0;
    right: 0;
    background-color: var(--color-black);
    border-radius: 1px;
    cursor: grab;
}
#jg--scrollstick:active,
body.stickdragging {
    cursor: grabbing;
}
#jg--menuscrollstick:active,
body.stickdraggingmenu {
    cursor: grabbing;
}
/*!*************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!./node_modules/postcss-loader/src/index.js??ruleSet[1].rules[0].use[2]!./resource/css/global/header.css ***!
  \*************************************************************************************************************************************************************************************/
header {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: auto;
    min-height: 160px;
}
header .header--container {
    display: flex;
    justify-content: space-between;
    width: 100%;
    max-width: 1600px;
    height: 100%;
    padding-top: 40px;
}
@media screen and (max-width: 590px) {
    header .header--container {
        flex-direction: column;
    }
}



/* LOGO */
/* MAIN – LOGO */
.homelogo {
    display: block;
    width: auto;   
    height: 100px;
}
.homelogo .logo {
    width: auto;
    height: 100%;
    justify-content: flex-start;
    align-items: flex-start;
}
.homelogo .logo img {
    width: auto;
}

/* SIDE – LOGO */
.sidelogo {
    display: block;
    width: auto;   
    height: 180px;
}
.sidelogo .logo {
    width: auto;
    height: 100%;
}
.sidelogo .logo img {
    width: auto;
}
/*!************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!./node_modules/postcss-loader/src/index.js??ruleSet[1].rules[0].use[2]!./resource/css/global/aside.css ***!
  \************************************************************************************************************************************************************************************/
aside {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 2;
}


/* // NAV */
aside .navs {
    display: none;
    align-items: flex-start;
    justify-content: flex-start;
    position: fixed;
    width: auto;
    min-width: 280px;
    max-width: 640px;
    background-color: var(--color-yellow);
    top: 25px;
    right: 25px;
    padding: 76px 30px 20px;
    border-radius: 0;
    overflow: hidden;
    transform: scale(0);
    transform-origin: top right;
}
body.onmenu--a aside .navs {
    display: flex;
    transition: transform .1s cubic-bezier(0.075, 0.82, 0.165, 1);
}
body.onmenu--a.onmenu--b aside .navs {
    transform: scale(1);
}


#nav--primary {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    position: relative;
    width: auto;
    height: auto;
}
/* #nav--primary {
    flex-direction: column;
    width: 100%;
    height: 100vh;
    height: -webkit-fill-available;
    min-height: 100dvh;
    padding: 0;
    border-radius: 0;
} */

/* // NAV CONTAINER */
#nav--primary .nav--container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: auto;
}
#nav--primary .nav--container {
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    position: absolute;
    height: 100vh;
    height: -webkit-fill-available;
    min-height: 100dvh;
    overflow: scroll;
    padding: 80px 0 40px;
}

/* // NAV MAIN */
#nav--primary .nav--main {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    width: 100%;
    height: 100%;
    padding-bottom: 0;
}
#nav--primary .nav--main {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    height: auto;
}
#nav--primary .nav--main > li {
    width: 100%;
}
#nav--primary .nav--main > li:not(:first-child) {
    margin-left: unset;
    margin-top: 25px;
}
#nav--primary .nav--main > li > a {
    font-size: 1.25em;
}
#nav--primary .nav--main a {
    display: inline-block;
    width: 100%;
    padding: 0 0;
    background: unset;
}
@media screen and (max-width: 760px) {
    #nav--primary .nav--main {
        padding: 0 20px;
    }
    #nav--primary .nav--main > li > a {
        font-size: 1.25rem;
    }
}

/* // NAV MAIN CHILDUL LI  */
#nav--primary li.childul > a > span {
    display: inline-block;
    margin-right: .2em;
}
#nav--primary li.childul.on.buttons .btntarget .hoverfont .origin {
    opacity: 0;
    visibility: hidden;
}
#nav--primary li.childul.on.buttons .btntarget .hoverfont .on {
    display: block;
}
#nav--primary li.childul > a > figure.icons.arrow1 {
    top: 0;
}
#nav--primary li.childul.on > a > figure.icons.arrow1 {
    transform: rotate(180deg);
}
#nav--primary li.childul > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: unset;
    padding-right: 25px;
}
#nav--primary li.childul.on > a {
    background-size: 0 100%;
    transition: unset;
}
#nav--primary li.childul > a > figure.icons.arrow1 {
    top: 0;
}
@media screen and (max-width: 760px) {
    #nav--primary li.childul > a {
        padding-right: 10px;
    }
}
@media screen and (max-width: 510px) {
    #nav--primary li.childul > a {
        padding-right: 0;
    }
}


/* // NAV MAIN CHILDUL – SUBNAVBOX */
#nav--primary li.childul .subnavbox {
    display: block;
    position: absolute;
    opacity: 0;
    pointer-events: none;
    user-select: none;
    transform-origin: top center;
    background-color: var(--color-white);
    top: 0;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.2);
}
#nav--primary li.childul.on .subnavbox {
    width: auto;
    pointer-events: unset;
    user-select: unset;
    animation: subnavboxOnDesktop .2s .05s linear forwards;
}
@keyframes subnavboxOnDesktop {
    0% { transform: translate3d(0, -10px, 0) scale(1, .8); opacity: 0; }
    20% { transform: translate3d(0, -2px, 0) scale(1, .98); opacity: 1; }
    100% { transform: translate3d(0, 0, 0) scale(1, 1); opacity: 1; }
}

/* // NAV MAIN CHILDUL – SUBNAVBOX – SUBNAV CONTAINER */
#nav--primary li.childul .subnavbox .subnav--container {
    display: flex;
    flex-direction: column;
    overflow: scroll;
    height: 100%;
}



/* // –––––––––––––––––––––––––––––––––––––––––––––––– */
/* // HAMBURGER */
.jg--hamburger {
    position: fixed;
    display: flex;
    width: 76px;
    height: 76px;
    top: 25px;
    right: 25px;
    border-radius: 50%;
    overflow: hidden;
    align-self: center;
    background-color: var(--color-yellow);
    z-index: 3;
}
.jg--hamburger > div {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    height:100%;
    width:100%;
    z-index: 1;
}
.jg--hamburger > div::before {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 2px;
    transition: opacity 1s cubic-bezier(0.075, 0.82, 0.165, 1);
}
body.onmenu--a .jg--hamburger > div::before {
    opacity: 0;
}
ul#hb--on {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 0;
    z-index: 1;
}
div#hb--off {
    z-index: 2;
    display: none;
    position: absolute;
}
div#hb--off.hb--off--style {
    display: block;
}
ul#hb--on, 
div#hb--off {
    cursor: pointer;
    height: 65%;
    width: 65%;
    box-sizing: border-box;
    position: absolute;
    padding: 15px 12px;
}
ul#hb--on li {
    width: 100%;
    height: 2px;
    background-color: var(--color-black);
    list-style: none;
    transform-origin: center center;
    transition: .2s transform cubic-bezier(0, .8, 0, 1);
}
.hb--onoff--00 { transform: translate3d(0, 9px, 0); }
.hb--onoff--01 { opacity: 0; }
.hb--onoff--02 { transform: translate3d(0, -9px, 0); }
.hb--onoff--00--x { transform: translate3d(0, 9px, 0) rotate(45deg) scale(1, 1); }
.hb--onoff--02--x {  transform: translate3d(0, -9px, 0) rotate(-45deg) scale(1, 1); }
/* // –––––––––––––––––––––––––––––––––––––––––––––––– */
/* // HAMBURGER – BACK */
aside .nav--back {
    display: flex;
    align-items: center;
    position: absolute;
    width: auto;
    height: 80px;
    margin: 0 40px;
    
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    max-width: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-width .5s cubic-bezier(.4, 0, .2, 1),
                opacity .5s cubic-bezier(.4, 0, .2, 1);
}
@media screen and (max-width: 760px) {
    .jg--hamburger {
        right: 20px;
    }    
}
@media screen and (max-width: 510px) {
    .jg--hamburger {
        right: 10px;
    }
}
/* // –––––––––––––––––––––––––––––––––––––––––––––––– */
/*!*************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!./node_modules/postcss-loader/src/index.js??ruleSet[1].rules[0].use[2]!./resource/css/global/footer.css ***!
  \*************************************************************************************************************************************************************************************/
footer {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: auto;
}
footer .footer--container {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 1600px;
    height: auto;
    padding-top: 60px;
    padding-bottom: 60px;
}

/* BOX A */
footer .box-a {
    padding: 40px 0;
}
@media screen and (max-width: 510px) {
    footer .box-a {
        padding: 30px 0 60px;
    }   
}
/* BOX B */
footer .box-b {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
    width: 100%;
    height: auto;
}
@media screen and (max-width: 510px) {
    footer .box-b {
        flex-direction: column-reverse;
        align-items: center;
    }  
    footer .box-b .cont-a {
        margin-top: 40px;
    }
}
/*!**************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!./node_modules/postcss-loader/src/index.js??ruleSet[1].rules[0].use[2]!./resource/css/global/section.css ***!
  \**************************************************************************************************************************************************************************************/

main {
    display: flex;
    flex-direction: column;
    position: relative;
    width: 100%;
    height: auto;
    z-index: 1;
}

section {
    display: block;
    position: relative;
    width: 100%;
    height: auto;
}
.section--container {
    display: block;
    position: relative;
    width: 100%;
    height: auto;
    max-width: 1600px;
    margin: 0 auto;
    box-sizing: border-box;
    z-index: 3;
}
.section--container { 
    padding: 90px 40px; 
}
.header--container,
.footer--container { 
    padding-left: 40px; 
    padding-right: 40px; 
}
@media screen and (max-width: 1400px) {
    .section--container {
        padding: 60px 40px;
    }
}
@media screen and (max-width: 1200px) {
    .section--container {
        padding: 50px 20px;
    }
}
@media screen and (max-width: 760px) {
    .section--container {
        padding: 30px 20px;
    }
}
/*!*************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!./node_modules/postcss-loader/src/index.js??ruleSet[1].rules[0].use[2]!./resource/css/global/blocks.css ***!
  \*************************************************************************************************************************************************************************************/
article,div {
    display: block;
    position: relative;
}
.blocks {
    display: block;
    position: relative;
    width: auto;
    max-width: 900px;
    height: auto;
}
.blocks > *:first-child {
    margin-top: 0;
}
.block--contents {
    display: block;
    position: relative;
    width: auto;
    height: auto;
}
.block--contents > *:first-child {
    margin-top: 0;
    padding-top: 0;
}
.block--contents > *:last-child,
.boxes > *:last-child  {
    padding-bottom: 0;
    margin-bottom: 0;
}
.block--contents ol li,
.block--contents ul li {
    margin-left: 2em;
}
.block--contents ol li:not(:last-child),
.block--contents ul li:not(:last-child) {
    margin-bottom: 15px;
}
.block--contents ul li::before {
    content: '';
    display: block;
    position: absolute;
    width: .35em;
    min-width: .35em;
    height: .35em;
    min-height: .35em;
    transform: translate3d(-1.2em, .4em, 0);
    background-color: var(--color-red);
}
@media screen and (max-width: 510px) {
    .block--contents ol li:not(:last-child),
    .block--contents ul li:not(:last-child) {
        margin-bottom: 15px;
    }
}
.block--contents ol {
    list-style: none;
    counter-reset: item;
    margin: 0;
}
.block--contents ol li {
    display: flex;
    align-items: baseline;
    counter-increment: item;
    margin: 0;
}
.block--contents ol li::before {
    display: block;
    margin-right: .5em;
    content: counter(item);
    color: var(--color-black);
    font-size: inherit;
    font-weight: 700;
    width: 24px;
    min-width: 24px;
    height: 24px;
    min-height: 24px;
    text-align: center;
}



/*!*************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!./node_modules/postcss-loader/src/index.js??ruleSet[1].rules[0].use[2]!./resource/css/standard/std-jg-mediafull.css ***!
  \*************************************************************************************************************************************************************************************************/
/* –––––––––––––––––––––––––––––––––––––––––––––––– */
figure {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    margin: 0;
    width: 100%;
    height: auto;
    overflow: hidden;
}
figure.caption--on {
    margin: 0 0 6rem 0;
}
img { 
    display: block;
    position: relative;
    height: 100%;
    max-width: 100%; 
    width: 100%;
    user-select: none;
}
figure.setratio {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    height: auto;
    width: 100%;
}
figure.setratio img,
figure.setratio video {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
figure.jg--lazytrans {
    opacity: 1 !important; 
    transition: opacity .4s ease !important;
}
figure.jg--lazytrans.jg--lazyimg {
    opacity: 0 !important;
}
figure.setratio .ratiovalue {
    display: block;
    position: relative;
}
figure.vimeo iframe {
    position: absolute;
}
figure.fitheight {
    height: intrinsic;
    height: fit-content;
}
figure.setratio figcaption {
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    transform: translate3d(0, 3.6rem, 0);
}
figure.icon.size24,
figure.icon.size24 img {
    width: 24px;
    height: 24px;
    min-width: 24px;
    min-height: 24px;
}
figure.icon.size36,
figure.icon.size36 img {
    width: 36px;
    min-width: 36px;
    height: 36px;
    min-height: 36px;
}
figure.icon.size48,
figure.icon.size48 img {
    width: 48px;
    min-width: 48px;
    height: 48px;
    min-height: 48px;
}
/* –––––––––––––––––––––––––––––––––––––––––––––––– */



/* –––––––––––––––––––––––––––––––––––––––––––––––– */
#preloadimg {
    display: block;
    background-color: var(--color-white);
    position: fixed;
    height: 100vh;
    height: -webkit-fill-available;
    min-height: 100dvh;
    width: 100vw;
    left: 0;
    top: 0;
    z-index: 1000;
    opacity: 0;
    transition: opacity .4s .2s ease-out;
}
#preloadimg.plimg0 {
    opacity: 1;
}
/* –––––––––––––––––––––––––––––––––––––––––––––––– */



/* –––––––––––––––––––––––––––––––––––––––––––––––– */
/* MEDIA */
section.jg--media .media {
    display: block;
    width: 100%;
    height: auto;
}
/* –––––––––––––––––––––––––––––––––––––––––––––––– */



/* –––––––––––––––––––––––––––––––––––––––––––––––– */
/* GALLERY */
section.jg--media .image--container {
    width: 100%;
    max-width: 960px;
    height: auto;
    margin: 0 auto;
}
section.jg--media .galleries.slide--hold::before {
    content: '';
    display: block;
    position: absolute;
    z-index: 9999;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
}
section.jg--media .gallery--children:hover { cursor: grab; }
section.jg--media .gallery--children:active { cursor: grabbing; }
section.jg--media .galleries {
    display: flex;
    position: relative;
    align-items: center;
    width: 100%;
    height: auto;
    margin: 0 auto;
}
section.jg--media .galleries figure.jg--lazytrans > img {
    transition: unset !important;
}

/* FRAME */
section.jg--media .gallery--frame {
    display: flex;
    position: relative;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    margin: 0 auto;
}

/* UL */
section.jg--media .gallery--parent {
    display: flex;
    position: relative;
    height: 100%;
    left: 0;
    touch-action: none;
}
section.jg--media .galleries.shifting .gallery--parent {
    transition-property: left;
    transition-timing-function: cubic-bezier(0,.9,.6,1);
}

/* LI */
section.jg--media .gallery--children {
    display: flex;
    position: relative;
    width: 100%;
    height: auto;
    box-sizing: border-box;
    align-items: stretch;
}
section.jg--media .gallery--children img {
    user-select: none;
    -webkit-user-drag: none;
    -moz-user-drag: none;
}

/* BUTTON CONTROL */
section.jg--media .gallery--control {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    width: 100%;
    height: 0;
    margin: 0 auto;
    left: 0;
    right: 0;
    padding: 0 20px;
}
section.jg--media .gallery--control > * {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 48px;
    height: 48px;
    cursor: pointer;
}
section.jg--media .gallery--control > *::before {
    content: "";
    position: absolute;
    z-index: 11;
    display: block;
    width: 50%;
    height: 50%;
    border-top: 2px solid #fff;
    border-left: 2px solid #fff;
}
section.jg--media .gallery--control .gallery--prev::before { 
    transform: rotate(-45deg);
}
section.jg--media .gallery--control .gallery--next::before {
    transform: rotate(135deg);
}

/* COUNT */
section.jg--media .gallery--count {
    display: flex;
    justify-content: flex-end;
    position: absolute;
    color: var(--color-white);
    font-weight: 700;
    font-size: 16px;
    z-index: 9;
    width: 100%;
    max-width: 60px;
    left: 0;
    right: 0;
    margin: 0 auto;
    bottom: 20px;
    pointer-events: none;
    text-align: center;
}
section.jg--media .gallery--count > * {
    position: relative;
}
section.jg--media .gallery--count > *:not(:first-child) {
    margin-left: 10px;
}
section.jg--media .gallery--count > *:nth-child(1) {
    animation-timing-function: cubic-bezier(.15, .8, 0, 1);
    animation-fill-mode: forwards;
}
section.jg--media .gallery--count.countingup2 > *:nth-child(1) { animation-name: galCountingUPOn; }
section.jg--media .gallery--count.countingup1 > *:nth-child(1) { animation-name: galCountingUPOff; }
@keyframes galCountingUPOff {
    0% { transform: translate3d(0, 0, 0) scale(1, 1); opacity: 1; }
    100% { transform: translate3d(0, -150%, 0) scale(.1, 3); opacity: 0; }
}
@keyframes galCountingUPOn {
    0% { transform: translate3d(0, 150%, 0) scale(.1, 3); opacity: 0; }
    100% { transform: translate3d(0, 0, 0) scale(1, 1); opacity: 1; }
}
section.jg--media .gallery--count.countingdown2 > *:nth-child(1) { animation-name: galCountingDownOff; }
section.jg--media .gallery--count.countingdown1 > *:nth-child(1) { animation-name: galCountingDownOn; }
@keyframes galCountingDownOn {
    0% { transform: translate3d(0, 0, 0) scale(1, 1); opacity: 1; }
    100% { transform: translate3d(0, 150%, 0) scale(.1, 3); opacity: 0; }
}
@keyframes galCountingDownOff {
    0% { transform: translate3d(0, -150%, 0) scale(.1, 3); opacity: 0; }
    100% { transform: translate3d(0, 0, 0) scale(1, 1); opacity: 1; }
}
/* –––––––––––––––––––––––––––––––––––––––––––––––– */



/* –––––––––––––––––––––––––––––––––––––––––––––––– */
/* VIDEO */
section.jg--media .video--container {
    display: block;
    position: relative;
    width: 100%;
    height: auto;
}
section.jg--media .video--container.gif {
    pointer-events: none;
    user-select: none;
}
section.jg--media .jg--videos {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: auto;
    max-width: 900px;
    margin: 0 auto;
}
section.jg--media .jg--videos iframe {
    position: absolute;
    width: 100%;
    height: 100%;
    cursor: pointer;
}
/* VIDEO – BUTTON */
section.jg--media .jg--videos .buttons {
    display: flex;
    flex-direction: column-reverse;
    justify-content: center;    
    align-items: center;
    position: absolute;
    z-index: 2;
    cursor: pointer;
    width: 100%;
    height: 100%;
    margin: 0;
    top: 0;
    left: 0;
}
section.jg--media .jg--videos .buttons .player--text {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    z-index: 1;
    color: var(--color-white);
    padding: 10px 20px;
    border-radius: 2px;
    font-size: 1rem;
    font-weight: 700;
    pointer-events: none;
}
section.jg--media .jg--videos .buttons .player--text > span:nth-child(1) {
    transform: translate3d(0, 50%, 0) scale(2, 1);
    opacity: 0;
}
section.jg--media .jg--videos .buttons .player--text.on > span:nth-child(1) {
    animation: jgVideoPlayerTextOn 1.2s cubic-bezier(0.075, 0.82, 0.165, 1) forwards;
}
.jg--videos .buttons .player--text > span:nth-child(2) {
    position: absolute;
    background-color: var(--color-red);
    width: 100%;
    height: 100%;
    z-index: -1;
    transform: scale(1.4, 0);
}
section.jg--media .jg--videos .buttons .player--text.on > span:nth-child(2) {
    animation: jgVideoPlayerBGOn 1.2s cubic-bezier(0.075, 0.82, 0.165, 1) forwards;
}
@keyframes jgVideoPlayerTextOn {
    0% {  transform: translate3d(0, 20%, 0) scale(2, 1); opacity: 0; }
    100% { transform: translate3d(0, 0, 0) scale(1, 1); opacity: 1; }
}
@keyframes jgVideoPlayerBGOn {
    0% {  transform: scale(1.4, 0); }
    100% { transform: scale(1, 1); }
}
/*!**********************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!./node_modules/postcss-loader/src/index.js??ruleSet[1].rules[0].use[2]!./resource/css/standard/std-jg-others.css ***!
  \**********************************************************************************************************************************************************************************************/
pre {
    position: relative;
    font-size: .75rem;
    line-height: 1.2;
    background-color: yellow;
    color: #000 !important;
    top: 0;
    left: 0;
    z-index: 999999999999;
    overflow: scroll;
    width: auto;
    height: 100%;
}
.dg.ac {
    top: 1 00px !important;
    z-index: 1000 !important;
}


#etc {
    position: absolute;
    width: 0;
    height: 0;
    top: 0;
    left: 0;
}
#etc #window-wh {
    position: fixed;
    width: 100vw;
    height: 100vh;
    height: -webkit-fill-available;
    min-height: 100dvh;
    z-index: -2;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    user-select: none;
    top: 0;
    left: 0;
}
/*!*******************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!./node_modules/postcss-loader/src/index.js??ruleSet[1].rules[0].use[2]!./resource/css/standard/std-jg-mp4.css ***!
  \*******************************************************************************************************************************************************************************************/
figure.setratio.mp4--container button * {
    pointer-events: none;
}
div.pip-small.clickable {
    display: none !important;
}
  
figure.setratio.mp4--container button.play,
figure.setratio.mp4--container button.play::after,
figure.setratio.mp4--container button.fullscreen--button,
figure.setratio.mp4--container button.volume--button,
figure.setratio.mp4--container button.volume--button > .volume--mute,
figure.setratio.mp4--container button.volume--button > .volume--low,
figure.setratio.mp4--container button.volume--button > .volume--high {
    display: block;
    height: 24px;
    width: 24px;
    min-height: 24px;
    min-width: 24px;
}
/* // ALLGEMEIN - RANGE Ff */
figure.setratio.mp4--container input[type=range]::-moz-range-thumb {
    height: 14px;
    width: 14px;
    border-radius: 100%;
    border: unset;
    cursor: pointer;
    margin-top: 5px;
}
figure.setratio.mp4--container input[type=range]::-moz-range-track {
    width: 100%;
    height: 2px;
    cursor: pointer;
    background: transparent;
    border-radius: 1px;
}
figure.setratio.mp4--container input[type=range]:focus::-moz-range-track {
    outline: none;
}
  
/* // ALLGEMEIN – Range */
figure.setratio.mp4--container input[type=range]:focus::-webkit-slider-runnable-track,
figure.setratio.mp4--container input[type=range].volume::-webkit-slider-runnable-track {
    background-color: transparent;
}
figure.setratio.mp4--container input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    cursor: pointer;
    border-radius: 1px;
    -webkit-appearance: none;
}
figure.setratio.mp4--container input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 14px;
    width: 14px;
    border-radius: 14px;
    cursor: pointer;
}
figure.setratio.mp4--container input[type=range]:focus {
    outline: none;
}
figure.setratio.mp4--container input[type=range] {
    appearance: none;
    height: 100%;
    background: transparent;
    cursor: pointer;
}
  
  
/* // ABSTAND */
figure.setratio.mp4--container .left--controls .play,
figure.setratio.mp4--container .left--controls .time {
    margin-right: 25px;
}
figure.setratio.mp4--container ul, li {
    margin: 0;
    padding: 0;
    list-style: none;
}
figure.setratio.mp4--container button,
figure.setratio.mp4--container input {
    background-color: unset;
    border: unset;
}
figure.setratio.mp4--container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 100%;
    max-width: 960px;
    height: auto;
    margin: 0;
}
figure.setratio.mp4--container *, 
figure.setratio.mp4--container *::before,
figure.setratio.mp4--container *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
  
figure.setratio.mp4--container .video--box {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    height: 100%;
    width: 100%;
}
figure.setratio.mp4--container video {
    position: absolute;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    border-radius: 4px;
    cursor: pointer;
}
body.fsonoff--a.fsonoff--b.fsonoff--c figure.setratio.mp4--container video {
    border-radius: 0;
}
  
figure.setratio.mp4--container .video--controls {
    position: absolute;
    display: flex;
    width: 100%;
    bottom: 0;
    right: 0;
    left: 0;
    padding: 10px;
}
figure.setratio.mp4--container .video--controls.hide {
    opacity: 0;
    pointer-events: none;
}
  
  /* // LEFT */
figure.setratio.mp4--container .videoui--left {
    display: flex; 
    position: relative;
    align-items: center;
    width: 100%;
    height: auto;
    margin-right: 40px;
}
figure.setratio.mp4--container .left--controls {
    display: flex;
    align-items: center;
}
figure.setratio.mp4--container .time {
    display: flex;
    font-size: 12px; 
}
figure.setratio.mp4--container .time > span:nth-child(2) {
    padding: 0 4px;
}
  
figure.setratio.mp4--container .video--progress {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    height: 24px;
}
figure.setratio.mp4--container progress {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 1px;
    width: 100%;
    height: 2px;
    pointer-events: none;
    position: absolute;
    border: unset;
}
  
figure.setratio.mp4--container .video--progress progress::-webkit-progress-bar {
    border-radius: 1px;
}
figure.setratio.mp4--container .video--progress progress::-webkit-progress-value {
    border-radius: 1px;
}
figure.setratio.mp4--container .video--progress progress::-moz-progress-bar {
    border: unset;
}
  
figure.setratio.mp4--container .seek {
    position: absolute;
    top: 0;
    width: 100%;
    cursor: pointer;
    margin: 0;
}
  
/* // RIGHT */
figure.setratio.mp4--container .videoui--right {
    display: flex;
    align-items: center;
    position: relative;
  }
  
figure.setratio.mp4--container .volume--controls {
    display: flex;
    align-items: center;
    position: relative;
    margin-right: 30px;
    cursor: pointer;
}
  
figure.setratio.mp4--container .volume--bar {
    display: flex;
    align-items: center;
    position: relative;
    width: 100%;
    height: 24px;
}
figure.setratio.mp4--container .progress--bar--volume {
    display: block;
    position: absolute;
    height: 2px;
    width: 100%;
}
  
figure.setratio.mp4--container .volume--controls input {
    width: 100px;
    opacity: 1;
    transition: all 0.4s ease;
}
  
figure.setratio.mp4--container .volume--controls:hover input,
figure.setratio.mp4--container .volume--controls input:focus {
    width: 100px;
    opacity: 1;
}
  
figure.setratio.mp4--container button.play {
    position: relative;
    font-size: 12px;
    cursor: pointer;
    padding: 3px;
    border: none;
    outline: none;
    visibility: visible;
}
figure.setratio.mp4--container button.play::after {
    content:'';
    display: block;
    position: absolute;
    visibility: hidden;
    top: 0;
    left: 0;
}
figure.setratio.mp4--container.playing button.play {
    visibility: hidden;
}
figure.setratio.mp4--container.playing button.play::after {
    visibility: visible;
}
  
  
  
figure.setratio.mp4--container .seek,
figure.setratio.mp4--container button.play,
figure.setratio.mp4--container button.fullscreen--button,
figure.setratio.mp4--container button.volume--button {
    display: flex;
    justify-content: center;
    cursor: pointer;
}
figure.setratio.mp4--container button.play::before,
figure.setratio.mp4--container button.fullscreen--button::before,
figure.setratio.mp4--container button.volume--button::before {
    transform: translate3d(0, -50%, 0) scale(.7);
}
figure.setratio.mp4--container .progress--bar--percentage,
figure.setratio.mp4--container .seek--tooltip {
    transform: translate3d(-50%, -50%, 0) scale(.7);
}
figure.setratio.mp4--container .seek--tooltip,
figure.setratio.mp4--container button.play::before,
figure.setratio.mp4--container button.fullscreen--button::before,
figure.setratio.mp4--container .progress--bar--percentage,
figure.setratio.mp4--container button.volume--button::before {
    content: attr(data-name);
    position: absolute;
    display: table;
    visibility: hidden;
    opacity: 0;
    font-weight: 700;
    word-break: keep-all;
    white-space: pre;
    font-size: 12px;
    bottom: 0;
    padding: 5px 10px;
    border-radius: 4px;
    z-index: 1021;
    transition: opacity .1s ease-in-out,
                transform .3s cubic-bezier(0, 0.65, 0.3, 1);
}
figure.setratio.mp4--container .seek:hover + .seek--tooltip,
figure.setratio.mp4--container .progress--bar--percentage.pct--onoff,
figure.setratio.mp4--container button.play:hover::before,
figure.setratio.mp4--container button.fullscreen--button:hover::before,
figure.setratio.mp4--container button.volume--button:hover::before {
    visibility: visible;
    opacity: 1;
}
figure.setratio.mp4--container button.play:hover::before,
figure.setratio.mp4--container button.fullscreen--button:hover::before,
figure.setratio.mp4--container button.volume--button:hover::before {
    transform: translate3d(0, -150%, 0) scale(1);
}
figure.setratio.mp4--container .progress--bar--percentage.pct--onoff,
figure.setratio.mp4--container .seek:hover + .seek--tooltip {
    transform: translate3d(-50%, -150%, 0) scale(1);
}  
/* // –––––––––––––––––––––––––––––––––––––––––––––––– */
/* // VOLUME - Button Icon */
figure.setratio.mp4--container button.volume--button {
    position: relative;
}
figure.setratio.mp4--container button.volume--button > span {
    display: block;
    visibility: visible;
    position: relative;
    left: 0;
    top: 0;
    margin-right: 5px;
}
figure.setratio.mp4--container button.volume--button > span.hidden {
    visibility: hidden;
    position: absolute;
}  
/* // VOLUME – Button Icon Kreis – Chrome & Safari */
figure.setratio.mp4--container input[type=range].volume::-webkit-slider-thumb {
    margin-left: 0;
    height: 14px;
    width: 14px;
}
/* // VOLUME - Allgemein – Range */
figure.setratio.mp4--container input[type=range].volume {
    height: 2px;
}
  
  
/* // ––––––––––––––––––––––––––––––––––––––––––––––––
// Fullscreen – Icon */
body.fsonoff--a .mp4fullbg {
    display: block;
    position: fixed;
    z-index: 1028;
    top: 0;
    left: 0;
    height: 100vh;
    height: -webkit-fill-available;
    min-height: 100dvh;
    width: 100vw;
    transform: translate3d(0, -100vh, 0);
    transform: translate3d(0, -100dvh, 0);
    transition: transform .4s cubic-bezier(.75, 0, 0.25, 1);
}
body.fsonoff--a.fsonoff--b .mp4fullbg {
    transform: translate3d(0, 0, 0);
}
body.fsonoff--a.fsonoff--b.fsonoff--c .mp4fullbg,
/* // body.fsonoff--a.fsonoff--b.fsonoff--c main > section:first-child, */
body.fsonoff--a.fsonoff--b.fsonoff--c header {
    visibility: hidden;
}
  
  
body.fsonoff--a.fsonoff--b.fsonoff--c figure.setratio.mp4--container {
    position: fixed;
    justify-content: center;
    width: 100vw;
    max-width: unset;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1029;
}
body.fsonoff--a.fsonoff--b.fsonoff--c figure.setratio.mp4--container .video--controls {
    position: fixed;
    width: 85vw;
    max-width: 760px;
    top: 100vh;
    top: 100dvh;
    margin: 0 auto;
    padding: 15px 20px;
    border-radius: 30px;
    transform: translate3d(0, -200%, 0);
    height: auto;
    min-height: 50px;
}
body.fsonoff--a figure.setratio.mp4--container::after {
    content: '';
    display: block;
    position: absolute;
    width: 100vw;
    height: 100vh;
    height: -webkit-fill-available;
    min-height: 100dvh;
    top: 0;
    left: 0;
    z-index: 1022;
    visibility: hidden;
}
body.fsonoff--a.fsonoff--b.fsonoff--c figure.setratio.mp4--container::after {
    transform: translate3d(0, 0, 0);
    visibility: visible;
    transition: transform .4s cubic-bezier(.75, 0, 0.25, 1);
}
body.fsonoff--a.fsonoff--b.fsonoff--c.fsonoff--d figure.setratio.mp4--container::after {
    transform: translate3d(0, 100vh, 0);
    transform: translate3d(0, 100dvh, 0);
}
  
body.fsonoff--a.fsonoff--b.fsonoff--c figure.setratio.mp4--container .video--controls {
    opacity: 0;
}
  
body.fsonoff--a.fsonoff--b.fsonoff--c figure.setratio.mp4--container.control--on .video--controls {
    animation: controllByFSDesktop 3s ease-out forwards;
}
@keyframes controllByFSDesktop {
    0% { opacity: 1; transform: translate3d(0, -200%, 0); }
    95% { opacity: 1; transform: translate3d(0, -200%, 0); }
    100% { opacity: 0; transform: translate3d(0, -180%, 0); }
}
@keyframes controllByFSMobile {
    0% { opacity: 1; transform: translate3d(0, -120%, 0); }
    95% { opacity: 1; transform: translate3d(0, -120%, 0); }
    100% { opacity: 0; transform: translate3d(0, -100%, 0); }
}
body.fsonoff--a.fsonoff--b.fsonoff--c figure.setratio.mp4--container.control--on.control--hold .video--controls {
    animation: unset;
    opacity: 1;
}
  
  
/* // Button on Video */
figure.setratio.mp4--container .button--onvideo {
    display: block;
    position: absolute;
    height: 120px;
    width: 120px;
    z-index: 1021;
    cursor: pointer;
}
.jg--mp4[data-autoplay=gif] figure.setratio.mp4--container .button--onvideo {
    pointer-events: none;
    user-select: none;
}
/* // BUTTON – CSS */
figure.setratio.mp4--container .button--onvideo .mp4play,
figure.setratio.mp4--container .button--onvideo .mp4pause {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    height: 100%;
    width: 100%;
    visibility: hidden;
}
figure.setratio.mp4--container.btn--start .button--onvideo .mp4play {
    visibility: visible;
}
figure.setratio.mp4--container .button--onvideo .mp4play::before,
figure.setratio.mp4--container .button--onvideo .mp4play::after,
figure.setratio.mp4--container .button--onvideo .mp4pause::before,
figure.setratio.mp4--container .button--onvideo .mp4pause::after {
    content: '';
    display: block;
    position: absolute;
}
/* // PLAY BUTTON */
figure.setratio.mp4--container .button--onvideo .mp4play::before {
    width: 0;
    height: 50px;
    border-width: 25px 0 25px 45px;
    border-style: solid;
}
/* // PAUSE BUTTON */
figure.setratio.mp4--container .button--onvideo .mp4pause::before,
figure.setratio.mp4--container .button--onvideo .mp4pause::after {
    width: 0;
    height: 50px;
    border-style: solid;
    border-width: 0 0 0 15px;
}
figure.setratio.mp4--container .button--onvideo .mp4pause::before {
    transform: translateX(-15px);
}
figure.setratio.mp4--container .button--onvideo .mp4pause::after {
    transform: translateX(15px);
}

figure.setratio.mp4--container.paused .button--onvideo .mp4play,
figure.setratio.mp4--container.playing .button--onvideo .mp4pause { 
    animation: animationPlay .25s ease-out forwards;
}

@keyframes animationPlay {
    0% { transform: scale(1) rotate(0); visibility: visible; }
    75% { transform: scale(.97) }
    100% { transform: scale(.9) rotate(0); visibility: hidden; }
}
  
  
  
@media screen and (max-width: 760px) {
    figure.setratio.mp4--container .button--onvideo {
        height: 96px;
        width: 96px;
    }
   figure.setratio.mp4--container .videoui--left {
      
        flex-direction: column-reverse;
        align-items: flex-start;
    }
   figure.setratio.mp4--container .video--controls {
        flex-direction: column;
        padding: 20px 0 10px;
    }
   figure.setratio.mp4--container .left--controls {
        margin-top: 20px;
    }
   figure.setratio.mp4--container .left--controls .play,
   figure.setratio.mp4--container .left--controls .time {
        margin-right: 15px;
    }
  
  
   figure.setratio.mp4--container .volume--controls {
        display: none;
    }
    
  
   figure.setratio.mp4--container .videoui--right {
        position: absolute;
        bottom: 15px;
        right: 0;
    }
  
    body.fsonoff--a.fsonoff--b.fsonoff--c figure.setratio.mp4--container .videoui--right {
        margin-right: 15px;
    }
    body.fsonoff--a.fsonoff--b.fsonoff--c figure.setratio.mp4--container .video--controls {
        border-radius: 15px;
    }
  
  
    body.fsonoff--a.fsonoff--b.fsonoff--c figure.setratio.mp4--container .video--controls {
        transform: translate3d(0, -120%, 0);
    }
    body.fsonoff--a.fsonoff--b.fsonoff--c figure.setratio.mp4--container.control--on .video--controls {
        animation: controllByFSMobile 3s ease-out forwards;
    }
}




/* // AUTOPLAY ON || OFFWC */
.jg--mp4[data-autoplay=on],
.jg--mp4[data-autoplay=offwc] {
    cursor: pointer;
}
.jg--mp4[data-autoplay=offwc] figure.setratio.mp4--container {
    pointer-events: none;
    user-select: none;
    display: none;
}
.jg--mp4[data-autoplay=on] figure.setratio.mp4--container .button--onvideo,
.jg--mp4[data-autoplay=on] figure.setratio.mp4--container .video--controls,
.jg--mp4[data-autoplay=offwc] figure.setratio.mp4--container .button--onvideo,
.jg--mp4[data-autoplay=offwc] figure.setratio.mp4--container .video--controls {
    display: none;
}



/* // VID BOX */
.vid--box figure.setratio.mp4--container::before {
    padding-bottom: unset;
}
.vid--box figure.setratio.mp4--container .video--box,
.vid--box figure.setratio.mp4--container video {
    position: relative;
    height: auto;
}


/* // ––––––––––––––––––––––––––––––––––––––––––––––––––––––
// COLORS */
figure.setratio.mp4--container input[type=range]::-webkit-slider-thumb {
    background: #ff002a;
}
figure.setratio.mp4--container .left--controls {
    color: var(--color-white);
}
figure.setratio.mp4--container .time {
    color: var(--color-white);
}
figure.setratio.mp4--container progress {
    background-color: #D6D6D6;
}
figure.setratio.mp4--container .video--progress progress::-webkit-progress-bar {
    background-color: #D6D6D6;
}
figure.setratio.mp4--container .video--progress progress::-webkit-progress-value {
    background-color: #FF002A;
}
figure.setratio.mp4--container .video--progress progress::-moz-progress-bar {
    background: #ff002a;
}
figure.setratio.mp4--container .progress--bar--volume {
    background-color: #32B8B9;
}
figure.setratio.mp4--container button.play {
    background: url('/content/plugins/bundb-plugin/theme-assets/img/svg/mediaui/play-w.svg') no-repeat center center / cover;
}
figure.setratio.mp4--container button.play::after {
    background: url('/content/plugins/bundb-plugin/theme-assets/img/svg/mediaui/pause-w.svg') no-repeat center center / cover;
}
figure.setratio.mp4--container .seek--tooltip,
figure.setratio.mp4--container button.play::before,
figure.setratio.mp4--container button.fullscreen--button::before,
figure.setratio.mp4--container .progress--bar--percentage,
figure.setratio.mp4--container button.volume--button::before {
    color: var(--color-white);
}
figure.setratio.mp4--container .seek--tooltip,
figure.setratio.mp4--container button.play::before,
figure.setratio.mp4--container button.fullscreen--button::before,
figure.setratio.mp4--container button.volume--button::before {
    background-color: #FF002A;
}
figure.setratio.mp4--container .progress--bar--percentage {
    background-color: #32B8B9;
}
figure.setratio.mp4--container input[type=range].seek::-moz-range-thumb {
    background: #ff002a;
}
figure.setratio.mp4--container button.volume--button > .volume--mute { background: url('/content/plugins/bundb-plugin/theme-assets/img/svg/mediaui/volume_mute-w.svg') no-repeat center center / cover; }
figure.setratio.mp4--container button.volume--button > .volume--low { background: url('/content/plugins/bundb-plugin/theme-assets/img/svg/mediaui/volume_down-w.svg') no-repeat center center / cover; }
figure.setratio.mp4--container button.volume--button > .volume--high { background: url('/content/plugins/bundb-plugin/theme-assets/img/svg/mediaui/volume_up-w.svg') no-repeat center center / cover; }
figure.setratio.mp4--container input[type=range].volume::-webkit-slider-thumb {
    background: #32B8B9;
}
figure.setratio.mp4--container input[type=range].volume {
    background-color: #D6D6D6;
}
figure.setratio.mp4--container input[type=range].volume::-moz-range-thumb {
    background: #32B8B9;
}
figure.setratio.mp4--container button.fullscreen--button {
    background: url('/content/plugins/bundb-plugin/theme-assets/img/svg/mediaui/fullscreen-w.svg') no-repeat center center / cover;
}
body.fsonoff--a .mp4fullbg {
    background-color: #000;
}
body.fsonoff--a.fsonoff--b.fsonoff--c figure.setratio.mp4--container {
    background-color: #000;
}
body.fsonoff--a.fsonoff--b.fsonoff--c figure.setratio.mp4--container .video--controls {
    background-color: var(--color-black);
}
body.fsonoff--a figure.setratio.mp4--container::after {
    background-color: #000;
}
body.fsonoff--a.fsonoff--b.fsonoff--c figure.setratio.mp4--container progress,
body.fsonoff--a.fsonoff--b.fsonoff--c figure.setratio.mp4--container progress::-webkit-progress-bar,
body.fsonoff--a.fsonoff--b.fsonoff--c figure.setratio.mp4--container input[type=range].volume {
    background-color: #999;
}
body.fsonoff--a.fsonoff--b.fsonoff--c figure.setratio.mp4--container .time {
    color: #eaeaea;
}  
figure.setratio.mp4--container .button--onvideo .mp4play::before {
    border-color: transparent;
    border-left-color: var(--color-white);
}
/* // PAUSE BUTTON */
figure.setratio.mp4--container .button--onvideo .mp4pause::before,
figure.setratio.mp4--container .button--onvideo .mp4pause::after {
    border-color: transparent;
    border-left-color: var(--color-white);
}

/* // –––––––––––––––––––––––––––––––––––––––––––––––––––––– */
/*!*********************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!./node_modules/postcss-loader/src/index.js??ruleSet[1].rules[0].use[2]!./resource/css/elements/lineseperate.css ***!
  \*********************************************************************************************************************************************************************************************/
.lineseperate {
    display: block;
    width: 100%;
    height: 1px;
    background-color: var(--color-black);
    margin: 20px 0;
}
/*!**************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!./node_modules/postcss-loader/src/index.js??ruleSet[1].rules[0].use[2]!./resource/css/elements/login.css ***!
  \**************************************************************************************************************************************************************************************/
/* // ––––––––––––––––––––––––––––––––––––––––  
// LOGIN FIRST */
section#lfgcd-login {
    display: flex;
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    justify-content: center;
    align-items: center;
    background-color: #f2f2f2;
}
section#lfgcd-login.loggedin {
    display: none;
}
section#lfgcd-login form {
    display: grid;
    grid-gap: 5px;
    position: relative;
    align-self: center;
    margin-bottom: 60px;
    width: 280px;
    margin: 0 auto;
}
section#lfgcd-login form p {
    font-weight: 700;
}

section#lfgcd-login form .form--pw {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: auto;
}

section#lfgcd-login form .form--pw input[type="password"] {
    border: 1px solid var(--color-black);
    border-radius: 5px;
    padding: 15px 20px;
    color: #1e2124;
}
section#lfgcd-login form .form--pw input[type="password"]:focus-visible {
    outline: none;
    border: 1px solid var(--color-yellow);
    border-radius: 5px;
}
section#lfgcd-login form .form--pw label {
    position: absolute;
    padding: 15px 20px;
    line-height: 1;
    opacity: .25;
    transform-origin: top left;
}
section#lfgcd-login form .form--pw input[type="password"].filled ~ label,
section#lfgcd-login form .form--pw input[type="password"]:focus-visible ~ label {
    transform: translate3d(5%, -15%, 0) scale(.75);
}

section#lfgcd-login form input[type="submit"] {
    position: relative;
    background-color: var(--color-grey1);
    border-radius: 5px;
    border: unset;
    color: var(--color-black);
    padding: 15px 20px;
    cursor: not-allowed;
}
section#lfgcd-login.goon form input[type="submit"] {
    background-color: var(--color-yellow);
    cursor: pointer;
}

/*!***********************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!./node_modules/postcss-loader/src/index.js??ruleSet[1].rules[0].use[2]!./resource/css/module/head.css ***!
  \***********************************************************************************************************************************************************************************/
section.head {
    display: flex;
}
section.head .section--container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-top: 0;
    padding-bottom: 5vh;
}

section.head .box-a {
    max-width: 1080px;
}
section.head .box-a h1 strong {
    color: var(--color-yellow);
}
section.head .box-b > span {
    display: block;
    padding-top: 60px;
}
/*!*************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!./node_modules/postcss-loader/src/index.js??ruleSet[1].rules[0].use[2]!./resource/css/module/headline-seperator.css ***!
  \*************************************************************************************************************************************************************************************************/
section.headline--seperator {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background-color: var(--color-yellow);
}
section.headline--seperator .bg {
    display: flex;
    align-items: center;
    width: 100%;
    height: auto;
    background-color: var(--color-yellow);
}
section.headline--seperator .bg figure.setratio {
    justify-content: flex-end;
    height: 100%;
    width: 100%;
    min-height: 280px;
    max-height: 540px;
}
section.headline--seperator .bg figure.setratio img {
    width: auto;
    height: 100%;
}

section.headline--seperator .section--container {
    padding-top: 0;
    padding-bottom: 0;
    color: var(--color-white);
}
section.headline--seperator .box-a {
    position: absolute;
    padding-bottom: 40px;
    bottom: 0;
    max-width: 50%;
}
/*!*****************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!./node_modules/postcss-loader/src/index.js??ruleSet[1].rules[0].use[2]!./resource/css/module/col3x-text.css ***!
  \*****************************************************************************************************************************************************************************************/
section.col3x--text .box-a {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 20px;
}
@media screen and (max-width: 970px) {
    section.col3x--text .box-a {
        grid-gap: 10px;
    }   
}
@media screen and (max-width: 760px) {
    section.col3x--text .box-a {
        grid-template-columns: unset;
    }   
}

section.col3x--text.col2x .box-a {
    grid-template-columns: repeat(2, 1fr);
}
@media screen and (max-width: 760px) {
    section.col3x--text.col2x .box-a {
        grid-template-columns: unset;
    }   
}
/*!************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!./node_modules/postcss-loader/src/index.js??ruleSet[1].rules[0].use[2]!./resource/css/module/media-full-single.css ***!
  \************************************************************************************************************************************************************************************************/
section.media--fullsingle .box-a {
    display: flex;
    align-items: center;
    justify-content: center;
}
@media screen and (max-width: 760px) {
    section.media--fullsingle .box-a {
        width: 80%;
        margin: 0 auto;
    }   
}
@media screen and (max-width: 510px) {
    section.media--fullsingle .box-a {
        width: 90%;
    }   
}

/*  */
section.media--fullsingle.paddingtbnone .section--container {
    padding-top: 0;
    padding-bottom: 1%;
}
@media screen and (max-width: 760px) {
    section.media--fullsingle.paddingtbnone .box-a {
        width: 100%;
    }   
}
/*!******************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!./node_modules/postcss-loader/src/index.js??ruleSet[1].rules[0].use[2]!./resource/css/module/media-col3x.css ***!
  \******************************************************************************************************************************************************************************************/
section.media--fullcol3x .box-a {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    justify-items: center;
    grid-gap: 20px;
}
section.media--fullcol3x .box-a > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
    height: auto;
}
@media screen and (max-width: 1200px) {
    section.media--fullcol3x .box-a {
        grid-gap: 10px;
    }
}
@media screen and (max-width: 760px) {
    section.media--fullcol3x .box-a {
        grid-template-columns: unset;
        width: 80%;
        margin: 0 auto;
    }
}
@media screen and (max-width: 510px) {
    section.media--fullcol3x .box-a {
        width: 90%;
    }
}

/* COL 2X */
section.media--fullcol3x.col2x .box-a {
    grid-template-columns: repeat(2, 1fr);
}
/* COL 4X */
section.media--fullcol3x.col4x .box-a {
    grid-template-columns: repeat(4, 1fr);
}
/* COL 8X */
section.media--fullcol3x.col8x .box-a {
    grid-template-columns: repeat(4, 1fr);
}
@media screen and (max-width: 970px) {
    section.media--fullcol3x.col4x .box-a,
    section.media--fullcol3x.col8x .box-a {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media screen and (max-width: 760px) {
    section.media--fullcol3x.col2x .box-a {
        grid-template-columns: unset;
    }
}


/* ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
/* GET TITLE */
section.media--fullcol3x.get4title .box-a > *:nth-child(1)::before,
section.media--fullcol3x.get4title .box-a > *:nth-child(2)::before,
section.media--fullcol3x.get4title .box-a > *:nth-child(3)::before,
section.media--fullcol3x.get4title .box-a > *:nth-child(4)::before {
    display: block;
    width: 100%;
    height: auto;
    font-family: inherit;
    font-weight: inherit;
    margin: 0 auto 10px;
    text-align: center;
}
section.media--fullcol3x.get4title .box-a > *:nth-child(1)::before { content: 'fokussieren'; }
section.media--fullcol3x.get4title .box-a > *:nth-child(2)::before { content: 'verbinden'; }
section.media--fullcol3x.get4title .box-a > *:nth-child(3)::before { content: 'stärken'; }
section.media--fullcol3x.get4title .box-a > *:nth-child(4)::before { content: 'schmücken'; }
section.media--fullcol3x.get4title .box-a > * figure.setratio {
    border: 1px solid var(--color-black);
}
@media screen and (max-width: 970px) {
    section.media--fullcol3x.get4title .box-a {
        align-items: flex-end;
    }
    /* section.media--fullcol3x.get4title .box-a > *:nth-child(1)::before { content: 'fokussieren'; } */
    section.media--fullcol3x.get4title .box-a > *:nth-child(1)::before,
    section.media--fullcol3x.get4title .box-a > *:nth-child(2)::before,
    section.media--fullcol3x.get4title .box-a > *:nth-child(3)::before,
    section.media--fullcol3x.get4title .box-a > *:nth-child(4)::before {
        display: none;
    }
    section.media--fullcol3x.get4title .box-a > *:nth-child(1)::before,
    section.media--fullcol3x.get4title .box-a > *:nth-child(3)::before,
    section.media--fullcol3x.get4title .box-a > *:nth-child(5)::before,
    section.media--fullcol3x.get4title .box-a > *:nth-child(7)::before {
        display: block;
        width: 100%;
        height: auto;
        font-family: inherit;
        font-weight: inherit;
        margin: 20px auto 10px;
        text-align: left;
    }
    section.media--fullcol3x.get4title .box-a > *:nth-child(1)::before { content: 'fokussieren'; }
    section.media--fullcol3x.get4title .box-a > *:nth-child(3)::before { content: 'verbinden'; }
    section.media--fullcol3x.get4title .box-a > *:nth-child(5)::before { content: 'stärken'; }
    section.media--fullcol3x.get4title .box-a > *:nth-child(7)::before { content: 'schmücken'; }

    section.media--fullcol3x.get4title .box-a > *:nth-child(5) { order: 2; }
    section.media--fullcol3x.get4title .box-a > *:nth-child(6) { order: 3; }
    section.media--fullcol3x.get4title .box-a > *:nth-child(7) { order: 4; }
    section.media--fullcol3x.get4title .box-a > *:nth-child(8) { order: 5; }
}
/* ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */



/* ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
section.media--fullcol3x.textmp4 .box-a {
    align-items: flex-end;
}
section.media--fullcol3x.textmp4 .box-a .jg--videos {
    display: block;
    width: 100%;
    height: 100%;
}
section.media--fullcol3x.textmp4 .box-a > * figure.setratio {
    border: 1px solid var(--color-black);
}
@media screen and (max-width: 510px) {
    section.media--fullcol3x.col4x.textmp4 .box-a > .blocks {
        grid-column: 1 / span 2;
    }
}
/* ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
/*!*******************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!./node_modules/postcss-loader/src/index.js??ruleSet[1].rules[0].use[2]!./resource/css/module/colors-col3x.css ***!
  \*******************************************************************************************************************************************************************************************/
section.colors--col3x .box-a {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 20px;
}
@media screen and (max-width: 1200px) {
    section.colors--col3x .box-a {
        grid-gap: 10px;
    }
}
@media screen and (max-width: 760px) {
    section.colors--col3x .box-a {
        grid-template-columns: unset;
        max-width: 360px;
        margin: 0 auto;
    }
}
section.colors--col3x .box-a > div {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
}
section.colors--col3x .box-a > div::before {
    content: '';
    display: block;
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
}

section.colors--col3x .box-a > div .values {
    display: flex;
    flex-direction: column;
    position: absolute;
    padding: 20px;
}
section.colors--col3x .box-a > div .values > div {
    display: grid;
    grid-template-columns: 80px 1fr;
}
/*!*****************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!./node_modules/postcss-loader/src/index.js??ruleSet[1].rules[0].use[2]!./resource/css/module/text-media.css ***!
  \*****************************************************************************************************************************************************************************************/
section.text--media .box-a {
    display: grid;
    grid-gap: 20px;
    grid-template-columns: 2fr 5fr;
    align-items: center;
}
@media screen and (max-width: 760px) {
    section.text--media .box-a {
        grid-template-columns: unset;
    }
    section.text--media .box-a .cont-a {
        order: 2;
    }
}

/* TYPE 0 */
section.text--media.type0 .box-a {
    grid-template-columns: 5fr 2fr;
}
section.text--media.type0 .box-a .cont-a {
    order: 2;
}
@media screen and (max-width: 760px) {
    section.text--media.type0 .box-a {
        grid-template-columns: unset;
    }
}

/* TYPE 1 */
section.text--media.type1 .box-a {
    max-width: 1100px;
    grid-template-columns: 5fr 2fr;
    margin: 0 auto;
}
section.text--media.type1 .box-a .cont-a {
    order: 2;
}
section.text--media.type1 .box-a .cont-b {
    display: flex;
    justify-content: flex-end;
}
@media screen and (max-width: 760px) {
    section.text--media.type1 .box-a {
        grid-template-columns: unset;
    }
}

/* TYPE 2 */
section.text--media.type2 .box-a {
    max-width: 1200px;
    grid-template-columns: 5fr 3fr;
    margin: 0 auto;
}
section.text--media.type2 .box-a .cont-a {
    order: 2;
}
section.text--media.type2 .box-a .cont-b {
    display: flex;
    justify-content: flex-end;
}
@media screen and (max-width: 760px) {
    section.text--media.type2 .box-a {
        grid-template-columns: unset;
    }
}

/* TYPE 3 */
section.text--media.type3 .box-a {
    max-width: 1200px;
    grid-template-columns: 5fr 2fr;
    margin: 0 auto;
    padding-left: 40px;
}
section.text--media.type3 .box-a .cont-a {
    order: 2;
}
section.text--media.type3 .box-a .cont-b {
    display: flex;
    justify-content: flex-end;
}
@media screen and (max-width: 760px) {
    section.text--media.type3 .box-a {
        grid-template-columns: unset;
        padding-left: unset;
    }
}
/*!**************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!./node_modules/postcss-loader/src/index.js??ruleSet[1].rules[0].use[2]!./resource/css/module/specific/typo-arial.css ***!
  \**************************************************************************************************************************************************************************************************/
/* BOX A */
section.typo--arial .box-a {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 1200px;
    margin: 0 auto;
}
section.typo--arial .box-a .arialstyle {
    display: flex;
    flex-direction: column;
}
section.typo--arial .box-a .arialstyle > * {
    font-size: 96px;
    line-height: 1;
}
section.typo--arial .box-a .arialstyle > *:nth-child(3),
section.typo--arial .box-a .arialstyle > *:nth-child(4) {
    font-weight: bold;
}
section.typo--arial .box-a .arialstyle > *:nth-child(5) {
    font-weight: black;
    font-family: "Arial Black";
}
@media screen and (max-width: 1400px) {
    section.typo--arial .box-a .arialstyle > * {
        font-size: 8vw;
    }
}



/* BOX B */
section.typo--arial .box-b {
    display: grid;
    grid-gap: 60px;
    max-width: 1200px;
    margin: 20vh auto 0;
}
section.typo--arial .box-b > * {
    display: grid;
    grid-template-columns: 240px 1fr;
    align-items: flex-start;
    grid-gap: 20px;
}
section.typo--arial .box-b > *:first-child {
    align-items: center;
}

section.typo--arial .box-b > * > * {
    display: block;
}
section.typo--arial .box-b > * > .str2,
section.typo--arial .box-b > * > .str4 {
    line-height: 1;
}
@media screen and (max-width: 1200px) {
    section.typo--arial .box-b > * {
        grid-template-columns: 180px 1fr;
    }   
}
@media screen and (max-width: 970px) {
    section.typo--arial .box-b {
        margin-top: 60px;
        grid-gap: 40px;
    }
}
@media screen and (max-width: 760px) {
    section.typo--arial .box-b > * {
        grid-template-columns: 140px 1fr;
    }   
}
@media screen and (max-width: 590px) {
    section.typo--arial .box-b > * {
        grid-template-columns: unset;
        grid-gap: 10px;
    }   
}