@charset "UTF-8";

/********* 表單(*)必要欄位_此段文字隱藏*******/
.c-form__legend {
    display: none;
}

/*共用頁面框架調整-----*/
.l-content__container {
    padding-right: 0;
    padding-left: 0;
    /*讓content撐到100%滿，左右不留白*/
}

.l-content__title {
    display: none;
    /*隱藏頁面h1標題*/
}

.c-breadcrumbs__list {
    display: none;
    /*隱藏頁面所在位置指引*/
}

.l-content__main-top {
    margin: 0;
    padding: 0;
    /*調整多餘空白區塊*/
}

@media screen and (min-width: 64em) {
    .l-content__main-container {
        margin-left: 0;
        margin-right: 0;
    }

    .l-content__main-top {
        padding: 0;
        margin: 0;
        /*調整多餘空白區塊*/
    }
}

/*-----共用頁面框架調整*/

/*common*/

.btn {
    color: #fff !important;
    outline: 0;
    transition: all 0.5s ease;
    font-weight: 400;
    padding: 23px 0;
    width: 270px;
    margin: 0;
    font-size: 30px;
    font-weight: 400;
    line-height: 100%;
    letter-spacing: 0.2rem;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    border-radius: 0;
    border: 1px solid #fff;
    background-color: #000;
    display: block;
}

.btn:hover,
.btn:focus,
.btn:active {
    border: 1px solid #000 !important;
    color: #000 !important;
    background: #fff !important;
}

span.adjust {
    position: absolute;
    display: block;
    z-index: 1;
    width: 100px;
    top: -135px;
}

@media screen and (max-width: 800px) {

    /* .btn {
        padding: 3.0667vw 0;
        width: 36vw;
        font-size: 4vw;
    }*/

    .btn {
        padding: 2.6vw 3vw;
        font-size: 4.6vw;
        max-width: none;
        width: 35vw;
    }

}

@media screen and (max-width: 500px) {
    span.adjust {
        position: absolute;
        display: block;
        z-index: 1;
        width: 100px;
        top: -130px;
    }


}

.shine-btn {
    transition: all 0.5s ease;
    position: relative;
    overflow: hidden;
    vertical-align: middle;
}

.shine-btn:before {
    content: '';
    background: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 25%, white 50%, rgba(255, 255, 255, 0) 80%, rgba(255, 255, 255, 0) 100%);
    background: linear-gradient(-45deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 25%, white 50%, rgba(255, 255, 255, 0) 80%, rgba(255, 255, 255, 0) 100%);
    position: absolute;
    top: -50%;
    left: 0;
    width: 100%;
    height: 350%;
    filter: blur(10px);
    -webkit-transition: 1s;
    transition: 1s;
    animation: btn-shine 5s ease 1s infinite;
}

@keyframes btn-shine {
    0% {
        transform: translateX(-150%) skewX(-205deg);
        opacity: 1;
    }

    80% {
        transform: translateX(200%) skewX(-205deg);
        opacity: 1;
    }

    100% {
        transform: translateX(200%) skewX(-205deg);
        opacity: 0;
    }
}

/****** 新增漸層活字大標 ******/

.color-text {
    background: linear-gradient(to right,
            #310254 0%,
            /* 深色起點 */
            #310254 35%,
            /* 延長深色範圍，佔比 35% */
            #a157d8 45%,
            /* 快速過渡到亮紫（高光點 1） */
            #b82374 50%,
            /* 桃紅轉折 */
            #a157d8 55%,
            /* 快速回到亮紫（高光點 2） */
            #310254 65%,
            /* 回到深色 */
            #310254 100%
            /* 剩下的都是深色 */
        );
    /* 將背景縮小到 200%，讓深色區塊更紮實 */
    background-size: 200% 100%;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;

    /* 動態時間拉長，讓深色停留感更久 */
    animation: colorText 8s ease-in-out infinite;
}

@keyframes colorText {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}


/*///////////////////////////*/

.lan-wrapper {
    font-family: "微軟正黑體", "Microsoft JhengHei", "Noto Serif", serif, sans-serif;
    width: 100%;
    /*max-width: 1280px;*/
    display: block;
    margin: 0 auto;
    clear: both;
    overflow: hidden;
}

.mobile-only {
    max-width: 750px;
}

section {
    margin: 0 auto;
    width: 100%;
    clear: both;
    position: relative;
    display: block;
}

* {
    box-sizing: border-box;
}

.lan-wrapper sub,
.lan-wrapper sup {
    font-size: 65%;
    line-height: 0 !important;
    position: relative;
    vertical-align: baseline;
    font-weight: 300;
}

.lan-wrapper h2 sup,
.lan-wrapper h3 sup {
    font-size: 40%;
    vertical-align: super;
    margin-left: -0.5%;
    top: -0.5em;
    color: #310254;
}


.lan-wrapper img {
     width:100%;
    max-width: 100%;
    display: block;
}

.lan-wrapper ul {
    margin: 0;
    padding: 0;
}

.lan-wrapper ul li {
    list-style-type: disc;
    list-style-position: inside;
    line-height: 1.6;
    letter-spacing: 0.7;
}

.lan-wrapper .white {
    color: #fff;
}

.lan-wrapper .black {
    color: #000;
}

.lan-wrapper .purple {
    color: #6f2f9f;
}

.lan-wrapper .bold {
    font-weight: 600;
}

.lan-wrapper .skew {
    font-weight: 600;
    transform: skewX(-15deg);
    -webkit-transform: skewX(-15deg);
    -moz-transform: skewX(-15deg);
    -ms-transform: skewX(-15deg);
    -o-transform: skewX(-15deg);
}

.text-shadow-w {
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
}

.text-shadow-b {
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
}

/* 字級 */

.lan-wrapper h2 {
    font-family: "微軟正黑體", "Microsoft JhengHei", "Noto Serif", serif, sans-serif;
    font-size: 58px;
    text-align: center;
    margin: auto;
}

.lan-wrapper h3 {
    font-family: "微軟正黑體", "Microsoft JhengHei", "Noto Serif", serif, sans-serif;
    font-size: 40px;
    text-align: center;
    margin: auto;
}

.lan-wrapper h4 {
    font-family: "微軟正黑體", "Microsoft JhengHei", "Noto Serif", serif, sans-serif;
    font-size: 38px;
}

.lan-wrapper h5 {
    font-family: "微軟正黑體", "Microsoft JhengHei", "Noto Serif", serif, sans-serif;
    font-size: 32px;
}

.lan-wrapper h6 {
    font-family: "微軟正黑體", "Microsoft JhengHei", "Noto Serif", serif, sans-serif;
    font-size: 28px;
}

.lan-wrapper p {
    font-size: 28px;
    line-height: 1.6;
    text-align: center;
}

.lan-wrapper p small {
    font-size: 89%;
}

.MillerDisplay,
.MillerDisplay-L {
    font-size: 110%
}

@media (max-width: 820px) {

    .lan-wrapper h2 {
        font-size: 8vw;
    }

    .lan-wrapper h3 {
        font-size: 5.4vw;
    }

    .lan-wrapper h4 {
        font-size: 5.3vw;
    }

    .lan-wrapper h5 {
        font-size: 4.4vw;
    }

    .lan-wrapper h6 {
        font-size: 3.8vw;
    }

    .lan-wrapper p {
        font-size: 3.7vw;
    }

}

/*///////////////////////////*/

.btn-wrap {
    display: flex;
    justify-content: center;
    position: absolute;
    width: 100%;
    z-index: 1;
    left: 0;
}

/*區塊共用標題設定*/

.sec-title {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    text-align: center;
    /*text-shadow: 0px 0px 35px rgba(255, 255, 255, 0.9);*/
    margin: 0 auto;
}

.sec-title h2 {
    position: relative;
    width: fit-content;
}

.sec-title h2:after {
    position: absolute;
    content: '';
    width: 110%;
    height: 1px;
    background: linear-gradient(to right, rgba(39, 1, 22, 0) 0%, rgba(184, 35, 166, 1) 10%, rgba(161, 87, 216, 1) 90%, rgba(39, 1, 22, 0) 100%);
    left: 0;
    right: 0;
    bottom: -0.1em;
    margin: auto;
    margin-left: -5%;
    z-index: 0;
}

.sec-title h2.second:after {
    top: -1.8em;
    margin-left: -5%;
}

.sec-title h3 {
    margin: 0.4em auto 0.7em;
}

.note {
    position: absolute;
    width: 90%;
    margin: 0 auto;
    left: 0;
    right: 0;
    text-align: justify;
    font-size: 14px;
    line-height: 1.4;
}

@media (max-width: 800px) {
    .note {
        font-size: 2.2vw;
    }

}


/*/////////////S1//////////////*/

.s1 .sec-title {
    top: 12.5%;
}

.s1 .intro {
    position: absolute;
    top: 44%;
    right: 1.5%;
    text-align: center;
}

.s1 .intro .number {
    font-size: 70px;
    margin-bottom: -3%;
}

.s1 .intro .number sup {
    font-size: 20%;
    font-weight: 300;
    vertical-align: top;
    margin-top: 30%;
    margin-left: 2%;
    display: inline-block;
}

.s1 .intro .number small {
    font-size: 50%;
    font-weight: 600;
    margin-left: -10%;
}

.s1 .intro .number:nth-of-type(2) {
    margin-top: 7%;
}

.s1 .intro .label {
    position: relative;
    width: fit-content;
    display: block;
    padding: 2px 0 4px;
    line-height: 1;
    margin: 0 auto 5%;
}

.s1 .intro .label:after {
    position: absolute;
    content: '';
    width: 110%;
    height: 1px;
    background: linear-gradient(to right, rgba(86, 38, 137, 0) 0%, rgba(86, 38, 137, 10) 10%, rgba(86, 38, 137, 10) 90%, rgba(86, 38, 137, 0) 100%);
    left: 0;
    right: 0;
    bottom: -0.2em;
    margin: auto;
    margin-left: -5%;
    z-index: 0;
}

.s1 .intro .label:before {
    position: absolute;
    content: '';
    width: 110%;
    height: 1px;
    background: linear-gradient(to right, rgba(86, 38, 137, 0) 0%, rgba(86, 38, 137, 10) 10%, rgba(86, 38, 137, 10) 90%, rgba(86, 38, 137, 0) 100%);
    left: 0;
    right: 0;
    top: -0.2em;
    margin: auto;
    margin-left: -5%;
    z-index: 0;
}

.s1 .intro .label small span {
    font-size: 90%;
}

.s1 .intro p {
    text-align: center;
    width: fit-content;
    line-height: 1.2;
    margin: 0 auto;
    font-weight: 600;
}

.s1 .btn-wrap {
    top: 82%;
}

.s1 .btn-wrap a {
    margin: 0 2%;
}

.s1 .note {
    bottom: 3em;
}

@media (max-width: 800px) {

    .s1 .intro .label {
        padding: 0.5vw 0;
        margin: 0 auto 1vw;
    }

    .s1 .intro .number {
        font-size: 11vw;
        margin-bottom: -3vw;
    }

    .s1 .intro .number:nth-of-type(2) {
        margin-top: 0;
    }

    .s1 .note {
        bottom: 4vw;
    }


}

/*/////////////S2//////////////*/

.s2 .sec-title {
    top: 5.5%;
}

.s2-content {
    position: absolute;
    top: 30%;
    left: 5%;
    width: fit-content;
    text-align: center;
}

.s2-content h6 {
    font-weight: 400;
    line-height: 1.7;
}

.s2 h6 .larger {
    font-size: 120%;
}


/*/////////////Menu//////////////*/

.lan-wrapper .menu {
    width: 100%;
    height: 7em;
    padding: 20px 0;
    display: flex;
    justify-content: space-between;
}

.lan-wrapper .menu a {
    font-family: "微軟正黑體", "Microsoft JhengHei", "Noto Serif", serif, sans-serif;
    font-size: 32px;
    letter-spacing: 0.1em;
    color: #000;
    text-decoration: none;
    border-right: #000 1px solid;
    padding: 0 0.5em;
}

.lan-wrapper .menu a:last-child {
    border-right: none;
}

@media (max-width: 820px) {

    .lan-wrapper .menu {
        height: 12vw;
        padding: 3vw 0;
    }

    .lan-wrapper .menu a {
        font-size: 4.4vw;
    }
}

/*/////////////S3//////////////*/

.s3 .sec-title {
    top: 5%;
}

.s3-content {
    position: absolute;
    top: 21%;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 90%;
    text-align: center;
}

.s3-content h6 {
    font-weight: 400;
    line-height: 1.7;
    text-align: center;
    margin-bottom: 6%;
}

.s3 .s3-content .ingredient {
    margin: 0 auto;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 5%;
}

.s3 .s3-content .ingredient .ingredient-pic {
    flex: 0 0 38.3%;
}

.s3 .s3-content .ingredient .ingredient-text {
    text-align: left;
    padding-left: 3%;
}

.s3 .s3-content .ingredient .ingredient-text .label {
    background-color: rgba(53, 4, 92, 0.6);
    border-radius: 10em;
    padding: 0.1em 0.7em;
    width: fit-content;
    margin: 0;
    margin-left: -1%;
    color: #fff;
    font-weight: 400;
}

.s3 .s3-content .ingredient .ingredient-text h3,
.s3 .s3-content .ingredient .ingredient-text h4,
.s3 .s3-content .ingredient .ingredient-text h5 {
    margin: 0;
}

.s3 .s3-content .ingredient .ingredient-text h3 {
    margin-top: 0.2em;
    text-align: left;
}

.s3 .s3-content .ingredient .ingredient-text h3 .larger {
    font-size: 110%;
}

/*/////////////S4//////////////*/

.s4 .sec-title {
    top: 5%;
}

.s4-content {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0 auto;
    padding-top: 17%;
    width: 100%;
    height: 100%;
    text-align: center;
}

.s4-content .ingredient {
    position: absolute;
    width: fit-content;
    width: 20.6%;
    will-change: transform, top, opacity;
}

.s4-content .ingredient img {
    mix-blend-mode: screen;
    width: 100%;
}

.s4-content .ingredient:after {
    content: "";
    background-color: rgba(54, 3, 95, 0.5);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 96%;
    height: 96%;
    border-radius: 50%;
    z-index: 0;
}

.s4-content .ingredient h5 {
    color: #fff;
    font-weight: 600;
    z-index: 1;
    position: absolute;
    top: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.s4-content .ingredient.ingred01 {
    top: 77%;
    left: 17%;
}

.s4-content .ingredient.ingred02 {
    top: 77%;
    left: 39%;
}

.s4-content .ingredient.ingred03 {
    top: 74%;
    left: 71%;
}

.s4-content h3 {
    position: absolute;
    text-align: center;
    width: fit-content;
    color: #fff;
    text-shadow: 0 0 15px rgba(50, 11, 81, 0.9);
    font-weight: 600;
}

.s4-content h3 .larger {
    font-size: 110%;
}

.s4-content h3.effect01 {
    top: 66%;
    left: 27.5%;
}

.s4-content h3.effect02 {
    top: 65%;
    left: 69%;
}

.s4-content .ingredient,
.s4-content h3 {
    opacity: 0;
    /* 預設隱藏 */
    transition: opacity 0.3s;
}


/**********animation***********/

/* 掃描光線：從上到下掃過 */
@keyframes scanLightDown {
    0% {
        top: -200px;
        opacity: 1;
    }

    30% {
        top: 0px;
        opacity: 1;
    }

    70% {
        top: 100%;
        opacity: 1;
    }

    100% {
        top: 120%;
        opacity: 0;
    }
}


/* 成分球出現並下降 */
@keyframes step1InAndDown {
    0% {
        opacity: 0;
        top: 0;
    }

    100% {
        opacity: 0.5;
        top: 77%;
    }

}

/* 成分球出現並下降再上升*/
@keyframes step2InAndDown {
    0% {
        opacity: 0;
        top: 0;
    }

    43% {
        opacity: 0.5;
        top: 77%;
    }

    75% {
        top: 77%;
    }

    100% {
        opacity: 0.5;
        top: 74%;
    }

}


/* 文字上升與浮出效果 */
@keyframes step3FadeInAndFloatUp {
    0% {
        opacity: 0;
        top: 100%;
    }

    100% {
        opacity: 1;
        top: 66%;
    }
}

@keyframes step4FadeInAndFloatUp {
    0% {
        opacity: 0;
        top: 100%;
    }

    100% {
        opacity: 1;
        top: 65%;
    }
}

/* 圓球原地微幅飄移 2px */
@keyframes floatCircles {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-4px);
        /* 向上飄一點 */
    }

    100% {
        transform: translateY(0);
    }
}

/* --- 1. 基礎位置設定 (不放動畫) --- */
.s4-content .ingredient.ingred01 {
    top: 77%;
    left: 17%;
}

.s4-content .ingredient.ingred02 {
    top: 77%;
    left: 39%;
}

.s4-content .ingredient.ingred03 {
    top: 74%;
    left: 71%;
}

/* --- 2. 當滑動到區域時 (.is-active)，觸發動畫 --- */

/* 膠原 & 藍銅 (Step 1) */
.s4-content.is-active .ingred01 {
    animation:
        step1InAndDown 3.5s ease-out 0.5s forwards,
        floatCircles 2.3s ease-in-out infinite 4s;
    /* 下降完(0.5+3.5=4)開始飄 */
}

.s4-content.is-active .ingred02 {
    animation:
        step1InAndDown 3.5s ease-out 0.5s forwards,
        floatCircles 2.6s ease-in-out infinite 4s;
    /* 飄移速度稍微不同更自然 */
}

/* 膠原網絡 (Step 2) */
.s4-content.is-active .ingred03 {
    animation:
        step2InAndDown 5s ease-out 0.8s forwards,
        floatCircles 1.8s ease-in-out infinite 5.8s;
    /* 下降完(0.8+5=5.8)開始飄 */
}

/* 文字上升 (Step 3 & 4) */
.s4-content.is-active .step-3-up {
    animation: step3FadeInAndFloatUp 2.5s ease-out 2s forwards;
}

.s4-content.is-active .step-4-up {
    animation: step4FadeInAndFloatUp 2s ease-out 3s forwards;
}



/*/////////////S5//////////////*/

.s5 .sec-title {
    top: 5%;
}

.s5-content {
    position: absolute;
    top: 21%;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 100%;
    text-align: center;
}

.s5-content .ba_wrap {
    position: relative;
}

.s5-content .ba_wrap div:nth-of-type(2) {
    position: absolute;
    top: 0;
    left: 0;
}

.s5 .btn-wrap {
    top: 85%;
}

.s5 .note {
    bottom: 3em;
}

@media (max-width: 800px) {
    .s5 .note {
        bottom: 4vw;
    }

}


/*/////////////S6 qa//////////////*/

.s6_qa {
    background-repeat: no-repeat;
}

.s6_qa {
    background-image: url(../images/img_08.jpg);
    background-size: 100%;
    background-position: bottom center;
    padding: 0 8% 25%;
}

.s6_qa .sec-title {
    position: relative;
    margin: 10% auto;
}

.s6_qa a.btn {
    margin: 40px auto 0;
}

.q_wrapper {
    background-color: rgba(255, 255, 255, 0.5);
    border: 1px solid #790a45;
    border-radius: 0 15px 0 15px;
    overflow: hidden;
    margin-top: 2.5%;
}

.q_wrapper .question {
    display: flex;
    align-items: flex-start;
    padding: 1% 3.5% 2%;
    text-align: left;
}

.q_wrapper .question h6 {
    width: 95%;
    display: inline-block;
    margin: 0;
    font-size: 36px;
    font-weight: bold;
    display: flex;
    align-items: self-start;
}

.q_wrapper .question h6 small {
    padding-top: 20px;
    padding-left: 10px;
    line-height: inherit;
}

.q_wrapper .answer {
    display: none;
}

.q_wrapper.active .answer {
    display: block;
    -webkit-animation: fadeInUp 1s ease both;
    animation: fadeInUp 1s ease both;
    animation-delay: 0s;
    -webkit-animation-delay: 0s;
}

.fadeInUp {
    -webkit-transition: all 1s ease;
    -o-transition: all 1s ease;
    -moz-transition: all 1s ease;
    transition: all 1s ease
}

@-webkit-keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-30px);
        transform: translateY(-30px);
    }

    to {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-30px);
        transform: translateY(-30px);
    }

    to {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

.q_wrapper .answer p {
    padding: 0% 5% 2% 4.5%;
    font-size: 25px;
    line-height: 1.6;
    text-align: justify;
}

.q_wrapper .answer p.note {
    font-size: 20px;
}

.q_wrapper .question h6 .FtraMd {
    font-size: 52px;
    color: transparent;
    background-image: linear-gradient(90deg, #4a0280 0%, #b82374 50%, #4a0280 100%);
    -webkit-background-clip: text;
}

.question:hover .button-icon {
    -webkit-transform: translate3d(0, 0, 0) rotate(180deg);
    transform: translate3d(0, 0, 0) rotate(180deg);
}

.question .button-icon {
    position: relative;
    padding: 0;
    margin: 25px 0 0 0;
    width: 27px;
    height: 27px;
    right: 0;
    top: 0;
    -webkit-transition: -webkit-transform .3s cubic-bezier(.46, .1, .29, 1);
    transition: -webkit-transform .3s cubic-bezier(.46, .1, .29, 1);
    -o-transition: transform .3s cubic-bezier(.46, .1, .29, 1);
    transition: transform .3s cubic-bezier(.46, .1, .29, 1);
    transition: transform .3s cubic-bezier(.46, .1, .29, 1), -webkit-transform .3s cubic-bezier(.46, .1, .29, 1);
    display: inline-block;
}

.question .button-icon:after,
.question .button-icon:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 2.5px;
    left: 0;
    top: 50%;
    margin-top: -1px;
    background-color: #790a45
}

.q_wrapper.active .question .button-icon:after {
    display: none;
}

.question .button-icon:after {
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    -webkit-transition: -webkit-transform .2s .3s cubic-bezier(.55, .05, .22, .99);
    transition: -webkit-transform .2s .3s cubic-bezier(.55, .05, .22, .99);
    -o-transition: transform .2s .3s cubic-bezier(.55, .05, .22, .99);
    transition: transform .2s .3s cubic-bezier(.55, .05, .22, .99);
    transition: transform .2s .3s cubic-bezier(.55, .05, .22, .99), -webkit-transform .2s .3s cubic-bezier(.55, .05, .22, .99)
}

@media screen and (max-width: 800px) {
    .q_wrapper .answer p.note {
        font-size: 3vw;
    }

    .s6_qa {
        padding: 0 6.6667vw 30vw;
    }

    .s6_qa a.btn {
        margin: 8vw auto 0;
    }

    .q_wrapper {
        border-radius: 0 3vw 0 3vw;
        margin-top: 3vw;
        border-width: 0.25vw;
    }

    .q_wrapper .answer p {
        margin: 1vw auto 4vw;
    }

    .q_wrapper {

        border-radius: 0 2vw 0 2vw;
    }

    .q_wrapper .question h6 {
        font-size: 4.8vw;
    }

    .q_wrapper .question h6 small {
        padding-top: 2.6667vw;
        padding-left: 1.3333vw;
    }

    .q_wrapper .answer p {
        font-size: 3.7333vw;
    }

    .q_wrapper .question h6 .FtraMd {
        font-size: 6.9333vw;
    }

    .question .button-icon {
        margin: 3.3333vw 0 0 0;
        width: 3.6vw;
        height: 3.6vw;
    }

}


/*******************s7********************/
.s7 {
    background: url(../images/sec_07_bg.jpg) top center no-repeat;
    background-size: 100%;
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 2400px;
}

.s7 .sec-title {
    top: 5%;
}

.s7 .content {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    flex-direction: column;
    text-align: center;
    width: 88%;
    margin: 39% auto 0;
}

.s7 .content .product {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 3%;
}

.s7 .content .product:nth-of-type(even) {
    flex-direction: row-reverse;
}

.s7 .content .product .photo {
    width: 45%;
    height: 75%;
    display: inline-block;
    vertical-align: bottom;
    position: relative;
    z-index: 2;
    margin: 0 auto;
}

.s7 .content .product .photo img {
    width: 93%;
    display: inline-block;
    vertical-align: bottom;
}

.s7 .content .product .photo:before {
    content: '';
    height: 75%;
    display: inline-block;
    vertical-align: bottom;
}

.s7 .content .product .text {
    text-align: center;
    margin-top: -3%;
    width: 55%;
}

.s7 .content .product.prod04 .text {
    margin-top: 3%;
}

.s7 .content .product .text .step {
    position: relative;
    width: 100%;
    top: -20%;
    left: 0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 88px;
    color: #562689;
    font-style: italic;
}

.s7 .content .product .text .step span {
    font-size: 42px;
    color: #9066bc;
    font-style: italic;
    vertical-align: middle;
    margin-right: 0.1em;
    font-weight: 700;
}

.s7 .content .product .text .step span:before {
    content: '';
    position: absolute;
    width: 40%;
    top: 56%;
    right: 89%;
    border-bottom: 2px #9066bc solid;
}

.s7 .content .product.prod01 .text .step span:before {
    border-bottom: 1px #9066bc solid;
}

.s7 .content .product:nth-of-type(2) .text .step span:before {
    right: auto;
    left: 100%;
}

.s7 .content .product:nth-of-type(4) .text .step span:before {
    right: auto;
    left: 100%;
}

.s7 .content .product .text p {
    text-align: center;
    line-height: 1.3;
    margin: 0.4em auto;
}

.s7 .content .product .text p small {
    font-size: 90%;
    line-height: 1.4;
}

.s7 .content .product .text a {
    margin: 0.5em auto 0;
}

.s7 .content .product .text p.function {
    font-weight: 700;
    color: #6f2f9f;
    padding: 0 3px;
    border-top: 1px solid #6f2f9f;
    border-bottom: 1px solid #6f2f9f;
    margin: 5px 0 10px;
    display: inline-block;
}

.s7 .content .product .text .step .function {
    font-weight: 700;
    color: #6f2f9f;
}

.s7 .content .product .text .step span.function {
    margin-left: 0.1em;
}

@media (max-width: 800px) {
    .s7 {
        height: 320vw;
    }

    .s7 .content .product.prod02 {
        margin: 4vw auto 10vw;
    }

    .s7 .content .product.prod04 {
        margin: 0 auto 5vw;
    }

    .s7 .content .product .photo img {
        margin: 0 auto -2vw;
    }

    .s7 .content .product .text .step span:before {
        width: 26vw;
        right: 42vw;
        border-width: 1px;
    }

    .s7 .content .product:nth-of-type(2) .text .step span:before {
        left: 45vw;
    }

    .s7 .content .product:nth-of-type(4) .text .step span:before {
        left: 45vw;
    }

    .s7 .content .product .text .step span.function {
        font-style: normal;
        margin-left: 1vw;
    }

    .s7 .content .product .text .step {
        font-size: 14vw;
        margin-bottom: -3vw;
    }

    .s7 .content .product .text .step span {
        font-size: 4.4vw;
        margin-right: 0.5vw;
    }


}

/*///////////s8////////////////*/


.s8_o2o {
    background-color: #eff0f4;
    padding: 110px 7%;
}


.s8_o2o .sec-title {
    position: relative;
}

.s8_o2o .content {
    margin: 60px auto 0;
}

.s8_o2o .content p {
    text-align: justify;
    text-justify: inter-ideograph;
    margin: 0 auto 8%;
}

.s8_o2o .content p a {
    color: #000;
}

.s8_o2o .note {
    position: relative;
    width: 96%;
    margin-top: 20px;
}

.s8_o2o .btn {
    display: inline-block;
}

@media screen and (max-width: 800px) {
    .s8_o2o {
        padding: 13vw 7vw;
    }

    .s8_o2o .content {
        margin: 8vw auto 0;
    }

    .s8_o2o .note {
        margin-top: 7vw;
    }

}