body {
    width: 100%;
    height: 100%;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
}

::-webkit-scrollbar {
    display: block; /* Chrome Safari */
}

.main {
    overflow: hidden;
    width: 100%;
    height: auto;
    background-color: #F9F7F4;
    margin-top: -6px;
}

.white {
    color: white !important;
}

.textAlignCenter {
    text-align: center !important;
}

.titleStyleOne {
    color: #3AAFA9;
    text-align: center;
    font-weight: 700;
    font-size: 36px;
    width: 100%;
    line-height: 150%;
}

.titleStyleTwo {
    font-weight: 700;
    font-size: 36px;
    line-height: 150%;
    color: #4AC8C1;
    text-align: center;
}

.titleStyleThree {
    font-weight: 700;
    font-size: 28px;
    line-height: 150%;
    text-align: left;
    letter-spacing: 0.04em;
    color: #2B7A77;
}

.infoStyleOne {
    padding-top: 40px;
    width: 100%;
    color: #40474A;
    font-size: 20px;
    letter-spacing: 0.04em;
    line-height: 150%;
    font-weight: 400;
}

.infoStyleTwo {
    width: 100%;
    color: #40474A;
    font-size: 20px;
    letter-spacing: 0.04em;
    line-height: 150%;
    font-weight: 400;
}

.section {
    width: 100%;
    padding: 50px 0;
    height: auto;
    overflow: auto;
    position: relative;
}

.sectionContain {
    width: 1080px;
    margin: auto;
    overflow: auto;
    position: relative;
}

.section:nth-child(2), .section:nth-child(4) {
    background-color: white;
}

.supplierFrom p {
    font-weight: 400;
    font-size: 18px;
    line-height: 150%;
    color: #40474A;
}

.supplierFromTable tr th:last-child,
.supplierFromTable tr td:last-child{
    border-right: 2px solid #4AC8C1;
}

.supplierFromTable tr th:first-child,
.supplierFromTable tr td:first-child{
    border-left: 2px solid #4AC8C1;
}

.supplierFromTable tr:first-child th{
    border-top: 2px solid #4AC8C1;

}

.supplierFromTable td:first-child,
.supplierFromTable th:first-child{
    padding: 0 20px;
}

.supplierFromTable tr:last-child td{
    border-bottom: 2px solid #4AC8C1;
}

.supplierFromTable tr:first-child th:first-child{
    border-top-left-radius: 10px;
}

.supplierFromTable tr:first-child th:last-child{
    border-top-right-radius: 10px;
}

.supplierFromTable tr:last-child td:first-child{
    border-bottom-left-radius: 10px;
}

.supplierFromTable tr:last-child td:last-child{
    border-bottom-right-radius: 10px;
}

.supplierFromTable{
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
    font-size: 16px;
}

.supplierFromTable td, .supplierFromTable th{
    text-align: center;
    padding: 22px 8px;
    color: #264E58;
    white-space:nowrap;
}

.supplierFromTable tr:nth-child(odd){
    background-color: white;
}

.supplierFromTable tr:nth-child(even){
    background-color: #EEF8F7;
}

.supplierFromTable tr:nth-child(1){
    background-color: #4AC8C1;
}

.supplierFromTable tr:nth-child(1) th{
    color: white !important;
}

.supplierFromTable td:first-child{
    width: 150px;
}

.supplierFromTable td:first-child {
    position:sticky;
    left: 0; /* 首行永遠固定於左 */
    z-index:4;
}
.supplierFromTable th:first-child {
    position:sticky;
    left: 0; /* 首行永遠固定於左 */
    z-index:4;
}

.supplierFromTable tr:first-child th:first-child{
    background-color: #4AC8C1;
}

/*.greenHouseFormTable tr:nth-child(2) th:first-child {*/
/*    background-color: #3AAFA9;*/
/*}*/

.supplierFromTable tr:nth-child(odd) td:first-child{
    background-color: white;
}

.supplierFromTable tr:nth-child(even) td:first-child{
    background-color: #EEF8F7;
}

.picScrollView {
    width: 100%;
    overflow-x: auto;
    position: relative;
}

.picView {
    margin-top: 30px;
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: row;
    gap: 20px;
}

.pic {
    width: 100%;
    border-radius: 20px;
    background-size: cover;
    background-repeat: no-repeat;
}

.partnerPic {
    height: 400px;
    background-image: url("../../../img/menu/8/8-4/夥伴聯盟成立大會與會人員大合照.png");
    background-position-y: -100px;
}

.workshopPic1 {
    height: 300px;
    background-image: url("../../../img/menu/8/8-4/工作坊-1.png");
}

.workshopPic2 {
    height: 300px;
    background-image: url("../../../img/menu/8/8-4/工作坊-2.png");
}

.greenHouseGraph {
    width: 100%;
    margin-top: 30px;
    height: 450px;
}

/*.greenHouseLink {*/
/*    padding: 50px 0 30px 0;*/
/*    width: 100%;*/
/*}*/

.supplierFrom {
    position: relative;
    margin-top: 30px;
}

/*.greenHouseCanvas {*/
/*    background-color: white;*/
/*    width: 100%;*/
/*    height: 100%;*/
/*    border: 2px solid #4AC8C1;*/
/*    border-radius: 20px;*/
/*    padding: 30px 100px;*/
/*}*/

.mobileGraphScrollBtn {
    position: absolute;
    background-image: url("../../../img/menu/1/1-4/icon-arrow-right.svg");
    background-size: 9px;
    background-position: center;
    background-repeat: no-repeat;
    width: 30px;
    height: 30px;
    left: 40px;
    top: 52px;
    border-radius: 50%;
    border: 1px solid #ABABAB;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    background-color: white;
    display: none;
    z-index: 99;
    cursor: pointer;
}

.mobileGraphScrollBtn.scrollToLeft {
    transform: rotateY(180deg);
}

.multiPicView {
    position: relative;
}

.picScroll.scrollToLeft {
    transform: rotateY(180deg);
    left: 0;
}

.formDate {
    text-align: right;
    color: #717784;
    font-size: 16px;
    margin-top: 20px;
}
/*******************Mobile*************************/
@media only screen and (max-width: 1080px) {

    ::-webkit-scrollbar {
        display: none; /* Chrome Safari */
    }

    .section {
        padding: 30px 0;
    }

    .sectionContain {
        width: 100%;
        padding: 0 15px;
    }

    .titleStyleOne {
        font-size: 24px;
    }

    .titleStyleTwo {
        font-size: 28px;
    }

    .titleStyleThree {
        font-size: 20px;
        margin-top: 30px;
    }

    .infoStyleOne {
        font-size: 16px;
        padding-top: 15px;
    }

    .infoStyleTwo {
        font-size: 16px;
    }

    .supplierFromTable{
        font-size: 16px;
    }

    .supplierFromTableView {
        overflow-y: hidden;
        overflow-x: scroll;
        border-top-left-radius: 10px;
        border-bottom-left-radius: 10px;
    }

    .supplierFrom p {
        font-size: 15px;
        padding-bottom: 20px;
    }

    .picScroll {
        display: block;
        top: 50%;
        left: 92%;
    }

    .supplierFromTableScroll {
        display: block;
        top: 50px;
        left: 70px;
    }

    .formDate {
        text-align: left;
        font-size: 14px;
        margin-top: 10px;
    }

    .partnerPic {
        height: 200px;
        background-position: center;
    }

    .workshopPic1, .workshopPic2 {
        height: 200px;
    }

    .multiPic {
        position: relative;
        width: 200%;
    }
}