html{ /*黑色主題*/
    --bg-color: #252525; /*背景顏色*/
}

html[white]{ /*白色主題*/
    --bg-color: #fff; /*背景顏色*/    
}

.backdrop{
    background-color: var(--bg-color);
    width: 100%;
    height: 100%;
}

/*基本亮背景*/
.backdrop-light{
    width: 100%;
    height: 100%;
    background-image: url('../assets/image/bak_light.jpg');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
}

/*基本暗背景*/
.backdrop-dark{
    width: 100%;
    height: 100%;
    background-image: url('../assets/image/bak_dark.jpg'); 
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
}

/* 邊角框設計 
    使用時，最外層一定要有position: relative;
*/
.image-border {
    position: absolute;
    width: 30px;
    height: 30px;
}        
.image-border-left-top {
    top: -2px;
    left: -2px;
    border-left: 2px solid #B9C1AD;
    border-top: 2px solid #B9C1AD;
}
.image-border-right-top {
    top: -2px;
    right: -2px;
    border-right: 2px solid #B9C1AD;
    border-top: 2px solid #B9C1AD;
}   
.image-border-left-bottom {
    bottom: -2px;
    left: -2px;
    border-bottom: 2px solid #B9C1AD;
    border-left: 2px solid #B9C1AD;
}    
.image-border-lright-bottom {
    bottom: -2px;
    right: -2px;
    border-right: 2px solid #B9C1AD;
    border-bottom: 2px solid #B9C1AD;
}

/* 拉軸隱藏
用兩個div將拉軸藏起來
*/
.scroll-outer-container{
    position: relative;
    overflow: hidden;
}
.scroll-outer-container .scroll-inner-container{
	position: absolute;
	left: 0;
	top: 0;
	right: -18px;
	bottom: 0;
	overflow-x: hidden;
	overflow-y: scroll;
}

/* 省略字符*/
.ellipsis {
    overflow:hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* 拉軸固定黑色*/
.scrollstyle::-webkit-scrollbar {
    width: 5px;
}
.scrollstyle::-webkit-scrollbar-track {
  margin: 6px;
  background: transparent;
}
.scrollstyle::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: #94998a;
}
.scrollstyle::-webkit-scrollbar-thumb:hover {
  /* background: #555; */
}
.scrollstyle::-webkit-scrollbar-button {
  display: none;
}

.leftInOut-enter-active, .leftInOut-leave-active {
    transition: all 0.7s;
}
.leftInOut-enter, .leftInOut-leave-to /* .list-leave-active below version 2.1.8 */ {
    opacity: 0;
    transform: translateX(-150px);    
}