/************ TABLE OF CONTENTS ***************
1. Base
2. Header
3. Popup
4. Footer
5. Section
6. Index
7. About
8. Prouduct
9. Form
10. Table

----------------------------------- */

/* ***** Fonts ***** */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@300..900&family=Noto+Sans+TC:wght@300..900&family=Open+Sans:wght@300..700&display=swap');
@import url('../lib/animate.css');
@import url('../lib/owl/owl.css');
@import url('../lib/fontawesome-5pro/css/fontawesome.min.css');

/*** 
====================================================================
1	Base
====================================================================
***/

:root {
    --text_black: #2A3A2C; /*一般文字*/
    --color_blue: #3A6F95;
    --color_yellow: #BB9621;
    --color_brown: #564741;
    --color_green: #658C6F;
    --color_red: #AD3C23;
    --full_width: 100hvw;
    --header_h: 100px;
    --footer_h: 84px;
    --size_12: 0.75rem;
    --size_13: 0.8125rem;
    --size_14: 0.875rem;
    --size_15: 0.9375rem;
    --size_16: 1rem;
    --size_17: 1.0625rem;
    --size_18: 1.125rem;
    --size_19: 1.1875rem;
    --size_20: 1.25rem;
    --size_21: 1.3125rem;
    --size_22: 1.375rem;
    --size_23: 1.4375em;
    --size_24: 1.5rem;
    --size_25: 1.5625rem;
    --size_26: 1.625rem;
    --size_27: 1.6875rem;
    --size_28: 1.75rem;
    --size_29: 1.8125rem;
    --size_30: 1.875rem;
    --size_32: 2rem;
    --size_33: 2.0625rem;
    --size_36: 2.25rem;
}

body, html {
    position: relative;
    z-index: auto;
    font-family: 'Noto Serif TC','Microsoft JhengHei','Open Sans','Helvetica', Arial, sans-serif !important;
    font-size: 16px;
    line-height: 1.5em;
    color: var(--text_black);
}

.font-sans {
    font-family: 'Noto Sans TC';
}

h1,
h2,
h3,
h4,
h5,
h6 {
    background: none;
}

a,
a:hover,
a:focus,
a:active {
    color: var(--text_black);
    text-decoration: none;
    cursor: pointer;
    outline: none;
    transition: all 400ms;
}

    a:hover, a:focus, a:active, a.active {
        color: var(--color_blue);
    }

    /*    a.text-link {
        color: var(--color_blue);
        text-decoration: underline;
    }

        a.text-link:hover,
        a.text-link:focus,
        a.text-link:active,
        a.text-link.active {
            color: var(--dark_blue);
        }*/

    a.disabled {
        pointer-events: none;
        opacity: 0.5;
    }

    a.disabled2 {
        pointer-events: none;
    }

input:focus, button:focus {
    outline: none !important;
}

.auto-container {
    position: static;
    max-width: 1080px; /*w=1000*/
    padding-right: 40px;
    padding-left: 40px;
    margin-right: auto;
    margin-left: auto;
}

.auto-container-sm {
    position: static;
    max-width: 960px; /*w=880*/
    padding-right: 40px;
    padding-left: 40px;
    margin-right: auto;
    margin-left: auto;
}

.auto-container-lg {
    position: static;
    max-width: 1400px; /*w=1320*/
    padding-right: 40px;
    padding-left: 40px;
    margin-right: auto;
    margin-left: auto;
}

    .auto-container:before, .auto-container-lg:before {
        display: table;
        content: " ";
    }

    .auto-container:after, .auto-container-lg:after {
        display: table;
        content: " ";
        clear: both;
    }

.page-wrapper {
    position: relative;
    margin: 0 auto;
    width: 100%;
    /*  min-width: 300px;
    max-width: var(--full_width);*/
    overflow: hidden;
}

.min-height-100 {
    min-height: -moz-calc(100vh - 19rem);
    min-height: -webkit-calc(100vh - 19rem);
    min-height: -o-calc(100vh - 19rem);
    min-height: calc(100vh - 19rem);
}

.lh-lg {
    line-height: 2 !important;
}

.text-decoration-line-through {
    text-decoration: line-through !important;
}

/*------all------*/
.xl-view .lg-view, .lg-md-view {
    display: block !important;
}

.md-sm-view, .sm-view {
    display: none !important;
}

/* ------ color ------ */
.text_black {
    color: var(--text_black);
}

.text_brown {
    color: var(--color_brown);
}

.text-breakall {
    word-break: break-all;
}

.text-underline {
    text-decoration: underline;
}

/* ------ component ------ */
.btn {
    color: var(--text_black);
    font-size: var(--size_22);
    font-weight: 500;
    line-height: 1;
    padding: 0.6rem 0.8rem;
    border-radius: 0.15rem;
    box-shadow: none !important;
}

    .btn:focus, .btn.focus {
        box-shadow: none;
    }

    .btn:not(:disabled):hover, .btn:not(:disabled):active {
        opacity: 0.8;
    }

    .btn.btn-xs {
        padding: 0.6rem 1.15rem 0.52rem 1.15rem;
        font-size: var(--size_15);
    }

    .btn.btn-lg {
        padding: 1rem 3.6rem;
        border-radius: 0.4rem;
        font-size: var(--size_23);
    }

.btn-success {
    color: #fff !important;
    background-color: var(--color_green) !important;
    border-color: var(--color_green) !important;
}

    .btn-success:hover, .btn-success:focus, .btn-success:active {
        color: #fff !important;
        background-color: var(--color_blue) !important;
        border-color: var(--color_blue) !important;
    }

.btn-outline-success {
    color: #2A3A2C !important;
    background-color: transparent !important;
    border: 3px solid var(--color_green) !important;
}

    .btn-outline-success:hover, .btn-outline-success:focus, .btn-outline-success:active {
        background-color: #658C6F33 !important;
        border-color: var(--color_blue) !important;
    }

/*回首頁link*/
.link-btn {
    font-size: var(--size_26);
    font-weight: 900;
    padding: 0.3rem;
    display: inline-block;
    margin-top: 0.5rem;
    border: 0.3rem solid #4F7368;
    color: #fff !important;
}

    .link-btn:hover, .link-btn:focus, .link-btn:active {
        opacity: 0.8;
    }

    .link-btn span {
        background-color: #6C9A8E;
        padding: 0.6rem 0.2rem;
        display: flex;
        justify-content: center;
        align-items: center;
    }

        .link-btn span:before,
        .link-btn span::after {
            content: '';
            background-image: url('../img/icon-flower1.png');
            background-repeat: no-repeat;
            background-size: contain;
            width: 1.2rem;
            height: 1.2rem;
            margin: 0 0.3rem;
        }


/*.dropdown*/
.dropdown-menu {
    box-shadow: 0px 0.2rem 0.375rem rgba(0, 0, 0, 0.15);
    border: none;
    z-index: 1030;
    max-height: 300px;
}

.dropdown-item {
    font-size: var(--size_15);
    color: var(--text_black);
    padding: 0.3rem 1.3rem;
}

    .dropdown-item:hover, .dropdown-item:focus {
        background: #f7f7f7;
        color: var(--color_blue);
    }

    .dropdown-item.active { /*, .dropdown-item:active*/
        color: #fff;
        background: var(--color_blue);
    }

.dropdown-toggle::after {
    color: var(--color_blue);
    margin-left: 0.4em;
    vertical-align: 0.2em;
    border-top: 0.5em solid;
    border-right: 0.4em solid transparent;
    border-bottom: 0;
    border-left: 0.4em solid transparent;
}

/*tag*/
.tag {
    border-radius: var(--size_13);
    font-size: var(--size_13);
    line-height: 1;
    padding: 0.3rem 0.55rem;
    background: #f4f4f4;
    color: var(--text_black);
    position: relative;
    display: inline-block;
    white-space: nowrap;
}

    .tag.tag-blue {
        background: var(--light_blue);
        color: var(--color_blue);
    }

/*** 
====================================================================
2. Header 
====================================================================
***/

.main-header {
    padding: 0;
    height: var(--header_h);
    transition: all 500ms;
    position: relative;
    z-index: 1000;
}

    .main-header.fixed-top + .index-banner {
        top: 0;
        margin-bottom: 0;
    }

    .main-header.fixed-top + .detail-banner,
    .main-header.fixed-top + .product-banner {
        margin-top: var(--header_h);
    }

    .main-header.fixed-top {
        position: fixed;
        background: #fff;
        box-shadow: 0 1px 1px rgba(0,0,0,.1);
    }

    .main-header .auto-container-lg {
        padding-right: 0;
        padding-left: 0;
    }

    .main-header .navbar {
        padding: 0 !important;
        height: var(--header_h);
    }

    .main-header .navbar-collapse {
        justify-content: flex-end;
    }

    .main-header .navbar-brand {
        position: absolute;
        display: block;
        width: 165px;
        top: 24px;
        left: 0;
        margin: 0 !important;
        padding: 0 !important;
    }

        .main-header .navbar-brand img {
            width: 100%;
            max-width: 500px;
        }

    .main-header .navbar-light .navbar-toggler {
        padding: 3px 0;
        border: none;
        position: absolute;
        top: 16px;
        right: 12px;
        z-index: 1001;
    }

        .main-header .navbar-light .navbar-toggler img {
            width: 2.1rem;
        }

    .main-header .collapse-logo {
        display: none;
    }

/*---menu---*/
.main-menu.navbar-nav {
    position: relative;
    flex-direction: row;
}

.main-menu > li > a {
    padding: 1rem 0.2rem 0.8rem 0.2rem !important;
    color: #084150 !important;
    font-size: var(--size_22);
    font-weight: 700;
    margin-left: 1.5rem;
    position: relative;
}

    .main-menu > li > a.active,
    .main-menu > li > a:hover,
    .main-menu > li > a:focus {
        background-color: transparent;
        color: var(--color_yellow) !important;
        border-color: var(--color_yellow);
    }


    .main-menu > li > a::after {
        content: "";
        position: absolute;
        left: -3px;
        right: -3px;
        bottom: -3px;
        height: 3px;
        background: var(--color_yellow);
        transform: scaleX(0);
        transform-origin: center;
        transition: transform .3s ease;
    }

    .main-menu > li > a.active::after,
    .main-menu > li > a:hover::after {
        transform: scaleX(1);
    }

/*---user---*/
.main-button {
    margin-left: 2.5rem;
}

    .main-button > li > a {
        padding: 1rem 0.3rem 0.8rem 0.3rem !important;
    }

        .main-button > li > a > img {
            width: 2.2rem;
        }

        .main-button > li > a:hover,
        .main-button > li > a:focus {
            opacity: 0.7;
        }

/*close*/
.navbarClose {
    position: absolute;
    top: 6px;
    right: -28px;
    display: none;
    color: #fff;
    border-color: #fff;
}

.navbarMask {
    background-color: rgba(0, 0, 0, 0.5);
    width: 100vw;
    height: 100vh;
    display: none;
    position: fixed;
    z-index: 99;
    left: 0;
    top: 0;
}

/*** 
====================================================================
3. Popup 
====================================================================
***/
.page-wrapper.pre {
    display: none !important;
}

#LoadingMask.pre {
    display: block !important;
    background-color: #fff;
}

#LoadingMask {
    display: none;
    z-index: 5000;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: .5;
    background-color: #fff;
    transition: opacity .15s linear;
}

.loading-inner {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -30px;
    margin-left: -22px;
    color: #666;
    text-align: center;
    padding: 0;
}

/*modal 共用*/
.modal-content {
    border-radius: 0.7rem;
    padding: 0;
    border: none;
}

.modal-header {
    padding: 0 0 1rem 0;
    background: #616161;
    padding: 0.8rem;
    border-top-left-radius: 0.6rem;
    border-top-right-radius: 0.6rem;
    justify-content: center;
}

    .modal-header .modal-title {
        font-size: var(--size_30);
        color: #fff;
        font-weight: 400;
        text-align: center;
    }

    .modal-header .close {
        opacity: 1;
        font-size: 1.5rem;
        margin: 0;
        text-shadow: none;
        background: var(--color_blue);
        color: #fff;
        padding: 0.2rem 0.6rem;
        line-height: 1;
        position: absolute;
        top: 0;
        right: 0;
    }

.modal-body {
    padding: 2rem 2.3rem;
    font-size: var(--size_15);
    color: #2B2B2B;
}

/*.btn-box 共用*/
.btn-box {
    text-align: center;
    padding-top: 1rem;
}

    .btn-box .btn {
        margin: 0 1px 4px 1px;
    }

/*** 
====================================================================
4. Footer 
====================================================================
***/
.footer_area {
    padding-bottom: var(--footer_h);
    background: #51677A;
}

    .footer_area .social-box {
        height: var(--footer_h);
        background: #51677A;
        padding: 1.3rem 4rem;
        display: flex;
        justify-content: space-between;
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        z-index: 1000;
        transition: all 400ms;
    }

        .footer_area .social-box.at-bottom {
            position: relative;
        }

        .footer_area .social-box a {
            display: inline-block;
            margin-right: 0.6rem;
        }

            .footer_area .social-box a:hover {
                opacity: 0.8;
            }

        .footer_area .social-box .icons-left img {
            width: 2.6rem;
        }

        .footer_area .social-box .icons-right img {
            height: 3rem;
        }

    .footer_area .copyright {
        display: block;
        text-align: right;
        font-size: var(--size_15);
    }

/*** 
====================================================================
5. Section
====================================================================
***/

/*section*/
.section {
    padding: 3rem 0;
}

    .section .section-title {
        font-size: var(--size_36);
        text-align: center;
        font-weight: 900;
        letter-spacing: 0.1rem;
        margin-bottom: 1.5rem;
    }

        .section .section-title .en {
            display: block;
            letter-spacing: 0;
            font-size: 75%;
        }

    .section .subtitle {
        font-size: var(--size_26);
        text-align: center;
        font-weight: 500;
        letter-spacing: 0.08rem;
        margin-bottom: 2rem;
    }

    .section .section-intro {
        font-size: var(--size_20);
        text-align: center;
        line-height: 1.6;
        margin-bottom: 2.6rem;
    }

/*---title共用---*/
.title-half {
    position: relative;
    z-index: 0;
}

    .title-half::before {
        content: '';
        background: #E3EBC3;
        display: block;
        height: 50%;
        position: absolute;
        z-index: -1;
        left: -1rem;
        right: -1rem;
        bottom: -0.1rem;
    }

.title-dots {
    position: relative;
    display: inline-block;
}

    .title-dots::before,
    .title-dots::after {
        content: '';
        background: #2BA7CB;
        display: block;
        width: 0.7rem;
        height: 0.7rem;
        border-radius: 50%;
        position: absolute;
        top: calc(50% - 0.35rem);
        left: -1.2rem;
    }

    .title-dots::after {
        left: initial;
        right: -1.2rem;
    }

.title-lines {
    position: relative;
}

    .title-lines::before,
    .title-lines::after {
        content: '';
        background: #B5B536;
        display: block;
        width: 5rem;
        height: 0.24rem;
        position: absolute;
        top: calc(50%);
        left: -5.3rem;
    }

    .title-lines::after {
        left: initial;
        right: -5.2rem;
    }

    .title-lines.one::before {
        display: none;
    }

.title-stars {
    position: relative;
    display: inline-block;
}

    .title-stars::before,
    .title-stars::after {
        content: '';
        background: url(../img/icon-star.png);
        background-repeat: no-repeat;
        background-size: contain;
        display: block;
        height: 1.8rem;
        width: 1.6rem;
        position: absolute;
        top: calc(50% - 0.8rem);
        left: -2.2rem;
    }

    .title-stars::after {
        left: initial;
        right: -2.2rem;
    }

@keyframes animate-stars {
    from {
        transform: scale(0);
    }

    to {
        transform: scale(1);
    }
}

.animate-stars-icon,
.animate-stars::before,
.animate-stars::after {
    animation: animate-stars 1.5s ease-in-out infinite;
}

.title-diamonds {
    position: relative;
    display: inline-block;
}

    .title-diamonds::before,
    .title-diamonds::after {
        content: '';
        background: url(../img/icon-diamond.png);
        background-repeat: no-repeat;
        background-size: contain;
        display: block;
        height: 3.6rem;
        width: 3.4rem;
        position: absolute;
        top: calc(50% - 1.7rem);
        left: -3.2rem;
    }

    .title-diamonds::after {
        left: initial;
        right: -3.2rem;
        transform: scaleX(-1);
    }

/*item*/
.item.reverse {
    flex-direction: row-reverse;
}

.item-image img {
    width: 100%;
    max-width: 100%;
}

.item-title {
    font-size: var(--size_30);
    font-weight: 700;
}

.item-desc {
    font-size: var(--size_19);
}

/*** 
====================================================================
6. Index 
====================================================================
***/

/*index-banner*/
.index-banner {
    position: relative;
    top: calc(-1 * var(--header_h));
    margin-bottom: calc(-1 * var(--header_h));
    left: 0;
    height: calc(100dvh - var(--footer_h));
    min-height: 500px;
    width: 100%;
    background: #f2ecde;
}

    .index-banner .banner-image {
        background-image: url(../img/bg-index01.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center bottom;
        width: 100%;
        height: 100%;
    }

    .index-banner .inner-box {
        position: absolute;
        top: 28%;
        left: 11%;
        width: 45%;
        max-width: 40rem;
    }

        .index-banner .inner-box h1 img {
            width: 100%;
            margin-bottom: 0.2rem;
        }

        .index-banner .inner-box p {
            text-align: center;
            color: #334436;
            font-size: var(--size_24);
            font-weight: 500;
            padding: 3px 9px;
            line-height: 1.7;
            margin-top: 1.5rem;
        }

    .index-banner .banner-people {
        position: absolute;
        right: 10%;
        bottom: 0;
        width: 30%;
        max-width: 35rem;
    }

    .index-banner .banner-tree1 {
        position: absolute;
        left: 0;
        bottom: 17%;
        width: 15%;
        transform-origin: left top;
    }

    .index-banner .banner-tree2 {
        position: absolute;
        right: 0;
        top: 17%;
        width: 12%;
        transform-origin: right center;
    }

    .index-banner .banner-tree3 {
        position: absolute;
        top: 27%;
        width: 14%;
        transform-origin: left top;
        display: none;
    }

        .index-banner .banner-tree1 img,
        .index-banner .banner-tree2 img,
        .index-banner .banner-tree3 img {
            width: 100%;
        }

/*.mouse-scroll*/
.mouse-scroll {
    width: 1.6rem;
    height: 3rem;
    border-radius: 999px;
    border: 2px solid #fff;
    padding-top: 0.5rem;
    position: absolute;
    left: 50%;
    bottom: 1rem;
    transform: translateX(-50%);
    text-decoration: none;
    z-index: 3;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

    .mouse-scroll .wheel {
        width: 0.3rem;
        height: 0.8rem;
        border-radius: 999px;
        background: #fff;
        animation: scroll-wheel 1.5s infinite;
    }

@keyframes scroll-wheel {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(1rem);
    }

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

/*index-products*/
.index-products-intro {
    padding: 2rem 0;
    background-color: #FFFDF9;
    position: relative;
    z-index: -1;
}

    .index-products-intro .section-title {
        color: #0A6F92;
    }

    .index-products-intro .subtitle {
        color: var(--color_brown);
    }

        .index-products-intro .subtitle img {
            width: 7.5rem;
            margin-top: -0.2rem;
        }

.index-product {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
}

    .index-product.product-1 {
        background-image: url('../img/bg-index02.jpg');
    }

    .index-product.product-2 {
        background-image: url('../img/bg-index03.jpg');
    }

    .index-product.product-3 {
        background-image: url('../img/bg-index04.jpg');
        padding: 7rem 0;
    }

    .index-product .item {
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
    }

    .index-product .item-image {
        flex: 0 0 33%;
    }

    .index-product.product-1 .item-image {
        padding-right: 8%;
    }

    .index-product.product-2 .item-image {
        padding-left: 8%;
    }

    .index-product.product-3 .item-image {
        flex: 0 0 45%;
        padding-right: 3%;
    }

        .index-product.product-3 .item-image .mini {
            position: absolute;
            right: -3%;
            bottom: -5rem;
            width: 18%;
        }

    .index-product .item-content .item-title {
        color: var(--color_brown);
        font-size: 3rem;
        font-weight: 900;
        margin-bottom: 1.7rem;
    }

    .index-product .item-content .weight {
        font-size: 70%;
        margin-left: 1rem;
        font-weight: 500;
    }

    .index-product .item-content .item-meta {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 20rem;
        margin-bottom: 1.7rem;
    }

    .index-product .item-content .price {
        color: var(--color_blue);
        font-size: var(--size_36);
        font-weight: 500;
    }

    .index-product .item-content .item-desc {
        color: #34576B;
        font-size: var(--size_20);
        font-weight: 500;
        margin-bottom: 1.5rem;
    }

    .index-product.product-3 .item-content .item-desc {
        width: 78%;
    }

    .index-product .item-content .item-desc p {
        margin-bottom: 0.4rem;
    }

    .index-product .item-content .item-more {
        display: flex;
        align-items: center;
        margin-top: 1.5rem;
    }

    .index-product .item-content .more-line {
        background: var(--color_yellow);
        height: 4px;
        display: block;
        width: calc(100% - 14rem);
        margin-left: 1.5rem;
        transition: all 400ms;
    }

    .index-product .item-content .btn-more:hover {
        margin-left: 0.5rem;
    }

        .index-product .item-content .btn-more:hover + .more-line {
            width: calc(100% - 13rem);
        }

/*animate*/
@keyframes animate-shake {
    0% {
        transform: rotate(0deg);
    }

    70% {
        transform: rotate(4deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

@keyframes animate-shake2 {
    0% {
        transform: rotate(0deg);
    }

    70% {
        transform: rotate(-4deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

.animate-shake {
    display: inline-block;
    animation: animate-shake 3s ease-in-out infinite;
    transform-origin: bottom;
}

.animate-shake2 {
    display: inline-block;
    animation: animate-shake2 3s ease-in-out infinite;
    transform-origin: bottom;
}

/*index-howto*/
.index-howto {
    background: #F7F5E8;
}

    .index-howto .section-title {
        color: var(--color_red);
    }

    .index-howto .title-stars {
        font-size: 150%;
        margin-bottom: 0.2rem;
    }

    .index-howto .section-title .en {
        color: #8C8036;
    }

    .index-howto .subtitle {
        color: var(--color_brown);
        font-weight: 900;
    }

    .index-howto .section-intro {
        color: #2F607B;
    }

/*step*/
.step-list {
    max-width: 800px;
    margin: 0 auto;
}

    .step-list .item {
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        margin-bottom: 1.8rem;
    }

    .step-list .item-image {
        flex: 0 0 40%;
        padding-right: 5%;
    }

    .step-list .item-content {
        flex: 0 0 60%;
    }

    .step-list .item-title {
        font-weight: 700;
        display: flex;
        align-items: center;
        margin-bottom: 1rem;
    }

        .step-list .item-title span {
            border-radius: 50%;
            font-size: 75%;
            margin-left: 0.5rem;
            padding: 0.3rem;
            text-align: center;
            background: #bbb;
            color: #F7F5E8;
            display: inline-block;
            width: 2.2rem;
            height: 2.2rem;
            line-height: 1;
        }

    .step-list .item-desc {
        padding: 1rem 1.2rem;
        margin-left: -1.2rem;
        background: #eee;
        line-height: 1.6;
    }

    .step-list .step1 .item-title {
        color: #476565;
    }

    .step-list .step2 .item-title {
        color: #0C6177;
    }

    .step-list .step3 .item-title {
        color: #1F6D97;
    }

    .step-list .step1 .item-title span {
        background: #3EA391;
    }

    .step-list .step2 .item-title span {
        background: #1CACB6;
    }

    .step-list .step3 .item-title span {
        background: #2B97C1;
    }

    .step-list .step1 .item-desc {
        color: #2B4B53;
        background: #EEEEE1;
    }

    .step-list .step2 .item-desc {
        color: #3A2C13;
        background: #FBFCEF;
    }

    .step-list .step3 .item-desc {
        color: #1E4B34;
        background: #EEEEE1;
    }

/*** 
====================================================================
7. About
====================================================================
***/

/*detail-banner*/
.detail-banner {
    height: calc(90dvh - var(--header_h) - var(--footer_h));
    /*height: 40dvh;*/
    min-height: 300px;
    position: relative;
}

    .detail-banner .banner-image {
        background-image: url('../img/bg-about.jpg');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        position: relative;
        display: inline-block;
        height: 100%;
        width: 100%;
    }

    .detail-banner .inner-box {
        position: absolute;
        top: 10%;
        right: 0;
        width: 100%;
        height: 100%;
        text-align: right;
    }

    .detail-banner .inner-box {
        position: absolute;
        top: 30%;
        right: 0;
        width: 100%;
        height: 100%;
        text-align: center;
    }

        .detail-banner .inner-box h1 {
            font-size: 2.8rem;
            font-weight: 700;
            letter-spacing: 0.15rem;
            color: #F4D6BD;
        }

            .detail-banner .inner-box h1 .en {
                display: block;
                color: #fff;
                font-size: 77%;
                letter-spacing: 0;
                line-height: 1.5;
            }

/*about-story*/
.about-story {
    background: #E8E1D5
}

    .about-story .section-title {
        color: #C66F17;
        font-size: 2.5rem;
        margin-top: 1rem;
        margin-bottom: 3rem;
    }

        .about-story .section-title .en {
            color: #1C76A5;
            font-size: 55%;
        }

    .about-story .item {
        display: flex;
        position: relative;
    }

    .about-story .item-image {
        flex: 0 0 33%;
        padding-right: 3%;
        position: relative;
    }

    .about-story .item-title {
        font-size: var(--size_26);
        color: #996B25;
        margin-left: 1.3rem;
        margin-bottom: 1rem;
    }

    .about-story .item-desc {
        color: #084150;
        font-weight: 500;
    }

        .about-story .item-desc p {
            margin-bottom: 0;
            line-height: 1.8;
        }

    .about-story .decor {
        width: 6rem;
        border: 0.105rem solid #FFFFFF;
        display: inline-block;
        transform: rotate(306deg);
        z-index: 1;
        position: absolute;
    }

        .about-story .decor.line1 {
            left: 0;
            top: -6%;
        }

        .about-story .decor.line2 {
            left: 0;
            top: 6%;
            border-color: #6EBFD2;
        }

        .about-story .decor.line3 {
            right: -4rem;
            bottom: 2rem;
        }

/*about-process*/
.about-process {
    padding-bottom: 0;
}

    .about-process .section-title {
        font-size: var(--size_33);
        color: #996B25;
    }

    .about-process .title-half::before {
        background: #EDF7F9;
    }

    .about-process .section-intro {
        line-height: 1.4;
    }

        .about-process .section-intro .first {
            color: #2A6992;
            font-weight: 700;
            margin-bottom: 0.6rem;
        }

        .about-process .section-intro .second {
            color: #552E1A;
            font-weight: 500;
            font-size: 92%;
        }

/*.block-list*/
.block-list {
    background: #F3EFE0;
    display: flex;
    flex-wrap: wrap;
}

    .block-list .item {
        flex: 0 0 50%;
        display: flex;
    }

        .block-list .item:nth-child(3),
        .block-list .item:nth-child(4) {
            flex-direction: row-reverse;
        }

    .block-list .item-image {
        flex: 0 0 50%;
    }

    .block-list .item-content {
        background: #F3EFE0;
        padding: 1rem 5%;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .block-list .item-title {
        font-size: var(--size_32);
        font-weight: 900;
        color: #1877A8;
        text-align: center;
        margin-bottom: 1rem;
    }

    .block-list .item-desc {
        color: #163554;
        line-height: 1.8;
        font-weight: 600;
    }

/*about-craft*/
.about-craft {
    padding-bottom: 0;
}

    .about-craft .section-title {
        font-size: var(--size_28);
        color: #1877A8;
        margin-bottom: 2rem !important;
    }

    .about-craft .bg-stone {
        background-image: url('../img/bg-about2.jpg');
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        padding: 2rem;
    }

    .about-craft .subtitle {
        font-size: var(--size_30);
        font-weight: 900;
        color: #AE6021;
    }

    .about-craft .title-half::before {
        background: #FBE9C080;
    }

    .about-craft .item {
        max-width: 900px;
        background: #fff;
        padding: 2rem 5rem;
        position: relative;
        margin: 0 auto;
    }

    .about-craft .item-title {
        font-size: var(--size_26);
        font-weight: 900;
        text-align: center;
        color: #1877A8;
        margin-bottom: 1rem;
    }

    .about-craft .title-dots::before,
    .about-craft .title-dots::after {
        background: #EFD567;
    }

    .about-craft .item-intro {
        font-size: var(--size_17);
        font-weight: 700;
        text-align: center;
        color: #662F18;
        margin-bottom: 1.3rem;
        line-height: 1.7;
    }

    .about-craft .item-desc {
        color: #084150;
        font-weight: 500;
        line-height: 1.7;
        margin-bottom: 1.5rem;
        position: relative;
    }

        .about-craft .item-desc::before,
        .about-craft .item-desc::after {
            content: '';
            background-image: url('../img/icon-quotation.png');
            background-repeat: no-repeat;
            background-size: contain;
            width: 3rem;
            height: 3rem;
            position: absolute;
            left: -1.8rem;
            top: -1.8rem;
        }

        .about-craft .item-desc::after {
            left: initial;
            top: initial;
            right: -1.8rem;
            bottom: -1.8rem;
            transform: rotate(180deg);
        }

        .about-craft .item-desc p {
            margin-bottom: 0;
        }

    .about-craft .link-btn {
        border-color: #98886D;
        color: #FFE9E4 !important;
    }

        .about-craft .link-btn span {
            background-color: #98886D;
        }

            .about-craft .link-btn span:before,
            .about-craft .link-btn span::after {
                background-image: url('../img/icon-flower2.png');
            }

/*** 
====================================================================
8. Prouduct
====================================================================
***/

.product-banner {
    padding: 3rem 0;
}

    .product-banner.bg1 {
        background-image: url('../img/bg-product1.jpg');
        background-size: contain;
        position: relative;
        display: inline-block;
        height: 100%;
        /*height: calc(100dvh - var(--header_h) - var(--footer_h));*/
        width: 100%;
    }

    .product-banner .item {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .product-banner .item-image {
        flex: 0 0 38%;
        margin-right: 3%;
        position: relative;
    }

    .product-banner .icons-box {
        position: absolute;
        left: 5%;
        top: 5%;
        width: 90%;
        height: 90%;
    }

        .product-banner .icons-box img {
            position: absolute;
            width: 3rem;
        }

            .product-banner .icons-box img.icon1 {
                top: 0;
                left: 0;
            }

            .product-banner .icons-box img.icon2 {
                top: 0;
                right: 0;
            }

            .product-banner .icons-box img.icon3 {
                bottom: 0;
                left: 0;
            }

            .product-banner .icons-box img.icon4 {
                bottom: 0;
                right: 0;
            }

    .product-banner .item-title {
        font-size: 5.3rem;
        font-weight: 900;
        color: #C78F0E;
        letter-spacing: 0.3rem;
        margin-bottom: 1.5rem;
    }

    .product-banner .subtitle {
        font-size: var(--size_24);
        color: #4E5427;
        font-weight: 600;
        margin-bottom: 1.5rem;
        padding: 0 0.4rem;
        letter-spacing: 0.08rem;
    }

        .product-banner .subtitle .title-lines::after {
            right: -100%;
            width: 96%;
        }

    .product-banner .title-lines::before,
    .product-banner .title-lines::after {
        background: #97942E;
    }

    .product-banner .item-desc {
        color: #084150;
        font-size: var(--size_17);
        line-height: 1.8;
    }

    /*product2*/
    .product-banner.bg2 {
        background-image: url('../img/bg-product2.jpg');
    }

        .product-banner.bg2 .item-title {
            color: #6B5933;
        }

        .product-banner.bg2 .subtitle {
            color: #B4432B;
        }

        .product-banner.bg2 .title-lines::before,
        .product-banner.bg2 .title-lines::after {
            background: #E6A988;
        }

/*product1-1*/
.product1-1 {
    background: #DBCEBA;
    height: 100dvh;
    padding: 0;
    overflow: hidden;
}

    .product1-1 .item {
        position: relative;
        height: 100%;
    }

    .product1-1 .item-image {
        position: absolute;
        width: 35%;
        max-width: 38rem;
    }

        .product1-1 .item-image::before {
            content: '';
            position: absolute;
            border: 0.4rem solid #B7AF51;
            border-radius: 50%;
            width: 200%;
            height: 200%;
            transition: all 1s 0.8s;
            border-top-width: 0 !important;
            border-left-width: 0 !important;
        }

        .product1-1 .item-image.left {
            left: 0;
            bottom: 0;
        }

        .product1-1 .item-image.aos-animate::before {
            border-top-width: 0.4rem !important;
            border-left-width: 0.4rem !important;
        }

        .product1-1 .item-image.left::before {
            left: calc(-100% + 1.6rem);
            bottom: calc(-100% + 1.6rem);
        }

        .product1-1 .item-image.right {
            right: 0;
            top: 0;
            border-top-width: 0;
        }

            .product1-1 .item-image.right::before {
                right: calc(-100% + 1.6rem);
                top: calc(-100% + 1.6rem);
            }


    .product1-1 .item-content {
        position: absolute;
        width: 29%;
        top: 30%;
        left: 37%;
        z-index: 1;
    }

    .product1-1 .subtitle {
        font-size: var(--size_32);
        text-align: left;
        font-weight: 900;
        letter-spacing: 0.08rem;
        margin-bottom: 1.2rem;
        background: #F2F1DE;
        display: inline-block;
        padding: 1rem 1.5rem;
        color: #564A21;
    }

    .product1-1 .item-title {
        font-size: 4rem;
        font-weight: 900;
        color: #066D88;
        margin-bottom: 0.3rem;
    }

    .product1-1 .item-desc {
        font-size: var(--size_20);
        color: #883A22;
        font-weight: 600;
        line-height: 1.7;
        padding: 0.5rem 2rem;
    }

/*product2-1*/
.product2-1 {
    background: #F1ECDB;
}

    .product2-1 .subtitle {
        background: #FDE8D6CC;
    }

    .product2-1 .item-title {
        color: #A03C24;
    }

    .product2-1 .item-desc {
        color: #163554;
    }

    .product2-1 .item-image::before {
        border-color: #E09056;
    }

/*product1-2*/
.text-vertical {
    writing-mode: vertical-rl;
}

.product1-2-intro {
    background: #F6F4E7;
    padding: 1.8rem 0;
}

    .product1-2-intro .section-title {
        font-size: var(--size_23);
        margin-bottom: 0 !important;
        font-weight: 600;
        color: #7E7C2C;
        line-height: 1.5;
    }

.product1-2 {
    background: #C6CBC3;
    height: 170dvh;
    padding: 0;
    overflow: hidden;
}

    .product1-2 .item {
        position: relative;
        height: 100%;
    }

    .product1-2 .item-image {
        position: absolute;
        width: 35%;
        max-width: 36rem;
    }

        .product1-2 .item-image.right {
            width: 33%;
            right: 0;
            top: 5%;
        }

        .product1-2 .item-image.left {
            width: 36%;
            left: 0;
            bottom: 4%;
        }

        .product1-2 .item-image .decor {
            background: #ECE3D5;
            border-radius: 50%;
            display: block;
            width: 42dvw;
            height: 42dvw;
            position: absolute;
            left: -5%;
            top: -3%;
        }

    .product1-2 .item-content {
        position: absolute;
        width: 25%;
        top: 6%;
        left: 44%;
        z-index: 1;
    }

    .product1-2 .item-title {
        font-size: 0 !important;
        font-weight: 900;
        color: #0F6168;
        letter-spacing: 0.2rem;
    }

        .product1-2 .item-title span {
            font-size: 7.4rem;
            padding-bottom: 0.5rem;
            display: inline-block;
        }

        .product1-2 .item-title .line {
            background: #7A8FB1;
            width: 0.4rem;
            height: 8rem;
            margin: 1rem 0;
        }

    .product1-2 .bottom {
        width: 16rem;
        margin-left: auto;
        margin-top: 70%;
        align-items: flex-start;
        justify-content: space-between;
    }

    .product1-2 .item-title.text-right {
        color: #163F58;
    }

    .product1-2 .item-desc {
        font-size: var(--size_36);
        color: #0F783D;
        font-weight: 600;
        padding-top: 20%;
        margin-left: -0.5rem;
    }

    .product1-2 .subtitle {
        font-size: var(--size_28);
        color: #115030;
        font-weight: 600;
        padding-top: 15%;
    }

    .product1-2 .title-half::before {
        background: #E4F2EB;
        height: 105%;
        left: 50%;
        right: 0;
        top: -0.5rem;
        bottom: -0.5rem;
    }

/*product2-2*/


/*product1-3*/
.product1-3 {
    background-image: url('../img/bg-product1-g.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    display: inline-block;
    height: 100%;
    width: 100%;
    padding: 2rem 0;
}

    .product1-3 .item {
        display: flex;
        align-items: center;
        margin: 3.2rem 0;
    }

    .product1-3 .item-image {
        flex: 0 0 45%;
        padding-right: 2%;
        position: relative;
        overflow: hidden;
    }

    .product1-3 .reverse .item-image {
        padding-right: 0;
        padding-left: 2%;
    }

    .product1-3 .item-image img {
        position: relative;
        z-index: 1;
    }

    .product1-3 .item-image .decor {
        display: block;
        width: 100%;
        height: 200%;
        background: #cdb249;
        border-radius: 0 49%;
        position: absolute;
        top: -2%;
        left: 0;
        z-index: 0;
    }

    .product1-3 .reverse .item-image .decor {
        border-radius: 49% 0;
    }

    .product1-3 .item2 .item-image .decor {
        background: #9E9C2A;
    }

    .product1-3 .item3 .item-image .decor {
        background: #8A985C;
    }

    .product1-3 .item-content {
        margin: 0 10%;
    }

    .product1-3 .item-title {
        font-size: 4.5rem;
        font-weight: 900;
        text-align: center;
        color: #1A4F5D;
        position: relative;
        padding-bottom: 0.7rem;
    }

        .product1-3 .item-title .line {
            position: absolute;
            background: #1EABBA;
            height: 0.4rem;
            width: 108%;
            left: -4%;
            bottom: 0;
        }

    .product1-3 .item-desc {
        font-size: var(--size_24);
        color: #573618;
        font-weight: 700;
        text-align: center;
        line-height: 1.4;
    }

/*product2-3*/
.product2-3 {
    background-image: url(../img/bg-product2-p.jpg);
}

    .product2-3 .item1 .item-image .decor {
        background: #7198B9;
    }

    .product2-3 .item2 .item-image .decor {
        background: #8BAEA7;
    }

    .product2-3 .item-title .line {
        background: #89BCCC
    }

    .product2-3 .item-title {
        color: #755036;
    }

    .product2-3 .item-desc {
        color: #163554;
    }

.bg-brown {
    background: #D79F87;
}

/*product1-4*/
.product1-4 {
    background: #FEF6ED;
    padding: 0;
}

    .product1-4 .item {
        display: flex;
        height: 90dvh;
        min-height: 40rem;
        overflow: hidden;
    }

    .product1-4 .item-image {
        flex: 0 0 50%;
        max-width: 38rem;
        overflow: hidden;
    }

    .product1-4 .item-content {
        padding: 5rem 10%;
        height: 100%;
    }

    .product1-4 .decor {
        width: 0.26rem;
        height: 40%;
        display: block;
        background: #F39E63;
        margin-left: calc(50% - 0.13rem);
        margin-top: 0.8rem;
        margin-bottom: 0.8rem;
    }

    .product1-4 .item-title {
        font-size: 3.5rem;
        font-weight: 900;
        text-align: center;
        color: #AA3600;
        margin-bottom: 0.8rem;
    }

    .product1-4 .subtitle {
        font-size: var(--size_32);
        text-align: center;
        font-weight: 700;
        color: #1877A8;
        margin-bottom: 1rem;
    }

        .product1-4 .subtitle .title-dots::before,
        .product1-4 .subtitle .title-dots::after {
            background: #F5B442;
        }

    .product1-4 .item-desc .heading {
        text-align: center;
        font-weight: 900;
        color: #125E91;
        font-size: var(--size_22);
        margin-bottom: 0.7rem;
    }

    .product1-4 .item-desc {
        color: #223F5C;
        font-size: var(--size_18);
        line-height: 1.8;
        font-weight: 500;
    }

        .product1-4 .item-desc strong {
            color: #A55E29;
            font-weight: 500;
        }

/*product1-5*/
.product1-5 {
    background: #EBE0D5;
    display: flex;
    gap: 1rem;
}

    .product1-5 .item {
        display: flex;
        flex-direction: column;
    }

        .product1-5 .item.reverse {
            flex-direction: column-reverse;
        }

        .product1-5 .item.right .item-image {
            padding: 0px 16%;
            position: relative;
        }

        .product1-5 .item.left .item-content {
            padding: 1rem 4rem 4rem 8rem
        }

        .product1-5 .item.right .item-content {
            padding: 1rem 8rem 4rem 4rem
        }

    .product1-5 .item-desc {
        color: #223F5C;
        font-size: var(--size_19);
        line-height: 1.8;
        font-weight: 500;
    }

    .product1-5 .decor {
        font-size: var(--size_32);
        font-weight: 800;
        color: #967D36;
        position: absolute;
    }

    .product1-5 .title-half::before {
        background: #F7EDD6;
        height: 75%;
        left: -0.6rem;
        right: -0.6rem;
        bottom: -0.6rem;
    }

    .product1-5 .decor::after {
        content: '';
        background: #967D36;
        display: block;
        height: 2px;
        width: 3.5rem;
        position: absolute;
        z-index: -1;
        bottom: -2.5rem;
    }

    .product1-5 .decor.decor1 {
        left: 12%;
        top: 2%;
    }

        .product1-5 .decor.decor1::after {
            transform: rotate(57deg);
            left: 40%;
        }

    .product1-5 .decor.decor2 {
        right: 13%;
        top: 0;
    }

        .product1-5 .decor.decor2::after {
            transform: rotate(-57deg);
            right: 40%;
        }

    .product1-5 .decor.decor3 {
        right: 10%;
        bottom: 12%;
    }

        .product1-5 .decor.decor3::after {
            display: none;
        }

.product1-6 {
    background: #FEF6ED;
}

    .product1-6 .section-title {
        font-size: 2.8rem;
        color: #C78F0E;
        margin: 1rem 0 1.5rem 0;
    }

        .product1-6 .section-title .title-dots::before,
        .product1-6 .section-title .title-dots::after {
            background: #0D7CAC;
        }

    .product1-6 .item-desc {
        font-weight: 500;
        color: #223F5C;
        line-height: 1.7;
    }

        .product1-6 .item-desc p {
            margin-bottom: 0;
            max-width: 78rem;
            padding: 1rem 3rem;
            margin-left: auto;
            margin-right: auto;
        }
/*** 
====================================================================
9. Form
====================================================================
***/
/*-----input-----*/
.form-group {
    margin-bottom: 1rem;
}

    .form-group, .form-group > div {
        position: relative;
    }

        .form-group, .form-group.row {
            align-items: center;
        }

            .form-group > .control-label,
            .form-group > .control-text {
                padding-top: 7px;
                padding-right: 0;
                margin-bottom: 3px;
                position: relative;
                font-size: var(--size_16);
            }

            .form-group.row > .control-label {
                text-align: right;
                width: 6rem;
                padding: 0 0.5rem;
            }

            .form-group.row > .control-text {
                width: calc(100% - 6.5rem);
                padding: 0 0.5rem;
            }


            .form-group.row.sm > .control-label {
                width: 4rem;
            }

            .form-group.row.sm > .control-text {
                width: calc(100% - 4.5rem);
            }

            .form-group.row.lg-11 > .control-label {
                width: 11rem;
            }

            .form-group.row.lg-11 > .control-text {
                width: calc(100% - 11rem);
            }

            .form-group.row.lg-75 > .control-label {
                width: 7.5rem;
            }

            .form-group.row.lg-75 > .control-text {
                width: calc(100% - 8rem);
            }


            .form-group .mark-required {
                color: #DB0000;
                font-size: var(--size_20);
                margin: 0 1px;
                line-height: 0;
            }

            .form-group .btn-box {
                margin: 4rem 0 3rem 0;
            }

            /*error*/
            .form-group .field-validation-error {
                font-size: 90%;
            }

            .form-group > div > .field-validation-error {
                right: 20px;
            }

            .form-group .form-control.input-validation-error,
            .form-group .form-control.input-validation-error:focus {
                border-color: #D80916;
            }

            .form-group.address {
                margin-left: -1rem;
            }

.modal .form-group.address {
    margin-left: calc(5.5rem);
}

/*placeholder*/
.form-control::-webkit-input-placeholder {
    color: #909090;
}

.form-control::-moz-placeholder {
    color: #909090;
}

.form-control:-ms-input-placeholder {
    color: #909090;
}

.form-control::-ms-input-placeholder {
    color: #909090;
}

.form-control::placeholder {
    color: #909090;
}

/*input*/
.form-control {
    font-size: 1rem;
    color: var(--text_black);
    height: calc(1.5em + 1.2rem + 2px);
    padding: 0.6rem 1rem;
    border-radius: 0.15rem;
    /* height: auto; */
    font-size: var(--size_15);
}

    .form-control:focus {
        box-shadow: none;
    }

/*.input-group-text {
    font-size: var(--size_18);
    color: var(--text_gray);
    padding: 0.375rem 1.5rem;
    background-color: #ebebeb;
    border: none;
}*/

/*select*/
.bootstrap-select > .btn {
    padding: 0.85rem 1rem 0.82rem 1rem;
}

.bootstrap-select > .dropdown-toggle,
.bootstrap-select > .dropdown-toggle:active,
.bootstrap-select > .dropdown-toggle:focus,
.bootstrap-select > .dropdown-toggle:hover {
    color: var(--text_black);
    border-color: #ced4da;
    background-color: #fff !important;
    outline: none !important;
    box-shadow: none !important;
}

    .bootstrap-select > .dropdown-toggle.bs-placeholder {
        color: var(--text_gray);
    }

    .bootstrap-select > .dropdown-toggle:focus,
    .bootstrap-select > .dropdown-toggle:hover,
    .bootstrap-select > .dropdown-toggle:active {
        border-color: var(--color_blue) !important;
        opacity: 1;
    }

    .bootstrap-select.disabled > .dropdown-toggle,
    .bootstrap-select > .dropdown-toggle:disabled,
    .bootstrap-select > .dropdown-toggle:disabled:hover,
    .bootstrap-select > .dropdown-toggle[readonly] {
        background-color: #f0f0f0 !important;
        border-color: #ced4da !important;
        cursor: initial;
        opacity: 1;
    }

/*disabled*/
.form-control:disabled, .form-control[readonly] {
    background-color: #f0f0f0;
}

.form-control.primary:disabled, .form-control.primary[readonly] {
    background-color: var(--light_blue);
    color: var(--dark_blue);
    border-color: transparent;
}

/*checkbox*/
input[type=checkbox], input[type=radio] {
    width: 1.2rem;
    height: 1.2rem;
}

.form-check {
    position: relative;
    display: inline-block;
    padding-left: 0;
}

.form-check-label {
    position: relative;
    left: 1.75rem;
    margin-right: 1.75rem;
    cursor: pointer;
    transition: all 400ms;
}

    .form-check-label:hover {
        opacity: 0.8;
    }

.form-check-input {
    position: absolute;
    margin-top: 0.1rem;
    margin-left: -1.75rem;
}

.form-check-inline .form-check-input {
    margin-right: .6rem;
}

/*radio*/
.radio, .checkbox {
    position: relative;
    font-size: var(--size_16);
    display: inline-block;
    margin-right: 0.4rem;
    margin-bottom: 0.5rem;
}

    .radio label, .checkbox label {
        display: flex;
        align-items: center;
        transition: all 400ms;
        margin-bottom: 0;
        position: relative;
    }

    .radio.other .form-control {
        position: absolute;
        width: 13rem;
        left: 3.8rem;
        top: -0.55rem;
    }

    .radio label:hover, .checkbox label:hover {
        opacity: 0.8;
    }

    .radio input[type="radio"], .checkbox input[type="checkbox"] {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        cursor: pointer;
        position: relative;
        width: 22px;
        height: 22px;
        overflow: hidden;
        border: 1px solid #d8d8e4;
        background-color: #fff;
        margin-right: 0.25rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .radio label span,
    .checkbox label span {
        width: calc(100% - 22px - 0.25rem);
    }

    .radio input[type="radio"] {
        border-radius: 50%;
    }

    .radio input:before,
    .checkbox input:before {
        content: '';
        width: 14px;
        height: 14px;
        border-radius: 50%;
        font-weight: 800;
        color: #fff;
        text-align: center;
        line-height: 1;
    }

    .checkbox input:before {
        content: "\f00c";
        font-family: "Font Awesome 5 Pro";
    }

    .radio input:checked:before, .checkbox input:checked:before {
        color: var(--color_blue);
    }

    .radio input:checked:before {
        content: ''; /*'circle'*/
        background: var(--color_blue);
    }

    .radio .form-control {
        display: inline-block;
        width: calc(100% - 5rem);
        margin-left: 0.5rem;
    }



/*custom*/
/*.custom-radio,*/
.custom-check {
    display: inline-block;
    position: relative;
    margin-right: 3px;
    margin-bottom: 3px;
}

    /*.custom-radio.disabled,*/
    /* .custom-check.disabled {
        opacity: 0.5;
    }*/

    /*.custom-radio.disabled .btn,*/
    .custom-check.disabled .btn {
        opacity: 1;
    }

    /*.custom-radio.disabled input:checked + span.btn-outline-blue,*/
    .custom-check.disabled input:checked + span.btn-outline-blue,
    .custom-check.disabled input:checked + span.btn-outline-blue:hover {
        opacity: 1;
        color: var(--color_blue);
        border-color: var(--color_blue);
        background: var(--light_blue);
    }

    /*.custom-radio label,*/
    .custom-check label {
        margin-bottom: 0;
    }

    /*.custom-radio input,*/
    .custom-check input[type="checkbox"] {
        position: absolute;
        opacity: 0;
    }

        /*.custom-radio input:not(:checked) + span,*/
        .custom-check input[type="checkbox"]:not(:checked) + span {
            border-color: #EAEAEA;
            color: #272727;
            background: #fff
        }

        /*.custom-radio input:checked + span:before,*/
        .custom-check input[type="checkbox"]:checked + span:before {
            content: "\f00c"; /*'circle'*/
            font-family: "Font Awesome 5 Pro";
            font-weight: 800;
            position: relative;
            padding-right: 4px;
            /*background: #fff;*/
            border-radius: 50%;
            top: 0;
            left: 0;
        }

    /*.custom-radio label span.btn,*/
    .custom-check label span.btn {
        display: block;
        width: auto;
        padding: 0.8rem 1.3rem;
    }

    /*other input*/
    .custom-check label [type="text"] {
        display: none !important;
    }

    .custom-check label input[type="checkbox"]:checked + span + [type="text"] {
        display: inline-block !important;
    }

/*switch*/
.radio-switch {
    display: inline-flex;
    align-items: center;
    background: transparent linear-gradient(180deg, #FFFFFF 0%, #EAEAEA 100%) 0% 0% no-repeat padding-box;
    border: 1px solid #E3E3E3;
    border-radius: 1.25rem;
}

    .radio-switch.disabled {
        background: transparent linear-gradient(180deg, #cacaca 0%, #cacaca 100%) 0% 0% no-repeat padding-box;
        color: #8a8a8a;
    }

    .radio-switch label {
        position: relative;
        margin-bottom: 0;
        cursor: pointer;
    }

    .radio-switch input[type=checkbox],
    .radio-switch input[type=radio] {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        cursor: pointer;
        width: 0;
        height: 0;
    }

    .radio-switch span {
        position: relative;
        width: 3.5rem;
        height: 2.5rem;
        display: inline-block;
        text-align: center;
        display: inline-block;
        line-height: 2.5rem;
    }

input.control-switch:checked::after {
    content: "";
    position: absolute;
    border-radius: inherit;
    transition: -webkit-transform 80ms;
    transition: transform 80ms;
    top: 0;
    left: 0;
    width: 4rem;
    height: 2.5rem;
    border-radius: 1.25rem;
}

input.control-switch:checked:after {
    background-color: var(--color_blue);
}

input.control-switch:checked + span {
    color: #fff;
}

/*---tooltip---*/

.help-button {
    display: inline-block;
    color: #909090;
    cursor: default;
    margin-left: 2px;
    /*    -webkit-box-shadow: 0 1px 0 1px rgba(0,0, 0,0.2);
    box-shadow: 0 1px 0 1px rgba(0,0,0,0.2);*/
}

.tooltip {
    font-size: 1rem;
}

    .tooltip.show {
        opacity: 1;
    }

.tooltip-inner {
    max-width: 13rem;
    padding: 0.8rem 1rem;
    background-color: #505050;
    text-align: left;
}

.bs-tooltip-bottom .arrow::before {
    border-bottom-color: #505050;
}

/*** 
====================================================================
10. Table
====================================================================
***/

/*-----table 共用-----*/
.css_table {
    display: table;
    border-collapse: collapse;
    width: 100%;
    max-width: 100%;
}

.css_tr {
    display: table-row;
    background: #fff;
}

.css_th, .css_td {
    display: table-cell;
    position: relative;
    vertical-align: middle;
    padding: 1.15rem 0.5rem 1.15rem 1.5rem;
    font-size: var(--size_15);
    color: #272727;
    line-height: 1;
}

.css_th {
    background: #797979;
    color: #fff;
}

.css_td {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 2px solid #f8f8f8;
}

.css_td_title {
    display: none;
    color: #2B2B2B;
    font-weight: 600;
    width: 6rem;
}