*{font-family: 'Noto Sans TC','微軟正黑體',sans-serif; }
body{ font-family: 'Noto Sans TC','微軟正黑體',sans-serif;}
html{  scroll-behavior: smooth;}
section h1,section h2,section h3,section h4,section h5,section h6,section p,section span,section a{line-height: 1.4;color: #1a1a1a;}
section p,section li{font-weight: 400;font-size: 1.1rem;}
section span{font-size: 1.1rem;}
section h4{font-weight: 700;font-size: 1.3rem;color: #1a1a1a;}


a{ color: #2d3660;transition: all .3s linear;}
a:hover{  color: #2eabfe;text-decoration: none; }


/* 共通 */
section{padding: 0;position: relative;}
section p,section ul li{line-height: 1.8;font-weight: 400;font-size: 1.1rem;}
.responsive img {width: 100%;}
.container{max-width:76%;}
.modal-lg { max-width:48%;margin: 0 auto; }

.title {margin-bottom: 20px;}
.title.center {text-align: center;}
.title h2 {margin: 20px auto 0;font-size: 2.6rem;font-weight: 600;color: #01B2EC;position: relative;display: inline-block;color: #296354;}
.title h2::before{content: "";position: absolute;width: 100px;background: url(../images/header-title-line.svg) no-repeat center;height: 30px;background-size: contain;left: -120px;top: 14px;} 
.title h2::after{content: "";position: absolute;width: 100px;background: url(../images/header-title-line.svg) no-repeat center;height: 30px;background-size: contain;right: -120px;top: 14px;transform: scale(-1);} 

.title.white h2 {color: #fff;}
.title.white h2::before{background: url(../images/title-l-b-w.svg);} 
.title.white h2::after{background: url(../images/title-r-b-w.svg);} 

.title p {font-size: 1.3rem;line-height: 2.4rem;}

/* 主視覺 */
header#visual {position: relative;padding: 0;margin: 0;;width: 100%;background-color:#296354;}
header#visual .header-photo {width: 100%;text-align: center;padding: 15px;background: url(../images/header-bg.jpg);background-size: contain;}
header#visual .header-photo img {width:88%;} 
header#visual .header-title {text-align: center;padding:30px 10px;z-index: 99;width: 100%;background-color: #296354;transition: all .3s linear;}
header#visual .header-title.active {position: fixed;top: 0;left: 0;padding: 10px 10px;background-color: #184136;}

header#visual .header-title h1 {font-size: 6rem;font-weight: 900;letter-spacing: .5rem;color: #fff;}
header#visual .header-title h2 {font-size: 2rem;font-weight: 300;letter-spacing: .5rem;color: #70DBD2;position: relative;display: inline-block;}
header#visual .header-title h2::before {content: "";position: absolute;width: 100px;background: url(../images/header-title-line.svg) no-repeat center;height: 30px;background-size: contain;left: -120px;top: 10px;}
header#visual .header-title h2::after {content: "";position: absolute;width: 100px;background: url(../images/header-title-line.svg) no-repeat center;height: 30px;background-size: contain;right: -120px;top: 10px;transform: scale(-1);}
header#visual .header-title.active h1 {font-size: 3rem;}
header#visual .header-title.active h2 {font-size: 1.4rem;}
header#visual .header-title.active h2::before {width: 50px;height: 30px;left: -80px;top: -1px;}
header#visual .header-title.active h2::after {width: 50px;height: 30px;right: -70px;top: -1px;}

header#visual .header-title p {font-size: 1.2rem;color: #fff;}


/* 課程 */
section#lesson{padding: 50px 0;background-color: #f7f1eb;}
section#lesson .tab-all {display: flex;justify-content: space-between;margin: 20px 0 40px;flex-wrap: wrap;}
section#lesson .tab-all .tab .star-all{display: flex;align-items: center;justify-content: center;}
section#lesson .tab-all .tab {transition: all .3s linear;background-color: #EFE3DA;}
section#lesson .tab-all .tab:hover {background-color: #eacfbf;}
section#lesson .tab-all .tab:hover .photo{opacity: .8;}
section#lesson .tab-all .tab .star-all img{width: 20px;margin: 2px;}
section#lesson .tab-all .tab .star-all p {margin: 0;color: black; white-space:nowrap; }
section#lesson .tab-all .tab  {text-align: center;position: relative;padding:15px;width:19%;flex-wrap: wrap;border-radius: 10px;}
section#lesson .tab-all .tab .photo{width: 50%;margin: 15px auto 30px;height: 100px;transition: all .3s linear;}
section#lesson .tab-all .tab .photo img{width: 100%;}
section#lesson .tab-all .tab a > p {line-height: 1.4;height: 80px;font-weight: 600;font-size: 1.1rem;transition: all .3s linear;}
section#lesson .tab-all .tab  h5 {margin: 20px 0 0;color: black;}
section#lesson .tab-all .tab::after { position: absolute;  content: ""; height: 80px; right: 0%; top: 50%; transform: translateY(-50%); }
section#lesson .tab-all .tab:last-child::after { border-right: none;}

section#lesson .lesson-box {margin: 80px 0;}
section#lesson .lesson-box .photo {width: 100%;}
section#lesson .lesson-box .photo img{width: 100%;}
section#lesson .lesson-box .title {border-radius: 5px;margin: 0 0 15px;}
section#lesson .lesson-box .title h4,.lesson-box .title h5 {margin: 0;color: white;}
section#lesson .lesson-box .title h4 i {font-size: 1.2rem;margin: 0 5px;}
section#lesson .lesson-box .title h4 {font-size: 1.4rem;line-height: 2rem;}
section#lesson .lesson-box .title h5 { width: 150px;margin: 0 5px; }

section#lesson .lesson-box .title a {padding: 10px 15px;display: flex;justify-content: space-between;align-items: center;background-color: #E68759;}
section#lesson .lesson-box .title:hover a{background-color:#f4aa85;color: #fff;}
section#lesson .lesson-box .lesson-title {display: flex;align-items: flex-end;justify-content: space-between;}
section#lesson .lesson-box .lesson-title .lesson-logo {width: 120px;background-size: cover;margin: 20px 0;}
section#lesson .lesson-box .lesson-title .lesson-logo img {width: 100%;}

section#lesson .lesson-box h2 {padding: 15px; margin-left: 30px; position: relative;display: inline-block;font-size: 1.8rem;font-weight: 600;color: #E68759;}
section#lesson .lesson-box h2::before, .lesson-box h2::after{content: "";background: url(../images/title-icon.svg);background-size: cover;width: 25px;height: 25px;position: absolute;transform: translate(-50%,-50%);}
section#lesson .lesson-box h2::before{left: -1%;top:45%;}
section#lesson .lesson-box h2::after{right: -3%;top:35%;transform: scale(-1);}
section#lesson .lesson-box b {margin: 0 0 15px;display: block;}
section#lesson .lesson-box b span i{color: red;}
section#lesson .lesson-box b span:nth-child(2) {margin: 0 0 0 15px;}
section#lesson .lesson-box .con-all{display: flex;}
section#lesson .lesson-box .con-all .con {background-color: #fff;padding: 15px;}
section#lesson .lesson-box .con-all .con:nth-child(1){width:60%;margin-right: 15px;}
section#lesson .lesson-box .con-all .con:nth-child(2){width: 40%;margin-left: 15px;}
section#lesson .lesson-box .con-all .con.sig:nth-child(1){width: 100%;margin: 0;}
section#lesson .lesson-box .con-all .con h5 {font-weight: 600;}
section#lesson .lesson-box .con-all .con a {line-height: 1.6rem;color: #E68759;}
section#lesson .lesson-box .con-all .con a:hover {line-height: 1.6rem;color: #d47c50;}
section#lesson .lesson-box .con-all .con h5 i {color:#E68759;margin-right: 10px;}
section#lesson .lesson-box .con-all .con p {margin: 0;}

section#lesson .lesson-box ol, .lesson-box ul{padding: 0 0 0 25px;margin: 0 0 20px;}
section#lesson .lesson-box ol li, .lesson-box ul li{margin:10px 0;}





section#article {width: 100%;background-color: #fff;position: relative;}
section#article .bg-icon {position: absolute;width: 12%;right: 5%;bottom: -50px;z-index: 99;}


section#article .bg{padding: 40px 0;}
section#article .photo{width: 100%;}
section#article .photo img{width: 80%;}
section#article .bg{width: 100%;background-color: #0F4649;}
section#article .text h5 {color: #fff;font-size: 1.4rem;}
section#article .text h2 {color: #FFE197;font-weight: 600;margin: 20px 0 0px;font-size: 2.2rem;}
section#article .text .name{margin: 20px 0;}
section#article .text .name p {color: #fff;position: relative;width: 200px;text-align: right;}
section#article .text .name p::after {content: "";position: absolute;left: 5px;top:16px;border-bottom: 1px solid #fff;width: 20px;}
section#article .text .btn {font-size: 1.4rem;font-weight: 600;color: #fff;padding: 8px 20px;background-color: #E68759;transition: all .3s linear;}
section#article .text .btn:hover {background-color:#f4aa85;}
section#article .text .btn a {color: #fff;}









/* 按鈕*/ 
section#BTN {position: relative;padding: 50px 0;background-color: #f7f1eb;}
section#BTN  .btn{ position: relative;text-align: center;width: 70%;height:60px;background-color: transparent;padding: 0;margin: 20px auto;background-color: #000000;display: block;transition: all .3s linear;border-radius: 5px;}
section#BTN  .btn:hover{background-color: rgb(34, 34, 34);}
section#BTN  .btn h5{line-height: 55px;margin: 0;padding: 0; font-weight: 500;color: #fff;font-size: 1.5rem;}
section#BTN a { text-decoration: none; }



@media(max-width:1690px){
    .title h2 {font-size: 2rem;}
    /* 主視覺 */



}

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

}


@media(max-width:991px){
    .container { max-width: 96%; }
    .modal-lg { max-width:80%; } 

    .title h2 { font-size: 1.8rem; }
    .title h2::before{width: 30px;height: 30px;} 
    .title h2::after{width: 30px;height: 30px;} 
    
    /* 主視覺 */
    section#lesson .tab-all {justify-content: space-around;}
    section#lesson .tab-all .tab { margin: 15px 0; width: 30%; }
}


@media(max-width: 767px){
    section p, section ul li { line-height: 1.6; font-size: 1rem; }

    .title h2 { margin: 20px auto; display: inline-block; width: 80%; }
    .title h2::before{width: 25px;height: 25px;left: -25px;} 
    .title h2::after{width:25px;height: 25px;right: -25px;} 
    
    
    header#visual .header-photo img { width: 100%; }
    header#visual .header-title h1 { font-size: 4.8rem; letter-spacing: .1rem; }
    header#visual .header-title h2 { font-size: 1.3rem; letter-spacing: .1rem; }
    header#visual .header-title h2::before { width: 35px; height: 15px; left: -50px; top: 6px; }
    header#visual .header-title h2::after { width: 35px; height: 15px; right: -50px; top: 6px; }
    header#visual .header-title.active { position: relative; background-color: #296354; top: auto;left: auto;padding: 30px 10px;}

    header#visual .header-title.active h1 { font-size: 4.8rem; letter-spacing: .1rem; }
    header#visual .header-title.active h2 { font-size: 1.3rem; letter-spacing: .1rem; }
    header#visual .header-title.active h2::before {width: 35px; height: 15px; left: -50px; top: 6px; }
    header#visual .header-title.active h2::after {width: 35px; height: 15px; right: -50px; top: 6px; }


    /* 主視覺 */
    section#lesson .tab-all {display: none;}
    section#lesson .lesson-box .title h5 { display: none; }
    section#lesson .lesson-box .lesson-title { flex-direction: column-reverse; }
    section#lesson .lesson-box h2 { margin-left: 15px; font-size: 1.4rem; }
    section#lesson .lesson-box .lesson-title .lesson-logo { width: 100px; }
    section#lesson .lesson-box .con-all { flex-direction: column; }
    section#lesson .lesson-box .con-all .con:nth-child(1) { width:100%; margin-right:0; }
    section#lesson .lesson-box .con-all .con:nth-child(2) { width: 100%; margin-left:0px; margin-top: 15px; }


    section#article .photo img { width: 50%;margin-bottom: 40px; }
    section#article .bg-icon { width: 40%; }
    section#BTN .btn { width: 90%;font-weight: 600; }
    section#BTN .photo { width: 98%; margin: 0 auto 80px; }
}

@media(max-width: 575px){
    .container { padding: 15px; }

    h2{font-size: 1.6rem;}
    h3{font-size: 1.4rem;}
    h4{font-size: 1.2rem;}
    

}