*{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: #492297;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: #000;}
.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 15px;}
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:32%;position: absolute;bottom: -24%;right: 7%;z-index: 0;}
header#Visual .master_title .title_photo img{width: 100%;}


/* PageA 內容設定*/
section#PageA{width: 100%;padding: 80px 0;background: linear-gradient(135deg, #fdfeff , #D5D8F7);position: relative;z-index: 99;}
section#PageA .content {max-width: 65%;}
section#PageA h2{color:#09419b;font-weight:600;margin: 0 0 20px;display: block;text-align: center; font-size: 1.8rem;}
section#PageA h2 span{ font-weight:800;display: block; font-size: 2.2rem;color:#22205e;}

section#PageA p {font-size: 1.2rem;margin: 10px auto 0;line-height: 1.8;}
section#PageA p span {background-color: #F02399;color: #fff;padding: 8px 15px;border-radius: 5px;font-size: 1.3rem;margin: 20px 0;}

section#PageA .box { box-shadow: 0 0px 10px rgb(0 0 0 / 12%), 0 1px 2px rgb(0 0 0 / 24%);border-radius: 5px;margin: 40px 0 0;padding: 30px;background-color: #2B1265;background: linear-gradient(45deg,#1f1d70,#5a36c6);}
section#PageA .box h4{font-size: 2rem;font-weight: 800;margin: 0 0 20px;color: #fff;}
section#PageA .box h5 {color: #fff;font-weight: 500;}
section#PageA .box ul {padding: 0 0 0 30px;margin: 0;color: #fff;}
section#PageA .box ul > li {color: #fff;font-weight: 500;font-size: 1.15rem;}
section#PageA .box ul > li::marker {color: rgb(255, 239, 248);}
section#PageA .box .text-flex{display: flex;justify-content: space-between;align-items: center;}
section#PageA .box .text {width: 62%;padding:0 15px;}
section#PageA .box .photo{width: 35%;}
section#PageA .box .photo img{width: 100%;}






/* PageB 內容設定*/
section#PageB{width: 100%;background-color: #eefbfa;padding: 40px 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;}

section#PageB .list-box-flex {display: flex;justify-content: space-around;}
section#PageB .list-box-flex .list-box {width: 32.5%;background:linear-gradient(45deg,#92b9e961,#af92f26b);padding: 30px;border-radius: 10px;}
section#PageB .list-box-flex .list-box h5{font-weight: 900;font-size: 1.4rem;text-align: center;border-bottom: 1px solid #8e69bb;padding: 15px 0;color: #492297;}
section#PageB .list-box-flex .list-box ul {list-style: disc;padding: 0 0 0 20px;margin: 20px 0 0;}
section#PageB .list-box-flex .list-box .icon {margin: 0 auto 5px;width: 150px;}
section#PageB .list-box-flex .list-box .icon img{width: 100%;}


hr{height: 1px;margin: 30px auto;background-color: #ffffff;}


.flex_content { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem;width: 90%; margin: 0 auto; }
.flex_list{break-inside: avoid; box-sizing: border-box;margin: 0 0 20px;}
.title_sm { background-color: #4a328c; padding: 2px 10px;  display: inline-block; }
.title_sm  h5 {color: #fff;margin: 0;}

.flex_list:nth-child(1) { grid-column: 1; grid-row: 1; } /* 活動日期 */
.flex_list:nth-child(2) { grid-column: 2; grid-row: 1; } /* 活動時間 */
.flex_list:nth-child(3) { grid-column: 1; grid-row: 2; } /* 活動方式 */
.flex_list:nth-child(4) { grid-column: 2; grid-row: 2; } /* 報名截止日期 */
.flex_list:nth-child(5) { grid-column: 1 / -1; grid-row: 3;margin-top: -5rem; } /* 適合對象 */
.flex_list:nth-child(6) { grid-column: 1 / -1; grid-row: 4; } /* 議程介紹 */





section#PageB ul , section#PageB ol{padding: 0 0 0 28px;}













/* PageC 內容設定*/
section#PageC {width: 100%;padding: 40px 0;background: linear-gradient(135deg, #f7fcff, #D5D8F7)}
section#PageC .teacher{margin: 100px 0 0;width:95%;}
section#PageC .teacher h3 {font-size: 2.4rem;color: #22205e;}
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 , #D5D8F7)}
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: #000;}
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:95%;width: 90%;}
        section#PageB div.content {width: 96%;}
      
     
    }

    @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;}

       
       


    }

    @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;}

        
        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 250px; order: 2; }
        header#Visual .master_title .title_photo { width:75%; transform: translate(-50%,0); bottom:-15%;  right: auto; left: 50%; }
        header#Visual .master_title .title_text img { width: 100%; }


        /* 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; }
        section#PageA .box .photo { width: 50%; }
        section#PageA h2 span { font-size: 1.8rem; line-height: 1.5; }

        /* PageB內容設定*/
        .flex_content { grid-template-columns: 1fr !important;  row-gap: 1rem; column-gap: 0; width: 100%; }
        .flex_list { grid-column: auto !important; grid-row: auto !important; margin-top: 0; }
        .flex_list + .flex_list { margin-top: 1rem; }
        .title_sm { display: block; width: 100%; }


       
       
        section#PageB .list-box-flex { flex-direction: column; }
        section#PageB .list-box-flex .list-box { width:100%; margin: 0 0 20px;padding: 20px; }
        section#PageB .list-box-flex .list-box .icon { width: 100px; }

        /* PageC內容設定*/
         section#PageC {padding: 60px 0;}
         section#PageC .teacher_photo { width:45%;margin: 0 auto 20px; }
         section#PageC .teacher { margin:0; width: 95%; }
         section#PageC .teacher h3 { font-size: 2rem; }
    }

    @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 20px;}
        section#PageC .teacher{width:100%;}
        section#PageD .banner { width: 100%; height:150px; }
        section#PageD #btn { width: 80%; }
    }