*{font-family: 'Noto Sans TC','微軟正黑體',sans-serif; }
body{ font-family: 'Noto Sans TC','微軟正黑體',sans-serif; overflow-x: hidden;background: url(../images/bg.jpg) ;background-size: cover;background-attachment: fixed;box-sizing: border-box;overflow-x: hidden;  -webkit-overflow-scrolling: touch;}
html{font-size: 16px;box-sizing: border-box; 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;position: relative;z-index: 999;color: #242e22;}
section p,section li,section table tr td{font-weight: 400;line-height: 1.8;color: #242e22;font-size: 1.12rem;}
section a {font-size: 1.12rem;color: #FFD764;transition: all .2s ease-in;}

section a:hover{ color: #fff9e4;text-decoration: none; }
section {padding: 100px 0;}
/* 共通 */
/* .responsive-img{width: 100%;}
.master-title {margin: 0 0 40px;}
.master-title h2{font-weight: 900;font-size: 3rem;line-height: 1.6;  color: #f41414;}
.master-title h3{font-weight: 600;font-size: 1.6rem;color: #fff;}
.master-title p {font-size: 1.2rem; line-height: 2;}
.master-title p span{border-bottom: 2px solid #E32124;}
.master-title.center h2 {text-align: center;}
.master-title.center h3 {text-align: center;}

 */

.container {max-width: 70%;margin: 0 auto!important;padding: 0;}
.master-title{margin:20px 0 ;position: relative;}

header#visual {position: relative;background-color: #f7f7fa;padding: 0;height: 95vh;}

 nav {background-color: #fff;border-radius: 10px;box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);padding: 10px 30px;display: flex;align-items: center;width: 68%;position: fixed;z-index: 9999;transform: translate(-50%,0%);left: 50%;top: 2%;}

 nav .logo-flex {display: flex;align-items: center;margin-right: 30px;}
 nav .logo-flex .logo {margin-right: 30px;}
 nav .logo-flex .logo:nth-child(1){width: 70px;}
 nav .logo-flex .logo:nth-child(2){width: 120px;}
 nav .logo-flex .logo img{width:100%;}


 nav .nav-btn-g{display: flex;width: 80%; justify-content: center;flex-wrap: wrap;}
 nav .nav-btn-g a {display: block;padding: 5px 30px;font-size: 1.2rem;color: #242e22;text-decoration: none;margin: 8px 15px 0;}
 nav .nav-btn-g a:hover {background-color: #E6EAEC;}
 nav .nav-btn-g {text-align: center;}
 nav .nav-btn-g a.form-btn {background-color: #242e22;color: #ffff;padding: 5px 10px;border-radius: 5px;margin-left: auto;transition: all .3s linear;animation: form-btn .8s  linear infinite alternate;;}
@keyframes form-btn {
  0%{background-color: #242e22;}
  100%{background-color: #448342;}
}



 nav .nav-btn-g a.form-btn:hover {border-radius: 30px;}




header#visual .header-flex {display: flex;position: relative;align-items:center;justify-content:space-between;height: 95vh;}
header#visual .header-flex .text {width:45%;margin: 60px 60px 0;}
header#visual .header-flex .text h1 {font-weight: 400;font-size: 3rem;margin: 0 0 20px;}






.ml1 {
  font-weight: 900;
  font-size: 3rem;

}

.ml1 .letter{
  display: inline-block;
    margin:  10px 0; 
  line-height: 1em;
   font-family: 'Noto Sans TC','微軟正黑體',sans-serif;
}

.ml1 .text-wrapper {
  position: relative;
  display: inline-block;
  padding-top: 0.1em;
  padding-right: 0.05em;
  padding-bottom: 0.15em;
}

.ml1 .line {
  opacity: 0;
  position: absolute;
  left: 0;
  height: 1px;
  width: 100%;
  background-color: #242e22;
  transform-origin: 0 0;
}

.ml1 .line1 { top: 0; }
.ml1 .line2 { bottom: 0; }




#sscp, #cissp, #csslp, #ccsp {
  scroll-margin-top: 120px;
}

#lesson {
  scroll-margin-top: 100px;
}






header#visual .header-flex .text p  {font-size: 1.15rem;line-height: 2;text-align: justify;margin: 35px 0 0;}

header#visual .header-flex .photo {width: 50%;min-height: 100%; background:url(../images/header-photo.jpg) right center no-repeat;  background-repeat: no-repeat;
  background-size: cover;}


section#introduce{position: relative;padding:0 0 50px ;}
section#introduce .box-g{width: 95%;margin: 0 auto; display: flex;flex-wrap: wrap;}
section#introduce .box-g .box{width: 33.33%;min-height: 350px;padding:30px;display: flex;align-items: center;justify-content: center;flex-direction: column;}


section#introduce .box-g .box:nth-child(2){background: url(../images/introduce-photo-01.jpg) center no-repeat;background-size: cover;}
section#introduce .box-g .box:nth-child(4){background: url(../images/introduce-photo-02.jpg) center no-repeat;background-size: cover;}
section#introduce .box-g .box:nth-child(6){background: url(../images/introduce-photo-03.jpg) center no-repeat;background-size: cover;}
section#introduce .box-g .box:nth-child(8){background: url(../images/introduce-photo-04.jpg) center no-repeat;background-size: cover;}
section#introduce .box-g .box:nth-child(10){background: url(../images/introduce-photo-05.jpg) center no-repeat;background-size: cover;display: none;}




section#lesson  {padding: 50px 0 25px;}
section#lesson .lesson-flex{display: flex;align-items: center;justify-content: space-between;flex-wrap: wrap;}

section#lesson .lesson-flex .lesson-btn {width: 23%;border: 1px solid #f3f3f3;background-color: #fff;box-shadow: 0px 2px 5px rgba(0, 0, 0, .2);border-radius: 10px;cursor: pointer;transition: all .3s ease-in;margin: 0 0 20px;}

section#lesson .lesson-flex .lesson-btn:hover {box-shadow: 0px 2px 15px rgba(0, 0, 0, .2);transform-origin: center;transform: scale(1.05);}


section#lesson .lesson-flex .lesson-btn .logo{padding:0;}
section#lesson .lesson-flex .lesson-btn .logo img{width: 100%;}
section#lesson .lesson-flex .lesson-btn .text{padding: 30px 15px;border-radius: 0 0 10px 10px;}
section#lesson .lesson-flex .lesson-btn.sscp .text {background-color: #E36A2F;} 
section#lesson .lesson-flex .lesson-btn.cissp .text {background-color: #417B42;} 
section#lesson .lesson-flex .lesson-btn.csslp .text {background-color: #deb71e;} 
section#lesson .lesson-flex .lesson-btn.ccsp .text {background-color: #0279A6;} 
section#lesson .lesson-flex .lesson-btn .text p {margin: 0;color: #fff;}



/* 課程詳細內容 */
section#lesson .con-g {margin: 60px 0 ;}
section#lesson .con-g .con {margin: 0 0 60px;}
section#lesson .con-g .con.active {display: block;}

section#lesson .con-g .con.sscp .con-title{background-color: #E36A2F;}
section#lesson .con-g .con.cissp .con-title{background-color: #417B42;}
section#lesson .con-g .con.csslp .con-title{background-color: #deb71e;}
section#lesson .con-g .con.ccsp .con-title{background-color: #0279A6;}

section#lesson .con-g .con .con-title {display: flex;justify-content:flex-end;padding:100px 30px;position: relative;margin: 0 0 100px;}
section#lesson .con-g .con .con-title .logo {width: 40%;position: absolute;left: 0;top: -50px;}
section#lesson .con-g .con .con-title .logo img{width: 100%;}
section#lesson .con-g .con .con-title .text {width: 60%;}
section#lesson .con-g .con .con-title .text h2,section#lesson .con-g .con .con-title .text p {color: #fff;}
section#lesson .con-g .con .con-title .text h2 {font-size: 2.2rem;font-weight: 400;}
section#lesson .con-g .con .con-title .text p {font-size: 1.3rem;}

section#lesson .con-g .con .lesson-info-g  { 
   display: grid;
  grid-template-columns: 1fr 1fr;   /* 左右兩欄 */
  grid-template-rows: auto auto;   /* 上下兩行 */
  column-gap: 20px;                /* 左右間距 */
  row-gap: 20px;                   /* 上下間距 */
  align-items: start;              /* 每塊依照自己高度 */}
section#lesson .con-g .con .lesson-info-g .lesson-info {background-color: #f7f7fa;padding: 30px;border-radius: 10px;}
section#lesson .con-g .con .lesson-info-g .lesson-info:nth-child(1) { grid-column: 1; grid-row: 1; }
section#lesson .con-g .con .lesson-info-g .lesson-info:nth-child(2) { grid-column: 2;grid-row: 1 / span 2; }
section#lesson .con-g .con .lesson-info-g .lesson-info:nth-child(2) ul { list-style: none;padding: 0 0 0 1em; }
section#lesson .con-g .con .lesson-info-g .lesson-info:nth-child(2) ul li {margin: 0 0 10px 3em;text-indent: -3.2em;}
section#lesson .con-g .con .lesson-info-g .lesson-info:nth-child(2) ul li span {font-weight: 600;}
section#lesson .con-g .con .lesson-info-g .lesson-info:nth-child(3) { grid-column: 1; grid-row: 2; }


section#lesson .con-g .con .lesson-info-g .lesson-info .lesson-info-title h3 {font-size: 1.4rem;}
section#lesson .con-g .con .lesson-info-g .lesson-info .lesson-info-title .line {margin: 0 0 20px;width: 50px;height: 4px;border-radius: 10px;}
section#lesson .con-g .con.sscp .lesson-info-g .lesson-info .lesson-info-title .line {background-color: #E36A2F;}
section#lesson .con-g .con.cissp .lesson-info-g .lesson-info .lesson-info-title .line {background-color: #417B42;}
section#lesson .con-g .con.csslp .lesson-info-g .lesson-info .lesson-info-title .line {background-color: #deb71e;}
section#lesson .con-g .con.ccsp .lesson-info-g .lesson-info .lesson-info-title .line {background-color: #0279A6;}


section#lesson .con-g .con.sscp .lesson-info-g .lesson-info .lesson-info-con ul li::marker{color: #E36A2F;} 
section#lesson .con-g .con.cissp .lesson-info-g .lesson-info .lesson-info-con ul li::marker{color: #417B42;} 
section#lesson .con-g .con.csslp .lesson-info-g .lesson-info .lesson-info-con ul li::marker{color: #deb71e;} 
section#lesson .con-g .con.ccsp .lesson-info-g .lesson-info .lesson-info-con ul li::marker{color: #0279A6;} 


/* 課程按鈕 */
section#lesson .con-g .con .lesson-btn-g {background-color: #242e22;padding: 30px;display: flex;justify-content:flex-start;margin: 40px 0;border-radius: 10px;}
section#lesson .con-g .con .lesson-btn-g .lesson-btn-title  {margin : 0 30px 0 0;}
section#lesson .con-g .con .lesson-btn-g .lesson-btn-title h3{font-size: 1.4rem;color: #fff;}
section#lesson .con-g .con .lesson-btn-g .lesson-btn a .btn {background-color: #fff;margin: 0 15px;color: #000;font-size: 1.05rem;font-weight: 400;transition: all .3s ease-in;padding: 5px 30px;}
section#lesson .con-g .con .lesson-btn-g .lesson-btn a:hover .btn {border-radius: 30px;}

section#lesson .lesson-top-line {width: 100%;display: flex;justify-content: flex-end;border-bottom:1px solid #aeaeae ;padding: 10px;}
section#lesson .lesson-top-line a {color: #242e22;}


/* 按鈕 */
section#btnLink {padding:80px 0;text-align: center;background-size: cover;display: none;}

section#btnLink a {color: #fff;}
section#btnLink .btn{display: inline-block;padding: 10px 30px;font-size: 1.6rem;margin: 0 auto;text-align: center;background-color: #242e22;border-radius: 5px;transition: all .3s linear;font-weight: 600;}
section#btnLink .btn:hover{border-radius: 30px;}






@media(max-width:1440px){
     /* 主視覺 */
    header#visual .c-container .title { width: 50vw;}
    header#visual .c-container .title .title-text{top: 100px;}
    header#visual .c-container #sub{width: 45vw; }
    header#visual .c-container #sub .photo {  min-height: 60vh;  }
    header#visual .c-container #sub .photo  #header-photo { width: 45vw; height: 60vw; min-height: 60vh;}
    header#visual .c-container #sub .text{padding: 100px 0;}
    header#visual .c-container #sub .text p{font-size: 1.2rem;letter-spacing: 0.16vw; line-height: 2;}

}



@media(max-width:1366px){
    /* 主視覺 */
    .container { max-width: 98%;padding: 0 15px;margin: 0 auto; }
    header#visual .header-flex .logo-flex { left: 30px; }
    header#visual .header-flex .text { width: 50%; margin: 30px 30px 0;padding: 0; }
    header#visual .header-flex .text h1 { font-size: 2.5rem; }
    header#visual .header-flex .photo {width: 50%;}



    section#introduce .box-g .box { min-height: 240px; }
    section#lesson .con-g .con .con-title{ padding: 50px 30px; }
    section#lesson .con-g .con .con-title .logo { top: -28px; }


 
}








@media(max-width:991px){





}


@media(max-width: 767px){
html{font-size: 15px;}


 nav {padding: 5px 15px 5px;width: 100%;flex-direction: column;justify-content: center;top:0;left: 0; position: fixed;transform: translate(0,0);}

 nav .logo-flex {margin-right: 0;}
 nav .logo-flex .logo {margin-right:30px;}
 nav .logo-flex .logo:nth-child(1){width: 60px;}
 nav .logo-flex .logo:nth-child(2){width:110px;}
 nav .logo-flex .logo img{width:100%;}


 nav .nav-btn-g{display: flex;width:100%;margin: 5px 0 ;justify-content: center;}


 nav .nav-btn-g a {padding: 5px 15px;font-size: 1.15rem;position: relative;}

 nav .nav-btn-g a.form-btn {display: none;}
 nav .nav-btn-g a.nav-btn { padding: 5px 15px; font-size: 1.15rem; position: relative; margin: 0; }






    header#visual {height: auto;}
    header#visual .header-flex {height: auto;}
    header#visual .header-flex .text {padding: 50px 10px 50px;}
    header#visual .header-flex .text h1 { font-size: 2rem; }
    header#visual .header-flex { flex-direction:column-reverse ;  height: auto; }
    header#visual .header-flex .photo { width: 100%; height:400px;margin: 80px 0 0; }
    header#visual .header-flex .logo-flex { left: 30px; top: 440px; }
    header#visual .header-flex .logo-flex .logo:nth-child(1) { width: 70px; }
    header#visual .header-flex .logo-flex .logo:nth-child(2) { width: 130px; }  
    header#visual .header-flex .text {  flex: 1;width:90%; margin: 0 20px;}


    section#introduce .box-g { width: 100%; }
    section#introduce .box-g .box:nth-child(10){display: block;}






    section#introduce .box-g .box { width: 50%;padding: 15px; }
    section#introduce .box-g .box:nth-child(even) {margin: 0 0 20px; }
    section#introduce .box-g .box { min-height: 150px; }

    section#lesson .lesson-flex .lesson-btn {width: 48%;}
    section#lesson .lesson-flex .lesson-btn .text { padding:15px;}

    section#lesson .con-g .con .con-title .text h2 { font-size: 1.4rem; }
    section#lesson .con-g .con .con-title { padding: 40px 15px 70px; }

    section#lesson .con-g .con .con-title .text { width: 100%; }
    section#lesson .con-g .con .lesson-info-g { display: block;   /* 直接改成直排 */ }
    section#lesson .con-g .con .lesson-info-g .lesson-info { margin-bottom: 20px; /* 每塊之間加點距離 */ }

    /* 手機就不需要指定 grid-column、grid-row */
    section#lesson .con-g .con .lesson-info-g .lesson-info:nth-child(1),
    section#lesson .con-g .con .lesson-info-g .lesson-info:nth-child(2),
    section#lesson .con-g .con .lesson-info-g .lesson-info:nth-child(3) {
        grid-column: auto !important;
        grid-row: auto !important;
        padding: 15px;
    }
    section#lesson .con-g .con .con-title .logo { width: 50%; left: auto; right: 0; top: auto; bottom: -95%; }
    section#lesson .con-g .con .lesson-info-g .lesson-info .lesson-info-title h3 { font-size: 1.25rem; }

    section#lesson .con-g .con .lesson-btn-g { padding:15px; flex-direction: column;align-items: center; justify-content: center;}
    section#lesson .con-g .con .lesson-btn-g .lesson-btn-title h3 { font-size: 1.25rem;margin: 0 0 10px; }
    section#lesson .con-g .con .lesson-btn-g .lesson-btn {display: flex;align-items: center;justify-content: center;flex-wrap: wrap;}
    section#lesson .con-g .con .lesson-btn-g .lesson-btn-title {
    margin: 0 ;
}
    section#lesson .con-g .con .lesson-btn-g .lesson-btn a .btn { font-size: 1.05rem; padding: 5px 30px; margin: 10px 10px; }


    section#btnLink .btn { font-size: 1.3rem; }


    section#btnLink {display: block;}


}

@media(max-width: 575px){

       section#lesson .con-g .con .con-title .logo { width: 50%; left: auto; right:0; top: auto; bottom: -30%; }

}