*{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;}
html{font-size: 16px;}
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: #020f19;}
section p,section li,section table tr td{font-weight: 400;line-height: 1.8;color: #0D1F2D;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%;}

.master-title.ml7{margin:20px 0 ;position: relative;}
.master-title.center .ml7{text-align: center;margin:20px auto ;}
.master-title h2 ,.master-title h3 ,.master-title h5  {color: #f41414;}
.master-title.white h2 ,.master-title.white h3 ,.master-title.white h4 ,.master-title.white h5 {color: #fff;}

.master-title.ml7 { position: relative; font-weight: 600; font-size: 2.6rem; }
.master-title.ml7.center { text-align: center; }
.master-title.ml7.white .text-wrapper .letter {  color: #fff;} 

.master-title.ml7 .text-wrapper {  position: relative;
  display: block;
  padding-bottom: 0.2em;
  overflow: hidden;letter-spacing: .05em;}

.master-title.ml7 .text-wrapper .letter {transform-origin: 0 100%;
  display: inline-block; color: #f41414;  text-shadow:
    0 0 1px #fff,
    1px 0 #fff,  -1px 0 #fff,  0 1px #fff,  0 -1px #fff,
    1px 1px #fff, 1px -1px #fff, -1px 1px #fff, -1px -1px #fff,
    2px 0 #fff,  -2px 0 #fff,  0 2px #fff,  0 -2px #fff,
    2px 1px #fff, 2px -1px #fff, -2px 1px #fff, -2px -1px #fff;}






header#visual .ml7 {
  position: relative;
  font-weight: 900;
  font-size: 2.6rem;


}
header#visual .ml7 .text-wrapper {
  position: relative;
  display: block;
  padding-bottom: 0.2em;
  overflow: hidden;
}
header#visual .ml7 .letter {
  transform-origin: 0 100%;
  display: inline-block;
}


.master-title .line {width: 50%;margin: 0 ;}
.master-title.center .line {margin: 0 auto;}
.master-title .line img{width: 100%;}
.master-title .line + p {margin:20px 0 40px;color: #fff;font-size: 1.5rem;font-weight: 400;}


/* 主視覺 */
header#visual {position: relative;}
header#visual .c-container {display: flex;justify-content: space-between;}
header#visual .c-container .title { width: 45vw;}
header#visual .c-container .title .title-text{position: sticky; top: 80px;padding: 100px 0 ;text-align: center;}
header#visual .c-container .title .title-text {padding-left: 1vw; }
header#visual .c-container .title .title-text h1 {font-size:4.2rem;line-height: 1.6;letter-spacing: .2rem; font-weight: 900;color: #fff; margin: 0;text-shadow:
    -2px -2px 0 #f41414,
     2px -2px 0 #f41414,
    -2px  2px 0 #f41414,
    4px 4px 0 #f41414;  padding-left: 1rem; /* 微調首尾 */}
    header#visual .c-container .title .title-text h1 span{font-size: 6.5rem;letter-spacing: 3rem;text-align: center;}
header#visual .c-container .title .title-text h2 {font-size:3rem;font-weight:500;color: #FFD764; margin:10px 0 20px;letter-spacing: 2rem;  padding-left: 2rem; /* 微調首尾 */}
header#visual .c-container .title .title-text h5 {font-size:2rem;line-height: 1.6;color: #fff; margin: 0;border: 3px solid #f41414;display: inline-block;padding: 10px 15px;border-radius: 10px;font-weight:400;width: 80%;}




header#visual .c-container #sub{width: 55vw; }
header#visual .c-container #sub .photo {  min-height: 105vh; overflow: hidden; z-index: 50;border-bottom-left-radius: 8.125vw;display: block; }
header#visual .c-container #sub .photo  #header-photo { background: #dcdcdc;background-image: url(../images/header-bg.jpg);background-size:cover;width: 55vw; height: 65vw; min-height: 105vh;transition: all .3s linear;}
header#visual .c-container #sub .text{padding: 100px ;}
header#visual .c-container #sub .text p{font-size: 1.22rem; line-height: 2;color: #fff; text-align: justify;  text-justify: inter-ideograph;  line-break: strict;  word-break: break-word;font-weight: 400;  }
header#visual .c-container #sub .text p:last-child{text-align-last: left; }
header#visual .c-container #sub .text .master-title  {margin: 0;}




/* 認證優點 */
section#advantage{position: relative;}
section#advantage .box {background-color: lch(100% 0.01 296.81 / 0.9);position: relative;border-radius: 10px;text-align: center;padding: 50px 25px 25px;min-height: 320px;margin: 10px 0;}
section#advantage .box .num {position: absolute;transform: translate(-50%,0);top: -5%;left: 50%;width: 50px;}
section#advantage .box .num > img{width: 100%;}
section#advantage .box .icon  {width: 40%;margin: 20px auto;}
section#advantage .box .icon > img {width: 100%;}
section#advantage .box .icon > img {width: 100%;}
section#advantage .link {margin: 20px auto;}
section#advantage .link p{color: #fff;}

section#advantage .table-box {background-color: rgba(45, 0, 0, 0.6);border-radius: 10px;padding: 30px;margin: 80px 0 0;}
section#advantage .table-box .table-content {width: 100%;}
section#advantage .table-box .table-content .table-tr-flex{display: flex;border-bottom: 1px solid rgba(195, 166, 166, 0.3);}
section#advantage .table-box .table-content .table-tr-flex:last-child {border: none;}

section#advantage .table-box .table-content .table-tr-flex .table-td:nth-child(1){width: 28%;}
section#advantage .table-box .table-content .table-tr-flex .table-td:nth-child(2){width: 38%;}
section#advantage .table-box .table-content .table-tr-flex .table-td:nth-child(3){width: 38%;}

section#advantage .table-box .table-content .table-tr-flex h5 {margin: 0;color: #fff;}
section#advantage .table-box .table-content .table-tr-flex.table-head .table-td {border-right: 1px solid #000;}
section#advantage .table-box .table-content .table-tr-flex.table-head .table-td:last-child{border: 0;} 
section#advantage .table-box .table-content .table-tr-flex .table-td {padding: 15px ;align-self: center;}
section#advantage .table-box .table-content .table-tr-flex.table-head{display: flex;background: #f41414;}
section#advantage .table-box .table-content .table-tr-flex.table-head  .table-td{display: flex;padding: 5px 15px;background: #f41414;justify-content: center;}


section#advantage .master-title.center h3 {margin: 0 0 20px;text-align: center;}
section#advantage .table-box .table-content .table-tr-flex .table-td img{width: 50px; margin-right: 10px;}
section#advantage .table-box .table-content .table-tr-flex .table-td p {margin: 0;color: #fff;padding: 0;}
section#advantage .table-box .table-content .table-tr-flex .table-td p span {color: #f41414;font-weight: 600;display: none;}
section#advantage .table-box .table-content .table-tr-flex.table-body .table-td:first-child{display: flex; align-items: center;padding-left: 30px;} 
section#advantage .table-box .table-content .table-tr-flex.table-body .table-td:first-child h4 {width: 60px;text-align: center;color: #fff;margin: 0;}
section#advantage .table-box .table-content .table-tr-flex.table-body .table-td:first-child h5 {text-align: left;}
section#advantage .table-box .table-content .table-tr-flex.table-body .table-td:first-child h5 span {font-size: 1rem;color: #fff;}
















section#change {position: relative;padding: 0;}
section#change .master-title{position: absolute;transform: translate(-50%,0%);z-index: 999;left: 50%;top: 100px;width: 100%;}
section#change .box-flex{display: flex;}
section#change .box-flex .box{width: 50%;height:700px;position: relative;display: flex;justify-content: center;align-items: center;flex-direction: column;cursor: pointer;}
section#change .box-flex .box:nth-child(1){background: url(../images/change-photo-01.jpg);background-size: cover;}
section#change .box-flex .box:nth-child(2){background: url(../images/change-photo-02.jpg);background-size: cover;}
section#change .box-flex .box::before {content: "";position: absolute;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.7);transition: all .3s ease-in;}

section#change .box-flex .box h3 {color: #fff;font-size: 2.2rem;padding: 5px 30px;border: 1px solid #fff;margin:180px 0 30px;transition: all .3s ease-in;}
section#change .box-flex .box ul {position: relative;z-index: 99;margin: 30px 0;text-align: center;list-style: none;padding: 0;margin: 0;opacity: 0;transform: translateY(180px);transition: all .3s ease-in;}
section#change .box-flex .box ul li {margin: 0 0 5px;color: #fff;font-size: 1.3rem;}


section#change .box-flex .box:hover::before {content: "";position: absolute;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.6);}

section#change .box-flex .box:hover h3 {margin:60px 0 30px;background-color: #fff;color: #000;}
section#change .box-flex .box:hover ul {opacity: 1;transform: translateY(0);}





section#certification {background-color: rgba(12, 12, 12, 0.5);}
section#certification .box  {background-color: #fff;border-radius: 0 10px 10px 10px;padding:15px 30px;position: relative;margin: 80px 0 0;}

section#certification .box .tab-g{position: absolute;top: -38px;left: 0;display: flex;}

section#certification .box .tab-g .tab {border-radius: 10px 10px 0 0 ;background-color: #ad2a2aa9;padding: 5px 30px;color: #fff;font-size: 1.2rem;cursor: pointer;font-weight: 600;}
section#certification .box .tab-g .tab.active {background-color: #fff;color: #000;}

section#certification .box .box-con-flex  {justify-content: space-between;display: none;}
section#certification .box .box-con-flex.active {display: flex;}
section#certification .box .box-con-flex .box-con-text {width: 58%;padding: 20px 0 0;}
section#certification .box .box-con-flex .photo {width: 40%;}
section#certification .box .box-con-flex .photo img {width: 100%;border-radius: 10px;}


section#certification .box .box-con-flex .box-con-text .text-flex {display: flex;margin: 0 0 20px;padding: 5px 15px;}
section#certification .box .box-con-flex .box-con-text .text-flex:nth-child(1){width: 100%;background-color: #ffefef;border-radius: 10px;}
section#certification .box .box-con-flex .box-con-text .text-flex .con-title {display: flex;margin: 2px 10px 0 0;width:130px;}
section#certification .box .box-con-flex .box-con-text .text-flex .con-title .icon {width: 25px;margin-right: 5px;}
section#certification .box .box-con-flex .box-con-text .text-flex .con-title .icon img {width:25px;}

section#certification .box .box-con-flex .box-con-text .text-flex .con-title h5 {margin: 0;}
section#certification .box .box-con-flex .box-con-text .text-flex .con-text p{margin: 0;}
section#certification .box .box-con-flex .box-con-text .text-flex .con-text ul {margin: 0 0 0 25px;padding: 0 ;}
section#certification .box .box-con-flex .box-con-text .text-flex .con-text ul li::marker {color: #f41414;} 




section#crack {position: relative;}
section#crack .table.crack {width: 100%;background-color: rgba(45, 0, 0, 0.6);;}
section#crack .table.crack h4,section#crack .table.crack h5,section#crack .table.crack ul li,section#crack .table.crack p {color: #fff;}

section#crack .table.crack .table-tr {display: flex;justify-content: space-between;border-bottom:1px solid #ff0000d7 ;} 
section#crack .table.crack .table-tr:last-child {border-bottom:none;}
section#crack .table.crack .table-tr .table-td{padding: 15px;} 
section#crack .table.crack .table-tr .table-td:nth-child(2){background-color: rgba(218, 1, 1, 0.5);text-align: center;  display: flex; flex-direction: column; justify-content: center; align-items: center;        }
section#crack .table.crack .table-tr .table-td .icon {width:100%;text-align: center;}
section#crack .table.crack .table-tr .table-td .icon img {width:100px;margin: 10px 0 20px;}
section#crack .table.crack .table-tr .table-td:nth-child(1) {width:35%;}
section#crack .table.crack .table-tr .table-td:nth-child(2) {width: 30%;}
section#crack .table.crack .table-tr .table-td:nth-child(3) {width: 35%;}

section#crack .table.crack .table-tr h5 {font-size: 1.3rem;}














section#witness {position: relative;background-color: rgba(12, 12, 12, 0.5);}
section#witness .time-flex {display: flex;justify-content: center;align-items: center;margin: 30px 0;}
section#witness .time-flex .line{width: 35%; flex: 1;  height: 2px; background-color: #f41414;position: relative;  }
section#witness .time-flex .cir{width:130px;height: 130px;background-color: #f41414;border-radius: 130px;display: flex;justify-content: center;align-items: center;color: #fff;font-size: 1.4rem;font-weight: 600;}


section#witness .time-flex .line.line-l::after {content: "";position: absolute;background: url(../images/arrow-icon.svg);left: -10px;top: 1px;width: 40px;height: 40px;transform: translateY(-50%);}
section#witness .time-flex .line.line-r::after {content: "";position: absolute;background: url(../images/arrow-icon.svg);right: -10px;top:1px;width: 40px;height: 40px;transform: translateY(-50%) scale(-1)}






section#witness .con-flex {display: flex;justify-content: space-between;margin: 60px 0 ;}
section#witness .con-flex .con {width: 36%;}
section#witness .con-flex .photo {width: 20%;text-align: center;}
section#witness .con-flex .photo img{width: 100%;margin: 10px 0;border-radius: 10px;}




section#witness .con-flex  ul li,
section#witness .con-flex  p ,section#witness .con-flex h4,section#witness .con-flex h3{color: #fff;}
section#witness .con-flex .photo h3 {letter-spacing: .8rem;font-size: 2.2rem;color: #f41414;font-weight: 600;} 
section#witness .con-flex .con h4 {color: #000;margin: 0;}

section#witness .con-flex  ul li::marker {color: #f41414;}
section#witness .con-flex  .con .icon-flex {display: flex;align-items: center;background-color: #fff;padding: 5px 15px;border-radius: 10px;margin: 0 0 20px;}
section#witness .con-flex  .con .icon-flex .icon{width: 20px;margin-right: 10px;}


section#witness a {color: #fff;}
section#witness .con-btn {padding: 15px 30px;width: 60%;border: 1px solid #fff;margin: 20px auto;display: flex;justify-content: center;align-items: center; border-radius: 10px;background-color: #ffffff00;transition: all .2s ease-in;}
section#witness .con-btn h5 {color: #fff;font-size: 1.3rem;transition: all .2s ease-in;margin: 0;}
section#witness .con-btn h5 span {color: #f41414;}
section#witness .con-btn .icon img{width: 30px;margin-right: 10px;}
section#witness a:hover .con-btn {background-color: #ffffff;}
section#witness a:hover .con-btn h5 {color: #000;}








section#lesson .item-g  {background-color: #fff;padding:15px;border-radius: 10px;}
section#lesson .item-g .item{min-height: 150px;padding: 30px;display: flex;justify-content: space-between;margin: 0 0 15px;border-top: 2px dashed #dcdcdc;}

section#lesson .item-g .item:nth-child(1){background-color: #ffecec;border: none;}


section#lesson .item-g .item .con-title-g {width: 50%;}
section#lesson .item-g .item .con-title-g .con-title{display: flex;align-items: center;}
section#lesson .item-g .item .con-title-g .icon{width: 70px;margin: 0 10px 0 0;}
section#lesson .item-g .item .con-title-g .icon img{width: 70px;}
section#lesson .item-g .item .con-text {width: 45%;}
section#lesson .item-g .item .con-text h5 {margin: 0;line-height: 1.6;}
section#lesson .item-g .item .con-text .con-btn {border: 2px solid #f41414;display: inline-block;margin: 20px 0 0;padding: 5px 15px;color: #f41414;font-weight: 600;transition: all .2s ease-in;}

section#lesson .item-g .item .con-text .con-btn:hover {background-color: #f41414;color: #fff;}
section#lesson .item-g .item h4 {font-size: 1.6rem;font-weight: 600;color: #000;}






/* 按鈕 */
section#btnLink {background-color: #f41414;padding: 0;padding:40px 0;text-align: center;}
section#btnLink .btn{display: inline-block;padding: 10px 30px;font-size: 1.6rem;margin: 0 auto;text-align: center;background-color: #FFE000;border-radius: 5px;transition: all .3s linear;font-weight: 600;}
section#btnLink .btn:hover{background-color: #eed306;}
section#btnLink .btn a {color: #000;}


section#btnLink .text {text-align: left;}
section#btnLink .text p{color: #fff;font-size: 1.3rem;}

section#btnLink .con-btn {padding: 15px 60px;width: 80%;border: 1px solid #fff;margin: 20px auto;text-align: center;display: flex;align-items: center;justify-content: center;border-radius: 10px;background-color: #ffffff00;transition: all .2s ease-in;}
section#btnLink .con-btn h5 {color: #fff;font-size: 1.3rem;transition: all .2s ease-in;margin: 0;}
section#btnLink .con-btn h5 span {color: #f41414;}
section#btnLink .con-btn .icon img{width: 30px;margin-right: 10px;}
section#btnLink a:hover .con-btn {background-color: #ffffff;}
section#btnLink a:hover .con-btn h5 {color: #000;}
section#btnLink a .con-btn h5 i {color: #fff;}
section#btnLink a:hover .con-btn h5 i {color: #f41414;}






@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){
    /* 主視覺 */
    header#visual .c-container .title .title-text h1 {font-size:3.6rem;}



    .master-title.ml7 { font-size: 2em; }
    .master-title .icon { width: 70px; }

    section#witness .con-btn {width: 70%;}
 
}








@media(max-width:991px){
    .container { max-width: 90%;padding: 20px; }
    header#visual .c-container { flex-direction: column; padding: 20px; max-width: 90%; width:90%; margin: 0 auto; }
    /* 主視覺 */
    header#visual .c-container {flex-direction: column;padding: 20px;}
    header#visual .c-container .title .title-text { top:auto; padding: 0;margin: 20px auto 40px;}
    header#visual .c-container .title { width: 100%;}
    header#visual .c-container #sub{width: 100%;margin: 60px 0 0; }
    header#visual .c-container #sub .photo { display: none;}
    header#visual .c-container #sub .photo  #header-photo { width: auto; height: auto; min-height: auto;}
    header#visual .c-container #sub .text{padding: 0;}


    section#advantage .box .icon { width:60%; }



}


@media(max-width: 767px){

    .container { max-width: 100%;padding: 20px; }
    header#visual .c-container {max-width: 100%; width:100%; }

    .master-title.ml7 { font-size: 1.8rem; }
    .master-title .line {width: 80%;margin: 0 ;}







    header#visual .ml7 { font-size: 1.8rem; }
    header#visual .c-container .title .title-text h5 { font-size: 1.3rem; width: 90%; }
    header#visual .c-container .title .title-text h2 { font-size: 2rem; letter-spacing: .5rem;  }

    header#visual .c-container .title .title-text h1 span { font-size: 4rem; letter-spacing: 1rem; }
    header#visual .c-container .title .title-text h1 { font-size:2.2rem; }

    section#advantage .box {padding: 60px 15px 15px;margin: 40px 0 20px;}
    section#advantage .box .icon { width:40%; }


    section#advantage .table-box { padding:30px 15px; }
    section#advantage .table-box .table-content .table-tr-flex.table-head { display: none; }
    section#advantage .table-box .table-content .table-tr-flex { flex-direction:column ;padding: 20px 0; }
    section#advantage .table-box .table-content .table-tr-flex .table-td p span {display: inline-block;}
    section#advantage .table-box .table-content .table-tr-flex .table-td:nth-child(1){width: 100%;}
    section#advantage .table-box .table-content .table-tr-flex .table-td:nth-child(2){width: 100%;}
    section#advantage .table-box .table-content .table-tr-flex .table-td:nth-child(3){width: 100%;}
    section#advantage .table-box .table-content .table-tr-flex .table-td {padding: 5px 0 ;}
    section#advantage .table-box .table-content .table-tr-flex.table-body .table-td:first-child { padding-left: 0; }
    section#advantage .table-box .table-content .table-tr-flex.table-body .table-td:first-child h5 {
       font-size: 1.6rem;
    }
    section#advantage .master-title.center h3 { font-size: 1.6rem; }






    section#change .box-flex { flex-direction: column; }
    section#change .box-flex .box { width: 100%;height:550px;}
    section#change .box-flex .box ul {  opacity: 1; transform: translateY(0);margin-left: 30px; }
    section#change .box-flex .box h3 { font-size: 1.8rem; margin:100px 0 30px 30px; }
    section#change .box-flex .box:nth-child(2) h3 {margin:100px 0 30px 30px;}
    section#change .box-flex .box:nth-child(2) {height: 400px;}
    section#change .box-flex .box:hover::before {  background: rgba(0, 0, 0, 0.7); }
    section#change .box-flex .box:hover  h3 {margin:100px 0 30px 30px;}



    section#certification .box { padding: 15px; }
    section#certification .box .box-con-flex.active { flex-direction: column; }
    section#certification .box .box-con-flex .box-con-text { width: 100%; padding: 15px;}
    section#certification .box .box-con-flex .photo { width:100%;margin: 20px 0 0; }
    section#certification .box .box-con-flex .box-con-text .text-flex { flex-direction: column; }


    .scrollbar-top { overflow-x: auto; overflow-y: hidden; height: 16px;              /* 上方捲軸高度 */ }
    .scroll-main { overflow-x: auto; overflow-y: hidden; }

    section#crack .table.crack { min-width: 950px; /* 🔑 保留固定最小寬度，讓小螢幕需要 scroll */ }





    section#witness .con-flex {  flex-direction: column; }
    section#witness .con-flex .con { width: 100%; order: 2;margin: 0 0 40px;}
    section#witness .con-flex .photo {order: 1;width: 100%;text-align: left;display: flex;flex-wrap: wrap;margin: 0 0 40px;align-items: center;justify-content: center;}
    section#witness .con-flex .photo img {width: 60%;margin-right: 10px;}
    section#witness .con-flex .photo h3{order: 1;width: 100%;font-size: 2rem;margin: 20px 0 0;text-align: center;}
    section#witness .con-flex .photo h4{order: 2;width: 100%;margin: 10px 0 20px ;font-size: 1.6rem;text-align: center;}

    section#witness .con-btn { padding: 15px 30px; width:100%; text-align: left;}
    section#witness .con-btn .icon img { width: 55px; margin-right: 20px; }


  section#lesson .item-g .item { flex-direction: column; padding: 15px;}
  section#lesson .item-g .item .con-title-g { width: 100%; }
  section#lesson .item-g .item .con-text { width:100%;margin: 10px 0; }
  section#lesson .item-g .item .con-title br {display: none;}
 section#lesson .item-g .item .con-title h4 {font-size: 1.3rem}



}

@media(max-width: 575px){

    header#visual .c-container #sub .text p { font-size: 1.1rem; line-height: 1.6; }

}