.section_home {
    height: 100vh;
    display: flex;
}

.home_nav {
    padding-top: 50px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
    margin: auto;
    max-width: 1200px;
    width: 100%;
}

.btn-circle {
    flex: 0 0 190px;
    width: 190px;
    height: 190px;
    background: rgb(255 255 255 / 85%);
}

    .btn-circle img {
        height: 50px;
        width: auto !important;
        margin-bottom: 0.5rem;
    }

    .btn-circle span {
        letter-spacing: 0.1em;
        /*     font-size: 2rem;*/
        font-weight: bolder;
    }

.btn-tiger:hover img {
    height: 40px;
    transform: translateY(-30px);
}

.btn-tiger:hover span {
    transform: translateY(-35px);
}

.home_item {
    padding: 10px;
}

.main-logo::before {
    background-image: url("../images/global/main-logo.svg");
    background-repeat: no-repeat;
    background-size: auto 80%;
    background-position: left center;
}

.menu-title {
    cursor: pointer;
    font-weight: bold;
}

#app > section {
    padding-top: 120px;
}

.h1 {
    margin-top: 0px;
}

.ms-2 {
    margin-left: 5%;
}
.masthead-logo {
    cursor: pointer;
}

@media (max-width: 1200px) {
    .main-logo {
        height: 80px;
    }

        .main-logo:before {
            margin: 0;
            transform: translate(-50%,-50%);
        }
}

@media (max-width: 1153px) {
    .main-logo {
        transform: none;
        left: 0;
        top: 0;
        width: 230px;
        height: 60px;
        /*margin-left: 20px;*/
        margin-left: 60px;
    }

        .main-logo::before {
            background-image: url("../images/global/nav_logo.svg");
            background-size: auto 65%;
        }


    .masthead-inner {
/*        justify-content: end !important;*/
    }
    .masthead-logo {
        left: 18% !important;
    }

    .home_nav {
        margin-top: 100px;
        padding-top: 0px;
    }
}

@media (max-width: 1000px) {
    /*4顆以上圈圈*/
    .btn-circle {
        flex: 0 0 140px;
        width: 140px;
        height: 140px;
    }
  /*3顆以下圈圈-START*/
/*    .btn-circle {
        flex: 0 0 190px;
        width: 190px;
        height: 190px;
        font-size: 1.5rem !important;
    }
    .btn-tiger:hover span {
        font-size: 23px !important;
    }
    .home_nav {
       
        display: block;
        
    }
    .btn-tiger:hover span {
        transform: translateY(-40px);
    }*/
    /*3顆以下圈圈-END*/

}

@media (max-width: 768px) {
    #app > section {
        padding-top: 80px;
    }
}


.btn-magenta2 {
    background-color: rgba(255,58,176,0.8) !important;
}

    .btn-magenta2:hover {
        background-color: rgba(255,58,176,1) !important;
        box-shadow: 0 0 24px white;
    }

.btn-blue2 {
    background-color: rgba( 14,135,229,1) !important;
}

    .btn-blue2:hover {
        background-color: rgba( 14,135,229,1) !important;
        box-shadow: 0 0 24px white;
    }



.btn-open-menu:before, .btn-open-menu:after, .line {
    background-color: #fff !important;
}
/*漢堡-start*/
.offcanvas-start {
    width: 15%;
}
@media (max-width: 1152px) {

    .offcanvas-start {
        width: 60%;
    }

}
.sideBarul a {
    border-bottom: 1px solid black;
    background-color: rgb(255 255 255 / 85%);
    cursor: pointer !important;
}

.sideBarul {
    font-size: 1.4rem;
    font-weight: bold;
}
.sideBarli {
    color:black!important;
    border-bottom: 1px #eee solid;
    min-height:50px;
    padding:0.5rem 2.5rem 0.5rem 1rem;
}

.logoutSpan {
    padding-top: 30px;
}

/*驗證環境(誤推正式) Start*/
.navbar {
    font-size: 40px;
    margin-right: 210px;
}

@media (max-width: 1152px) {
    .navbar {
        display: block;
        margin-right: -300px;
        font-size: 25px;
        margin-left: 200px;
    }
}


/*驗證環境(誤推正式) End*/

.masthead-toggle {
    display: block !important;
    position: relative;
    left: auto;
    top: auto;
    width: 50px;
    height: 60px;
}

    .masthead-toggle b {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        width: 25px;
        height: 15px;
    }
    .masthead-toggle i:first-child {
        top: 0%;
    }
    .masthead-toggle i {
        position: absolute;
        left: 0;
        top: 50%;
        width: 25px;
        height: 2px;
        overflow: hidden;
        margin-top: -2px;
        background: #fff;
        transform-origin: 50% 50%;
        transition: transform .12s ease;
    }
        .masthead-toggle i:last-child {
            top: 100%;
        }

/*漢堡-end*/

.rule_txt01 {
    font-size: 25px;
}

.modal-content {
    background: linear-gradient(0deg, #FF3AB0 0%, #4BA1E4 100%);
    background: -moz-linear-gradient(0deg, #FF3AB0 0%, #4BA1E4 100%);
    background: -webkit-linear-gradient(0deg, #FF3AB0 0%, #4BA1E4 100%);
    background: -o-linear-gradient(0deg, #FF3AB0 0%, #4BA1E4 100%);
    border-radius: 40px;
}

.modal_rule2 {
    background: #fff;
    font-size: 25px;
    border-radius: 40px;
    width: 70%;
    text-align: center;
}

@media (max-width: 766px) {
    .modal_rule2 {
        width: 80%;
    }
}

.btn:not(.act,.timeBtn,#convertible,#exchange,#overtime).focus-visible:focus, .btn:not(.act,.timeBtn,#convertible,#exchange,#overtime):hover {
    background-color: #fff !important;
}

.btn:not(.act,.timeBtn,#convertible,#exchange,#overtime) > span:hover {
    color: #0E87E5 !important;
}

.sideBar {
    background: linear-gradient(0deg, #FF3AB0 0%, #4BA1E4 100%);
    background: -moz-linear-gradient(0deg, #FF3AB0 0%, #4BA1E4 100%);
    background: -webkit-linear-gradient(0deg, #FF3AB0 0%, #4BA1E4 100%);
    background: -o-linear-gradient(0deg, #FF3AB0 0%, #4BA1E4 100%);
}

.sideBarli:hover {
    background-image: url("../images/global/tiger2.jpg");
    height: 100%;
    width: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    color: #fff !important;
    transition: height 3s;
}

.btn-tiger .tail3 {
    width: 100%;
    height: 100%;
/*    transform: translate(16%, -22%) rotate( -20deg )!important;*/
}

/*.btn-tiger:hover .tail3 {
    transform: translate(16%, -22%) rotate( 0deg )!important;
}*/

.btn-tiger:hover p {
/*    transform: translateX(-35px);*/
    transition: .3s ease;
}