.treatment-section {
    display: flex;
    justify-content: space-between;
    background-color: #fffef8;
    flex-direction: column;
    height: 950px;
    font-size: 20.5px;
    color: rgb(52, 52, 52);
    box-shadow: 8px -6px 5px rgb(188, 188, 188);
    width: 100%;
    margin-bottom: 2%;
}


.treat-section-title{
    flex:1;
    display: flex;
    flex-direction: row;
    justify-content:center;
    margin-top: 5%;
    margin-left: 2%;
    margin-right: 2%;
    border-bottom: 2px solid #413010;

}

.treat-title-chinese {
    flex: 1.5;
    text-align: right;
    font-size: 40px;
    color: #827167;
    margin-top: auto;
    margin-bottom: 14px;
    opacity: 0.95;
}

.treat-title-eng{
    flex: 1;
    font-size: 55px;
    margin-top: auto;
    margin-bottom: 10px;
    text-align: left;
    margin-left: 2%;
    opacity: 0.95;
    
}

.treat-section-body-main {
    display:flex;
    flex:6;
    height: auto;
    
    
}

.treat-section-body{
    overflow-x:auto;
    overscroll-behavior-x: contain;
    display: flex;
    margin: 3%;
    gap: 50%;
    scroll-behavior:smooth;
    anchor-name: --scroll-button;
    scroll-snap-type: x mandatory;
    scroll-marker-group: after;
    
}


.treat-eng-text {
    flex: 3; 
    padding-right: 1%;
    min-width: 0;
    padding: 2%;
}

.treat-pic-sec1 {
    flex: 1; 
    max-width: 100%;
    min-width: 0;
    padding: 5%;
    justify-content:center;
    
}

.treat-pic1 {
    width: 70%; 
    height: auto; 
    
}

.treat-chinese-text {
    flex: 3; 
    padding-right: 1%;
    min-width: 0;
    padding: 5%;
}

.treat-pic-sec2 {
    flex: 1; 
    max-width: 100%;
    min-width: 0;
    padding: 5%;
    
}

.treat-pic2 {
    width: 70%; 
    height: auto; 
    
}





.treat-section-body::scroll-button(right) {
    content: '>';
    border: none;
    background-color:rgb(152, 152, 152);
    font-size: 3rem;
    color: white;
    height: 60px;
    width: 60px;
    border-radius: 50%;
    padding-bottom: .1em;
    cursor:pointer;
    translate: -60%;
    position-area: right center;
    opacity: 0.9;
}

.treat-section-body::scroll-button(left) {
    content: '<';
    border: none;
    background-color:rgb(152, 152, 152);
    font-size: 3rem;
    color: white;
    height: 60px;
    width: 60px;
    border-radius: 60%;
    padding-bottom: .1em;
    cursor:pointer;
    position-area: left center;
    translate: 50%;
    opacity: 0.9;
    
}

.treat-section-body::scroll-button(left):disabled, .treat-section-body::scroll-button(right):disabled {
    opacity:0.4;
    cursor:auto;
}

.treat-section-body::scroll-button(left), .treat-section-body::scroll-button(right) {
    position-anchor: --scroll-button;
    position: fixed;

}


.treat-eng, .treat-chinese{
    display: flex;
    flex-direction: row;
    flex: 0 0 80%;
    height: 90%;
    background-color: #f7efdc;
    padding: 2%;
    text-align: left;
    align-content: center;
    border-radius: 10px;
    scroll-snap-align: start;
    font-weight: 350;
    line-height: 1.3;
    justify-content:center;
    align-items: center;
}



.treat-chinese::scroll-marker {
    content: '';
    height: 1em;
    width: 1em;
    background-color: rgb(108, 108, 108);
    border-radius: 50%;
}

.treat-eng::scroll-marker:target-current {
    background-color: aquamarine;
    z-index: 100;
}

.treat-eng::scroll-marker {
    content: '';
    height: 1em;
    width: 1em;
    background-color: rgb(108, 108, 108);
    border-radius: 50%;
}

.treat-chinese::scroll-marker:target-current {
    background-color: aquamarine;
}



.treat-section-body::scroll-marker-group {
    display:flex;
    justify-content: center;
    gap:1%;
}


@media (min-width: 1100px) and (max-width: 1199px) {
    .treat-title-eng {
        font-size: 40px;
    }
    .treat-title-chinese {
        font-size: 25px;
    }
  
}

@media (min-width: 980px) and (max-width: 1099px) {
    
    
    .treat-title-eng {
        font-size: 40px;
    }
    .treat-title-chinese {
        font-size: 25px;
    }

}

   

  


@media (min-width: 800px) and (max-width: 979px) {
    

     .treat-title-eng {
        font-size: 30px;
    }
    .treat-title-chinese {
        font-size: 20px;
    }

  
}

    

  


@media (min-width: 660px) and (max-width: 799px) {
    
    .treat-chinese-text, .treat-eng-text {
       font-size: 16px;
    }


     .treat-title-eng {
        font-size: 30px;
    }
    .treat-title-chinese {
        font-size: 20px;
    }

    
  
}

@media (max-width: 659px) {
    

    .treat-chinese-text, .treat-eng-text {
        font-size: 12px;
    }

   

    .treat-title-eng {
        font-size: 20px;
    }
    .treat-title-chinese {
        font-size: 12px;
    }

    .treat-section-body::scroll-button(right) {
        translate: -100%;
    }

    .treat-section-body::scroll-button(left) {
        translate: 100%;
    }


    .treatment-section {
        height: 600px;
        margin-top: 5%;
    }



  

  
}