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


.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: 100px 0;position: relative;}
section .container{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%;}  

.container{max-width:1350px;}

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

.floatBtn { display: block; position: fixed; top:0;right: 0; z-index: 9999;transition: all .3s ease-in;}
.floatBtn .floatBtn-1{background-color: rgba(35, 98, 166, 0.8);border-radius: 0px 0px 0px 60px;box-shadow: 2px 2px 20px 0px rgba(1, 46, 42, 0.15000000596046448);width: 180px;height: 160px;padding: 5px 5px 10px 15px;}
.floatBtn .floatBtn-1  {text-align: left;} 
.floatBtn .floatBtn-1 img {width: 100%;} 
.floatBtn .floatBtn-1 p {margin: 5px 0 0 ; font-weight: 600;font-size: 1.2rem;}
.floatBtn:hover {transform: scale(1.1);}




/* 大小標題共用 */
.master-title {margin:20px 0;}
.master-title.center {text-align: center;margin:10px auto 40px;}
.master-title h2 {font-weight: 700;display: inline-block;position: relative;letter-spacing: .05em;position: relative;font-size: 2.6rem;color: #72f6ff;}
.master-title h2::before {content: "";position: absolute;left: -50px;top: -10px; 
  background: url(../images/master-title-icon.svg) no-repeat;width: 50px;height: 80px;background-size: contain;}
.master-title h2::after {content: "";position: absolute;right: -50px;top: -10px; 
  background: url(../images/master-title-icon.svg) no-repeat;width: 50px;height: 80px;background-size: contain;transform: scale(-1);}
.master-title p {font-size: 1.3rem;font-weight: 500;}
.master-title.center {text-align: center;} 



.master-title.blue h2::before {content: "";
  background: url(../images/master-title-icon-b.svg) no-repeat;}
.master-title.blue h2::after {content: "";
  background: url(../images/master-title-icon-b.svg) no-repeat;}
.master-title.blue h2 {color: #3e5f87;}


thead th {font-size: 1.25rem;}
table tbody tr {border-bottom: 1px solid #cacaca;}
table tbody tr:last-child {border: none;}
table thead.border-color-1  {border-bottom: 5px solid rgba(88, 125, 88, 0.6);}
table thead.border-color-2  {border-bottom: 5px solid rgba(126, 169, 144, 0.6)}


.bg{width: 100%;height: 100%;background: url(../images/paper.png) center  / 50%; background-repeat: repeat;
  position: absolute;left: 0;top: 0;z-index: 99;background-attachment: fixed;}










/* 主視覺 */
/* header#visual {position: relative;background:url(../images/header-bg.jpg) center  / cover; height: 100vh;display: flex;justify-content: center;align-items: center;} */
header#visual {
  position: relative;
  width: 100%;
  height: 100vh; /* 看你 banner 高度再調 */
  overflow: hidden;
  background: url(../images/header-bg.jpg);
  display: flex;
  justify-content: center;
  align-items: center;
}


header#visual .header-title {width: 80%;text-align: center;position: relative;z-index: 999;margin: 0 0 80px;}
header#visual .header-title h1 {font-size: 6.5rem;color: #f1a93b;margin: 15px auto;font-weight: 900;line-height: 1.4;}
header#visual .header-title h2 ,header#visual .header-title h3 {color: #fff;}
header#visual .header-title h2 {font-size:3rem;}
header#visual .cloud {width: 100%;height: 800px;background: url(../images/bg-cloud.svg) center bottom / cover;
  position: absolute;bottom: 0;left: 0;}
header#visual img {width: 100%;}
header#visual .astronaut {position: absolute;right: 4%;bottom: 10%;width: 15%;animation: astronaut ease-in-out 5s  infinite alternate;}
header#visual .rocket {position: absolute;left: 4%;bottom: 8%;width:15%;
animation: rocket ease-in-out 3s  infinite alternate;
}


header#visual .meteorite {position: absolute;left: 10%;top: 2%;width:12%;}
header#visual .planet {position: absolute;left: 60%;top: -5%;width:6%;}
header#visual .star1 {position: absolute;left: 80%;top: 7%;width:7%;
animation: star1 linear 8s  infinite alternate;
}
header#visual .star2 {position: absolute;left: 40%;bottom: 8%;width:15%;
animation: star2 linear 8s  infinite alternate;
}

@keyframes astronaut {
  0% {transform: rotate(20deg);}
  100%{transform: rotate(-30deg);}
}


@keyframes rocket {
  0% {transform: translate(-50px,50px);}
}
@keyframes star1 {
  0% {transform: rotate(20deg);}
  100%{transform: rotate(-30deg);}
}
@keyframes star2 {
  0% {transform: rotate(20deg);}
  100%{transform: rotate(-30deg);}
}





section#start {padding: 50px 0 100px;background:  url(../images/paper.png) , #3e5f87;background-size: 50%;}
section#start .troubled-con {display: flex;justify-content: space-between;align-items: center;margin: 0 0 100px;}
section#start .troubled-con .con {width: 38%;}
section#start .troubled-con .con:nth-child(2) {width: 22%;text-align: center;}
section#start .troubled-con .con:nth-child(2) img {width:80%;}

section#start .troubled-con .con .con-item {background-color: #101532;padding:30px;border-radius: 60px;margin: 0 0 40px;  position: relative;}
section#start .troubled-con .con .con-item p {color: #fff;margin: 0;}
section#start .troubled-con .con:nth-child(1) .con-item::after { content: ""; position: absolute; top: 50%; right: -17px; transform: translateY(-50%); width: 0; height: 0; border-top: 15px solid transparent; border-bottom: 15px solid transparent; border-left: 20px solid #101532; }

section#start .troubled-con .con:nth-child(1) .con-item:nth-child(2) {margin-left: -8%;}

section#start .troubled-con .con:nth-child(3) .con-item::after { content: ""; position: absolute; top: 50%; left: -17px; transform: translateY(-50%); width: 0; height: 0; border-top: 15px solid transparent; border-bottom: 15px solid transparent; border-right: 20px solid #101532; }
section#start .troubled-con .con:nth-child(3) .con-item:nth-child(2) {margin-left: 8%;}
section#start .box {background-color: #fff;border-radius: 30px;padding: 30px 40px;}
section#start .box .box-flex {display: flex;flex-wrap: wrap;}
section#start .box .box-flex .box-con {width: 50%;display: flex;align-items: center;margin: 20px 0;}
section#start .box .box-flex .box-con .icon {width: 18%;margin-right: 15px;}

section#start .box h3 {text-align: center;margin: 0 0 40px;line-height: 2;}
section#start .box h3 span {background-color: #d95e47;padding: 5px 15px;margin: 0 2px;color: #fff;}
section#start .box .box-flex .box-con h4 {color: #3e5f87;font-weight: 600;}








section#decrypt {background:  url(../images/paper.png) , #83a2c7;background-size: 50%;}
section#decrypt .photo {width: 100%;}
section#decrypt .photo img {width: 100%;}

section#decrypt .photo .photo-title {background-color: rgba(200, 227, 255, 0.7);padding: 30px;border: 10px double #3e5f87;}


section#decrypt .photo  h3 {text-align: center;font-size: 2.8rem;font-weight: 600;color: #28365c;margin: 0 0 20px;}

section#decrypt .photo h3 i {transform: translateX(5px);color: #ae2b00;
animation: btitle ease-in-out .3s  infinite alternate;
}
@keyframes btitle {
  0% {transform: translateX(0);}
  100%{transform:  translateX(20);}
}



section#decrypt .text h4 {color: #4763B0;font-weight: 600;}
section#decrypt ul.list-main {padding: 0;margin: 0;}
section#decrypt ul.list-main > li {background-color: #fff;border-radius: 8px;list-style: none;padding: 20px;margin: 0 0 20px;display: flex;border-left: 8px solid #D95E47;}
section#decrypt ul.list-main > li:last-child {border-left: 8px solid #e66e59;}
section#decrypt ul.list-main >  li p {margin: 0;}
section#decrypt ul.list-main >  li .text {width: 85%;}
section#decrypt ul.list-main >  li .cir {width: 50px;height: 50px;background-color: #D95E47;color: #fff;border-radius: 50px;text-align: center;font-size: 1.6rem;margin-right: 15px;}


section#decrypt ul.list-main >  li .text  span{background-color: #FFE4E0;padding: 2px 8px;margin: 0 2px;}


section#decrypt ul.list-main >  li ul li {list-style: disc;}




section#lesson {background-color: #3e5f87;padding:  100px 0 ;}
section#lesson .master-title h3{color: #fff;line-height: 1.8;margin: 0;padding: 0;}
section#lesson .master-title h3 b {color: #FDCD56;}
section#lesson .master-title h3 span.price {color: #fff;background-color: #D95E47;padding: 5px 15px 10px;}

 

 /* 課程內容 */
section#lesson .lesson-box-g .lesson-box .lesson-item-g {display: flex;justify-content: space-between;}
section#lesson .lesson-box-g .lesson-box .lesson-item-g .lesson-item { background-color: #ffefe7c1; padding: 30px;width: 32%;border-radius: 5px; margin: 10px 0;}
section#lesson .lesson-box-g .lesson-box .lesson-item-g .lesson-item ul {margin: 20px 0 0;padding: 0 0 0 25px;}
section#lesson .lesson-box-g .lesson-box .lesson-item-g .lesson-item ul li::marker {color:#EC4B65 ;}
section#lesson .lesson-box-g .lesson-box .lesson-item-g .lesson-item span {background-color: #e67e58b0;border-radius: 4px;padding: 4px 15px;font-size:1rem;margin: 0 0 10px;display: inline-block;color: #fff;}













 /* 學會技能 */
section#lesson .lesson-box-g .lesson-box .skill-con ol {list-style: none;padding: 0 0;margin: 0;border-radius: 10px;display: flex;justify-content: space-between;flex-wrap: wrap;}
section#lesson .lesson-box-g .lesson-box .skill-con ol > li {background-color: #fff8f843;margin: 15px 0;padding: 15px 30px;width: 48%;;padding: 5px;border-radius: 10px;  border: 5px solid transparent;
  border-image: linear-gradient(45deg,#e93b6f70,#f5814784);
  border-image-slice: 1;background-color: #fff;border-radius: 10px; border-radius: 16px;}
 section#lesson .lesson-box-g .lesson-box .skill-con ol > li  {padding: 15px;} 

section#lesson .lesson-box-g .lesson-box .skill-con ol > li  .icon {width: 100px;}

section#lesson .lesson-con-g .lesson-con {background-color: #fff;border-radius: 20px;display: flex;margin: 0 auto 80px;width: 90%;position: relative;}
section#lesson .lesson-con-g .lesson-con::after {content: "";position: absolute;transform: translate(-50%,0%);bottom: -75px; left: 50%; background: url(../images/arrow-down.svg) center / cover ;width: 100px;height:100px;z-index:1;}

section#lesson .lesson-con-g .lesson-con:last-child:after {display: none;}


section#lesson .lesson-con-g .lesson-con .lesson-l {width: 35%;background-color: #cbe2f2;text-align: center;padding:20px 30px;position: relative;border-radius: 20px 0 0 20px;}
section#lesson .lesson-con-g .lesson-con:last-child .lesson-l {background-color: #ffd8c7;}
section#lesson .lesson-con-g .lesson-con .lesson-l .icon {border-radius: 100px;width: 100px;height: 100px;background-color: #fff;margin: 0 auto 10px;}
section#lesson .lesson-con-g .lesson-con .lesson-l::after { content: ""; position: absolute; width: 0; height: 0; border-top: 80px solid transparent; border-bottom: 80px solid transparent; border-left: 36px solid #cbe2f2; right: -35px;top: 50%;transform: translateY(-50%); }
section#lesson .lesson-con-g .lesson-con:last-child .lesson-l:after { content: "";   border-left: 36px solid #ffd8c7; }

section#lesson .lesson-con-g .lesson-con .lesson-l h4 {margin: 0;}
section#lesson .lesson-con-g .lesson-con .lesson-r {display: flex;justify-content: center;flex-direction: column;padding:40px 30px 40px 60px;width: 60%;} 
section#lesson .lesson-con-g .lesson-con .lesson-r p {margin: 0;}
section#lesson .lesson-con-g .lesson-con .lesson-l .icon img{width: 70%;margin: 10% auto 0;}


section#lesson .master-title + a {text-decoration: none;display: block;width: 30%;margin: 0 auto;margin: 40px auto;}
section#lesson .lesson-btn {border: 2px solid #fff;text-align: center;padding: 10px 15px;border-radius: 8px;}
section#lesson .lesson-btn h5 {margin: 0;font-size:1.5rem;color: #fff;}
section#lesson .lesson-btn h5 i {color: #FDCD56;transition: all .3s ease-in;}
section#lesson a:hover .lesson-btn h5 i {transform: translate(10px);}


section#suitable {background: #222846;}
section#suitable .box {background:url(../images/bg-suitable.svg), #222846;background-size: cover;background-repeat: no-repeat;background-position: center;background-size: 98%;padding:120px 0 300px ;}
section#suitable .box .box-flex {display: flex;justify-content: center;}
section#suitable .box .box-flex .box-con {width: 32%;margin: 0  15px;}
section#suitable .box .box-flex .box-con ul  {width: 100%;padding: 0;}
section#suitable .box .box-flex .box-con ul li {list-style: none;color: #fff;margin: 0 0 10px;padding: 8px 15px;}
section#suitable .box .box-flex .box-con:nth-child(1)  ul li{background-color: hwb(135 10% 44% / 0.2);}
section#suitable .box .box-flex .box-con:nth-child(2)  ul li{background-color: hwb(0 10% 44% / 0.2);}





section#change {background:  url(../images/paper.png) ,  url(../images/change-bg.jpg), #101532;background-size: 50%,cover;background-position: center , center bottom;}
section#change .box-g {display: flex;justify-content: space-between;margin: 100px 0;}

section#change .box-g .box .item h4 {color: #91d1ff;margin: 0;}
section#change .box-g .box {border-radius: 30px;width: 30%;}
section#change .box-g .box:nth-child(1) {width: 34%;}

section#change .box-g .box:nth-child(2) {width: 24%;margin-top: -40px}
section#change .box-g .box:nth-child(2) img{width: 100%;}
section#change .box-g .box:nth-child(3) {width: 34%;margin-top: 80px  ;}

section#change .box-g .box .item p {color: #fff;margin: 0;}
section#change .box-g .box .item  {border: 2px solid #fff;border-radius: 60px;padding: 30px 30px;width: 100%;margin: 0 0 20px;}



section#change .card-g {display: flex;justify-content: space-between;flex-wrap: wrap;}
section#change .card-g a {width: 48.5%;margin: 0 0 20px;text-decoration: none;transition: all .3s ease-in;}
section#change .card-g a:hover {transform: translateY(5px);}
section#change .card-g .card-con {display: flex;border-radius: 20px;align-items: center;background:url("../images/icon-comma.gif"), #fff;
  background-position:  90% 25px ;background-size:100px;background-repeat: no-repeat;}
section#change .card-g .card-con .person{width: 30%;align-self: flex-start;}
section#change .card-g .card-con .person img {width: 100%;}
section#change .card-g .card-con .text {width: 70%;align-self: center;}













/* 按鈕*/
section#form {position: relative;padding: 0 0 30px ;background: url(../images/form-bg.jpg) top center / cover ;} 

section#form .master-title h3{color: #f7b648;font-size: 2.4rem;font-weight:900;line-height: 1.6;}
section#form .master-title + ul {padding: 0;}
section#form .master-title + ul li {list-style: none;color: #fff;font-size: 1.4rem;} 
section#form .form-btn {text-decoration: none;display: inline-block ;margin: 0 auto;margin: 40px auto;padding: 10px 15px;text-align: center;border-radius: 8px;}
section#form .form-btn.big {width: 96%;background-color: rgba(255, 69, 52, 0.7);transition: all .3s ease-in;}
section#form .form-btn.sm {width: 46%;background-color: rgba(57, 72, 157, 0.7);margin: 0 1%;transition: all .3s ease-in;}
section#form .form-btn h5 {margin: 0;color: #fff;}
section#form .form-btn.big:hover {background-color: rgba(255, 69, 52);}
section#form .form-btn.sm:hover {background-color: rgba(57, 72, 157);}
#Button1 {background-color: #ff4534;}

@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; }
     header#visual .header-title { width: 100%; }
    
    .video-flex .video-item { width: 44.8%; }
}


@media(max-width:991px){

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

    header#visual { height:auto; padding:0;height:600px; }
    header#visual .bg {background: url(../images/header-bg.png) center / cover; height: auto;height:600px;padding: 0;}
    header#visual .header-title  {width: 80%;margin: 0 0 50px;}
    header#visual .header-title img { width: 96%; }





   section#BTN a {  width: 400px;}

     
     
}


@media(max-width: 767px){
    .container { padding: 15px;max-width: 98%; }
    .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.8rem;}
    .master-title h2::before {left: -30px;top: -10px; width: 40px;height: 60px;}
    .master-title h2::after {right: -30px;top: -10px; width: 40px;height: 60px;}
    .master-title h4 { font-size: 1.3rem; }
    .master-title h5 { font-size: 1.1rem;line-height: 1.8; }

    .floatBtn { display: none;}




    section p, section li, section table tr td { font-size: 1.05rem; }

    section {padding: 20px 0;}



    header#visual { height: 460px; }
    header#visual .header-title h1 {font-size:2.4rem;}
    header#visual .header-title h2 { font-size: 1.5rem;}
    header#visual .header-title { width: 85%; }

    header#visual .astronaut {position: absolute;right: 4%;bottom: 10%;width: 15%;animation: astronaut ease-in-out 5s  infinite alternate;}
    header#visual .rocket {position: absolute;left: 4%;bottom: 8%;width:15%;
    animation: rocket ease-in-out 3s  infinite alternate;
    }

    header#visual .astronaut {right: 4%;bottom: 0%;width: 25%;}
    header#visual .meteorite {left: 5%;top: 0%;width:22%;}
    header#visual .planet {left: 60%;top: -5%;width:12%;}
    header#visual .star1 {left: 88%;top: 7%;width:12%; }
    header#visual .star2 {left: 40%;bottom: 8%;width:20%; }




    section#start .troubled-con { flex-direction: column; }
    section#start .troubled-con .con { width: 80%; }
    section#start .troubled-con .con .con-item { background-color: #101532; padding: 20px; margin: 0 0 20px; }
    section#start .troubled-con .con:nth-child(2) {width: 80%;order: 1;}
    section#start .troubled-con .con:nth-child(1) .con-item::after { 
      top: auto; right: auto; left:50%;bottom: -20px; transform: translate(-50%,-50%);  border-top: 15px solid #101532;  border-left: 15px solid transparent;border-right: 15px solid transparent;border-bottom: 0;  }
    section#start .troubled-con .con:nth-child(3) .con-item::after { top: auto; right: auto; left:50%;bottom: -20px; transform: translate(-50%,-50%);  border-top: 15px solid #101532;  border-left: 15px solid transparent;border-right: 15px solid transparent;border-bottom: 0;  }



    section#start .box {padding:20px;}
    section#start .box .box-flex .box-con { width: 50%; display: flex; align-items: center; }
    section#start .box .box-flex .box-con {width: 100%;    margin: 0 0 10px;}
    section#start .box .box-flex .box-con .icon {width: 28%;}
    section#start .box h3 {margin: 0 0 20px;line-height: 2.2;}


    section#decrypt .photo { min-height: 250px; }
    section#decrypt .photo  h3 {font-size: 1.7rem;}




    section#lesson .master-title h3 br {display: none;}
    section#lesson .master-title h3 {font-size: 1.4rem;}
    section#lesson .master-title + a { width: 100% ; }
    section#lesson .lesson-con-g .lesson-con { margin: 0 auto 80px; width:100%; }
    section#lesson .lesson-con-g .lesson-con .lesson-l { width: 40%; padding: 15px; }
    section#lesson .lesson-con-g .lesson-con .lesson-r { padding: 20px 20px 20px 40px; }


    section#suitable .box { background-size: 500%; padding: 120px 0 300px; }
    section#suitable .box .box-flex .box-con { width: 49%; }


  
    section#change .box-g { display: flex; justify-content: space-between; margin: 100px 0; flex-direction: column; }

    section#change .box-g .box:nth-child(1) { width: 100%;order: 2; } 
    section#change .box-g .box:nth-child(3) { width: 100%;order: 3;margin-top: 0; } 
    section#change .box-g .box:nth-child(2) { width: 100%;order: 1;text-align: center;margin: 0 0 20px; }
    section#change .box-g .box:nth-child(2) img {width: 50%;}
    section#change .card-g a { width: 100%; }
    section#change .card-g .card-con { background-size: 50px;padding: 20px; }
   
    section#form {padding: 100px 0 !important;}
    section#form .container {padding: 15px;}
    section#form .form-btn { margin: 0 auto 10px; }
    section#form .form-btn.big {width: 96%;}
    section#form .form-btn.sm {width: 96%;margin: 10px 0;}
    section#form .master-title h3{font-size: 1.6rem !important;}
    section#form .master-title + ul li {list-style: none;color: #fff;font-size: 1.2rem;} 
}












@media(max-width: 575px){
    .container { padding: 30px; }
    .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; }



}