@charset "utf-8";
/* local font */
/* @import url("../font/font.css"); */

/* Circle by CSS3*/
.circle {
    width:1.25rem;height:1.25rem;
    border-radius:999em;
}

.c0 {
    background-color:rgb(255, 255, 255);
}
.c1 {
    background-color:rgb(115, 212, 135);
}

.c2 {
    background-color:rgb(151, 130, 227);
}

.c3 {
    background-color:rgb(115, 186, 244);
}

.c4 {
    background-color:rgb(78, 205, 64);
}

.c5 {
    background-color:rgb(255, 128, 98);
}

.c6 {
    background-color:rgb(253, 211, 88);
}
.c7 {
    background-color:rgb(242, 211, 154);
}
.c8 {
    background-color:rgb(140, 242, 244);
}
.c10 {
    background-color:rgb(211, 239, 243);
}
.c11 {
    background-color:rgba(9, 1, 154, 0.946);
}

.tc1 {
    background-color: rgb(242, 252, 252);
}
.tc2 {
    background-color: rgb(177, 242, 248);
}
.tc3 {
    background-color: rgb(163, 233, 222);
}
.tc4 {
    background-color: rgb(201, 234, 191);
}


.cf1 {
    color: rgb(102, 102, 138);
}
.cf2 {
    color: rgb(3, 31, 105);
}
.cf3 {
    color: rgb(85, 85, 85);
}
.cf4 {
    color:rgb(138, 49, 199);
}
.cfy1 {
    color:rgb(255, 230, 0);
}
.cfbk0 {
    color:rgb(255, 255, 255);
}
.cfbk1 {
    color:rgb(47, 79, 79);
}
.cfbk2 {
    color:rgb(192, 192, 192);
}
.cfr1 {
    color:rgb(255, 0, 0);
}
.cfo1 {
    color:rgb(255, 140, 0);
}
.cfb1 {
    color:rgb(0, 139, 139);
}

.cfa-pmy-1 {
    --fa-primary-color:rgb(255, 0, 0);
}
.cfa-sec-1 {
    --fa-secondary-color:rgb(0, 139, 139);
    --fa-secondary-opacity:1;
}
.cfa-pmy-2 {
    --fa-primary-color:rgb(255, 0, 0);
}
.cfa-sec-2 {
    --fa-secondary-color:rgb(47, 79, 79);
    --fa-secondary-opacity:1;
}
.cfa-pmy-3 {
    --fa-primary-color:rgb(255, 255, 255);
}
.cfa-sec-3 {
    --fa-secondary-color:rgb(151, 130, 227);
    --fa-secondary-opacity:1;
}

.crBox {
    border-radius:10px;
}
.crBox-md {
    border-radius:2px;
}
.comming {
    background-color:rgb(255, 81, 16);
    border-radius:10px;
}

.comtime {
    background-color:rgb(244, 182, 99);
    border-radius:10px;
}

.add {
    background-color:rgb(138, 49, 199);
}

.bstatus {
    background-color:rgb(106, 210, 245);
    border-radius:10px;
}

.lhy_font, l10, l20, l30, l40, l50, l55, l55i, l60, l70, l80, l90, l90i, h1, h2, h3, h4, h5, h6  {
    /* font-family: "PaneuropaRoad","TaipeiSansTCBeta-Regular"; */
    font-family: 'Noto Sans TC', sans-serif;
    font-weight: 400;
}

/*.lhy_Boldfont, bl10, bl20, bl30, bl40, bl50, bl55, bl55i, bl60, bl70, bl80, bl90, bl90i  {*/
.lhy_Boldfont{
  /*   font-family: "PaneuropaHighway","TaipeiSansTCBeta-Bold"; */
  font-family: 'Noto Sans TC', sans-serif;
  font-weight: 700;
}
.lhy_Lifont{
    /* font-family: "PaneuropaHighway","TaipeiSansTCBeta-Light"; */
    font-family: 'Noto Sans TC', sans-serif;
    font-weight: 100;
}

.header_title-lg {
    font-size: 1.5rem;
    color: rgb(100, 102, 103);
}
.header_st1-lg {
    font-size: 1.3rem;
    color: rgb(122, 122, 122);
}
.header_st2-lg {
    font-size: 1rem;
    color: rgb(132, 221, 253);
}
.header_st3-lg {
    font-size: .95rem;
    color: rgb(0, 186, 251);
}
.header_st4-lg {
    font-size: 1rem;
    color: rgb(83, 189, 231);
}

.mid_title-lg {
    font-size: 1.8rem;
}

.l10, bl10 {
    font-size: 2.35rem;
}
.l20, bl20 {
    font-size: 2rem;
}

.l30, bl30 {
    font-size: 1.8rem;
}

.l35, bl30 {
    font-size: 1.5rem;
}

.l40, bl40 {
    font-size: 1.25rem;
}
.l40-lg, bl40 {
    font-size: .9rem;
}

.l45, bl40 {
    font-size: 1.2rem;
}

.l50, bl50 {
    font-size: 1.125rem;
}
.l50-md {
    font-size: .82rem;
}

.l55, bl55 {
    font-size: 1rem;
}
.l55-md {
    font-size: .84rem;
    font-weight: 100;
}

.l55i {
    font-size: 1rem!important;
}

.l60, bl60 {
    font-size: .94rem;
}

.l65, bl65 {
    font-size: .89rem;
}

.l70, bl70 {
    font-size: .8rem;
}

.l77, bl77 {
    /* font-size: .75rem; */
    font-size: .78rem;
}

.l80, bl80 {
    /* font-size: .5rem; */
    font-size: .76rem;
}

.l90, bl90 {
    /* font-size: 8px; */
    font-size: .75rem;
}

.l90i, bl90i {
    font-size: .75rem!important;
}


.header_top {
    background-image: url("{% static 'images/header_bg.jpg' %}");
    background-repeat: no-repeat;
    background-size: cover;
    height: 30rem;
    width: auto;
}


.header_01_slogan {
    /* font-family: "BMWTypeNextLatinTT-Regular";
    -moz-transform: matrix( 0.4673147786676,0,0,0.4673147786676,0,0);
    -webkit-transform: matrix( 0.4673147786676,0,0,0.4673147786676,0,0);
    -ms-transform: matrix( 0.4673147786676,0,0,0.4673147786676,0,0);         */
    text-shadow: 0px 0px 15px #998FF4,0px 0px 5px #2B0405,0px 0px 10px #2B0405,0px 0px 15px #2B0405,0px 0px 15px #2B0405;
}
.img_auto {
    max-width: 100%;
    height: auto;
}
.img_100 {
    max-width: 100%;
    height: auto;
}
.img_75 {
    max-width: 75%;
    height: auto;
}
.img_65 {
    max-width: 65%;
    height: auto;
}
.img_60 {
    max-width: 60%;
    height: auto;
}
.img_50 {
    max-width: 50%;
    height: auto;
}
.img_30 {
    max-width: 30%;
    height: auto;
}
.img_35 {
    max-width: 35%;
    height: auto;
}
.img_25 {
    max-width: 25%;
    height: auto;
}
.img_15 {
    max-width: 15%;
    height: auto;
}
.img_10 {
    max-width: 10%;
    height: auto;
}
.img_05 {
    max-width: 5%;
    height: auto;
}
.img_100_hi {
    width: auto;
    max-height: 100%;
}
.img_top{
	margin-top: -5%!important;
}
.img_bom{
	margin-bottom: -30%!important;
}
.img_banner{
    margin-top: -3%!important;
}
.img_home_icon{
    max-width: 100%;
    height: auto;
/*     margin-right: 2.5%!important;
    margin-bottom: 2.5%!important; */
    border-radius:15%;
}


/* 注意！！這段CSS一定要寫在CSS檔案的最後面，這樣才能覆蓋上面的設定，且同樣的參數必須要在此再寫一次新數值，如果沒寫，還是會保持之前的設定！！*/
/* // Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {

}

/* // Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .l40-lg, bl40 {
        font-size: 1rem;
    }
    .l50-md {
        font-size: 1.125rem;
    }
    .l55-md {
        font-size: 1rem;
        font-weight: 700;
    }
    .crBox-md {
        border-radius:10px;
    }
    .mid_title-lg {
        font-size: 2.5rem;
    }
    /* 隱藏排版方式開始顯示，百分比的參照點不同，所以百分比要大幅調低 */
    .img_home_icon{
        max-width: 15%;
        height: auto;
        margin-bottom: 0%!important;
        margin-right: 2.5%!important;
    }
}
/* // Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .l40-lg, bl40 {
        font-size: 1.25rem;
    }
    .header_title-lg {
        font-size: 2.5rem;
        color: rgb(100, 102, 103);
    }
    .header_st1-lg {
        font-size: 1.6rem;
        color: rgb(122, 122, 122);
    }
    .header_st2-lg {
        font-size: 1.25rem;
        color: rgb(132, 221, 253);
    }
    .header_st3-lg {
        font-size: 1.15rem;
        color: rgb(0, 186, 251);
    }
    .header_st4-lg {
        font-size: 1.25rem;
        color: rgb(83, 189, 231);
    }
    .img_banner{
        margin-top: 0%!important;
    }
    .img_home_icon{
        max-width: 10%;
    }
}

/* // Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {

}