@charset "UTF-8";
/* 頁面區塊(header/footer) 元素樣式(a/select) 組件樣式(card/list) 規則(margin/float) 表單系統(form) 表格系統(table/RWD table) */
:root{
    --wedding:#D99D57;
    --weddin-a:#885100;
}
*,html {font-family:'WenQuanYi Zen Hei','文泉驛正黑','Heiti TC','黑體-繁','LiHei Pro','儷黑 Pro','PingFang TC','Microsoft JhengHei','微軟正黑體',sans-serif;}
body{background:url(../img/bg-p.png);background-repeat:repeat}

/* 頁面區塊(header/footer) */

/* 元素樣式(a/select) */

/* 組件樣式(card/list) */
.border-wedding{border-color:var(--wedding)!important}
/* #afaca9 !important */
.bg-op2{background-color:rgba(255,255,255,.35)}
.bg-op3{background-color:rgba(255,255,255,.55)}
.nav-wedding>a{
    position: relative;
    padding: 1rem 1.25rem 1.25rem 1.25rem;
    font-size: 1.75rem;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    color:var(--weddin-a);
}
.nav-wedding .nav-link.active, .nav-wedding .show>.nav-link{
    color: var(--bs-dark);
    background-color:var(--bs-white);
}
.nav-wedding .nav-link.active::before, .nav-wedding .show>.nav-link::before{
    content: " ";
    position: absolute;
    right: 50%;
    bottom: -10px;
    width: 0; 
    height: 0; 
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;   
    border-top: 12px solid var(--wedding);
}
.nav-wedding>a::after{
    content: " ";
    position: absolute;
    width: 100%;
    height: 4px;
    left: 0;
    bottom: 0;
    background:#eaeaea;
}

.nav-wedding .nav-link.active::after, .nav-wedding .show>.nav-link::after{
    background:var(--wedding);
}
/* 規則(margin/float) */
/* 表單系統(form) */
/* 表格系統(table/RWD table) */
/* 動畫系統 */
.cat {
    position: relative;
    width: 100%;
    max-width: 20em;
    overflow: hidden;
}
.cat::before {
    content: "";
    display: block;
    padding-bottom: 100%;
}
.cat:active > * {
    -webkit-animation-play-state: running;
    animation-play-state: running;
}

.cat__body, .cat__tail, .cat__head {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    -webkit-animation: rotating 2.79s cubic-bezier(0.65, 0.54, 0.12, 0.93) infinite;
    animation: rotating 2.79s cubic-bezier(0.65, 0.54, 0.12, 0.93) infinite;
}
.cat__tail::before, .cat__head::before {
    content: "";
    position: absolute;
    width: 50%;
    height: 50%;
    background-size: 200%;
    background-repeat: no-repeat;
    background-image: url("../img/loading-cat.png");
}
.cat__body::before{
    content: "";
    position: absolute;
    width: 50%;
    height: 50%;
    background-size: 200%;
    background-repeat: no-repeat;
    background-image: url("../img/loading-cat2.png");
}

.cat__head::before {
    top: 0;
    right: 0;
    background-position: 100% 0%;
    transform-origin: 0% 100%;
    transform: rotate(88deg);
}

.cat__tail {
    -webkit-animation-delay: 0.2s;
    animation-delay: 0.2s;
}
.cat__tail::before {
    left: 0;
    bottom: 0;
    background-position: 0% 100%;
    transform-origin: 100% 0%;
    transform: rotate(-30deg);
}

.cat__body {
    -webkit-animation-delay: 0.1s;
    animation-delay: 0.1s;
}
.cat__body:nth-of-type(2) {
    -webkit-animation-delay: 0.2s;
    animation-delay: 0.2s;
}
.cat__body::before {
    right: 0;
    bottom: 0;
    background-position: 100% 100%;
    transform-origin: 0% 0%;
}

@-webkit-keyframes rotating {
    from {
        transform: rotate(720deg);
    }
    to {
        transform: none;
    }
}

@keyframes rotating {
    from {
        transform: rotate(720deg);
    }
    to {
        transform: none;
    }
}
.loading-box {
    position: fixed;
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: flex-start;
    justify-content: center;
    align-items: center;
    background-color: #e6dcdcdd;
    z-index: 999;
    width: 100%;
    height: 100%;
}


/* 當螢幕小於767px時 */
@media screen and (max-width:767px) {
    .index-header img{width:90%;height:auto}

}

/*當螢幕大於768px時*/
@media screen and (min-width:768px) {
    .index-header img{width:80%;height:auto}
}


/*當螢幕大於992px時*/
@media screen and (min-width:992px) {
    .index-header img{width:60%;height:auto}
}

/*當螢幕大於1200px時*/
@media screen and (min-width:1200px) {
    .index-header img{width:50%;height:auto}
}