*{font-family: 'Noto Sans TC','微軟正黑體',sans-serif; }
body{ font-family: 'Noto Sans TC','微軟正黑體',sans-serif;background-attachment: fixed;background: url(../images/main-bg.jpg) top  / 100% ;}
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;}
section p,section li{font-weight: 400;font-size: 1.1rem;line-height: 1.8;color: #333;}

a{ color: #c74420;transition: all .3s linear;}
a:hover{  color: #ff9477;text-decoration: none;}
p a{ color: #c74420;transition: all .3s linear;}
p a:hover{  color: #ff9477;text-decoration: none;}

.photo img{width: 100%;}

/* 輪播 */
.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span { background: #ff7876 !important; }
.owl-theme .owl-dots .owl-dot span, .owl-theme .owl-dots .owl-dot span { background: #c5b9b6 !important; }



/* 浮動快速 */
.floatBtn { display: block; position: fixed; right: -20px; top: 80px; z-index: 200; }
.floatBtn .floatBtn-1{border:2px solid #FF9B50;background-color: #fff;}
.floatBtn .floatBtn-2{background-color: #FF9B50;}
.floatBtn .floatBtn-1 ,.floatBtn .floatBtn-2  {padding: 10px; text-align: center;margin: 0 20px;} 
.floatBtn .floatBtn-1 img,.floatBtn .floatBtn-2 img {width: 40px;} 




/* 共通 */
section {padding: 80px 0;position: relative;}
.big-con .big-btn { width: 80%; }
.responsive img {width: 100%;}
.container{max-width:80%;}
.modal-lg { max-width:48%;margin: 0 auto; }

.mater-title {margin:10px 0 20px;}
.mater-title.center {text-align: center;margin: 10px auto 20px;}
.mater-title h3 {font-size: 2.2rem;font-weight: 600;display: inline-block;color: #005bac;}
.mater-title p {font-size: 1.3rem;line-height: 2rem;}
.mater-title h5 {font-weight: 400;line-height: 1.6;}
.mater-title .line {width: 90px; height: 3px;background-color: #005bac;border-radius:15px ;margin: 5px 0 30px;}
.mater-title.white .line{background-color: #fff;}

.mater-title.white h3 ,.mater-title.white h5{color: #fff;}
.mater-title .cir-g {display: flex;width: 100px;margin: 0 auto 10px;justify-content: space-around;}
.mater-title .cir-g .cir{width: 15px;height: 15px;border-radius: 30px;background-color: #1ABAB4;}
.mater-title.white  .cir-g .cir{background-color: #FFEEB8;}

.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%;}  

.big-con {width: 100%;text-align: center;margin: 40px auto 20px;}
.big-con .big-btn {border: 2px solid #005bac;border-radius: 15px;display: inline-block;padding: 15px 10px;width: 40%;}
.big-con .big-btn h5 {margin: 0;}
.big-con  a {color: #005bac;transition: all .3s ease-in;    font-size: 1.5rem;}
.big-con  a:hover .big-btn{background-color: #005bac;}
.big-con  a:hover {color: #fff;}

.big-con  a h5 {font-size: 1.5rem; }










/* 主視覺 */

#top-btn-g-con {position: fixed;background-color: #fff;width: 100%;top: 0;padding: 5px 0;z-index: 9999;box-shadow: 0 0 50px rgba(85, 85, 85, 0.4) ;}
#top-btn-g-con .con {padding:0 20px;width: 85%;margin: 0 auto;}
#top-btn-g-con .top-btn-g {display: flex;}
#top-btn-g-con .top-btn-g .top-btn{font-size: 1.2rem;padding: 5px 15px;transition: all .2s ease-in;}
#top-btn-g-con .top-btn-g .top-btn a{margin: 0;color: #000;display: block;}
#top-btn-g-con .top-btn-g .top-btn:hover a{color: #005bac;}


header#visual {position: relative;}
header#visual .con {padding: 0 2%;width: 85%;margin: 80px auto 20px;}
header#visual .header-box {padding: 40px;width: 100%;border-radius: 60px;height: 600px;display: flex;align-items: center;background: url('../images/header-bg.jpg') center right / cover;}

header#visual .header-box .master-title h1,header#visual .header-box .master-title h2{color: #fff;line-height: 1.5;}
header#visual .header-box .master-title h1 {font-size: 3.6rem;font-weight: 700;}

header#visual .header-box .master-title h2 {font-size: 2.4rem;font-weight: 300; padding:5px 15px;border-radius: 20px;border: 2px solid #fff;display: inline-block;}
header#visual .header-box .master-title {width: 50%;}
header#visual .header-box .master-photo {width: 50%;padding: 30px;}
header#visual .header-box .master-photo img{width: 100%;}



/* 介紹 */
section#introduce {padding: 40px 0 80px ;}
section#introduce .box-all .box {position: relative;border-radius: 60px;background-color: #fff;padding: 60px;margin:40px 0;}
section#introduce .box-all .box h3{margin: 0 0 20px;}
section#introduce .box-all .box h3 span{color: #005bac;padding: 2px 10px;border: 2px solid #005bac;border-radius: 10px;margin:0 5px  0;
    font-size: 1.25rem;display: inline-block;}
section#introduce .box-all .box .photo {width: 65%;margin: 20px auto;}
section#introduce .box-all .box ol{padding: 0;margin-left:25px;}
section#introduce .box-all .box p span {color: #ee4266;}


/* 課程 */
section#lesson {background-size: 40px;background-color: #fff;}
section#lesson .box{width: 80%;margin: 0 auto;}
section#lesson .table-all a{color: #313542;}
section#lesson .table-all a:hover{color: #0087fc;}
section#lesson .table-all {display: flex;margin: 40px 0;}
section#lesson .table-all .table-con-g  {width: 25%;border-radius: 30px 30px 0 0;position: relative;}
section#lesson .table-all .table-con-g .table-con-title  {background-color: #00ac9f;padding: 10px 10px;}

section#lesson .table-all .table-con-g:nth-child(1) .table-con-title {background: linear-gradient(to right, #02b349, #00ac87);}
section#lesson .table-all .table-con-g:nth-child(2) .table-con-title {background: linear-gradient(to right, #00ac87, #0095ac);}
section#lesson .table-all .table-con-g:nth-child(3) .table-con-title {background: linear-gradient(to right, #0095ac, #07a3dc);}
section#lesson .table-all .table-con-g:nth-child(4) .table-con-title {background: linear-gradient(to right, #07a3dc, #2e79e1);}




section#lesson .table-all .table-con-g .table-con-title:last-child  {content: ""; position: absolute;width: 50px;;}
section#lesson .table-all .table-con-g .table-con-title h4 {margin: 0;text-align: center;color: #fff;}
section#lesson .table-all .table-con-g:first-child .table-con-title{border-radius: 30px 0 0 0 ;}
section#lesson .table-all .table-con-g:last-child .table-con-title{border-radius:0  30px 0 0 ;}

section#lesson .table-all .table-con-g:nth-child(even) {background-color: #e5e9f0;}
section#lesson .table-all .table-con-g:nth-child(odd) {background-color: #f3f5f9;}
section#lesson .table-all .table-con-g .table-con {padding: 15px 30px;}
section#lesson .table-all .table-con-g .table-con ul {padding: 0 0 0 25px;}
section#lesson .table-all .table-con-g .table-con ul.title-c li {margin: 0;}
section#lesson .table-all .table-con-g .table-con ul li span {color:#ee4266;font-size: .9rem;line-height: 1.4;display: inline-block;}
section#lesson .table-all .table-con-g .table-con p {color:#555 ;font-size: .9rem;}

section#lesson .table-all .table-con-g.skillTrain.table-con-g-flex {display: flex;} 
section#lesson .table-all .table-con-g.skillTrain.table-con-g-flex .table-con-g-con {width: 100%;overflow: hidden;}

section#lesson .table-all-g {display: flex;justify-content: space-between;}
section#lesson .table-all-g .table-con-g {width: 100%;}
section#lesson .table-all.skillTrain {width: 68% !important;}



section#lesson .table-all.skillTrain .table-con-g .table-con-title {background:  linear-gradient(to right, #ff6a25, #ffd70e);;padding: 10px 10px;border-radius: 30px 30px 0 0;}

section#lesson .table-all.skillTrain .table-con-g .con-flex {display: flex;justify-content: space-between;}

section#lesson .table-con-photo {border-radius: 30px;overflow: hidden;margin-top: 40px;width: 30%;background:url(../images/lesson-photo.jpg) center;background-size: cover;}
section#lesson .table-con-photo img {width: 100%;}



section#lesson .table-all .table-con-g .arrow {position: absolute;width: 50px;transform: translate(0%,-50%);top: 46%;right: -28px;z-index: 99;}
section#lesson .table-all .table-con-g .arrow img{width:50px;}


/* 優勢 */
section#advantage {background-color: #005bac;}
section#advantage .box {background-color: #fff;border-radius:30px;padding: 30px;margin: 30px 0;min-height: 400px;}
section#advantage .box .icon {width:15%;margin: 30px auto;}
section#advantage .box h4 {color: #005bac;text-align: center;border-bottom: 1px solid #aaaaaa;padding: 15px;}





/* 學習成果實錄 */
section#achievement {padding: 80px 0;}
section#achievement .box{background-color: #fff;border-radius:30px;padding: 30px;margin: 30px 0;min-height: 400px;}

section#achievement .name-g{display: flex;width: 100%;margin: 0 0 20px;align-items: center;}
section#achievement .name-g.line {border-bottom: 1px solid #aaaaaa;padding:0 0 20px;}
section#achievement .name-g .photo-icon {background-color: #7d3535;width:70px;height:70px;border-radius: 100px;margin: 0 15px 0 0;background-size: cover;}
section#achievement .name-g .name h4{margin: 0;color: #005bac;}
section#achievement .name-g .name p {margin: 0;font-size: 1rem;line-height: 1.6;}
section#achievement .name-g .name {width: 80%;}












/* 按鈕*/ 
section#BTN {position: relative;padding: 40px 0 ;background-color: #005bac}
section#BTN  .btn{ position: relative;text-align: center;background-color: transparent; display: block;transition: all .3s linear;border-radius: 10px;border: 3px solid #fff;padding: 15px 10px;width: 80%;margin: 20px auto;}
section#BTN  .btn:hover{background-color: #fff;}
section#BTN  .btn h5{margin: 0;padding: 0; font-weight: 600;color: #fff;font-size: 1.5rem;}
section#BTN  .btn:hover h5 {color: #005bac;}
section#BTN a { text-decoration: none; }




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



}

@media(max-width:1440px){
     /* 主視覺 */
     .container, #top-btn-g-con .top-btn-g { max-width: 90%; }
     #top-btn-g-con .top-btn-g .top-btn { font-size: 1.2rem; }
 
}


@media(max-width:991px){
    .container , #top-btn-g-con .top-btn-g{ max-width: 96%; }
    .mater-title h3 { font-size: 1.6rem; }

    #top-btn-g-con { padding:8px 10px; }

    section p, section li { font-size: .95rem; }

    /* 主視覺 */
    header#visual .header-box { padding: 30px; width: 100%;height:  500px;}
    header#visual .con {padding: 0 2%;width: 95%;}
    header#visual .header-box .master-title { width: 90%; }
    .big-con header#visual .con, #top-btn-g-con .con { width: 100%; }
    section#introduce .box-all .box .photo { width: 100%; }

    section#lesson .table-all .table-con-g .table-con-title h4 { font-size: 1rem; }
    section#lesson .table-all .table-con h5 {font-size: 1rem;}
 

}


@media(max-width: 767px){
    section p, section ul li { line-height: 1.6; font-size: 1rem; }
    section { padding: 40px 0; }
    .mater-title h3 { font-size: 1.6rem; }
    .mater-title p { font-size: 1.15rem;  }
    .container, #top-btn-g-con .top-btn-g { max-width: 100%; }
    .big-con .big-btn { width: 100%; }
    .big-con a h5 { font-size: 1.2rem; }



    header#visual .header-box { padding: 30px; flex-direction: column;}
    header#visual .header-box .master-title { width:100%; }
    header#visual .header-box .master-title h1 { font-size: 2.4rem; font-weight: 700; }
    header#visual .header-box .master-title h2 { font-size: 1.8rem; }
    header#visual .header-box .master-photo { width:100%; padding:0px; }
    header#visual .header-box { height: auto; margin: 120px auto 20px;} 





    section#introduce .box-all .box { padding: 20px; }
    section#introduce .box-all .box h3 { font-size: 1.2rem; }
    section#introduce .box-all .box h3 span { font-size: 1.2rem; }

    section#lesson .table-all { display: flex; flex-direction: column; }
    section#lesson .table-all .table-con-g { width: 100%; border-radius: 30px; margin: 0 0 40px; }
    section#lesson .table-all .table-con-g .arrow { transform: translate(-50%, -50%); top:auto; bottom: -8%; right: 45%; transform: rotate(90deg); }
    section#lesson .table-all .table-con-g .table-con-title{border-radius: 30px 30px 0 0;}
    section#lesson .table-all .table-con-g:first-child .table-con-title{border-radius: 30px 30px 0 0;}
    section#lesson .table-all .table-con-g:last-child .table-con-title{border-radius: 30px 30px 0 0;}
    section#lesson .table-all .table-con-g .table-con { padding: 15px 20px; }


    section#lesson .table-con-photo { display: none; }
    section#lesson .table-all.skillTrain { width: 100% !important; }




    section#advantage .box { margin: 10px 0;padding:20px; }
    section#advantage .box .icon { width: 25%; }
    section#advantage .box { min-height: auto; }
    section#achievement .box { margin: 10px 0; min-height: auto;padding: 20px; }
  
   

    section#BTN .btn { width: 100%; }
    section#BTN .btn { font-size: 1.2rem; }




}






@media(max-width: 575px){
    .container { padding: 15px; }
    .mater-titlee h3 { font-size: 1.6rem; }
    .mater-title h4 { font-size: 1.3rem; }
    h2{font-size: 1.6rem;}
    h3{font-size: 1.3rem;}
    h4{font-size: 1.2rem;}
    h5{font-size: 1.1rem;}










}