*{font-family: 'Noto Sans TC','微軟正黑體',sans-serif; }
body{ font-family: 'Noto Sans TC','微軟正黑體',sans-serif; overflow-x: hidden;background-attachment: fixed;}
h1,h2,h3,h4,h5,h6,p,span,a{line-height: 1.6;}
section p,section li{font-weight: 400;font-size: 1.1rem;}

a{ color: #FF8300; text-decoration: none;transition: color .15s ease-in-out;}
a:hover{  color: #ff4c00; text-decoration: none;}


.videobox { position: relative; width: 100%; height: 0; padding-bottom: 56.25%; }
.videobox iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }


/* 共通 */
section {padding: 100px 0;}
.responsive-img {width: 100%;}
.title {margin: 0 0 20px;}
.title.center {text-align: center;}
.title h2,.title h3{margin: 0;padding: 0;}
.title h2{margin-top: -20px;font-weight: 700;}
.title h3{font-family: 'Anton', sans-serif;font-weight: 900;font-size: 4rem;color: #e3e3e3;}
.title h4{font-weight: 700;}
.container{max-width: 70%;}
.line {border: 1px solid #e3e3e3;}

/* 主視覺 */
header#visual {position: relative;background: url(../images/header-bg.jpg)  center no-repeat;background-size: cover; }
header#visual .header-content {padding: 150px 0 150px 60px;display: flex;flex-direction: column;justify-content: center;}
header#visual .header-content .logo {width: 300px;}
header#visual .header-content .logo img{width: 100%;}
header#visual .header-content .header-title {margin: 80px 0 0;}
header#visual .header-content .header-title h1 {font-size: 3rem;font-weight: 700;color: #ff0000;background-color: #fff;
    padding: 0px 10px;    display: inline-block;line-height: 80px;margin: 0;}
header#visual .header-content .header-title h2 {font-size:2rem;font-weight: 700;color: #fff;background-color: #ff0000;
    padding: 0px 10px;    display: inline-block;line-height: 80px;margin: 0;}
header#visual .header-photo {position: relative;}
header#visual .header-photo  {position: relative;width: 60%;margin: 60px 0;}
header#visual .header-photo  .cct-logo {transform-origin: center center;position: absolute;width: 80%;top:0%;left:0%;}
header#visual .header-photo  .cct-logo img{width: 100%;}
header#visual .header-photo  .cct-logo-bg {animation: cctBg  10s linear infinite; position: absolute;width: 100%;transform-origin: center;top:-40px;left:-10%;}
header#visual .header-photo  .cct-logo-bg img{width: 100%;}

@keyframes cctBg {
    0% { transform: rotate(0); }
   100%{ transform: rotate(360deg); }
}

/* 不同 */
section#different{position: relative;overflow: hidden;background: url(../images/carousel-bg.jpg) repeat ;background-size: 20px;}
section#different .box .photo{width: 60%;margin: 20px auto 0px;}
section#different .box .photo img{width: 100%;}
section#different .box h5{text-align: center;font-weight: 600;}


/* 課程 */
section#lesson{position: relative;background-color: #F8F8F8;}
section#lesson .info {display: block;margin: 20px auto 0;text-align: center;}
section#lesson .info span{margin: 0 10px;color: #888;}
section#lesson .info span i{margin-right:5px;color: #ff0000;}

section#lesson .row{margin: 40px 0;}
section#lesson .row .box ul {padding:0 15px ;}
section#lesson .row .box ul > li {margin: 10px 0; }

section#lesson .row .box ul > li{list-style: none;position: relative;margin: 40px 0;display: flex;align-items: center;}
section#lesson .row .box ul > li .icon{width:60px;margin-right: 10px;}



/* section#lesson .row .box ul > li:before{
    content: '';
    position: absolute;
    display: inline-block;
    height: 20px;
    width: 20px;
    left: -30px;
    top:2px;
    background-image: url('../images/li-icon.svg') ;
} */
section#lesson .row  .photo {width: 90%;margin-left: 10%;   border-radius: 10px;overflow: hidden;}
section#lesson .row  .photo img{width: 100%;}
section#lesson .lesson-all  {display: flex;align-items: center;}
section#lesson .lesson-all .lesson-all-item-1,section#lesson .lesson-all .lesson-all-item-2 {display: flex;align-items: center;width: 100%;justify-content: center;}
section#lesson .lesson-all .lesson-item {width:100%;}
section#lesson .lesson-all .lesson-item h5 {width: 100%;text-align: center;margin: 0; color: #fff;font-size: .9rem;}
section#lesson .lesson-all .lesson-item.red {outline: 4px solid red;}
section#lesson .lesson-all .lesson-item.red .text{background-color: red;}
section#lesson .lesson-all .lesson-item .text{display: flex;align-items: center;background-color: #c3c3c3;height: 50px;}
section#lesson .lesson-all .lesson-item {outline: 4px solid #c3c3c3;}
section#lesson .lesson-all .lesson-item .logo {width: 100%;padding: 5px;}
section#lesson .lesson-all .lesson-item .logo img{width: 100%;}
section#lesson .lesson-all .arrow {width: 15px;}
section#lesson .lesson-all .lesson-item a{display: block;}
section#lesson .lesson-all .lesson-item:hover{transform: translateY(-5px);}

.mt-40 {margin-top:40px ;}

/* svg樣式 */
#path .st0{fill:#EAEAEA;}
#path .st1{fill:#231815;}
#path .st2{fill:none;stroke:#231815;stroke-width:1.0497;stroke-miterlimit:10;}
#path .st3{fill:#040000;}
#path .st4{fill:#E71F19;}
#path .st5{fill:#030000;}
#path .st6{fill:#FFFFFF;}
#path .st7{fill:#B91B2F;}
#path .st8{fill:#D8281C;}
#path .st9{fill:#070002;}
#path a {opacity: .8;transition: all .3s ease-in;}
#path a:hover {-webkit-filter:brightness(1.1);opacity: 1;}




section#path {position: relative;background: url(../images/carousel-bg.jpg) repeat ;background-size: 20px;}
section#path .lesson-all{width: 100%;}











/* 優惠 */
section#discount{position: relative;background-color: #ff0000;}
section#discount .box{background-color: #fff;border-radius: 10px;width: 100%;display: flex;justify-content: space-between;  overflow: hidden;}
section#discount .box .photo{width: 45%;background: url(../images/discount-bg.jpg) no-repeat center;background-size: cover;}
section#discount .box .text {width: 55%;padding: 40px 25px;}
section#discount .box .text ol {margin: 10px 0 20px;padding-left:20px; }
section#discount .box .text ol > li {position: relative;margin: 5px 0; }
section#discount .box .text p {margin-bottom: 10px;}
section#discount .box .text p span{color:#ff0000;}
section#discount .box h2 {font-weight: 700;color:#ff0000 ;}
section#discount .box .icon {display: flex;align-items: center;margin: 20px 0 0;}
section#discount .box .icon img{width: 30px;margin-right: 5px;margin-top:-10px;}




#carousel {background: url(../images/carousel-bg.jpg) repeat ;background-size: 20px;}
#carousel .carousel-item {width: 80%; margin: 20px auto;}

/* 輪播 */
.carousel-item .owl-nav .owl-prev,.carousel-item .owl-nav .owl-next{
    position: absolute;
     opacity:1;
    -webkit-transition: all 0.4s ease-out;
    transition: all 0.4s ease-out;
    background: #ff0000 !important;
    border-radius: 100% !important;
    width: 40px;
    height: 40px;
    display: block;
    z-index: 1000;
    cursor: pointer;
    transition: all .3s ease-in;
}
.carousel-item .owl-nav .owl-prev:hover,.carousel-item .owl-nav .owl-next:hover{ background: #db0000 !important;bottom:-75px; }
.carousel-item .owl-nav .owl-prev { left: 35%; bottom: -80px; }
.carousel-item .owl-nav .owl-next { right:35%; bottom: -80px; }
.carousel-item .owl-nav .owl-prev span ,.carousel-item .owl-nav .owl-next span{ font-size: 3rem; color: #fff; position: absolute;transform: translate(-50%,-50%);top:35%;}
.carousel-item .owl-nav .owl-prev:focus, .carousel-item .owl-nav .owl-next:focus{ outline: 0; }

section#compare {position: relative;background-color: #F8F8F8;}
section#compare table {   width: 100%;
    display: block;
    overflow-x: auto;
   }
section#compare table tr td {border:1px solid #000;padding: 20px; white-space: wrap;}
section#compare table tr th{border:1px solid #000;padding: 20px;background-color: #db0000;color: #fff;}

section#compare table tr td:first-child{ font-weight: 600;vertical-align:text-top; width:10%;}
section#compare table tr td:nth-child(2){ width:40%;}
section#compare table tr td:nth-child(3){ width:40%;}

section#compare table tr th:first-child{ font-weight: 600;vertical-align:text-top; width:10%;}
section#compare table tr th:nth-child(2){ width:40%;}
section#compare table tr th:nth-child(3){ width:40%;}

section#compare table tr td ul{padding:0 20px;}
section#compare table tr:nth-child(even){background-color: rgb(255, 255, 255);}
section#compare table tr:nth-child(odd){background-color: rgb(255, 244, 244);}

.modal-lg {max-width: 70%;}
.modal-lg .carousel-item{width: 90%;margin: 0 auto 80px;}


section#BTN {position: relative;background-color: #ff0000;margin: 0;padding: 0;padding:  0 0 100px;}
section#BTN .btn{width: 100%;background-color: #fff;padding: 0;}
section#BTN .btn a {padding: 5px 0;font-size: 1.4rem;color: #000;display: block;}


section#BTN  .btn:hover a {color: #ff0000;}




section.testimony .row{padding: 0 250px;}
section.testimony img{width: 30%;float: left;}


section.testimony .student-box{width: 100%;margin:0 auto;clear: both;color: #000000;background-color:#eaeaea;padding: 20px;}
section.testimony .student-box img{width:100px;margin-right: 10px;}
section.testimony .student-box h4{font-weight: bold;text-indent: 5px;}
section.testimony .student-box .min{font-size: 1.2rem;border: none;}
section.testimony .student-box p{font-size: 16px;text-align: justify;clear: both;color: #000000;}
section.testimony .student-box span{font-size: 23px;font-weight: bold;border-left: 3px #f3dc25 solid;color: #000000;}

section.testimony .student-box .title-con-flex {display: flex;margin: 0 0 20px;align-items: center;}












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


@media(max-width:1366px){
    /* 主視覺 */
    header#visual { background: url(../images/header-bg.jpg) no-repeat center;}
    header#visual .header-content { padding: 60px 0 ; }
    header#visual .header-photo { width: 80%; margin: auto; position: absolute; right:0; top:80px; }
    header#visual .header-content .header-title h2 { line-height: 1.5;padding: 10px;}


}


@media(max-width:991px){
    .container { max-width: 98%;padding: 20px; }

    /* 主視覺 */
  

    header#visual .header-content .header-title h1 { font-size: 1.8rem; line-height: 1.5;padding: 10px; }
    header#visual .header-content .header-title h2 { font-size: 1.4rem; line-height: 1.5;}
    section#lesson .lesson-all .lesson-item .logo { padding: 5px; }
}


@media(max-width: 767px){
    .container { max-width: 100%;padding: 20px; }
    .title h3 {  font-size: 1.8rem; }
    section { padding: 40px 0; }

    /* 主視覺 */
    header#visual .header-content { padding: 80px 0 ;}
    header#visual .header-content .logo { width:150px; }
    header#visual .header-photo { width: 30%; margin: auto; position: absolute; right:0; top:30px; }
    header#visual .header-photo .cct-logo-bg { top: -15px; left: -9%; }

    section#lesson .lesson-all{ flex-direction: column; }
    section#lesson .lesson-all .lesson-item h5 { font-size: 1rem; line-height: 1.5; }
    section#lesson .lesson-all .lesson-item .text{display: flex;align-items: center;height:80px;}
    section#lesson .lesson-all .lesson-item .logo { width: 100%; padding: 0px; }
    section#lesson .lesson-all .arrow { width: 20px; }
    section#lesson .video{margin:100px 0 0 ;}
    section#lesson .lesson-all .lesson-all-item-1,section#lesson .lesson-all .lesson-all-item-2 {width: 100%;}
    section#lesson .row .photo { margin: 0 0 20px; }


    section#lesson .row .box ul { padding: 0; }
    section#lesson .row .box ul > li {margin: 20px 0;}
    section#lesson .row .box ul > li .icon { width: 40px; }

    /* 輪播 */
    .carousel-item .owl-nav .owl-prev,.carousel-item .owl-nav .owl-next{ width: 30px; height:30px; }
    .carousel-item .owl-nav .owl-prev:hover,.carousel-item .owl-nav .owl-next:hover{ bottom:-72px; }
    .carousel-item .owl-nav .owl-prev { left: 30%; bottom: -70px; }
    .carousel-item .owl-nav .owl-next { right:30%; bottom: -70px; }
    .carousel-item .owl-nav .owl-prev span ,.carousel-item .owl-nav .owl-next span{ font-size:2rem;top:35%;}



    /* 表格 */
    section#compare table { overflow-x: scroll; }


    .lesson_title h3{font-size: 1.2rem;}
    .modal-lg {max-width: 90%;}
    .modal-lg .carousel-item{width: 100%;margin: 0 auto 80px;}









    section#discount .box { display: block; }
    section#discount .box .photo { width: 100%; height:350px; }
    section#discount .box .text { width: 100%; }


    section#BTN .btn {
     margin-top: 20px;
    }

    section.testimony .row{padding: 0;}
}

@media(max-width: 575px){

    .title h2{font-size: 1.5rem;line-height: 1.4;}
    .title p {font-size: 1.1rem; }
    .container { padding: 15px; }
    /* 主視覺 */
    header#visual .header-photo .cct-logo-bg { top: -12px; left: -9%; }





     
 
}