*{font-family: '微軟正黑體', 'Microsoft Jhenghei', 'Arial', sans-serif;box-sizing: border-box;}
body{overflow-x:hidden;scroll-behavior: smooth;background-color: #fff;} 
 
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: #333; line-height:1.8;}
section { clear: both; }



/* 背景 */
.bg{ position: fixed; top: 0; left: 0; z-index: 0; width: 100vw; height: 100vh; pointer-events: none;z-index: -999;}
.line_0, .line_1 { fill: none; stroke: rgba(236, 236, 236, 0.6); stroke-width: 1; stroke-miterlimit: 10 }
.line_0 { stroke-width: 3; }
svg#line_1 { stroke-width: 4; animation-name: line_1; animation-duration: 50s; animation-iteration-count: infinite; animation-timing-function: linear; position: absolute; }
@keyframes line_1 { 0% { left: 0; } 100% { left: 50%; } }
svg#line_2 { stroke-width: 4; animation-name: line_2; animation-duration: 50s; animation-iteration-count: infinite; animation-timing-function: linear; position: absolute; }
@keyframes line_2 { 0% { right: 0; } 100% { right: 50%; } }


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


/* 主視覺 */
header#Visual { position: relative;}
header#Visual .container{display: block;padding: 5% 0;width: 90%;}
header#Visual .container .master_title h1{font-weight: 800;font-size: 3rem;color: #0072B1;} 
header#Visual .container .master_title > p{font-size: 1.5rem;} 
header#Visual .container .master_title .master_introduction{width: 55%;margin:100px 0 0;color: #888;margin-left: 40%;}
header#Visual .container .master_title .master_introduction p:nth-child(2){text-align: end;margin: 50px 0 0;}

header#Visual .master_bg{background: url('../images/master_bg.jpg');width: 100%;height:800px;position: relative;overflow: hidden;}
header#Visual .master_bg .bg_color {background-color: rgba(0, 171, 233, 0);position: absolute;width: 100%;height: 100vh;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, 171, 233, 0.8);}
header#Visual .master_bg .bg_color h2{font-weight: 800;}
header#Visual .master_bg .bg_color p{text-align: center;width: 50%;margin: 1% 0 0;}




/* PageA 內容設定*/
section#PageA {position: relative;padding: 100px 0; }
section#PageA .container{display: block;max-width:60%;}
section#PageA #job-content .box img{width: 120px;margin: 20px 0;}
section#PageA #job-content .box .title {height: 150px;}
section#PageA #job-content .box .title h4{font-weight: 800;color: #0072B1;}
 .box .line{width: 40px;height: 2px;background-color: #888;margin: 30px 0;}
section#PageA #job-content .box ul{padding: 0;margin: 0;list-style: none;}
section#PageA #job-content .box ul li{margin: 10px 0;}

/* PageB 內容設定*/
section#PageB {position: relative;padding: 100px 0; }
section#PageB .container{display: block;max-width:60%;}
.title_bg{width: 100%;padding: 10px 0;margin:50px auto; display: block;text-align: center;border-radius: 10px;}
.title_bg h4{font-weight: 800;color: #fff;}
.title_bg.green{background-color:#75BE4B ;}
.title_bg.blue{background-color:#00BEE5 ;}

#learn-content .box {margin: 20px 0;}

#learn-content .box .title {display: flex;align-items: center;margin-bottom: 20px;}
#learn-content .box .title h5{font-weight: 800;position: relative;}
#learn-content .box .title  img{height:50px;margin-right: 20px;}
#learn-content .box ul{padding:0 0 0 25px;}
#learn-content .box ul li{margin: 10px 0;text-align: justify;}
#learn-content .box.red ul li{color: #EE404C;}


#learn-content .box.predict {border: 5px solid rgb(230, 244, 255);border-radius: 15px;padding: 20px;display: flex;}
#learn-content .box.predict .title{width: 24%;margin-right: 20px;}
#learn-content .box.predict .title img{width:100%;height:auto;}
#learn-content .box.predict  h4{margin: 20px 0;color: #0072B1;font-weight: 800;}

#learn-content .box.text-center .title{text-align: center;margin: 0 auto 20px;display: block;}
#learn-content .box.text-center .title img{margin:0 0 5px 0 ;}

.fb_content{display: flex;background-color: #306EAD;padding: 40px;justify-content: space-between;margin: 20px 0 0;}
.fb_content .photo{width: 35%;}
.fb_content .text{width: 60%;text-align: left;color: #fff;}
.fb_content .text h5{font-weight: 800;}
.fb_content .text p {color:#fff;margin: 0 0 20px;}
.fb_content .text .btn {background-color: #fff;color: #306EAD;font-weight: 800;}
.fb_content .text .btn a{color: #306EAD;}
.fb_content .text .btn:hover a{color: #0d7ef0;}
.fb_content .text .btn i{transform: translateX(5px);transition: all .3s ease-in;}
.fb_content .text .btn:hover i{transform: translateX(8px);}
.fb_content .warning{display: flex;align-items: center;}

.fb_content .warning .icon{width: 120px;}
.fb_content .warning .icon img{width: 100%;}

.net .box {margin: 40px 0;}
.net .box .icon {width: 80%;text-align: center;margin: 0 auto 20px;}
.net .box h5 {font-weight: 800;}






/* PageC 內容設定*/
section#PageC {position: relative;padding: 100px 0;background-color: rgba(245, 243, 242, 0.5);}
section#PageC .container{padding: 5% 0;max-width:72%;}
section#PageC .container-fluid{padding: 0; }
section#PageC .pageC_content {width: 100%;position: relative;margin: 60px 0;}
section#PageC .pageC_content .box-bg{ position: absolute; z-index: 1; width:42%;  height:800px;}

section#PageC .pageC_content.blue .box-bg{background-color: #00BEE5;}
section#PageC .pageC_content.green .box-bg{background-color: #75BE4B;}

section#PageC .pageC_content.right .box-bg{border-radius: 10px 0 0 10px;right:0;}
section#PageC .pageC_content.left .box-bg{border-radius: 0 10px 10px 0;left:0;}

section#PageC .pageC_content.right .stu-img{align-items: flex-end;margin: 40px 0;}
section#PageC .pageC_content.left .stu-img{align-items: flex-start;margin: 40px 0;}


section#PageC .pageC_content .stu-con h4{font-weight: 600;}
section#PageC .pageC_content .stu-con h2{font-weight: 800;margin: 40px 0 0;}
section#PageC .pageC_content .stu-con .btn {background-color: rgb(0, 0, 0);color: #fff;font-weight: 800;margin: 40px 0;transition: all .3s ease-in;}
section#PageC .pageC_content .stu-con .btn a{color: #fff;}
section#PageC .pageC_content .stu-con .btn:hover{background-color: rgb(50, 50, 50);}
section#PageC .pageC_content .stu-con .btn i{transform: translateX(5px);transition: all .3s ease-in;}
section#PageC .pageC_content .stu-con .btn:hover i{transform: translateX(8px);}

section#PageC .pageC_content .stu-img {display: flex;flex-direction: column;}
section#PageC .pageC_content .stu-img .img-photo  {width:70%; border-radius: 10px 10px 0 0; position: relative;z-index: 2;overflow: hidden;}
section#PageC .pageC_content .stu-img .img-photo img {width: 100%;}
section#PageC .pageC_content .stu-img .img-text {width:100%;background-color: #FAF9F8;position: relative;z-index: 2;padding: 15px;}
section#PageC .pageC_content .stu-img .img-text p {font-weight: 500;}
section#PageC .pageC_content .stu-img .img-text h4 {font-weight: 800;}
section#PageC .pageC_content.blue .stu-img .img-text p {color: #0072B1;}
section#PageC .pageC_content.green .stu-img .img-text p {color: #418d15;}

section#PageC .pageC_content .box{width: 100%;margin: 20px 0;}
section#PageC .pageC_content .box .icon > h4{font-weight: 800;}
section#PageC .pageC_content .box .icon > svg{width: 100px;margin-bottom: 20px;}
section#PageC .pageC_content.blue .box .icon > h4{color: #0072B1;}
section#PageC .pageC_content.green .box .icon > h4{color: #418d15;}

section#PageC .pageC_content .box .icon img{width: 120px;margin: 20px 0; }
section#PageC .pageC_content .box ul {padding: 0 0 0 0px;list-style: none;}
section#PageC .pageC_content .box ul li{margin: 10px 0;}
section#PageC .pageC_content .box ul li a{color: rgb(73, 43, 32);font-size:1rem;}
section#PageC .pageC_content .box ul li a span {background-color: rgb(73, 43, 32);font-size: .9rem;padding: 5px 8px;margin-right: 5px;color: #fff;transition: all .3s ease-in;}
section#PageC .pageC_content .box ul li a:hover{color: rgb(131, 97, 65);}
section#PageC .pageC_content .box ul li a:hover span{background-color: rgb(131, 97, 65);}
section#PageC  .pageC_content:nth-child(5){margin-top: 200px;}
.testimony{margin: 20px 0 0;}

/* PageD 內容設定*/
section#PageD .container-fluid{max-width: 100%;padding: 0;margin: 0;}
section#PageD .container-fluid .photo{max-width: 100%;height: 400px; padding: 0;margin: 0;background: url('../images/last-photo.jpg');background-attachment: fixed;background-size: cover;}
section#PageD .container-fluid .last-photo{width: 40%;margin: 20px auto;}



/* btn 內容設定 */
section#btn{position: relative;padding: 100px 0;}
section#btn .page_btn{background: red;width: 90%;border-radius:10px ;transition: all .5s linear;display: flex;align-items: center;justify-content: center; height: 65px;z-index: 999;position: relative;margin: 20px 0;}
section#btn .page_btn p{color: #fff;text-align: center;font-size: 1.2rem;font-weight: 600;}
section#btn .page_btn:hover{background-color: #ff5656;}



/* RWD Setting */


    @media (max-width: 1440px) {

         /* PageA 內容設定*/
         section#PageA .container{max-width:90%;}
         
         
         /* PageB 內容設定*/
         section#PageB .container{max-width:90%;}

        /* PageC 內容設定*/
        section#PageC .container{max-width:96%;}
        section#PageC .pageC_content .box-bg{ width:40%;height:700px; }

     }




    @media (max-width: 1199px) {
        /* RWD 整體寬度調整*/
        div.content { width: 1000px; margin: 0 auto;}
        section p { font-size: 1rem;}

        /* PageA 內容設定*/

        /* PageC 內容設定*/
        section#PageC .pageC_content .box-bg{ height:500px;}
       
    }

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










        header#Visual .container .master_title .master_introduction { width: 76%; margin-left: 24%; }
        header#Visual .container .master_title > p { font-size: 1.4rem; }
        header#Visual .master_bg { height: 400px; }
        header#Visual .master_bg .bg_color { height: 400px; }
        header#Visual .master_bg .bg_color p{width: 100%;}

        section#PageA .container { max-width: 96%; }
        section#PageB .container { max-width: 96%; }

        /* PageC 內容設定*/
  
        section#PageC .container { max-width: 96%; padding: 0; }
        section#PageC .pageC_content.right .stu-img{ align-items:center; margin: 0; flex-direction: row;}
        section#PageC .pageC_content.left .stu-img{ align-items:center; margin: 0; flex-direction: row;}
        section#PageC .pageC_content .box-bg{ position: absolute; z-index: 1; width:100%;  height:280px;}
        section#PageC .pageC_content.left .box-bg{border-radius: 0;}
        section#PageC .pageC_content.right .box-bg { border-radius: 0; }

        section#PageC .pageC_content .stu-img .img-photo { width: 70%;transform: translateY(50px);border-radius: 15px; }
        section#PageC .pageC_content .stu-con{margin: 100px 0 0;}
        section#PageC .pageC_content .box{ box-shadow: 0 0 20px hsla(210, 57%, 43%, 0.2);padding: 20px;border-radius: 15px;}



        /* PageD 內容設定*/
        section#PageD .container-fluid .last-photo { width: 80%; }
        section#PageD .container-fluid .photo{height: 200px;
            background: url('../images/last-photo.jpg');background-attachment:auto;background-size: 100%;}

    }

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