*{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;}
h3{font-size: 1.6rem;line-height: 2.6rem;}
h5{font-size: 1.35rem;line-height: 2.3rem;}
h1, h2, h3, h4, h5, h6 {
 margin-top: 0;
 margin-bottom: 0;
 font-weight: bold;
}

a{color:#ff7b00;}
a:hover{color:#FEAC1A;}
/*bootstrapt 間距設定*/
/* .container {padding-right:10px;padding-left: 10px;} */


/* RWD 整體寬度調整*/
header div.content {position: relative; }
div.content { width: 1200px; margin: auto; clear: both;padding: 100px 0;}
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: 300;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%;}

/* 基本操作 */
.white{color:#fff;}
.blank{color:#000;}

/* 大標 */
.page_title {text-align: center;margin: 0 auto 40px;}
.page_title > h2{ font-size: 2.2rem;line-height: 3rem; font-weight: 700;color: #000;letter-spacing: 1px;}
.page_title > h5{ font-size: 1.6rem; line-height: 2.6rem; font-weight: 400;margin: 20px 0;color: #333;}
.page_title > p{ margin: 40px 0;line-height: 2.4rem;}
.page_title > .title_icon { width:100px; padding:10px 0; margin: 0 auto;}
.page_title > .title_line { width:80px;height: 8px;border-radius:15px ;background-color: #E41C1C; margin: 20px auto;}
.page_title.text_left {text-align: left;margin: 0 auto 40px;}
.page_title.text_left .title_line{margin: 20px 0;}
.top100{margin-top: 100px;}
.page_title.white h2{color: #fff}
.page_title.white .title_line{background-color: #fff;}






/* 主視覺 */
header#Visual {position: relative;background:url(../images/header_bg.jpg) ;height: 85vh;}
header#Visual > .container-fluid{width: 100%;padding: 0 5%;}
.master{display: flex;justify-content:space-around;position: relative;}
.master-text{z-index: 1;color:#fff; display: flex;flex-wrap: wrap;text-align: left;display: inline-block;
    width:50%;margin: 8% 4%;}
.master-text h1{font-size:4.8rem;font-weight: 900;color: #FFF;display: inline-block;line-height: 6rem;}
.master-text h1 span{color:#FFF9A9;}
.master-text .master-text-box{background-color: #fff;padding: 10px 15px;display: inline-block;border-radius: 15px;margin: 15px 0;}
.master-text .master-text-box h2{color: #E41C1C;}
.master-text .master-text-sub{margin: 50px 0 ;font-size: 1.4rem;line-height: 2.4rem;}
.master-photo { position: relative;transform: translate(0,-5%);}
.master-photo .photo_1 ,.master-photo .photo_2 {position: relative;}
.master-photo .photo_1 img ,.master-photo .photo_2 img {width: 100%;}
.master-photo .photo_1{ width: 80%;}
.master-photo .photo_2{ width: 85%;top:-10%;left:20%;}

.master .arrow-1,.master .arrow-2,.master .arrow-3 {position: absolute;}
.master .arrow-1 {width:10%;top:10%;left: 48%;}
.master .arrow-2 {width:6%;bottom: 30%;left: 60%;}
.master .arrow-3 {width:3%;top:5%;right:2%;}

/* @keyframes move_top_1 {
    0%{transform: translateY(10px);}
    50%{transform: translateY(0px);}
    100%{transform: translateY(0px);}
}
@keyframes move_top_2 {
    0%{transform: translateY(10px);}
    20%{transform: translateY(0px);}
    100%{transform: translateY(0px);}
}
@keyframes move_top_3 {
    0%{transform: translateY(10px);}
    40%{transform: translateY(0px);}
    100%{transform: translateY(0px);}
} */
/* PageA 內容設定*/
/* section#PageA{ position: relative; background:url(../images/bg.jpg);
    background-repeat:repeat;
    background-size:100%;
} */

section#PageA{ position: relative; background-color:#f4f7f8; }
section#PageA .content .box{box-shadow: 0 0 10px 4px rgb(31 66 135 / 3%);min-height: 380px;position: relative;padding:15px;border-radius: 15px;margin: 20px 0;}
section#PageA .content .box > .box_icon{width: 80px;margin: 20px 0;}
section#PageA .content .box > .box_text h5{margin: 10px 0;line-height: 2rem; min-height: 60px; }
section#PageA .content .box > .box_text > p{text-align: justify;}

section#PageA .chart_content{margin:100px 0 0px;}
section#PageA .chart_content .chart_content_text{margin:40px 0 0px;}
section#PageA .chart_content .chart_content_text >.chart{display: flex;align-items: center;justify-content: space-between;}
section#PageA .chart_content .chart_content_text >.chart .photo{width: 90%;margin: 20px 0;}
section#PageA .chart_content .chart_content_text >.chart .photo img{width: 100%;}
section#PageA .chart_content .chart_content_text >.chart .photo p{font-size: .9rem;color: #555;}

section#PageA .content .pageA_box:nth-child(1) .box{background:url(../images/pageA_content_num1.jpg) right top no-repeat;background-color: #fff;}
section#PageA .content .pageA_box:nth-child(2) .box{background:url(../images/pageA_content_num2.jpg) right top no-repeat;background-color: #fff;}
section#PageA .content .pageA_box:nth-child(3) .box{background:url(../images/pageA_content_num3.jpg) right top no-repeat;background-color: #fff;}
section#PageA .content .pageA_box:nth-child(4) .box{background:url(../images/pageA_content_num4.jpg) right top no-repeat;background-color: #fff;}
section#PageA .content .pageA_box:nth-child(5) .box{background:url(../images/pageA_content_num5.jpg) right top no-repeat;background-color: #fff;}

.count_all {display: flex;justify-content: space-around;margin: 40px 0 20px;}
.count_all .count{text-align: center;}
.count_all .count h2{font-size: 5rem;color: #ffffff;display: inline-block;margin-right: 5px;margin-top:-15px ;}
.count_all .count h5{color: #fff;font-size: 1.3rem;}
.count_all .count span{font-size: 2rem;font-weight: 800;color: #fff;}
.count_all .count p{margin: 5px;font-weight: 600;}


.cir{  padding:10px;border-radius: 100%;height:200px;width: 200px;display: flex;align-items: center;justify-content: center;flex-direction: column; background-color: rgb(228, 27, 27);
}


















/* PageB 內容設定*/
section#PageB{ position: relative;; background:url(../images/pageB_bg.jpg) repeat-y; background-size: 100%;}
section#PageB .content .pageB_content .row{margin:150px -15px;}
section#PageB .content .pageB_content .stu{width: 100%;position: relative;}
section#PageB .content .pageB_content .stu .stu_name h2 {font-size:2.4rem;font-weight:500;}
section#PageB .content .pageB_content .stu .stu_name h2 span{font-size: 1.2rem;font-weight:300;margin-left: 10px;}
section#PageB .content .pageB_content .stu .stu_name .line{height: 5px;width: 110px;border-radius: 10px;background-color: #E41C1C;margin: 10px 0 20px;}
section#PageB .content .pageB_content .stu .stu_text h3 {font-size:1.8rem;margin-bottom:10px;}
section#PageB .content .pageB_content .stu .stu_text p {margin: 8px 0;}
.stu_btn{background-color: #cc0000;margin: 20px 0;display: inline-block;border-radius: 10px;transition:all .3s linear;}
.stu_btn:hover{transform: translateY(5px);background-color: #ff0000;}
.stu_btn > a{color: #fff;font-size: 1.2rem;display: block;padding: 8px 10px;}
.stu_btn:hover > a{color: #fff;font-size: 1.2rem;display: block;padding: 8px 10px;}
.stu_btn.center{margin: 20px auto; display: table;}


section#PageB .content .pageB_content .stu_photo {width: 100%;}
section#PageB .content .pageB_content .stu_photo img{width: 100%;}


/* PageC 內容設定*/
section#PageC{ position: relative; background:url(../images/header_bg.jpg);
    background-repeat:repeat;
    background-size:100%;
 
}



.pageC_content {margin:0px 0; }
.pageC_content .row{margin:80px 0; position: relative;}
.pageC_content p  {margin: 10px 0;text-align: left;}
.pageC_content .photo{width: 100%;}
.pageC_content .photo img{width: 100%;}

.pageC_content ul.lesson {margin: 20px 0;}
.pageC_content ul.lesson li {margin: 20px 0;position: relative;}
.pageC_content ul.lesson li p {margin: 0;}

.pageC_content ul.lesson li:before {
    content: "\f105"; /* FontAwesome Unicode */
    font-family: FontAwesome;
    font-weight: 900;
    font-size: 1.6rem;
    display: inline-block;
    margin-left: -1.2em; /* same as padding-left set on li */
    /* same as padding-left set on li */
    position: absolute;
    top: 0.1em;
    color: #0B81D1;
  }

  section#PageC {padding:40px 0;}
  section#PageC .pageC_content .stu-flex{flex-wrap:wrap;width:90%;margin: 0 auto;justify-content: flex-end;}
  section#PageC .pageC_content .stu-flex-2{flex-wrap:wrap;width:90%;margin: 0 auto;}
  section#PageC .pageC_content .box{box-shadow: 0 0 15px 4px rgb(31 66 135 / 10%);text-align: left;position: relative;border-radius: 15px;background-color: #fff;padding: 20px;display: flex;width: 30%;margin: 15px;}
  section#PageC .pageC_content .box .photo{ margin: 10px 10px 10px 0;width: 12%;}
  section#PageC .pageC_content .box .photo img{ width: 100%;}
  section#PageC .pageC_content .box .text{width:85%;text-align: justify;}







/* PageD 內容設定*/
section#PageD{ position: relative;background-color: #EDEEEF; }
section#PageD .content .pageD_content .box{box-shadow: 0 0 15px 4px rgb(31 66 135 / 10%);text-align: left;position: relative;border-radius: 15px;background-color: #fff;margin:50px 15px 0; min-height: 225px;overflow: hidden; }
section#PageD .content .pageD_content .box .top_bg{background-color: #000;text-align: center;color:#fff;padding: 15px;}
section#PageD .content .pageD_content .box .top_bg img{width: 40%;}
section#PageD .content .pageD_content .box .top_bg h2{font-size: 4rem;}
section#PageD .content .pageD_content .box .text{padding: 15px 15px 20px;text-align: justify;}



/* 左右兩邊箭頭 */
.stu-content .owl-nav .owl-prev,.stu-content .owl-nav .owl-next{
    position: absolute;
     opacity:1;
    -webkit-transition: all 0.4s ease-out;
    transition: all 0.4s ease-out;
    background: #ff7b00 !important;
    border-radius: 100% !important;
    width: 40px;
    height: 40px;
    display: block;
    z-index: 1000;
    cursor: pointer;
    transition: all .3s ease-in;
}
/* owl修正 */
.stu-content .owl-nav .owl-prev:hover,.stu-content .owl-nav .owl-next:hover{ background: #FEAC1A !important;top: 52%;  }
.stu-content .owl-nav .owl-prev { left: -50px; top: 50%; }
.stu-content .owl-nav .owl-next { right:-50px; top: 50%; }
.stu-content .owl-nav .owl-prev span ,.stu-content .owl-nav .owl-next span{ font-size: 3rem; color: #fff; position: absolute;transform: translate(-50%,-50%);top:35%;}
.stu-content .owl-nav .owl-prev:focus { outline: 0; }

ul.pageD_ul li{ margin: 20px 0;position: relative; }
ul.pageD_ul li:before { content: "\2022";font-weight: 900; font-size: 1.6rem; display: inline-block; margin-left: -1.2em; /* same as padding-left set on li */ /* same as padding-left set on li */ position: absolute; top: 0.1em; color: #0B81D1; }
.pageD_content .row{margin:0px; position: relative;}




/* PageE 內容設定*/
section#PageE{ position: relative;; background:url(../images/pageB_bg.jpg) repeat-y; background-size: 100%;}
section#PageE ul.lesson-step{margin:100px 0  0 15px;}
section#PageE ul.lesson-step li{height:120px;border-left:2px solid black;padding:0 0 0 30px;position: relative;}
section#PageE ul.lesson-step li::before{content: ""; width: 25px ; height: 25px ; border-radius: 100%; background-color: #E41C1C; border: 2px solid black; position: absolute; left: -2.5%; top:0;}
section#PageE ul.lesson-step li:last-child{border-left:0px solid black;}
section#PageE ul.lesson-step li .step-icon{background-color: black;display: inline-block;padding:2px 10px;color: #fff;transform: translateY(-5px);}
section#PageE ul.lesson-step li .step-text span{font-size: .9rem;font-weight: 500;}
section#PageE .photo{width: 100%;}
section#PageE .photo img{width: 100%;}

/* PageF 內容設定*/
section#PageBtn { position: relative; background: url(../images/header_bg.jpg); background-repeat: repeat; background-size: 100%;overflow: hidden; }
section#PageBtn .box { position: relative;border-radius: 15px;background-color: #fff;margin:20px 0;padding: 15px;box-shadow: 0 0 15px 4px rgb(31 66 135 / 10%);}
section#PageBtn .box i{ margin-right: 10px;color:#E41C1C;}
section#PageBtn .box h5 { font-weight: 500;}
section#PageBtn .box h5 span{ color:#E41C1C;}
section#PageBtn .photo{width: 100%;}
section#PageBtn .photo > img{width: 100%;}
section#PageBtn div.content:last-child{padding: 0;}

/* BTN */
#btn_all a {width: 80%; margin: 0 auto 50px; background: #FFEEA6;  padding: 20px 5px; border: none; border-radius:10px; font-size: 1.4rem; font-weight: 500; transition: all .4s ease;display: block;text-align: center;color: #000;}
#btn_all a:hover { background: #ffdc41;transform: translateY(5px);}

/* RWD Setting */
@media (max-width: 1600px) {
     /* 主視覺 */   
    header#Visual { height: 70vh; }
    .master{justify-content:center;}
    .master-text { margin:4% 0%;  width:70%; }
    .master-photo { width: 25%; transform: translate(0,-2%); }
}


 @media (max-width: 1440px) {
    /* RWD 整體寬度調整*/
    header#Visual { height: auto; }
     div.content { width: 1200px; margin: 0 auto;}
     .master-text { margin:4% 0% 0;  width:60%; }
     .master-photo { width: 30%; }
     .master-text h1 { font-size: 3.8rem; line-height: 4.6rem; }
     .master-text .master-text-box { padding: 5px 10px ; }
    .master-text .master-text-box h2{
      font-size: 2.6rem;
    }
    /* owl修正 */
    .stu-content {margin: 40px 0;width: 94%;margin: 0 auto;}
    
    .master .arrow-1 {width:10%;top:10%;left: 48%;}
    .master .arrow-2 {width:6%;bottom: 16%;left: 60%;}
    .master .arrow-3 {width:3%;top:5%;right:2%;}

 }

 @media (max-width: 1199px) {
     /* RWD 整體寬度調整*/
     div.content { width: 96%; margin: 0 auto;}
          
     /* 主視覺 */
     header#Visual { height: auto; }
     header#Visual {background: url(../images/header_bg.jpg); background-size: cover; }
    .master{flex-direction: column;  margin: 2% auto;width: 100%;}
    .master-text {width: 90%; margin: 0 auto;}
    .master-text .master-text-sub { margin: 10px 0; }
    .master-photo { width: 60%; top:0%;left:12%; }
    .master-photo .photo_2 { width: 82%; top:-10%;left:50%;z-index:-99;}
   
    .master .arrow-1 {width:10%;top:8%;left: 80%;}
    .master .arrow-2 {width:5%;bottom: 95%;left:76%;}
    .master .arrow-3 {width:2%;top:5%;right:2%;}


    /* PageA 內容設定*/

     /* PageB 內容設定*/

    /* PageC 內容設定*/
    section#PageC { background-size: cover; }
    .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; }
    section#PageC .pageC_content .stu-flex { width: 96%; }
    section#PageC .pageC_content .stu-flex-2 { width: 96%; }

    /* PageBtn 內容設定*/
    section#PageBtn { background-size: cover; }

 }

 @media (max-width:991px) {
     /* RWD 整體寬度調整*/
     div.content { width:100%;padding: 50px 15px;}
    /* 大標 */
    .page_title > h2 { font-size: 2.2rem; }
     /* 主視覺 */
     .master .arrow-1 {width:12%;top:8%;left: 80%;}
     .master .arrow-2 {width:7%;bottom: 95%;left:76%;}
     .master .arrow-3 {width:5%;top:5%;right:2%;}



    /* PageA 內容設定*/
    section#PageA {
        position: relative;
        background: url(../images/bg.jpg) left 20% ;
        background-repeat: repeat;
        background-size: 360%;
    }
    /* PageB 內容設定*/

     section#PageB .content .pageB_content .box .box_bg { height: 300px; }
     .pageB_content .box_item:nth-child(1) .box .box_bg{background: url(../images/pageB_content_bg1.png) center -80px;background-size: cover;}
     .pageB_content .box_item:nth-child(2) .box .box_bg{background: url(../images/pageB_content_bg2.png)  center -100px;;background-size: cover;}
     .pageB_content .box_item:nth-child(3) .box .box_bg{background: url(../images/pageB_content_bg3.png)  center -20px;;background-size: cover;}



    /* PageC 內容設定*/
   
    section#PageC .pageC_content .box{width:30%;margin: 20px auto;display: block;padding: 15px;}
    section#PageC .pageC_content .stu-flex{width:100%;margin: 0 auto;justify-content:space-between;}
    section#PageC .pageC_content .stu-flex-2{width:100%;margin: 0 auto;justify-content:space-between;}
    section#PageC .pageC_content .box .photo{ margin: 10px 10px 10px 0;width: 30%;}
    section#PageC .pageC_content .box .photo img{ width: 100%;}
    section#PageC .pageC_content .box .text{width:100%;}
       

 }

 @media (max-width: 767px) {
      /* RWD 整體寬度調整*/
    
    /* 主視覺 */
    .master{margin: 2% auto;width: 96%;}
    .master-text {width: 100%; margin: 0 0;}
    .master-text-sub { margin: 20px 0 0; font-size: 1.2rem; line-height: 2.2rem; width:100%; }

    .master-photo { width:88%; margin: 0 auto;  left: 0%; top:5%;   }
    .master-photo .photo_2 { width: 80%; transform: translate(0%,0%); position: absolute; top:60%; left:20%; }
    .master-photo { transform: translate(0px,-15%); }
     /* PageA 內容設定*/
     section#PageA .content .box > .box_text h3 { margin: 10px 0; }
     section#PageA .chart_content >.chart{flex-direction: column;}
     section#PageA .chart_content >.chart .photo{width: 100%;}
     section#PageA .chart_content > p { margin: 20px 0;text-align: justify; }

     /* PageB 內容設定*/
     section#PageB { position: relative; background: url(../images/pageB_bg.jpg) repeat-y  200px; background-size: inherit; }
 

     section#PageB .content .pageB_content .box .box_bg { height: 500px; }
     section#PageB .content .pageB_content .box { margin:20px 0; }
     section#PageB .content .pageB_content { margin: 0px; }
     section#PageB .content .pageB_content .stu .stu_name h2 { font-size: 1.9rem; }
     section#PageB .content .pageB_content .stu .stu_name .line { width: 80px;}
     section#PageB .content .pageB_content .stu .stu_text h3 { font-size: 1.4rem;line-height: 2.2rem; }
     section#PageB .content .pageB_content .stu { margin: 40px 0 0; }
     section#PageB .content .pageB_content .stu_photo { width: 80%; }
     section#PageB .content .pageB_content .row { margin: 80px -15px;   }
     section#PageB .content .pageB_content .row:first-child {
        margin: 0px -15px;}


        
     /* PageC 內容設定*/
     section#PageE ul.lesson-step li::before { width: 20px; height: 20px; left: -10px; top: 0; }
     .modal-header.lesson .lesson_title .hour { width: 90px; margin: 5px 10px 5px 10px; }
     section#PageC .pageC_content .box { width: 90%;margin: 0 auto; }
     section#PageC .pageC_content .box .photo{ width: 20%;margin: 0 auto;}
     section#PageE ul.lesson-step { margin: 100px 0 0 30px; }
    
     /* PageD 內容設定*/
     section#PageD .content .pageD_content .box{min-height: auto;height: auto;width: 100%;margin: 15px auto;}
    .stu-content-all{width: 100%;margin: 0 auto;}
    
    /* PageE 內容設定*/
    section#PageE .photo{width: 70%;margin:0 auto;}

    /* PageE 內容設定*/
    section#PageBtn .photo { width: 70%;margin:20px auto;}
 }

 
 @media (max-width: 576px) {
     body { margin: 0;}
  
     /*RWD 整體寬度調整*/
    html{font-size: 14px;}

     section {margin: 0; }
     section h1 { font-size: 1.3em; line-height: 0.8; }
     dl, ol, ul { padding:0 25px; }
  
     .page_title > h2 { font-size:2rem; line-height: 3rem;letter-spacing: 0; }
     .page_title > h5 { font-size: 1.4rem; line-height: 2.4rem; font-weight: 400; margin: 20px 0; color: #333; }

      /* 主視覺 */
     header#Visual {font-size: 1rem;line-height: 1.8rem;height: 115vh; } 
     .master-text .master-text-box { padding: 8px 10px; margin: 10px 0; }
     .master-text .master-text-box h2{ font-size: 1.4rem; }
     .master-text h1 { font-size: 2.7rem; line-height: 3.6rem; }
     .master-text .master-text-sub { font-size: 1.2rem; line-height: 2rem; }



     /* PageA 內容設定*/
     section#PageA .content .box {  width: 100%;min-height: auto;padding: 20px;}



      /* PageB 內容設定*/
     .page_title > p { margin: 10px 0; font-size: 1.1rem;line-height: 2.4rem; }
     .table.lesson_table td:nth-child(odd) { width: 70px; text-align: center; }
    section#PageB .content .pageB_content .box .box_bg { height:300px; }



     /* PageC 內容設定*/
     section#PageC::before { top: -100px; left: 20px; width: 200px; height: 400px;  }
     .pageC_content .row {
        margin: 50px 0;
        position: relative;
    }
    .teacher_title h2 {
        background: linear-gradient(to right, #0B78D5 0%, #08BEB3 40%);
        background: -webkit-linear-gradient(to right, #0B78D5 0%, #08BEB3 40%);
        background-clip: text;
        -webkit-background-clip: text;
        color: transparent;
        font-weight: 700;
        font-size:2.2rem;
    }
    .pageC_content p { text-align: left; }
     /* PageD內容設定*/
    .pageD_content .row { margin: 50px 0; position: relative; }

    .page3_text h3 {margin-left: 0;font-size: 1.5rem; }


     /* PageBtn 內容設定*/






     /* 跳窗設定 */
     .modal-lg { max-width:100%; padding-right:0px;}
     .stu-content .owl-nav .owl-prev,.stu-content .owl-nav .owl-next{
     display: none;
    }
 }



 @media (max-width: 320px) {
     /* 主視覺 */
     /* .logo{width:80%;margin: 15px;} */

 }
