:root {
    --toggler-icon: url('/img/theme/B/navbar-toggler.png');
    --bs-body-font-size: 14px;
    --bs-body-color: #5a5a5a;
    --bs-body-bg: #ffffff;
    --bg-nav: #008369;
    --bg-about: #efefef;
    --bg-copyright: #2636a7;
    --bg-option: #efefef;
    --bg-option-shadow: 0 0 6px 0 rgba(42, 29, 63, .2);
    --bg-option-view: #ffc400;
    --bg-option-showing: #91bfab;
    --bg-topic: #75dac2;
    --bg-chunk: #efefef;
    --bg-chunk-shadow: 0 0 6px 0 rgba(42, 29, 63, .2);
    --bg-download: rgba(61, 37, 5, .2);
    --bg-download-1: #f78b17;
    --bg-download-2: #fbead8;
    --bg-swiper-nav: hsla(0, 0%, 100%, .1);
    --bg-swiper-dot: #c1c1c1;
    --bg-swiper-dot-selected: #008369;
    --bg-submit: #bf93e6;
    --text-star: #b6580e;
    --text-star-score: #b6580e;
    --text-nav: var(--bs-body-color);
    --text-about: #666b79;
    --text-copyright: var(--bs-body-color);
    --text-option: var(--bs-body-color);
    --text-option-subtitle: #959893;
    --text-option-prominent: #f1d226;
    --text-option-view: #902f00;
    --text-option-showing: #902f00;
    --text-topic: #ffffff;
    --text-topic-button: var(--text-topic);
    --text-chunk: var(--bs-body-color);
    --text-download: var(--bs-body-color);
    --text-download-subtitle: #7b7f8a;
    --text-download-android: #ffffff;
    --text-download-apple: #ffffff;
    --text-download-1: #ffffff;
    --text-download-2: #f78b17;
    --text-swiper-nav: #666666;
    --text-submit: #ffffff;

    .popover {
        --bs-popover-bg: #ffffff;
    }

    .offcanvas {
        --bs-offcanvas-bg: #ffffff;
        --bs-offcanvas-width: 260px;
    }
}

.navbar {
    color: var(--text-nav);
    background: var(--bg-nav);
}

.navbar-toggler-icon {
    background-image: var(--toggler-icon);
}

.navbar-logo {
    height: 3.2rem;
}

.navbar-menu {
    height: 3rem;
    background: url('/img/theme/B/button-pink.png') no-repeat;
    background-size: 100% 100%;
}

@media (max-width: 768px) {
    .navbar-logo {
        height: 3rem;
    }
}

.about {
    color: var(--text-about);
    background: var(--bg-about);
}

.copyright {
    color: var(--text-copyright);
    background: var(--bg-copyright);
}

.star {
    color: var(--text-star);
}

.star-score {
    color: var(--text-star-score);
}

.option {
    color: var(--text-option);
    background: var(--bg-option);
    box-shadow: var(--bg-option-shadow);
}

.option-subtitle {
    color: var(--text-option-subtitle);
}

.option-prominent {
    color: var(--text-option-prominent);
}

.option-view {
    color: var(--text-option-view);
    background: var(--bg-option-view);
}

.option-showing {
    color: var(--text-option-showing);
    background: var(--bg-option-showing);
}

.topic {
    color: var(--text-topic);
    background: var(--bg-topic);
}

.topic-button {
    color: var(--text-topic-button);
}

.chunk {
    color: var(--text-chunk);
    background: var(--bg-chunk);
    box-shadow: var(--bg-chunk-shadow);
}

.download {
    color: var(--text-download);
    background: var(--bg-download);
}

.download-subtitle {
    color: var(--text-download-subtitle);
}

.download-android {
    color: var(--text-download-android);
    background: url('/img/theme/B/button-blue.png') no-repeat;
    background-size: 100% 100%;
}

.download-apple {
    color: var(--text-download-apple);
    background: url('/img/theme/B/button-yellow.png') no-repeat;
    background-size: 100% 100%;
}

.download-guide {
    background: url('/img/theme/B/download-bg.png') no-repeat;
    background-size: 100% 100%;
}

.download-1 {
    color: var(--text-download-1);
    background: var(--bg-download-1);
    animation: detail_breathe 1s infinite;
}

.download-2 {
    color: var(--text-download-2);
    background: var(--bg-download-2);
}

.submit {
    color: var(--text-submit) !important;;
    background: var(--bg-submit) !important;
}

.w-1330 {
    width: 1330px;
}

.w-220 {
    width: 220px;
}

.w-130 {
    width: 130px;
}

.w-124 {
    width: 124px;
}

.w-110 {
    width: 110px;
}

.w-62 {
    width: 62px;
}

.h-124 {
    height: 124px;
}

.h-120 {
    height: 120px !important;
}

.h-110 {
    height: 110px;
}

.h-62 {
    height: 62px;
}

.ratio-301x169 {
    height: auto;
    aspect-ratio: 301 / 169;
}

.ratio-226x179 {
    aspect-ratio: 226/130;
}

.swiper-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: var(--text-swiper-nav);
    background: var(--bg-swiper-nav);
}

.swiper-dot-default {
    margin: auto 3px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--bg-swiper-dot);
}

.swiper-dot-selected {
    width: 10px;
    height: 10px;
    border: 2px solid var(--bg-swiper-dot-selected);
    background: transparent;
}

.grid-template {
    grid-template-areas:
      "d e f"
      "a a ."
      "a a ."
      "ad ad ad"
      ". b b"
      ". b b"
      ". . ."
      "c c ."
      "c c g";
}

@media (min-width: 768px) {
    .grid-template {
        grid-template-areas:
      "a a d e"
      "a a f ."
      ". . . ."
      "ad ad ad ad"
      ". . b b"
      ". . b b"
      "c c . ."
      "c c . g";
    }
}

@media (min-width: 992px) {
    .grid-template {
        grid-template-areas:
      "a a . . . ."
      "a a . . b b"
      ". . . . b b"
      ". c c . . ."
      ". c c . . ."
      ". . . . d d"
      "e e . . d d"
      "e e . . . ."
      ". g g . f f"
      ". g g . f f";
    }
}

@media (min-width: 1200px) {
    .grid-template {
        grid-template-areas:
      "a a . . . b b . . . c c"
      "a a . . . b b . . . c c"
      ". . d d . . . e e . . ."
      ". . d d . . . e e . . ."
      ". . . . f f . . . g g ."
      ". . . . f f . . . g g ."
    }
}


@keyframes detail_breathe {
    0% {
        transform: scale(1)
    }

    50% {
        transform: scale(1.03)
    }

    to {
        transform: scale(1)
    }
}