*{font-family: 'Noto Sans TC','微軟正黑體',sans-serif; }
body{ font-family: 'Noto Sans TC','微軟正黑體',sans-serif;background-attachment: fixed;}
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;position: relative;z-index: 999;}
section p,section li,section table tr td{font-weight: 400;line-height: 1.8;color: #1F1F1F;font-size: 1.2rem;}





a{ color: #d23339;transition: all ease 200ms;}
a:hover{  color: #ff383f;text-decoration: none;}
p a{ color: #d23339;transition: all ease 200ms;}
p a:hover{  color: #ff383f;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; }


/* 共通 */
section {padding: 60px 0;position: relative;}
section p br { content: ""; margin: 1em; display: block; }


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

.responsive img {width: 100%;}
.container{max-width:1280px;}


.master-title {margin:10px 0 80px;width: 65%;}
.master-title.center {text-align: center;margin:10px auto ;}
.master-title h2 {font-size: 2rem;font-weight: 600;display: inline-block;position: relative;color: #003E6B;letter-spacing: .05em;margin: 0 0 20px;}
.master-title h5 {font-size: 1.2rem;line-height: 2rem;margin: 0 0 60px;font-weight:400;}
.master-title.white h2 {color: #fff;}
.master-title.white h3 {color: #fff;margin: 30px 0;}
.master-title.white h5 {color: #fff;}
.master-title h4 {font-size: 1.5rem;font-weight: 600;color:#003E6B ;} 



nav {padding: 20px 0;position: fixed;top: 0;left: 0;right: 0;z-index: 9999;background: #fff;box-shadow: 0 2px 4px rgba(0,0,0,0.1);transition: all .3s linear;}
nav ul {display: flex;justify-content: space-between;align-items: center;padding: 0 ;margin: 0;max-width:1200px;margin: 0 auto;}
nav ul li {font-size: 1.3rem;list-style: none;}
nav ul li img {width: 25px;margin:-5px 10px 0 0;}
nav ul li a {color: #000;transition: all .2s ease-in;}   
nav ul li a:hover {color: #95C93D;}
nav ul li a:hover img {filter: hue-rotate(250deg) saturate(3);}



.fixed-btn-g {position: fixed;right: 0;top: 20px;background: #d23339;color: #fff;z-index: 999999;}

.fixed-btn-g a {width:90px;height:90px;display: block;display: flex;justify-content: center;align-items: center;} 
.fixed-btn-g a:nth-child(1) img {width: 80px;}
.fixed-btn-g a:nth-child(2) img {width: 40px;}
.fixed-btn-g a:nth-child(1) {background-color: #95C93D;}
.fixed-btn-g a:nth-child(2) {background-color: #fff;border: 2px solid #95C93D;color: #003E6B;}

.fixed-btn-g a:hover { filter: brightness(95%);}





/* .mater-title h3::before{ content: "";position: absolute;width: 80px;height: 30px; background: url(../images/title-icon-l.svg) center no-repeat;left: -90px;top:54%;background-size: contain;transform: translateY(-50%);transform-origin: center;}
.mater-title h3::after{content: "";position: absolute;width: 80px;height: 30px; background: url(../images/title-icon-r.svg) center no-repeat;right: -90px;top:54%;background-size: contain;transform: translateY(-50%); transform-origin: center;} */

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

#fluid { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; color: hsla(180, 100%, 50%, 0.325); }


/* 主視覺 */
header#visual {position: relative;background-color: #003E6B;}
header#visual .header-g .header-title {width: 55%;padding: 10% 0 ;}
header#visual .header-g .header-title h1 {color: #fff;line-height: 1.4;font-size: 2.6rem;font-weight: 700;margin-top: 8%;}
header#visual .header-g .header-title p {margin: 30px 0 0 0;color: #fff;font-size: 1.3rem;}
header#visual .header-photo  {  width: 40%;height: 100%;;
    background-image: url('../images/header-photo.jpg');
    background-size: cover; /* 或 contain */
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    top: 0;
    right: 0;
}







/* 甚麼是ISA/ IEC 62443 */
section#what {position: relative;padding: 60px 0 100px;}
section#what .box {margin: 40px auto 20px;text-align:center;}
section#what .box .icon {width: 150px ;text-align: center;margin: 20px auto;}
section#what .box .icon img{width: 100%;}
section#what .box .line {border-bottom: 1px solid #ccc;margin: 20px 0;display: none;}





/* 資安威脅事件與影響 */
section#event {position: relative;background-color: #F6F6F6;}
section#event .master-title i {color: #d23339;}

section#event table { width: 80%; margin:  20px auto; border-collapse: collapse; margin-bottom: 1em; font-weight: 400;line-height: 1.8;color: #272727;font-size: 1.1rem;  table-layout: fixed;}
section#event table thead { background-color: #CEEEEF;font-size: 1.2rem; }
section#event table th,section#event table td { padding: 12px 10px; border-top: 1px solid #ccc;  border-bottom: 1px solid #ccc; border-left: 1px solid #777777; border-right: 1px solid #777777;text-align: left; font-size: 1.05rem;}

section#event table td:first-child,section#event table th:first-child { text-align: center; }
section#event table thead th:nth-child(1), section#event table tbody td:nth-child(1) { width: 10%; }  /* 年份 */
section#event table thead th:nth-child(2), section#event table tbody td:nth-child(2) { width: 40%; }  /* 事件地點 */
section#event table thead th:nth-child(3), section#event table tbody td:nth-child(3) { width: 50%; }  /* 攻擊方式 */

section#event .table-link {margin:20px auto;text-align: center;}
section#event .table-link  a {color: #003E6B;transition: all ease 200ms;}
section#event .table-link  a:hover {color: #95C93D;}






section#lesson .path-box {padding: 20px;}
section#lesson .path-box .path-photo {margin: 40px auto 20px;width: 38%;}
section#lesson .path-box .path-photo img {width: 100%;}
section#lesson .lesson-box .master-title {margin:  0 0 20px;}
section#lesson .lesson-box {border-left:5px solid #003E6B;padding: 30px;box-shadow: 0px 10px 20px rgba(0, 0, 0, .15);max-width: 80%;margin: 100px auto;}   


section#lesson .lesson-box .lesson-item-g .lesson-item {display: flex;border-bottom: 1px solid #ccc;padding: 30px 20px;}
section#lesson .lesson-box .lesson-item-g .lesson-item:last-child {border-bottom: none;}
section#lesson .lesson-box .lesson-item-g .lesson-item.g-62443 {background-color: #fffae9;margin-top: 30px;border-radius: 10px;align-items: center;}
section#lesson .lesson-box .lesson-item-g .lesson-item.g-62443 p {color: #ff383f;}

section#lesson .lesson-box .lesson-item-g .lesson-item .icon {width: 120px;margin-right:30px;}
section#lesson .lesson-box .lesson-item-g .lesson-item .icon img {width: 120px;}
section#lesson .lesson-box .lesson-item-g .lesson-item .title-flex {display: flex;align-items: center;}
section#lesson .lesson-box .lesson-item-g .lesson-item >  h5 {margin: 0;font-size: 1.35rem;color: #000;margin: 0 0 20px;}
section#lesson .lesson-box .lesson-item-g .lesson-item .icon h5 {text-align: center;margin: 10px 0 20px}

section#lesson .lesson-box .lesson-item-g .lesson-item .text ul {padding: 0 0 0 25px;margin: 0;}

section#lesson .lesson-box .lesson-item-g .lesson-item .title-flex a {color: #000;}
section#lesson .lesson-box .lesson-item-g .lesson-item .lesson-btn {background-color: #95C93D;font-size: 1.2rem;font-weight: 600;padding: 4px 15px 2px;transition: all ease 200ms;;border: 2px solid #95C93D;margin: 0 10px 20px;}
section#lesson .lesson-box .lesson-item-g .lesson-item .title-flex a:hover .lesson-btn {border: 2px solid #95C93D;background-color: #fff;}



/* 摺疊QA */
.card { border: 2px solid #fff; }
.card-body { padding: 2.5rem 2.5rem 2.5rem 3.5rem; position: relative;}

.card-body ol{padding: 0 0 0 25px;margin: 0;z-index: 99;position: relative;}
.card-body p {margin: 0;z-index: 99;position: relative;}
.card-header button {text-decoration: none;position: relative;}
.card-header button h6 {font-size: 1.2rem;font-weight: 600;margin: 0 !important;color: #000;}
.card-header  i {position: absolute;right: 20px;top: 15px;color: #003E6B;}
.btn-link {padding: .75rem 1.25rem;transition: all ease 200ms;}
.btn-link:hover { color: #fff; text-decoration: none; }
.btn-link:hover  h6 { color: #fff;  }



.btn-link.focus , .btn-link:focus { text-decoration: none; background-color: #003E6B; color: #fff; }

.btn-link.focus h6, .btn-link:focus h6{ color: #fff; }




.card-header {padding: 0;border-bottom:none ;background-color:#F3F3F3;}
.card-header:hover { background-color: #003E6B;}
.card-header:hover i {   color: #fff;}
.btn-link:focus i{ color: #fff; }

.card-header:hover  h5 {color: #fff;}


.master-title.sm h4{font-size: 1.5rem;margin-top: 30px;color: #000;}
.master-title.sm h4 i {color:#bbbbbb ;}



.answer-label {
  display: inline-block;
  margin-left: -1.5em; /* 左凸出 */
  font-weight: bold;
}


section#teacher {position: relative;background-color: #EBEBEB;}
section#teacher .text-flex {display: flex;margin: 0 ;justify-content: space-between;align-items: center;}
section#teacher .text-flex.teacher  {margin: 60px 0  0;}
section#teacher .text-flex.teacher .photo {width: 30%;margin-right: 30px;}
section#teacher .text-flex.teacher .photo h4 {font-size: 1.8rem;margin: 0 0 20px;
border-left: 4px solid #003E6B;padding-left: 15px;color: #003E6B;font-weight: 600;}

section#teacher .text-flex.teacher .photo h4 span{font-size: 1.1rem;color: #1F1F1F;}
section#teacher .text-flex.teacher .text {width:70%;}
section#teacher .text-flex.professional .photo {width: 35%;margin-left: 30px;}
section#teacher .text-flex.professional .photo img {mix-blend-mode: multiply;}
section#teacher .text-flex.professional .text {width: 65%;}
section#teacher .text-flex .text h4 {    font-size: 1.6rem; font-weight: 600; color: #003E6B; border-left: 4px solid #003E6B; padding-left: 15px; margin: 0 0 20px;}

section#teacher .text-flex .text p {margin: 0;}



section#discount {position: relative;}
section#discount .box { box-shadow: 0px 10px 20px rgba(0, 0, 0, .15); max-width: 80%; margin: 30px auto;position: relative; display: flex;justify-content: flex-end;}
section#discount .box .master-title ,section#discount .box .master-title h5{margin: 0;}
section#discount .box .master-title h2 {position: relative;margin: 0 0 40px;}
section#discount .box .master-title h2::after {content: "";position: absolute;width:150px;height: 3px;background-color: #003E6B;bottom: -15px;left: 0;}    
section#discount .box .master-title {padding: 100px 30px;width: 52%;}
section#discount .box .photo { background-image: url('../images/discount-photo.jpg'); background-size: cover; /* 或 contain */ background-position: center; background-repeat: no-repeat; POSITION: absolute; top: 0; left: 0;width: 45%;height: 100%;}

section#discount .box h5 {font-size: 1.7rem;line-height: 1.8;}










/* 按鈕*/ 
section#BTN {position: relative;padding: 0 0 30px ;}

section#BTN  .btn h5{margin: 0;padding: 0; font-weight: 600;font-size: 1.5rem;transition: all ease 200ms;display: inline-block;color: #000;}
section#BTN  .btn:hover h5 {color: #000;}
section#BTN a {  text-decoration: none;border: 1px solid #ff0000;display: block;text-align: center; width: 400px;font-size: 1.2rem;font-weight: 600;transition: all ease 200ms;border: 2px solid #95C93D;margin: 0 auto 20px;text-align: center;background-color: #95C93D;}
section#BTN a:hover{border: 2px solid #95C93D;background-color: #fff;}













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



}

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

}

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





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

     nav ul li { font-size: 1.1rem; }

}


@media(max-width:991px){

    .title h3 { font-size: 1.6rem; }
    .master-title { width: 100%; }
    .container{max-width:900px;}
     nav ul {max-width:900px;}

     section#lesson .lesson-box { max-width: 90%; }
     section#lesson .path-box .path-photo { width: 50%; }

     section#teacher .text-flex.teacher .photo { width: 40%; }
     section#teacher .text-flex.teacher .text { width: 60%; }
     section#teacher .text-flex.professional .photo { width: 40%; }
     section#teacher .text-flex.professional .text { width: 60%; }

     section#discount .box { max-width: 90%; }
     section#BTN a {  width: 300px;}

     
     
}


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

    .fixed-btn-g {display: none;}



    .title h3 { font-size: 1.6rem; }
    h2{font-size: 1.6rem;}
    nav {position: relative;padding: 0;box-shadow: none;}
    nav ul li img { width: 20px; }
    nav ul { flex-direction: column;max-width: 100%; }
    nav ul li { margin:10px 0; }
    .master-title h2 { font-size: 1.6rem; }
    .master-title h4 { font-size: 1.3rem; }
    .master-title h5 { font-size: 1.1rem;line-height: 1.8; }

    section p, section li, section table tr td { font-size: 1.05rem; }
    header#visual .header-g .header-title { width:100%; padding:30px 0; }
    header#visual .header-photo { width: 100%; height:450px; position: relative; }
    header#visual .header-g .header-title h1 { font-size: 1.6rem }
    header#visual .header-g .header-title p { font-size: 1.1rem; }

    section#what .box { margin: 10px auto;  }
    section#what .box .icon { width: 120px; margin: 40px auto 10px; }

    section#event table { width: 100%; }
    section#event table thead th:nth-child(1), section#event table tbody td:nth-child(1) { width: 60px; }  /* 年份 */
    section#event table thead th:nth-child(2), section#event table tbody td:nth-child(2) { width: auto; }  /* 事件地點 */
    section#event table thead th:nth-child(3), section#event table tbody td:nth-child(3) { width: auto; }  /* 攻擊方式 */

    section#lesson .path-box .path-photo { width:100%; }
    section#lesson .lesson-box { max-width: 100%;padding: 30px 15px;}
    section#lesson .lesson-box .lesson-item-g .lesson-item { flex-direction: column; }
    section#lesson .lesson-box .lesson-item-g .lesson-item .title-flex { flex-direction: column; align-items: flex-start;}
    section#lesson .lesson-box .lesson-item-g .lesson-item .lesson-btn { margin: 0 0 20px; }
    section#lesson .lesson-box .lesson-item-g .lesson-item .icon h5 { text-align: left; }
    section#lesson .lesson-box .lesson-item-g .lesson-item .icon img { width: 100px; }
    section#lesson .lesson-box .lesson-item-g .lesson-item { padding: 15px; }
    section#lesson .lesson-box .lesson-item-g .lesson-item.g-62443 { align-items: flex-start; margin-top: 15px;}

    section#lesson .lesson-box .lesson-item-g .lesson-item h5 { font-size: 1.15rem; }


    .card-header button h6{ font-size: 1.05rem;text-wrap: wrap;width: 90%;display: inline-block; }

    section#lesson .lesson-box .lesson-item-g .lesson-item .lesson-btn { font-size: 1.05rem; }

    section#teacher .text-flex { align-items: flex-start; flex-direction: column; }
    section#teacher .text-flex.teacher .photo { width: 100%; }
    section#teacher .text-flex.teacher .text { width: 100%;margin: 30px 0; }
    section#teacher .text-flex.professional .text { width:100%; }
    section#teacher .text-flex.professional .photo { width: 85%;margin: 30px auto; }
    section#teacher .text-flex.professional .photo img {width: 100%;}
    section#teacher .text-flex .text h4 { font-size: 1.3rem; }



    
    section#discount .box { display: block ;    max-width: 100%;}
    section#discount .box .photo { width: 100%; height: 200px; position: relative;}
    section#discount .box .master-title { padding:15px; width: 100%; }

    /* section#BTN .btn { width: 100%; } */
    section#BTN a { width: 100%;}

    



}












@media(max-width: 575px){
    .container { padding: 15px; }
    .title h3 { font-size: 1.6rem; }
    h2{font-size: 1.6rem;}
    h3{font-size: 1.3rem;}
    h4{font-size: 1.2rem;}
    h5{font-size: 1.1rem;}
    .title h4 { font-size: 1.3rem; }
   
    header#visual .header-photo { height:300px; }

}