@media (max-width: 576px) and (min-width: 0px){
    .col-sm-6 {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }
}
@media only screen and (min-width: 300px) and (max-width: 360px) {
    #tappay-iframe {
        font-family: Lato,'Helvetica Neue',Arial,Helvetica,sans-serif;
        margin: 0;
        outline: 0;
        -webkit-appearance: none;
        tap-highlight-color: rgba(255,255,255,0);
        line-height: 1.21428571em;
        padding: .578571em 1em;
        font-size: 1em;
        background: #fff;
        border: 1px solid rgba(34,36,38,.15);
        color: rgba(0,0,0,.87);
        border-radius: .28571429rem;
        box-shadow: 0 0 0 0 transparent inset;
        -webkit-transition: color .1s ease,border-color .1s ease;
        transition: color .1s ease,border-color .1s ease;
        width: 100%;
        overflow-x:scroll;
        min-width: 100vw;
    }
    .tappay-scroll {
        overflow-x:scroll;
    }
}
/* 網頁版*/
@media (min-width:575px) {
    .phone {
        display: none;
    }
    .hidden-xs-up {
        display: none !important;
    }
    .my-video-width{
        width: 50%;
        height: 100%;
        padding-left: 0px;
        padding-right: 0px;
    }
    .max-h {
        max-width: 80vw;
        max-height: 80vh;
    }
    .header-padding {
        padding: 0px 20px;
    }
    .basic-login {
        padding: 50px;
        border: 0px solid #eaedff;
        background-color: #ffffff;
    }
    .my-header-padding{
        padding-top: 100px;
        padding-bottom: 50px;
    }
    .mb-sm-10{
        margin-bottom: none;
    }
    .my_margin p {
        margin: auto 15vw;
        font-size: 15px;
    }
    .p-title {
        font-weight: var(--fw-bold);
        font-size: 34px;
    }
    .biankuang_1 img{
        width: 50%;
    }
    .biankuang_1 .my-center{
        text-align: center;
        margin: auto;
    }
    .my-mg-auto .my-mg-auto-2 span{
        /* border: 5px outset #b88e6e; */
        /* border-radius: 12px; */
        font: bold 1rem sans-serif;
        margin: 1rem;
        padding: 1rem;
        outline-offset: 0.5rem;
        font-size: 22px;
        padding: 6px 20px;
        font-weight: 600;
        
    }
    .header-icon a:not(:last-child) {
        margin-right: 15px;
    }
    .error-web {
        margin-top: 8rem;
    }
    .web-4vw {
        padding-top: 4vw;
    }
}
/* 手機版*/
@media (max-width:576px) {
    .web {
        display: none;
    }
    .hidden-xs-down {
        display: none !important;
    }
    .breadcrumb-area-2 {
        padding-top: 20px;
        padding-bottom: 20px;
    }
    .my-video-width{
        width: 100%;
        height: 100%;
        padding-left: 0px;
        padding-right: 0px;
    }
    .slider-scroll {
        bottom: -30%;
    }
    .max-h {
        max-width: 100%;
        max-height: 100%;
    }
    .basic-login {
        padding: 20px;
        border: 0px solid #eaedff;
        background-color: #ffffff;
    }
    .my-header-padding{
        padding-top: 30px;
        padding-bottom: 0px;
    }
    .pl-sm--0{
        padding-left: 0 !important;
    }
    .mb-sm-10{
        margin-bottom: 10px;
    }
    .my_margin p {
        margin: auto;
        font-size: 15px;
    }
    .p-title {
        font-weight: var(--fw-bold);
        font-size: 28px;
    }
    .mb-sm--20{
        margin-bottom: 20px;
    }
    .mb-sm--30{
        margin-bottom: 30px;
    }
    .biankuang_1 img{
        width: 20%;
    }
    .biankuang_1 .my-center{
        text-align: center;
        margin-bottom: 20px;
    }
    .biankuang_1 .my-center1{
        text-align: center;
    }
    .header-main ul li {
        margin-right: 15px;
    }
    .my-mg-auto .my-mg-auto-2 span{
        font: bold 1rem sans-serif;
        margin: 0rem;
        padding: 1rem;
        outline-offset: 0.5rem;
        font-size: 22px;
        padding: 6px;
        font-weight: 600;   
    }
    .header-icon a:not(:last-child) {
        margin-right: 0px;
    }
    .error-phone {
        margin-top: 3rem;
    }
    .error-phone img {
        max-width: 60%;
    }
    .web-4vw {
        padding-top: 0vw;
    }
    .line-icon {
        bottom: 120px;
    }
}
@media (min-width: 992px) and (max-width: 1340px) {
    .header-main ul li {
        margin-right: 12px;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px){
    .header-transparent, .header-area:is(.header-transparent) {
        background: #e7e6de;
        box-shadow: 1px 3px 5px #c3b9af4a;
    }
}
a#scrollUp {
    right: 20px !important;
}
a#scrollUp:hover i {
    background-color: #003b4d !important;
    color: var(--clr-common-white);
}