body{ background: url("../images/body.jpg") repeat center; background-size: cover; background-attachment: fixed; font-family: "Arial","微軟正黑體";}
article{ width:1000px; display: block; background:#08535d; border-radius: 50px;    box-shadow: 0 0 30px rgb(140 173 178 / 50%); 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:450px; border-radius: 50px 50px 0 0;padding: 40px;}
header#Visual .title {text-align: center;}
header#Visual .title h1{font-weight: 500;line-height: 1.6;font-size:3rem;}
header#Visual .title h1 span{font-weight: 800;letter-spacing: 12px;background-color: rgba(237, 37, 77, 0.9);padding: 5px 15px;color: #fff;}

@keyframes map {
    0% {
        background-color: #ffd792;
    }
    100% {
        background-color: #f68a06;
    }
  }




/* PageA */
section#PageA > div.MainContent{ padding:20px 100px;color: #fff;}
section#PageA > div.MainContent .info h4{ font-size: 1.3rem; color: #FFF;margin-top: 20px;font-weight: 600;}
section#PageA > div.MainContent .info h4 i {color: #ffc64c;margin-right: 5px;}
section#PageA > div.MainContent .info p {font-size: 1.1rem;}
section#PageA > div.MainContent .info a.map {display: inline-block;padding: 2px 10px;margin-left: 5px;font-weight: 800;color: #fff;border-radius: 5px;animation: map .8s steps(2)  infinite;color: #fff;}
section#PageA > div.MainContent .info a {color: #ffc64c;transition: all .3s linear;}
section#PageA > div.MainContent .info a:hover {color: #ffeabc;}

section#PageA > div.MainContent .lesson {background: #fff;border-radius: 10px;margin: 20px auto 0;width: 100%;color: #000;padding: 20px;border:5px solid  #0f7684;}
section#PageA > div.MainContent .lesson:hover {border:5px solid  #19a4b7;}
section#PageA > div.MainContent .lesson h2 {text-align: center;font-weight: 800;font-size: 1.5rem;line-height: 1.6;
    color: #08535D;transition: .15s linear;
}
section#PageA > div.MainContent .lesson p {font-size: 1.1rem;color: #000;}



section#PageA > div.MainContent .lesson:hover h2 {color: #19a4b7;}





section#PageB{ padding: 10px 150px; }
section#PageB button{ width:100%; margin: 15px auto 25px auto; display: block; background: #ed254d; color:rgb(255,255,255); border: none; border-radius: 7px; padding: 15px 15px; font-weight: bold; font-size:1.2rem;cursor: pointer;transition: .15s linear;}
section#PageB button:hover{ background:#ff4872; }









@media(max-width:999px){
    article{ width:100%;}

}

@media(max-width:767px){
    .fab-container{ display: none; }
    header#Visual{background-size: contain;background-color: #fff; padding: 20px;height: 220px;}
    header#Visual .title h1{line-height: 1.8;font-size:1.2rem;}
    header#Visual .title h1 span{letter-spacing: 5px;}
    section#PageA > div.MainContent .info p { font-size: 1rem; }
    section#PageA > div.MainContent .lesson p { font-size: 1rem; }






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

    header#Visual > img#Title{ width:80%;margin: 40px 10%; }
    header#Visual > a > button{ top: 70%; right:15%; width: 70%; font-size: 1.5rem; padding: 7px 35px;}

    section#PageA > div.MainContent img#gift{ display: none; }
}
@media(max-width:538px){


    header#Visual > a > button{ right: 25%; width:50%; font-size: 1.35rem; padding: 5px 30px;}
    header#Visual > img#Title { width: 90%; margin: 30px 5%; }

    section#PageA > p#slogan{ padding: 12px 20px; }
    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 30px; }
    section#PageB button{ width: 100%;font-size: 1rem; }


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

    header#Visual > a > button{ right: 19%; width:62%; }
    section#PageA > div.MainContent > h3{ font-size: 1.5rem; line-height: 2.7rem; }
}