/* ———————————————————————— RESETS START ———————————————————————— */
html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, menu, nav, section, time, mark, audio, video, details, summary { margin: 0; padding: 0; border: 0; font-size: 100%; font-weight: normal; vertical-align: baseline; background: transparent; }

main, article, aside, figure, footer, header, nav, section, details, summary { display: block; }

html { min-height: 100%; box-sizing: border-box; }

*, *::before, *::after { box-sizing: inherit; }

html, body {
    -webkit-tap-highlight-color: transparent;
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body {
    min-height: 100%; overflow-x: hidden; line-height: 1.5;
    font-family: "font", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

    display: -ms-flexbox; display: flex;
    -ms-flex-direction: column; flex-direction: column;
}

ul, ol { list-style: none; }

a { text-decoration: none; }

img { max-width: 100%; vertical-align: middle; }

input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
}

input[type='number'] { -moz-appearance: textfield; appearance: none; }

button { cursor: pointer; }

:focus-visible { outline: none; }
/* ———————————————————————— RESETS END ———————————————————————— */

/* ———————————————————————— LOADING START ———————————————————————— */
.loading {
    position: fixed;
    top: 0; left: 0; z-index: 100;
    width: 100%; height: 100%;
    background-color: #FFF6EF;
    opacity: 1; visibility: visible;
    -webkit-transition: opacity .3s, visibility .3s;
    transition: opacity .3s, visibility .3s;
}

.loading.hidden {
    opacity: 0; visibility: hidden;
}

.loading-spinner {
    --square: 26px; --offset: 30px;
    --duration: 2.4s; --delay: 0.2s;
    --timing-function: ease-in-out;
    --in-duration: 0.4s; --in-delay: 0.1s;
    --in-timing-function: ease-out;

    width: calc(3 * var(--offset) + var(--square));
    height: calc(2 * var(--offset) + var(--square));
    padding: 0px; margin: 0 auto;
    position: relative;
}

.loading-spinner div {
    display: inline-block;
    background: #A53A2A;
    border: none;
    border-radius: 2px;
    width: var(--square);
    height: var(--square);
    position: absolute;
    padding: 0px;
    margin: 0px;
    font-size: 6pt;
    color: black;
}

.loading-spinner #square1 {
    left: calc(0 * var(--offset));
    top: calc(0 * var(--offset));
    animation: square1 var(--duration) var(--delay) var(--timing-function) infinite,
        squarefadein var(--in-duration) calc(1 * var(--in-delay)) var(--in-timing-function) both;
}

.loading-spinner #square2 {
    left: calc(0 * var(--offset));
    top: calc(1 * var(--offset));
    animation: square2 var(--duration) var(--delay) var(--timing-function) infinite,
        squarefadein var(--in-duration) calc(1 * var(--in-delay)) var(--in-timing-function) both;
}

.loading-spinner #square3 {
    left: calc(1 * var(--offset));
    top: calc(1 * var(--offset));
    animation: square3 var(--duration) var(--delay) var(--timing-function) infinite,
        squarefadein var(--in-duration) calc(2 * var(--in-delay)) var(--in-timing-function) both;
}

.loading-spinner #square4 {
    left: calc(2 * var(--offset));
    top: calc(1 * var(--offset));
    animation: square4 var(--duration) var(--delay) var(--timing-function) infinite,
        squarefadein var(--in-duration) calc(3 * var(--in-delay)) var(--in-timing-function) both;
}

.loading-spinner #square5 {
    left: calc(3 * var(--offset));
    top: calc(1 * var(--offset));
    animation: square5 var(--duration) var(--delay) var(--timing-function) infinite,
        squarefadein var(--in-duration) calc(4 * var(--in-delay)) var(--in-timing-function) both;
}

@keyframes square1 {
    0% {
        left: calc(0 * var(--offset));
        top: calc(0 * var(--offset));
    }

    8.333% {
        left: calc(0 * var(--offset));
        top: calc(1 * var(--offset));
    }

    100% {
        left: calc(0 * var(--offset));
        top: calc(1 * var(--offset));
    }
}

@keyframes square2 {
    0% {
        left: calc(0 * var(--offset));
        top: calc(1 * var(--offset));
    }

    8.333% {
        left: calc(0 * var(--offset));
        top: calc(2 * var(--offset));
    }

    16.67% {
        left: calc(1 * var(--offset));
        top: calc(2 * var(--offset));
    }

    25.00% {
        left: calc(1 * var(--offset));
        top: calc(1 * var(--offset));
    }

    83.33% {
        left: calc(1 * var(--offset));
        top: calc(1 * var(--offset));
    }

    91.67% {
        left: calc(1 * var(--offset));
        top: calc(0 * var(--offset));
    }

    100% {
        left: calc(0 * var(--offset));
        top: calc(0 * var(--offset));
    }
}

@keyframes square3 {

    0%,
    100% {
        left: calc(1 * var(--offset));
        top: calc(1 * var(--offset));
    }

    16.67% {
        left: calc(1 * var(--offset));
        top: calc(1 * var(--offset));
    }

    25.00% {
        left: calc(1 * var(--offset));
        top: calc(0 * var(--offset));
    }

    33.33% {
        left: calc(2 * var(--offset));
        top: calc(0 * var(--offset));
    }

    41.67% {
        left: calc(2 * var(--offset));
        top: calc(1 * var(--offset));
    }

    66.67% {
        left: calc(2 * var(--offset));
        top: calc(1 * var(--offset));
    }

    75.00% {
        left: calc(2 * var(--offset));
        top: calc(2 * var(--offset));
    }

    83.33% {
        left: calc(1 * var(--offset));
        top: calc(2 * var(--offset));
    }

    91.67% {
        left: calc(1 * var(--offset));
        top: calc(1 * var(--offset));
    }
}

@keyframes square4 {
    0% {
        left: calc(2 * var(--offset));
        top: calc(1 * var(--offset));
    }

    33.33% {
        left: calc(2 * var(--offset));
        top: calc(1 * var(--offset));
    }

    41.67% {
        left: calc(2 * var(--offset));
        top: calc(2 * var(--offset));
    }

    50.00% {
        left: calc(3 * var(--offset));
        top: calc(2 * var(--offset));
    }

    58.33% {
        left: calc(3 * var(--offset));
        top: calc(1 * var(--offset));
    }

    100% {
        left: calc(3 * var(--offset));
        top: calc(1 * var(--offset));
    }
}

@keyframes square5 {
    0% {
        left: calc(3 * var(--offset));
        top: calc(1 * var(--offset));
    }

    50.00% {
        left: calc(3 * var(--offset));
        top: calc(1 * var(--offset));
    }

    58.33% {
        left: calc(3 * var(--offset));
        top: calc(0 * var(--offset));
    }

    66.67% {
        left: calc(2 * var(--offset));
        top: calc(0 * var(--offset));
    }

    75.00% {
        left: calc(2 * var(--offset));
        top: calc(1 * var(--offset));
    }

    100% {
        left: calc(2 * var(--offset));
        top: calc(1 * var(--offset));
    }
}

@keyframes squarefadein {
    0% {
        transform: scale(0.75);
        opacity: 0.0;
    }

    100% {
        transform: scale(1.0);
        opacity: 1.0;
    }
}
/* ———————————————————————— LOADING END ———————————————————————— */

/* ———————————————————————— FLEX START ———————————————————————— */
.d-flex, .flex-center { display: -ms-flexbox; display: flex; }

.align-items-center, .flex-center { -ms-flex-align: center; align-items: center; }

.justify-content-center, .flex-center { -ms-flex-pack: center; justify-content: center; }

.justify-content-between { -ms-flex-pack: justify; justify-content: space-between; }

.justify-content-around { -ms-flex-pack: distribute; justify-content: space-around; }

.flex-column { flex-direction: column; flex-direction: column; }

.flex-grow-fill { flex-grow: 1; }
/* ———————————————————————— FLEX END ———————————————————————— */

/* ———————————————————————— MAIN START ———————————————————————— */
body {
    padding-right: 0 !important;
    background-image: linear-gradient(to right, #A53A2A, #311F1D);
}

picture { display: block; }

picture img { cursor: pointer; width: 100%; }

.service {
    padding-left: 24.5%; padding-bottom: 15px;
    background-image: url("../images/public/gradient.png");
    background-size: 100% auto;
}

.service figcaption { margin-left: 40px; }

.service img { width: 114px; height: auto; }

.service p {
    letter-spacing: 0.1em; font-size: 18px;
    color: #FFFFFF; font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.service p + p { margin-top: 15px; }

#main {
    margin: 50px auto;
    padding: 120px 0px;
    width: calc(100% - 100px);
    background-color: #FFF6EF;
    background-image: url("../images/public/backdrop-texture-top.png"),
        url("../images/public/backdrop-texture-bottom.png");
    background-size: 100% auto;
    background-blend-mode: multiply;
}

#main .section { width: 75%; margin: 0 auto; }

#main .section + .section { margin-top: 140px; }

#main .section-title {
    position: relative;
    text-align: center; margin: 0 auto;
    color: #BD291E; font-size: 36px;
    width: 150px; letter-spacing: 0.1em;
}

#main .section-title::before, #main .section-title::after {
    content: ""; position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: right;
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAABgCAYAAAAD82JpAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAGqADAAQAAAABAAAAYAAAAAD/q05kAAACg0lEQVRoBe2Zv2sUQRTH31w2EcEfoIhGzz040twFbCzsjCZBbFJZKWhhYSNYKWgpWNhIwM4UEkhnrVUuEVL4FxgOLBROsVBMJVyR855vijkWeZl5M3MJCG/hmL3ve/v9zn72blh2zUarRNjnDQ2s1PY5Y2SvQSMUsTuKLpbYqP/A0BX2z2RjDZqjBobTCOYcfZ2xktXHtbFmW63G9ABxCY25BYBzuWH2ZNigqnGnVS5S03PSLlb1mH3RErTY7XV+dXuXiO2LGPN/e4NnVD2AFuDb9H2VPlE/ItEZVYMWur01A/iwqkn3o2ZmTee7X5cR8LU0wPVFB9kDBzV8RMOOM5GMSUHXt7/tGANPJQGuJynIHmxM3+LrO6PQmBx0dfvnb0B4Fwpw9eQga0A3G2+dUWjMCiKAn0IBrp4XVNQ+O6PQmBW08PHLj1CAq2cF0folvifMCnKzlYwaJKHE9ig6FotEVHQSSmyPomOxSERFJ6HE9ig6FotEVHQSSmyPomOxSERFJ6HE9ig6FotEVHQSSmyPomOxSERFJ6HE9ig6FotEVHQSSmzP/4Hu/RUo2OkzYtYZDb/XTzOerJQVhJPmLOvKiFlB5g/MMp6slBVEL+eWWFdGTA76UK8fpufe1xhPVkoO6h+buE+OR1hXRkwKWm82jwPiE8ZvTykpyBwavCTHE3u6MoXooM12+YAerN9hvLxSVNBmu3EXEZLeXoqWkDcAEyfb5TNEfOydtqcYDNqYbczDEJbp4l/w+ARLbNDWzJlTu1OTNwDNTRji5aCLoKHotMtXto8u8BQNDXp/0twFOE9j1PULZRUG4V6oaRz1sc7aNyEN8tHx1hSdF4+veGDo/gIiU2jMk5NniQAAAABJRU5ErkJggg==");
}

#main .section-title::before {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    background-position: right;
}

.introduction .introduction-picture,
.peroration .peroration-picture {
    position: relative; margin-top: 80px; padding: 20px; background-color: #F7EAE0;
}

.right-angle {
    position: absolute; width: 26px; height: 26px;
    background-size: cover;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjdweCIgaGVpZ2h0PSIyNnB4IiB2aWV3Qm94PSIwIDAgMjcgMjYiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8dGl0bGU+57yW57uEIDE1PC90aXRsZT4KICAgIDxnIGlkPSLpobXpnaItMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIj4KICAgICAgICA8ZyBpZD0iQXBwbGUtVFblpIfku70iIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yNjcuMDAwMDAwLCAtMTQ5NS4wMDAwMDApIiBzdHJva2U9IiNDQjQ5MzciIHN0cm9rZS13aWR0aD0iMyI+CiAgICAgICAgICAgIDxnIGlkPSLnvJbnu4QtMTUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDI4MC4wMDAwMDAsIDE1MDcuNTAwMDAwKSBzY2FsZSgtMSwgMSkgdHJhbnNsYXRlKC0yODAuMDAwMDAwLCAtMTUwNy41MDAwMDApIHRyYW5zbGF0ZSgyNjguMDAwMDAwLCAxNDk2LjAwMDAwMCkiPgogICAgICAgICAgICAgICAgPGxpbmUgeDE9IjAuMzM4MjM1Mjk0IiB5MT0iMC41IiB4Mj0iMjIuNjYxNzY0NyIgeTI9IjAuNSIgaWQ9IuebtOe6vy0xMCI+PC9saW5lPgogICAgICAgICAgICAgICAgPGxpbmUgeDE9IjIzLjUiIHkxPSIxIiB4Mj0iMjMuNSIgeTI9IjIzIiBpZD0i55u057q/LTEw5aSH5Lu9Ij48L2xpbmU+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg==");
}

.right-angle.top-left, .right-angle.bottom-left { left: 0; }

.right-angle.top-left, .right-angle.top-right { top: 0; }

.right-angle.top-right, .right-angle.bottom-right { right: 0; }

.right-angle.bottom-left, .right-angle.bottom-right { bottom: 0; }

.right-angle.top-right {
    -webkit-transform: rotate(90deg); transform: rotate(90deg);
}

.right-angle.bottom-left {
    -webkit-transform: rotate(-90deg); transform: rotate(-90deg);
}

.right-angle.bottom-right {
    -webkit-transform: rotate(180deg); transform: rotate(180deg);
}

.phase-outline {
    height: 110px; background-color: #DBBA97; text-align: center; position: relative;
}

.phase-outline .dragon-wrap {
    position: absolute; top: 0px; width: 8%; pointer-events: none;
    -webkit-transform: translateY(-100%); transform: translateY(-100%);
    -webkit-transition: left .3s; transition: left .3s;
}

.phase-outline .dragon-wrap::before {
    content: ""; display: block;
    width: 1px; margin-left: -1px;
    height: 0; padding-top: 54.44444444444444%;
}

.phase-outline .dragon {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-image: url("../images/public/2.png");
    background-size: cover;
}

.phase-backdrop {
    width: calc(100% - 12px); height: calc(100% - 12px);
    background-color: #F8EADF; border-radius: 15px;
}

.phase-item {
    font-size: 32px; letter-spacing: 0.1em; position: relative; cursor: pointer;
}

.phase-item + .phase-item::before {
    content: ""; position: absolute;
    left: 0px; top: 50%;
    width: 2px; height: 70%;
    border-radius: 999px;
    background-color: #A53A2A;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.phase-item.active { color: #BD291E; font-size: 34px; }

.phase-content-backdrop {
    position: relative; 
    height: 90vh; margin-top: 80px;
    background-color: #F6E9DF; padding: 20px 10px 20px 20px;
}

.phase-content {
    height: 100%; overflow-y: auto; padding-right: 12px;
    transform-style: preserve-3d;
    perspective: 50px;
}

/**
 * ----------------------------------------
 * animation fade-in-fwd
 * ----------------------------------------
 */
@-webkit-keyframes fade-in-fwd {
    0% {
        -webkit-transform: translateZ(-10px);
        transform: translateZ(-10px);
        opacity: 0;
    }

    100% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        opacity: 1;
    }
}

@keyframes fade-in-fwd {
    0% {
        -webkit-transform: translateZ(-10px);
        transform: translateZ(-10px);
        opacity: 0;
    }

    100% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        opacity: 1;
    }
}

.phase-item-content { display: none; }

.phase-item-content.active {
    display: block;
    -webkit-animation: fade-in-fwd 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
            animation: fade-in-fwd 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

.phase-content {
    --sb-track-color: #e4cabf;
    --sb-thumb-color: #b07064;
    --sb-size: 10px;
}

.phase-content::-webkit-scrollbar { width: var(--sb-size); }

.phase-content::-webkit-scrollbar-track {
    background: var(--sb-track-color); border-radius: 8px;
}

.phase-content::-webkit-scrollbar-thumb {
    background: var(--sb-thumb-color); border-radius: 8px;
}

.back-to-top {
    position: fixed; z-index: 100;
    bottom: 80px; right: 80px;
    width: 60px; height: 60px;
    cursor: pointer; opacity: 0;
    visibility: hidden;
    -webkit-transition: opacity .3s, visibility .3s;
    transition: opacity .3s, visibility .3s;
}

.back-to-top.show { opacity: 1; visibility: visible; }

.back-to-top img { width: 100%; height: 100%; }
/* ———————————————————————— MAIN END ———————————————————————— */
@media screen and (max-width: 1440px) {
    .service {
        padding: 0px 0px 15px 0px;
    }

    .service > .d-flex {
        -ms-flex-pack: center; justify-content: center;
    }

    .service img { width: 110px; height: auto; }

    .service p { font-size: 16px; }
}

@media screen and (max-width: 1399px) {
    #main .section { width: 77%; }

    #main .section + .section { margin-top: 120px; }

    #main .section-title { font-size: 32px; width: 140px; }

    .introduction .introduction-picture,
    .phase-content-backdrop,
    .peroration .peroration-picture { margin-top: 65px; }

    .right-angle { width: 22px; height: 22px; }

    .phase-outline { height: 100px; }

    .phase-outline .dragon-wrap { width: 10%; }

    .phase-item { font-size: 30px; }

    .phase-item.active { font-size: 32px; }
}

@media screen and (max-width: 1199px) {
    #main { padding: 100px 0px; }

    #main .section { width: 80%; }

    #main .section + .section { margin-top: 100px; }

    #main .section-title { font-size: 30px; width: 125px; }

    .introduction .introduction-picture,
    .phase-content-backdrop,
    .peroration .peroration-picture { margin-top: 50px; }

    .phase-outline { height: 85px; }

    .phase-outline .dragon-wrap { width: 12%; }

    .phase-item { font-size: 26px; }

    .phase-item.active { font-size: 28px; }

    .service img { width: 100px; height: auto; }

    .back-to-top {
        bottom: 80px; right: 40px;
        width: 60px; height: 60px;
    }
}

@media screen and (max-width: 991px) {
    #main { width: calc(100% - 80px); padding: 80px 0px; }
    
    #main .section { width: 85%; }

    #main .section + .section { margin-top: 80px; }

    #main .section-title { font-size: 28px; width: 120px; }

    .introduction .introduction-picture,
    .phase-content-backdrop,
    .peroration .peroration-picture { margin-top: 40px; }

    .right-angle { width: 18px; height: 18px; }

    .phase-outline { height: 80px; }

    .phase-outline .dragon-wrap { width: 12%; }

    .phase-content-backdrop { height: 85vh; }

    .phase-item { font-size: 24px; }

    .phase-item.active { font-size: 26px; }

    .back-to-top {
        bottom: 60px; right: 40px;
        width: 50px; height: 50px;
    }
}

@media screen and (max-width: 767px) {
    #main { width: calc(100% - 60px); margin: 45px auto; padding: 80px 0px; }

    .service { padding: 0px 0px 12px; }

    .service > .d-flex {
        -ms-flex-pack: start; justify-content: start;
    }

    .service .figure-image {
        margin: 0px auto; text-align: center; flex-shrink: 0;
    }

    .service img { width: 90px; height: auto; }

    .service figcaption { margin-left: 15px; width: 77%; margin-left: 0px; flex-shrink: 0; }

    .service p { font-size: 14px; }

    .service p + p { margin-top: 8px; }

    #main .section { width: calc(100% - 40px); }

    #main .section + .section { margin-top: 60px; }

    #main .section-title { font-size: 26px; width: 110px; }

    .introduction .introduction-picture,
    .phase-content-backdrop,
    .peroration .peroration-picture { margin-top: 30px; }

    .right-angle { width: 16px; height: 16px; }

    .phase-outline { height: 70px; }

    .phase-outline .dragon-wrap { width: 15%; }

    #main .phase-section { margin-top: 90px !important; }

    .phase-backdrop { width: calc(100% - 8px); height: calc(100% - 8px); }

    .phase-content-backdrop { height: 80vh; }

    .phase-item, .phase-item.active { font-size: 20px; }

    .phase-item + .phase-item::before { width: 1px; }

    .back-to-top {
        bottom: 50px; right: 30px;
        width: 50px; height: 50px;
    }
}

@media screen and (max-width: 576px) {
    #main { width: calc(100% - 40px); margin: 40px auto; padding: 60px 0px; }

    .service { padding: 0px 0px 10px; }

    .service img { width: 60px; height: auto; }

    .service figcaption { margin-left: 0px; }

    .service p { font-size: 8px; }

    .service p + p { margin-top: 6px; }

    #main .section { width: calc(100% - 30px); }

    #main .section-title { font-size: 24px; width: 110px; }

    .introduction .introduction-picture,
    .peroration .peroration-picture {
        padding: 15px;
    }

    .phase-content-backdrop {
        padding: 15px 10px 15px 15px;
    }

    .right-angle { width: 14px; height: 14px; }

    .phase-outline { height: 60px; }

    .phase-outline .dragon-wrap { width: 18%; }

    #main .phase-section { margin-top: 60px !important; }

    .phase-content-backdrop { height: 75vh; }

    .phase-item { font-size: 16px; }

    .back-to-top {
        right: 15px; width: 45px; height: 45px;
    }
}

@media screen and (max-width: 375px) {
    .service .figure-image { width: 14%; }

    .phase-outline { height: 55px; }

    .phase-item { font-size: 14px; }
}

@media screen and (min-width: 1920px) {
    #main {
        margin: 2.604167vw auto; padding: 6.25vw 0vw; width: calc(100% - 5.208333vw);
    }

    #main .section + .section { margin-top: 7.291667vw; }

    #main .section-title { font-size: 1.875vw; width: 7.8125vw; }

    .service { padding-bottom: .78125vw; }

    .service img { width: 5.9375vw; height: 5.9375vw; }

    .service p { font-size: .9375vw; }

    .service p + p { margin-top: .78125vw; }

    .service figcaption { margin-left: 2.083333vw; }

    .right-angle { width: 1.354167vw; height: 1.354167vw; }

    .introduction .introduction-picture, .peroration .peroration-picture {
        margin-top: 4.166667vw;
        padding: 1.041667vw;
    }

    .phase-outline { height: 5.729167vw; }

    .phase-item { font-size: 1.666667vw; }

    .phase-item.active { font-size: 1.770833vw; }

    .phase-content-backdrop {
        margin-top: 4.166667vw;
        padding: 1.041667vw .520833vw 1.041667vw 1.041667vw;
    }

    .phase-content { --sb-size: .520833vw; padding-right: .625vw; }

    .phase-content::-webkit-scrollbar-track {
        border-radius: .416667vw;
    }
    
    .phase-content::-webkit-scrollbar-thumb {
        border-radius: .416667vw;
    }

    .back-to-top {
        bottom: 4.166667vw; right: 4.166667vw;
        width: 3.125vw; height: 3.125vw;
    }

    .loading-spinner {
        --square: 1.354167vw; --offset: 1.5625vw;
    }
    
    .loading-spinner div { border-radius: .104167vw }
}