*{
    font-family:Arial, "Noto Sans TC", "å¾®è??æ­?é»?é«?", "Microsoft JhengHei", sans-serif;
}

body{
    width: 100%;
}

li{
    color: #333333;
}

p{
    color: #333333;
}

a{
    text-decoration: none;
}

main{
    margin-bottom: 3.125rem;
}

/* flex??¼å®¹è¨­ç½®???å§? */
.flexbox{
    display: -webkit-flex;
    display: -webkit-box;
    display: flex;
    display: -moz-box;
    display: -ms-flexbox;
}

.flex{
    -webkit-flex:1;
    -ms-flex: 1;
    flex: 1;
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
}

/*flex-directionå±???§å?³å??主轴?????¹å??ï¼???³é¡¹??®ç??????????¹å??ï¼????*/
.flex_direction__row_reverse {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
}
.flex_direction__column {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}
.flex_direction__column_reverse {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse;
}

/*é»?认æ????µä??ï¼?项ç?®é?½æ????¨ä????¡çº¿ï¼????ç§?"轴线"ï¼?ä¸????flex-wrapå±???§å??ä¹?ï¼?å¦????ä¸???¡è½´çº¿æ??ä¸?ä¸?ï¼?å¦?ä½???¢è?????*/
.flex_wrap__nowrap {
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
}
.flex_wrap__wrap {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
.flex_wrap__wrap_reverse {
    -ms-flex-wrap: wrap-reverse;
    flex-wrap: wrap-reverse;
}

/*justify-contentå±???§å??ä¹?äº?项ç?®å?¨ä¸»è½´ä?????对é????¹å?????*/
.justify_content__flex_start {
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
}
.justify_content__flex_end {
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
}
.justify_content__center {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}
.justify_content__space_between {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}
.justify_content__space_around {
    -ms-flex-pack: distribute;
    justify-content: space-around;
}

/*align-itemså±???§å??ä¹?项ç?®å?¨äº¤???è½´ä??å¦?ä½?对é?????*/
.align_items__flex_start {
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
}
.align_items__flex_end {
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
}
.align_items__center {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
.align_items__baseline {
    -webkit-box-align: baseline;
    -ms-flex-align: baseline;
    align-items: baseline;
}

/*align-contentå±???§å??ä¹?äº?å¤???¹è½´çº¿ç??对é????¹å?????å¦????项ç?®å?ªæ??ä¸???¹è½´çº¿ï??该å????§ä??èµ·ä????¨ã??*/
.align_content__flex_start {
    -ms-flex-line-pack: start;
    align-content: flex-start;
}
.align_content__flex_end {
    -ms-flex-line-pack: end;
    align-content: flex-end;
}
.align_content__center {
    -ms-flex-line-pack: center;
    align-content: center;
}
.align_content__space_between {
    -ms-flex-line-pack: justify;
    align-content: space-between;
}
.align_content__space_around {
    -ms-flex-line-pack: distribute;
    align-content: space-around;
}

/*
    设置??¨å¼¹??§é¡¹??®ä?????å±????
*/

/*orderå±???§å??ä¹?项ç?®ç????????顺å???????°å?¼è??å°?ï¼???????è¶???????ï¼?é»?认为0???以ä????¯å?¼å®¹??·å?????æ³?示ä??ï¼???¯æ?¹æ?®é??è¦?ä¿®æ?¹å????§å?¼ã??*/
.order__1 {
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1;
}

/*flex-growå±???§å??ä¹?项ç?®ç????¾å¤§æ¯?ä¾?ï¼?é»?认为0ï¼???³å?????å­???¨å?©ä??空é?´ï??ä¹?ä¸???¾å¤§???以ä????¯å?¼å®¹??·å?????æ³?示ä??ï¼???¯æ?¹æ?®é??è¦?ä¿®æ?¹å????§å?¼ã??*/
.flex_grow__1 {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
}

/*flex-shrinkå±???§å??ä¹?äº?项ç?®ç??缩å??æ¯?ä¾?ï¼?é»?认为1ï¼???³å?????空é?´ä??足ï??该项??®å??缩å?????以ä????¯å?¼å®¹??·å?????æ³?示ä??ï¼???¯æ?¹æ?®é??è¦?ä¿®æ?¹å????§å?¼ã??*/
.flex_shrink__0 {
    -ms-flex-negative: 0;
    flex-shrink: 0;
}

/*
    flex-basiså±???§å??ä¹?äº???¨å?????å¤?ä½?空é?´ä?????ï¼?项ç?®å????®ç??主轴空é?´ï??main sizeï¼????æµ?è§???¨æ?¹æ?®è??个å????§ï??计ç??主轴??¯å?¦æ??å¤?ä½?空é?´ã??å®????é»?认å?¼ä¸ºautoï¼???³é¡¹??®ç????¬æ?¥å¤§å°????
    以ä????¯å?¼å®¹??·å?????æ³?示ä??ï¼???¯æ?¹æ?®é??è¦?ä¿®æ?¹å????§å?¼ã??
*/
.flex_basis__100px {
    -ms-flex-preferred-size: 100px;
    flex-basis: 100px;
}

/*align-selfå±???§å??许å??个项??®æ??ä¸???¶ä??项ç?®ä??ä¸???·ç??对é????¹å??ï¼???¯è?????align-itemså±???§ã??é»?认å?¼ä¸ºautoï¼?表示继æ?¿ç?¶å??ç´????align-itemså±???§ï??å¦????没æ????¶å??ç´?ï¼????ç­????äº?stretch???*/
.align_self__flex_start {
    -ms-flex-item-align: start;
    align-self: flex-start;
}
.align_self__flex_end {
    -ms-flex-item-align: end;
    align-self: flex-end;
}
.align_self__center {
    -ms-flex-item-align: center;
    align-self: center;
}
.align_self__baseline {
    -ms-flex-item-align: baseline;
    align-self: baseline;
}
/* flex??¼å®¹è¨­ç½®çµ???? */

/* header???� */
/* header{
    background-color: #FFFFFF;
    padding: 4px 20px 4px 20px;
    width: 100%;
    position: fixed;
    top: 0;
    z-index: 1;
}

header img{
    height: 40px;
}*/

.icon-phone{
    width: 30px;
    height: 30px;
} 
/* headerçµ???? */

/* 主è??覺é??å§? */
.KV{
    background-color: #F6F6F6;
    padding-top: 48px;
}

.KV img{
    width: 100%;
}

.KV-mb{
    display: none;
}

main{
    background-color: #F6F6F6;
}
/* 主è??覺ç????? */

/* tabbar???� */
.bx-tab-pager{
    position: -webkit-sticky;
    position: sticky;
    top: 62px;
    z-index: 1;
    background-color: #F6F6F6;
}

.j_sticky{
    background-color: rgba(255,255,255,0.85);
}

.bxslider .grid{
    padding: 16px;
    margin: 0 auto;
}

.bxslider .grid li{
    background: none;
    font-size: 1.25rem;
}

.bxslider .grid li a{
    border: none;
    padding: 0.625rem 1.5rem;
    color: #888;
    background-color: #eee;
    border-radius: 100px;
    line-height: 1.6;
    font-size: 1.5rem;
}

.bxslider .grid li a.active{
    color: #FFFFFF;
    border: 1px solid #FFF2F2;
    background: #6FB8C9;
}

.grid .col-1-4{
    width: auto;
    margin-right: 16px;
}

.grid .col-1-4:last-child{
    margin-right: 0px;
}
/* tabbarçµ???? */
.bx-wrapper{
    margin: 0px 16px 30px 16px;
}

.card{
    width: 100%;
}

.service-content{
    width: 100%;
    max-width: 1200px;
}

.date p{
    font-size: 1.25rem;
    color: #666666;
    text-align: right;
    width: 80px;
    line-height: 1.8;
}

.date-active p{
    color: #A40E16;
    font-weight: bold;
}

.date-dot{
    width: 10px;
    height: 10px;
    box-sizing: border-box;
    border-radius: 50%;
    background-color: #FFFFFF;
    border: 2px solid #999999;
    margin: 8px 12px 4px 12px;
}

.date-dot-active{
    background-color: #A40E16;
    border: 2px solid #A40E16;
}

.vertical-line{
    width: 1px;
    background-color: #E5E5E5;
}

.service-text{
    background-color: #FFFFFF;
    padding: 16px;
    width: 100%;
    border-radius: 8px;
    margin-bottom: 20px;
}

.card:last-of-type .service-text{
    margin-bottom: 0;
}

.card:last-of-type .vertical-line{
    display: none;
}

.service-text ul{
    margin-left: 24px;
    padding-left: 0;
}

.service-text p{
    font-size: 1.25rem;
}

.service-text li{
    font-size: 1.25rem;
    list-style-type: disc;
    margin-bottom: 10px;
}

.service-text li:last-child{
    margin-bottom: 0px;
}

.service-text span{
    color: #A40E16;
    font-weight: bold;
}

.service-text a{
    color: #6FB8C9;
}

.content-bg{
    padding: 16px;
}

.content-bg .trade{
    margin-top: 12px;
}

.content-bg .tag{
    margin: 12px 0px;
}


.content-bg p{
    font-size: 16px;
    margin: 12px 0px;
}

.content-bg p:nth-of-type(2){
    margin-bottom: 20px;
}

#popup_phone a{
    color: #6FB8C9;
}

.inline-block{
    display: inline-block;
}

span.tag{
    font-size: 1.25rem;
    font-weight: bold;
    color: #A40E16;
    background-color: #FFF2F2;
    padding: 4px 12px;
    border-radius: 25px;
    margin-right: 8px;
}

@media (max-width: 1024px) {
    .icon-phone{
        position: absolute;
        top: 10px;
        right: 30px;
    }
    .bx-tab-pager{
        top: 48px;
    }
}

@media (max-width: 1200px) {
    main{
        background-image: none;
    }
}

@media (max-width:769px) {
    .KV-pc{
        display: none;
    }
     
    .KV-mb{
        display: block;
    }
}

@media (max-width: 641px) {
    .bxslider .grid li a{
        font-size: 1.2rem;
    }

}

@media (max-width: 576px) {
    .bx-wrapper{
        margin: 0px 10px 20px 10px;
    }
    .bxslider .grid{
        /* white-space: nowrap;
        overflow-x: scroll;
        overflow-y: hidden; */
        white-space: nowrap;
        overflow: hidden;
        overflow-x: auto;
        margin-bottom: 16px;
        justify-content: flex-start;
    }
    .bxslider .grid li:first-child{
        margin-left: 12px;
    }
    .grid .col-1-4{
        width: auto;
        margin-right: 12px;
    }

    .grid .col-1-4:last-child{
        margin-right: 12px;
    }
    .bxslider .grid{
        padding: 8px 8px 4px 8px;
    }

    

    .date p{
        font-size: 14px;
        width: 70px;
    }
    .service-text p{
        font-size: 14px;
    }
    .service-text li{
        font-size: 14px;
        line-height: 22px;
    }
    .service-text{
        padding: 12px;
        margin-bottom: 12px;
    }    
    .date-dot{
        margin: 4px 8px 4px 8px;
    }
    .sub-brokerage p{
        display: -webkit-flex;
        display: -webkit-box;
        display: flex;
        display: -moz-box;
        display: -ms-flexbox;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }
    .sub-brokerage span{
        width: fit-content;
    }
    .sub-brokerage .inline-block-m{
        display: inline-block;
    }
}

@media screen and (max-width: 999px) and (max-height: 428px) and (orientation: landscape), screen and (max-width: 480px) and (orientation: portrait){
    .m-header-main {
        padding-right: 0;
    }
}


.fancybox-is-open .fancybox-bg{
    opacity: .5;
}

.modal.qrcode .fancybox-close-small{
    background: url(../images/ic_30px_close.svg) no-repeat center top;
    background-size: 30px 30px;
    width: 30px;
    height: 30px;
    right: 20px;
    top: 20px;
}

.modal.qrcode .lightbox-content .content-bg{
    padding: 30px 30px;
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -o-border-radius: 20px;
    border-radius: 20px;
    text-align: center;
}

.modal.qrcode .lightbox-content{
    padding: 0;
}

.content-bg span:last-child{
    margin-top: 20px;
}

.m-footer-item{
    color: #FFFFFF;
}

.m-footer-item span{
    color: #FFFFFF;
}

.calendar{
    color: #6FB8C9;
    font-size: 18px;
    margin-bottom: 20px;
    margin-top: 4px;
}

.calendar img{
    margin-right: 5px;
}

.calendar_tab{
    border: none;
    padding: 4px 12px;
    color: #888;
    background-color: #eee;
    border-radius: 100px;
    line-height: 1.6;
    font-size: 16px;
    white-space: nowrap;
    display: inline-block;
    margin-right: 10px;
    font-weight: bold;
}

.calendar_tab:last-child{
    margin-right: 0;
}

.active{
    color: #FFFFFF;
    border: 1px solid #85BFCD;
    background: #85BFCD;
}

#popup_calendar{
    max-width: 762px;
}

#popup_calendar.modal.qrcode .fancybox-close-small{
    top:1.875rem;
    right:1.875rem;
}

#popup_calendar .lightbox-content .content-bg{
    padding: 0 30px 30px 30px;
    max-height: 80vh;
    /* overflow-y: scroll; */
    overflow-y: auto;
    height: 640px;
}

.bar-block{
    position: sticky;
    top: 0px;
    background-color: #FFF;
    padding: 30px 0;
}

#popup_calendar .bar-block .container{
    /* overflow-x: scroll; */
    overflow-x: auto;
}

#popup_calendar h3{
    font-size: 20px;
    color: #333;
    margin-bottom: 15px;
    font-weight: bold;
}

.calendar＿container{
    padding-top: 5px;
    font-size: 16px;
}

.calendar＿container table{
    max-width: 400px;
    width: 100%;
    table-layout: fixed;
    margin: 0 auto;
}

.calendar＿container table tr{
    width: 100%;
}

.calendar＿container th{
    font-size: 16px;
    color: #333;
    padding: 10px;
    background-color: #F6F6F6;
    border: 1px solid #E5E5E5;
    text-align: center;
}

.calendar＿container td{
    font-size: 16px;
    font-weight: bold;
    padding: 10px;
    background-color: #FFFFFF;
    border: 1px solid #E5E5E5;
    text-align: center;
}

@media (max-width:769px) {
    #popup_calendar h3{
        font-size: 18px;
    }

    .calendar＿container{
        font-size: 14px;
    }

    .calendar＿container th{
        font-size: 14px;
    }

    .calendar＿container td{
        font-size: 14px;
    }

    #popup_calendar .lightbox-content .content-bg{
        padding: 0 15px 15px 15px;
    }

    #popup_calendar.modal.qrcode .fancybox-close-small{
        top: 15px;
        right: 15px;
    }

    .bar-block{
        padding: 15px 0;
    }

    .calendar_tab{
        margin-right: 5px;
    }

    .calendar＿container{
        padding-top: 15px;
    }

    .calendar{
        font-size: 16px;
    }

    .calendar img{
        width: 20px;
    }

    .content-bg p{
        font-size: 14px;
    }
}

.fancybox-lock{
    overflow-y: hidden !important;
}

/* title & lantern */
.img_title{
    width: 56%;
    height: 0;
    padding-bottom: 29%;
    background: url(../images/title.png) center top no-repeat;
    background-size: 100% auto;
    position: absolute;
    top: 57px;
    left: 22%;
    animation: uptodown 1.5s infinite alternate;
}
@media (max-width:769px){
    .img_title{
        width: 87%;
        padding-bottom: 49%;
        top: 43px;
        left: 7%;
    }  
}
@keyframes uptodown {
    0% {transform: translate(0, -10px);}
    100% {transform: translate(0, 0);}
}

.img_lantern1{
    width: 4.63%;
    height: 0;
    padding-bottom: 16%;
    background: url(../images/lantern1.png) center top no-repeat;
    background-size: 100% auto;
    position: absolute;
    top: 59px;
    left: 21.5%;
    animation: lantern1 6s ease-in-out infinite;
    transform-origin: center top;
}
@media (max-width:1024px) {
    .img_lantern1{
        top: 48px;
    }
}
@media (max-width:769px){
    .img_lantern1{
        width: 7%;
        padding-bottom: 24%;
        left:6%;
    }
}
@keyframes lantern1 {
    0%, 100% {transform: rotate(10deg);}    
    50% {transform: rotate(-10deg);}
}

.img_lantern2{
    width: 4%;
    height: 0;
    padding-bottom: 9%;
    background: url(../images/lantern2.png) center top no-repeat;
    background-size: 100% auto;
    position: absolute;
    top: 59px;
    left: 25.5%;
    animation: lantern2 6s ease-in-out infinite;
    transform-origin: center top;
}
@media (max-width:1024px) {
    .img_lantern2{
        top: 48px;
    }
}
@media (max-width:769px){
    .img_lantern2{
        width: 6%;
        padding-bottom: 13%;
        left: 12%;
    }
}
@keyframes lantern2 {
    0%, 100% {transform: rotate(-5deg);}    
    50% {transform: rotate(5deg);}
}

.img_lantern3{
    width: 4.63%;
    height: 0;
    padding-bottom: 16%;
    background: url(../images/lantern3.png) center top no-repeat;
    background-size: 100% auto;
    position: absolute;
    top: 58px;
    right: 23%;
    animation: lantern3 5s ease-in-out infinite;
    transform-origin: center top;
}

@media (max-width:1024px) {
    .img_lantern3{
        top: 44px;
    }
}

@media (max-width:769px){
    .img_lantern3{
        width: 7%;
        padding-bottom: 18%;
        right: 8%;
    }
}
@keyframes lantern3 {
    0%, 100% {transform: rotate(-10deg);}    
    50% {transform: rotate(10deg);}
}