/* kv  */
.kv{ height: 910px; min-height: 100vh; background-color: #6d8963; overflow: hidden; position: relative; }

/* scroll text 1  */
.text-loop1{
    position: absolute;
    z-index: 3;
    left: -5%; 
    top: 55%;
    height: 100px;
    transform-origin: center;
    transform: translateY(50px) rotate(10deg);
    overflow: hidden;
}
.loop-holder {
    width: 110%;
    display: flex;
    white-space: nowrap;
    overflow: hidden;
    transform: translateY(120px);
}

.loop-holder .loop-holder__text {
    animation: textLoop 10s linear infinite;
    font-size: 46px;
    line-height: 102px;
    font-family: PublicSans-Thin;
    color: #d9d9d9;
}

.loop-holder .loop-holder__text span{ padding: 0; border-radius: 40px;}
.loop-holder .text-bg-white{ background-color: #9fbba2; }
.loop-holder .text-bg-orange{ background-color:#f7941d;}
.loop-holder .text-bg-pink{ background-color: #f26e65;}
.text-bg-white, .text-bg-orange, .text-bg-pink{color: #FFF;  padding: 5px 20px !important;}

/* scroll text 2  */
.loop-holder2 {
    position: absolute;
    z-index: 1;
    left: -5%; 
    top: 50%;
    width: 110%;
    height: 140px;
    margin-top: -70px;
    display: flex;
    white-space: nowrap;
    overflow: hidden;
    transform: rotate(-10deg);
    transform-origin: center;
}


.loop-holder2 .loop-holder__text {
    font-family: "PublicSans-Bold", sans-serif;
    animation: textLoop 15s linear infinite;
    font-size: 100px;
    color: #f59698;
    padding-right: 0.35em;
    display: flex;
    gap: 30px;
}

@keyframes textLoop {
    0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    }
    100% {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    }
}

.kv-main{ position: relative; z-index: 2; width: 420px; height: 100%; margin-left: auto; margin-right: auto; display: flex; flex-direction: column; justify-content: center; }
.kv-body{ position: relative; width: 420px; height: 630px; background-color: #FFF; border-radius: 10px; box-shadow: 5px 0 10px 10px rgba(0, 0, 0, 0.1);}
.kv-body-arrow{  position: absolute; top: 50px; right: -180px;}
.kv-body-arrow span{ display: block;  animation: arrowRotate 2s ease-in infinite;  transform-origin: left; animation-delay: 2s;  }
@keyframes arrowRotate {
    0% {
    transform: rotate(0deg);
    }
    30% {
    transform: rotate(-20deg);
    }
    50% {
    transform: rotate(0deg);
    }
    100% {
    transform: rotate(0deg);
    }
}
.kv-bottom{ padding-top: 50px; text-align: center;}
.kv-bottom-btn{ display: flex; justify-content: center;}

.kv-bg{
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    border-radius: 10px;
    overflow: hidden;
    background-size: 100% auto;
    background-position: center top;
    animation: switchBackground 1s ease infinite;
}
@keyframes switchBackground {
    0% {
    background-image: url('../image/img-kvbg-up.png');
    }
    50% {
    background-image: url('../image/img-kvbg-up.png');
    }
    51% {
    background-image: url('../image/img-kvbg-down.png');
    }
    100% {
    background-image: url('../image/img-kvbg-down.png');
    }
}

.kv-box{ position: absolute; width: 100%; height: 100%; left: 0; top: 0; z-index: 2; overflow: hidden;}
.kv-box img{ position: absolute;  top: -250px;}
.cell1{ left: 105px; width: 16.19%;}
.cell2{ left: 310px;; width: 25.74%;}
.cell3{ left: 5px; width: 38.333%;}
.cell4{ left: 200px; width: 54.04%; transform: rotate(9deg);}
.cell5{ left: 108px;; width: 48.333%;}

/* dv end  */


/* about  */
.about{ background-color: #fce2e0; padding: 80px 0 100px 0;}
.about .container{ display: flex;}
.about-left{ width: 50%; flex-shrink: 0;  position: relative;}
.about-left-bg{ width: 90%; max-width: 655px;}
.about-left-bg img{ display: block; width: 100%;}
.about-project{ position: absolute; left: 0; top: -10px; font-size: 90px; font-family: PublicSans-Bold; line-height: 0.9; color: var(--color-pink);}

.about-right{ flex-grow: 1;}
.about-title{ font-size: 18px; color: var(--color-pink); border-top: 2px solid var(--color-pink); border-bottom: 2px solid var(--color-pink); padding: 20px 0; text-align: center; }
.about-content{ font-size: 18px; color: var(--color-gray);}
.about-content p{ margin-top: 2em;}

.color-pink{ color: var(--color-pink);}
.color-orange{ color: var(--color-orange);}

/* partners  */
.partners{ padding: 50px 0; color: var(--color-orange); --items-per-row: 5;}
.partners-title{ font-size: 16px;}
.partners-desc{ font-size: 80px; font-family: PublicSans-Bold;}
.partners-list{ padding: 40px 0; border-top: 2px solid var(--color-orange); border-bottom: 2px solid var(--color-orange); margin-top: 20px;}
.partners-list ul{ display: flex; gap: 20px; flex-wrap: wrap; list-style-type: none; }
.partners-list li{flex: 0 0 calc((100% - (var(--items-per-row) - 1) * 20px) / var(--items-per-row)); text-align: center;}

/* vision && mission  */
.vision{ background-color: #fef5e9; overflow: hidden;}
.vision-body{ padding: 80px 10%; position: relative;}
.vision-content{ color: #999; font-size: 46px; position: relative; z-index: 2;}
.vision-content p{ margin-bottom: 0.5em;}
.vision-content span{ font-family: PublicSans-Bold; font-size: 1.2em;}

.vision-gadgets{ position: absolute; z-index: 1; width: 100%; height: 100%; left: 0; top: 0;}
.vision-gadgets i{ position: absolute; display: block; }
.vision-gadgets i:nth-child(1){ width: 100px; height: 25px; left: -10px; top: 100px; background-color: #afc3b1; transform:rotate(32deg);}
.vision-gadgets i:nth-child(2){ width: 50px; height: 50px; left: -8px; bottom: 20%; background-color: #f26e65; transform:rotate(10deg);}
.vision-gadgets i:nth-child(3){ 
    right: -20px; 
    top: 50px;
    width: 0;
    height: 0;
    border-left:25px solid transparent;   /* 左边透明 */
    border-right: 25px solid transparent;  /* 右边透明 */
    border-top: 43.3px solid #f26e65;           /* 向下指的红色三角形 */
    transform:rotate(35deg);
}
.vision-gadgets i:nth-child(4){ width: 40px; height: 40px; background-color: #d9d9d9; border-radius: 50%; top: 40%; right: 5%;}
.vision-gadgets i:nth-child(5){ width: 50px; height: 50px; right: 4%; bottom: 20px; background-color: #f7941d; transform:rotate(30deg);}

/* news  */  
.news{ background-color: var(--color-orange); color: #FFF; padding: 50px 0 100px; background-image: url(../image/img-s5bg.png); background-repeat: no-repeat; background-position: right bottom; background-size: 35% auto;}
.news-header h3{ font-size: 80px; font-family: PublicSans-Bold;}
.news-label{ border-top: 2px solid #FFF;  border-bottom: 2px solid #FFF; margin-top: 20px; padding: 20px 0; font-family: PublicSans-Thin;}
.news-body{ position: relative; margin-top: 30px;}
.news-list{ position: relative; display: flex; gap: 30px; }

.news-card{ background-color: #FFF; border-radius: 10px; padding: 20px; width: 20%; color: #555;}
.news-card img{ display: block; width: 100%;}
.news-card-title{ padding: 20px 10px; min-height: 58px;}
.news-card-btn{ margin: 0 10%;}

.btn-more-news{ position: absolute; top: 0; right: 0; }

/* contact us / form */
.contact{ background-color: #EEE6D9; padding: 50px 0; background-image: url(../image/form-bg.png); background-position: bottom right; background-repeat: no-repeat;}
.contact-header{ font-size: 80px; font-family: PublicSans-Bold; color: #f26e65;}
.contact-label{ display: flex; gap: 2em; border-top: 2px solid #afc3b1;  border-bottom: 2px solid #afc3b1; color:var(--color-green); margin-top: 20px; padding: 20px 0; }

.contact-form{ display: flex; justify-content: space-between;}
.form-left{ max-width: 580px; color: var(--color-green); font-size: 60px; padding-top: 50px;}
.form-right{ width: 400px; padding-top: 250px;}
.form-item{ margin-bottom: 20px;}
.form-item input, .form-item textarea{ display: block; box-sizing: border-box; font-size: 14px; width: 100%; padding: 0 15px; border-radius: 6px; height: 48px; line-height: 48px; border: none;}
.form-item textarea{ height: 100px;}
.form-item input:focus-visible, .form-item textarea:focus-visible{ outline: 1px solid #CCC; }
.form-item input.error, .form-item textarea.error{outline:1px solid var(--color-orange); }
.form-item div.error{ margin-top: 5px; color: red; font-size: 12px;}
.form-footer .form-submit{ margin-left: auto;}
.form-submit{ background-color: transparent; cursor: pointer;}

/* success popup */
.submit-success-popup{ visibility: hidden;  opacity: 0;  position: fixed; width: 100%; height: 100%; left: 0; top: 0; background-color: rgba(255, 255, 255, 0.6); transition: all 0.5s;}
.submit-success-popup.active{ visibility: visible; opacity: 1;}

.popup-inner{transition: all .3s ease-in 0s; opacity: 0; transform: translateY(100px); width: 700px; height: 400px; position: absolute; left: 50%; top: 50%; margin: -200px 0 0 -350px; background-color: #FFF; border-radius: 10px; background-image: url(../image/message-popup.jpg); background-position: right bottom; background-repeat: no-repeat;}
.submit-success-popup.active .popup-inner{ visibility: visible; transform: translateY(0); opacity: 1;}

.popup-content{ font-size: 32px; color: var(--color-green); max-width: 65%; padding: 50px 0 0 50px;}
.popup-footer{ padding: 20px 0 0 50px;}
.popup-button{ display: inline-block; padding: 0 40px ; color: var(--color-green); border: 1px solid var(--color-green); border-radius: 40px; cursor: pointer; font-size: 20px; background-color: #FFF; line-height: 45px; height: 45px; overflow: hidden; }



/* for ipad  */
@media screen and (max-width: 1025px) {

    /* kv  */
    .kv{ height: 900px; min-height: auto;  }
    .kv-body-arrow { right: -140px;}
    .kv-body-arrow img{ width: 140px;}

    /* about  */
    .about {
        padding: 60px 0 80px 0;
    }
    .about .container{ flex-direction: column;}
    .about-left{ width: 100%;}
    .about-left-bg{ display: none;}
    .about-project {
        position: relative;
        top: 0;
        font-size: 70px;
        line-height: 0.9;
        padding-bottom: 50px;
    }
    .about-right{ background-image: url(../image/img-s2bg.png); background-position: right bottom; background-repeat: no-repeat; background-size: 50% auto;}
    .about-content{ width: 50%;}
    .about-content p {  margin-top: 1.5em;}

    /* partners */
    .partners{    --items-per-row: 3;}
    .partners-desc{ font-size: 60px;}
    .partners-list img{ max-width: 100%;}

    /* mission */
    .vision-content{ font-size: 28px;}

    /* news  */
    .news{ background-image: none; padding: 50px 0 50px 0;}
    .news-label{ text-align: center;}
    .news-header h3{ font-size: 60px; }
    .news-list{ justify-content: center;}
    .news-card{ width: 40%;}
    .news-card:nth-child(3){ display: none;}
    .btn-more-news{ position: relative; margin-left: auto; margin-right: auto; width: 160px; margin-top: 40px;}

    /* contact  */
    .contact-header{ font-size: 60px;}
    .contact-label{ justify-content: center;}
    .contact-form{ flex-direction: column;}
    .form-left{ max-width: 100%;}
    .form-right {
        width: 100%;
        padding-top: 50px;
    }


}

/* for ipad mini  */
@media screen and (max-width: 769px) {

    .kv-body{ transform: scale(0.9); transform-origin: center center;}
    .kv-bottom { padding: 0; margin-top: 10px;}
    .text-loop1{ left: -10%; top: 65%;}
    
    .loop-holder .loop-holder__text{ font-size: 40px; line-height: 60px;}
    .loop-holder2 .loop-holder__text{ font-size: 70px;}
    /* about  */
    .about{ padding-bottom: 40px;}
    .about-content {
        width: 60%;
        padding-bottom: 320px;
    }
    .about-right {
        background-size: 80% auto;
    }
    .vision-gadgets i:nth-child(1) {
        left: -40px;
        top: 80px;
    }
    /* news  */
    .news-card{ width: 40%;}

    /* contact  */
    .form-left{ line-height: 1.1;}

}

/* ipad old  */
@media screen and (max-width: 581px) {
    .kv {
        height: 800px;
    }
    .partners-desc, .news-header h3, .contact-header{ line-height: 60px;}
    .form-left {
        font-size: 40px;
        line-height: 60px;
    }
    
    .news-card-btn{ margin: 0;}
    /* about  */
    .about-right {
        background-size: 70% auto;
    }
    .about-content {
        width: 60%;
        padding-bottom: 200px;
    }
}

/* mobile  */
@media screen and (max-width: 480px) {
    /* kv  */
    .kv { height: 720px;}
    .kv-main{ justify-content: end;}
    .kv-main, .kv-body{ width: auto;}
    .kv-body{ transform: scale(0.75);}
    .kv-body-arrow{ display: none;}
    .kv-bottom { margin-top: -50px; padding-bottom: 40px;}
    .loop-holder{ top: 220px; overflow: visible;}
    .loop-holder2{ top: 400px;}
    .loop-holder .loop-holder__text {
        font-size: 24px;
        gap: 20px;
        line-height: 38px;
    }
    .text-loop1{ top: 400px;}
    .loop-holder .loop-holder__text span{ line-height: 1.2;}
    .loop-holder2 .loop-holder__text {
        font-size: 46px;
        gap: 20px;
    }
    .cell1{ left: 90px;}
    .cell2{ left: 280px;}
    .cell4{ left: 175px;}
    .kv-box  img.cell4{ top: -235px;}
    .kv-box  img.cell5{ left: 100px; top: -235px;}

    /* about  */
    .about-project{ font-size: 60px;}
    .about-title{ padding: 10px 0;}
    .about-content { width: auto; padding-bottom: 380px;}
    .about-right{ background-size: 100% auto;}
    .about {  padding: 40px 0 40px 0;}


    /* news  */
    .news-header h3 { font-size: 50px; line-height: 1 }
    .news-list{ overflow: hidden; justify-content: left;}
    .news-label {
        margin-top: 10px;
        padding: 10px 0;
    }
    .news-header .desc{ padding: 10px 0;}
    .news-body{ margin-right: -15px;}
    .news-card {
        box-sizing: border-box;
        padding: 15px;
        width: auto;
        margin-right: 15px;
        
    }
        

    /* partner  */
    .partners {
        --items-per-row: 2;
    }
    .partners img{width: 80%;}
    .partners-desc {
        font-size: 50px;
        line-height: 1
    }

    /* mission  */
    .vision-body {
        padding: 80px 0;
    }
    .vision-content {
        font-size: 22px;
    }
    .vision-content>p>span{ display: block; font-size: 50px;}
    .vision-gadgets i:nth-child(1) {
        width: 80px;
        height: 20px;
        left: -20px;
        top: -10px;
        transform: rotate(42deg);
    }
    .vision-gadgets i:nth-child(2) {
        width: 30px;
        height: 30px;
        left: -28px;
        bottom: -5px;
        transform: rotate(36deg);
    }
    .vision-gadgets i:nth-child(3) {
        right: -40px;
        transform: rotate(67deg);
    }
    .vision-gadgets i:nth-child(5) {
        width: 30px;
        height: 30px;
        right: -20px;
        bottom: 50px;
        transform: rotate(30deg);
    }
        

    /* contact  */
    .contact-header{ font-size: 50px; line-height: 1}
    .form-left { font-size: 32px; padding-top: 30px; line-height: 40px;}
    .contact-label {
        margin-top: 10px;
        padding: 10px 0;
    }
    .form-right{ padding-top: 30px;}
    .form-footer .form-submit{ margin: 0 auto;}



    /* success popup */
    .popup-inner{ width: 90%; height: auto; left: 5%; top: 50%; margin: 0; transform: translateY(-50%); background-size: 50% auto; }
    .popup-content{ font-size: 24px; max-width: 100%; padding:40px 20px 20px 20px;}
    .popup-footer{ padding: 20px 0 150px 20px;}
    .popup-button{ font-size: 16px;  line-height: 40px; height: 40px;}

        
}


/* zhTW  */
body[data-lang="zh"] .loop-holder .loop-holder__text{ font-weight: 100;}