/* body{
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    
} */
/* === 頁面滑動 === */
/* html, body {
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
  

}
section {
    height: 100vh;
   
    scroll-snap-align: start;
     
}  */

@media (min-width: 768px) and (max-width: 1023px) {
    /* === 垂直滾動條 === */
    .sb-button-container{
        display: none;
    
    }

    ::-webkit-scrollbar {  /* 預設的滾動條消失 */
        display: none;
    }


    /* === 懶人按鍵 === */
    .toTOp-button-container{
        position: fixed;
        
        width: 40%;
        
        /* border:solid 1px rgb(212, 143, 90); */
        left: 112%;
        top: 85%;
        transform: translateX(-50%); 
        z-index: 100;
    
        cursor: pointer;
        
    
        
    }

    .toTOp-button{
        /* display: show; */
    
        /* position: relative; */
        width: 15% ;
        height: auto;
        /* border:solid 1px rgb(128, 210, 34); */
    
        
       
    }

    


}


@media (max-width: 767px) {
     ::-webkit-scrollbar {  /* 預設的滾動條消失 */
        display: none;
    }
    /* === 垂直滾動條 === */
    .sb-button-container{
        display: none;
    
    }
    .longContent{
    
        overflow-y: hidden;
    }
    .content.longContent2#section2{
        height: 200vh;
    }
    .writting{  
        width: 100%;
        height: auto;
        /* border:solid 5px rgb(217, 178, 72); */
    }

  
    /* === 懶人按鍵 === */
    .toTOp-button-container{
        position: fixed;
        
        width: 40%;
        
        /* border:solid 1px rgb(212, 143, 90); */
        left: 112%;
        top: 85%;
        transform: translateX(-50%); 
        z-index: 100;
    
        cursor: pointer;
        
    
        
    }

    .toTOp-button{
        /* display: show; */
    
        /* position: relative; */
        width: 15% ;
        height: auto;
        /* border:solid 1px rgb(128, 210, 34); */
    
        
       
    }

    
    .content{
        position: relative;
    }


}
@media (min-width: 1024px) and (min-height: 700px){
        .longContent{
    
        overflow-y: auto;
    }
    
    
    .content{
    
        /* margin-left: 2%; */
        /* padding-top: 1%; */
        /* padding-left: 1%;
        padding-right: 1.4%; */
        
    
        /* border:solid 5px rgb(72, 72, 217); */
        font-size: 25px;
    }
    .content.longContent2#section2{
        height: 200vh;
    }
    .writting{  
        width: 100%;
        height: 100vh;
        /* border:solid 5px rgb(217, 178, 72);   */
    }
    
    
    /* === 垂直滾動條 === */
    .scroll-bar-fixed{
        position: fixed;
        /* border:solid 1px rgb(255, 6, 6); */
    
        right: 1.5%;
        height: 100vh;
        width: 13vh;
        z-index: 10;

        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 3vh;
    }
    .scroll-bar{
      
        position: relative; 
        width: 100%;
     
        height: auto; 
        
        display: flex;
        flex-direction: column;
        align-items: center;
        
        
    
        /* border:solid 1px rgb(2, 2, 2); */
    }
    
    .sb-button-container{
        position: relative;
        width: 25%;
        height: auto;
       
        
        
        cursor: pointer;
        
        display: flex;
        justify-content: center;
        margin-bottom: 5%;
      
    
    }
    .sb-button{
        width: 100%;
        height: 100%;
    
        display: relative;
        justify-content: center; 
        align-items: center;  
    
    
        /* border:solid 1px rgb(94, 90, 212); */
        cursor: pointer;
    }

    /* === 懶人按鍵 === */
    .toTOp-button-container{
        position: relative;
        
        width: 100%;
        height: auto;
        
        /* border:solid 1px rgb(212, 143, 90); */
    
    
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
    
        
    }
    .a-toTOp-button{
        position: relative;
        /* border:solid 1px rgb(210, 34, 34); */
        width: 100%;
        height: auto;
        display: flex;
        opacity: 0;     /* 預設透明 (看不見) */
        visibility: hidden; /* 預設不可點擊 */
        justify-content: center; 
        align-items: center;  
        
        
    }
    .a-toTOp-button.show {
        /* cursor: pointer; */
        opacity: 1;
        visibility: visible;
    }
    .toTOp-button{
   
        position: relative;
        width: 27% ;
        height: auto;
        /* border:solid 1px rgb(128, 210, 34); */
    
        
       
    }
    ::-webkit-scrollbar {  /* 預設的滾動條消失 */
        display: none;
    }
}

@media (min-width: 1024px) {

    .longContent{
    
        overflow-y: auto;
    }
    
    
    .content{
    
        /* margin-left: 2%; */
        /* padding-top: 1%; */
        /* padding-left: 1%;
        padding-right: 1.4%; */
        
    
        /* border:solid 5px rgb(72, 72, 217); */
        font-size: 25px;
    }
    .content.longContent2#section2{
        height: 200vh;
    }
    .writting{  
        width: 100%;
        height: 100vh;
        /* border:solid 5px rgb(217, 178, 72);   */
    }
    
    
    /* === 垂直滾動條 === */
    .scroll-bar-fixed{
        position: fixed;
        /* border:solid 1px rgb(255, 6, 6); */
    
        right: 1.5%;
        height: 100vh;
        width: 13vh;
        z-index: 10;

        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 3vh;
    }
    .scroll-bar{
      
        position: relative; 
        width: 100%;
     
        height: auto; 
        
        display: flex;
        flex-direction: column;
        align-items: center;
        
        
    
        /* border:solid 1px rgb(2, 2, 2); */
    }
    
    .sb-button-container{
        position: relative;
        width: 25%;
        height: auto;
       
        
        
        cursor: pointer;
        
        display: flex;
        justify-content: center;
        margin-bottom: 5%;
      
    
    }
    .sb-button{
        width: 100%;
        height: 100%;
    
        display: relative;
        justify-content: center; 
        align-items: center;  
    
    
        /* border:solid 1px rgb(94, 90, 212); */
        cursor: pointer;
    }

    /* === 懶人按鍵 === */
    .toTOp-button-container{
        position: relative;
        
        width: 100%;
        height: auto;
        
        /* border:solid 1px rgb(212, 143, 90); */
    
    
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
    
        
    }
    .a-toTOp-button{
        position: relative;
        /* border:solid 1px rgb(210, 34, 34); */
        width: 100%;
        height: auto;
        display: flex;
        opacity: 0;     /* 預設透明 (看不見) */
        visibility: hidden; /* 預設不可點擊 */
        justify-content: center; 
        align-items: center;  
        
        
    }
    .a-toTOp-button.show {
        /* cursor: pointer; */
        opacity: 1;
        visibility: visible;
    }
    .toTOp-button{
   
        position: relative;
        width: 27% ;
        height: auto;
        /* border:solid 1px rgb(128, 210, 34); */
    
        
       
    }
    ::-webkit-scrollbar {  /* 預設的滾動條消失 */
        display: none;
    }
}