*{font-family: '微軟正黑體', 'Microsoft Jhenghei', 'Arial', sans-serif;box-sizing: border-box;}
body{overflow-x:hidden;}
h1, h2, h3, h4, h5, h6 { font-weight: 800;clear: both;}
h2{line-height: 3rem;}
h3{line-height: 2.8rem;}
h4{line-height: 2.6rem;}
h5{line-height: 2.2rem;}
a{ text-decoration: none;color: #FFB447;transition: all .2s linear; }
a:hover{ text-decoration: none;color: #ff629c; }
i{margin: 0 5px;color: #FFB447;}
button{outline:none;}
button:focus{outline:none;}
br {  line-height: 150%; }

/*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: 1200px; margin: auto; clear: both;}
header, section { width: 100%; margin: 0; clear: both; padding: 0;}
section p,section li,section b{  margin-bottom: 0rem;font-size: 1.1rem;line-height: 2rem;font-weight: 00;letter-spacing:2px }
section { padding:20px 15px; clear: both; }

/* 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;}






/* 基本操作 */
.row{position: relative;z-index: 999;}
.text_center{text-align: center;}
.text_left{text-align: left;}
.flex{display: flex;}
.clear{clear: both;}
.h50{margin: 50px 0;}
.h100{margin: 100px 0;}


.news_text ol{
    padding:0 0 0 0px;
    margin:0;
}
.news_text ol li{
    list-style-type:none;
    list-style-position:inside;
    counter-increment: cnt;
  }
.news_text ol li:before{
    display: marker;
    content: "(" counter(cnt) ") ";
}

.news_text ol li small{
 font-weight: 600;
  }


/* 大標 */
.title{color: #fff;width: 100%;margin: 50px auto 0;}
.title_icon{width:100px;margin:15px auto 5px;}
.row_hight{margin:100px 0 0;}
section .content .title  h2{ margin: 0 0 30px 0;text-align: center;line-height: 2.4rem;} 


/* 主視覺 */
header#Visual {position: relative;background: url('../images/master_bg.jpg') no-repeat center;background-size: cover;min-height:100vh;}
header#Visual > .container-fluid{width: 100%;}
.master-title{width: 100%;margin:150px 100px;}
.master-title img{width: 100%;}
.header_content{position: relative;}
.news_box{background-color: rgba(255, 255, 255, 0.5);width: 82%;border-radius: 20px;padding:15px;margin:40px auto 0;display: flex; align-items: center;text-align: center;}
.news_box .news_icon{background-color:#6e4b36;width:75px;height: 75px;padding: 5px;}
.news_box .news_icon > h2{line-height: 2rem;color:#ffd800;}
.news_box .news_text{width: 85%;margin: 0 0 0 20px;font-weight: 600;text-align: left;font-size:1.4rem ;color: #6e4b36;}
.news_box .news_text > p{margin-top: 0; margin-bottom: 0;}

/* PageA 內容設定*/
section#PageA{ position: relative; background: linear-gradient(to bottom, #a87456 0%, #3c251c 90%);z-index: -99; }

.pageA_text{ padding:40px;}
.pageA_text p{ text-align: justify;margin-bottom: 0.6rem;color:#fff;}
.pageA_title{height: 50px;margin:30px 0;}
.pageA_img-l{position: relative;z-index: 100;width: 100%;}
.pageA_img-l img{width: 100%;}
.pageA_img-l::after{
    content: "";width:80%;height: 80%;background-color: #ffe180;position: absolute;z-index:-5;left:-20px;bottom: -20px;
}
.pageA_img-r{position: relative;z-index: 100;width: 100%;}
.pageA_img-r img{width: 100%;}
.pageA_img-r::after{
    content: "";width:80%;height: 80%;background-color: #ffe180;position: absolute;z-index:-5;right:-20px;bottom: -20px;
}
.plan{width:300px;}
/* PageB 內容設定*/
section#PageB{ position: relative;background:url('../images/pageB_bg.jpg') no-repeat fixed; background-attachment: fixed; z-index: 99;}
.PageB_bg {
    background: linear-gradient(bottom,rgba(2, 28, 44, 0),#3c251c);
    background: -webkit-linear-gradient(bottom,rgba(2, 28, 44, 0),#3c251c);
    background: -ms-linear-gradient(bottom,rgba(2, 28, 44, 0),#3c251c);
    background: -moz-linear-gradient(bottom,rgba(2, 28, 44, 0),#3c251c);
    background: -o-linear-gradient(bottom,rgba(2, 28, 44, 0),#3c251c);
    width: 100%;
    height: 100vh;
    position: absolute;
    top: 0;
    left:0;
    z-index: -40;
}
section#PageB .content{width: 100%;}
.pageB_title{text-align: center;width: 100%;}
.lesson_code{background-color: #fff;border-radius: 5px;padding: 2px 5px;color:#755c50;margin-right:5px ;}
.pageB_text{color:#fff;}
.line{border-color: #fff;border-width:1px;padding: 10px 0;margin: 10px 0;border-bottom-style:solid;}
.pageB_text_big p{color:#fff;font-size: 1.4rem;}
.pageB_text p{color: #fff;}
.pageB_title h4{color: #fff;margin: 10px 0;}
button.lesson_btn{background-color: #ffdaa6;position: relative;width: 100px;border:none;border-radius:5px;cursor: pointer;-webkit-transition: 0.4s; transition: 0.4s;margin: 20px 0;padding: 2px 10px;}
button.lesson_btn >  p{color:#000;}
.lesson_btn::before{ content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; background: -webkit-gradient(linear, left top, right top, from(#ffddae), to(#ffb957)); background: linear-gradient(to right, #ffddae, #ffb957);border-radius: 5px; border: none; }
.lesson_btn::after { background: -webkit-gradient(linear, left top, right top, from(#ffb957), to(#ffddae)); background: linear-gradient(to right, #ffb957 0%, #ffddae 100%);border-radius: 5px;  border: none; }
.lesson_btn:hover { background-color: transparent; }




/* btn 內容設定 */
#btn{width: 100%;z-index: 99;position: relative;}
.page_btn{  position: relative; display: inline-block;width: 100%; padding: 16px 32px; background-color: #ffb957; font-weight: bold; color: #000; -webkit-transition: 0.4s; transition: 0.4s;cursor: pointer; border-radius: 10px; font-size: 1.4rem; border: none;margin: 50px 0;}


.page_btn::before{ content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; background: -webkit-gradient(linear, left top, right top, from(#ffddae), to(#ffb957)); background: linear-gradient(to right, #ffddae, #ffb957);border-radius: 10px; border: none; }
.page_btn::after { background: -webkit-gradient(linear, left top, right top, from(#ffb957), to(#ffddae)); background: linear-gradient(to right, #ffb957 0%, #ffddae 100%);border-radius: 10px;  border: none; }
.page_btn:hover { background-color: transparent; }


/* RWD Setting */
    @media (max-width: 1440px) {
       /* RWD 整體寬度調整*/
        div.content { width: 1100px; margin: 0 auto;}
        /* 主視覺 */ 
        .news_box .news_text{width: 80%;font-size: 1.3rem;}
        /* PageB 內容設定*/
       
   
    }

    @media (max-width: 1199px) {
        /* RWD 整體寬度調整*/
        div.content { width: 951px; margin: 0 auto;}

        /* 主視覺 */
        .news_box{width: 100%;padding:10px;margin:40px auto 0;}
        .news_box .news_icon{width:78px;height: 78px;}
        .news_box .news_icon > h2{line-height: 2rem;}
        .news_box .news_text{width: 80%;font-size: 1.3rem;}
   
        


        /* PageA 內容設定*/
 

        /* PageB 內容設定*/
     

    }

    @media (max-width:991px) {
        /* RWD 整體寬度調整*/
       
        div.content { width:100%; }

        /* 主視覺 */
        header#Visual { background: url(../images/master_bg_sm.jpg) no-repeat right bottom; min-height: 50vh; background-size: cover; }
        .master-title{width: 100%;margin: 80px 20px;}
  
        .news_box .news_text{width: 80%;font-size: 1.2rem;margin: 0 0 0 20px;}
        /* PageA 內容設定*/
    
        /* PageB 內容設定*/
    

    
    }

    @media (max-width: 767px) {
         /* RWD 整體寬度調整*/
        div.content { width: 100%; }
   
      
        /*主視覺*/

        /* PageA 內容設定*/
        .pageA_text { padding: 0px;margin: 0 0 20px; }
        .pageA_img-l{width: 80%;margin: 0 auto;}
        .pageA_img-r{width: 80%;margin: 0 auto;}
      
      
        header#Visual { background: url(../images/master_bg_sm.jpg) no-repeat; min-height: 50vh; background-size: cover; }
        .master-title{width: 100%;margin:30px 0;padding: 10px;}
        /* PageB 內容設定*/
        section#PageB{ position: relative; ;background:url('../images/pageB_bg.jpg') no-repeat fixed; background-attachment: fixed; z-index: 99;background-size: cover;}
        .pageB_title{margin: 20px 0 10px;}
        .PageB_bg {
            background: linear-gradient(bottom,rgba(59, 37, 28, 0.2),#3c251c);
            background: -webkit-linear-gradient(bottom,rgba(59, 37, 28, 0.2),#3c251c);
            background: -ms-linear-gradient(bottom,rgba(59, 37, 28, 0.2),#3c251c);
            background: -moz-linear-gradient(bottom,rgba(59, 37, 28, 0.2),#3c251c);
            background: -o-linear-gradient(bottom,rgba(59, 37, 28, 0.2),#3c251c);
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left:0;
            z-index: -40;
        }
        .plan{width:300px;margin: 50px 0 0;}
        /* btn 內容設定 */
        .page_btn { width: 100%; padding: 10px 0; margin: 20px auto 0; font-size: 1.2rem; }
      
        #btn {padding: 40px 0;}

    }

    @media (max-width: 575px) {
        body { margin: 0;}
        div.content { width: 98%; }
        /*RWD 整體寬度調整*/
        i{margin-right: 5px;}
        section .content .title h2 {line-height: 2.2rem;margin: 0 0 15px 0;font-size:1.8rem;}
     
        h4{font-size: 1.3rem;line-height: 2.4rem;}
        h5{font-size: 1.1rem;line-height: 2rem;}
     
        section p,section li,section b{margin-bottom: 0rem;font-size: .9rem;line-height: 1.4rem;}
        table tr td p{font-size: .9rem;line-height: 1.4rem;}
        table tr td a { font-size: .9rem;line-height: 1.4rem;}
       
        section {padding: 15px; margin: 0; }
        section h1 { font-size: 1.3em; line-height: 0.8; }
        dl, ol, ul { padding:0 15px; }
        section .content .title {text-align: center;}
        .title_icon { width: 80px; margin: 5px auto; }

        /* 主視覺 */
        header#Visual {
            background: url(../images/master_bg_sm.jpg) no-repeat right 0;
            
        }
      
        .news_box{width: 100%;padding:15px;margin:40px auto 0;display: block;}
        .news_box .news_icon{width:100%;height: auto;}
        .news_box .news_icon > h2{line-height: .8rem;font-size:1.6rem ;margin-bottom: 0rem;margin: 5px 0;}
        .news_box .news_text{width: 100%;margin: 10px 0 0 ;font-size:1rem ;}
     
        /* PageA 內容設定*/
        .pageA_title {
            height:50px;
            margin:0 ;
        }
        .plan{width:200px;margin: 50px 0 0;}

        /* PageB 內容設定*/
        .title { margin: 100px auto 0; }

  
    }
