*{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: #1951b8;transition: all .3s linear;}
a:hover{  color: #2eabfe;text-decoration: none; }
p a{ color: #1951b8;transition: all .3s linear;}
p 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 {font-size: 2.4rem;margin: 20px auto 0;font-weight: 600;display: inline-block;color: #000;}
.title h2 span{font-size: 2.4rem;color: #107C41;}
.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;}
.title .icon {width: 80px;}
.title .icon img {width: 80px;}
.title.center  .icon {margin: 0 auto;}

.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%;}  
.ml11 { font-weight: 800;font-size: 5rem;line-height: 6rem; }
.ml11 .text-wrapper { position: relative; display: inline-block; padding-top: 0.1em; padding-right: 0.05em; padding-bottom: 0.15em; }
.text1 .line , .text2 .line{ opacity: 0; position: absolute; left: 0; height: 100%; width: 3px; background-color: #107C41; transform-origin: 0 50%; }
.text1 .line ,.text2 .line{ top: 0; left: 0; }
.ml11 .letter { display: inline-block; line-height: 1em; }


/* 主視覺 */
header#visual {position: relative;padding: 80px 0;margin: 0;;width: 100%;background-color:#107C41;background: url(../images/header-bg.jpg) no-repeat;background-size: cover;height: 100vh;}
header#visual .photo {width: 80%;margin: 0px auto;}
header#visual .photo img{width: 100%;}
header#visual .text h1{font-weight: 800;font-size: 5rem;line-height: 6rem;color: #107C41;}
header#visual  h5 {font-size: 1.2rem;color: #808080;margin: 30px 0;}
header#visual .box {margin: 20px 0;width: 80%;border-radius: 5px;}
header#visual .box p{margin: 0;color: #000;font-size: 1.4rem;}
header#visual .box b{margin: 0;color: #000;font-size: 1.4rem;}

header#visual {font-size: 1.6rem;}
header#visual .btn {text-align: center;background-color: #107C41;font-size: 1.6rem;color: #fff;margin: 30px 0 0; }
header#visual .btn:hover {background-color: #219d58;}
header#visual .btn a {color: #fff;}



/* 痛點 */
section#pain {position: relative;padding: 100px 0;}
section#pain .item-all{display: flex;flex-wrap: wrap;margin: 20px 0;}
section#pain .item-all .item {width: 32%;text-align: center;border: 1px solid #e7e7e7;padding: 0 10px 20px;}
section#pain .item-all .item .icon {width: 80px;margin: 40px auto 20px; }
section#pain .item-all .item .icon img{width: 100%;}
section#pain .pain-con {position: relative;}
section#pain .photo {position: absolute;width: 40%;height:500px;bottom: 120px;right:0;
    background: url(../images/pain-photo.jpg) bottom ;background-size: cover;}



/* 全新推出課程 */
section#new {background-color: #fff;padding: 100px 0;}
section#new  {width: 100%;position: relative;z-index: 1;}

section#new .item-all {width:100%;z-index: 1;position: relative;margin: 40px 0;}
section#new .item-all .item{max-width:76%;margin: 0 auto;display: flex;align-items: center;padding: 40px 0;}



section#new  .item-all .item-bg{position: absolute;background-color: #F2F2F2;height: 100%;width: 90%;border-radius: 50px;display: flex;align-items: center;z-index: -1;top: 0;}
section#new  .item-all .item-bg.item-bg-l{border-radius: 0 50px 50px 0;left: 0;}
section#new  .item-all .item-bg.item-bg-r{border-radius:50px 0 0  50px;right: 0;}

section#new .item-bg h3 {font-weight: 600;}
section#new .item-all .item .photo {width: 300px;margin: 0 40px;}
section#new .item-all .item .photo img{width: 100%;}

section#new .item-all .item .text {width: 50%;display: flex;}
section#new .item-all .item .text .text-p{width: 80px;margin: 0 30px 0 0;}
section#new .item-all .item .text .text-p img{width: 80px;}
section#new .item-all .item .text h3{font-weight: 500;}
section#new .item-all .item .photo {width: 40%;text-align: center;}
section#new .item-all .item .photo img{width: 350px;margin: 0 auto;}
section#new .more  {text-align: center;height: 100px;}
section#new .more  h5{font-size: 1.4rem;}
section#new .more .icon {margin: 10px auto;width: 30px; animation: more_btn 1.2s ease infinite;}

@keyframes more_btn{
    0%{
        margin-top: 0;
    }
  
    100%{
        margin-top: 20px;
    }
}





section#path {background: url(../images/page-bg.jpg) repeat-y;background-size: 100%;padding: 100px 0;}
section#path .path {width:70%;margin: 0 auto;}

.lesson-bg-01:hover,.lesson-bg-02:hover,.lesson-bg-03:hover, .lesson-bg-04:hover{ -webkit-filter: brightness(110%); /* Safari */
    filter: brightness(110%);}
section#path .lesson-all {width: 80%;margin: 0 auto;}
section#path .lesson-all .lesson-box {margin: 60px 0;}
section#path .lesson-all .lesson-box h3 {text-align: center;}
section#path .lesson-all .lesson-box .lesson-title {border-radius: 5px;transition: all .3s linear;}
section#path .lesson-all .lesson-box .lesson-title {display:flex;justify-content: space-between;padding:10px 20px;border-radius: 5px;}
section#path .lesson-all .lesson-box .lesson-title h5{color: #fff;margin: 0;}
section#path .lesson-all .lesson-box:nth-child(1) .lesson-title {background-color: #62C252;}
section#path .lesson-all .lesson-box:nth-child(2) .lesson-title {background-color: #18A679;}
section#path .lesson-all .lesson-box:nth-child(3) .lesson-title {background-color: #21A0A3;}
section#path .lesson-all .lesson-box:nth-child(4) .lesson-title {background-color: #008172;}

section#path .lesson-all .lesson-box:hover {-webkit-filter: brightness(110%); /* Safari */
    filter: brightness(110%);}
section#path .lesson-all .lesson-box:nth-child(1) h3 {color: #62C252;}
section#path .lesson-all .lesson-box:nth-child(2) h3 {color: #18A679;}
section#path .lesson-all .lesson-box:nth-child(3) h3 {color: #21A0A3;}
section#path .lesson-all .lesson-box:nth-child(4) h3 {color: #008172;}
section#path .lesson-all .lesson-box ul li{color: #000;position: relative; list-style-type: none;margin: 10px 0;}
section#path .lesson-all .lesson-box ul li::before{ content: "\2713"; margin-right: 10px;color: #EF7150;}
section#path .lesson-video {width: 55%;margin: 0 auto;}

section#path .lesson-all .lesson-box .lesson-con{padding: 20px;}




/* 課程 */
section#discount .bg{padding: 20px 0;}
section#discount .photo{width: 100%;}
section#discount .photo img{width: 80%;}
section#discount .bg{width: 100%;background-color: #EF7150;}
section#discount .text h5 {color: #fff;font-size: 1.6rem;line-height:1.8;}
section#discount .text h5 span {color: #fff;font-size: 1.6rem;line-height:1.8;border-bottom: 4px solid #FFE197;}
section#discount .text h2 {color: #fff;font-weight: 600;font-size: 2.6rem;}

section#discount .text .btn {font-size: 1.4rem;font-weight: 600;color: #fff;padding: 8px 20px;background-color: #E68759;transition: all .3s linear;}
section#discount .text .btn:hover {background-color:#f4aa85;}
section#discount .text .btn a {color: #fff;}



/* 成果分享 */
section#share {padding: 100px 0;}
section#share h5 {color:#107C41;}
section#share .text-all {background-color: #F3F3F3;padding: 15px 30px;margin: 20px 0;}
section#share .text-all .text{margin: 20px 0;}
section#share .text-all .text:nth-child(2){border-top: 1px dashed #cccccc;}
section#share .text-all::after {content: ""; width: 0; height: 0; border-style: solid; border-width: 40px 0 40px 80px; border-color: transparent transparent transparent #F3F3F3; position: absolute; top: 20px; right: -10px; }
section#share .text-all.text-all-none::after {content: ""; display: none;}


section#share .photo {width: 60%;margin: 20px auto;text-align: center;}
section#share .photo img{width: 100%;}
section#share .photo p {margin: 10px 0;}

section#share a .btn{background-color: #107C41;color: #fff;}
section#share a:hover .btn{background-color: #219d58;}

/* 課程 */
section#article .bg{padding: 40px 0;}
section#article .photo{width: 100%;position: relative;height: 300px;}
section#article .photo img{width: 90%; position: absolute;left: 0;bottom: -42px;display: block;}
section#article .bg{width: 100%;background-color: #3A3A3A;}
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 .text {display: flex;align-items: center;}
section#article .text h5{color: #fff;margin: 0;}
section#article .text a .btn{background-color: #107C41;color: #fff;width: 100px;text-align: center;}
section#article .text a {margin:0;margin: 10px 30px;}
section#article .text a:hover .btn{background-color: #219d58;}



/* 講師 */
section#teacher {background: url(../images/page-bg.jpg) repeat-y;background-size: 100%;padding: 100px 0;}
section#teacher .text h3 {font-size: 2.2rem;}
section#teacher .text h3 span{font-size: 1.4rem;color: #107C41;}
section#teacher .photo {width:50%;margin: 0 auto;}
section#teacher .photo img{width:100%;}





/* 按鈕*/ 
section#BTN {position: relative;padding: 50px 0;background-color: #F3F3F3;}
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;} 
    
    /* 主視覺 */

}


@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: 100%;font-size: 1.6rem; }
    .title h2 span { font-size: 1.6rem; }
    .title h2::before{width: 25px;height: 25px;left: -25px;} 
    .title h2::after{width:25px;height: 25px;right: -25px;} 

    header#visual { padding: 30px 15px;height: auto;}
    header#visual .photo {width: 90%;margin:15px auto;}
    header#visual .box { width:100%; }
    header#visual .text h1 { font-size: 2.2rem; line-height: 2rem; }
    header#visual .text h5 { font-size: 1rem; margin: 20px 0; }

    header#visual .btn { white-space: inherit;text-align: left;}
    header#visual .btn a {font-size: 1.2rem;line-height: 1.2;}


    section#pain {padding: 100px 0 0;}
    section#pain .photo { position: relative; width:100%; height: 250px; bottom: -20px;}
    section#pain .item-all .item { width: 33%; }
    section#pain .item-all .item .icon { width: 60px; }

    section#path .lesson-all { width: 100%; }
    section#path .path { width: 100%; }
    section#path .lesson-all .lesson-box .lesson-title { display: flex; justify-content: space-between; padding: 10px 20px; border-radius: 5px; flex-direction: column; }
    section#path .lesson-all .lesson-box .lesson-title h5:nth-child(2){display: none;}


    section#new .item-all .item .photo img { width: 180px; }
    section#new .item-all .item-bg { height: 100%; width: 98%; }
    section#new .item-all .item { max-width:100%; flex-direction: column; }
    section#new .item-all .item .text{order: 2; width: 85%;margin: 30px 0 0; }
    section#new .item-all .item .photo{order: 1; }
    section#new .item-all .item .text .text-p { width: 60px; margin: 0 20px 0 0; }
    section#new .item-all .item .text .text-p img {
        width: 40px;
    }
 
    section#path .lesson-all .lesson-box .lesson-con ul{padding:0px;}
    section#path .lesson-video { width: 80%; }

    section#discount .photo { width: 80%;margin:20px auto; }
    section#discount .text h2 { font-size: 1.6rem; }
    section#discount .text h5 { font-size: 1.4rem; line-height: 1.8; }
    section#discount .text h5 span { font-size: 1.4rem; }


    section#share .photo { width: 30%; }
    section#share .text-all::after {content: ""; position: absolute; top: 20px; right: auto; left:50%; transform-origin: center;transform: translate(-50%,-50%); border-width: 0 50px 50px 50px; border-color: transparent transparent #F3F3F3 transparent; }
  
  
    section#teacher .photo { width:30%; margin: 0 auto 40px; }



    section#article .photo img { width: 90%; position: relative; bottom: 0;margin: 40px auto 0; }
    section#article .text a { margin: 0; margin: 25px 10px; }
    section#article .photo img { width: 100%; }

    section#teacher {
        background: url(../images/page-bg.jpg) repeat-y;
        background-size: 100%;
        padding: 100px 0 0;
    }
}










    

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

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




    section#path .lesson-video { width: 100%; }

}