*{font-family: 'Noto Sans TC','微軟正黑體',sans-serif; }
body{ font-family: 'Noto Sans TC','微軟正黑體',sans-serif; overflow-x: hidden;background-size: cover;
    background: url('../images/bg.gif') repeat;background-size: 30px;background-attachment: fixed;}
html,body{font-size:16px ;    overflow-x: hidden;}
h1,h2,h3,h4,h5,h6,p,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;}


.video { position: absolute;width: 800px; height: 800px; right: 0px;top: 80px;overflow: hidden; border-radius: 50%;position: absolute;display: block;}
.videio-mask {background: radial-gradient(circle at center,transparent 50%,#191c32 95%); height:100%;width: 100%;position: relative;z-index: 99;}
.sibling { position: absolute; top: 0; right: 0; pointer-events: none; width: 100%; height: 100%; background-color: #0d0f1e; mix-blend-mode: lighten;z-index: 1;}
.video video { width: 170%; opacity: 1;  
    mix-blend-mode: lighten;  position: absolute; top: 5%; left: -32%;}


header#visual .c-container .photo {margin-top:40px;position: relative;}
header#visual .c-container .photo .cir {border-radius: 100%;display: flex;align-items: center;justify-content: center;flex-direction: column;position: absolute;width:300px;}
header#visual .c-container .photo .cir img {width:300px;}
header#visual .c-container .photo .cir.cir-1 {left:250px;bottom:400px;}
header#visual .c-container .photo .cir.cir-2 {left:120px;bottom: 170px;}
header#visual .c-container .photo .cir.cir-3 {right: 120px;bottom: 170px;}
    




/* 主視覺 */
header#visual {position: relative;padding: 60px; background-size: 40px;height: 100vh;width: 100%;background: url('../images/header-bg.jpg');background-size: cover;}
header#visual .text h1 , header#visual .text h2 {margin: 0;padding: 0;line-height: 1.18;}
header#visual .text h1 {font-size: 6rem;margin: 0 0 40px;font-weight: 800;}
header#visual .text h1 span{color: #F72A48;}
header#visual .text h2 {font-size: 2.5rem;}
header#visual .text p {font-size: 1.4rem;}
header#visual .con-flex {display: flex;}
header#visual .con-flex .text {width: 50%;}
header#visual .con-flex .photo {width: 50%;} 
header#visual .con-flex .photo img{width: 100%;} 
header#visual .header-btn {background-color: #F72A48;padding:5px 60px;border-radius:15px;display: inline-block;font-size: 1.4rem;color: #fff;margin-top: 20px;transition: all ease-in .15s;}

header#visual .header-btn:hover {background-color: #ff6e84;}



/* 優缺點 */
section#advantage{position: relative;background-color: #F72A48;}
section#advantage .box {border-radius: 30px;background-color: #fff;padding: 30px;margin: 0 auto 40px;}
section#advantage .box .line {width:60px;height: 8px;background-color: #F72A48;margin: 5px auto 10px;}
section#advantage .box h2 {text-align: center;line-height: 1.4;font-weight: 600;margin: 0 0 20px;}
section#advantage .box h2 span {color: #E32124;}
section#advantage .box a {color: #ff6e84;transition: all ease-in .15s;}
section#advantage .box a:hover {color: #E32124;}


section#advantage .box .item-g {display: flex;flex-wrap: wrap;justify-content: center;margin: 30px auto 0;}
section#advantage .box .item-g .item{width: 33%;text-align: center;}
section#advantage .box .item-g .item .icon {width: 160px;margin: 20px auto;}
section#advantage .box .item-g .item .icon img{width: 100%;}
section#advantage .box .item-g .item p{text-align: center;}
section#advantage .box .item-g .item h4 {background-color: #F72A48;padding: 4px 10px;color: #fff;border-radius: 10px;width: 70%;margin: 0 auto 10px;}
section#advantage .box .item-g .item:nth-child(1){border-right: 1px solid #cccccc;border-bottom: 1px solid #cccccc;}
section#advantage .box .item-g .item:nth-child(2){border-right: 1px solid #cccccc;border-bottom: 1px solid #cccccc;}
section#advantage .box .item-g .item:nth-child(3){border-right: 0px solid #cccccc;border-bottom: 1px solid #cccccc;}
section#advantage .box .item-g .item:nth-child(4){border-right: 1px solid #cccccc;border-bottom: 0px solid #cccccc;}
section#advantage .box .item-g .item:nth-child(5){border-right: 1px solid #cccccc;border-bottom: 0px solid #cccccc;}
section#advantage .box .item-g .item:nth-child(6){border-right: 0px solid #cccccc;border-bottom: 0px solid #cccccc;}



section#advantage .box .photo {margin: 0 auto;width: 80%;}


section#advantage .box .photo img{width: 100%;}



























/* 課程 */
section#lesson {position: relative;padding: 60px 0 0;}
section#lesson .con-title {text-align: center;}
section#lesson .con-title h3{display: inline-block;padding:5px 30px;margin: 0 auto 30px;font-size: 2rem;font-weight: 600;position: relative;color: #E32124;}
section#lesson .con-title h3::before {content: "";position: absolute;width: 300px;height: 1px;background-color: #E32124;left: -300px;transform: translateY(1.6rem);}
section#lesson .con-title h3::after {content: "";position: absolute;width: 300px;height: 1px;background-color: #E32124;right: -300px;transform: translateY(1.6rem);}

section#lesson .con-title h4{margin: -15px auto 30px;font-size: 1.6rem;background-color: #E32124;display: block;width: 250px;border-radius: 30px;color: #fff;}




section#lesson .con-title .icon {width: 150px;margin: 0 auto;}
section#lesson .con-title .icon img{width: 100%;mix-blend-mode: multiply;opacity: .9;}
section#lesson .container {padding: 100px 15px;}
section#lesson .container-bg .container .box .con-flex .feedback-flex{background-color:#FFE0E0;position: relative;margin: 0px 0 20px;}


section#lesson .container-bg .container .box .con-flex .feedback-flex::after{content: "▶";font-size: 3rem;color: #FFE0E0;position: absolute;}
section#lesson .container-bg .container .box .con-flex .feedback-flex.l-arrow::after {left:-30px;top: 25%;transform: scale(-1) translateY(-50%);}
section#lesson .container-bg .container .box .con-flex .feedback-flex.r-arrow::after {right:-30px;top: 50%;transform: scale(1) translateY(-50%);}
section#lesson .container-bg .container .box .con-flex .feedback-flex.t-arrow::after {left:45%;top: -10px;transform: scale(1) translateY(-50%) rotate(-90deg);}




section#lesson .box .con-flex .feedback-flex {background-color:#F2F2F2;width: 49%;display: flex;padding: 30px;min-height: 280px;margin:0 0 20px;position: relative;}


section#lesson .box .con-flex .feedback-flex::after{content: "▶";font-size: 3rem;color: #F2F2F2;position: absolute;}
section#lesson .box .con-flex .feedback-flex.l-arrow::after {left:-30px;top: 25%;transform: scale(-1) translateY(-50%);}
section#lesson .box .con-flex .feedback-flex.r-arrow::after {right:-30px;top: 50%;transform: scale(1) translateY(-50%);}
section#lesson .box .con-flex .feedback-flex.t-arrow::after{left:45%;top: -10px;transform: scale(1) translateY(-50%) rotate(-90deg);}

section#lesson .line {width: 100%;height: 100px;}





section#lesson .box .con-flex{display: flex;justify-content: space-between;margin: 30px 0 60px;}
section#lesson .box .con-photo {width: 49%;text-align: center;}
section#lesson .box .con-photo img{width:80%;margin: 0 auto;}
section#lesson .box .con-text {width: 49%;}
section#lesson .box .con-text .lesson-title a{font-size: 1.4rem;font-weight: 600; margin: 0 0 15px;color: #fa4548;transition: all 0.3s ease-in;display: block;}
section#lesson .box .con-text .lesson-title a:hover {color: #ff777a;}





section#lesson .box .con-flex .feedback-flex .person {width: 500px;text-align: center;margin-right: 20px;}
section#lesson .box .con-flex .feedback-flex .person .person-photo {width: 80px;margin: 0 auto 20px;}

.container-bg {background-color: rgba(255, 221, 221, 0.4);}
.container-bg.high {padding: 0 0 250px;}


section#lesson .box .con-text .feedback-flex {width: 100%;}



/* 按鈕 */
section#btnLink {position: relative;;padding: 0;background-color: rgba(255, 221, 221, 0.4);padding: 0 0 40px;}

section#btnLink .bg {position: absolute;background: url('../images/footer-bg.png') no-repeat center -50px ;background-size: cover;width: 100%; height: 500px; bottom:0; left: 0; z-index: 0;


}
section#btnLink .container {position: relative;z-index: 99;}
section#btnLink .master-flex {display: flex;justify-content: center;align-items: center;z-index: 999;}
section#btnLink a .btn {font-size: 2rem;padding: 5px 30px;background-color: #fff;border-radius: 5px;margin: 0 auto;margin-top: -100px;color: #E32124;font-weight: 600;display: inline-block;text-wrap: wrap;}
section#btnLink a .btn:hover {color: #ff777a;}







@media(max-width:1600px){


    

}



@media(max-width:1440px){
     /* 主視覺 */
     .container { max-width: 90%; }
     header#visual {height: auto;background: url(../images/header-bg.jpg) 0 -200px ;padding: 0;}
     header#visual .con-flex .text { padding:40px  0 180px; }
     header#visual .text h1 {font-size: 4rem;}
     header#visual .text h2 {font-size: 1.4rem;}
     header#visual .text p {font-size: 1.2rem;}


 
     section#btnLink .bg {background: url('../images/footer-bg.png') no-repeat center -60px ;height: 500px;}

    
}



@media(max-width:1366px){
    /* 主視覺 */



 
}








@media(max-width:991px){
    .container { max-width: 90%;padding: 20px; }
    header#visual {padding: 20px 0;}
    header#visual .c-container { flex-direction: column; padding: 0px; max-width: 100%;  }
    /* 主視覺 */
    header#visual .text h1 {line-height: 1.2;    margin: 0 0 20px;font-size: 3rem;}
    header#visual .text h1 span {line-height: inherit;}
    header#visual .text h2 {font-size: 1.4rem;line-height: 1.2;}
    header#visual .text p { font-size: 1.05rem; }
    header#visual .con-flex .photo { width: 100%; }

    header#visual .header-btn { font-size: 1.2rem; }










}


@media(max-width: 767px){
    section p, section li, section a { font-weight: 400; font-size: 1.05rem; }
    .container { max-width: 96%;padding: 20px; }
    section#lesson .con-title .icon { width: 110px; }


    header#visual .con-flex { display: flex;flex-direction: column; }
    header#visual .con-flex .text { width: 100%;padding: 15px; }

    section#advantage .box .item-g { flex-wrap: wrap; justify-content: space-between;}
    section#advantage .box .item-g .item { width: 50%;; padding:0 15px;}
    section#advantage .box .item-g .item .icon { width: 100px; margin: 20px auto; }
    section#advantage .box { padding:15px; }
    section#advantage .box .item-g .item h4 { padding: 8px 10px; width:98%; font-size: 1rem; line-height: 1.2; }
    section#advantage .box .item-g .item p {font-size: 1.05rem;}
    section#advantage .box h2 { font-size: 1.5rem; }

    section#advantage .box .item-g .item:nth-child(1){border-right: 1px solid #cccccc;border-bottom: 1px solid #cccccc;}
    section#advantage .box .item-g .item:nth-child(2){border-right: 0px solid #cccccc;border-bottom: 1px solid #cccccc;}
    section#advantage .box .item-g .item:nth-child(3){border-right: 1px solid #cccccc;border-bottom: 1px solid #cccccc;}
    section#advantage .box .item-g .item:nth-child(4){border-right: 0px solid #cccccc;border-bottom: 1px solid #cccccc;}
    section#advantage .box .item-g .item:nth-child(5){border-right: 1px solid #cccccc;border-bottom: 0px solid #cccccc;}
    section#advantage .box .item-g .item:nth-child(6){border-right: 0px solid #cccccc;border-bottom: 0px solid #cccccc;}
    


    section#advantage .box .photo {width: 100%;}



    section#lesson .container-bg .container .box .con-flex .feedback-flex { margin: 40px 0 60px; }


    section#lesson .container-bg .container .box .con-flex .feedback-flex.l-arrow::after {left:45%;top: -10px;transform: scale(1) translateY(-50%)  rotate(-90deg);}
    section#lesson .container-bg .container .box .con-flex .feedback-flex.r-arrow::after {right:45%;top: -10px;transform: scale(1) translateY(-50%)  rotate(-90deg);}
    section#lesson .container-bg .container .box .con-flex .feedback-flex.t-arrow::after {left:45%;top: -10px;transform: scale(1) translateY(-50%) rotate(-90deg);}

    section#lesson .box .con-flex .feedback-flex.l-arrow::after {left:45%;top: -10px;transform: scale(1) translateY(-50%)  rotate(-90deg);}
    section#lesson .box .con-flex .feedback-flex.r-arrow::after {right:45%;top:-10px;transform: scale(1) translateY(-50%)  rotate(-90deg);}
    section#lesson .box .con-flex .feedback-flex.t-arrow::after{left:45%;top: -10px;transform: scale(1) translateY(-50%) rotate(-90deg);}

    section#lesson .con-title h3 { font-size: 1.8rem; }
    section#lesson .con-title h4 { font-size: 1.3rem; width: 200px; }

    section#lesson .box .con-flex { flex-direction: column; }
    section#lesson .box .con-text { width: 100%; }
    section#lesson .box .con-flex .feedback-flex { width: 100%; display: flex; padding: 15px; min-height: auto;margin: 20px 0 ; }
    section#lesson .box .con-photo { width: 90%; margin: 0 auto; }
    section#lesson .box .con-photo img { width: 100%; }
    section#lesson .box .con-text .lesson-title a { line-height: inherit;font-size: 1.3rem; }

    section#btnLink .bg {background: url('../images/footer-bg.png') no-repeat center  0px;width: 100%; height: 500px; }
    section#btnLink a .btn { font-size: 1.6rem; }


}

@media(max-width: 575px){
    header#visual .c-container .title .title-text h1 { font-size: 2.1rem;line-height: 1.4; }
    header#visual .c-container #sub .text p { font-size: 1.1rem; line-height: 1.6; }
    .title h2 { font-size: 1.8rem; }
}