/* @group Green Slider
------------------------------------ */
.green-slider { background: var(--bg-green); color: var(--green-text); }
.green-slider a { color: var(--green-text); }
.green-slider .img-box { height: auto; max-width: 100%; }
.green-slider .img-box img { display: block; }
.green-slider h3 { font-size: 2.8em; letter-spacing: 4.48px; line-height: 1.286em; }
.green-slider h3 em { font-weight: 500; }
.green-slider h5 { margin: -2.8rem 0 4rem; }
.green-slider h5 em { font-weight: 300; display: block; }
.green-slider p { font-size: 2em; line-height: 1.600em; margin: 0 0 3.4rem; } 
.green-slider .txt-link { font: 500 2em / 1.2em var(--bilo-font); text-decoration: underline; letter-spacing: 2.4px; display: inline-block; } 
.green-slider .txt-link em { font-weight: 400; display: block; }
.green-slider article::after { content: ''; display: block; background: var(--bg-visit); height: .1rem; width: 32rem; margin: 8.4rem auto 6rem; }
.green-slider article:last-child::after { content: none; }

.green-slider .link-circle { color: var(--green-text); margin-right: 3.6rem; 
    -webkit-transition: opacity 0.3s linear;
    -moz-transition: opacity 0.3s linear;
    -ms-transition: opacity 0.3s linear;
    -o-transition: opacity 0.3s linear;
    transition: opacity 0.3s linear;
}
.green-slider .link-circle i svg { stroke: var(--green-text); }
.green-slider .customPagination button .hover { opacity: 0; position: absolute; display: flex; align-items: center; top: .3rem;
    -webkit-transition: opacity 0.3s linear;
    -moz-transition: opacity 0.3s linear;
    -ms-transition: opacity 0.3s linear;
    -o-transition: opacity 0.3s linear;
    transition: opacity 0.3s linear;
}
.green-slider .customPagination button .hover .img-box { height: 7.8rem; width: 7.8rem; margin-right: .6rem; }

.green-slider .splide__arrow { position: absolute; right: 9.5vw; top: 38%; transform: translate3d(0,-50%,0); margin:0; z-index: 3; }
.green-slider .splide__arrow--prev { display: none; }

.green-slider .splide__arrow svg { stroke-width: 2; }

@media only screen
and (min-width : 961px) {
    .green-slider { padding: 4.6rem 0 0; }
    .green-slider .splide__track { margin-bottom: 3.5rem; }
    .green-slider .img-box { height: 48rem; width: 48rem; margin: 0 auto; border-radius: 100%; }
    .green-slider h3 { white-space: nowrap; transform: rotate(-90deg) }
    .green-slider article { display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-start; }
    .green-slider article > div { width: 50%; height: 53.2rem; }
    .green-slider article .image-box { display: inline-flex; align-items: center; }
    .green-slider article .txt-box { padding-left: 3.5rem; display: flex; flex-direction: column; }
    .green-slider article .txt-box::after { content: ''; display: block; background: var(--bg-visit); position: absolute; top: 0; height: 0; width: .1rem; margin: 0; left: calc(50% - .05rem); 
        -webkit-transition: height 0.8s linear;
        -moz-transition: height 0.8s linear;
        -ms-transition: height 0.8s linear;
        -o-transition: height 0.8s linear;
        transition: height 0.8s linear;
    }

    .green-slider h5 { margin: 7.6rem 0 2.4rem; }
    .green-slider p { max-width: 36.2rem; margin: 0 0 10.8rem; } 
    .green-slider .txt-link { margin-top: auto; }

    .green-slider .slider::after { content: ''; display: block; background: var(--bg-softwhite); position: absolute; top: 0; height: 53.2rem; width: .1rem; margin: 0; left: 0; }
    .green-slider article::after { background: var(--bg-softwhite); position: absolute; top: 0; height: 100%; width: .1rem; margin: 0; right: 0; }

    .Explorer .green-slider .customPagination button:hover .large,
    .Mozilla.v11 .green-slider .customPagination button:hover .large { opacity: 0; }
    .Explorer .green-slider .customPagination button:hover .hover,
    .Mozilla.v11 .green-slider .customPagination button:hover .hover { opacity: 1; }
    @media (hover: hover) {
        .green-slider .customPagination button:hover .large { opacity: 0; }
        .green-slider .customPagination button:hover .hover { opacity: 1; }
    }
    /* Animation
    ----------------------*/
    .green-slider h5,
    .green-slider p,
    .green-slider .txt-link { -webkit-transform: translate3d(0,5rem,0); transform: translate3d(0,5rem,0); opacity: 0; }
    .green-slider article .img-box img { -webkit-transform: scale(0); transform: scale(0); opacity: 0; }
    .green-slider article.is-active h5,
    .green-slider article.is-active p,
    .green-slider article.is-active .txt-link { animation: fadeUp 1.2s 1 cubic-bezier(0.4,0.0,0.2,1) forwards; animation-delay: .6s; }
    .green-slider article.is-active p { animation-delay: .8s; }
    .green-slider article.is-active .txt-link { animation-delay: 1s; }
    .green-slider article.is-active .img-box img { animation: fadeScaleFull 1.2s 1 cubic-bezier(0.4,0.0,0.2,1) forwards; }
    .green-slider article.is-active .txt-box::after { animation: grow 1.2s 1 cubic-bezier(0.4,0.0,0.2,1) forwards; }
}
@media only screen
and (min-width : 961px)
and (max-width : 1440px) {
    .green-slider .img-box { max-width: 90%; }
}
@media only screen
and (min-width : 1920px) {
    .green-slider { padding: 5.9rem 0 0; }
    .green-slider .splide__track { margin-bottom: 4.7rem; }
    .green-slider article > div { height: 61.5rem; }
    .green-slider article .txt-box { padding-left: 4.2rem; }
    .green-slider .img-box { height: 55.5rem; width: 55.5rem; }
    .green-slider h5 { margin: 8.2rem 0 2.4rem; }
    .green-slider p { max-width: 41.8rem; margin: 0 0 12.5rem; }

    .green-slider .slider::after { height: 61.5rem; }

    .green-slider .splide__arrow { right: 9.5vw; }
}
@media only screen
and (min-width : 0)
and (max-width : 960px) {
    .green-slider { text-align: center; }
    .green-slider .col-12-11 { padding: 0; }
    .green-slider .col-12-11 .txt-box { padding: 0 .7rem; position: relative; }
    .green-slider h3 { margin: 4.3rem 0; }
    .green-slider .img-box::after { content: ''; height: 11rem; left: 0; width: 100%; bottom: 0; position: absolute; background: transparent linear-gradient(180deg, rgba(165,184,178,0) 0%, rgba(165,184,178,1) 100%);  }
    .green-slider article:last-child { margin: 0 0 19.2rem; }
    .green-slider .splide__arrows { display: none; }
}

/* @end */