body{ background: url("../images/bg.jpg") no-repeat center; background-attachment: fixed; background-size: cover; font-family: "微軟正黑體","Arial";}
article{ width:1000px; display: block; background:#ffffff; border-radius: 50px; box-shadow: 0 0 30px rgba(0,0,0,0.5); margin: 20px auto; padding-bottom: 30px;}
a:hover{ text-decoration: none; }

/* fab */
span.fab-label {
    background: transparent;
    color: rgb(71, 71, 71);
    padding: 0;
    border-radius: 0;
    font-weight: 600;
    font-size: 0.95rem;
}



header#Visual{ position: relative; background: url("../images/visual.jpg") no-repeat center bottom; background-size: 100%; height: 500px; border-radius: 50px 50px 0 0;}
header#Visual > img#Title{     position: absolute;top: 8%; left:10%; width:80%;transform: translate(-50%,-50%); } 
header#Visual > a:hover{ color:rgb(232,250,255); }
header#Visual > a > button{ position: absolute; top: 60%; right: 18%; border:none; color:rgb(232,250,255); border-radius: 5px; background: rgb(69,189,236); padding: 7px 35px; font-size: 1.2rem;}
header#Visual > a > button:hover{ cursor: pointer; background:rgb(255,180,85); color:rgb(46, 46, 46); transition: .2s linear; }

header#Visual .logo{position: absolute;top: 20px;left: 30px;}


section.depiction{background-color: #DC7500;display: flex;justify-content: center;align-items: center;}
section.depiction .depiction_img img{padding:0 10px;}
section.depiction > h5{color: #FFF;font-weight: 600;padding:20px 10px;line-height: 2rem;}
section.depiction > h5 span{font-weight: 600;color: rgb(0, 255, 255);}



/* PageA */
section#PageA { padding: 0px 50px;  }
section#PageA > p#slogan{ background:#f4802d; padding: 12px 80px; }

section#PageA > div.MainContent{width: 92%;margin: 0 auto; }
section#PageA  h3{  color:#000; line-height: 2.2rem; font-weight: bold; font-size: 1.6rem;font-weight: 800;position: relative;z-index: 99;}

section#PageA > div.MainContent > hr{ margin-bottom: 1.85rem; }
section#PageA > div.MainContent div > h4{ font-size: 1.25rem; background: linear-gradient(to top, #e73ec0, #ff88d0); color: #FFF; width: 140px; padding: 6px 5px; text-align: center; border-radius: 5px;}
section#PageA > div.MainContent div > ol{ line-height: 1.65rem;}
section#PageA > div.MainContent div span#open{ font-size: 110%; font-weight: 600; }
section#PageA > div.MainContent div span#exam{ font-size: 120%; color: #0082aa; font-weight: 600; text-decoration: underline;}
section#PageA > div.MainContent div span#exam:hover{ color: #cc6300; }
section#PageA > div.MainContent div > ol > li{ margin-bottom: 5px; }
section#PageA > div.MainContent div > ol > li > a{ color: #0082aa;}
section#PageA > div.MainContent div > ol > li > a:hover{ color: #cc6300;}
section#PageA > div.MainContent div .und{ margin-bottom: 30px; }
section#PageA > div.MainContent div p#time{ font-size: 120%; }

section#PageA > div.MainContent div > div#step{ width: 90%; margin: 20px auto 40px auto; display: block; }
section#PageA > div.MainContent div > div#step div#intr h6{ font-weight: bold; font-size: 120%; margin-bottom: .35em;}
section#PageA > div.MainContent div > div#step > img{ width: 100%; border-radius: 7px; overflow: hidden; box-shadow: 0 0 12px rgba(0,0,0,.3); margin-bottom: 12px; clear: both;}
section#PageA > div.MainContent div > div#step button{ cursor: pointer; color: rgb(255, 255, 255); border: none; background: rgb(150, 150, 150); border-radius: 5px; padding: 4px 8px; margin: 0 5px;}
section#PageA > div.MainContent div > div#step button#prev{ float: left; }
section#PageA > div.MainContent div > div#step button#nextv{ float: right; }



.title_big {text-align: center;padding:50px 0 10px;}
.title_big img{width: 50px;}
.title_big p{text-align: justify;}
section#PageA > div.RemarkContent{ border-radius: 15px;
    padding: 20px 42px 5px 42px;
    margin: 85px 100px 10px;background-color: rgb(253, 251, 242);}
section#PageA > div.RemarkContent > h5{ border-left: 5px solid #FF8700; color:rgb(80,80,80); padding-left: 10px; font-weight: 600;color: rgb(80,80,80); }
section#PageA > div.RemarkContent > ul{ color:rgb(80,80,80); line-height: 1.85rem; font-size: 0.95rem; font-weight: 600;} 
/* section#PageA > div .box_all{display: flex;justify-content: space-between;align-items: center; } */

/* section#PageA > div .box .box_title{padding:10px;    background: linear-gradient(to top, #24595B, #24595B);;display: flex;align-items: center; justify-content: center;flex-direction: column; border: 2px solid #fff;text-align: center;width: 200px;border-radius: 20px;width: 200px;height: 100px;background: linear-gradient(to top, #ffeeee, #ffeeee);} */
/* section#PageA > div .box{ width:100%;position: relative;display: flex;align-items: center;border-radius: 20px;height: 150px;padding: 10px;margin: 0 0 20px;} */
/* section#PageA > div .box:nth-child(1) {background: linear-gradient(to top, #ffeeee, #ffeeee);}
section#PageA > div .box:nth-child(2){} */
section#PageA > div .box > .box_img{width: 75%;margin:20px auto;}
section#PageA > div .box > .box_img img{width: 100%;}

/* section#PageA > div .box:nth-child(1) .box_title{background: linear-gradient(to top, #883939, #883939);}
section#PageA > div .box:nth-child(2) .box_title{background: linear-gradient(to top, #e49124, #e49124);}
section#PageA > div .box .box_title h5{margin:5px 0 0; font-size:1.2rem;color: #fff;line-height: 1.8rem;}

section#PageA > div .box .box_title .sale_text{font-size: 1.8rem;color: #ffffff;border-radius: 999em;text-align: center;font-weight: 800;}
section#PageA > div .box p {text-align: justify;}
section#PageA > div .box p span{font-size: 1.2rem;font-size: large;}
.add_img{width: 4%;margin: 20px;position: relative;z-index: 99;}
.add_img img{width: 100%;}

.box_text{padding: 15px 30px ;border-radius: 20px;width: 100%;display: flex;flex-direction: column;    justify-content: center;}
section#PageA > div .box:nth-child(1) .box_text{/* border:2px solid #8b4e4e; *}/
section#PageA > div .box:nth-child(2) .box_text{/* border:2px solid #996b2e; background-color: rgb(255, 241, 224);} */
.box_text p{margin: 5px 0;}
.box_text > h5{margin: 5px 0px;font-size: 1.4rem;font-weight: 600;color: #4e0f0f;}
.box_text ul{padding: 15px;}
.box_text ul >li{margin: 20px 0;}
.box_text ul >li:first{margin: 0px 0 20px;}






.table{
    margin: -20px auto ;
    display: block;
    border-collapse:none;
    font-size: 1.2rem;
}
table h5{margin: -20px 7px;}
table td a{
    color: #000000;

    text-decoration:none;
    border-bottom:1px solid #000 ;
    display: inline-block;
    transition: all .3s linear;

}

table td a:hover{
    color: rgb(138, 138, 138);
    text-decoration:none;
    border-bottom:1px solid rgb(138, 138, 138) ;

}

table th{background-color: #3a6ab4; color:#fff;}
table td:nth-child(1){width: 50%;vertical-align: middle;}
table td:nth-child(2){width:50%;}

tr{padding: 1%;    border-top: 0px solid #dee2e6;}
.table td, .table th { border: none  }
/* tr:nth-child(even){border:1px solid #FFFFFF;padding: 1%;background-color: #f0eee9;}
tr:nth-child(odd){border:1px solid #FFFFFF;padding: 1%;background-color: #e4e2e0;} */

tr h5{font-weight: 800;font-family: 'Open Sans', sans-serif;}
tr p{font-size: 1rem;margin-bottom: 0;}

.unicode_list_image li {
    padding: 10px 0;
    list-style-type: none;
    margin-left: 4em;
    font-size: 1rem;
    }
    .unicode_list_image li:before {
    content: "";
    margin-left: -6em;
  
    padding: .5em;
    color: #fff;
    margin-right: 1em;
    }
    .unicode_list_image li:nth-child(1):before  {
    content: "學習重點";
    background-color: rgb(82,159,162);
    }

    .unicode_list_image li:nth-child(2):before  {
    content: "限時優惠";
    background-color: rgb(204, 133, 52);
    }

    dl, ol, ul {
        margin-top: 0;
        margin-bottom: 0;
    }



/* PageB */
section#PageB{ padding: 10px 50px; }
section#PageB button{ width: 80%; margin: 15px auto 25px auto; display: block; background: #580a0a; color:rgb(255,255,255); border: none; border-radius: 7px; padding: 12px 20px; font-weight: bold; font-size:1.4rem;cursor: pointer;}
section#PageB button:hover{ background:rgb(255, 156, 26); transition: .15s linear;}

/* SocialMedia */
div#SocialMedia { position: fixed; right: 10px; bottom: 50px; z-index: 1000;}
div#SocialMedia ul { list-style: none; }
div#SocialMedia ul li { background: rgba(0,0,0,0.75); color: #FFF; width: 40px; height: 40px; line-height: 40px; font-size: 1.25em; text-align: center; margin: 8px 0 0 0; border-radius: 4px; }
div#SocialMedia ul li a { color: #FFF; }
div#SocialMedia ul li.FB:hover { background: #39507C; transition: .20s linear;  }
div#SocialMedia ul li.Youtube:hover { background: #DB1B1B; transition: .20s linear; }
div#SocialMedia ul li.Contact:hover { background: #096; transition: .20s linear; }




/* .table{
    display: block;
     border-collapse:none; 
    transition: all .3s linear;
} */






table  a{ color: #ffffff; text-decoration: none; font-size: 1.2rem;display: block;}
table  a:hover{ color: #fffbc7; }

/* table td:hover{

    background-color: #ffedad;

} */

table{padding: 0;margin: 0;}
table th{background-color: #fd8f11; color:#fff;padding: 1%;border-radius: 10px;}
table td:nth-child(1){width: 50%;vertical-align: middle;}
table td:nth-child(2){width:50%;}
table td{
    padding: 0rem;
    vertical-align: middle;
    padding: 5px 15px;
}

table,tr,td{border-bottom:1px dashed #dbdbdb;padding: 1%;/* background-color: #ffe8a8; */transition: all .3s linear;}
.lesson-text{padding: 0;margin: 50px 0 -10px;font-weight: 800;}
.lesson-text b{font-weight: 800;color:#000;font-size: 1.3rem;}
.lesson-text i{color:#d12a00;}
@media(max-width:999px){
    article{ width:100%;}
    header#Visual{background-size: cover;}
}
@media(max-width:980px){
    section#PageA > div.MainContent{ padding: 20px 60px; margin-bottom: 0;}
}
@media(max-width:867px){
    header#Visual{height: 450px;}

    section#PageA > p#slogan{ padding: 12px 50px; }
    section#PageA > div.RemarkContent{ margin: 10px 60px 30px 60px; }

    section#PageB{ padding: 10px 70px; }
}
@media(max-width:767px){
    .fab-container{ display: none; }

    header#Visual{height: 400px;}
    header#Visual > img#Title{ top: 20%; left: 12%; width: 76%; }
    section.depiction{background-color: #DC7500;display: flex;justify-content:center;align-items: center;flex-direction: column;}
    section.depiction > h5 {
        color: #FFF;
        font-weight: 600;
        padding: 10px 20px;
        line-height: 2rem;
    }
    section.depiction .depiction_img img {
        padding:  20px 10px 0;width: 100px;
    }
    table td a {
  
        border-bottom: 0px solid #000;
    
    }
    section#PageA > p#slogan{ padding: 12px 30px; }
    section#PageA > div.MainContent{ padding: 20px 40px;}
    section#PageA > div.MainContent > h3{ line-height: 2.65rem; font-size: 1.75rem; }

    section#PageA > div.RemarkContent{ padding: 20px 40px 5px 40px; margin: 10px 40px 30px 40px; }


    section#PageA > div .box_all{flex-direction: column;  margin: 0px 0;}
    section#PageA > div .box{width: 90%;height:auto;}
    .add_img{width: 6%;}

    section#PageB{ padding: 10px 60px; }
    section#PageB button{ width: 80%; margin: 15px auto 10px auto; padding: 16px 20px; font-weight: bold; font-size:1.3rem;}
}
@media(max-width:639px){
 
    header#Visual{height: 350px;border-radius:0 ;}
    article { margin: 0px auto; }
    header#Visual > img#Title{ top: 14%; left: 0%; width: 100%; }

    section#PageA > div.MainContent div > div#step{ width: 100%; }
.logo img{width:200px ;}
section.depiction > h5 {
   
    padding: 20px 20px;
    font-size: 1.2rem;
    line-height: 1.8rem;
}   



    section#PageA > div .box .box_title{flex-direction: column; }
    section#PageA > div .box .box_title h5 { font-size: 1.4rem; }
    section#PageA > div.MainContent{width:100%;margin: 0 auto; }
}
@media(max-width:538px){
    header#Visual{ background-size: cover;  height: 300px;}
    .title_big { padding: 30px 0 10px; }
    section#PageA > div .box > .box_img{width: 100%;margin:0px auto 10px;}
    section#PageA > div .box { width: 100%; height: auto; }

    header#Visual > img#Title {
        top: 28%;
        left: 0%;
        width: 100%;
    }
    section#PageA > p#slogan{ padding: 10px 20px; }
    section#PageA {
         padding: 0px 0px; 
    }
    section#PageA > div.MainContent{ padding: 20px 15px;}
    section#PageA > div.RemarkContent{ padding: 20px 20px 5px 20px; margin: 10px 20px 30px 20px; }

    section#PageB{ padding: 10px 40px; }
    section#PageB button{ width: 100%; }


}
@media(max-width: 480px){

 


}