*{font-family: 'Noto Sans TC','微軟正黑體', 'Microsoft Jhenghei', 'Arial', sans-serif;box-sizing: border-box;
}
body{overflow-x:hidden;background-attachment: fixed;scroll-behavior: smooth;
 /*    background: url(../images/bg.jpg) repeat;    background-size: 40%; */
  }
html {font-size:16px;scroll-behavior: smooth;}
a{ text-decoration: none;color: #2a2a2a;transition: all .2s linear; }
a:hover{ text-decoration: none;color: #000000; }
button{outline:none;}
button:focus{outline:none;}
br {  line-height: 150%; }
dl, ol, ul {
 list-style: none;
}
h2{font-size: 2.6rem;font-weight: bold;}
h1, h2, h3, h4, h5, h6 {
 margin-top: 0;
 margin-bottom: 0;
 font-weight: bold;
}

a{color:rgb(255, 86, 35);}
a:hover{color:rgb(255, 142, 97);}
/*bootstrapt 間距設定*/
/* .container {padding-right:10px;padding-left: 10px;} */
.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 { padding-right: 15px; padding-left: 15px; }

/* RWD 整體寬度調整*/
header div.content {  position: relative; }
div.content { width: 1250px; margin: auto; clear: both;padding: 60px 0;}
div.content_btn { width: 1200px; margin: auto; clear: both;}
header, section { width: 100%; margin: 0; clear: both; padding: 0;}
section p,section li{  margin-bottom: 0rem;font-size: 1.1rem;line-height: 1.8rem;font-weight: 500;letter-spacing:1px; }
section b{  margin-bottom: 0rem;font-size: 1.1rem;line-height: 1.8rem;font-weight: 800;letter-spacing:2px }


/* youtube 影片 */
.video-width { width:100%; margin: 0 auto;border: 10px solid rgb(0, 0, 0); }
.video-container { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; }
.video-container iframe, .video-container object, .video-container embed { position: absolute; top: 0;left: 0; width: 100%; height: 100%;}

/* owl輪播點點修正 */
/* .owl-carousel span { width:10px; height:10px; margin:5px 7px; background: #ffffff !important; display:block; -webkit-backface-visibility:visible; -webkit-transition:opacity 200ms ease; -moz-transition:opacity 200ms ease; -ms-transition:opacity 200ms ease; -o-transition:opacity 200ms ease; transition:opacity 200ms ease; -webkit-border-radius:30px; -moz-border-radius:30px; border-radius:30px; }
.owl-carousel .active span { width:10px; height:10px; margin:5px 7px; background: #4faec9 !important; display:block; -webkit-backface-visibility:visible; -webkit-transition:opacity 200ms ease; -moz-transition:opacity 200ms ease; -ms-transition:opacity 200ms ease; -o-transition:opacity 200ms ease; transition:opacity 200ms ease; -webkit-border-radius:30px; -moz-border-radius:30px; border-radius:30px; }
.search_left{top:50%;left: -30px;position: absolute;color: #b3b3b3;font-size: 2rem;transition: .4s;}
.search_left:active{color: #d1d1d1;}
.search_right{top:50%;right: -30px;position: absolute;color: #b3b3b3;font-size: 2rem;transition: .4s;}
.search_right:active{color: #d1d1d1;} */

/* 基本操作 */
.white{color:#fff;}
.blank{color:#000;}

/* 大標 */
.page_title {text-align: center;margin: 0 auto;}
.page_title > h2{ font-size: 3.2rem;font-weight: 700;color: #0B374D;}
.page_title > h5{ font-size: 1.6rem;font-weight: 500;margin: 20px 0;color: #555555;}

.page_title.text_left{text-align: left;}
.page_title.text_left .title_icon { width: 80px; padding:10px 0; margin: 0 0;}

#title1,#title2,#title3,#title4,#title5{display: inline-block;}
.title_icon { width: 80px; padding:10px 0; margin: 0 auto;}
.title_icon img{ width:100%; }
.title_line{border-bottom:7px solid #00D9D9;overflow: hidden;width: 40%;border-radius:10px;margin: 10px 0 0;}
.page_title_s{text-align: center;margin: 100px 0 25px;;z-index: 99;position: relative;}
.title_img{width: 80%;margin: 0 auto;}
.titleD_img{width: 80%;float: right;}

.btn{width: 100%; margin: 0 0 100px; background: #0B374D; color: rgb(255,255,255); padding: 25px 5px; border: none; border-radius:10px; font-size: 1.4rem; font-weight: 500; transition: all .4s ease;}
.btn:hover{ transform: translate3d(0,-7px,0); transform: translate3d(0,-7px,0); opacity: .8; }
.btn a{color:#fff;}
.btn h5{color:#fff;}

/* 主視覺 */
header#Visual {position: relative;background: url(../images/header_bg.gif) center bottom;height: 100vh;}
header#Visual > .container-fluid{width: 100%;}
.person{position: absolute;bottom: 2%;left:10%;width:18%;z-index: 1;}
.person img{width:100%;}
.cloud_1{width: 10%;position: absolute;top:22%;left: 5%;animation:cloud_1 5s linear infinite alternate;}
.cloud_2{width: 6%;position: absolute;top:35%;right: 5%;animation:cloud_2 5s linear infinite alternate;}
.cloud_3{width: 3%;position: absolute;top:10%;right: 20%;animation:cloud_3 5s linear infinite alternate;}
.cloud_1 img{width:100%;}


@keyframes cloud_1{
    0% {left: 2%;}
    100% {left:6%}
}

@keyframes cloud_2{
    0% {right: 2%;}
    100% {right:6%}
}

@keyframes cloud_3{
    0% {right: 20%;}
    100% {right:26%}
}

.header-bg{ width: 100%;height: 100vh; overflow: hidden; position: relative;z-index: 0;}
.master-text{position: absolute;z-index: 1;margin: 8% 8%;color:#fff; display: flex;flex-wrap: wrap;text-align: left;display: inline-block;right: 2%;}
.master-text h1{font-size:5.5rem;font-weight: 900;color: #FCC800;display: inline-block;}
.master-text > h5{font-size:2.5rem;line-height: 4.2rem;font-weight: 300;color: #FCC800;}
.master-text > h4{font-size:3.5rem;line-height: 5.2rem;font-weight: 500;margin: 10px 0 0;display: inline-block;}



.master-text-sub {background-color: #FF6B6B;padding: 15px;border-radius: 15px;margin: 20px 0 0;position: relative;width: 90%;}
.master-text-sub .rocket {width: 20%;position: absolute;right:0;top:-20px;}
.master-text-sub .rocket img{width: 100%;}
.master-text-sub .sale,.master-text-sub .linkedin {display: flex;align-items: center;}
.master-text-sub .sale:hover,.master-text-sub .linkedin:hover {opacity: .8;}



.master-text-sub .sale a,.master-text-sub .linkedin a{display: block;}

.master-text-sub .sale img,.master-text-sub .linkedin img {width: 35px;height: 35px;margin-right: 5px;}
.master-text-sub h2{font-size: 2.2rem;line-height: 3.2rem;color:#000;}
.master-text-sub h2 span{color:#a80000;}
.master-text-sub img{width: 100%;}




.logo{position: absolute;top:0;left:0;width:460px;margin: 50px;}
.logo img{width: 100%;}
.scroll{position: absolute;left:49%;width:40px;animation: scroll 2s ease infinite;cursor: pointer;}
.logo img{width:100%;}

/* PageA 內容設定*/
section#PageA{ position: relative;background-color: rgba(255, 255, 255, 0.8);
    background: linear-gradient(top,rgba(255, 255, 255, 1),rgba(255, 255, 255, 0.6)), url(../images/bg.jpg);
    background: -webkit-linear-gradient(top,rgba(255, 255, 255, 1),rgba(255, 255, 255, 0.6)), url(../images/bg.jpg);
    background-repeat  : repeat,repeat;
    background-size:100%, 50%;
    background-attachment: fixed;

}
section#PageA::after{content: "";width: 100%;height:300px;background: linear-gradient(#ffffff, hsla(0, 0%, 100%, 0));top:0;position: absolute;z-index: -1; }
section#PageA .box{background-color: #E9F1F4;padding: 30px;border-radius: 15px;margin: 100px auto;position: relative;}
section#PageA .box .photo{position: absolute;right:8%;top:-50px;width: 48%;}
section#PageA .box .photo img{width: 100%;}

.pageA_lesson_all{display: flex;flex-wrap: wrap;}
.pageA_lesson_all.first{margin-bottom: 40px;}
.pageA_lesson_all .lesson{background-color: #fff;box-shadow: 0px 0px 1px rgb(202, 202, 202);margin: 15px 0;
    transform: translateY(4px);
    transition: all .3s linear;width: 19%;}
    .pageA_lesson_all.second{justify-content: space-between;}

    section#PageA .box h3{margin: 0 0 20px;color: #2E7999;font-size: 2rem;}
    section#PageA .box h4{margin: 25px 0 10px;}
    section#PageA .box h4 span{font-size: 1.2rem;font-weight: 300;}


.pageA_lesson_all .lesson > a {color:#555;transition: all .3s linear;}
.pageA_lesson_all .lesson:hover a{color:#333;}
.pageA_lesson_all .lesson:hover {color:#333;transform: translateY(0px);}

.pageA_lesson_all .lesson .lesson_name{background-color: #fff;padding: 15px 10px;}
.pageA_lesson_all .lesson .lesson_title{background-color: #fff;background-color: #000;color:#fff;padding:10px;}

            .lesson_title.purple{border-top: 5px solid #7443BA;}
            .lesson_title.blue{border-top: 5px solid #28A7E9;}
            .lesson_title.red{border-top: 5px solid #D83C23;}
            .lesson_title.green{border-top: 5px solid #95C93E;}
            .lesson_title.yellow{border-top: 5px solid #FFC20E;}
            .lesson_title.azure{border-top: 5px solid #12CCC2;}


.discount_box{display: flex;align-items: center;}
.discount_box .discount_text{width: 60%;}
.discount_box .discount_photo{width: 38%;}

.discount_box .discount_text ul{list-style:disc;}
.discount_box .discount_text ul li{font-size: 1.4rem;line-height: 2.2rem; margin: 20px 0;}
.discount_box .discount_text ul li span{color: #EF0F3A;font-weight: 700;}




/* PageB 內容設定*/
section#PageB{ position: relative;
    background-color:rgba(228, 242, 255, 0.7);
    background: -webkit-linear-gradient(top,rgb(228, 242, 255),rgba(228, 242, 255, 0.7)), url(../images/bg.jpg);
    background-repeat  : repeat,repeat;
    background-size:100%, 50%;
    background-attachment: fixed;
    
}
section#PageB .box{background-color: #FFF;border-radius: 15px;margin: 100px auto;position: relative;transition: all .3s linear;transform: translateY(4px);}
section#PageB .box:hover{transform: translateY(0px);}
section#PageB .box:hover h4{color: #0087fd;}
section#PageB a{color: #333;display: block;padding: 30px;}

.pageB_lesson_title{display: flex;justify-content: space-between;padding: 20px 20px 40px;border-radius: 15px;}
.path_line{width: 92%;height:8px;margin: 40px auto 10px;position: relative;}
.path_line::before{content: "";background: url(../images/start_icon.svg) no-repeat;width: 40px;height: 80px;position: absolute;background-size: cover;left:-50px;top:-30px;z-index: 99;}
.path_line::after{content: "";background: url(../images/end_icon.svg) no-repeat;width: 25px;height: 55px;position: absolute;background-size: cover;right:-40px;top:-15px;z-index: 99;}
.path_line.purple{background-color:#7443BA ;}
.path_line.blue{background-color:#28A7E9 ;}
.path_line.red{background-color:#D83C23 ;}
.path_line.green{background-color:#95C93E ;}
.path_line.yellow{background-color:#FFC20E ;}
.path_line.azure{background-color:#12CCC2 ;}

.pageB_lesson_title .pageB_lesson_icon{width: 14%;}
.pageB_lesson_title .pageB_lesson_icon img{width:100%;}
.pageB_lesson_title .pageB_lesson_text{width: 82%;}
.pageB_lesson_title .pageB_lesson_text h4{font-size: 1.6rem;color: #1166B1;transition: all .3s linear;margin-left: -8px;}
.pageB_lesson_title .pageB_lesson_text h5{margin: 10px 0;font-size: 1.4rem;}
.pageB_lesson_title .pageB_lesson_text p{font-size: 1.2rem;}

.path_line_content{display: flex;justify-content: space-between;margin: 20px 0;}
.path_line_content .person_content{width: 28%;text-align: center;position: relative;}
.path_line_content .lesson_content{width: 37%;text-align: center;position: relative;}
.path_line_content .lesson_exam{width:28%;text-align: center;position: relative;}

.person_content p,.lesson_content p,.lesson_exam p{text-align: left;font-weight: 300;color: #000;}
.path_line_content .title{font-size: 1.2rem;font-weight: 700;margin: 0 0  10px ;}
.person_content::before,.lesson_content::before,.lesson_exam::before{content: "";transform: translate(-50%,-50%);left: 50%;position: absolute;top:-24px;width: 30px;height: 30px;border-radius: 100%;background-color: #fff;
}
.path_line_content > * {border-radius: 15px;padding: 15px;z-index: 1;}
.path_line_content > *::after{content: "";transform: translate(-50%,-50%);left:47%;top:-5px;position:absolute ;z-index: 99;width: 20px;height: 20px;transform: rotate(45deg);}

.path_line_content.purple > * {background: #f6f0ff;}
.path_line_content.purple > *::before{content: "";border: 4px solid #7443BA;}
.path_line_content.purple > *::after{background: #f6f0ff;}

.path_line_content.blue > *{background: #f1faff;}
.path_line_content.blue > *::before{content: "";border: 4px solid #28A7E9;}
.path_line_content.blue > *::after{background: #f1faff;}

.path_line_content.red > *{background: #fff7f6;}
.path_line_content.red > *::before{content: "";border: 4px solid #D83C23;}
.path_line_content.red > *::after{background: #fff7f6;}

.path_line_content.yellow > *{background: #fffaeb;}
.path_line_content.yellow > *::before{content: "";border: 4px solid #FFC20E;}
.path_line_content.yellow > *::after{background: #fffaeb;}


.path_line_content.green > *{background: #f8ffec;}
.path_line_content.green > *::before{content: "";border: 4px solid #95C93E;}
.path_line_content.green > *::after{background: #f8ffec;}


.path_line_content.azure > *{background:#f0fffd;}
.path_line_content.azure > *::before{content: "";border: 4px solid #12CCC2;}
.path_line_content.azure > *::after{background:#f0fffd;}
/* PageC 內容設定*/
section#PageC{ 
    position: relative;background-color: rgba(255, 255, 255, 0.8);
    background: -webkit-linear-gradient(top,rgba(255, 255, 255, 1),rgba(255, 255, 255, 0.6)), url(../images/bg.jpg);
    background-repeat  : repeat,repeat;
    background-size:100%, 50%;
    background-attachment: fixed;
}


section#PageC .content{ position: relative; }
section#PageC::before{ content: ""; position: absolute;top:50px;left: 20px;width: 350px;background: url(../images/path_photo_2.svg) no-repeat ;background-size: contain;height:400px; }
section#PageC::after{ content: ""; position: absolute; right:20px;bottom:0px; width: 300px; background: url(../images/path_photo_3.svg) no-repeat  ;background-size: contain;height:400px;}

section#PageC a{color: #333;display: block;padding: 15px;}

.pageC_lesson_all{display: flex; align-items: center;justify-content: flex-start;  border-bottom: 2px dashed #888;padding:50px 0; }
.pageC_lesson_all:last-child{border-bottom:none;}
.pageC_lesson_all .lesson{background-color: #fff;text-align: center;border-radius: 15px;transform: translateY(4px);transition: all .3s linear;width:285px;height: 140px;margin:0 20px;}
.pageC_lesson_all .lesson:hover{transform: translateY(0px);}


.pageC_lesson_all .number{width: 100px;text-align: center;}

.pageC_lesson_all .arrow{width:50px;height: 50px;background: url("../images/arrow.png") no-repeat;background-size: contain;}


.pageC_lesson_all .lesson.purple{border: 2px solid #7443BA;}
.pageC_lesson_all .lesson.blue{border: 2px solid #28A7E9;}
.pageC_lesson_all .lesson.red{border: 2px solid #D83C23;}
.pageC_lesson_all .lesson.green{border: 2px solid #95C93E;}
.pageC_lesson_all .lesson.yellow{border: 2px solid #FFC20E;}
.pageC_lesson_all .lesson.azure{border: 2px solid #12CCC2;}

.pageC_lesson_all .lesson .lesson_name{color:#fff;border-radius: 10px;padding: 5px 15px;margin: 0 auto 10px; display: inline-block;}
.pageC_lesson_all .lesson.purple .lesson_name{background-color: #7443BA;}
.pageC_lesson_all .lesson.blue .lesson_name{background-color: #28A7E9;}
.pageC_lesson_all .lesson.red .lesson_name{ background-color: #D83C23;}
.pageC_lesson_all .lesson.green .lesson_name{ background-color: #95C93E;}
.pageC_lesson_all .lesson.yellow .lesson_name{ background-color: #FFC20E;}
.pageC_lesson_all .lesson.azure .lesson_name{background-color: #12CCC2;}



/* linkedin */
section#linkedin{background-color: hsla(200, 87%, 91%, 0.8);position: relative;z-index: 100;}
.step-content{border-radius: 5px;overflow: hidden;}
.step-content .step-item{border: 10PX solid #fff;margin: 40px 0 0;}
.linkedin-text  {margin: 30px 0;}
.linkedin-text p {font-size: 17px; line-height: 28px; font-weight: 500;}
.linkedin-text ol.step {padding:0 0 0 25px;list-style: auto;}
.linkedin-text ol.step li{margin: 10px 0;font-size: 17px;line-height: 28px;padding:0  0px ; font-weight: 500;}

.owl-carousel .owl-nav button.owl-next, .owl-carousel .owl-nav button.owl-prev, .owl-carousel button.owl-dot { font-size: 30px !important;color: rgb(255, 86, 35) !important;outline: none; }
.owl-carousel .owl-nav button.owl-next, .owl-carousel .owl-nav button.owl-prev, .owl-carousel button.owl-dot {
  font-size: 44px !important;color: rgb(255, 86, 35) !important;outline: none;
}

section#linkedin .title{margin: 20px 0 0;}

section#PageD div.Form ul li.checkbox-input.white {color: #fff;}
section#PageD div.Form ul li.checkbox-input.black {color: #000;}
section#PageD div.Form ul li.checkbox-input {border: none;}
section#PageD div.Form ul li.checkbox-input input{width: 20px;height: 20px;display: inline;margin: 0 5px;}
section#PageD div.Form ul li.checkbox-input span {padding-bottom: 5px;} 
section#PageD div.Form  ul li.send input[disabled],section#PageD div.Form ul li.send input:disabled{ background-color: rgba(147, 77, 49, 0.8);cursor:default;}
























section#PageE{ 
    position: relative;background-color: hsla(200, 87%, 91%, 0.8);
  
    background-size:100%, 50%;
    background-attachment: fixed;
   padding: 0 15px;
}




/* RWD Setting */
 @media (max-width: 1440px) {
    /* RWD 整體寬度調整*/
     div.content { width: 1200px; margin: 0 auto;}
   
     /* 主視覺 */
     .master-text { margin: 15% 2%;  width: 75%; }
     .master-text h1{font-size:4.8rem;}
     .master-text h4{font-size:2.4rem;line-height: 3.6rem;margin:20px 0 0;}
     .master-text-sub {
        width: 80%;
    }
 
     .person {
        position: absolute;
        bottom: 2%;
        left:2%;
        width: 20%;
    }
    header#Visual { height: 90vh; }
    .logo { width: 300px; margin: 50px; }

 }

 @media (max-width: 1199px) {
     /* RWD 整體寬度調整*/
     div.content { width: 96%; margin: 0 auto;}
     div.content_btn { width: 96%; margin: 0 auto}
     /* 主視覺 */
   
   
    
    /* PageA 內容設定*/
    section#PageA .box h3 { font-size: 2.4rem; }
    section#PageA .box { margin:100px auto; }
    section#PageA .box .photo { right: 5%; top:45px; width: 55%; }
    .pageA_lesson_all .lesson { height: 1%; width:22%;margin: 2% 2% 2%  0; }
    .pageA_lesson_all .lesson .lesson_name { height: 150px; }
    .pageA_lesson_all.second {
    justify-content: flex-start;
    }










     /* PageB 內容設定*/
     .pageB_btn_all {display: block;margin: 15px 0 0;}
     .pageB_btn { height: 60px; font-size: 1.4rem; }
     .pageB_btn p { line-height: 60px; }

    /* PageC 內容設定*/
    .pageC_lesson_all .lesson {
    
        width: 50%;
        height: 180px;
        margin: 0 20px;
    }
    section#PageC::before { top: -100px; left: 5px; width: 250px; height: 400px;  }
    section#PageC::after {  right: 5px; bottom: -200px; width: 250px; height: 400px;z-index: 1;display: none; }
 }

 @media (max-width:991px) {
     /* RWD 整體寬度調整*/
     div.content { width:100%;padding: 50px 15px;}
     div.content_btn{width: 100%;margin: 0 auto;}
      /* 大標 */

     /* 主視覺 */
     .master-text h1{font-size:3.4rem;}
     .master-text h4{font-size:1.8rem;line-height: 2.6rem;margin:20px 0 0;}
     .master-text-sub { width: 100%; }
     .linkedin {  bottom: -20%; left: 5%; }
     .linkedin h5{ font-size: 1.6rem; }
    header#Visual { height: 80vh; }


     /* PageB 內容設定*/
     .dot_bg1{width: 100%;height: 300px;top:-25px;right:-100px;z-index: 0;}
     .features12{width: 100%;}



 }

 @media (max-width: 768px) {
      /* RWD 整體寬度調整*/
      h2 { font-size: 1.8rem; }
     /* 主視覺 */
     header#Visual { height: 80vh; }
    .master-text{ width: 90%; margin: 150px 5%;}
    .master-text h1{font-size:3.4rem;}
    .master-text h4{font-size:1.8rem;line-height: 2.6rem;margin:20px 0 0;}
    .master-text-sub { width: 100%; }
    .logo { width: 300px; margin: 5%; }
    .person {  bottom: -10%; left: 2%; width: 30%; }
  
    .page_title {text-align: center;margin: 0 auto;}
    .page_title > h2{ font-size: 2rem;}
    .page_title > h5{ font-size: 1.2rem;margin: 20px 0;}

    .cloud_1{width: 12%;top:11%;left: 5%;}
    .cloud_2{width: 10%;top:32%;right: 5%;}
    .cloud_3{width: 5%;top:10%;right: 20%;}

    .master-text > h5 { font-size: 1.4rem; line-height: 1.8rem;margin: 10px 0 0; }
    .master-text-sub .sale img,.master-text-sub .linkedin img {width:25px;margin-right: 5px;}
    .master-text-sub h2{font-size: 1.6rem;line-height: 2.2rem;color:#000;}

    .master-text-sub .rocket { width: 16%;right: 0px; top: -54px; }

     /* PageA 內容設定*/
     section#PageA .box { padding: 20px; }
     section#PageA .box h3 { font-size: 1.8rem; }
     section#PageA .box { margin:200px auto 100px; }
     section#PageA .box .photo { right: 0%; top: -192px; width:60%; }
    .pageA_lesson_all .lesson { height: 1%; width: 46%; }
    .pageA_lesson_all .lesson .lesson_name { height: 150px; }
    .pageA_lesson_all.second { justify-content:space-between; }
    
    .discount_box { display: flex; align-items: center; flex-direction: column; }
    .discount_box .discount_text { width: 100%; }
    .discount_box .discount_text ul li { font-size: 1.2rem; line-height: 2rem; margin: 20px 0; text-align: justify; }
    .discount_box .discount_photo { width: 88%; }





     /* PageB 內容設定*/
     section#PageB a { padding: 15px; }
     section#PageB .box { margin: 40px auto; }
    .pageB_lesson_title {  flex-direction: column; padding: 15px; }
    .pageB_lesson_title .pageB_lesson_text { width: 100%; }
    .pageB_lesson_title .pageB_lesson_icon { width: 20%;margin: 10px auto; }
    .pageB_lesson_title .pageB_lesson_text p { font-size: 1rem; }
    .pageB_lesson_title .pageB_lesson_text h4 { font-size: 1.4rem; margin-left: 0px; }
    .pageB_lesson_title .pageB_lesson_text h5 {font-size: 1.2rem; }

    .m_path{position: relative;}
    .path_line { width: 4px; height:98%; margin: 0; display: inline-block; position:absolute; left:24px; top: 2%; }
    .path_line::before { width: 30px; height: 50px; left: -35px; top: 0; }
    .path_line::after { width: 20px; height: 35px; right: auto; top: auto; left: -29px; bottom: 0; }

    
    .path_line_content { display: inline-block; margin: 20px 0 20px 45px; width: 90%; justify-content: flex-start; }
    .person_content::before,.lesson_content::before,.lesson_exam::before{left:-19px;top:15px;width: 18px;height:18px;
    }

    .path_line_content > *::after{content: "";transform: translate(-50%,-50%);left:-5px;top:10px;position:absolute ;z-index: 99;width: 20px;height: 20px;transform: rotate(45deg);}
    .path_line_content .person_content { width: 95%; margin: 10px 0; text-align: left; display: inline-block; }
    .path_line_content .lesson_content { width:95%; margin: 10px 0; text-align: left; display: inline-block; }
    .path_line_content .lesson_exam { width:95%; margin: 10px 0; text-align: left; display: inline-block; }


     /* PageC 內容設定*/
    section#PageC::before { top: -100px; left: 20px; width: 250px; height: 400px;  }
    section#PageC::after {  right: 0; bottom: 0px; width: 250px; height: 400px;display: none; }
    .pageC_lesson_all { display: flex; align-items: center; flex-direction: column; justify-content: flex-start; border-bottom: 2px dashed #888; padding: 30px 0; }
    .pageC_lesson_all .arrow{width:30px;height: 30px;background: url("../images/arrow-m.png") no-repeat;background-size: contain;margin: 10px 0 5px;}
    .pageC_lesson_all .lesson { width: 70%; height: auto; }




    /* BTN */
    .btn { width: 100%; margin: 0 0 100px; font-size: 1.2rem; }
    .content_btn a{display: inline-block;width: 100%;}

    
 }

 
 @media (max-width: 576px) {
     body { margin: 0;}
  
     /*RWD 整體寬度調整*/
     section p,section li,section b{margin-bottom: 0rem;font-size: .9rem;line-height: 1.4rem;}
     table tr td p{font-size: 1rem;line-height: 1.4rem;}
     table tr td a { font-size: 1rem;line-height: 1.4rem;}
     section {margin: 0; }
     section h1 { font-size: 1.3em; line-height: 0.8; }
     dl, ol, ul { padding:0 25px; }

  
 
     h3 { font-size: 1.3rem; }
     h5 { font-size: 1rem; }
     
     .title_line{border-bottom:4px solid #00D9D9;width: 30%;margin: 10px 0 0;}

      /* 主視覺 */
      header#Visual { height:100vh; }
      .master-text{ width: 90%; margin: 100px 5%;}
      .master-text h4 { font-size: 1.6rem; line-height: 2rem; margin: 10px 0 0; }
      .linkedin {  bottom: -30%; left: 5%; }
      .linkedin h5{ font-size: 1rem; }
    


      .logo { width: 300px; margin: 5%; }
      .person {  bottom: -12%; left: 2%; width:26%; }
  
     /* PageA 內容設定*/
     .pageA_btn_all {
         display: block;
         justify-content: flex-end;
         margin: 15px 0 0;
     }
     .pageA_btn{width: 100%;border-radius: 0;}
     .pageA_content.active { opacity: 1; }
     .winner_people{width: 40%;margin: 0 auto;}
     .pageA_content { position: relative; display: none; }
     .pageA_content.active { display: block; }
     .pageA_btn p { font-size: 1.1rem; }
     section#PageA .box .photo { right: 0%; top: -192px; width: 75%; }

     /* PageC 內容設定*/
     section#PageC::before { top: -100px; left: 20px; width: 200px; height: 400px;  }
    
     /* PageE 內容設定*/
     .btn { width: 100%; margin: 0 0 20px; }
 }



 @media (max-width: 320px) {
     /* 主視覺 */
     .logo{width:80%;margin: 15px;}

 }