*{font-family: '微軟正黑體', 'Microsoft Jhenghei', 'Arial', sans-serif;box-sizing: border-box;}
body{overflow-x:hidden;background-color: #fff;z-index: -999;}
h1, h2, h3, h4, h5, h6 { font-weight: 800;clear: both;}
h5{line-height: 2rem;}
h4{line-height: 2.2rem;}
h2{line-height: 3rem;}
a{ text-decoration: none;color: #FFB447;transition: all .2s linear; }
a:hover{ text-decoration: none;color: #ff629c; }
i{margin: 0 5px;text-align: center;vertical-align: middle;}
button{outline:none;}
button:focus{outline:none;}

/* RWD 整體寬度調整*/
header div.content {  position: relative; }
header, section { width: 100%; margin: 0; clear: both; padding: 0;}
section p,section li{  color: #333;margin-bottom: 0rem;font-size: 1.1rem;line-height: 2rem;font-weight: 600; }
div.content { width:80%; margin: auto; clear: both; }


/* 大標 */
.title_text{margin:40px 0 ;}
.title_text .title_icon{width: 10px;background-color: #1771DE;height: 30px;display: inline-block;vertical-align: middle;}

/* navbar */
.navbar { position: fixed; width: 100%; z-index: 999;font-family: '微軟正黑體', 'Microsoft Jhenghei', 'Arial';font-size: 1.2rem;font-weight: 600;padding: 0;}
.navbar ul li{line-height: 80px;}
.bg-dark { background-color: #3a3a3a!important;padding: 0 50px; }
.navbar #formLink{ background: #1771DE; height: 100px;line-height: 80px;padding: 0 10px;margin: 0 10px;transition: all 0.2s linear;}
.navbar #formLink:hover{ background: #479aff;}
.navbar-dark .navbar-nav .nav-link { color: #fff; }
.navbar-dark:active  .navbar-nav:active  .nav-link:active { color: #fff; }
.navbar-dark .navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .nav-link:hover{ color: #fff; }
.nav-logo{width:28%; margin: 20px auto;position: absolute;top:0px;left:15px;}
.nav-logo img{width: 100%;}




/* 主視覺 */
header#Visual {position: relative;padding: 50px 0 0 ;background: url(../images/TITLE_BG.jpg) no-repeat left center ;background-size:cover;}
header#Visual > .container-fluid{width: 100%;padding: 0;}
header#Visual .content {width: 100%;}
header#Visual .master_title{text-align: center;color: #fff;display: flex;width: 100%;justify-content: space-between;}
header#Visual .master_title .title_text{width:60%;padding: 70px 30px 0;text-align: center;}
header#Visual .master_title .title_text img{width:90%;}
header#Visual .master_title .title_photo{margin:0;width:40%;}
header#Visual .master_title .title_photo img{width: 100%;}


/* PageA 內容設定*/
section#PageA{width: 100%;padding: 80px 0;background: linear-gradient(135deg, #fdfeff , #dbeffb)}
section#PageA .content {max-width: 60%;}
section#PageA h2{color:#06285f;font-weight:600;margin: 0 0 30px;display: block;text-align: center; font-size: 1.6rem;}
section#PageA h2 span{ font-weight:900;font-size:2.6rem;margin: 10px 0;display: block;}

section#PageA p {font-size: 1.4rem;width: 100%;margin: 10px auto 0;line-height: 1.8;}

section#PageA ul {margin: 20px 0 0;}
section#PageA ul li {font-size: 1.2rem;width: 100%;margin: 20px auto;font-weight:600 ;}
section#PageA ul li span {color: #1771DE;font-weight:800 ;font-size: 1.25rem;}
section#PageA p span {background: linear-gradient(to bottom,#402f0000 50%,#ffe66b 100%);}

section#PageA .box {/* box-shadow: 0 0px 10px rgb(0 0 0 / 12%), 0 1px 2px rgb(0 0 0 / 24%); */border-radius: 10px;margin: 40px 0 0;padding: 30px;border: 10px solid #c5e0f0;background-color: #fff;}
section#PageA .box h4{font-size: 2rem;font-weight: 800;margin: 0 0 20px;}

section#PageA .box ul {padding: 0 0 0 30px;margin: 0;}

section#PageA .box .text-flex{display: flex;justify-content: space-between;}
section#PageA .box .text {width: 60%;}
section#PageA .box .photo{width: 40%;padding: 20px 0 20px 20px;}
section#PageA .box .photo img{width: 100%;}





/* PageB 內容設定*/
section#PageB{width: 100%;background-color: #eefbfa;padding: 80px 0;background: url(../images/pageB_bg.jpg) center ;background-size: cover; background-attachment: fixed;}

section#PageB div.content { width:80%;}
section#PageB p,section#PageB li{color: #000;}


hr{height: 1px;margin: 30px auto;background-color: #ffffff;}


.flex_content{display: flex;justify-content: center;}
.flex_list{width: 38%;margin:0 20px;}
.title_sm { background-color: #4a328c; padding: 2px 10px; margin: 30px 0 5px 0; display: inline-block; }

section#PageB ul , section#PageB ol{padding: 0 ;}
section#PageB ol {padding: 0 0 0 28px;}



section#PageB ul {list-style: none;}
section#PageB ul h5 {margin: 0;color: #fff;margin: 0;}
.title_sm  h5 {color: #fff;margin: 0;}







/* PageC 內容設定*/
section#PageC {width: 100%;padding: 80px 0 0;background: linear-gradient(135deg, #f7fcff, #dbeffb)}
section#PageC .teacher{margin: 40px 0 0;width:95%;}
section#PageC .teacher h3 {font-size: 2.4rem;color: #06285f;}
section#PageC .teacher h3 span{color: #7a7a7a;font-size: 1.2rem;margin-bottom: 10px;}
section#PageC .teacher_photo{width: 100%;}
section#PageC .teacher_photo img{width: 100%;}


/* btn 內容設定 */
section#PageD {padding: 40px 0;background: linear-gradient(135deg, #f7fcff , #dbeffb)}
section#PageD .banner {width:1100px;height:450px;margin: 160px auto 60px;background: url(../images/banner.jpg) no-repeat center;display: block;border: 10px solid #DCE9F1;background-size: cover;border-radius: 20px;overflow: hidden;-webkit-filter:brightness(1);cursor: pointer;transition: all .3s linear;}

section#PageD .banner:hover {-webkit-filter:brightness(.9);}

section#PageD #btn{width: 40%;background-color: #1771DE;text-align: center;font-size: 1.6rem;font-weight: 600;transition: all 0.2s linear; cursor: pointer;margin: auto;border-radius: 5px;}
section#PageD #btn:hover{background-color: #479aff;}
section#PageD a{display: block;color:#fff;padding: 10px 10px;}

section#PageD #btn:hover a{color: #fff;}







/* RWD Setting */
    @media (max-width: 1440px) {
       /* RWD 整體寬度調整*/

        /* 主視覺 */ 


    }

    @media (max-width: 1199px) {
        /* RWD 整體寬度調整*/
 

        /* 主視覺 */
        section#PageA .content {max-width:96%;}
        section#PageB div.content {width: 96%;}
        .flex_list{width: 45%;}
     
    }

    @media (max-width:991px) {
        /* RWD 整體寬度調整*/
  
        h2{font-size: 1.5rem;line-height: 2.4rem;}
        h3{font-size: 1.4rem;line-height: 2.2rem;}
        h4{font-size: 1.3rem;}
        h5{font-size: 1.1rem;}


        /* 主視覺 */
      
        section#PageA p { font-size: 1.1rem; }
        section#PageA .box {padding: 15px;}
        section#PageA .box .text-flex { flex-direction: column; }
        section#PageA .box .text { width: 100%;} 
        section#PageA .box .photo { width: 100%; margin: 20px 0;}

       
        .title_sm {
       
            padding: 2px 10px;
            margin: 30px 0 5px 0;
            display: inline-block;
        }

        section#PageD .banner { width:700px; height: 300px; }
        .flex_content{display: block;}
        .flex_list{width: 100%;}
    }

    @media (max-width: 767px) {
         /* RWD 整體寬度調整*/
        div.content { width: 96%; }
   
        section p,section li{ margin-bottom: 0rem;font-size: 1rem;line-height: 2rem;}
        table tr td p{font-size: 1rem;line-height: 1.6rem;}
        table tr td a { font-size: 1rem;line-height: 1.6rem;}
        h2 { font-size: 1.2rem; line-height: 1.6rem; }
        
        section#PageA h2 { font-size: 1.6rem;line-height: 2.4rem; }


        /* navbar */
        .navbar #formLink{ padding: 0 0px;margin:0 0 20px;}
        .navbar #formLink:hover{ box-shadow: none;}
        .navbar-toggler:not(:disabled):not(.disabled) { cursor: pointer; margin:10px 0; }
        .navbar ul li { line-height: 30px; }
        .navbar ul li:nth-child(3) { line-height: 30px; margin: 0 0 30px; }
        .navbar #formLink{ background: none; height:30px;line-height:30px;}
        .navbar #formLink:hover{ background:none; height:30px;line-height:30px;}
        .nav-logo{width:40%; margin: 10px auto;left:auto;right: 10px;top: 5px;}

        
        /* 主視覺 */
        header#Visual {background-size: cover; flex-direction: column;height: auto; }
        header#Visual .master_title { flex-direction: column;padding: 0;}
        header#Visual .master_title .title_text { width: 100%; padding: 20px 0px 0; order: 2; }
        header#Visual .master_title .title_photo { margin: 0; width:100%; order:1 }
     
 


        /* PageA內容設定*/
        section#PageA p {width: 100%;}
        section#PageA .green_bg > h2{font-size: 1.2rem;}
        section#PageA .box h4 { font-size: 1.4rem; font-weight: 700; margin: 10px 0 0; }

        /* PageB內容設定*/
     

    }

    @media (max-width: 575px) {
        body { margin: 0;}
   
        /*RWD 整體寬度調整*/
        i{margin-right: 5px;}
        section .content .title h2 {line-height: 1.9rem;font-size: 1.4rem;margin: 0 0 15px 0;}

        h3{font-size: 1.5rem;line-height: 2.2rem;}
        h4{font-size: 1.3rem;line-height: 1.8rem;}
        section p,section li{  margin-bottom: 0rem;font-size: 1rem;line-height: 1.6rem;}
        table tr td p{font-size: .9rem;line-height: 1.4rem;}
        table tr td a { font-size: .9rem;line-height: 1.4rem;}
       
        section {padding: 15px; margin: 0; }
        section h1 { font-size: 1.3em; line-height: 0.8; }


        /* nav */
        .bg-dark { padding: 0 20px; }
        .navbar #formLink a{ color: #FFB700; }
        .navbar #formLink a:hover{ color: #ffdc41; }
        .nav-logo{width:60%; margin: 10px auto;left:auto;right: 10px;top: 5px;}
        /* 主視覺 */
     



        /* PageC內容設定*/
        section#PageC .teacher_photo{width: 70%;margin: 0 auto;}
        section#PageC .teacher{width:100%;}

        section#PageD .banner { width: 100%; height:150px; }


        section#PageD #btn { width: 80%; }
    }
