.go_to_top_container{
    display: none;
}
.shop_cart_container{
    display: none;
}
main{
    width: 100%;
    position: relative;
    font-family: "\5FAE\8EDF\6B63\9ED1\9AD4";
    color: #ffffff;
    font-weight: 400;
    line-height: 1.6;
}
main .main-background{
    width: 100%;
    height: 1479px;
    background-image: url("https://tigersugar.com/images/background_img/about_bg.webp");
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    left: 0;
    top: 0;
}
/* 上面波浪 */
main .wave{
    width: 100%;
    height: 100%;
    background-image: url("https://tigersugar.com/images/background_img/section_header.png");
    /* background-image: url("https://tigersugar.com/images/background_img/background-img-black.png"); */
    background-position: top;
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    top: 0px;
    left: 0px;
}
/* 虎虎生風 背景圖片*/
main .background{
    width: 42vw;
    float:right;
    transform: translate(-11%,20%);
}
@media(max-width: 769px){
    main .wave{
        background-size: 250%;
        background-position: top left;
    }
}
@media  (max-width: 375px){
    main .main-background{
        height: 1022px;
    }
    main .background{
        display: none;
    }
    main .wave{
        background-size: 535%;
        background-position: top left;
    }
}

/* 白旗 */
main .franchisee-box{
    width: 118px;
    height: 40px;
    /* 參照main */
    position: absolute;
    left: 24%;
    top: 1.5%;
}
main .franchisee-box .title-icon .lazyload{
    width: 34px;
    margin-top: 8px;
    float: left;
}
main .franchisee-box .title-name{
    float: right;
}
main .franchisee-box .title-name h1{
    color: white;
    margin-top: 10px;
    font-size: 12px;
    margin-bottom: 0;
    line-height: 20px;
}
main .franchisee-box .title-name h2{
    color: white;
    font-size: 10px;
}
@media  (max-width: 769px){
    main .franchisee-box{
        left: 6%;
    }
}

/*------- 流程區塊 ------*/
main section{
    width: 52%;
    height: 1479px;
    padding-left: 3px;
}
/* 因為右邊虎虎生風會占用到排版，所以建立mask讓section內容去參照 */
main section .flow-mask{
    width: 100%;
    max-height: 1479px;
    position: absolute;
    left: 24%;
    z-index: 1;
    transform: translate(3px, 0px);
    padding-top: 160px;
}
@media  (max-width: 890px){
    main section .flow-mask{
        left: 5%;
    }
}
@media (max-width: 710px){
    main section{
        width: 100%;
        padding: 0px;
        position: relative;
    }
    main section .flow-mask{
        left: 0%;
        padding: 0px 2%;
        margin-top: 160px;
        transform: unset;
    }
}
@media (max-width: 410px){
    main section .flow-mask{
        width: 100%;
        transform: unset;
        padding-top: 114px;
        margin-top: 0px;
        padding: 114px 10px 0px 10px;
    }
}
@media (max-width: 375px){
    main section{
        height: 1022px;
    }

}

/*------- join our franchise ------*/
main section .flow-mask .picture .tigersugar-logo{
    width: 381px;
    height: 101px;
    margin-left: 3px;
}
@media (max-width: 410px) {
    main section .flow-mask .picture{
        display: flex;
        justify-content: center;
        align-items: center;
    }
    main section .flow-mask .picture .tigersugar-logo{
        width: 241px;
        height: 64px;
        margin: 0 auto;
    }
}
/* 授權流程 */
main section .flow-mask .flow{
    width: 384px;
    height: 64px;
    border: 1px solid #f4dd97;
    color: #f4dd97;
    font-size: 22px;
    line-height: 64px;
    text-align: center;
    margin-top: 39px;
    margin-bottom: 58px;
}
main section .flow-mask .flow span {
    display: inline-block;
    margin: 0 0.5em; /* 設定文字間距 */
    width: auto;
}

@media (max-width: 400px) {
    main section .flow-mask .flow{
        width: 100%;
    }
}
@media (max-width: 375px){
    main section .flow-mask .flow{
        height: 42px;
        font-size: 18px;
        line-height: 42px;
        margin-top: 24px;
        margin-bottom: 16px;
    }
}
/* 黑框部分 */
main section .flow-mask .order{
    max-width: 635px;

    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    /* 關鍵!讓blackbox的寬度可以任由它的子元素增長，否則寬度會變成父層寬度 */
    align-items: flex-start;
}
main section .flow-mask .order .blackBox{
    background-color: rgba(14, 25, 32 ,0.2);
    border: 1px dashed rgb(59, 60, 62);
    padding : 11.5px 41px 11.5px 13px;
    margin-bottom: 16px;
    margin-left: 3px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
main section .flow-mask .order .blackBox .number{
    margin-right: 22px;
    /* 給各圓圈中間的數字做參照 */
    position: relative;

}
main section .flow-mask .order .blackBox .number img{
    width: 50px;
    height: 50px;
}
main section .flow-mask .order .blackBox .number span{
    color: #f4dd97;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
}
main section .flow-mask .order .blackBox .details{
    display: inline-block;
    word-wrap:break-word;
    max-width: 560px;
    font-size: 18px;
    letter-spacing: 0.05em;

}
@media (max-width: 375px){
    main section .flow-mask .order .blackBox{
        width: 100%;
        padding : 6px 39px 6px 13px;
        line-height: 42px;
        margin-left: 0px;
    }
    main section .flow-mask .order .blackBox .details{
        font-size: 14px;
        letter-spacing: 0.05em;
        /* 讓文字可以換行 */
        white-space: normal;
        line-height: 21px;
    }
    main section .order .flow-mask .order .blackBox .number{
        margin-right: 15px;
    }
    main section .flow-mask .order .blackBox .number img{
        width: 33px;
        height: 33px;
    }
    main section .flow-mask .order .blackBox .number span{
        font-size: 12px;
    }
}

/* 常見問題|fqa */
main .question-part{
    width: unset;
    height: unset;
    max-width: 986px;
    min-height: unset;
    margin-left: auto;
    margin-right: auto;
    margin-top: 78px;
    margin-bottom: 71px;
    padding: 0px 20px;
}
main .question-part .mask{
    width: 100%;
    position: relative;
    top: 0px;
    left: -1px;
}
main .question-part .mask .gold-background{
    position: absolute;
    top: -9%;
    left: calc(50% - calc(429px / 2));
    z-index: -1;
    position: absolute;
    transform: translate(1px, 1px);
}
/* 給fqa、boxes作為參照，為了使用z-index讓他不被圖片覆蓋 */
main .question-part .mask .fqa{
    width: 100%;
    text-align: center;
    font-size: 20px;
    margin-bottom: 23px;
    font-weight: bold;
}
/* 所有常見問題 */
main .question-part .mask .question-boxes{
    display: flex;
    justify-content: center;
}
main .question-part .mask .question-boxes .left-content{
    width: calc(calc(100% / 2) - 17px);
    display: flex;
    flex-direction: column;
    align-items: center;

}
main .question-part .mask .question-boxes .right-content{
    width: calc(calc(100% / 2) - 17px);
    display: flex;
    flex-direction: column;
    align-items: center;

}
main .question-part .mask .question-boxes .question-box{
    width: calc(100% - 17px);
    margin: 7px 8px 9px 9px;
    border: 1px solid #f4dd97;
    display: flex;
    flex-direction: column;
    padding: 38px 19px 37px 19px;
    cursor: pointer;
    transition: background 0.8s ease;
}

/* 原內容 */
main .question-part .mask .question-boxes .question-box .shrink{
    display: block;
}
main .question-part .mask .question-boxes .question-box .group{
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
/* 切換icon */
main .question-part .mask .question-boxes .question-box .shrink .group #icon{
    display: none;
}
main .question-part .mask .question-boxes .question-box .shrink .group .toggle-icon{
    width: 22px;
    height: 22px;
    margin-right: 19px;
    position: relative;
}
main .question-part .mask .question-boxes .question-box .shrink .group .line::after{
    width: 21px;
    background: #f4dd97;
    content: '';
    display: block;
    height: 3.5px;
    position: absolute;
    top: calc(50% - 1.5px);
    transition:  0.5s ease;
}
main .question-part .mask .question-boxes .question-box .shrink .group .line::before{
    width: 21px;
    background: #f4dd97;
    content: '';
    display: block;
    height: 3.5px;
    rotate: 90deg;
    position: absolute;
    top: calc(50% - 1.5px);
    transition:  0.5s ease;
}

main .question-part .mask .question-boxes .question-box .question{
    letter-spacing: 0.1em;
}

/* 展開內容 */
main .question-part .mask .question-boxes .question-box .expansion{
    max-height: 0;
    overflow: hidden;
    transition: max-height  0.3s linear;
}

main .question-part .mask .question-boxes .question-box .flex{
    display: flex;
    flex-direction: column;

}
main .question-part .mask .question-boxes .question-box .open-content{
    position: relative;
    margin-top: 20px;
}
main .question-part .mask .question-boxes .question-box .open-content::before{
    content:"";
    position: absolute;
    content: "";
    height: 1px;
    top: -10px;
    left: 0%;
    background: rgb(129, 129, 129);
    width: 100%;
}
/* 動畫效果 */
main .question-part .mask .question-boxes .question-box.active .shrink .group .line::after{
    transform: rotate(180deg);
    transition: 0.5s ease;
}
main .question-part .mask .question-boxes .question-box.active .shrink .group .line::before{
    transform: rotate(-90deg);
    transition:  0.5s ease;
}

main .question-part .mask .question-boxes .question-box.active{
    background: rgba(255, 255, 255, 0.05);
    transition: background 1s ease;
}
main .question-part .mask .question-boxes .question-box.active .expansion{
    max-height: 150px;
    transition: max-height 0.4s linear;
}

@media  (max-width: 769px){
    main .question-part{
        padding: 0px 22px;
        margin-bottom: 71px;
    }
    main .question-part .mask .gold-background{
        top: 12%;
    }
    main .question-part .mask .question-boxes .question-box{
        padding: 37px 4px 37px 18px;
    }
    main .question-part .mask .question-boxes .left-content{
        width: 361px;
    }
    main .question-part .mask .question-boxes .right-content{
        width: 361px;
    }
    main .question-part .question-boxes .question-box .question {
        letter-spacing: 0.05em;
    }

}
@media  (max-width: 700px){
    main .question-part .mask .question-boxes {
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    main .question-part .mask .question-boxes .left-content{
        width: 100%;
    }
    main .question-part .mask .question-boxes .right-content{
        width: 100%;
    }
    main .question-part .mask .question-boxes .question-box{
        width: 100%;
        font-size: 14px;
        padding: 10px 15px;
    }
}
@media  (max-width: 375px){
    main .question-part{
        height: unset;
        padding: 0px 31px;
        margin-top: 35px;
        margin-bottom: 31px;
    }
    main .question-part .mask .fqa{
        margin-bottom: 4px;
    }

    main .question-part .mask .question-boxes .question-box .shrink .group .plus-icon{
        margin-right: 17px;
    }

    main .question-part .mask .question-boxes .question-box .question{
        line-height: 24px;
    }

}
/* 將原本的字移除 */
footer p{
    display: none;
}
body footer{
    width: 100%;
    background-image: url("https://tigersugar.com/images/background_img/about_bg.png");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
}
body footer .footer-container .footer-logo{
    width: 333px;
    height: 245px;
    margin-top: 54px;
    padding-right: 2px;
}
body footer .footer-container{

    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    margin: 0px 40px 196px;
}
body footer .footer-container .store-explain{
    max-width: 850px;
    padding:  3.5% 0px;
    position: relative;
    margin: 30px 0px;
    font-size: 14px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    font-family: "\5FAE\8EDF\6B63\9ED1\9AD4";
    text-align: left;
}
body footer .footer-container .store-explain .explain-container{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
}
body footer .footer-container .store-explain::before{
    content:"";
    position: absolute;
    content: "";
    height: 1px;
    top: 0px;
    left: -5%;
    background: rgb(129, 129, 129);
    width: 110%;
}
body footer .footer-container .store-explain::after{
    content:"";
    position: absolute;
    content: "";
    height: 1px;
    top: 100%;
    left: -5%;
    background: rgb(129, 129, 129);
    width: 110%;
}
body footer .footer-container .store-explain .explain-container .open-store{
    font-size: 18px;
    color: #f4dd97;
    margin-bottom: 10px;
    letter-spacing: 0.05em;
}
body footer .footer-container .store-explain .explain-container .white-word{
    font-size: 14px;
    margin-bottom: 6px;
    letter-spacing: 0.05em;
    padding-left: 5px;

}
body footer .footer-container .store-explain .explain-container .terms{
    display: flex;
    justify-content: flex-start;
    padding-left: 5px;
}
body footer .footer-container .button{
    width: 131px;
    height: 43px;
    border: 1px solid #f4dd97;
    text-align: center;
    line-height: 43px;
    font-size: 20px;
    margin-top: 3px;
}
@media (max-width: 1084px) {
    body footer .footer-container .store-explain::before{
        width: 110%;
        left: -5%;
    }
    body footer .footer-container .store-explain::after{
        width: 110%;
        left: -5%;
    }
}
@media  (max-width: 769px){
    body footer .footer-container .store-explain::before{
        width: 100%;
        left: 0%;
    }
    body footer .footer-container .store-explain::after{
        width: 100%;
        left: 0%;
    }
}
@media  (max-width: 375px){
    body footer .footer-container{
        margin: 0px 14px 48px;
    }
    body footer .footer-container .footer-logo{
        width: 239px;
        height: 178px;
    }
    body footer .footer-container .store-explain{
        margin: 15px 0px;
    }
    body footer .store-explain .explain-container{
        width: 100%;
    }
    body footer .footer-container .store-explain .explain-container .open-store{
        font-size: 16px;
    }
    body footer .footer-container .button{
        width: 108px;
        height: 36px;
        font-size: 16px;
        line-height: 36px;
    }
}