*{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: #131313;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: #464AAC;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: 60px 0 0 ;background: url(../images/TITLE_BG.jpg) no-repeat right top ;background-size:cover;}
header#Visual > .container-fluid{width: 100%; padding: 0 30px; }
header#Visual .content {width: 100%;}
header#Visual .master_title{text-align: center;color: #fff;display: flex;justify-content: space-between;;}
header#Visual .master_title .title_text{width:60%;padding:30px;text-align: center;background-color: rgba(255, 255, 255, 0.6);border-radius: 30px;  margin: 80px 15px 30px;}
header#Visual .master_title .title_text img{width:100%;}
header#Visual .master_title .title_photo{margin:0;width:28%;position: absolute;bottom:-5%;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, #f3f7ff , #f4e2fc);position: relative;z-index: 99;}
section#PageA .content {max-width: 65%;}
section#PageA h2{background: linear-gradient(to right,#3D7AE2,#5235A5);font-weight:600;margin: 0 0 40px;display: block;text-align: center; font-size: 1.8rem;color: #ffe471;display: block;padding: 10px 12px;}
section#PageA h2 span{ font-weight:800; font-size: 2.2rem;color:#fff;margin: 8px 0 0;}
section#PageA h4 {font-size: 1.4rem;font-weight: 900;}
section#PageA p {font-size: 1.2rem;margin: 10px auto 0;line-height: 1.8;}
section#PageA p span {background-color: #e2dcff;}
section#PageA p.im {background: linear-gradient(to right,#3D7AE2,#9A16A2);padding: 10px 18px;border-radius: 2px;font-size: 1.3rem;margin: 20px 0;color: #fff;display: inline-block;}
section#PageA ul  li::marker {color: #1756a2;}



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: 60px 0 0;padding: 30px;background-color: #2B1265;background: linear-gradient(45deg,#1A195E,#1A195E);}
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: #fff;}
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: 30%;}
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: grid; grid-template-columns: repeat(2, 1fr);gap: 20px;grid-auto-flow: column;grid-template-rows: repeat(4, auto); }
section#PageB .list-box-flex .list-box {background:linear-gradient(60deg,#92afe938,#96a2ff4d);padding: 20px;border-radius: 10px;}

section#PageB .list-box-flex .list-box .box-con ul {list-style: disc;padding: 0 0 0 30px;margin: 10px 0 0;}
section#PageB .list-box-flex .list-box .box-con ul li > ul {list-style: circle;padding: 0 0 0 28px;margin: 0;}
section#PageB .list-box-flex .list-box .box-con ul li::marker {color: #1756a2;}
section#PageB .list-box-flex .list-box .box-con .extend {background-color: #8aceed3e;padding: 20px;border-radius: 10px;margin: 15px 0 0;}
section#PageB .list-box-flex .list-box .box-con .extend  b {color: #1756a2;}



section#PageB .list-box-flex .list-box .box-title {display: flex;align-items: center;}
section#PageB .list-box-flex .list-box .box-title .cir {background-color: #fff;display: flex;align-items: center;justify-content: center;color: #1756a2;border-radius:60px ;width: 45px;height: 45px;margin-right: 10px;font-weight: 600;font-size: 1.6rem;}
section#PageB .list-box-flex .list-box .box-title h5 {font-weight: 900;font-size: 1.4rem;margin: 0;text-align: left;padding: 15px 0;color: #1A195E;}

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: #464AAC; 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, #f3f7ff , #f4e2fc);}
section#PageC .teacher{margin: 100px 0 0;width:95%;}
section#PageC .teacher h3 {font-size: 2.4rem;color: #8A28AE;}
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, #f3f7ff , #f4e2fc)}
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 > .container-fluid { padding: 0 12px;}
        header#Visual .master_title .title_text { width: 100%; padding: 20px 0px 280px;margin:50px 0 25px;   order: 2; }
        header#Visual .master_title .title_photo { width:65%; transform: translate(-50%,0); bottom:2%;  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 {display: flex;
    flex-direction: column;}


        
        section#PageB .list-box-flex .list-box .box-title .cir {width: 35px;height: 35px;margin-right: 10px;font-size: 1.3rem;}
        section#PageB .list-box-flex .list-box .box-title h5 {font-size: 1.3rem;}

       


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