*{font-family: 'Noto Sans TC','微軟正黑體',sans-serif; }
body{ font-family: 'Noto Sans TC','微軟正黑體',sans-serif; overflow-x: hidden;background-size: cover;}
html,body{font-size:16px ;}
h1,h2,h3,h4,h5,h6,p,span,a{line-height: 1.8;}
section p,section li,section a{font-weight: 400;font-size: 1.2rem;}
section a:hover{ text-decoration: none; }



/* 共通 */
section {padding: 60px 0 80px;}
section p{text-align: left;}
.responsive-img{width: 100%;}

.master-title h2{font-weight: 900;font-size: 2.4rem;color: #fff;}
.master-title p {font-size: 1.2rem; line-height: 2;}
.master-title p span{border-bottom: 2px solid #fff;}
.master-title.center.fff{text-align: center;color: #fff;} 


.container {max-width: 70%;}
.content_title h5 {font-size: 2rem; font-weight: 600; }
.content_title i {font-size: 1.4rem;color: #E32124;}




/* 主視覺 */
header#visual {position: relative;padding: 0;width: 100%;height: 100vh;
     background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.85),rgba(0, 0, 0, 0.5) ) ,url(../images/header-bg.jpg) ;background-size: cover;background-position: center;background-attachment: fixed;}

 header#visual .container-fulid {padding: 60px;}
 header#visual .title-photo {width: 60%;margin: 60px auto 0;} 
 header#visual .title-photo img{width: 100%;} 
 header#visual .bar {width: 100% ;background-color: #E62841;padding: 2px 60px;display: flex;align-items: center;justify-content: center;position: fixed;z-index: 999;box-shadow:  3px 3px 10px rgba(0, 0, 0, 0.5);}
 header#visual .bar h3 {margin: 0;color: #fff;}

 header#visual .bar #timer {margin: 0 30px;}
 header#visual .bar #timer span{color: #fff836;}
 header#visual .bar span.flashing {color: #E62841;animation: slideIn 1s ease-in-out infinite ;background-color: #fffffa;padding: 0 10px;margin: 0 5px;font-weight: 600;}

@keyframes slideIn {
0% {color: #67141f;}
100% {color: #E62841;}
}

.video {width: 45%;margin: 0 auto;}
.video-container { position: relative; padding-bottom: 56.25%; /* 16:9 */ height: 0; }
.video-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }


/* 課程 */
section#lesson {position: relative;padding:100px 0 ;background: url(../images/lesson-bg.jpg) repeat;background-size: 200px;}
section#lesson .box-bg {background: linear-gradient(to bottom, #E62841 70%,rgba(230, 40, 65, 0) 70%) ;position: relative;z-index: 99;padding: 20px;border-radius:5px;margin: 0 0 30px;}
section#lesson .box-bg:last-child {margin: 0;}
section#lesson .box-bg h2 {font-weight: 700;color: #fff;text-align: center;margin: 0 0 30px;font-size: 2.2rem;}
section#lesson .box-bg .box-icon {width: 120px;margin: 0 auto;}
section#lesson .box-bg .box-icon img {width: 120px;}
section#lesson .box-bg .box {background-color: #fff;padding: 30px;border-radius:5px;}
section#lesson .box-bg .box .box-flex {display: flex;justify-content: space-between;}
section#lesson .box-bg .box .box-flex >.text {width: 50%;padding: 1%;}
section#lesson .box-bg .box .box-flex >.text h3 {border-left: 10px solid #E62841;padding-left: 10px ;font-size: 1.5rem;color: #000;transition: all .2s ease-in;}
section#lesson .box-bg .box .box-flex >.text h3:hover {color: #E62841;}
section#lesson .box-bg .box .box-flex >.text  a {display: block;}
section#lesson .box-bg .box .box-flex >.text p {text-align: justify;}
section#lesson .box-bg .box .box-flex .photo {width: 50%;text-align: center;}
section#lesson .box-bg .box .box-flex .photo img {width: 80%;}
section#lesson .box-bg .box .box-flex .item {width: 48%;margin: 30px auto 0;background-color: #FFE1E6;padding: 30px;border-radius: 10px;}
section#lesson .box-bg .box .box-flex .item ul li::marker ,section#lesson .box-bg .box .box-flex .item i {color:#E62841 ;}
section#lesson .box-bg .box .box-flex .item ul li span {color: #E62841;}
section#lesson .box-bg .box .box-flex .item h4 {font-weight: 600;}


/* 老師 */
section#teacher  {position: relative;background-color: #0F0F0F;padding:100px 0 ;}
section#teacher .box {width: 100%;border: 10px solid #E62841;padding:30px 60px;position: relative;}
section#teacher .box h5 {color: #fff;text-align: center;margin: 0 0 60px;}
section#teacher .box .box-flex {display: flex;justify-content: space-between;}

section#teacher .box .text {width: 55%;}
section#teacher .box .text h4 ,section#teacher .box .text ul {color: #fff;}
section#teacher .box .text ul li::marker {color: #E62841;}
section#teacher .box .photo-text {width: 35%;}
section#teacher .box .photo-text .photo{width: 100%;margin: 0 auto 20px;}
section#teacher .box .photo-text .photo img{width: 100%;}
section#teacher .box .photo-text h5 {color: #fff;text-align: center;font-size: 1.6rem;}
section#teacher .box .text .item h4 {color: #fff;background-color: #E62841;display: inline-block;padding: 2px 8px;border-radius: 5px;margin: 30px 0 10px;}
section#teacher .box-title {position: absolute;color: #fff;transform: translate(-50%,-50%);left: 50%;top: -12px;background: #0F0F0F;padding: 5px 30px;}
section#teacher .box-title h2 {font-size: 2.6rem;}

/* 按鈕 */
section#form {position: relative;background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8),rgba(0, 0, 0, 0.5)),url(../images/form-bg.jpg) ;background-size: cover;background-position: center 0;}

section#form h4 {color: #fff;font-size: 2rem;margin: 0 auto 30px;text-align: center;}
section#form ul li.send input { background: #ff9d14; }






@media(max-width:1600px){
  

}



@media(max-width:1440px){
     /* 主視覺 */
     .container { max-width:90%; }

}


@media(max-width:1366px){
    /* 主視覺 */
    header#visual .title-photo { width: 80%; }
}

@media(max-width:991px){
    header#visual { height: auto; }
    header#visual .title-photo { width: 100%;margin: 100px auto 20px; }

}

@media(max-width: 767px){
    h1, h2, h3, h4, h5, h6, p, span, a { line-height: 1.6; }
    .h4, h4 { font-size: 1.3rem; }

    .video {width:98%;margin: 0 auto;}

    header#visual .container-fulid { padding: 15px; }

    header#visual .bar {padding: 8px 15px;display: flex;align-items: center;flex-direction: column;}
    header#visual .bar h3 {font-size: 1.4rem;}
    header#visual .bar #timer {margin: 0px;}

    section#lesson .box-bg { padding: 10px; }
    section#lesson .box-bg .box { padding: 15px; }


    section#lesson {background-size: 100px;padding: 40px 0;}
    section#lesson .box-bg .box .box-flex { flex-direction: column; }
    section#lesson .box-bg .box .box-flex >.text { width: 100%; padding: 0;  }
    section#lesson .box-bg .box .box-flex .photo { width: 80%; text-align: justify; }
    section#lesson .box-bg .box .box-flex .item { width: 100%; padding: 15px; }

    section#lesson .box-bg .box .box-flex >.text h3 { font-size: 1.3rem; }
    section#lesson .box-bg h2 { font-size: 1.6rem; }
    section#lesson .box-bg .box-icon { width: 90px; }
    section#lesson .box-bg .box-icon img { width: 90px; } 


    section#teacher .box { padding: 30px ; }
    section#teacher .box .photo-text { width: 80%;margin: 0 auto; }
    section#teacher .box .box-flex { flex-direction: column; }
    section#teacher .box .text { width: 100%; order: 2;}
    section#teacher .box .photo-text  { order: 1;width: 90%; }
    section#teacher .box h5 { margin: 0 0 20px; }
    section#teacher .box-title h2 { font-size: 1.8rem; }
    section#teacher .box-title { width: 60%;text-align: center; }
    section#teacher .box .photo-text h5 { font-size: 1.3rem; }

    section#teacher .box { padding: 15px; }
}

@media(max-width: 575px){
    section#form h4 { font-size: 1.4rem; }
    .container { max-width: 98%; }
    section p, section li, section a { font-size: 1.1rem; }
    section#lesson .box-bg .box .box-flex .photo { width:100%; }
    section#lesson .box-bg .box .box-flex .photo img{ width:100%; }
}