*{font-family: '微軟正黑體', 'Microsoft Jhenghei', 'Arial', sans-serif;box-sizing: border-box;}
body{overflow-x:hidden;scroll-behavior: smooth;background-color: #fff;background: url(../images/bg.jpg) repeat;background-attachment: fixed;} 
 
h1, h2, h3, h4, h5, h6 { clear: both;line-height: 1.5;margin-bottom: 0;}
a{ text-decoration: none;color: #836c49;transition: all .2s linear; }
a:hover{ text-decoration: none;color: #7a766c; }
p{font-size: 1.1rem;line-height: 1.5;}

button{outline:none;}
button:focus{outline:none;}
br{line-height: 150%; }
hr{margin: 20px 0 0;}


/* RWD 整體寬度調整*/
div.content { width: 1200px; margin: auto; clear: both; position: relative;}
header, section { width: 100%; margin: 0; clear: both; padding: 0;}
section p,section li{ margin-bottom: 0rem;font-size: 1.1rem;font-weight: 500;color: #000; line-height:1.8;}
section { clear: both; }



/* 背景 */
 canvas{ display: block; vertical-align: bottom;width: 100%;height: 100%;position: fixed;z-index: 0; } /* ---- particles.js container ---- */ #particles-js{ position:absolute; width: 100%; height: 100%; background-color: #b6192300; background-image: url(""); background-repeat: no-repeat; background-size: cover; background-position: 50% 50%;z-index: -1; } /* ---- stats.js ---- */ .count-particles{ background: #000022; position: absolute; top: 48px; left: 0; width: 80px; color: #13E8E9; font-size: .8em; text-align: left; text-indent: 4px; line-height: 14px; padding-bottom: 2px; font-family: Helvetica, Arial, sans-serif; font-weight: bold; } .js-count-particles{ font-size: 1.1em; } #stats, .count-particles{ -webkit-user-select: none; margin-top: 5px; margin-left: 5px; } #stats{ border-radius: 3px 3px 0 0; overflow: hidden; } .count-particles{ border-radius: 0 0 3px 3px; }








/* 共用 */
.master-title {margin: 40px auto;text-align: center;}
.master-title .icon {width: 50px;margin: 0 auto 5px;}
.master-title h2 {font-weight: 800;font-size: 2.5rem;}
.master-title h2 span{color: #CC3737;}
.master-title p {color: #333;font-size: 1.2rem;}
.master-title.white h2 {color: #fff;}


.master-title .line {width: 150px;height: 6px;margin: 10px auto 0;border-radius: 20px;background-color: #CC3737;}





.container { max-width: 75%; }

/* 主視覺 */
header#Visual { position: relative;}
header#Visual .container{display: block;padding:0;max-width: 90%;}
header#Visual .container .master_title {text-align: right ;z-index: 999;transform: translateY(50px);position: relative;z-index: 99;}
header#Visual .container .master_title h1{font-weight: 800;font-size: 4rem;color: #000;border: 2px solid #000;display: inline-block;padding: 5px 10px;background-color: #fff;margin: 0;}
header#Visual .container .master_title h1:first-child {border-bottom: none;}
header#Visual .container .master_title h1 span {color: #B9232F;}
header#Visual  .logo-path {width: 50%;display: flex;align-items: center;justify-content: center;}
header#Visual  .logo-path .logo{width: 180px;margin: 0 30px;} 
header#Visual  .logo-path .arrow{width: 80px;} 



/* header#Visual .master_bg .bg_color.active  .logo-path {opacity: 1;} */





header#Visual .master_bg{background: url('../images/master_bg.jpg') center / cover;width: 100%;height:800px;position: relative;overflow: hidden;}
header#Visual .master_bg .bg_color {background-color: rgba(0, 0, 0, 0.7);position: absolute;width: 100%;height: 100%;transition: all .5s linear;display: flex;justify-content: center;align-items: center;color: #fff;flex-direction: column;line-height:1.8;padding: 0 15px;}
/* header#Visual .master_bg .bg_color.active{background-color: rgba(0, 0, 0, 0.7);}
header#Visual .master_bg .bg_color.active p{opacity: 1;} */
header#Visual .master_bg .bg_color p{text-align: center;width: 50%;margin: 1% 0 0;line-height: 2;text-align: left;font-weight: 600;font-size: 1.4rem;}
header#Visual .master_bg .bg_color p span {color: #ff3a3a;}



.modal-body .photo-flex {display: flex;justify-content: space-between;}
.modal-body .photo-flex img{width: 48%;}
.modal-lg {max-width: 80%;}






section#feature{position: relative;padding: 100px 15px;}
section#feature .box-g {display: flex;justify-content: space-between;margin: 100px 0 60px;flex-wrap: wrap;position: relative;}
section#feature .box-g .box{width: 33.33%;padding:60px 30px;background-size: cover;background-position: center;min-height:350px;}
section#feature .box-g .box h5{text-align: center;font-size: 1.4rem;padding: 5px 0;font-weight: 600;}
section#feature .box-g .box .icon {width: 80px;margin: 0 auto 5px;}
section#feature .box-g .text p{margin: 0;}

section#feature .box-g .box .line {width: 100%;height: 2px;border-bottom: 1px solid #000;margin:10px 0;}
section#feature .box-g .box .text p span.modal-link {color: #1b2acf;text-decoration: underline;display: inline-block;cursor: pointer;}
section#feature .box-g .box .text p span.modal-link:hover{color: #5283ff;text-decoration: none;}


section#lesson {position: relative;z-index: 99;padding: 100px 0 ;}

.lesson-bg {position: absolute;background-color: rgba(186, 36, 36, 0.9);width: 100%;height: 100%;top: 0;left: 0;}
section#lesson .lesson-box {background: url(../images/lesson-box-bg.jpg);width: 100%;background-size:100px;padding: 30px;}
section#lesson .box-g {position: relative;margin:150px 0 ;}
section#lesson .box-g:last-child {margin:150px 0 0 ;}
section#lesson .box-g:first-child {margin:50px 0 ;}
section#lesson .box-g .logo {width: 150px;position: absolute;right: 0;top: -100px;}
section#lesson .box-g .logo img{width:100%;}
section#lesson .box-g .title {display: inline-block;background-color: #000;color: #fff;padding: 5px 30px;border-radius: 15px 15px 0 0 ;font-weight: 600;}
section#lesson .box-g .title h3 {font-weight: 800;}
section#lesson .lesson-box .con-flex {display: flex;justify-content: space-between;margin: 30PX 0 0;}
section#lesson .lesson-box .con-flex .photo {width: 48%;}
section#lesson .lesson-box .con-flex .photo img {width: 100%;}
section#lesson .lesson-box .con-flex .text {width: 48%;}
section#lesson .lesson-box .con-flex .text .item {margin: 0 0 30px;}
section#lesson .lesson-box .con-flex .text .item h5 {border-top:1px solid #000 ;border-right:1px solid #000 ;border-bottom: 1px solid #000;border-left:10px solid #000 ;padding: 5px 15px;display: inline-block;font-weight: 600;margin: 0 0 20px; }
section#lesson .lesson-box p span {color: #CC3737;font-weight: 600;}






section#exam {position: relative;padding: 100px 0;background-color: #212121;position: relative;z-index: 99;}
section#exam .table-flex {margin: 60px 0 0;}
 section#exam .table-flex .col-tr-flex {display: flex;color: #fff;margin: 0 auto;}
 section#exam .table-flex .col-tr-flex .col-td {padding: 10px 15px;display: flex;align-items: center;border: 1px solid #fff;}
 section#exam .table-flex .col-tr-flex .col-td:nth-child(1){width: 16%;background-color: #555C60;text-align: center;font-weight: 800;font-size: 1.2rem;justify-content: center;font-weight: 800;font-size: 1.2rem;}
 section#exam .table-flex .col-tr-flex .col-td:nth-child(2), section#exam .table-flex .col-tr-flex .col-td:nth-child(3) {width: 42%;}
 section#exam .table-flex .col-tr-flex .col-td.title {background-color: #CC3737;font-weight: 800;font-size: 1.2rem;}




 .modal-header h4 {font-weight: 800;}









/* btn 內容設定 */
section#btn{position: relative;padding: 0 0 100px;background-color: #212121;position: relative;z-index: 99;}
section#btn .page_btn{background: #fff;width: 92%;border-radius:10px ;transition: all .3s ease-in;display: flex;align-items: center;justify-content: center; z-index: 999;position: relative;padding:20px 15px;}
section#btn .page_btn p{color: #000;text-align: center;font-size: 1.4rem;font-weight: 600;}
section#btn .page_btn p i{color: #CC3737;}
section#btn .page_btn:hover{background-color: #CC3737;}
section#btn .page_btn:hover p {color: #fff;}
section#btn .page_btn:hover p i {color: #fff;}

/* RWD Setting */


    @media (max-width: 1440px) {
      
         /* PageA 內容設定*/

         
         
         /* PageB 內容設定*/
       
        /* PageC 內容設定*/


     }




    @media (max-width: 1199px) {
        /* RWD 整體寬度調整*/
        div.content { width: 1000px; margin: 0 auto;}
        section p { font-size: 1rem;}
        .container { max-width: 96%; }
        header#Visual .master_bg .bg_color p { width: 80%; }
        section#btn .page_btn { width:96%; }
        header#Visual .container .logo-path .logo { width:400px; }
        header#Visual .container .master_title h1 { font-size: 3rem; }
        header#Visual .master_bg { height: 600px; }





    }

    @media (max-width:991px) {
 
   










    }
    @media (max-width: 767px) {
        h2 { font-size: 1.8rem; }
        h3 { font-size: 1.6rem; }
        h4 { font-size: 1.3rem; }
        h5 { font-size: 1.1rem; }

        .modal-lg { max-width: 100%; }
        .container { max-width: 96%; }
        .master-title h2 { font-size: 1.8rem; }

        header#Visual .container { max-width: 96%; }
        header#Visual .container .master_title {text-align: left ;margin: 50px 0 0;}
        header#Visual .container .master_title h1 { font-size: 1.5rem; }
        header#Visual .master_bg { height: 650px; }
        header#Visual .master_bg .bg_color p { width: 98%; line-height: 1.8; font-size: 1.15rem; }
        header#Visual  .logo-path { width: 80%; }
            header#Visual .logo-path .logo { width: 120px; margin:50px 10px; }

            header#Visual .master_bg .bg_color {
             
          
                padding: 50px 15px;
            }


        section#feature .box-g .box{width: 33.33%;padding:60px 30px;background-size: cover;background-position: center;min-height:350px;}
        section#feature .box-g .box:nth-child(odd) {display: none;}

        section#feature .box-g .box { width: 100%; padding: 0; min-height: auto; }
        section#feature .box-g { margin: 60px 0; }

        .modal-body .photo-flex { flex-direction: column;align-items: center; }
        .modal-body .photo-flex img { width: 98%; margin: 10px 0;}

        section#lesson .lesson-box .con-flex {  margin:  0;flex-direction: column; }

        section#lesson .lesson-box .con-flex .photo { width:100%;margin: 30px 0; }
        section#lesson .lesson-box { padding: 15px; }
        section#lesson .lesson-box .con-flex .text { width:100%; }

        section#lesson .box-g .title { padding: 5px 15px; }
        section#lesson .box-g .title h3 {font-size: 1.3rem;}

        section#lesson .box-g .logo { width: 100px; right: auto; left: 0; top: -110px; }


        /* section#exam .table-flex {overflow-x: auto;   position: relative;}
        section#exam .table-flex .col-tr-flex {  display: inline-flex;
           } */
        section#exam .table-flex .col-tr-flex .col-td:nth-child(1){width: 150px;}
        section#exam .table-flex .col-tr-flex .col-td:nth-child(2), section#exam .table-flex .col-tr-flex .col-td:nth-child(3) {width: 400px;}

       
 




    }

    @media (max-width: 575px) {
        h2 {font-size: 1.4rem;}
        .box .line { margin: 10px 0; }
        .title_bg { margin: 20px auto; }
        section#PageA .container { max-width: 100%; }
        section#PageA #job-content .box img { margin: 40px 0 10px; }

        section#PageB {  padding: 0; }
        section#PageB .container { max-width: 100%; padding: 0 15px;}
        section#PageC .container { max-width: 100%; padding: 0 15px; }

        /* 主視覺 */
        header#Visual { background-size: contain; background-color:transparent;padding: 0px 0 20px; }

        section#PageA { padding: 0px 0; }
        #learn-content .box ul {
            padding: 0 0 40px 25px;
        }

        #learn-content .box.predict .title {
            width: 100%;
            margin-right: 20px;
        }







        section#PageA #job-content .box .title { height:auto; }

        section#PageC {padding: 40px 0 0;}
        section#PageC .pageC_content .box-bg { height: 160px; }
        
        /* btn 內容設定 */
        section#btn .page_btn { width: 100%;margin: 20px 0; }
    }