body{ font-family:'Noto Sans TC', sans-serif, inherit;overflow-x: hidden;background-color: #faf5f0;}
.container{ position: relative; max-width: 1366px;}
a{text-decoration: none;}
a:hover{text-decoration: none;}
html { scroll-behavior: smooth;font-size: 16px; }
section {padding: 80px 0;}
section p,section li,section a {font-size: 1.3rem;font-weight: 400; color: #000; line-height: 1.8; }
section p {margin-bottom: 25px;}
section .text p span {border-bottom: 5px solid #FFCE00;}


/* 影片 */
.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%;}


.con-title.center {text-align: center;}
.con-title.center h2 {letter-spacing: 7px;font-size: 3rem;position: relative;font-weight: bold;color:#035896;margin: 0 0 60px;position: relative;}
.con-title.center h2::after {content: "";position: absolute;transform: translate(-50%,-50%);bottom:-25px;left: 50%;width: 200px;height: 6px;border-radius: 10px;background-color: #035896;}
.con-title h5 {line-height: 1.8;font-size: 1.3rem;text-align: center;margin: 0 0 40px;}
.con-title h5 span {background-color: #ffdc55;padding: 2px 5px;}




/* 主視覺 */
header#Visual { position: relative;background-color: #82CDE1;}
header#Visual .master_content {position: relative;padding: 0 8% 10% 8%;background: url('../images/master-bg.jpg') center bottom repeat;background-size:cover;}
header#Visual .master_content .title > img {width: 60%;}
header#Visual  .introduction {transform: translateY(-100px);}
header#Visual  .introduction  .box {padding: 60px 86px;border-radius: 15px;margin: 0;
    background:url('../images/introduction-icon.svg') no-repeat 95% 15%,linear-gradient(to right, #fff, #fff);background-size: 100px;
    box-shadow: 0 0 20px rgba(34, 74, 93, 0.2);}
header#Visual  .introduction  .box p {line-height: 1.8;font-size: 1.25rem;margin: 0;padding: 0;}
header#Visual  .introduction  .box + p {color: #e4eff4;font-size: 1rem;line-height: 1.8;padding: 0;margin: 0;} 



/* work */
section#work { background:  #82CDE1; padding: 0 0 100px;}
section#work .interview .list .q-title {background-color: #035896;border-radius: 10px;padding: 6px 16px;margin: 0 0 20px;display: flex;align-items: center;}
section#work .interview .list  .q-title h5{border-radius: 5px;font-weight: bold;position: relative;color: #ff6629;font-size: 1.6rem;margin:0 0 0 20px;}
section#work .interview .list  .q-title img {width:40px;height: 40px;}
section#work .interview .list .q-title p {border-radius: 5px;font-weight: bold;position: relative;color: #FFFFFF;font-size: 1.6rem;margin: 0 0 0 20px;}
section#work .interview {display: flex;justify-content: space-between;}
section#work .interview .photo{width:52%;}
section#work .interview .photo img{width:100%;border-radius: 15px;overflow: hidden;}
section#work .interview .list{width:46%;}
section#work .interview .list ul{width:100%;list-style: none;padding: 0;margin: 20px 0 0;}
section#work .interview .list ul li{margin-top: 20px;}
section#work .interview .list ul li span{background-color: #B8E7F7;color: #035896;padding: 10px 15px;margin-right: 10px;border-radius: 55%;}
section#work .interview .list ul li a{color: #000;font-weight: bold;}
section#work .interview .list ul li:hover a{color: #035896;}
section#work .interview .list ul li:hover span {background-color: #035896;color: #FFF;}




/* Project */
section#Project {position: relative;background: #faf5f0;padding-bottom: 100px;background-color: #faf5f0;    background: fixed url(../images/cloud_BG.jpg)  bottom  center/cover;}
section#Project .con-title{padding-top: 50px;}




section#Project .title  {padding: 20px 16px;border-radius: 10px;  width: 70%; position: relative;margin: 180px auto 30px;text-align: center;}
section#Project .title.color-1  {background-color: #BC282C;}
section#Project .title.color-2  {background-color: #035896;}
section#Project .title h3 {font-weight: 600;color:#FFF;text-align: center;font-size: 1.7rem;margin: 10px 0 0;}
section#Project .title.color-2 h3 {margin: 0;}
section#Project .title .icon {width: 120px;position: absolute;transform: translate(-50%,-50%);left: 50%;top:-40px;}
section#Project .title .icon img{width: 100%;}



section#Project .feature ,section#Project .system {margin: 150px 0 ;}
section#Project .exam  {margin: 100px 0 ;}
section#Project .box {background-color: #fff;border-radius: 10px; overflow: hidden;    box-shadow: 0 0 20px rgba(34, 74, 93, 0.2);}
section#Project .box .photo {width: 100%;height: 180px;transition: all .3s ease-in;}
section#Project .box .photo.bg1 {background: url(../images/text-photo-1.jpg) center;background-size: 100%;}
section#Project .box .photo.bg2 {background: url(../images/text-photo-2.jpg) center;background-size: 100%;}
section#Project .box .photo.bg3 {background: url(../images/text-photo-3.jpg) center;background-size: 100%;}
section#Project .box .photo.bg4 {background: url(../images/text-photo-4.jpg) center;background-size: 100%;}
section#Project .box .text {padding: 10px;}
section#Project .box:hover .photo {background-size: 105%;}
section#Project .exam .photo{width: 100%;}
section#Project .exam .photo img{width: 100%;}
section#Project .exam .title {margin: 60px auto 30px;}

section#Project h4{font-size: 1.8rem;padding-top: 10px;}
section#Project p {font-size: 1.3rem;text-align: justify;}
section#Project .box > p{padding: 0 15px;}


/* btnLink */
section#btnLink{padding: 70px 0;background:  #82CDE1;}
section#btnLink h3.im {font-size: 2rem;font-weight: 700;padding: 0;}
section#btnLink h3.im span{border-bottom: 10px solid #ffdc55;}
section#btnLink button{ width: 100%; margin: 15px auto 25px auto; display: block; background: #fff; color:#000;border-radius: 10px; padding: 13px 20px; font-weight: bold; font-size:1.3rem;border: none;cursor: pointer;;}
section#btnLink button:hover{transition: all .4s ease;opacity: 0.9;}
section#btnLink button i {color: #BC282C;transition: all .2s ease-in}
section#btnLink button:hover i {transform: translateX(5px);}







@media (max-width: 1440px) {
    .container { position: relative; max-width: 1200px; }
    header#visual { height: 70vh; }
    header#visual .title h1 { font-size:3rem; }
    header#visual .title h2 { font-size: 1.6rem; }
    header#visual .title { margin: 5% 0 0 2%;   width: 80%;}
    header#visual .title .photo { width: 80%; }

}

@media (max-width: 1200px) {
    .container {max-width: 1280px;}

    }
    
@media (max-width:960px) { 
    header#visual .title h1 {  font-size: 4.2rem; margin: 15px 0; }
    header#visual{background: url(../images/header-m-bg.jpg ) no-repeat  center 30%;height: 100vh;}
    header#visual .title {   width:100%; margin: 2% 0 80% 0; padding: 15px;}
}




@media(max-width: 767px){

    section {padding: 30px 0;}
    h2{font-size: 1.6rem;}
    section p, section li, section a {font-size: 1.2rem;}
    .container { max-width:98%; }
    .title .icon { width: 60px; }
    .title h2 { font-size: 1.8rem; }

    .video-container { margin-left:0px;}
    .video-bg {padding: 15px 0;}

    .con-title h5 { font-size: 1rem; }

    .con-title.center h2 { font-size: 2rem; }

    header#Visual .master_content {padding: 20% 4%;background: url(../images/master-bg.jpg) 95% bottom repeat;background-size: cover;} 


    header#Visual .master_content .title > img {width: 100%;margin: 100px 0 30px;}




    header#Visual .introduction .box{padding: 27px 14px;}
    header#Visual .introduction .box p{font-size: 1.2rem;}
    header#Visual .master_content .title > img {width: 100%;}
    header#visual .title .photo { width:100%; }
    header#visual .title .info { margin: 30px 0 50px; }

    header#visual{background: url(../images/header-m-bg.jpg ) no-repeat  center 90px;height: 100vh;background-size: 100%;}
    header#visual .title h1 { font-size:2.2rem; }
    header#visual .title h2 { font-size: 1rem;line-height: 1.4; }
    header#visual .title .info ul { background-color: rgba(255, 255, 255, 0.8);padding: 8px 10px; }
    header#visual .title .info ul li {font-size: 1rem;}
    header#visual .title .info .name {background-color: #ff6629;}
    header#visual .title .info .name h3 { font-size: 1.5rem; padding: 10px 5px;writing-mode: vertical-lr;margin: 0; }    
    header#Visual .introduction {
        transform: translateY(-60px);
    }



    section#work .interview {flex-direction: column;}
    section#work .interview .photo{width:100%;margin: 0 0 20px;}
    section#work .interview .list{width:100%;}
    section#work .interview .list ul li{margin-top: 20px;}
    section#work .interview .list ul li span{margin-right: 8px;font-size: .9rem;width: 10%;text-align: center;}
    section#work .interview .list ul li a {font-size: 1rem;}
    section#work .interview .list .q-title  { margin: 30px 0 15px; }
    section#work .interview .list .q-title h5 { font-size: 1.2rem; }
    section#work .interview .list .q-title p { font-size: 1.2rem; }
    section#work .interview .list .q-title img { width: 30px; height: 30px; }



    /* Project */
    section#Project .container .icon > img{width: 80%;}
    section#Project .container .title > h3{width: 90%;}
    section#Project .pt-5{padding: 0 !important;}
    section#Project .mb-5{margin: 0;}
    section#Project .title > Ul{padding-top: 0;}
    section#Project .title { width: 100%; }
    section#Project .title h3 { font-size: 1.2rem;line-height: 1.6; }
    section#Project p { font-size: 1.2rem; }


    section#Project .box {margin: 0 0 30px;}
    section#Project .box .photo { height:180px; }
    section#Project .box .text  {padding: 20px 15px;}
    section#Project .box .text p{margin: 0;}





    /* btnLink */
    section#btnLink{padding: 70px 0;}
    section#btnLink .container  h5{font-size: 1.4rem;}
    section#btnLink h3.im { font-size: 1.5rem; line-height: 2.2; }

}

@media (max-width: 575px) {  

    /* visual */
    header#visual{height: 85vh;position: relative;overflow: hidden;}
    header#visual .logo{width: 60%;position: absolute;right: 20%;top:5%}


}