*{
    border: 0px solid black;
}
h1,h2,h3,h4,h5,h6{
    margin: 0px;
    padding: 0px;
}
html, body{
    margin: 0px;
    display: flex;
    flex-direction: column;
}
a {
    text-decoration: none; 
    color: inherit; 
  }
.center{
    display: flex;
    justify-content: center;
    align-items: center;
}
.button{
    display: inline-block;
    font-size: 24px;
    padding: 12px 24px;
    border-radius: 36px;
    border: 1px solid black;
    font-family: "Hedvig Letters Serif";
    font-weight: 500;
    overflow: hidden;
    background-color: white;
    cursor: pointer;
}

.button:hover{
    transition: 0.5s ease;
    background-color: #18265E;
    color: white;
}
.title{
    font-size: 80px;
    font-family: "Hedvig Letters Serif";
    font-weight: 300;
    display: inline-block;
    position: relative;
    top: 50px;
    left: 50px;
}
.description{
    font-size: 20px;
    font-family: "Noto Sans";
    font-weight: 200;
    width: 800px;
    float: right;
    position: relative;
    top: 70px;
    right: 50px;
}
.intro{
    font-size: 20px;
    position: absolute;
    left: 488px;
    top: 540px;
    display: block;
    font-family: "Noto Sans";
    font-weight: 300;
    width: calc(100% - 550px);
}

.Menu{
    width: 100%;
    height: 100%;
    background-color: #18265E;
    z-index: 2;
    position: fixed;
    top: 0px;
    left: 0px;
    opacity: 0;
    display: flex;
    pointer-events: none;
    transition: 0.5s ease-in-out;
}
.Menu .menu_container{
    position: absolute;
    left: 250px;
    top: 160px;
}
.Menu .menu_container .menu_list{
    display: flex !important;
    flex-direction: column !important;
    align-items: start !important;
    margin-bottom: 80px !important;
    gap: 0px;
}
.Menu .menu_container .menu_list h1{
    font-size: 80px;
    color: white;
    font-family: "Hedvig Letters Serif";
    font-weight: 300;
    cursor: pointer;
}

.Menu .menu_container .icon_list{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 60px;
}
.Menu .menu_container .icon_list img{
    height: 80px; 
    cursor: pointer;
}
.active{
    pointer-events: auto;
    opacity: 1;
}
.hide{
    display: none;
}
.show{
    display: flex;
}

.fade-in-up{
    opacity: 0;
    transform: translateY(-50px);
    transition: 1s ease-in-out;
}
.fade-in-up.visible{
    opacity: 1;
    transform: translateY(0);
}
.fade-in-up.invisible{
    opacity: 0;
    transform: translateY(50px);
}
/* RWD */
@media(max-width: 1200px){
    .hidden_1200{
        display: none;
    }
    /* Home */
    .logo{
        width: 30px !important;
        left: 30px !important;
        top: 30px !important;
    }
    .navigationBar{
        height: 100px !important;
        background-color: white;
    }
    nav{
        right: 30px !important;
        top: 24px !important;
    }
    
    nav h6{
        font-size: 12px !important;
        margin: 4px !important;
        padding: 16px 20px !important;

    }
    nav .icon_Menu{
        margin-left: 4px !important;
    }
    nav .icon_Menu .line{
        width: 16px !important;
        height: 3px;
        background-color: black;
        margin: 4px 0px !important;
    }
    .Home_Header .mainTitle{
        left: 30px !important;
    }
    .Home_Header .mainTitle h1{
        font-size: 120px !important;
    }
    .Home_Header .mainTitle .whiteShape{
        left: -15px !important;
        width: 250px !important;
        height: 150px !important;
    }
    .Home_Header .mainTitle .blueShape{
        left: 630px !important;
        top: 80px !important; 
    }
    .Home_Header .adjs{
        left: 30px !important;
    }
    .intro{
        left: 330px !important;
        width: calc(100% - 400px) !important;
    }
    /*section03_service*/
    .title{
        left: 30px !important;
    }
    .description{
        float: none !important;
        top: 80px !important;
        right: auto !important;
        left: 30px !important;
        width: calc(100% - 60px) !important;
    }
    .serviceSet{
        height: 600px !important;
    }
    .ItemResearch{
        display: flex !important;
    }
    .ItemStrategy, .ItemContent, .ItemExperience{
        display: none !important;
    }
    .serviceItem{
        position: relative;
        top: 50px !important;
        margin: 0px !important;
    }
    .serviceItem img{
        width: 40vw !important;
    }
    .serviceItem h3{
        margin-top: 60px !important;
        font-size: 24px !important;
    }
    .switch{
        display: flex !important;
        justify-content: center !important;
        width: 100% !important;
        position: absolute !important;
        top: 900px !important;
    }
    .switch img{
        margin: 0px 15px !important;
    }
    /*section04_works*/
    .Home_Section03_Works{
        height: 1200px !important;
    }
    .Home_Section03_Works .container{
        height: 800px !important;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .Home_Section03_Works .slideshow{
        position: relative;
        width: 100vw !important;
        height: 500px !important;
        margin-left: 0px !important;
        top: 150px !important;
        overflow: hidden;
    }

    .Home_Section03_Works .button{
        float: none !important;
        position: auto !important;
        right: auto !important;
        left: 50% !important;  
        transform: translateX(-50%) !important;
        top: auto !important;
        margin-top: 850px !important;
    }
    .projectTitle{
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        margin-top: 200px !important;
    }
    .projectTitle h6{
        font-size: 14px !important;
        font-weight: 300 !important;
    }
    .projectTitle .none{
        display: none !important;
    }
    /*section05_contact*/
    .blueBG{
        width: calc(100% - 100px);
        height: calc(100% - 100px);
        background-color: #18265E;
        position: absolute;
        top: 50%;  
        left: 50%;
        transform: translate(-50%, -50%);
    }
    .whiteBG{
        width: calc(100% - 200px) !important;
        height: 350px;
        background-color: white;
        position: absolute;
        top: 50%;  
        left: 50%;
        transform: translate(-50%, -50%);
    }
    .Home_Section04_Contact .container{
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }
    .Home_Section04_Contact .container h1{
        font-size: 24px !important;
        font-weight: lighter !important;
        position: absolute !important;
        top: calc(50% - 30px) !important;  
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        white-space: nowrap !important;
    }
    .Home_Section04_Contact .container h3{
        font-size: 12px !important;
        position: absolute !important;
        font-weight: 100 !important;
        top: calc(50% + 30px) !important;  
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
    }

    /* About */
    /* Header */
    .About_Header .mainTitle{
        top: -150px !important;
        left: -70px  !important;
    }
    .About_Header .intro{
        top: 430px !important;
        left: 30px !important;
        width: 600px !important;
    }
    .arrow{
        position: absolute;
        left: 45px !important;
        top: 770px;
    }
    /* section02_founder*/
    .About_Section02_Founder{
        height: 1024px !important;
    }
    .About_Section02_Founder img{
        right: auto !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        top: 200px !important;
        width: 350px !important;
    }
    .About_Section02_Founder .name{
        font-size: 32px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        top: 610px !important;
    }
    .About_Section02_Founder h6{
        font-size: 12px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        text-align: center !important;
        top: 700px !important;
    }
    /* section04_client*/
    .client_container img{
        height: 45px !important;
    }
    .award_container img{
        height: 55px !important;
    }
    /* section05_contact*/
    .About_Section05_Contact .container{
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }
    .About_Section05_Contact .container h1{
        font-size: 24px !important;
        font-weight: lighter !important;
        top: calc(50% - 45px) !important;  
        left: 50% !important;
        transform: translate(0, -50%) !important;
        transform: translateX(-15%) !important;
        white-space: nowrap !important;
    }
    .About_Section05_Contact .container h3{
        font-size: 12px !important;
        position: absolute !important;
        top: calc(50% + 30px) !important;  
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
    }
    /*Contact*/
    /* Header */
    .Contact_Header .location{
        left: 30px !important;
    }
    .Contact_Header .location h6{
        font-size: 20px !important;
    }
    .Contact_Header .info_Taipei{
        left: 30px !important;
    }
    .Contact_Header .info_Taipei h3{
        font-size: 36px !important;
    }
    .Contact_Header .info_Taipei h6{
        font-size: 14px !important;
        width: 300px !important;
    }
    .Contact_Header .info_Sydney{
        left: 30px !important;
    }
    .Contact_Header .info_Sydney h3{
        font-size: 36px !important;
    }
    .Contact_Header .info_Sydney h6{
        font-size: 14px !important;
        width: 300px !important;
    }
    .Contact_Header .blueShape{
        width: 80px !important;
        height: 40px !important;
        left: 30px !important;
        top: 700px !important;
    }
}
@media(max-width: 800px){
    /* Menu*/
    .Menu .menu_container{
        left: auto !important;
        top: auto !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        height: 100% !important;
    }
    .Menu .menu_container .menu_list{
        align-items: center !important;
        gap: 20px !important;
    }
    .Menu .menu_container .menu_list h1{
        font-size: 50px !important;
    }
    .Menu .menu_container .icon_list{
        gap: 40px !important;
    }
    .Menu .menu_container .icon_list img{
        height: 40px !important; 
    }
    /* Home */
    .hidden{
        display: none;
    }
    
    .Home_Header{
        height: 850px !important ;
    }
    .Home_Header .mainTitle{
        position: absolute;
        left: 30px !important;
        top: 180px !important;
        width: 400px !important;
    }
    .Home_Header .mainTitle h1{
        font-size: 90px !important;
        font-weight: lighter !important;
        color: #18265E;
    }
    
    .Home_Header .mainTitle .blueShape{
        width: 50px;
        height: 30px;
        background-color: #18265E;
        position: absolute !important;
        left: 280px !important;
        top: 155px !important;
    }
    .Home_Header .mainTitle .whiteShape{
        width: 200px !important;
        height: 100px !important;
        left: -10px !important;
        top: 0px !important;
    }
    
    .Home_Header .adjs{
        font-size: 30px !important;
        left: 30px !important;
        top: 400px !important;
    }
    
    .Home_Header .adjs h3{
        margin: 0px 0px !important;
    }
    .intro{
        position: absolute;
        left: 30px !important;
        top: 580px !important;
        width: calc(100% - 60px) !important;
    }
    .Home_Header .intro h6{
        font-size: 12px !important;
    }
    
    .Home_Header .intro .button{
        font-size: 12px !important;
        width: 80px !important;
    }
    .hor01{
        top: 240px !important;
    }
    
    .hor02{
        top: 350px !important;
    }
    
    .ver01{
        left: 130px !important;
    }
    
    .ver02{
        left: 260px !important;
    }
    
    .circle{
        width: 110px !important;
        height: 110px !important;
        position: absolute;
        top: 240px !important;
        left: 250px !important;
    }
    
    .incline{
        top: 250px !important;
    }
    /*Section02-image*/
    .Home_Section01_Image{
        height: 500px !important;
    }
    .Home_Section01_Image img{
        width: calc(100% - 60px) !important;
        padding: 15px !important; 
    }
    /*Section03-Service*/
    .Home_Section02_Service{
        height: 850px !important ;
        border: 0px solid black;
    }
    .title{
        font-size: 40px !important;
        top: 30px !important;
        left: 30px !important;
    }
    .description{
        font-size: 12px !important;
        width: calc(100% - 60px) !important;
        right: 30px !important;
    }
    .serviceSet{
        height: 600px !important;
    }
    .serviceItem{
        margin: 0px !important;
    }
    .serviceItem h3{
        margin-top: 40px !important;
        font-size: 24px !important;
    }
    .switch{
        display: flex !important;
        justify-content: center !important;
        width: 100% !important;
        position: absolute !important;
        top: 700px !important;
    }
    .switch img{
        margin: 0px 15px !important;
    }
    /*section03_works*/
    .Home_Section03_Works{
        height: 1024px !important;
    }
    .Home_Section03_Works img{
        top: 0px !important;
    }
    .Home_Section03_Works .slideshow{
        top: 0px !important;
    }
    .Home_Section03_Works .button{
        margin-top: 700px !important;
        font-size: 12px !important;
        font-weight: 100 !important;
    }
    .projectTitle{
        margin-top: 50px !important;
    }

    /* About */
    /* Header */
    .About_Header{
        height: 850px !important;
    }
    .About_Header .mainTitle h1{
        font-size: 80px !important;
        width: 400px !important;
        top: 300px !important;
    }
    .About_Header .mainTitle .blueShape{
        position: absolute;
        left: 300px !important;
        top: 460px !important;
    }
    .About_Header .mainTitle .whiteShape{
        position: absolute;
        left: 90px !important;
        top: 400px !important;
        width: 180px !important;
        height: 100px !important; 
    }
    .About_Header .intro{
        font-size: 12px !important;
        left: 30px !important;
        top: 420px !important;
        margin-right: 30px !important;
        width: calc(100% - 60px) !important;
    }
    .arrow{
        position: absolute;
        left: 45px !important;
        top: 730px !important;
    }
    .bgShapes{
        display: flex;
        flex-direction: column;
        align-items: end;
        position: relative;
        top: 550px !important;
    }
    .blueShape01{
        width: 60px !important;
        height: 40px !important;
        background-color: #18265E;
        opacity: 0.1;
    }
    .blueShape02{
        width: 110px !important;
        height: 55px !important;
        background-color: #18265E;
        opacity: 0.3;
    }
    .blueShape03{
        width: 170px !important;
        height: 70px !important;
        background-color: #18265E;
        opacity: 0.7;
    }
    .blueShape04{
        width: 220px !important;
        height: 80px !important;
        background-color: #18265E;
        opacity: 1;
    }
    /* section02_founder*/
    .About_Section02_Founder{
        height: 950px !important;
    }
    .About_Section02_Founder .blueShape{
        left: 200px !important;
        top: 60px !important;
        width: 20px !important;
        height: 12px !important;
    }
    .About_Section02_Founder .title{
        font-size: 40px !important;
        top: 30px !important;
        left: 30px !important;
    }
    .About_Section02_Founder img{
        right: auto !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        top: 150px !important;
        width: 350px !important;
    }
    .About_Section02_Founder .name{
        font-size: 32px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        top: 560px !important;
    }
    .About_Section02_Founder h6{
        font-size: 12px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        text-align: center !important;
        top: 650px !important;
    }
    

    /*section04_client*/
    .awardsTitle{
        top: 512px !important;
    }
    .client_container{
        top: 200px !important;
        gap: 10% !important;
        row-gap: 30px !important;
        box-sizing: border-box !important; 
    }
    .client_container img{
        height: 17px  !important;
    }
    .award_container{
        height: auto !important;
        top: 680px !important;
        gap: 10% !important;
    }
    .award_container img{
        height: 40px  !important;
    }
    /* Works */
    /* header */
    .Works_Header{
        min-height: auto !important;
        box-sizing: border-box !important;
    }
    .Works_Header h3{
        margin-left: 30px !important;
        top: 120px !important;
        font-size: 20px !important;
    }
    .Works_Header .seperateLine{
        margin-left: 30px !important;
        width: calc(100% - 60px) !important;
        top: 130px !important; 
    }
    .Works_Header .genreList{
        flex-wrap: wrap !important;
        font-size: 12px !important;
        gap: 15px !important;
        row-gap: 10px !important;
        top: 145px !important;
        margin-left: 30px !important;
        width: calc(100% - 60px) !important;
    }
    .Works_Header .container{
        top: 150px !important;
        width: 100% !important;
    }
    .Works_Header .container .content_container{
        position: relative !important;
        width: 100% !important;
    }
    .Works_Header .container img{
        width: calc(100% - 60px) !important;
        margin: 10px 30px !important;
    }
    .Works_Header .container .description{
        display: block !important;
        position: relative !important;
        top: -5px !important;
    }
    .Works_Header .container .description h6{
        font-family: "Noto Sans";
        font-size: 12px !important;
        font-weight: 100 !important;
    }
    .Works_Header .container .description .contentTitle{
        font-weight: 600 !important;
    }
    /* Contact */
    /* Header */
    .Contact_Header{
        height: 1350px !important;
    }
    .Contact_Header .title{
        top: 120px !important;
    }
    .Contact_Header .container{
        width: 100% !important;
        height: auto !important;
        top: 200px !important;
    }
    .Contact_Header .location{
        justify-content: center !important;
        top: 880px !important;
        left: auto !important;
    }
    .Contact_Header .location h6{
        font-size: 16px !important;
    }
    
    .Contact_Header .info_Taipei{
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
        top: 930px !important;
        left: auto !important;
    }
    .Contact_Header .info_Taipei h3{
        font-size: 32px !important;
        margin-bottom: 10px !important;
    }
    .Contact_Header .info_Taipei h6{
        font-size: 12px !important;
        width: 230px !important;
    }
    .Contact_Header .info_Sydney{
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
        top: 930px !important;
        left: auto !important;
    }
    .Contact_Header .info_Sydney h3{
        font-size: 32px !important;
        margin-bottom: 10px !important;
    }
    .Contact_Header .info_Sydney h6{
        font-size: 12px !important;
        width: 230px !important;
    }
    .Contact_Header .blueShape{
        width: 50px !important;
        height: 25px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        top: 1250px !important;
    }
    /*Footer*/
    Footer{
        height: 300px !important; 
        font-size: 24px !important;
        
    }
    Footer .seperateLine{
        width: calc(100% - 60px) !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
    }
    
    Footer .studioName{
        left: 30px !important;
    }
    Footer .info{
        left: 30px !important;
        top: 100px !important;
    }
    Footer .icons{
        right: auto !important;
        left: 15px !important;
        top: 200px !important;
    }
}
@media(max-width: 435px){
    /* Home */
    /* Section01-Main */
    
    /*Section02-image*/
    
    /*Section03-Service*/

    /*Section04-Works*/
    .Home_Section03_Works .slideshow{
        top: 0px !important;
    }
    /*Section05-Contact*/
    .Home_Section04_Contact{
        height: 850px !important;
    }
    .blueBG{
        width: calc(100% - 60px) !important;
        height: calc(100% - 100px) !important;
    }
    .whiteBG{
        width: calc(100% - 100px) !important;
        height: 170px !important;
    } 

    /* About */
    /* Header */
    
    /* Section01_Image */

    /* Section02_Founder */
    .About_Section02_Founder{
        height: 850px !important;
    }

    /* Section03_Service */
    .About_Section03_Service{
        height: 850px !important;
    }
    .serviceItem h3{
        font-size: 12px !important;
        margin-top: 0px !important;
    }
    /* Section04_ClientsAwards */
    .About_Section04_ClientsAwards{
        height: 850px !important;
    }
    /* Section05_Contact */
    .About_Section05_Contact{
        height: 850px !important;
    }


    /* Works */
    
    /* Contact */
    
}

/* Home */
/* Header */
.logo{
    width: 43px;
    position: absolute;
    left: 50px;
    top: 35px;
    cursor: pointer;
}
.navigationBar{
    width: 100%;
    height: 150px;
    border: 0px solid black;
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 1;
}
.separateLine{
    width: 100%;
    height: 1px;
    background-color: black;
    opacity: 0.1;
    position: absolute;
    bottom: 0px;
}
nav{
    display:flex;
    justify-content: row;
    float: right;
    align-items: center;
    position: absolute;
    right: 50px;
    top: 45px;
}
nav img:hover{
    transition: 0.5s ease;
    background-color: #18265E;
    color: white;
}

nav h6{
    font-size: 24px;
    padding: 16px 24px;
    margin-left: 16px;
}
nav .icon_Menu{
    margin-left: 16px;
}
nav .icon_Menu .line{
    width: 24px;
    height: 3px;
    background-color: black;
    margin: 6px 0px;
}
nav .icon_Menu:hover .line{
    background-color: white;
}

.Home_Header{
    width: 100%;
    height: 1024px;
    position: relative;
    overflow: hidden;
}
.Home_Header .mainTitle {
    left: 100px;
    top: 326px;
    position: absolute;
}

.Home_Header .mainTitle h1{
    font-size: 150px;
    font-weight: lighter;
    color: #18265E;
}

.Home_Header .mainTitle .blueShape{
    width: 50px;
    height: 30px;
    background-color: #18265E;
    position: absolute;
    left: 770px;
    top: 105px;
}

.Home_Header .adjs{
    font-size: 48px;
    position: absolute;
    left: 100px;
    top: 520px;
}

.Home_Header .adjs h3{
    margin: 8px 0px;
    font-family: "Hedvig Letters Serif";
    font-weight: lighter;
}

.Home_Header .intro h6{
    font-size: 20px;
    font-family: "Noto Sans";
    font-weight: 300;
}

.Home_Header .intro .button{
    text-align: center;
    font-size: 24px;
    width: 110px;
    margin-top: 40px;
    margin-left: 0px;
}
.whiteShape{
    width: 350px;
    height: 200px;
    border: 1px solid black;
    position: absolute;
    left: -30px;
    top: 0px;
}

.hor01{
    width: 100%;
    height: 1px;
    position: absolute;
    top: 320px;
    background-color: grey;
    opacity: 0.2;
}

.hor02{
    width: 100%;
    height: 1px;
    position: absolute;
    top: 690px;
    background-color: grey;
    opacity: 0.2;
}

.ver01{
    width: 1px;
    height: 100%;
    position: absolute;
    left: 360px;
    background-color: grey;
    opacity: 0.2;
}

.ver02{
    width: 1px;
    height: 100%;
    position: absolute;
    left: 960px;
    background-color: grey;
    opacity: 0.2;
}

.circle{
    width: 370px;
    height: 370px;
    position: absolute;
    top: 320px;
    left:760px;
    opacity: 0.2;
    border: 1px solid grey;
    border-radius: 50%;
}

.incline{
    width: 100%;
    height: 1px;
    position: absolute;
    top: 350px;
    background-color: grey;
    opacity: 0.2;
    rotate: 45deg;
}

/* Section01_image */
.Home_Section01_Image{
    width: 100%;
    height: 1024px;
    display: flex;
    justify-content: center;
    align-items: start;
    position: relative;
}
.Home_Section01_Image img{
    width: calc(100% - 200px);
    border: 1px solid rgba(0, 0, 0, 0.2);
    padding: 30px;
}

/* Section02_Service */
.Home_Section02_Service{
    width: 100%;
    height: 1024px;
    position: relative;
    overflow: hidden;
}

.serviceItem{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 50px;
}
.Home_Section02_Service .serviceItem h3{
    margin-top: 75px;
    font-size: 40px;
    font-family: "Hedvig Letters Serif";
    font-weight: lighter;
    color: black;
}
.Home_Section02_Service .serviceItem .research{
    margin-top: 25px;
}
.serviceSet{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 800px;
}
.blackShape{
    width: 350px;
    height: 50px;
    background-color: black;
    position: relative;
    float: right;
    top: -150px;
    right: 50px;
}
.switch{
    display: none;
    position: relative;
}
.switch .switch_left{
    cursor: pointer;
}
.switch .switch_right{
    cursor: pointer;
}
/* Section03_Works */
.Home_Section03_Works{
    width: 100%;
    height: 1024px;
    border: 0px solid black;
    position: relative;
}
.Home_Section03_Works .slideshow{
    position: relative;
    width: calc(100% - 450px);
    height: 650px;
    margin-left: 50px;
    top: 150px;
    overflow: hidden;
}
.Home_Section03_Works .slideshow .slide{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}
.Home_Section03_Works .slideshow .slide.active{
    opacity: 1;
}
.Home_Section03_Works .slideshow .slide img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.Home_Section03_Works .project{
    display: none;
}
.Home_Section03_Works .project.active{
    display: flex;
}
.Home_Section03_Works .list{
    position: absolute;
    margin-right: 50px;
    top: 260px;
    right: 30px;
    float: right;
}
.Home_Section03_Works .list .sideTitles .sideTitle.bold{
    font-weight: 600;
}

.Home_Section03_Works .list h6{
    text-align: right;
    font-family: "Noto Sans";
    font-size: 20px;
    font-weight: 300;
    margin-bottom: 20px;
}
.listline{
    width: 1px;
    height: 320px;
    background-color: grey;
    opacity: 0.3;
    position: absolute;
    right: 210px;
}
.itemlines{
    position: absolute;
    right: 208px;
}
.itemline{
    background-color: black;
    width: 2px;
    height: 25px;
    margin-bottom: 23px;
    position: relative;
    opacity: 0;
}
.itemline.active{
    opacity: 1;
    transition: 0.5s ease-in-out;
}
.Home_Section03_Works .button{
    border: 1px solid black;
    font-weight: 300;
    float: right;
    position: absolute;
    right: 50px;
    top: 830px;
}
.projectTitle{
    display: none;
    font-family: "Noto Sans";
    font-weight: 100;
    font-size: 20px;
}

/* Section04_Contact */
.Home_Section04_Contact{
    width: 100%;
    height: 1024px;
    position: relative;
}

.blueBG{
    width: calc(100% - 100px);
    height: calc(100% - 100px);
    background-color: #18265E;
    position: absolute;
    top: 50%;  
    left: 50%;
    transform: translate(-50%, -50%);
}
.whiteBG{
    width: calc(100% - 400px);
    height: 350px;
    background-color: white;
    position: absolute;
    top: 50%;  
    left: 50%;
    transform: translate(-50%, -50%);
}
.Home_Section04_Contact .container{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.Home_Section04_Contact .container h1{
    font-size: 80px;
    position: absolute;
    top: 420px;  
    left: auto;
}
.Home_Section04_Contact .container h3{
    font-size: 24px;
    position: absolute;
    top: 560px;  
}

/* About */
/* Header */
.About_Header{
    width: 100%;
    height: 900px;
    position: relative;
}
.About_Header .mainTitle h1{
    font-size: 100px;
    font-family: "Hedvig Letters Serif";
    font-weight: lighter;
    position: absolute;
    left: 100px;
    top: 380px;
}
.About_Header .mainTitle h1 span{
    color: #18265E;
}
.About_Header .mainTitle{
    position: relative;
}
.About_Header .mainTitle .blueShape{
    position: absolute;
    background-color: #18265E;
    left: 680px;
    top: 455px;
    width: 50px;
    height: 30px;
}
.About_Header .mainTitle .whiteShape{
    position: absolute;
    left: 400px;
    top: 380px;
    width: 240px;
    height: 120px;
}
.About_Header .intro{
    font-size: 20px;
    position: absolute;
    left: 100px;
    top: 570px;
    display: block;
    font-family: "Noto Sans";
    font-weight: 300;
    width: 650px;
}

.arrow{
    position: absolute;
    left: 110px;
    top: 770px;
}

.ver_line{
    width: 1px;
    height: 60px;
    background-color: black;
}
.tile_line01{
    width: 1px;
    height: 20px;
    background-color: black;
    transform: rotate(45deg);
    position: relative;
    left: 7px;
    top: -17px;
}
.tile_line02{
    width: 1px;
    height: 20px;
    background-color: black;
    transform: rotate(-45deg);
    position: relative;
    left: -7px;
    top: -37px;
}

.bgShapes{
    display: flex;
    flex-direction: column;
    align-items: end;
    position: relative;
    top: 260px;
}
.blueShape01{
    width: 130px;
    height: 90px;
    background-color: #18265E;
    opacity: 0.1;
}
.blueShape02{
    width: 260px;
    height: 130px;
    background-color: #18265E;
    opacity: 0.3;
}
.blueShape03{
    width: 400px;
    height: 160px;
    background-color: #18265E;
    opacity: 0.7;
}
.blueShape04{
    width: 500px;
    height: 190px;
    background-color: #18265E;
    opacity: 1;
}
/* Section01_Image */
.About_Section01_Image{
    width: 100%;
    position: relative;
}
.About_Section01_Image img{
    width: 100%;
}

/* Section02_Founder */
.About_Section02_Founder{
    width: 100%;
    height: 1024px;
    position: relative;
}
.About_Section02_Founder img{
    position: absolute;
    right: 50px;
    top: 200px;
}
.About_Section02_Founder .blueShape{
    position: absolute;
    background-color: #18265E;
    left: 400px;
    top: 105px;
    width: 50px;
    height: 30px;
}
.About_Section02_Founder .name{
    font-size: 60px;
    font-family: "Hedvig Letters Serif";
    font-weight: 300;
    position: absolute;
    left: 50px;
    top: 300px;
}
.About_Section02_Founder h6{
    position: absolute;
    left: 50px;
    top: 450px;
    width: 40%;
}
/* Section03_Service */
.About_Section03_Service{
    width: 100%;
    height: 1024px;
    position: relative;
    background-color: black;
}
.About_Section03_Service h1{
    color: white;
}

.About_Section03_Service .serviceItem h3{
    font-size: 40px;
    font-family: "Hedvig Letters Serif";
    color: white;
    font-weight: 300;
    margin-top: 75px;
}
.switch{
    display: none;
    position: relative;
}
/* Section04_ClientsAwards */
.About_Section04_ClientsAwards{
    width: 100%;
    height: 1024px;
    position: relative;
    background-color: black;
}
.About_Section04_ClientsAwards h1{
    color: white;
}
.awardsTitle{
    position: absolute;
    top: 512px;
}
.seperateLine{
    width: 0px;
    height: 120px;
    background-color: #fff;
}

.client_container{
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
    width: calc(100% - 60px);
    left: 50%;
    transform: translateX(-50%);
    height: 200px;
    position: absolute;
    top: 230px;
    gap: 2.5%;
    row-gap: 0px;
}
.award_container{
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
    height: 50%;
    position: absolute;
    top: 500px;
    gap: 2.5%;
}
/* Section05_Contact */
.About_Section05_Contact{
    width: 100%;
    height: 1024px;
    position: relative;
}
.About_Section05_Contact .container{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.About_Section05_Contact .container h1{
    position: absolute;
    top: 420px;  
    left: 50%;
    transform: translate(-50%, 0);
    width: 700px;
}
.About_Section05_Contact .container h3{
    position: absolute;
    top: 560px;  
    left: 50%;
    transform: translate(-50%, 0);
}

/* Works */
/* Header */
.Works_Header{
    width: 100%;
    height: auto;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    padding-bottom: 250px;
}
.Works_Header h3{
    position: relative;
    margin-left: 50px;
    top: 150px;
    font-size: 40px;
    font-family: "Hedvig Letters Serif";
    font-weight: 300;
}
.Works_Header .seperateLine{
    margin-left: 50px;
    width: calc(100% - 100px);
    height: 1px;
    background-color: black;
    position: relative;
    top: 160px;
}
.Works_Header .genreList{
    font-size: 20px;
    font-family: "Hedvig Letters Serif";
    font-weight: 300;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
    position: relative;
    top: 175px;
    margin-left: 50px;
}
.Works_Header .genreList .genre{
    opacity: 0.3;
    cursor: pointer;
}
.Works_Header .genreList .genre.bold{
    opacity: 1;
}

.Works_Header .container{
    display: flex;
    justify-content: start;
    align-items: center;
    flex-wrap: wrap;
    position: relative;
    top: 200px;
    row-gap: 30px;
    gap: 30px;
    width: calc(100% - 100px);
    left: 50%;
    transform: translateX(-50%);
}
.Works_Header .container .content_container{
    width: calc(50% - 16px);
}
.Works_Header .container img{
    width: 100%;
}
.Works_Header .container .description{
    display: none;
}

/* Contact */
/* Header */
.Contact_Header{
    width: 100%;
    height: 1024px;
    position: relative;
}
.Contact_Header .title{
    position: relative;
    top: 150px;
}
.Contact_Header .location{
    display: flex;
    flex-direction: row;
    gap: 20px;
    position: relative;
    top: 210px;
    left: 50px;
}
.Contact_Header .location h6{
    font-size: 24px;
    font-family: "Hedvig Letters Serif";
    font-weight: 300;
    cursor: pointer;
}
.Contact_Header .location h6:hover{
    text-decoration: underline;
    transition: 1s ease;
}

.Contact_Header .info_Taipei{
    flex-direction: column;
    gap: 20px;
    position: relative;
    top: 280px;
    left: 50px;
}
.Contact_Header .info_Taipei h3{
    font-size: 50px;
    font-family: "Hedvig Letters Serif";
    font-weight: 300;
    margin-bottom: 25px;
}
.Contact_Header .info_Taipei h6{
    font-size: 20px;
    font-family: "Hedvig Letters Serif";
    font-weight: 300;
    width: 370px;
}

.Contact_Header .info_Sydney{
    flex-direction: column;
    gap: 20px;
    position: relative;
    top: 280px;
    left: 50px;
}
.Contact_Header .info_Sydney h3{
    font-size: 50px;
    font-family: "Hedvig Letters Serif";
    font-weight: 300;
    margin-bottom: 25px;
}
.Contact_Header .info_Sydney h6{
    font-size: 20px;
    font-family: "Hedvig Letters Serif";
    font-weight: 300;
    width: 370px;
}

.Contact_Header .container{
    display: flex;
    justify-content: center;
    overflow: hidden;
    width: 60%;
    height: 700px;
    position: absolute;
    right: 0px;
    top: 180px;
}
.Contact_Header .container .image{
    height: 100%;
}
.Contact_Header .blueShape{
    width: 100px;
    height: 50px;
    background-color: #18265E;
    position: absolute;
    left: 50px;
    top: 800px;
}

/* Footer */
Footer{
    width: 100%;
    height: 165px;
    position: relative;
    font-size: 24px;
    font-family: "Hedvig Letters Serif";
    font-weight: 100;
}

Footer .seperateLine{
    width: 100%;
    margin-right: 50px;
    height: 1px;
    background-color: grey;
    position: absolute;
    top: 0px;
}

Footer .studioName{
    display: inline-block;
    position: absolute;
    left: 50px;
    top: 50px;
}
Footer .info{
    display: inline-block;
    position: absolute;
    left: 400px;
    top: 50px;
}
Footer .info h6{
    margin-bottom: 12px;
}
Footer .icons{
    display: flex;
    align-items: center;
    position: absolute;
    right: 50px;
    top: 50px;
}
Footer .icons img{
    margin-right: 12px;
    cursor: pointer;
}