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


section {padding: 80px 0;}
section p,section li,section a {font-size: 1.15rem;font-weight: 400; color: #000; line-height: 1.8; }
section p {margin-bottom: 25px;}
section .text p span {border-bottom: 5px solid #FF5964;}


/* 影片 */
.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-flex {display: flex;justify-content: space-around;}
.con-flex .item{width: 48%};
.con-flex .item:nth-child(1){width: 45%;}
.con-flex .item:nth-child(2){width: 50%;}


/* AD */
div.EventAD { width: 120px; display: block; position: fixed; right: -20px; top: 50px; z-index: 200; animation-name: EventAD-M; animation-duration: 5s; animation-iteration-count: infinite; }
div.EventAD:hover { width: 130px; right: 25px; transition: 0.3s; animation-iteration-count: initial; animation-name: initial; }
@keyframes EventAD-M { 0%{ right: -20px; } 70%{ right: 25px; } 100%{ right:-20px; } }
div.EventAD img { width: 100%; box-shadow: 0 0 15px rgb(120, 120, 120); border-radius: 10px; }
div.EventAD img:hover { box-shadow: 0 0 20px rgb(150, 150, 150); }




/* 公用 */
.page-title {width: 100%; text-align: center;background-color: #0f7878; padding:40px 20px;}
.page-title h3 {color: #fff;font-size: 1.6rem;font-weight: 500;margin: 0 auto;line-height: 1.4;position: relative;display: inline-block;}
.page-title h3 { line-height: 1.6; letter-spacing: 2.25px; }
.page-title h3::before {content: "";position: absolute;width: 30px;height: 30px;background: url(../images/comma-d.svg) no-repeat;left: -30px;top:-20px;transform: scale(-1);}
.page-title h3::after {content: "";position: absolute;width: 30px;height: 30px;background: url(../images/comma-d.svg) no-repeat;right: -30px;bottom:-20px;transform: scale(1);}

.title {text-align: center;margin: 0 auto 40px;text-align: center;}
.title h2{letter-spacing: .05rem;font-weight: 700;color: #0d5b59;font-size: 2.2rem;line-height:1.6;}
.title P{font-size: 1.2rem;margin:20px 0;font-weight: 500 ;text-align: justify;}
.title P span{border-bottom: 4px solid #0f4d4a;}
.title .icon {width:100px;margin: 0 auto 10px;}
.title .icon img{width: 100%;}

.q-title{display: flex;align-items: center;margin: 80px 0 20px;}
.q-title h5{border-radius: 5px;font-weight: bold;position: relative;color: #0F7878;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-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%;}











header#visual{height: 80vh;position: relative;overflow: hidden;background: url(../images/header-bg.jpg) no-repeat center center;background-size: cover;}
header#visual .title{z-index: 1000;width: 52%;display: block;margin: 4% 0 0 45%;font-weight: bold;text-align: left;}
header#visual .title .photo{width: 100%;}
header#visual .title .photo img{width: 100%;}
header#visual .title h1 {font-weight: 900;font-size: 4.2rem;color: #5799B1;margin: 15px 0;}
header#visual .title h2 {font-size: 1.8rem;color: #000;line-height: 1.4;font-weight: 600;}
header#visual .title .info {display: flex;margin:100px 0 50px;}
header#visual .title .info .name h3{font-weight: 900;font-size: 1.4rem;padding: 0;background-color: #337e99;padding:8px 15px;color: #fff;}
header#visual .title .info ul {border-left: 5px solid #337e99;list-style: none;padding:0 20px;margin: 0;}
header#visual .title .info ul li{margin: 2px 0;font-size: 1.2rem;}
header#visual .title .info ul li:nth-child(1){margin: 0 0 2px;}

/* qa */
section#qa{position: relative;}


/* qa */
section#qa-2{position: relative;background-color: #DBF7F8;}


section#qa span,section#qa-2 span{background-color: rgba(239, 226, 139, 0.6);border-bottom: none; }

/* work*/
section#work {padding: 80px 0 ; }
section#work a {text-decoration: none;}
section#work .box {width: 98%;margin: 0 auto;background-color: rgba(15, 120, 120, 0.8);border-radius: 15px;padding: 30px;}
section#work .box h4 {color: #fff;font-size: 2rem;font-weight: 700;margin: 0;}
section#work .box .title {margin: 0;}
section#work .box .photo-flex .photo {margin: 20px 0;border-radius: 10px;overflow: hidden;padding: 10px;}
section#work .box .work-btn {padding: 8px 30px;background-color: #ffdb4a;color: #000;border-radius: 5px;font-size: 1.4rem;margin: 0 auto;display: inline-block;text-align:center ;transition: all .3s ease-in;width: 200px;}
section#work .box .work-btn i {transition: all .3s ease-in;}
section#work a .box  {text-align: center;margin: 0 auto;display: block;transition: all .3s ease-in;text-decoration:none;}
section#work a:hover .box {background-color: rgba(37, 153, 153, 0.8);}
section#work a:hover .work-btn  {background-color: #000;color: #fff;}
section#work a:hover .work-btn i {color: #ffdb4a;}









/* .video-con {display: flex;justify-content: space-between;}
.video-con .photo{width:48%;}
.video-con .photo img{width:100%;border-radius: 15px;overflow: hidden;}

.video-con p {margin: 20px 0 0;}
.video-con .list{width:50%;}
.video-con .list ul{width:100%;}
.video-con .list ul li span{background-color: #9d2a07;color: #fff;padding: 5px 15px;margin-right: 10px;border-radius: 10px;}
.video-con .list ul li a {text-decoration: none;font-size: 1.2rem;}
.video-con .list ul li a{color: #000;}
.video-con .list ul li:hover a{color: #ff6629;}
.video-con .list ul li:hover span {background-color: #ff6629;}

.video-con-auto {background-size: 100%;position: relative;background-color: #fff3f6;padding: 80px 0 ;}
.video-con-auto .photo {width:45%;margin:  0 auto;border: 10px solid #ffceda;border-radius: 10px;} */




/* 表單 */
section#form{ padding: 100px 20px;background-color: #23272c;}
section#form h2{
    font-size: 2.85rem;
    color: rgb(255, 255, 255);
    font-weight: bold;
    text-align: center;
    line-height: 4.35rem;
    text-shadow: 0 0 10px rgb(0 0 0 / 70%);
}
.form-text {margin: 0 0 0 16%;display: block;width: 100%;padding: 0;}
.form-text h3 {color: #fff;line-height: 2;font-weight: 600;margin: 0;font-size: 1.6rem;}
.form-text h3 span{color: #FFCE00;font-size: 2rem;}

.form-text h5 {color: #fff;font-weight: 400;margin: 20px 0 0;font-size: 1.4rem;line-height: 2;}




.form-text .btn-all {margin: 60px 0 0;display: flex;flex-wrap: wrap;}
.form-text .btn-all .big-btn{background-color: #41afb5;border-radius: 8px;cursor: pointer;
    margin: 20px 5px;text-align: center;z-index: 999;position: relative;padding: 2px 15px;}
.form-text .btn-all .big-btn.big {width:auto;}

.form-text .btn-all .big-btn:hover  {background-color: #000;}
.form-text .btn-all .big-btn h4 {font-size: 1.2rem;font-weight: 600;display: inline-block;margin: 0 5px;color: #FFF;}
.form-text .btn-all .big-btn i{font-size: 1.4rem; color: #ffe100;margin-right: 8px;}
.form-text .btn-all .big-btn a {padding: 10px 15px;display: block;}



/* form */
div.Form ul{width: 423px;padding: 10px 21px;list-style: none;clear: both;background: #fff;border-radius: 5px;display: block;margin:20px auto 0 auto;box-shadow: 0 0 20px rgb(0 0 0 / 30%);}
div.Form ul li{margin: 12px 0;border: 1px solid #ced4da;border-radius: 0.25rem;text-align: center;}
div.Form ul li input{width: 100%;height: 45px;border:0;border-radius: 8px;padding: 0 12px;font-size: 18px;}
div.Form ul li.send input{background: #41afb5;color: #FFF;font-size: 22px;cursor: pointer; transition: 0.2s;}
div.Form ul li.send input:hover{background: #000000;}
div.Form ul li.send{border: 0;}


div.Form ul li.area{background: #fff;border-radius: 8px;padding:10px 10px 0;}
div.Form ul li.area p{font-size: 16px;text-align: left;padding: 0;margin: 0 0 5px;color: #000 !important;font-weight: 400;}
div.Form ul li.area input{width: auto;height: auto;padding: 0;margin-right: 2px;}
div.Form ul li.area label{margin-right: 5px;font-size: 15px;}


div.Form ul li.no-title { margin: 12px 0 20px; border:0 solid #ced4da; text-align: left; }
div.Form ul li.no-title h5 {font-size: 1.4rem;}



/* 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;}







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


    .page-title h3 { width: 95%; font-size: 1.2rem;}
}

@media (max-width: 1200px) {
    .container {max-width: 1280px;}
    .form-text { margin: 0 0 0 0%;  }
    .form-text .btn-all {flex-direction: column; }
    .form-text .btn-all .big-btn { width:100%; }
    }
    
@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;}
    header#visual .title .photo { width: 100%; }
    .form-text { margin: 0 0 0 0%; display: block; width: 100%; padding: 15px 0; }

    .form-text .btn-all .big-btn h4 { font-size: 1.2rem; display: inline-block; padding: 10px 20px; }
    .form-text .btn-all .big-btn {margin: 10px 0;}
    header#visual .title .info {
        display: flex;
        margin: 60px 0 50px;
    }
    .video-con-auto .photo {width:60%;}


}




@media(max-width: 767px){
    h2{font-size: 1.6rem;}
    section p, section li, section a { font-size: 1rem; line-height: 2; }

    div.EventAD { display: none; }



    .con-flex {flex-direction: column;}
    .con-flex .item{width: 100%;margin: 0 0 20px;};
    .con-flex .item:nth-child(1){width: 100%;}
    .con-flex .item:nth-child(2){width: 100%;}







    .title P { font-size: 1.15rem; }
    .title h2 { line-height: 1.4; font-size: 1.4rem; }
    .title .icon { width: 100px; }
    .title .photo {width: 100%;}


    .photo-flex .photo.big {width: 100%;}
    .text-flex { flex-direction: column; }
    .text-flex .photo { width: 100%; margin: 20px 0; }
    .text-flex .text { width: 100%; }

    .photo-flex { flex-direction: column; }
    .photo-flex .photo { width: 100%; margin: 20px 0; }


    section#work .box h4 { font-size: 1.2rem; }



    header#visual .title .photo { width:100%; }
    header#visual .title .info { margin: 30px 0 50px; }
    .page-title h3 { font-size: 1.1rem; width: 92%; }
    .page-title h3::before { top: -30px; }
    .page-title h3::after { bottom: -30px; }


    section#qa-5 .photo { width: 100%; }


    .q-title h5 { font-size: 1.2rem; }
    .video-container { margin-left:0px;}
    .video-bg {padding: 15px 0;}

    header#visual{background: url(../images/header-m-bg.jpg ) no-repeat center bottom 0px;background-size:cover;}
    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: #337e99;}
    header#visual .title .info .name h3 { font-size: 1.5rem; padding: 10px 5px;writing-mode: vertical-lr;margin: 0;  letter-spacing: 0.5rem; }    
    section#work .q-title { margin: 30px 0 15px; }
    section#qa-2 .no-line p span { display:block; }
    section#qa-4 .photo { width: 100%; }
  
    .video-con {flex-direction: column;}
    .video-con .photo{width:100%;margin: 0 0 20px;}

    .video-con .list{width:100%;}

    
    .video-con .list ul li{margin-top: 20px;}
    .video-con .list ul li span{padding: auto;margin-right: 8px;font-size: .9rem;display: block;width: 20%;text-align: center;}
    .video-con .list ul li a {font-size: 1.1rem;}
      .video-con-auto .photo {width:90%;border: none;border-radius: 0px;}




    section#form { padding: 30px 0; background-color: #2c2523; }
    .form-text {margin:0; display: block; width: 100%; padding: 20px 0; }
    .form-text h3 {margin: 20px 0;text-align: center;font-size: 1.4rem;line-height: 2;}
    .form-text h3 span{font-size: 1.7rem;line-height: 1.6;}
    .form-text h5 {color: #fff;font-weight: 300;margin: 20px 0 0;font-size: 1rem;line-height: 1.6;}
    .form-text .btn-all .big-btn { width: 100%; }
    .form-text h5 b { font-size: 1.5rem; }
}

@media (max-width: 575px) {  

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








/* form */
div.Form ul{width: 100%;}

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


}