*{font-family: 'Noto Sans TC', sans-serif, "微軟正黑體";box-sizing: border-box; }
body{background: url('../images/master_bg.jpg') repeat-y center;background-attachment:fixed ;background-size:100% ;background-attachment: fixed; }

/* RWD 整體寬度調整*/
html {font-size:16px;}
h1, h2, h3, h4, h5, h6 { font-weight: 500;margin-bottom: 0rem; text-decoration: none; text-align: justify;}
h1{line-height: 3rem;} h2{line-height: 2.6rem;} h3{line-height: 2.2rem;} h4{line-height: 2rem;} h5{line-height: 2rem;}
a{ text-decoration: none; text-decoration: none; text-align: justify; } a:hover{ text-decoration: none;}
button{outline:none;} button:focus{outline:none;}
section p,section li,section b{ font-size: 1.05rem;line-height: 1.5rem;letter-spacing:1px;color:#333;margin-bottom: 0rem;text-decoration: none; text-align: justify;}
section p,section li{font-weight:300;}
section b{ font-weight:500;}

div.content { position: relative;width: 1200px;padding: 0 15px; margin: auto; clear: both;}
section#PageA,section#PageB{position: relative; padding: 1px 0 100px;margin: 0px;}
section#PageB{ background-color: #EBF6FF; }


/*bootstrapt 間距設定*/
/* .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; } */

/* 基本操作 */

/* 大標 */
section .page_title,section .page_title_tips{text-align: center;margin: 100px auto 40px;display: block;}
section .page_title img{width:200px;} /* 星星 */
section .page_title_tips img{width: 600px;} /* 彩帶 */
section .page_title h2{ text-align: center;margin: 10px 0;}

/* 主視覺 */
header#Visual {position: relative;background: url('../images/master_title_bg.jpg') top center no-repeat;height: 100vh;background-size:100%;}
.master > .master_img img{width:80%;}
.master > .master_img_tips {text-align: center;margin:5px auto;}
.master > .master_img_tips img{width:60%;}
.master > .master_img_tips > h4{color:#004497;margin: 10px;text-align: center;}
.master > .master_title {width: 100%;position: relative;margin: 0px;}
.master > .master_title .title_img {margin: 10px auto;}
.master > .master_title .title_img img{width: 86%;margin:0 12%;}
.master-content{padding: 0 10%;}

/* PageA 內容設定*/
.pageA_tips_content{display: flex;justify-content: center;}
.pageA_tips_box{display: block;text-align: center;width: 18%;margin: 20px 0 0; }
.pageA_tips_box img{margin: 10px auto;display: block;width: 90px;}
.pageA_box{position: relative;background-color: #fff;border-radius: 20px;box-shadow:3px 3px 5px 6px rgba(255, 226, 197, 0.5);padding: 40px;border: 5px solid #D10000;margin:0 0 40px; }
.ul_lesson {display: block;}
.pageA_box_top{position: absolute;top:-5px;left:-5px;}
.pageA_box_top img{width: 250px;}
.lesson_title {text-align: center;margin: 60px 0 20px;}
.lesson_title h4{text-align: center;}
.lesson_title img{width: 35px;margin: 10px;}
.star{display: flex;justify-content: center;align-items:center;}
.star img{width: 80px;}
.ul_lesson{list-style: none;padding: 0;margin: 0;}
.ul_lesson li a h5{color:#333;transition: all .2s linear;margin-bottom: .2rem;}
.ul_lesson li a span{color:#630849;transition: all .2s linear;}
.ul_lesson li a:hover h5{color:#666666;}
.ul_lesson li a:hover span{color:#af007d;}
.ul_lesson li{margin: 10px 0;border-bottom:1px dashed rgb(128, 128, 128);}
.ul_lesson li:last-child{border-bottom:0px dashed rgb(128, 128, 128);}
.ul_lesson li a p{margin:0 0  10px;}
span.NEW{width: 100px;padding:2px 5px;color: red !important;font-size: 1rem;animation:new 1s ease-out infinite;border-radius: 5px;}
.lesson_title + img{width: 100%; }

@keyframes new{
    from{
        background:#ffe924;
    }
    to{  background:#ffce73;
    }
}



/* PageB 內容設定*/

.fadeIn{animation-duration:2s;}

@keyframes slideInDown{
    0% {
        -webkit-transform: translate3d(0,-100%,0);
        transform: translate3d(0,-100%,0);
        visibility: visible;
        opacity: 0;
    }
    100% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        opacity: 1;
    }
}

.pageB_box{position: relative;background-color: #fff;border-radius: 20px;box-shadow:3px 3px 5px 6px rgba(197, 219, 255, 0.5);padding: 40px;border: 5px solid #84BFD3;margin:0 0 40px; }
.pageB_box h4{text-align: center;color:#E83834;}
.question{width: 50%; margin: 30px 25%;}
.ul_question{list-style: none;list-style: none;margin: 0;padding: 0;}
.ul_question i{margin:0 10px 0 0;}
.ul_question li {margin: 10px 0;}
.student_content{margin: 80px 0 0;}
.ul_question li h4{text-align: left;}
.student_name{display: flex;align-items: center;}
.student_name img{display: flex;align-items: center;margin: 0 10px 0 0;}
.student_name h4{color:#4AA2A8;}
.student{margin:30px 0;}
.line{height: 1px;width: 100%;background-color: rgb(143, 143, 143);margin:10px 0; }



/* BTN 內容設定*/
section#btn{background-color: #EBF6FF;padding-bottom: 100px;}
section#btn .content {padding:50px auto 100px;}
.page_btn{width: 90%;text-align: center;border-radius:10px ;transition: all .3s linear;margin: 0 auto;padding: 10px 0;margin: 0 5% 30px;background-color: #FF3030;color: #fff;transition: all .3s linear;}

.page_btn:before { content: ""; display: inline-block; vertical-align: middle; height: 100%; }
.inner{display: inline-block; vertical-align: middle; padding: 3px 5px;}
.inner p{font-size: 1.4rem;color:#fff;font-weight: 500;}
.page_btn:hover{background-color: #ff8600;}
.page_btn:hover p{color: #fff;}

/* RWD Setting */
    @media (max-width: 1440px) {
       /* RWD 整體寬度調整*/
      
        /* 主視覺 */ 
        .master > .master_title .title_img img { width: 70%; margin: 0px 15%; }
        .master > .master_img img { width: 60%; }
        .master > .master_img_tips img { width: 70%; }
        .master > .master_img_tips > h2 { margin: 0px; }

        .master-content{padding: 0 5%;}
        
        header#Visual {
          
            height: 100vh;
     
        }
    }

    @media (max-width: 1199px) {
        /* RWD 整體寬度調整*/
        div.content { width: 90%; margin: 0 auto;}

        /* 主視覺 */
        header#Visual {background: url('../images/master_title_bg.jpg') top center no-repeat;height: auto;}
        .master-content{padding: 50px 3%;}
        .master > .master_img img { width: 100%; }
        .master > .master_title .title_img img { width: 100%; margin: 0; }

        /* PageA 內容設定*/
        section .page_title_tips img { width: 500px; }
        .pageA_tips_content { flex-wrap: wrap; }
        .pageA_tips_box { display: block; text-align: center; width: 30%;}
        .pageA_box_top img { width: 200px; }


        /* PageB 內容設定*/
        .student_name img { margin: 0 5px 0 0; width: 60px; }


        /* PageD 內容設定*/

    }

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

        /* 主視覺 */

        /* PageA 內容設定*/

        /* PageB 內容設定*/



    }

    @media (max-width: 768px) {
        html {
            font-size: 16px;
        }
        /*主視覺*/
        .master > .master_img { display: none; }
        .master > .master_img_tips img { width: 100%; }

        /* PageA 內容設定*/
        .pageA_box_top img { width: 220px; }
        .lesson_title h3 { text-align: center; line-height: 2.8rem; }
        .lesson_title + img{width: 70%;margin: 20px 15%; }
        .pageA_box { padding: 20px; }
   
        /* PageB 內容設定*/
        .pageB_box { padding: 20px; }
        .question { width:30%; float: none; margin: 40px 35% 0; }
    }
    
    @media (max-width: 576px) {
        /*RWD 整體寬度調整*/

        html{font-size: 11px;}
        section {margin: 0; }
        section .content .title {text-align: center;}
        section .page_title img { width: 130px;}
      
         /* 主視覺 */
         header#Visual {background: url('../images/master_title_bg_m.jpg') center -150px no-repeat;}
         .master > .master_img_tips img { width: 100%; }
         .master > .master_title .title_img img { width: 80%; margin: 0 10%; }

        /* PageA 內容設定*/
        .pageA_box_top img{width: 200px;}
        section .page_title_tips img { width: 100%;  }
        .star { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; }
        .pageA_tips_box img { margin: 20px auto; display: block; width: 50px; }
        .pageA_tips_box { width: 33%; }
       
        /* PageB 內容設定*/
     
    
        /* BTN 內容設定*/
        .inner p{font-size: 1.2rem;}
    }