body{ font-family:'Noto Sans TC', sans-serif, inherit;overflow-x: hidden;position: relative;
    background: url("../images/bg2.png"),linear-gradient(to bottom, rgba(39, 27, 23, 1), rgba(39, 27, 23, 1));background-repeat: repeat-y;}
.container{ max-width: 1366px;}
.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-con {background-color:#30231D;margin: 40px auto 20px ;width: 80%;padding: 15px;border-radius: 8px;}
.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 {margin: 0 0 30px;}
.con-title h2 {letter-spacing: 7px;font-size: 2.6rem;position: relative;font-weight: bold;color:#ffffff;position: relative;}
.con-title h3{line-height: 1.8;font-size: 2rem;text-align: center;color: #f28938;}
.con-title .icon  {width:100px;margin: 0 auto 10px;}
.con-title .icon img {width: 100px;}



.con-title.bg-box {background-color: #f28938;color: #fff;padding: 10px 20px;width: 80%;margin: 0 auto;}
.con-title.bg-box h2 {margin: 0;}

/* 主視覺 */
header#Visual { position: relative;}

 .bg-video {position: fixed;top: 0;left: 0px;width: 150%;z-index: 0;opacity: .2;}
 .bg-video video{mix-blend-mode: multiply;pointer-events: none; width: 100%;
    height: 100vh;
    object-fit: fill;}



header#Visual .master_content {position: relative;padding: 0 10% 10% 10%;background: url('../images/master-bg.jpg') center top repeat;background-size:cover;z-index: -1;}
header#Visual .master_content .title {z-index: 999;position: relative;}
header#Visual .master_content .title > img {width: 48%;}
header#Visual  .introduction {transform: translateY(-80px);}
header#Visual  .introduction  .box {padding:60px;margin: 0;background-size: 100px;background: rgba(29, 20, 18, 0.8);position: relative; }
header#Visual  .introduction  .box p {line-height: 1.8;font-size: 1.25rem;margin: 0;padding: 0;color: #fff;}
header#Visual  .introduction  .box + p {color: #e4eff4;font-size: 1rem;line-height: 1.8;padding: 0;margin: 0;} 

header#Visual  .introduction  .box::before {height: 30px;width: 200px;background-color: #f28938;content: "";position: absolute;top: -10px;left: 100px;}
header#Visual  .introduction  .box::after {height: 30px;width: 30px;background-color: #f28938;content: "";position: absolute;top:500px;right: -10px;}














/* work */
section#work {  padding: 0 0 100px;}
section#work .interview .list .q-title {background-color: #962d03;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: #f28938;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;}





.q-title{display: flex;align-items: center;margin: 80px 0 20px;border-bottom: 1px solid rgba(186, 178, 172, 0.6);padding-bottom: 20px;position: relative;}
.q-title h5{border-radius: 5px;font-weight: bold;position: relative;color: #fff;font-size: 1.6rem;margin:0 0 0 20px;}
.q-title img {width:60px;}


.text-flex {display: flex;justify-content: space-between;}
.text-flex .text{width: 64%;}
 .text p{color: #fff;}
.text-flex .photo{width: 34%;}
.text-flex .photo img{width: 100%;}

.photo-flex {display: flex;justify-content: center;}
.photo-flex .photo {width: 50%;}
.photo-flex .photo.big {width: 70%;}
.photo-flex .photo img{width: 98%;}

.text-flex .photo.big{width: 50%;margin: 15px;}
.text-flex .photo.big{width: 50%;margin: 15px;}
.text-flex .photo.bord {border-radius: 50px;border: 4px solid #0F7878;overflow: hidden;}


.title .photo {width: 80%;margin: 0 auto;border-radius: 10px;overflow: hidden;}
.title .photo img {width: 100%;}



section#qa {padding: 80px 0 0;} 
section#qa .photo-sin {width:80%;margin: 0 auto;}
section#qa .photo-sin img {width:100%;}
section#qa .qa-con {margin: 0 0 100px;}

section#qa .box {background-color: rgba(77, 55, 42, 0.8);padding: 30px;}




/* Project */
section#Project {position: relative;padding-bottom: 100px; background: fixed url(../images/BG2.jpg)  bottom  center/cover;padding: 200px 0;}
section#Project .title  {padding: 20px 16px;border-radius: 10px;  width: 70%; position: relative;margin: 180px auto 30px;text-align: center;}
section#Project .title h3 {font-weight: 600;color:#fff;text-align: center;font-size: 1.7rem;margin: 10px 0 0;}
section#Project .title .icon.sm  {width:100px;}
section#Project .title .icon.sm img {width: 100px;}








section#Project ul li {color: #fff;}
section#Project ul li::marker {color: #f28938;}


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 .title i {color: #f28938;font-size: 2rem;}

section#Project .feature ,section#Project .system {margin: 200px 0 30px;}
section#Project .system {margin: 200px 0 0px;}


section#Project .box {background-color: rgba(29, 20, 18, 0.6); overflow: hidden;}
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 .title {margin: 20px auto 20px;}
section#Project .exam .photo{width: 100%;}
section#Project .exam .photo img{width: 100%;}


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:  #271b17;}
section#btnLink h3.im {font-size: 2rem;font-weight: 700;padding: 0;text-align: center;color: #ffcda8;}
section#btnLink h3.im span{border-bottom: 10px solid #ff3030;}
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: #f28938;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){


    body {background-size: 290%, 100%;}
    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; }
    .text-flex { flex-direction: column; }
    .text-flex .photo { width: 100%;margin: 0 0 20px; }
    .text-flex .text { width: 100%; }

    .con-title .icon img { width: 70px; }
section#Project .title .icon.sm img { width: 70px; }

    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%}


}