@import url('https://fonts.googleapis.com/css2?family=Albert+Sans:ital,wght@0,100..900;1,100..900&family=Roboto+Slab:wght@100..900&display=swap');
/*
tc font-family: "Roboto Slab", serif, 
en font-family: "Albert Sans", sans-serif;
*/
:root {
  --main: #FFCB00;
  --secd: hsla(170, 19%, 62%, 1);
}
body, h2, input, textarea, button, .project article h2{font-family: "Albert Sans", "Roboto Slab", sans-serif;}

.container, header, section, .hero, .service_title, .service_contant, .service_contant, .help, .help div, .help_content,.partner>div, .brand div, .contact, .category, .whyus, .project{
    display: flex;
    flex-direction: column;
}

body{
    background: #F6F4F4;
    display: flex;
/*    flex-direction: column;*/
    justify-content: center;
}

div, section{
/*    outline:1px solid green;*/
}
.container, .contact, footer{
/*    align-content: flex-end;*/
    align-items: flex-end;
}

header, .hero, .service_title, .service_contant, .help, .work, .brand div, .contact, .category{
    flex-direction: row;
}
header{
    height: 72px;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    z-index: 10;
}
header img{
    width: 111px;
    height: 33px;
    padding-left: 8px;
}
section{
    width: 1300px;
    height: 100vh;
}
h1, h2, h3{ text-transform: uppercase;}
h2{ font-size: 40px; font-weight: 900; line-height: 48px; letter-spacing: 5px;}
h2 span{color: var(--main, #222);}
p, .support h3, label{font-size: 18px;line-height: 24px;}
label, input{line-height: 32px;}
input, textarea, button{line-height: 48px;font-size: 32px;border:0;}
input, textarea{color:hsla(170, 19%, 62%, 1);border-bottom:1px solid #222;background: var(--main, #fff);padding-left: 8px;margin-bottom: 16px;}
button{font-weight: 700;font-size: 18px;line-height: 40px;background: var(--secd);}
input:focus, textarea{outline: 0}
input[type="radio"]{width: auto;line-height: 48px;margin-left: 12px;}
.container,header, footer, .contact{width: 1420px;}
.hero h1, .service_title p,.brand div{font-size: 24px;}
.hero{justify-content: flex-start;align-items: center;}
.hero h2{margin-bottom: 3vh;}
.service_title{margin-top: 132px;margin-bottom: 48px;}
.service_title, .service_contant div{justify-content: space-between;}
.service_title div{width: 50%;position: relative;}
.service_title div::before{content: "";border-left: 8px solid var(--main, #222);height: 170px; display: block;padding-right: 8px;position: absolute;top: 10px;left: -16px;}
.service_title p{margin-top: 16px;}
.service_contant {justify-content: space-between;}
.service_contant div{width: 216px;justify-content: space-between;}
.service_contant h3{font-size: 24px;margin-bottom: 30px;}
.service_contant span{
color: #FFCB00;
 font-size: 32px;
 font-family: Albert Sans;
 font-weight: 800;
 line-height: 24px;position: relative;top: 2px;padding-right: 16px;}
.container{
    background: url(../image/bg01.svg) no-repeat 0 1850px;
}
.help{
    justify-content: space-between;
}
.help img{
    width: 578px;
    height: 312px;
    margin-left: 8px;
}
.help img,.help>div{margin-top: 19.4vh;
    
}
.help_content{
    writing-mode: vertical-rl;
    height: 200px;
    margin-top: 64px;
    letter-spacing: 3px;
}
.help_content h3{
    font-size: 30px;
    padding: 0 16px;    
}
.help_content p{
  line-height: 1.5;
  padding-left: 20px;
}
.support{position: relative;}
.support h2, .support div{position: absolute;}
.support h2{ left: calc(750px - 300px);top: calc(50vh - 16px);}
.impo{position: relative;left: -16px;}
.impo::before{content: "";border-left: 8px solid var(--main, #222);height: 15px; display: inline-block;padding-right: 8px;}
.support div:nth-child(1){top: 20vh;left: 180px;}
.support div:nth-child(2){top: 10vh ;left: 580px;}
.support div:nth-child(3){top: 20vh ;left: 1000px;}
.support div:nth-child(4){bottom: 20vh;left: 180px;}
.support div:nth-child(5){bottom: 10vh;left: 580px;}
.support div:nth-child(6){bottom: 20vh;left: 1000px;}
.support p{width: 128px;}

.partner>div{flex-direction: row;justify-content: space-between;align-items: center;margin-top: 40px;}
.partner h2{margin-top: 20vh;}
.partner .impo{left: 0;}

.work{flex-wrap: wrap;}
.work h2{width: 100%;margin-bottom: 24px;}
.work img{width: 580px;}
.work>div:nth-child(odd){padding-left: 140px;}
.project{
    position: relative;
    background: var(--main) url(../image/bg01.svg) no-repeat 0 25vh;
    align-items: center;
    justify-content: center;
    width: 0vw;
        height: 0vh;
}
.project article{
display: flex;
flex-direction: row;
}
.project img{padding-right: 16px;}
.project article h2{font-size: 24px;
font-weight: 500;
line-height: 48px;}
.project article li{
    font-size: 18px;
    font-family: Roboto Serif;
    font-weight: 400;
    line-height: 24px;
}
.project button{
    position: absolute;
    top: 100px;
    right: 32px;
    cursor: pointer;
    background: none;
    border:0;
    font-size: 168px;
    font-weight: 300;
    transform: rotate(28deg);
}
.brand div{width: 100%;justify-content: space-between;align-items: center;margin-top: 16px;margin-bottom: 24px;}
.brand button{border:0;width: 40px;text-indent: -112px;cursor: pointer; height: 40px;overflow: hidden; background: #F6F4F4 url(../image/plus.svg);}

.whyus{align-items: center;align-content: center;height: 100vh;}
.whyus h2{margin-top: 200px;}
.whyus h3{font-size: 32px;line-height: 48px;letter-spacing: 3.20px;color: var(--main, #222)}
.whyus h3+h3{font-size: 24px;color: #222;margin-bottom: 3em;}
.whyus p{width: 40%;text-align: center;}

.contact{
    width: 1420px;
    background: var(--main, #222);
    align-items: flex-start;
    height: 100vh;
}
.contact h2, .contact div{width: 710px;}
.contact h2{text-align: right;margin-right: 1em;}
.contact h2, .contact>div{padding-top: 10vh;}
.contact span{color: #222;font-size: 18px;font-weight: 400;padding-right: 128px;}
.contact label{width: 100px;display: block;}
.contact input, .contact textarea{width: 30vw;}
.contact input[type="radio"]{width: auto;}
.contact button{position: relative;left: 210px;padding: 0 32px;}
.category {flex-wrap: wrap;}
.category label:nth-child(1){width: 100%;}
footer{
    background: #222;
    color: #f2f2f2;
}
footer p{font-family: "Albert Sans", sans-serif; padding-left: 1em;line-height: 1.612;font-weight: 100;}

@keyframes rotate360 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* 套用動畫到圖片的 CSS 類別 */
.rotating-image {
    position: absolute;
    left: calc(750px - 200px);
    top: calc(50vh - 98px);
    width: 208px;
  animation-name: rotate360;
  animation-duration: 2s; /* 完成一圈旋轉需要 5 秒 */
  animation-timing-function: cubic-bezier(0, -0.3, 1, .3); /* 線性速度，讓旋轉速度保持一致 */
  animation-iteration-count: infinite;  無限循環 
}

@keyframes zoomWindow{
    0%{
        width: 0vw;
        height: 0vh;
    }
    100%{
        width: 100vw;
        height: 100vh;
    }
}

@keyframes rotateX{
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(399deg);
    }
}

.project_on{
    position: fixed;
    top: 0;
    left: 0;
    overflow: hidden;
/*    background-color: var(--main,#f2f2f2);*/
    
    animation-name: zoomWindow;
    animation-duration: .3s; 
    animation-timing-function: cubic-bezier(0, -0.3, 1, .3); 
    animation-fill-mode: forwards;
    z-index: 8;
}
.project_on button{
    color:var(--secd);
    animation-name: rotateX;
    animation-duration: .8s; 
    animation-timing-function: cubic-bezier(0, -0.3, 1, .3); 
/*    animation-iteration-count: 1;*/
    animation-fill-mode: forwards;
}

.error-message {
    color: red;
    font-size: 14px;
    margin-top: 5px;
}
.success-message {
    color: green;
    font-size: 16px;
    margin-top: 20px;
    padding: 10px;
    background-color: #e8f5e9;
    border-radius: 4px;
    text-align: center;
    display: none;
}
#loading {
    display: none;
    text-align: center;
    margin-top: 10px;
}
#loading img {
    width: 30px;
    height: 30px;
}

@media only screen and (max-width: 25.875em) {
h2 {font-size: 26px; line-height: 32px; letter-spacing: 3px;}
    .container{width: 100vw;padding: 0 5vw;}
    header, footer, .contact, section{width: 90vw;}
    section {height: 100vh;/*outline:1px solid red; */}
    .service, .service_title, .service_contant, .help, .brand div, .category{flex-direction: column;}
    .service{height: 1480px;}
    .service_title div {width: 100%;margin-bottom: 2vh;}
    .service_contant div {width: 100%; margin-bottom: 10vw;}
    .hero h1, .service_title p, .brand div{font-size: 16px; line-height: 1.3}
    .help{height: 868px; margin-bottom: 26vh;}
    .help img{width: 90vw;height: auto;}
/*    .support h2, .support div{position: static;}*/
    .impo{position: static;width: 380px;line-height: 56px;}
    .support h2, .support div{position: absolute;}
    .support h2{ font-size: 33px;left: calc(50vw - 190px);;top: 91px;}
    .support p{width: 90vw;}
    .rotating-image {left: calc(50vw - 127px);top: 10px;width: 208px;}
    .support div:nth-child(1){top: 300px;left: 3vw;}
    .support div:nth-child(2){top: 400px;left: 3vw;}
    .support div:nth-child(3){top: 500px;left: 3vw;}
    .support div:nth-child(4){top: 600px;left: 3vw;}
    .support div:nth-child(5){top: 700px;left: 3vw;}
    .support div:nth-child(6){top: 800px;left: 3vw;}
    .partner{height: 1120px;}
    .partner>div{flex-wrap: wrap;}
    .work{height: 1440px;}
    .work>div:nth-child(odd){padding-left: 0px;}
    .brand button {text-indent: -120px;}
    .work img { width: 90vw;}
    .contact{flex-direction: column;align-items: flex-start;height: 1038px;}
    .contact h2 {
        text-align: center;
    }
    .contact h2, .contact div{width: 100vw;}
    .contact label, .contact input, .contact textarea {width: 85vw;padding-left: 16px;}
}