*{font-family: 'Noto Sans TC','微軟正黑體',sans-serif; }
body{ font-family: 'Noto Sans TC','微軟正黑體',sans-serif; overflow-x: hidden;background-size: cover;background: url("../images/con-bg.jpg");z-index: -99;background-attachment: fixed;}
html,body{font-size:16px ;}
h1,h2,h3,h4,h5,h6,p,span,a{line-height: 1.8;}
section p,section li,section a{font-weight: 400;font-size: 1.2rem;}
section a:hover{ text-decoration: none; }
section li {margin: 10px 0;}


/* 共通 */
section {padding: 60px 0 80px;}
section p{text-align: left;}
.responsive-img{width: 100%;}

.master-title h2{font-weight: 600;font-size: 2.4rem;color: #ff0004;}
.master-title p {font-size: 1.2rem; line-height: 2;}
.master-title p span{border-bottom: 2px solid #fff;}
.master-title.center {text-align: center;}
.master-title.center p {text-align: center;color: #fff;}
.master-title h5 {font-size: 1.4rem; font-weight: 400; }
.master-title.fff h5{color: #fff;}
.master-title .icon{width: 100px;margin: 20px 0;}
.master-title .icon img{width: 100px;}
.master-title.center  .icon{margin: 0 auto;}



.container {max-width: 70%;}





.content_title i {font-size: 1.4rem;color: #E32124;}


/* .video { position: absolute;width: 800px; height: 800px; right: 0px;top: 80px;overflow: hidden; border-radius: 50%;position: absolute;display: block;}
.videio-mask {background: radial-gradient(circle at center,transparent 50%,#191c32 95%); height:100%;width: 100%;position: relative;z-index: 99;}
.sibling { position: absolute; top: 0; right: 0; pointer-events: none; width: 100%; height: 100%; background-color: #0d0f1e; mix-blend-mode: lighten;z-index: 1;}
.video video { width: 170%; opacity: 1;  
    mix-blend-mode: lighten;  position: absolute; top: 5%; left: -32%;} */


.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%;}   
.video-con { position: absolute; width: 100%; top: 0; left: 0;z-index: -99;}
.video-con  video {width: 100%; height: 100vh; object-fit: fill;}

section .con-black{position:absolute ;width: 100%;height: 100%;background: linear-gradient(90deg, rgba(26, 1, 1, 0.2) 0%, rgba(0, 0, 0, 0.7) 100%);z-index: -1;left: 0;top: 0;}
/* 主視覺 */
header#visual {position: relative;padding: 0;width: 100%;height: 100vh;padding: 30px;display: flex;justify-content: center;}
header#visual .video-black{position:absolute ;width: 100%;height: 100vh;background-color: rgba(0, 0, 0, 0.3);z-index: -1;}
header#visual .header-title {width:55%; margin: 150px auto 0;z-index: 99;position: relative;}
header#visual .header-title .light {animation: light .5s ease-in-out infinite alternate;width: 80px;height: 80px;position: absolute;top: 18%;left: 60%;transform: translate(-50%, -50%);z-index: 99;}
header#visual .header-title .light2 {animation: light2 .5s ease-in-out infinite alternate;width: 40px;height: 40px;position: absolute;top: 30%;left: 70%;transform: translate(-50%, -50%);z-index: 99;}
header#visual .logo {width: 250px;position: absolute;top:2%;left: 2%;;z-index: 99;}
header#visual .logo img{width: 100%}



@keyframes light {
    0% {opacity: 0;}
    100% {opacity: 1;}
}

@keyframes light2 {
    0% {opacity: 1;}
    100% {opacity: 0;}

}


header#visual .header-title img {width: 100%;}
header#visual .header-describe {width:100%;margin: 30px auto;background-color: hwb(0 100% 0% / 0.95);padding: 30px;border-radius: 15px;color: #000;}



header#visual .header-describe p {color: #000;font-size: 1.4rem;margin: 0;}
header#visual .header-describe p span {background-color: #ff0004;padding: 0 5px;color: #fff;}

header#visual h1 {position: absolute;z-index: -999;}









/* 趨勢 */
section#trend {position: relative;padding: 100px 0;background:radial-gradient(circle farthest-corner at left,rgb(255, 255, 255),#fff);}
section#trend .title {color: #ff0004;}
section#trend ul {padding-left:20px ;margin: 0;list-style: none;}
section#trend ul li {margin: 20px 0; font-size: 1.25rem;border-bottom: 1px solid #ccc;padding: 15px 0 25px 30px ;position: relative; }
section#trend ul li:last-child {border: 0;}
section#trend ul li::before {content: "\f105"; font-family: FontAwesome; display: inline-block;color:#ff0004 ;font-size: 2rem; position: absolute;left: 0;top: 5px;}
section#trend .master-title .icon {filter: invert(100%);}

section#five {padding: 100px 0;background:radial-gradient(circle farthest-corner at left,rgb(255, 255, 255),#f1f1f1);}
section#five .master-title .icon {filter: invert(100%);}

section#five .photo{width: 80%;height: 800px; margin: 0 auto;background: url(../images/five.svg) no-repeat;background-size: contain;}





/* 升級 */
section#upgrade {position: relative;padding: 100px 0 0;}

section#upgrade .table-flex{display: flex;flex-wrap: wrap;margin: 40px 0 100px;}

section#upgrade .table-flex .table-td {width: 33.33%;text-align: center;padding: 30px;color: #fff;}
section#upgrade .table-flex .table-td p {text-align: center;}
section#upgrade .table-flex .table-td:nth-child(1){border-top:0 solid transparent;border-right:2px solid #838081; border-bottom:2px solid #838081; border-left:2 solid #838081;  }
section#upgrade .table-flex .table-td:nth-child(2){border-top:0 solid transparent;border-right:2px solid #838081; border-bottom:2px solid #838081; border-left:2 solid #838081;}
section#upgrade .table-flex .table-td:nth-child(3){border-top:0 solid transparent;border-right:0px solid transparent; border-bottom:2px solid #838081; border-left:2 solid #838081;}
section#upgrade .table-flex .table-td:nth-child(4){border-top:0 solid transparent;border-right:2px solid #838081; border-bottom:0px solid #838081; border-left:0 solid #838081;  }
section#upgrade .table-flex .table-td:nth-child(5){border-top:0 solid transparent;border-right:2px solid #838081; border-bottom:0px solid #838081; border-left:2 solid #838081;}
section#upgrade .table-flex .table-td:nth-child(6){border-top:0 solid transparent;border-right:0px solid transparent; border-bottom:0px solid #838081; border-left:2 solid #838081;}


section#upgrade .table-flex .table-td .icon {width: 120px;margin:40px auto;}
section#upgrade .table-flex .table-td .icon img {width: 100%;}
section#upgrade .upgrade-photo {background: url("../images/upgrade-photo-1.jpg") center no-repeat;width: 100%;height: 300px;background-size: contain;background-attachment: fixed;}

section#upgrade .table-flex .table-td h3 {color: #ff0004;font-weight: 600;}










/* 課程 */
section#lesson {position: relative;padding: 100px 0 ;}
section#lesson .tick-item-g {margin: 30px 0;}
section#lesson .tick-item-g .tick-item{background-color: rgba(53, 53, 53, 0.8);margin: 20px auto;width: 80%;padding: 10px 30px;border-radius: 5px;display: flex;}
section#lesson .tick-item-g .tick-item h5 { margin:5px 0 0 ;padding: 0;color: #fff}

section#lesson .tick-item-g .tick-item img {width: 45px;margin-right: 15px;}

section#lesson .lesson-box {background-color: #fff;border-radius: 5px;margin: 60px 0;}
section#lesson .lesson-box .photo {width: 100%;height: 300px;border-top: 15px solid #ff0004;transition: all .3s ease-in;}
section#lesson .lesson-box .photo:hover  {border-top: 15px solid #c30003;}
section#lesson .lesson-box .photo:hover .lesson-title h3{background-color: #c30003;}

section#lesson .lesson-box .lesson-title {text-align: center;}
section#lesson .lesson-box .lesson-title h3{background-color: #ff0004;padding: 5px 30px;text-align: center;display: inline-block;margin:0 auto ;color: #fff;transition: all .3s ease-in;}
section#lesson .lesson-box .lesson-title h3 span {font-size: 2rem ;font-weight: 600;display: block;line-height: 1.6rem;}

section#lesson .lesson-box .text  {padding: 30px;}
section#lesson .lesson-box .text .lesson-item-flex {display: flex;justify-content: space-between;}
section#lesson .lesson-box .text .lesson-item-flex .lesson-item .con{margin: 30px 0 60px;}
section#lesson .lesson-box .text .lesson-item-flex .lesson-item .con .leeson-lab {border-bottom:2px solid #ff0004 ;display: flex;align-items: center;}


section#lesson .lesson-box .text .lesson-item-flex .lesson-item .con .leeson-lab .icon{width: 40px;margin:0 10px;}
section#lesson .lesson-box .text .lesson-item-flex .lesson-item .con .leeson-lab .icon img{width: 40px;}
section#lesson .lesson-box .text .lesson-item-flex .lesson-item  {width: 48%;}
section#lesson .lesson-box  ul li::marker {color: #ff0004;}
section#lesson .lesson-box ul.outline-list{list-style: none;padding: 0;margin: 0;}
section#lesson .lesson-box ul.outline-list li {background-color: #f0f0f0;padding: 5px 10px;}
section#lesson .lesson-box ul.outline-list li:hover {background-color: #ffebeb;}


section#feedback  {position: relative;background:radial-gradient(circle farthest-corner at right,rgb(13, 2, 2),#000);padding:100px 0 ;}

section#feedback a {display: block;}
section#feedback .box {background-color: rgba(53, 53, 53, 0.8);padding: 30px;color: #fff;border-radius: 5px;margin: 30px 0 0;min-height: 600px ;transition: all .3s ease-in;}
section#feedback .box:hover {background-color: rgba(33, 33, 33, 0.95);transform: translateY(5px);}
section#feedback .box .name-g {display: flex;align-items: center;margin: 0 0 15px;}
section#feedback .box .name-g .photo {width: 40%;margin-right: 10px;}
section#feedback .box .name-g .photo img {width: 100%;}



/* 按鈕 */
section#btnLink {position: relative;;background:radial-gradient(circle farthest-corner at right,rgb(13, 2, 2),#000);}
section#btnLink .btn-g {display: flex;justify-content: center;}
section#btnLink a {display: inline-block;margin: 10px auto ;width:100%;text-align: center;}
section#btnLink .btn {background-color: #ff0004;border-radius: 5px;color: #fff;}
section#btnLink .btn p {font-size:2rem ;margin: 0;display: inline-block;}
section#btnLink .btn:hover {background-color: #c30003;}

#form .thx {
padding: 0 !important;
}

@media(max-width:1600px){
  

}



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

}


@media(max-width:1366px){
    /* 主視覺 */
    header#visual .header-title { width: 90%; }
}

@media(max-width:991px){


    .master-title .icon{width: 100px;margin: 20px 0;}
    .master-title .icon img{width: 100px;}






}

@media(max-width: 767px){
    section p, section li, section a {
        font-weight: 400;
        font-size: 1.05rem;
    }
    h3 {font-size: 1.3rem;}

    .master-title h2 { font-size: 2rem; line-height: 1.6;}
    .master-title .icon{width: 60px;margin: 0 0 20px;}
    .master-title .icon img{width:60px;}
    .master-title h5 { font-size: 1.2rem; }
    .master-title.center .icon {
        margin: 0 auto 20px;
    }

    
    header#visual .logo { width: 170px; top: 1%; }
    header#visual {height: auto;overflow: hidden;padding: 15px;}
    .video-con video { width: 100%; height: 350px; object-fit: fill; }
    header#visual .logo { width: 140px; }
    header#visual .header-title .light { width: 7%; height: 7%; top: 41%; left: 59%; }
    header#visual .header-title .light2 {width: 4%; height: 4%; top: 54%; left: 69%;}
    section#trend ul { padding-left: 0; }
    header#visual .header-title { margin:0 auto ; padding: 150px 0 40px;}
    header#visual .header-title { width: 100%; }
    header#visual .header-describe { padding: 20px; }
    header#visual .header-describe p { font-size: 1.1rem; }




    section#five .photo{width: 100%;height: 800px; margin: 0 auto;background: url(../images/five-m.svg) center no-repeat;background-size: contain;}









    section#upgrade .upgrade-photo { width: 100%; height: 120px; }
    section#upgrade .table-flex { display: flex ; flex-wrap: wrap; margin: 40px 0 100px; }
    section#upgrade .table-flex .table-td { width:50%; padding: 15px; }
    section#upgrade .table-flex .table-td .icon { width:90px; margin: 20px auto; }
    section#upgrade .table-flex .table-td:nth-child(1){border-top:0 solid transparent;border-right:2px solid #838081; border-bottom:2px solid #838081; border-left:2 solid #838081;  }
    section#upgrade .table-flex .table-td:nth-child(2){border-top:0 solid transparent;border-right:0px solid #838081; border-bottom:2px solid #838081; border-left:2 solid #838081;}
    section#upgrade .table-flex .table-td:nth-child(3){border-top:0 solid transparent;border-right:2px solid #838081; border-bottom:2px solid #838081; border-left:2 solid #838081;}
    section#upgrade .table-flex .table-td:nth-child(4){border-top:0 solid transparent;border-right:0px solid #838081; border-bottom:2px solid #838081; border-left:0 solid #838081;  }
    section#upgrade .table-flex .table-td:nth-child(5){border-top:0 solid transparent;border-right:2px solid #838081; border-bottom:0px solid #838081; border-left:2 solid #838081;}
    section#upgrade .table-flex .table-td:nth-child(6){border-top:0 solid transparent;border-right:0px solid transparent; border-bottom:0px solid #838081; border-left:2 solid #838081;}
    

    section#lesson .tick-item-g .tick-item { padding: 10px 20px;width: 100%; }
    section#lesson .lesson-box .text .lesson-item-flex { flex-wrap: wrap; }
    section#lesson .lesson-box .text .lesson-item-flex .lesson-item { width:100%; }
    section#lesson .lesson-box .text { padding: 15px; }



    section#feedback .box { padding: 15px; margin: 20px 0 0; min-height: auto; }
    section#feedback .box .name-g .photo { width: 50%; }

    section#btnLink a {width: 90%;border: 1px solid red;}
    section#btnLink .btn {  width:100%;white-space: wrap;margin: 0 auto }
    section#btnLink .btn p {display: inline-block;font-size: 2rem;}
}

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


@media(max-width: 400px){
    header#visual .header-title .light { width: 7%; height: 7%; top: 35%; left: 58%; } 
    header#visual .header-title .light2 {width: 4%; height: 4%; top: 40%; left: 68%;}
}