@charset "UTF-8";

.invisible.visible {
    visibility: visible !important;
}

.spotlight-item-view .container {
    overflow-x: visible;
}

.flex-media {
    display: flex;
    align-items: flex-start;
}

.flex-media .body {
    flex: 1;
}

.border-main-color {
    border: 2px solid var(--main-color);
}

.border-main-bottom {
    border-bottom: 10px solid var(--main-color);
}

.w-20 {
    width: 20% !important;
}

.mw-100vw {
    max-width: 100vw;
}

.mw-1440px {
    max-width: 1440px;
}

.mw-1280px {
    max-width: 1280px;
}

.mw-1140px {
    max-width: 1140px;
}

.mw-1000px {
    max-width: 1000px;
}

.text-fat {
    transform: scale(1, 0.85);
}

ul.disc-ul,
ul.outline-ul {
    padding-left: 9%;
}

ul.disc-ul li,
ul.outline-ul li {
    position: relative;
}

ul.disc-ul li:before,
ul.outline-ul li:before {
    content: "●";
    position: absolute;
    margin-left: -9%;
}

ul.outline-ul li {
    position: relative;
}

ul.outline-ul li:before {
    content: "◦";
}

ul.dash-ul {
    padding-left: 4%;
}

ul.dash-ul li {
    position: relative;
}

ul.dash-ul li:before {
    content: "-";
    position: absolute;
    margin-left: -4%;
}

.over-width {
    margin-left: calc(-1 * (50vw - 360px));
    margin-right: calc(-1 * (50vw - 360px));
}

@media (max-width: 991px) {
    .over-width {
        margin-left: calc(-1 * (50vw - 285px));
        margin-right: calc(-1 * (50vw - 285px));
    }
}

@media (max-width: 600px) {
    .over-width {
        margin-left: -15px;
        margin-right: -15px;
    }
}

@media (max-width: 581px) {
    .over-width .container .wrapper {
        max-width: 100vw;
    }

    .over-width>.container>.wrapper:not(.px-0) {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
}

br[d] {
    display: inline;
}

@media (max-width: 767px) {
    br[d] {
        display: none;
    }
}

br[m] {
    display: none;
}

@media (max-width: 767px) {
    br[m] {
        display: inline;
    }
}

hr[v] {
    border: none;
    border-left-style: solid;
    border-left-width: 1px;
    height: 100%;
    min-height: 2rem;
    width: 1px;
}

.between-line {
    display: inline-block;
    position: relative;
}

.between-line:before,
.between-line:after {
    content: "";
    position: absolute;
    border-bottom: 1px solid black;
    top: 50%;
    width: 50vw;
}

.between-line:before {
    right: 100%;
    margin-right: 15px;
}

.between-line:after {
    left: 100%;
    margin-left: 15px;
}

.square-box {
    position: relative;
}

.square-box:before {
    content: "";
    display: block;
    padding-top: 100%;
}

.square-box .content {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    color: #1B202F;
    text-align: center;
}

.text-bold {
    font-weight: bold;
}

@supports (-webkit-overflow-scrolling: touch) {
    .text-bold {
        -webkit-font-smoothing: antialiased;
    }
}

.flex-center-center {
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
}

#biotherm-ampoules-content {
    background-image: url("https://www.jeban.com/spotlight-item/lifeplankton-ampoules/1440/bg-cover.jpg");
    background-position: center top;
    background-repeat: no-repeat;
    background-color: white;
    background-size: 100% auto;
    height: calc(100vw * 1270/1440);
    position: relative;
}

@media (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) {
    #biotherm-ampoules-content {
        background-image: url("https://www.jeban.com/spotlight-item/lifeplankton-ampoules/1440/bg-cover.jpg");
    }
}

@media (min-width: 1440px) {
    #biotherm-ampoules-content {
        height: 1270px;
        background-size: 1440px auto;
    }
}

@media (max-width: 767px) {
    #biotherm-ampoules-content {
        height: calc(100vw * 1075/375);
        background-image: url("https://www.jeban.com/spotlight-item/lifeplankton-ampoules/375/bg-cover.jpg");
        background-position: center calc(100vw * -65/375);
    }
}

@media (max-width: 767px) and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) {
    #biotherm-ampoules-content {
        background-image: url("https://www.jeban.com/spotlight-item/lifeplankton-ampoules/375/bg-cover.jpg");
    }
}
/*
.spotlight-item-view>.container:first-child .breadcrumb .breadcrumb-item,
.spotlight-item-view>.container:first-child .breadcrumb .breadcrumb-item+ :before,
.spotlight-item-view>.container:first-child .breadcrumb .breadcrumb-item a {
    color: white !important;
}

.spotlight-item-view>.container:first-child .breadcrumb .breadcrumb-item.active {
    display: none;
}

.spotlight-item-view>.container:not(:first-child) {
    background: white;
}
*/
@media (min-width: 992px) {
    #biotherm-ampoules-content {
        margin-top: calc(-17px);
        padding-top: calc(17px);
    }
}

.cover.over-width {
    color: white;
    text-align: center;
}

.cover.over-width .wrapper {
    width: 60%;
    padding-top: calc(100vw * 114/1440);
    padding-bottom: calc(100vw * 275/1440);
}

@media (min-width: 1440px) {
    .cover.over-width .wrapper {
        padding-top: 114px;
    }
}

@media (max-width: 767px) {
    .cover.over-width .wrapper {
        padding-top: calc(100vw * 0/375);
    }
}

@media (min-width: 1440px) {
    .cover.over-width .wrapper {
        padding-bottom: 275px;
    }
}

@media (max-width: 767px) {
    .cover.over-width .wrapper {
        padding-bottom: calc(100vw * 250/375);
    }
}

@media (max-width: 767px) {
    .cover.over-width .wrapper {
        width: 100%;
        padding-top: calc((100vw * 0.051020408163265) - 9.13265306122449px);
    }
}

.cover.over-width .wrapper img.logo {
    width: calc(100vw * 345/1440);
}

@media (min-width: 1440px) {
    .cover.over-width .wrapper img.logo {
        width: 345px;
    }
}

@media (max-width: 767px) {
    .cover.over-width .wrapper img.logo {
        width: calc(100vw * 165/375);
        margin-top: calc(100vw * 30/375);
    }
}

.cover.over-width .wrapper h1 {
    font-size: calc(100vw * 92/1440);
    margin-top: calc(100vw * 20/1440);
}

@media (min-width: 1440px) {
    .cover.over-width .wrapper h1 {
        font-size: 92px;
        margin-top: 20px;
    }
}

@media (max-width: 767px) {
    .cover.over-width .wrapper h1 {
        font-size: calc(100vw * 40/375);
    }
}

.cover.over-width .wrapper h2 {
    font-size: calc(100vw * 65/1440);
    line-height: 1.5;
}

@media (min-width: 1440px) {
    .cover.over-width .wrapper h2 {
        font-size: 65px;
    }
}

@media (max-width: 767px) {
    .cover.over-width .wrapper h2 {
        font-size: calc(100vw * 32/375);
    }
}

.cover.over-width .wrapper h3 {
    font-size: calc(100vw * 60/1440);
    margin-top: calc(100vw * -20/1440);
}

@media (min-width: 1440px) {
    .cover.over-width .wrapper h3 {
        font-size: 60px;
        margin-top: -20px;
    }
}

@media (max-width: 767px) {
    .cover.over-width .wrapper h3 {
        font-size: calc(100vw * 32/375);
    }
}

.cover.over-width .wrapper h4 {
    font-size: calc(100vw * 45/1440);
    margin-top: calc(100vw * -20/1440);
}

@media (min-width: 1440px) {
    .cover.over-width .wrapper h4 {
        font-size: 45px;
        margin-top: -20px;
    }
}

@media (max-width: 767px) {
    .cover.over-width .wrapper h4 {
        font-size: calc(100vw * 32/375);
    }
}

.cover.over-width .wrapper ol {
    list-style: none;
    padding-left: 0;

    text-align: left;
    font-style: italic;
    margin-left: calc(100vw * 270/1440);
    font-size: calc(100vw * 22/1440);
    margin-top: calc(100vw * 145/1440);
}
.cover.over-width .wrapper ol li {
    margin-bottom: calc(100vw * 8/1440);
    width: calc(100vw * 460/1440);
    opacity: .8;
}
.cover.over-width .wrapper ol li:before {
    vertical-align: super;
    font-size: 85%;
    transform: translateX(-150%);
    position: absolute;
}
.cover.over-width .wrapper ol li:nth-child(1):before {
    content: '1';
}
.cover.over-width .wrapper ol li:nth-child(2):before {
    content: '2';
}
.cover.over-width .wrapper ol li:nth-child(3):before {
    content: '3';
}

@media (min-width: 1440px) {
    .cover.over-width .wrapper ol {
        margin-left: 270px;
        font-size: 22px;
        margin-top: 145px;
    }
    .cover.over-width .wrapper ol li {       
        margin-bottom: 8px;
        width: 460px;
    }
}

@media (max-width: 767px) {
    .cover.over-width .wrapper ol {
        font-size: calc(100vw * 14/375);
        margin-top: calc(100vw * 332/375);
        margin-left: 0;
    }
    .cover.over-width .wrapper ol li {       
        margin-bottom: calc(100vw * 5/375);
        width: calc(100vw * 300/375);
    }
}


#biotherm-ampoules-content .cover-detail {
    position: absolute;
    display: flex;
    text-align: center;
    bottom: 0;
    left: calc(50% - (calc(100vw * 880/1440)/2));
    width: calc(100vw *880/1440);
    height: calc(100vw * 350/1440);
    background-color: white;
    color: black;
    align-items: center;
    justify-content: center;
    font-size: calc(100vw * 35/1440);
    z-index: 100;
}

#biotherm-ampoules-content sup {
    font-size: 65%;
}

@media (min-width: 1440px) {
    #biotherm-ampoules-content .cover-detail {
        font-size: 35px;
        left: calc(50% - 440px);
        width: 880px;
        height: 350px;
    }
}

@media (max-width: 767px) {
    #biotherm-ampoules-content .cover-detail {
        font-size: calc(100vw * 23/375);
        left: calc(50% - (calc(100vw * 308/375)/2));
        width: calc(100vw * 308/375);
        height: calc(100vw * 350/375);
    }
}


/* sec1 */
#sec-1 {
    font-family: 'DB-Heavent-li';
    background-color: #11345C;
    color: white;
    text-align: center;
    height: calc(100vw * 772/1440);
    max-width: 1440px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: calc(100vw * 35/1440);
}

@media (min-width: 1440px) {
    #sec-1 {
        height: 772px;
        font-size: 35px;
    }
}

@media (max-width: 767px) {
    #sec-1 {
        height: calc(100vw * 519/375);
        font-size: calc(100vw * 23/375);
    }
}

#sec-1 .logo {
    width: calc(100vw * 561/1440);
    margin-bottom: calc(100vw * 40/1440);
}

@media (min-width: 1440px) {
    #sec-1 .logo {
        width: 561px;
        margin-bottom: 40px;
    }
}

@media (max-width: 767px) {
    #sec-1 .logo {
        width: calc(100vw * 188/375);
        margin-bottom: calc(100vw * 24/375);
    }
}

/* #sec-2 */
#sec-2 {
    z-index: 1;
}

#sec-2.cover {
    background-image: url("https://www.jeban.com/spotlight-item/lifeplankton-ampoules/1440/bg-main.jpg");
    background-repeat: no-repeat;
    background-color: white;
    background-size: 100% auto;
    height: calc(100vw * 2850/1440);
    position: relative;
    text-align: left;
    padding-top: calc(100vw * 40/1440);
}

@media (min-width: 1440px) {
    #sec-2.cover {
        padding-top: 40px;
        background-size: 1440px auto;
        height: 2850px;
    }
}

@media (max-width: 767px) {
    #sec-2.cover {
        height: calc(100vw * 1948/375);
        background-position: center top;
        background-image: url("https://www.jeban.com/spotlight-item/lifeplankton-ampoules/375/bg-main.jpg");
        padding-top: calc(100vw * 36/375);
    }
}

#sec-2 h2 {
    margin-top: calc(100vw * 60/1440);
    text-align: center;
    color: white;
    font-size: calc(100vw * 100/1440);
}

@media (min-width: 1440px) {
    #sec-2 h2 {
        font-size: 100px;
        margin-top: 60px;
    }
}

@media (max-width: 767px) {
    #sec-2 h2 {
        font-size: calc(100vw * 55/375);
    }
}

#sec-2 h3 {
    text-align: center;
    color: white;
    font-size: calc(100vw * 55/1440);
}

@media (min-width: 1440px) {
    #sec-2 h3 {
        font-size: 55px;
    }
}

@media (max-width: 767px) {
    #sec-2 h3 {
        font-size: calc(100vw * 35/375);
    }
}

#sec-2 h4 {
    text-align: center;
    color: white;
    font-size: calc(100vw * 35/1440);

}

@media (min-width: 1440px) {
    #sec-2 h4 {
        font-size: 35px;
    }
}

@media (max-width: 767px) {
    #sec-2 h4 {
        font-size: calc(100vw * 23/375);
        margin-top: calc(100vw * 20/375);
    }
}

#sec-2 h5 {
    text-align: center;
    color: white;
    font-size: calc(100vw * 50/1440);
}

@media (min-width: 1440px) {
    #sec-2 h5 {
        font-size: 50px;
    }
}

@media (max-width: 767px) {
    #sec-2 h5 {
        font-size: calc(100vw * 23/375);
    }
}

#sec-2>div.one {
    display: flex;
    font-size: calc(100vw * 35/1440);
    color: white;
}

@media (min-width: 1440px) {
    #sec-2>div.one {
        font-size: 35px;
    }
}

@media (max-width: 767px) {
    #sec-2>div.one {
        font-size: calc(100vw * 23/375);
        flex-direction: column-reverse;
    }
}

@media (max-width: 767px) {
    #sec-2>div.one div:not(:first-child) {
        margin-bottom: calc(100vw * 20/375);
    }
}

#sec-2 .bubble.one {
    text-align: center;
    background-position: center top;
    background-image: url("https://www.jeban.com/spotlight-item/lifeplankton-ampoules/bg-bubble.png");
    background-size: contain !important;
    background-repeat: no-repeat;
    padding: calc(100vw * 215/1440) calc(100vw * 116/1440);
    line-height: calc(100vw * 45/1440);
    margin-left: calc(100vw * 135/1440);
}

@media (min-width: 1440px) {
    #sec-2 .bubble.one {
        padding: 215px 116px;
        line-height: 45px;
        margin-left: 135px;
    }
}

@media (max-width: 767px) {
    #sec-2 .bubble.one {
        justify-content: center;
        display: flex;
        flex-direction: column;
        width: calc(100vw * 385/375);
        height: calc(100vw * 423/375);
        line-height: calc(100vw * 28/375);
        margin-left: calc(100vw * -45/375);
        margin-top: calc(100vw * -156/375);
        padding-top: calc(100vw * 80/375);
    }
}

#sec-2>div.one picture {
    margin-left: calc(100vw * -88/1440);
    margin-right: calc(100vw * -58/1440);
}

@media (min-width: 1440px) {
    #sec-2>div.one picture {
        margin-left: -88px;
        margin-right: -58px;
    }
}

@media (max-width: 767px) {
    #sec-2>div.one picture {
        display: flex;
        flex-direction: row-reverse;
        padding-right: calc(100vw * 12/375);
        margin-right: calc(100vw * 0/375);
    }
}

#sec-2>div.one img.bub {
    margin-top: calc(100vw * 50/1440);
    height: calc(100vw * 283/1440);

}

@media (min-width: 1440px) {
    #sec-2>div.one img.bub {
        margin-top: 50px;
        height: 283px;
    }
}

@media (max-width: 767px) {
    #sec-2>div.one img.bub {
        margin-top: calc(100vw * 0/375);
        margin-left: calc(100vw * 0/375);
        height: calc(100vw * 128/375);
    }
}




#sec-2>div.two {
    display: flex;
    font-size: calc(100vw * 35/1440);
    color: white;
    flex-direction: row-reverse;
    align-items: center;
    margin-top: calc(100vw * -260/1440);
}

@media (min-width: 1440px) {
    #sec-2>div.two {
        font-size: 35px;
        margin-top: -260px;
    }
}

@media (max-width: 767px) {
    #sec-2>div.two {
        font-size: calc(100vw * 23/375);
        flex-direction: column;
        overflow: hidden;
        padding-left: calc(100vw * 118/375);
    }
}

#sec-2 .bubble.two {
    text-align: center;
    background-position: center top;
    background-image: url("https://www.jeban.com/spotlight-item/lifeplankton-ampoules/bg-bubble.png");
    background-size: contain !important;
    padding: calc(100vw * 190/1440) calc(100vw * 90/1440);
    background-repeat: no-repeat;
    line-height: calc(100vw * 45/1440);
    margin-right: calc(100vw * 175/1440);
    margin-left: calc(100vw * 88/1440);

}

@media (min-width: 1440px) {
    #sec-2 .bubble.two {
        padding: 190px 90px;
        line-height: 45px;
        margin-right: 175px;
        margin-left: 88px;
    }
}

@media (max-width: 767px) {
    #sec-2 .bubble.two {
        width: calc(100vw * 341/375);
        height: calc(100vw * 375/375);
        justify-content: center;
        display: flex;
        flex-direction: column;
        padding-top: calc(100vw * 42/375);
        margin-top: calc(100vw * 20/375);
        line-height: calc(100vw * 28/375);
    }
}

@media (max-width: 767px) {
    #sec-2>div.two picture {
        margin-top: calc(100vw * -94/375);
        margin-left: calc(100vw * -300/375);

    }
}

#sec-2>div.two img.bub {
    margin-top: calc(100vw * 84/1440);
    height: calc(100vw * 283/1440);
    ;

}

@media (min-width: 1440px) {
    #sec-2>div.two img.bub {
        margin-top: 84px;
        height: 283px;
    }
}

@media (max-width: 767px) {
    #sec-2>div.two img.bub {
        margin-top: calc(100vw * 0/375);
        margin-left: calc(100vw * 0/375);
        height: calc(100vw * 116/375);
    }
}

#sec-2 .wrapper h6 {
    font-size: calc(100vw * 45/1440);
    line-height: 1;
    margin-top: calc(100vw * 55/1440);
}

@media (min-width: 1440px) {
    #sec-2 .wrapper h6 {
        font-size: 45px;
        margin-top: 55px;
    }
}

@media (max-width: 767px) {
    #sec-2 .wrapper h6 {
        font-size: calc(100vw * 23/375);
        margin-top: calc(100vw * 34/375);
    }
}

#sec-2 ol.four {
    list-style: none;
    padding-left: 0;

    text-align: left;
    font-style: italic;
    font-size: calc(100vw * 22/1440);
    padding-right: calc(100vw * 10/1440);
    margin-left: calc(100vw * 790/1440);
    margin-bottom: calc(100vw * 40/1440);

    color: white;
}
#sec-2 ol.four li {
    width: calc(100vw * 460/1440);
    opacity: .8;
}
#sec-2 ol.four li:before {
    vertical-align: super;
    font-size: 85%;
    transform: translateX(-150%);
    position: absolute;
}
#sec-2 ol.four li:nth-child(1):before {
    content: '5';
}
#sec-2 ol.four li:nth-child(2):before {
    content: '6';
}

@media (min-width: 1440px) {
    #sec-2 ol.four {
        font-size: 22px;
        padding-right: 10px;
        margin-left: 790px;
        margin-bottom: 40px;
    }
    #sec-2 ol.four li {       
        width: 460px;
    }
}

@media (max-width: 767px) {
    #sec-2 ol.four {
        font-size: calc(100vw * 14/375);
        margin-bottom: calc(100vw * 70/375);
        margin-top: calc(100vw * -48/375);
        margin-left: calc(100vw * 140/375);
        padding-right: unset;
    }
    #sec-2 ol.four li {       
        width: calc(100vw * 300/375);
    }
}

#sec-2 div.three img {
    width: calc(100vw * 336/1440);
    margin-bottom: calc(100vw * -42/1440);
}

@media (min-width: 1440px) {
    #sec-2 div.three img {
        width: 336px;
        margin-bottom: -42px;
    }
}

@media (max-width: 767px) {
    #sec-2 div.three img {
        width: calc(100vw * 150/375);
        margin-bottom: calc(100vw * -42/375);
    }
}

#sec-2 div.three .wrapper {
    z-index: 0;
    color: #011A36;
    text-align: center;
    background: white;
    border: 1px solid #011A36;
    width: calc(100vw * 896/1440);
    padding-top: calc(100vw * 30/1440);

}

@media (min-width: 1440px) {
    #sec-2 div.three .wrapper {
        width: 896px;
        padding-top: 30px;
    }
}

@media (max-width: 767px) {
    #sec-2 div.three .wrapper {
        line-height: 2;
        width: calc(100vw * 320/375);
        padding-top: calc(100vw * 40/375);
    }
}

#sec-2 div.three .btn-user-review {
    color: white;
    background: #11345C;
    transform: translateY(50%);
    font-size: calc(100vw * 36/1440);
    width: calc(100vw * 220/1440);
    height: calc(100vw * 60/1440);
    margin-top: calc(100vw * 20/1440);

    display: flex;
    justify-content: center;
    align-items: center;

    position: relative;
    z-index: 9;
}

@media (min-width: 1440px) {
    #sec-2 div.three .btn-user-review {
        font-size: 36px;
        width: 220px;
    }
}

@media (max-width: 767px) {
    #sec-2 div.three .btn-user-review {
        font-size: calc(100vw * 23/375);
        width: calc(100vw * 145/375);
    }
}

@media (min-width: 1440px) {
    #sec-2 div.three .btn-user-review {
        height: 60px;
        margin-top: 20px;
    }
}

@media (max-width: 767px) {
    #sec-2 div.three .btn-user-review {
        height: calc(100vw * 40/375);
        margin-top: calc(100vw * 10/375);
    }
}

/* sec-4 */
#sec-4 {
    display: flex;
    flex-wrap: wrap;
    background-color: #011A36;
}

#sec-4 div {
    height: calc(100vw * 657/1440);
}

@media (min-width: 1440px) {
    #sec-4 div {
        height: 657px;
    }
}

@media (max-width: 767px) {
    #sec-4 div:first-child {
        width: 100%;
        height: calc(100vw * 378/375);
    }

    #sec-4 div:not(:first-child) {
        width: 100%;
        height: calc(100vw * 290/375);
    }
}

#sec-4 .logo.img-fluid {
    width: calc(100vw * 168/1440);
}

@media (min-width: 1440px) {
    #sec-4 .logo.img-fluid {
        width: 168px;
    }
}

@media (max-width: 767px) {
    #sec-4 .logo.img-fluid {
        width: calc(100vw * 82/375);
    }
}

#sec-4>div {
    text-align: center;
    width: 50%;
    align-items: center;
    display: flex;
    text-align: center;
    justify-content: center;
    background-color: #011A36;
}

@media (max-width: 767px) {
    #sec-4>div {
        width: 100%;
    }
}

#sec-4>div.blue-bg {
    color: white;
    background: #11345C;

}

@media (max-width: 767px) {
    #sec-4>div.blue-bg {
        padding: calc(100vw * 50/375) 0;
    }
}

#sec-4>div h2 {
    font-size: calc(100vw * 48/1440);
}

@media (min-width: 1440px) {
    #sec-4>div h2 {
        font-size: 48px;
    }
}

@media (max-width: 767px) {
    #sec-4>div h2 {
        font-size: calc(100vw * 25/375);
    }
}

#sec-4>div p {
    font-size: calc(100vw * 45/1440);
}

@media (min-width: 1440px) {
    #sec-4>div p {
        font-size: 45px;
    }
}

@media (max-width: 767px) {
    #sec-4>div p {
        font-size: calc(100vw * 23/375);
    }
}

/* sec-5 */
#sec-5.cover {
    background-image: url("https://www.jeban.com/spotlight-item/lifeplankton-ampoules/1440/bg-how-to-use-1.jpg");
    background-repeat: no-repeat;
    background-color: white;
    background-size: 100% auto;
    height: calc(100vw * 876/1440);
    position: relative;
    text-align: left;
    padding-top: calc(100vw * 40/1440);
}

@media (min-width: 1440px) {
    #sec-5.cover {
        height: 876px;
        padding-top: 40px;
        background-size: 1440px auto;
    }
}

@media (max-width: 767px) {
    #sec-5.cover {
        height: calc(100vw * 676/375);
        background-position: center top;
        background-image: url("https://www.jeban.com/spotlight-item/lifeplankton-ampoules/375/bg-how-to-use-1.jpg");
        padding-top: calc(100vw * 36/375);
    }
}

@media (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) {
    #sec-5.cover {
        background-image: url("https://www.jeban.com/spotlight-item/lifeplankton-ampoules/1440/bg-how-to-use-1.jpg");
    }
}

@media (max-width: 767px) and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) {
    #sec-5.cover {
        background-image: url("https://www.jeban.com/spotlight-item/lifeplankton-ampoules/375/bg-how-to-use-1.jpg");
    }
}

#sec-5 .wrapper {
    margin-left: calc(100vw * 220/1440);
}

@media (min-width: 1440px) {
    #sec-5 .wrapper {
        margin-left: 220px;
    }
}

@media (max-width: 767px) {
    #sec-5 .wrapper {
        margin-left: calc(100vw * 30/375);
        margin-bottom: calc(100vw * 18/375);
    }
}

#sec-5 p {
    color: white;
    font-size: calc(100vw * 90/1440);
}

@media (min-width: 1440px) {
    #sec-5 p {
        font-size: 90px;
    }
}

@media (max-width: 767px) {
    #sec-5 p {
        font-size: calc(100vw * 45/375);
    }
}

#sec-5 ol.one {
    color: white;
    list-style-type: none;
    padding: 0;
    padding-left: calc(100vw * 240/1440);
    margin-top: calc(100vw * -12/1440);
}

@media (min-width: 1440px) {
    #sec-5 ol.one {
        padding-left: 240px;
        margin-top: -12px;
    }
}

@media (max-width: 767px) {
    #sec-5 ol.one {
        padding-left: calc(100vw * 85/375);
    }
}

#sec-5 ol.two {
    color: white;
    list-style-type: none;
    padding: 0;
    padding-left: calc(100vw * 532/1440);
}

@media (min-width: 1440px) {
    #sec-5 ol.two {
        padding-left: 532px;
    }
}

@media (max-width: 767px) {
    #sec-5 ol.two {
        padding-left: calc(100vw * 85/375);
    }
}

#sec-5 ol li {
    font-size: calc(100vw * 35/1440);
    position: relative;
}

@media (max-width: 767px) {
    #sec-5 ol li {
        font-size: calc(100vw * 23/375);
        line-height: 1.3;
    }
}

@media (min-width: 1440px) {
    #sec-5 ol li {
        font-size: 35px;
    }
}

#sec-5 ol li hr {
    margin-left: unset;
    background-color: #EDEDED;
    height: 2px;
    width: calc(100vw * 670/1440);
    margin-top: calc(100vw * 40/1440);
    margin-bottom: calc(100vw * 60/1440);
}

@media (min-width: 1440px) {
    #sec-5 ol li hr {
        width: 670px;
        margin-top: 40px;
        margin-bottom: 60px;
    }
}

@media (max-width: 767px) {
    #sec-5 ol.one li hr {
        background-color: #707070;
        height: 2px;
        width: calc(100vw * 272/375);
        margin-top: calc(100vw * 18/375);
        margin-bottom: calc(100vw * 28/375);
        margin-left: calc(100vw * -85/375);
    }

    #sec-5 ol.two li hr {
        margin-left: auto;
        background-color: #707070;
        height: 2px;
        width: calc(100vw * 260/375);
        margin-top: calc(100vw * 18/375);
        margin-bottom: calc(100vw * 28/375);
        margin-right: 0px;
    }
}

#sec-5 ol.one li:before {
    content: "1";
    position: absolute;
    background-color: #011A36;
    width: calc(100vw * 40/1440);
    height: calc(100vw * 40/1440);
    left: calc(100vw * -100/1440);
    font-size: calc(100vw * 30/1440);
    font-family: "DB-Heavent-reg" !important;
    display: flex;
    align-items: center;
    justify-content: center;

}

@media (min-width: 1440px) {
    #sec-5 ol.one li:before {
        font-size: 30px;
        left: -100px;
        width: 40px;
        height: 40px;

    }
}

@media (max-width: 767px) {
    #sec-5 ol.one li:before {
        font-size: calc(100vw * 20/375);
        width: calc(100vw * 26/375);
        height: calc(100vw * 26/375);
        left: calc(100vw * -50/375);
    }
}

#sec-5 ol.one li:nth-child(2):before {
    content: "2";
}

#sec-5 ol.two li:before {
    content: "3";
    position: absolute;
    background-color: #011A36;
    width: calc(100vw * 40/1440);
    height: calc(100vw * 40/1440);
    left: calc(100vw * -100/1440);
    font-size: calc(100vw * 30/1440);
    font-family: "DB-Heavent-reg" !important;
    display: flex;
    align-items: center;
    justify-content: center;

}

@media (min-width: 1440px) {
    #sec-5 ol.two li:before {
        font-size: 30px;
        left: -100px;
        width: 40px;
        height: 40px;

    }
}

@media (max-width: 767px) {
    #sec-5 ol.two li:before {
        width: calc(100vw * 26/375);
        height: calc(100vw * 26/375);
        font-size: calc(100vw * 20/375);
        line-height: calc(100vw * 35/375);
        left: calc(100vw * -50/375);
    }
}

#sec-5 ol li:nth-child(2):before {
    content: "4";
}

#sec-5 ol.one li:not(:last-child) {
    margin-bottom: calc(100vw * 12/1440);
}

@media (min-width: 1440px) {
    #sec-5 ol.one li:not(:last-child) {
        margin-bottom: 12px;
    }
}





/* sec-6 */
#sec-6 {
    background: #011A36;
    display: flex;
    flex-wrap: wrap-reverse;
}

#sec-6 div {
    height: calc(100vw * 607/1440);
}

@media (min-width: 1440px) {
    #sec-6 div {
        height: 607px;
    }
}

@media (max-width: 767px) {
    #sec-6 div:first-child {
        width: 100%;
        height: calc(100vw * 290/375);
    }

    #sec-6 div:not(:first-child) {
        width: 100%;
        height: calc(100vw * 340/375);
    }
}

#sec-6 .logo.img-fluid {
    width: calc(100vw * 165/1440);
    margin-top: calc(100vw * -200/1440);

}

@media (min-width: 1440px) {
    #sec-6 .logo.img-fluid {
        width: 165px;
        margin-top: -200px;
    }
}

@media (max-width: 767px) {
    #sec-6 .logo.img-fluid {
        width: calc(100vw * 82/375);
        margin-top: calc(100vw * -124/375);
    }
}

#sec-6 .img-wrapper {
    z-index: 1;
}

#sec-6>div {
    text-align: center;
    width: 50%;
    align-items: center;
    display: flex;
    text-align: center;
    justify-content: center;
    background-color: #011A36;
}

@media (max-width: 767px) {
    #sec-6>div {
        width: 100%;
    }
}

#sec-6>div.blue-bg {
    color: white;
    background: #11345C;

}

@media (max-width: 767px) {
    #sec-6>div.blue-bg {
        padding: calc(100vw * 50/375) 0;
    }
}

#sec-6>div h2 {
    font-size: calc(100vw * 48/1440);
}

@media (min-width: 1440px) {
    #sec-6>div h2 {
        font-size: 48px;
    }
}

@media (max-width: 767px) {
    #sec-6>div h2 {
        font-size: calc(100vw * 25/375);
    }
}

#sec-6>div p {
    font-size: calc(100vw * 45/1440);
}

@media (min-width: 1440px) {
    #sec-6>div p {
        font-size: 45px;
    }
}

@media (max-width: 767px) {
    #sec-6>div p {
        font-size: calc(100vw * 23/375);
    }
}


/* sec-7 */
#sec-7.cover {
    z-index: -1;
    background-image: url("https://www.jeban.com/spotlight-item/lifeplankton-ampoules/1440/bg-how-to-use-2.jpg");
    background-repeat: no-repeat;
    background-color: white;
    background-size: 100% auto;
    height: calc(100vw * 3223/1440);
    position: relative;
    text-align: left;
    padding-top: calc(100vw * 40/1440);
}

@media (min-width: 1440px) {
    #sec-7.cover {
        height: 3223px;
        padding-top: 40px;
        background-size: 1440px auto;
    }
}

@media (max-width: 767px) {
    #sec-7.cover {
        height: calc(100vw * 2932/375);
        background-position: center top;
        background-image: url("https://www.jeban.com/spotlight-item/lifeplankton-ampoules/375/bg-how-to-use-2.jpg");
        padding-top: calc(100vw * 36/375);
    }
}

@media (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) {
    #sec-7.cover {
        background-image: url("https://www.jeban.com/spotlight-item/lifeplankton-ampoules/1440/bg-how-to-use-2.jpg");
    }
}

@media (max-width: 767px) and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) {
    #sec-7.cover {
        background-image: url("https://www.jeban.com/spotlight-item/lifeplankton-ampoules/375/bg-how-to-use-2.jpg");
    }
}

#sec-7 .wrapper.one {
    margin-left: calc(100vw * 220/1440);
}

@media (min-width: 1440px) {
    #sec-7 .wrapper.one {
        margin-left: 220px;
    }
}

@media (max-width: 767px) {
    #sec-7 .wrapper.one {
        margin-left: calc(100vw * 30/375);
        margin-bottom: calc(100vw * 18/375);
    }
}

#sec-7 .wrapper.two {
    margin-left: calc(100vw * 448/1440);
    margin-top: calc(100vw * 74/1440);
    line-height: 0.9;
}

@media (min-width: 1440px) {
    #sec-7 .wrapper.two {
        margin-left: 448px;
        margin-top: 74px;
    }
}

@media (max-width: 767px) {
    #sec-7 .wrapper.two {
        text-align: center;
        width: 100vw;
        margin-left: calc(100vw * 0/375);
        margin-top: calc(100vw * 104/375);
    }
}

#sec-7 .wrapper.two h5 {
    color: white;
    ;
    font-size: calc(100vw * 73/1440);
}

@media (min-width: 1440px) {
    #sec-7 .wrapper.two h5 {
        font-size: 73px;
    }
}

@media (max-width: 767px) {
    #sec-7 .wrapper.two h5 {
        font-size: calc(100vw * 35/375);
    }
}

#sec-7 p {
    color: white;
    font-size: calc(100vw * 90/1440);
}

@media (min-width: 1440px) {
    #sec-7 p {
        font-size: 90px;
    }
}

@media (max-width: 767px) {
    #sec-7 p {
        font-size: calc(100vw * 45/375);
    }
}

#sec-7 ol.one {
    color: white;
    list-style-type: none;
    padding: 0;
    padding-left: calc(100vw * 240/1440);
    margin-top: calc(100vw * -12/1440);
}

@media (min-width: 1440px) {
    #sec-7 ol.one {
        padding-left: 240px;
        margin-top: -12px;
    }
}

@media (max-width: 767px) {
    #sec-7 ol.one {
        padding-left: calc(100vw * 85/375);
    }
}

#sec-7 ol.two {
    color: white;
    list-style-type: none;
    padding: 0;
    padding-left: calc(100vw * 532/1440);
    line-height: 1.2;
}

@media (min-width: 1440px) {
    #sec-7 ol.two {
        padding-left: 532px;
    }
}

@media (max-width: 767px) {
    #sec-7 ol.two {
        padding-left: calc(100vw * 85/375);
    }
}

#sec-7 ol > li {
    font-size: calc(100vw * 35/1440);
    position: relative;
}

@media (max-width: 767px) {
    #sec-7 ol > li {
        font-size: calc(100vw * 23/375);
        line-height: 1.3;
    }
}

@media (min-width: 1440px) {
    #sec-7 ol > li {
        font-size: 35px;
    }
}

#sec-7 ol.two ul {
    list-style: none;
    padding-left: 0;

    text-align: left;
    font-style: italic;
    font-size: calc(100vw * 22/1440);

    color: white;
}
#sec-7 ol.two ul li {
    opacity: .8;
}
#sec-7 ol.two ul li:before {
    vertical-align: super;
    font-size: 85%;
    transform: translateX(-150%);
    position: absolute;
}
#sec-7 ol.two ul li:nth-child(1):before {
    content: '1';
}
#sec-7 ol.two ul li:nth-child(2):before {
    content: '2';
}
#sec-7 ol.two ul li:nth-child(3):before {
    content: '3';
}
#sec-7 ol.two ul li:nth-child(4):before {
    content: '4';
}

@media (min-width: 1440px) {
    #sec-7 ol.two ul {
        font-size: 22px;
    }
}

@media (max-width: 767px) {
    #sec-7 ol.two ul {
        font-size: calc(100vw * 14/375);
    }
}


#sec-7 ol.two h6 {
    font-size: calc(100vw * 23/1440);
    font-style: italic;
}

@media (min-width: 1440px) {
    #sec-7 ol.two h6 {
        font-size: 23px;
    }
}

@media (max-width: 767px) {
    #sec-7 ol.two h6 {
        font-size: calc(100vw * 12/375);
        padding-left: calc(100vw * 19/375);
    }
}

#sec-7 ol.one li hr {
    margin-left: unset;
    background-color: #EDEDED;
    height: 2px;
    width: calc(100vw * 670/1440);
    margin-top: calc(100vw * 46/1440);
    margin-bottom: calc(100vw * 52/1440);
}

@media (min-width: 1440px) {
    #sec-7 ol.one li hr {
        width: 670px;
        margin-top: 46px;
        margin-bottom: 52px;

    }
}

@media (max-width: 767px) {
    #sec-7 ol.one li hr {
        background-color: #707070;
        height: 2px;
        width: calc(100vw * 272/375);
        margin-top: calc(100vw * 18/375);
        margin-bottom: calc(100vw * 24/375);
        margin-left: calc(100vw * -85/375);
    }
}

#sec-7 ol.two li hr {
    margin-left: unset;
    background-color: #EDEDED;
    height: 2px;
    width: calc(100vw * 670/1440);
    margin-top: calc(100vw * 42/1440);
    margin-bottom: calc(100vw * 25/1440);
}

@media (min-width: 1440px) {
    #sec-7 ol.two li hr {
        width: 670px;
        margin-top: 42px;
        margin-bottom: 25px;
    }
}

@media (max-width: 767px) {
    #sec-7 ol.two li hr {
        margin-left: auto;
        background-color: #707070;
        height: 2px;
        width: calc(100vw * 272/375);
        margin-top: calc(100vw * 18/375);
        margin-bottom: calc(100vw * 28/375);
        margin-right: 0px;
    }
}

#sec-7 ol.one > li:before {
    content: "1";
    position: absolute;
    background-color: #011A36;
    width: calc(100vw * 40/1440);
    height: calc(100vw * 40/1440);
    left: calc(100vw * -100/1440);
    font-size: calc(100vw * 30/1440);
    font-family: "DB-Heavent-reg" !important;
    display: flex;
    align-items: center;
    justify-content: center;

}

@media (min-width: 1440px) {
    #sec-7 ol.one > li:before {
        font-size: 30px;
        left: -100px;
        width: 40px;
        height: 40px;

    }
}

@media (max-width: 767px) {
    #sec-7 ol.one > li:before {
        font-size: calc(100vw * 20/375);
        width: calc(100vw * 26/375);
        height: calc(100vw * 26/375);
        left: calc(100vw * -50/375);
    }
}

#sec-7 ol.one li:nth-child(2):before {
    content: "2";
}

#sec-7 ol.two > li:before {
    content: "3";
    position: absolute;
    background-color: #011A36;
    width: calc(100vw * 40/1440);
    height: calc(100vw * 40/1440);
    left: calc(100vw * -100/1440);
    font-size: calc(100vw * 30/1440);
    font-family: "DB-Heavent-reg" !important;
    display: flex;
    align-items: center;
    justify-content: center;

}

@media (min-width: 1440px) {
    #sec-7 ol.two > li:before {
        font-size: 30px;
        left: -100px;
        width: 40px;
        height: 40px;

    }
}

@media (max-width: 767px) {
    #sec-7 ol.two > li:before {
        width: calc(100vw * 26/375);
        height: calc(100vw * 26/375);
        font-size: calc(100vw * 20/375);
        line-height: calc(100vw * 35/375);
        left: calc(100vw * -50/375);
    }
}

#sec-7 ol > li:nth-child(2):before {
    content: "4";
}

#sec-7 ol > li:not(:last-child) {
    margin-bottom: calc(100vw * 12/1440);
}

@media (min-width: 1440px) {
    #sec-7 ol > li:not(:last-child) {
        margin-bottom: 12px;
    }
}


#sec-7 .step {
    display: inline-flex;
    align-items: center;
}

@media (max-width: 767px) {
    #sec-7 .step {
        flex-direction: column;
    }
}

#sec-7 .content-wrapper {
    background-color: white;
    color: white;
    position: relative;
    padding: calc(100vw * 50/1440) calc(100vw * 60/1440);
}

@media (min-width: 1440px) {
    #sec-7 .content-wrapper {
        padding: 50px 60px;
    }
}

@media (max-width: 767px) {
    #sec-7 .content-wrapper {
        padding: calc(100vw * 24/375) calc(100vw * 12/375);
    }
}

#sec-7 .content-wrapper h3 {
    background-color: #11345C;
    font-family: "DB-Heavent-reg" !important;
    font-size: calc(100vw * 45/1440);
    width: calc(100vw * 120/1440);
    height: calc(100vw * 55/1440);
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    left: -1px;
    transform: translateY(calc(-100% - 1px));
}

@media (min-width: 1440px) {
    #sec-7 .content-wrapper h3 {
        font-size: 45px;
        width: 120px;
        height: 55px;
    }
}

@media (max-width: 767px) {
    #sec-7 .content-wrapper h3 {
        width: calc(100vw * 68/375);
        height: calc(100vw * 34/375);
        font-size: calc(100vw * 23/375);
    }
}

#sec-7 .content-wrapper p {
    font-family: "DB-Heavent-li" !important;
    font-size: calc(100vw * 35/1440);
    line-height: 1.2;
    text-align: left;
    color: #11345C;
}

@media (min-width: 1440px) {
    #sec-7 .content-wrapper p {
        font-size: 35px;
    }
}

@media (max-width: 767px) {
    #sec-7 .content-wrapper p {
        font-size: calc(100vw * 23/375);
    }
}

/* step1 */
#sec-7 .step.one {
    width: 100%;
    position: relative;
    z-index: 9;

}

#sec-7 .step.one .image img {
    height: calc(100vw * 633/1440);
    padding-left: calc(100vw * 46/1440);
    padding-right: calc(100vw * 42/1440);
}

@media (min-width: 1440px) {
    #sec-7 .step.one .image img {
        height: 633px;
        padding-left: 46px;
        padding-right: 42px;
    }
}

@media (max-width: 767px) {
    #sec-7 .step.one .image img {
        height: calc(100vw * 290/375);
        padding: 0px;

    }
}

#sec-7 .step.one {
    width: 100%;
    position: relative;
    z-index: 9;

}

#sec-7 .step.one .content-wrapper {
    text-align: center;
    line-height: 1;
    font-size: calc(100vw * 45/1440);
    margin-left: calc(100vw * -80/1440);
    margin-top: calc(100vw * 0/1440);
}

@media (min-width: 1440px) {
    #sec-7 .step.one .content-wrapper {
        font-size: 45px;
    }
}

@media (max-width: 767px) {
    #sec-7 .step.one .content-wrapper {
        font-size: 45px;
        margin-left: calc(100vw * 0/375);
    }
}

/* step2 */
#sec-7 .step.two {
    width: 100%;
    position: relative;
    z-index: 9;
    flex-direction: row-reverse;
    margin-top: calc(100vw * -130/1440);

}

@media (min-width: 1440px) {
    #sec-7 .step.two {
        margin-top: -130px;
    }
}

@media (max-width: 767px) {
    #sec-7 .step.two {
        margin-top: calc(100vw * 52/375);
        flex-direction: column;
    }
}

#sec-7 .step.two .image img {
    height: calc(100vw * 441/1440);
    padding-left: calc(100vw * 50/1440);
    padding-right: calc(100vw * 164/1440);
}

@media (min-width: 1440px) {
    #sec-7 .step.two .image img {
        height: 441px;
        padding-left: 50px;
        padding-right: 164px;
    }
}

@media (max-width: 767px) {
    #sec-7 .step.two .image img {
        height: calc(100vw * 207/375);
        padding: 0px;
        margin-bottom: calc(100vw * 54/375);
    }
}

#sec-7 .step.two .content-wrapper {
    width: calc(100vw * 650/1440);
    text-align: center;
    line-height: 1;
    font-size: calc(100vw * 45/1440);
}

@media (min-width: 1440px) {
    #sec-7 .step.two .content-wrapper {
        width: 650px;
        ;
        font-size: 45px;

    }
}

@media (max-width: 767px) {
    #sec-7 .step.two .content-wrapper {
        width: unset;
        font-size: 45px;
        margin-left: calc(100vw * 0/375);
    }
}

/* step3 */
#sec-7 .step.three {
    width: 100%;
    position: relative;
    z-index: 9;

}

@media (max-width: 767px) {
    #sec-7 .step.three {
        margin-top: calc(100vw * 35/375);
    }
}

#sec-7 .step.three .image img {
    height: calc(100vw * 456/1440);
    padding-left: calc(100vw * 222/1440);
    padding-right: calc(100vw * 50/1440);
}

@media (min-width: 1440px) {
    #sec-7 .step.three .image img {
        height: 456px;
        padding-left: 222px;
        padding-right: 50px;
    }
}

@media (max-width: 767px) {
    #sec-7 .step.three .image img {
        height: calc(100vw * 250/375);
        padding: 0px;
        margin-bottom: calc(100vw * 56/375);
    }
}

#sec-7 .step .content-wrapper {
    text-align: center;
    line-height: 1;
    font-size: calc(100vw * 45/1440);
    margin-top: calc(100vw * 0/1440);
}

@media (min-width: 1440px) {
    #sec-7 .step .content-wrapper {
        font-size: 45px;
    }
}

@media (max-width: 767px) {
    #sec-7 .step .content-wrapper {
        font-size: 45px;
        margin-left: calc(100vw * 0/375);
    }
}

/* step4 */
#sec-7 .step.four {
    width: 100%;
    position: relative;
    z-index: 9;
    flex-direction: row-reverse;

}

@media (max-width: 767px) {
    #sec-7 .step.four {
        margin-top: calc(100vw * 16/375);
        flex-direction: column;
    }
}

#sec-7 .step.four .image img {
    height: calc(100vw * 377/1440);
    padding-left: calc(100vw * 62/1440);
    padding-right: calc(100vw * 350/1440);
}

@media (min-width: 1440px) {
    #sec-7 .step.four .image img {
        height: 377px;
        padding-left: 62px;
        padding-right: 350px;
    }
}

@media (max-width: 767px) {
    #sec-7 .step.four .image img {
        height: calc(100vw * 206/375);
        padding: 0px;
        margin-bottom: calc(100vw * 40/375);
    }
}

#sec-7 .step.four .content-wrapper {
    width: calc(100vw * 412/1440);
    text-align: center;
    line-height: 1;
    font-size: calc(100vw * 45/1440);
    margin-left: calc(100vw * -80/1440);
    margin-top: calc(100vw * 0/1440);
}

@media (min-width: 1440px) {
    #sec-7 .step.four .content-wrapper {
        width: 412px;
        ;
        font-size: 45px;
    }
}

@media (max-width: 767px) {
    #sec-7 .step.four .content-wrapper {
        width: unset;
        font-size: 45px;
    }
}

/* / */



#sec-7 .end {
    display: flex;
    align-items: center;
    flex-direction: column;
    color: white;
    margin-top: calc(100vw * 84/1440);
}

@media (min-width: 1440px) {
    #sec-7 .end {
        margin-top: 84px;
    }
}

@media (max-width: 767px) {
    #sec-7 .end {
        margin-top: calc(100vw * 104/375);
    }
}

#sec-7 .end h2 {
    font-size: calc(100vw * 80/1440);
}

@media (min-width: 1440px) {
    #sec-7 .end h2 {
        font-size: 80px;
    }
}

@media (max-width: 767px) {
    #sec-7 .end h2 {
        font-size: calc(100vw * 45/375);
    }
}

#sec-7 .end h3 {
    font-size: calc(100vw * 60/1440);
}

@media (min-width: 1440px) {
    #sec-7 .end h3 {
        font-size: 60px;
    }
}

@media (max-width: 767px) {
    #sec-7 .end h3 {
        font-size: calc(100vw * 30/375);
    }
}

/* sec-8 */
#sec-8 {
    background-color: #011A36;
    color: white;
    height: calc(100vw * 474/1440);
    padding-top: calc(100vw * 32/1440)
}

@media (min-width: 1440px) {
    #sec-8 {
        height: 474px;
        padding-top: 32px;
    }
}

@media (max-width: 767px) {
    #sec-8 {
        height: calc(100vw * 432/375);
    }
}

#sec-8 .wrapper {
    display: flex;
    flex-flow: row;
    width: calc(100vw * 900/1440);
}

@media (min-width: 1440px) {
    #sec-8 .wrapper {
        width: 900px;
    }
}

@media (max-width: 767px) {
    #sec-8 .wrapper {
        flex-flow: column;
        flex-flow: wrap-reverse;
        width: calc(100vw * 320/375);
    }
}

#sec-8 .wrapper h2 {
    font-size: calc(100vw * 90/1440)
}

@media (min-width: 1440px) {
    #sec-8 .wrapper h2 {
        font-size: 90px;
    }
}

@media (max-width: 767px) {
    #sec-8 .wrapper h2 {
        font-size: calc(100vw * 45/375)
    }
}

#sec-8 .wrapper h3 {
    font-size: calc(100vw * 35/1440);
}

@media (min-width: 1440px) {
    #sec-8 .wrapper h3 {
        font-size: 35px;
    }
}

@media (max-width: 767px) {
    #sec-8 .wrapper h3 {
        font-size: calc(100vw * 23/375);
    }
}

#sec-8 .wrapper h4 {
    font-size: calc(100vw * 60/1440);
    height: calc(100vw * 63/1440);
    width: calc(100vw * 180/1440);
    border: 1px solid white;
    margin: calc(100vw * 20/1440) 0;
}

@media (min-width: 1440px) {
    #sec-8 .wrapper h4 {
        width: 180px;
        font-size: 60;
        margin: 20px 0;
    }
}

@media (max-width: 767px) {
    #sec-8 .wrapper h4 {
        height: calc(100vw * 40/375);
        width: calc(100vw * 108/375);
        font-size: calc(100vw * 35/375);
        margin: calc(100vw * 20/375) 0;

    }
}

#sec-8 .logo.img-fluid {
    width: calc(100vw * 300/1440);
    margin-left: calc(100vw * 90/1440);
    z-index: 1;
}

@media (min-width: 1440px) {
    #sec-8 .logo.img-fluid {
        width: 300px;
        margin-left: 90px;
    }
}

@media (max-width: 767px) {
    #sec-8 .logo.img-fluid {
        width: calc(100vw * 130/375);
        margin-top: calc(100vw * -42/375);
        margin-bottom: calc(100vw * 20/375);
        margin-left: auto;
    }
}