body{ font-family:'Noto Sans TC', sans-serif;overflow-x: hidden;background: url(../images/main-bg.jpg);background-attachment: fixed;background-size: cover;}
.container{ position: relative; max-width: 1366px;}
a{text-decoration: none;}

section {padding: 40px 0;}
section p,section li,section a {font-size: 1.3rem;font-weight: 400; color: #000; line-height: 1.6; }
section p {margin-bottom: 25px;}



/* 影片 */
.video-bg {background-color:#ffecdf;}
.video-container { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; border-radius: 5px;overflow: hidden;margin-left: -0px;}
.video-container iframe, .video-container object, .video-container embed { position: absolute; top: 0;left: 0; width: 100%; height: 100%;}
.mobile {width: 960px;margin: 0 auto;padding: 0;  position: relative;box-shadow: 0 0 30px #dedbd7;}

.page-title {text-align: center; }
.page-title h2 {font-size: 2.8rem;  font-weight: 900; text-align: center; line-height:3.6rem; color: #000;letter-spacing: 0.2rem; margin: 0;}
.page-title.white h2{color: rgb(255, 255, 255);text-shadow: 0 0 2px rgb(0 0 0 / 90%);}
.page-title .icon {width: 80px;margin: 0 auto 10px;}







header#visual{position: relative;overflow: hidden;background: url(../images/header-m-bg.jpg ) no-repeat center bottom;height: 650px;background-size: cover;}
header#visual .title-g {width: 76%;margin:8% auto 2%;}
header#visual .title-g h1 {color: #ced4da00;z-index: -999;position: absolute;} 



section#now {background-color: #fff8ee; padding: 80px 80px 140px;}
section#now .container > p {line-height: 2;}
section#now .container > p span {background-color: #ffd2b3;padding: 2px 8px;border-radius: 5px;margin: 0 2px;}
section#now .box {background-color: #ffc84f;border-radius: 20px;position: relative;padding: 60px 20px 20px;margin: 20px 0 0;min-height: 260px;position: relative;}

section#now .box .cir {width: 90px;height:90px;background-color: #fff;border-radius: 100px;border: 5px solid #ffc84f;position: absolute;transform: translate(-50%,0);left: 50%;top: -20px;}
section#now .box .cir .icon {width: 60px;margin: 12px auto;}
section#now .box h4 {font-weight: 600;color: #e5421c;line-height: 1.5;text-align: center;position: relative;margin: 15px 0;}
section#now .box h4::before {content: "";background: url(../images/now-line.svg);width: 50px;height: 100px;background-size: cover;left:15%;top: 12%;position: absolute;}
section#now .box h4::after {content: "";background: url(../images/now-line.svg);width: 50px;height: 100px;background-size: cover;right: 15%;top: 12%;position: absolute;transform:scalex(-1);}
section#now .box p {margin: 0;}





section#forward {background-color: #ff6d45;position: relative;padding: 30px 80px 100px;}
section#forward::before {content: ""; position: absolute; left: 0; right: 0; top: -79px; height: 80px; background-color: #ff6d45; /* 關鍵：把這塊裁成「中間尖、左右往下」 */ clip-path: polygon(50% 0, 100% 100%, 0 100%);}

section#forward .box {background-color: #fff;border-radius: 20px;padding:30px 20px;margin: 40px auto;}
section#forward .box h3 {font-size: 1.8rem;font-weight: 600;}

/* 機器人 */
section#forward .box .robot {position: absolute;width:22%;}
section#forward .box .robot img{width: 100%;}
section#forward .box .robot.robot-1 {left: -10%;top: 25%;}
section#forward .box .robot.robot-2 {left: -5%;bottom: -10%;}
section#forward .box .robot.robot-3 {right: -10%;top: 55%;}




section#forward .box .box-title {text-align: center;position: relative;}
section#forward .box .box-title .down-icon{width: 40px;position: absolute;transform: translate(-50%,0); left: 50%;
    animation:downIcon .8s ease-in-out infinite;}

@keyframes downIcon {
    0% { bottom: -30px;}
    100% { bottom: -40px;}
}
section#forward .box .box-title .down-icon img{width: 100%;}

section#forward .box .item-g  {margin: 60px 0 0;}
section#forward .box .item-g .item-flex {display: flex;align-items: center; background-color: #fcefed;border-radius: 20px;margin: 0 0 20px;padding: 20px;}
section#forward .box .item-g .item-flex .icon{width: 30%;text-align: center;}
section#forward .box .item-g .item-flex .icon img{width: 120px;}
section#forward .box .item-g .item-flex h4{color:#ff6d45 ;font-weight: 600;}
section#forward .box .item-g .item-flex .text {width: 70%;}
section#forward .box .item-g .item-flex .text p {margin: 0;}





section#learn {background: url(../images/learn-m-bg.jpg);padding: 100px 80px 100px;background-size:100%;background-attachment: fixed;} 
section#learn .page-title {background-color: #009fad;width: 100%;margin: 0 auto;text-align: center;padding: 8px 15px ;}
section#learn .text {text-align: center;margin: 30px 0;color: #fff;}
section#learn .text p{color: #fff;margin: 20px 0;}
section#learn .text h4 span {background: linear-gradient(to top , #ffb739b2 40%,#ffe0a100 40%);padding: 2px 8px;margin: 0 2px;}
section#learn .text h4 {line-height: 1.8;font-size: 1.8rem;}
section#learn .text h5 {line-height: 1.8;font-size: 1.8rem;}


section#experience {background: url(../images/experience-m-bg.jpg);padding: 100px 80px 100px;background-size: cover;}
section#experience .item-g {margin:20px 0 ;}
section#experience .item-g .item-flex {display: flex;background-color: #ffffffe5;border-radius: 20px;border: 3px solid #347f91;margin: 0 0 20px;align-items: center;min-height: 150px;padding: 20px;}
section#experience .item-g .item-flex .icon{width: 20%;text-align: center;}
section#experience .item-g .item-flex .icon img{width: 80px;}
section#experience .item-g .item-flex .text {width: 70%;}
section#experience .item-g .item-flex .text p {margin: 0;}













/* 表單 */
section#form{ padding: 80px 40px;background-color: #FF6D45 ;}



/* form */
#Form1 ul{width:80%;padding: 10px 21px;list-style: none;clear: both;background: #fff;border-radius: 5px;display: block;margin:20px auto 0 auto;align-items: center;}
#Form1 ul li{margin: 20px 0;border: 1px solid #ced4da;border-radius: 0.25rem;text-align: center;}
#Form1 ul li input{width: 100%;height: 60px;border:0;border-radius: 8px;padding: 0 12px;font-size:24px;}
#Form1 ul li.send input{background: #ffca45;color: #000;font-size: 30px;cursor: pointer; transition: 0.2s;}
#Form1 ul li.send input:hover{background: #000000;color: #FFF;}
#Form1 ul li.send{border: 0;}
#Form1 ul li.send img{width: 60%;}
#Form1 ul li.area{background: #fff;border-radius: 8px;padding:10px 10px 0;}
#Form1 ul li.area p{text-align: left;padding: 0;margin: 0 0 5px;color: #000 !important;font-weight: 400;font-size: 24px;}
#Form1 ul li.area input{width: auto;height: auto;padding: 0;margin-right: 2px;}
#Form1 ul li.area label{margin-right: 5px;font-size: 24px;}


/* form 送出*/
.thx{ background:#232323;position: fixed;width:600px; height:220px;z-index:9999; left:50%; top:50%; margin-left:-300px; margin-top:-100px; font-size: 12px; padding-top: 70px; }
.thx a {color: #232323;text-decoration: none;background-color: transparent; -webkit-text-decoration-skip: objects;text-align: center;margin-left: 250px;font-size: 22px;background: #f9d302;padding: 10px 30px;}
.thx p {color: #FFF;text-align: center;}

footer {background-color: #30353A;}







/* form */

/* form 送出*/
.thx{ width:320px; left:50%; top:50%; margin-left:-160px; }
.thx a {margin-left: 114px;}





footer .MainContent {  width: 100%;padding: 20px 0 ;}
footer .MainContent div.ContactInfo div.location { display: flex;display: none;}
footer .MainContent div.ContactInfo { display: none }
footer div.LogoArea img.Ucom_logo { width: 60%; margin: 0 auto;display: block; }
footer .Copyright p {color: #ddd;font-size: .8rem;padding: 0 15px;}




header#visual .title h1 { font-size:3rem; }
header#visual .title h2 { font-size: 1.6rem; }
header#visual .title { margin: 5% 0 0 2%; }






@media (max-width: 1440px) {

}

@media (max-width: 1200px) {
   
}
    
@media (max-width:960px) { 
    
}




@media(max-width: 767px){
   

    .mobile {width: 100%; max-width: 100%;position: relative;}
    .container{width: 100%;max-width: 100%;}
    .page-title h2 { font-size: 1.8rem; line-height: 1.4; }
    h3 {font-size: 1.5rem;line-height: 1.6; }
    h4 {font-size: 1.4rem;line-height: 1.4;}
    section p, section li, section a { font-size: 1.2rem; }

    header#visual { height: 290px; width: 100%;  padding: 15px;background-position:5% center ;}
    header#visual .title-g { width:86%; margin: 10% auto 2%; }
    
    section#now { padding: 40px 30px 100px; }
    section#now .box { margin: 20px 0 ; }
    section#now .box h4::before {content: "";width: 50px;height: 100px;left:5%;top: 12%;}
    section#now .box h4::after {content: "";width: 50px;height: 100px;right: 5%;top: 12%;}

    section#forward { padding: 60px 30px; }
    section#forward .box h3 {font-size: 1.4rem;}
    section#forward .box .item-g .item-flex { flex-direction: column; }
    section#forward .box .item-g .item-flex .icon {width: 100%;margin: 0 0  20px;}
    section#forward .box .item-g .item-flex .text { width: 100%; }


        
    /* 機器人 */
    section#forward .box .robot {position: absolute;width:32%;}
    section#forward .box .robot.robot-1 {left: -10%;top: 25%;}
    section#forward .box .robot.robot-2 {left: -5%;bottom: -2%;}
    section#forward .box .robot.robot-3 {right: -10%;top: 55%;}


    section#learn {padding: 100px 30px 100px;}
    section#learn .text h4 { font-size: 1.4rem; }
    section#learn .text h5 { font-size: 1.1rem !important;line-height: 1.8; }
    section#learn .text h5 br{display: none;}
   
   
   
   
   section#experience {padding: 100px 30px 100px;}
   section#experience .item-g .item-flex {}
    section#experience .item-g .item-flex .text { width: 68%; }
    section#experience .item-g .item-flex .icon { width: 28%; }
    section#experience .item-g .item-flex .icon img{ width: 60px; }







    section#form h2 { font-size: 1.8rem; line-height: 1.4; }
    section#form h3 { font-size: 1.3rem; line-height: 1.6rem; margin: 40px 0 0; }
    section#form ul.listen {width: 100%;padding: 0; }
    section#form ul.listen li{ font-size: 1.2rem; }

    section#form div.Form ul { padding: 20px; }
    section#form { padding: 60px 0; }
    section#form h3 { font-size: 1.3rem; line-height: 2.2rem; }
    #Form1 ul { width:100%; }
    #Form1 ul li input{font-size:20px;}
    #Form1 ul li.send input{font-size:26px;}
    #Form1 ul li.send img{width: 60%;}
    #Form1 ul li.area p{font-size: 20px;}
    #Form1 ul li.area label{font-size: 20px;}
    
    
    











}

@media (max-width: 575px) {  

/* visual */

    /* form 送出*/
    .thx{ width:320px; left:50%; top:50%; margin-left:-160px; }
    .thx a {margin-left: 114px;}
}