/* 各字體變數 */
:root {
    --primary: #8474ae;
    --primary-dark: #412c7a;
    --primary-variant: #715aaf;
    --light: #d1cbdc;
    --secondary: #fcd7d0;
    --secondary-variant: #fcccc6;
    --secondary-variant-rgb: 252, 204, 198;
    --white: #f4f3f6;
}

@font-face {
    font-family: RHR-Medium;
    src: url("assets/font/ResourceHanRoundedTW-Medium.ttf");
    font-weight: 999;
    font-style: normal;
}

@font-face {
    font-family: RHR-Bold;
    src: url("assets/font/ResourceHanRoundedTW-Medium.ttf");
    font-weight: 1;
    font-style: normal;
}

@font-face {
    font-family: RHR-Heavy;
    src: url("assets/font/ResourceHanRoundedTW-Heavy.ttf");
    font-weight: normal;
    font-style: normal;
}

* {
    font-family: RHR-Heavy, serif;
}

/* common */
/* 字體 */
.article p::first-letter {
    font-size: 150%;
}

.letter-space2 {
    letter-spacing: 2px;
}

.fw-700 {
    font-weight: 700;
}

.f-16{
    font: normal normal 600 16px/32px RHR-Medium;
}

.f-20{
    font: normal normal 700 20px/20px RHR-Medium;
}

.text-vertical {
    writing-mode: vertical-lr;
}

.icon-link {
    display: block;
    width: 60px;
    height: 60px;
}

.bg-cover {
    background-size: cover;
    background-position: center;
}

.bg-contain {
    background-size: contain;
    background-position: center;
}

.bg-full {
    min-height: 200px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.outline-none{
    outline:0 ;
}

/* navbar */
.navbar {
    padding: 1em;
}

.bg-circle::before {
    position: absolute;
    z-index: -1;
    margin-top: -0.2em;
    width: 2em;
    height: 2em;
    content: "";
    background-color: var(--secondary);
    border-radius: 50%;
}

/* header */
.square-frame {
    outline: solid white 5px;
    outline-offset: -15px;
    z-index: -1;
    position: relative;
}

.header-boxes {
    margin-top: -90px;
    width: 100%;
}

.header-box {
    height: 256px;
    border-left: 2px solid white;
    border-right: 2px solid white;
}

.header-card-text {
    font: normal normal 400 40px/80px RHR-Bold ;
    letter-spacing: 10px;
    color: white;
    opacity: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

@media (min-width: 768px) {
    .header-boxes, .article-container {
        width: 80%;
    }
    .header-card-text{
        font: normal normal 400 50px/80px RHR-Bold ;
    }
}

.bg-mask {
    height: 100%;
    backdrop-filter: blur(3px);
    background-color: rgba(132, 116, 174, 0.75);
}

.bg-mask:hover {
    color: var(--primary);
    background-color: rgba(252, 215, 208, 0.75);
    backdrop-filter: blur(0px);
    font-weight: 700;
    transition: filter .5s;
}

.article {
    background: var(--secondary);
    font: normal normal normal 16px/32px RHR-Heavy;
}

.article-title {
    font: normal normal 400 40px/80px RHR-Bold ;
    border-top: 2px solid var(--primary-variant);
    border-bottom: 2px solid var(--primary-variant);
    margin-bottom: 30px;
}

.article-subtitle {
    font: normal normal 400 20px/40px RHR-Medium ;
}

@media (min-width: 768px) {
    .article {
        font: normal normal normal 16px/32px RHR-Heavy;
    }
}

/* footer */
.input-bar-icon{
    position: absolute;
    top: 8px;
    left: 8px;
}

.input-bar{
    position: relative;
}


/* product */
.prod-image{
    height: 288px;
}

/* list */
.list-hover-1:hover{
    background-color: var(--primary-variant) !important;
    /*color: var(--light) !important;*/
}

.list-hover-2:hover{
    background-color: var(--secondary-variant) !important;
    cursor: pointer;
}

.list-hover-3:hover{
    cursor: pointer;
}

.accordion-collapse.collapsing {
    border: 1px solid rgba(0, 0, 0, 0.125);
    border-top: 5px solid rgba(var(--bs-primary-dark-rgb), 0.8);
    border-bottom: 5px solid rgba(var(--bs-primary-dark-rgb), 0.8);
}

.accordion-collapse.show {
    border-top: 5px solid rgba(var(--bs-primary-dark-rgb), 0.5);
    border-bottom: 5px solid rgba(var(--bs-primary-dark-rgb), 0.5);
}