*{font-family: 'Noto Sans TC','微軟正黑體',sans-serif; }
body{ font-family: 'Noto Sans TC','微軟正黑體',sans-serif; overflow-x: hidden;background: url(../images/bg.jpg) ;background-size: cover;background-attachment: fixed;box-sizing: border-box;overflow-x: hidden;  -webkit-overflow-scrolling: touch;}
html{font-size: 16px;box-sizing: border-box; scroll-behavior: smooth;}
section h1,section h2,section h3,section h4,section h5,section h6,section p,section span,section a{line-height: 1.4;position: relative;z-index: 999;color: #242e22;}
section p,section li,section table tr td{font-weight: 400;line-height: 1.8;color: #242e22;font-size: 1.12rem;}
section a {font-size: 1.12rem;color: #FFD764;transition: all .2s ease-in;}

section a:hover{ color: #fff9e4;text-decoration: none; }
section {}
/* 共通 */
.responsive-img{width: 100%;}
.master-title {margin: 0 0 40px;}
.master-title h2{font-weight: 600;font-size: 2.4rem;line-height: 1.6;  color: #1f3c49;}
.master-title h3{font-weight: 600;font-size: 1.6rem;color: #fff;}
.master-title p {font-size: 1.2rem; line-height: 2;}
.master-title p span{border-bottom: 2px solid #E32124;}
.master-title.center h2 {text-align: center;}
.master-title.center h3 {text-align: center;}



.container {max-width: 72%;margin: 0 auto!important;padding: 0;}
.master-title{margin:20px 0 ;position: relative;}

header#visual {position: relative;padding: 0;height: 90vh;background: url(../images/master-bg.jpg);background-size: cover;}
header#visual .header-flex {display: flex;justify-content: flex-end;}
header#visual .header-flex .photo {width:42%;position: absolute;bottom: 0%;left: 3%;}
header#visual .header-flex .photo img{width:100%;}
header#visual .header-flex .photo h4 {position: absolute;bottom:20%;left: 2%;background-color: #f2f7f9c6;
    padding: 10px 30px;color: #404e5c;z-index: 999;line-height: 1.8;font-size: 1.4rem;border-radius: 30px; }

header#visual .header-flex .text {width: 55%;padding:10% 5%;}
header#visual .header-flex .text .mater-title {margin:  0 0 30px;}
header#visual .header-flex .text .mater-title h1 {border-radius: 0 60px 0 60px;background-color: #009bab;padding: 30px;
    font-size: 4rem; color: #fff;text-align: center;}
header#visual .header-flex .text h2 {line-height: 1.8;}
header#visual .header-flex .text h2 span{color: #E96450;}
.hearder-con {background-color: #404e5c;padding: 30px;position: absolute;bottom: 0;}
.hearder-con p{color: #fff;font-size: 1.3rem;line-height: 1.8;margin: 0;line-height: 1.6;
    letter-spacing: 2.25px;position: relative;font-size: 1.4rem;display: inline-block;text-align: justify;}
.hearder-con p::before {
    content: "";
    position: absolute;
    width: 30px;
    height: 30px;
    background: url(../images/comma-d.svg) no-repeat;
    left: -40px;
    top: -20px;
    transform: scale(-1);
}
.hearder-con p::after {
    content: "";
    position: absolute;
    width: 30px;
    height: 30px;
    background: url(../images/comma-d.svg) no-repeat;
    right: -40px;
    bottom: -20px;
    transform: scale(1);
}



header#visual .text-photo {width: 52%;padding:0% 4% 0% 0;}



      .st0 {
        fill: #000;
      }

  


      .con-btn {display: flex;padding: 10px 30px;border-radius: 5px;transition: all .3s ease-in;background-color: #F1CC59;}

       a:hover .con-btn { animation-play-state: paused;background-color: #fff2cc;}
      a .con-btn h5{color: #242e22;font-size: 1.05rem;margin: 0;font-weight: 500;}
      a:hover .con-btn h5{color: #242e22;}
      .con-btn .con-btn-arrow {width:15px;margin: -2px 0 0 10px;transition: all .3s ease-in;} 






section#experience {padding: 100px 0 0px;}
section#experience .container {max-width: 75%;}

section#experience .box {background-color: #fff;border: 5px solid #009bab;border-radius:60px;padding: 40px;margin: 280px 0;position: relative;width: 92%;}
section#experience .box .box-title{position: absolute;right: 0;border-radius: 60px 60px 0 0;background-color: #009bab;
    top: -78px;right: 50px;text-align: left;padding: 15px 30% 15px 60px;}
section#experience .box .box-title h4{color: #fff;margin: 0;font-size: 1.7rem; line-height: 1.6;}
section#experience .box .box-title img {position: absolute;right: 2%;bottom: -4px;width:30%;}

section#experience .box.right {margin-left: 8%;}
section#experience .box.right .box-title {text-align: right;padding: 15px 58px 15px 30% ;}
section#experience .box.right .box-title img {position: absolute;left: 2%;}


section#experience .box:last-child {margin: 280px 0 0;}
section#experience .box a {color: #718a7f;display: inline-block;}
section#experience .box a:hover {color: #1c5742;}

section#experience .box ul {display: flex;margin: 0 30px 0 0;  list-style: none;}
section#experience .box ul li {margin-right: 40px;  position: relative;}
section#experience .box ul li::before { content: "•"; color: #f59077; position: absolute; left: -1em; top: 0; line-height: 1;  font-size: 1.7em; }



section#experience .con-flex {display: flex;align-items: center;margin: 60px 0 0;}
/* section#experience .con-flex .con-title {background-color: #f59077;padding: 5px 30px;display: inline-block;border-radius: 0 30px 0 30px;} */
section#experience .con-flex .con-title {padding: 5px 5px;display: inline-block;border-radius: 0 30px 0 30px;}
section#experience .con-flex .con-title h5 {color: #f59077;margin: 0;}
section#experience p span {background: linear-gradient(to bottom,#fff 60%,#ffecb3 40%);}
section#experience .arrow {width: 120px;margin: 30px auto;}
section#experience .arrow img{width: 100%}





/* 課程按鈕 */
section#info {background: linear-gradient(to bottom,#ffffff00 0%,#6897a095 80%);padding:0 0 100px;}
section#info a{display: inline-block;}
section#info a .photo {width: 100%;border-radius: 30px;overflow: hidden;border: 5px solid #ddebee;transition: all .3s ease-in;}
section#info a .photo img{width: 100%;transition: all .3s ease-in;filter: brightness(0.8);}
section#info .master-title {margin: 0 0 40px;}
section#info .master-title a {background-color: #fff;color: #1f3c49;font-size: 2.4rem;margin-left: 10px;padding:2px 10px;animation: link 1.5s ease-in infinite forwards;border-radius: 5px;}

section#info a:hover .photo {border-radius:80px;}
section#info a:hover .photo img{ filter: brightness(1);}



@keyframes link {
    0%{background-color: #fff2cc;}
    50%{background-color: #F1CC59;}
    100%{background-color: #fff2cc;}
}


/* 按鈕 */
section#btnLink {padding:80px 0;text-align: center;background-size: cover;display: none;}

section#btnLink a {color: #fff;}
section#btnLink .btn{display: inline-block;padding: 10px 30px;font-size: 1.6rem;margin: 0 auto;text-align: center;background-color: #242e22;border-radius: 5px;transition: all .3s linear;font-weight: 600;}
section#btnLink .btn:hover{border-radius: 30px;}






@media(max-width:1440px){
     /* 主視覺 */

    section#experience .con-flex { flex-direction: column; align-items: flex-start; margin: 30px 0 0;}
    section#experience .box ul { flex-direction: column;margin: 10px 0px 0 0;}
    section#experience .box ul li { margin-right: 0px; }

    section#experience .box .box-title h4{font-size: 1.5rem;}
    section#experience .box .box-title { top: -73px; }
}



@media(max-width:1366px){
    /* 主視覺 */
    .container { max-width: 98%;padding: 0 15px;margin: 0 auto; }

    header#visual {height: auto;}
    header#visual .header-flex .photo { width: 52%; bottom: 0; left: 2%; }
    header#visual .text-photo { width: 54%; padding: 10% 2% 10% 0; }
    header#visual .header-flex .photo h4 { bottom: 10%; left: 2%; }
   .hearder-con { position: relative; }



}








@media(max-width:991px){


    section#experience .container { max-width: 92%; }

    section#experience .box .box-title{  min-height:100px; display: flex;align-items: center;   top: -102px;left: 60px; right: 60px;} 
    section#experience .box .box-title h4 { font-size: 1.3rem;} 
    section#experience .box { margin: 160px 0; width: 96%;}
    section#experience .box.right { margin-left: 4%; }
    section#experience .box.right .box-title{left: 60px; right: 60px;}

    .hearder-con .container { max-width: 85%; }

}



@media(max-width: 767px){

    html{font-size: 15px;}
    header#visual {height: auto;}
    header#visual { position: relative; padding: 0; height: auto; background: url(../images/master-bg-m.jpg); background-size: cover; }
    header#visual .header-flex { justify-content: center; align-items: center; flex-direction: column-reverse; }
    header#visual .header-flex .photo { width:100%; position: relative; bottom: auto; left:auto; margin: 0 auto; text-align: center; }
    header#visual .header-flex .photo img{ width:70%; }
    header#visual .header-flex .photo h4 { bottom: 50%; left: 3%;text-align: left;font-size: 1.4rem; }
    header#visual .text-photo { width: 90%; padding: 0 0 2% 0; }
    .hearder-con { padding:30px 0; }
    .hearder-con p { font-size: 1.15rem; }

    
    section#experience { padding: 0 0 0px; }
    section#experience .container { max-width: 96%; }
    
    section#experience .box {border-radius: 30px; padding: 30px; margin: 200px 0; position: relative; width: 100%; }
    section#experience .box.right { margin-left: 0%; }

    section#experience .box .box-title { position: absolute; border-radius: 30px 30px 0 0; top: -100px; right: 10px;left: 10px;  padding: 10px 28% 10px 10px; }
    section#experience .box.right .box-title{left: 10px; right:10px; padding: 10px 10px 10px 28%; }
    section#experience .box:last-child { margin: 200px 0 0; }
    section#experience .arrow { width: 60px; }
section#experience .box .box-title img {bottom: 0px;}
    .master-title h2 { font-size: 2rem; }
}






@media(max-width: 575px){

    header#visual .header-flex .photo h4 { bottom: 4%; left: 3%;text-align: left; }
    header#visual .text-photo { width: 98%;  }
    header#visual .header-flex .photo img{ width:90%; }








}