*{font-family: 'Noto Sans TC','微軟正黑體',sans-serif; }
body{ font-family: 'Noto Sans TC','微軟正黑體',sans-serif; overflow-x: hidden;}
h1,h2,h3,h4,h5,h6,p,span,a{line-height: 1.5;}
p{font-weight: 400;font-size: 1.1rem;}
a:hover{ text-decoration: none; }
section{ padding:100px 0; }

/* svg */



/* 主視覺 */
header#visual{background: url(../images/header-bg.jpg) no-repeat center right;background-size: cover; width: 100%;height: 80vh;
  background-attachment: fixed;position: relative;} 
header#visual .title-con{padding: 100px 0;}
header#visual .title-con .logo{width:25%;margin-bottom: 20px;}
header#visual .container-fluid {width: 80%;margin: 0 auto;}
header#visual h1 {font-weight: 900;font-size:4.6rem;color: #fff;text-shadow: 0px 0px 10px rgb(0, 0, 0);}


/* 主視覺 */
section#path{background-color: #0D2230;position: relative;overflow: hidden;}
section#path .bg{width: 100%;height: 100%;background: url(../images/bg.jpg) repeat center;background-size: 20%;  position: absolute;top:0;
animation: bg 40s linear infinite ;z-index: 1;}
@keyframes bg{
  from{
   background-position: 0 30%;
  }
  to{
    background-position: 20% 10%;
  }
}


section#path .container-fluid{width: 80%;margin: 0 auto;z-index: 99;position: relative;}

/* 流程頁面 */
section#path .content {position: relative;}
section#path .content .photo{width: 60%;}
section#path .content .photo img{width: 100%;}
section#path .content .box{background-color: #fff;border-radius: 10px;padding:80px 20px;position: absolute;right:0px;top:50%;width: 50%;transform: translate(0,-50%);}
section#path .path-photo .title{text-align: center;width: 100%;}
section#path .path-photo .title h2 {color:#fff;font-size: 2.6rem;font-weight: 700;margin: 100px 0 40px;}
section#path .path-photo .box{background-color: rgba(255, 255, 255, 0.8);border-radius: 10px;padding: 40px;}
section#path .path-photo .box img{width: 80%;margin: 2% auto;display: block;}




/* 課程頁面 */
section#lesson{transition: all .3s linear;padding: 0;padding: 40px 0;background:url(../images/bg-2.jpg) center; background-size: cover;}
section#lesson .container-fluid{width: 80%;margin: 0 auto;z-index: 99;position: relative;}
section#lesson .lesson-box {background-color: #fff; border-radius: 10px;width: 100%;margin:20px auto 80px;padding: 40px;}
section#lesson .lesson-box:nth-child(1) {margin:80px auto 80px;}

section#lesson .lesson-box .lesson-title {position: relative;display: flex;height: 120px;}
section#lesson .lesson-box .lesson-title h2{font-weight: 600;margin-left: 20px;}
section#lesson .lesson-box .lesson-title a{color: #402c2c;transition: all .3s ease-in;}
section#lesson .lesson-box .lesson-title a:hover{color: #b81919;}
section#lesson .lesson-box .lesson-title .logo {width:180px;transform: translateY(-75px);}
section#lesson .lesson-box .lesson-title .logo img{width: 100%;}
section#lesson .lesson-box .lesson-con{position: relative;display: flex;justify-content: space-between;}
section#lesson .lesson-box .lesson-con h5{font-weight: 700;background-color: #ffcc00; padding: 10px;color: black;margin: 0 0 20px; }
section#lesson .lesson-box .lesson-con .photo{width: 30%;margin: 0 15px;}
section#lesson .lesson-box .lesson-con .photo img{width: 100%;}
section#lesson .lesson-box .lesson-con .text{width:65%;}
section#lesson .lesson-box .lesson-con .text h3 {font-weight: 600;font-size: 1.4rem;}
section#lesson .lesson-box .lesson-con .text h3 i{font-weight: 600;color: #E02726;}
section#lesson .lesson-box .lesson-con .text p {font-size: 1.2rem;font-weight: 400;}
section#lesson .lesson-box .lesson-con .text p span {color: #E02726;font-weight: 600;}

section#lesson .lesson-box .lesson-btn-g {display: flex;flex-wrap: wrap;justify-content: center;margin: 40px 0 0;border-top: 1px solid #cfd4de;padding: 20px 0 0; }
section#lesson .lesson-box .lesson-btn-g .lesson-btn {width: 300px;background-color: #102a6a;text-align: center;border-radius: 10px;transition: all .3s ease-in;}
section#lesson .lesson-box .lesson-btn-g .lesson-btn a {color: #fff;font-size: 1.3rem;padding: 10px;display: block;}
section#lesson .lesson-box .lesson-btn-g .lesson-btn:hover {background-color: #204dbf; }



@media(max-width:1366px){
    /* visual */ 
  header#visual .container-fluid {width: 90%;}


  /* 流程頁面 */
  section#path .container-fluid { width: 90%;}
  section#path .content .box { padding:  40px 20px; }

  /* 課程頁面 */
  section#lesson .container-fluid{width: 90%;}

}








@media(max-width:1024px){
    /* visual */
}
@media(max-width:991px){
  /* 主視覺 */
  header#visual .container-fluid {width: 98%;}
  header#visual .title-con { padding: 60px 0;}


  /* 流程頁面 */
  section#path .container-fluid { width: 98%;}
  section#path .content .box { width: 70%;  transform: translate(0%,-80px);}

  /* 課程頁面 */
  section#lesson .container-fluid{width: 98%;}
  section#lesson .lesson-btn { padding: 0 2%;}
  section#lesson .lesson-btn h3{font-size:1.8rem;}

}


@media(max-width: 767px){
  section{ padding:80px 0; }
  p{font-weight: 400;font-size: 1rem;}
  /* 主視覺 */
  header#visual {background: url(../images/header-bg.jpg) no-repeat center top; height: auto;}
  header#visual .title-con .logo { width:30%;margin-bottom: 5px;}
  header#visual h1 { font-size: 3rem;}



  /* 流程頁面 */
  section#path .content .box { padding: 10px 20px; position: relative; right: 0px; top: 50%; width: 90%; transform: translate(10%,-80px);}
  section#path .content .photo { width: 90%;}
  section#path .path-photo .title h2 { font-size: 1.6rem; margin: -5% 0 20px;}
  section#path .path-photo .box { padding: 10px;}
  section#path .path-photo .box img { width: 100%; margin: 0 auto;}


  /* 課程頁面 */
  section#lesson .lesson-box .lesson-con { flex-wrap: wrap; }
  section#lesson .lesson-box .lesson-con .text { width: 100%; }
  section#lesson .lesson-box { padding: 20px; }
  section#lesson .lesson-box .lesson-title h2 { margin-left: 10px; font-size: 1.3rem; }

  section#lesson .lesson-box .lesson-title .logo { width: 120px; transform: translateY(0px); }
  section#lesson .lesson-box .lesson-con .photo { width: 60%; }
  section#lesson .lesson-box .lesson-con .text p { font-size: 1.1rem; }
  section#lesson .lesson-box .lesson-con .text h5 { font-size: 1.1rem; }
  section#lesson .lesson-box .lesson-btn-g .lesson-btn a { font-size: 1.1rem; }
  section#lesson .lesson-box .lesson-title { height: auto; }
}

@media(max-width: 575px){
  header#visual .title-con .logo { width: 40%;margin-bottom: 5px;}
  header#visual h1 { font-size: 2rem;}
}