*{font-family: 'Noto Sans TC','微軟正黑體',sans-serif; }
body{ font-family: 'Noto Sans TC','微軟正黑體',sans-serif;background: url(../images/bg-gray.jpg) repeat ;background-size:30px;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.6;position: relative;z-index: 999;color: #000;}
section p,section li,section table tr td{font-weight: 400;line-height: 1.7;color: #000;font-size: 1.12rem;}
section a {font-size: 1.12rem;color: #de4e3b;}
section a:hover {font-size: 1.12rem;color: #de7c3b;text-decoration: none;}


/* 輪播 */
.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 p br { content: ""; margin: 0.8em; display: block; }

.container{max-width:1300px;}

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


/* 大小標題共用 */
.master-title {margin:10px 0 40px;position: relative;}
.master-title .icon {width: 120px;margin:0 auto;}
.master-title .icon.sm {width:80px;}
.master-title.center {text-align: center;margin:10px auto 40px;}
.master-title h2 ,.master-title h3 ,.master-title h5 , .master-title p{color: #000;font-weight: 600;margin: 0 0 20px;}
.master-title.white h2 ,.master-title.white h3 ,.master-title.white h5 , .master-title.white p {color: #fff;}
.master-title h2 {font-size:2.5rem;font-weight: 900;letter-spacing: .5rem;}

.master-title h2.white {color: #fff;}
.master-title h2.blue {color: #a1d5ff ;}
.master-title h2.yellow {color: #ffd8a4 ;}
.master-title h2.pink {color: #ff95b5 ;}

.master-title h3 {font-size: 1.8rem;}
.master-title p {font-size: 1.3rem;line-height: 1.6;}



.title3d {text-shadow: 1px 1px 0 #000, 2px 2px 2px #000, 3px 3px 2px #000, 4px 4px 2px #000, 5px 5px 2px #000, 6px 6px 2px #000, 7px 7px 2px #000, 8px 8px 2px #000,  /* 2px 外框 */ 4px 0 0 #000, -4px 0 0 #000, 0 4px 0 #000, 0 -4px 0 #000, 4px 4px 0 #000, -4px 4px 0 #000, 4px -4px 0 #000, -4px -4px 0 #000;}


.bg-color-1 {background-color: #ff95b5;}
.bg-color-2 {background-color: #a1d5ff;}
.bg-color-3 {background-color: #ffd796;}
.text-color-1 {color: #ff95b5;}
.text-color-2 {color: #a1d5ff;}
.text-color-3 {color: #ffd796;}



.floatBtn { display: block; position: fixed; top:0;right: 0; z-index: 9999;transition: all .3s ease-in;}
.floatBtn .floatBtn-1{background-color: rgba(10, 79, 144, 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);}






section .content {margin: 0 0 100px;}
section .content:last-child { margin: 0 ; }

/* 主視覺 */
header#visual {position: relative;width: 100%;height:100vh;display: flex;justify-content: center;align-items: center;  background: url(../images/header-bg-icon.png) center / cover; }
header#visual .header-title{width:70%;margin: 0 auto 150px;position: relative;}
header#visual .header-title img {width: 100%;}
header#visual .header-title .header-sub {position: absolute;right:-5%;margin: 25px 0 0  ;width: 60%;padding:20px 30px;border: 3px solid #000;border-right:30px solid #000;background-color: #fff;}
header#visual .header-title .header-sub h2 {font-size: 1.5rem ;line-height: 1.6;}
header#visual h1 {position: absolute;z-index: -99;opacity: 0;}











section#advantages {background-color: #3fb2ff;}
section#advantages  .master-title p span{ background-color: #ff95b5; display: inline;padding: 3px 15px; }
/* 好消息！Figma AI功能全線上線！ */
section#advantages .box {background-color: #fff;border: 3px solid #000;border-radius:20px 20px 0 0 ;}
section#advantages .box .box-top{border-radius:20px 20px 0 0 ;border-bottom:3px solid #000 ;display: flex;align-items: center;}

section#advantages .box .box-top .cir-g {display: flex;padding: 20px 15px;}
section#advantages .box .box-top .cir-g .cir{width: 24px;height: 24px;border-radius: 100%;border: 3px solid #000;margin: 0 8px;}
section#advantages .box .box-flex {display: flex;align-items: center;justify-content: space-around;}
section#advantages .box .box-flex .photo{width: 40%;text-align: center;}
section#advantages .box .box-flex .photo img{width:90%;}
section#advantages .box .box-flex .text{width: 56%;padding: 30px;}
section#advantages .box .box-flex .text h3{font-weight: 700;font-size: 2rem;}
section#advantages .box .box-flex .text .item-flex{display: flex;}
section#advantages .box .box-flex .text .item-flex h4{font-size: 2.5rem;font-weight: 900; font-family:inherit, Arial, sans-serif; margin: 0 25px 0 0;}
section#advantages .box .box-flex .text .item-flex  p span {font-weight: 600;font-size: 1.15rem;padding: 2px 10px;margin: 0 5px 0 0;border-radius: 5px;}
section#advantages .box .box-flex .text .item-flex  p span.bg-color-1  {background-color: #ffd1df;}
section#advantages .box .box-flex .text .item-flex  p span.bg-color-2  {background-color: #c8e6ff;}
section#advantages .box .box-flex .text .item-flex  p span.bg-color-3  {background-color: #ffe5c4;}



/* 適合對象 */
section#advantages .item-flex-g {display: flex;justify-content: center;flex-wrap: wrap;}
section#advantages .item-flex-g .item-flex {width: 30%;border: 3px solid #000;border-radius:20px;display: flex;align-items: center;padding: 15px 20px;margin: 10px;}

section#advantages .item-flex-g .item-flex .icon img{width: 80px; margin: 0 10px 0 0;}
section#advantages .item-flex-g .item-flex p {margin: 0;font-size: 1.25rem;font-weight: 600;}




















section#role {background: url(../images/content-bg-icon.png) , linear-gradient(to top,#70bfff59,#70bfff59);background-size: 100%;background-repeat: repeat-y;  padding: 100px 0 50px;}

section#role .role-comic {width: 75%;margin: 0 auto;}
section#role .role-comic img {width: 100%;}

section#role .box {border: 3px solid #000;border-radius:20px;margin: 0 0 30px;}
section#role .box > h4 {text-align: center;font-size:1.8rem;font-weight: 700;margin: 0;}
section#role .box .box-con {padding: 30px;border-radius:0 0 20px 20px;border-top: 3px solid #000;background-color: #fff}
section#role .box.box-1 {background-color: #ff95b5;}
section#role .box.box-2 {background-color: #a1d5ff;}
section#role .box .box-con .con-flex {display: flex;justify-content: space-between;align-items: center;margin: 0 auto 20px;}
section#role .box .box-con .con-flex:last-child {margin: 0;}


section#role .box .box-con .con-flex .con-item-g{width: 80%;}
section#role .box .box-con .con-flex .con-item-g .con-item {margin: 0 0 20px;}
section#role .box .box-con .con-flex .con-item-g .con-item .con-item-title-flex {display: flex;align-items: center;margin: 0 0 10px;}

section#role .box .box-con .con-flex .con-item-g .con-item .con-item-title-flex .icon {width: 35px;margin-right: 10px;}
section#role .box .box-con .con-flex .con-item-g .con-item .con-item-title-flex .icon img{width: 35px;}
section#role .box h5 {display: inline;margin: 0;font-size: 1.3rem;} 
section#role .box .box-con .con-flex .person-photo {width: 20%;text-align: center;}
section#role .box .box-con .con-flex .person-photo img{width: 100%;}
section#role .box .box-con .con-flex h4 {text-align: center;font-size: 1.8rem;}



section#role .box .box-con .con-flex.sing  {display: block;padding: 30px;}
section#role .box.box-1 .box-con .con-flex.sing  {background-color: #ffe4ed;}
section#role .box.box-2 .box-con .con-flex.sing  {background-color: #dcefff;}




section#role .box .box-con .con-flex.sing .con-item-g {width: 100%;}
section#role .box .box-con .con-flex.exam { justify-content: center; align-items: stretch; gap: 20px;width: 80%;}
section#role .box .box-con .con-flex .exam-photo img{ height:200px; }
section#role .box .box-con .con-flex.exam   + P {text-align: center;}


section#role .box .box-con .video-bg {padding: 30px; border-top: 2px solid #000;}
section#role .box .box-con .video-bg .video-con {width: 80%;margin: 0 auto 20px;text-align: center;}
section#role .box .box-con .video-bg .video-con h4 {font-size: 1.45rem;color: #fff;border-radius: 10px 10px 0 0;margin: 10px 0 0 0 ;padding: 10px 0 0 0;}
section#role .box .box-con .video-bg .video-con .video-container {border-radius:0 0 10px 10px;}


section#role .box.box-1 .box-con .video-bg .video-con h4 {background-color: #FF6695;}
section#role .box.box-1 .box-con .video-bg .video-con .video-container {border: 10px solid #FF6695;}
section#role .box.box-2 .box-con .video-bg .video-con h4 {background-color: #3da1ff;}
section#role .box.box-2 .box-con .video-bg .video-con .video-container {border: 10px solid #3da1ff;}


section#role .box.box-1 .box-con  b{border-bottom: 4px solid #FF95B5;}
section#role .box.box-2 .box-con  b{border-bottom: 4px solid #3da1ff;}




section#lesson .master-title span{padding: 2px 10px;border-radius: 5px;}
section#lesson .num-flex {display: flex;justify-content: space-around;width: 80%;margin: 0 auto;}
section#lesson .num-flex .num {text-align: center;}
section#lesson .num-flex .num h3{font-size:5rem;margin: 0; font-weight: 900;}
section#lesson .num-flex .num p {font-size: 1.6rem;font-weight: 600;}


section#lesson .box{border: 3px solid #000;border-radius: 20px;background-color: #fff;margin: 0 0 30px;}

section#lesson .box .title-flex {display: flex;padding: 5px 30px;align-items: center;}
section#lesson .box .title-flex h4{ font-size: 1.45rem; font-weight: 500; margin: 0;}
section#lesson .box .title-flex .cir {width:35px;height: 35px;border-radius: 100%;margin-right: 10px;border: 2px solid #000;text-align: center;font-size: 1.25rem;font-weight: 900;}

section#lesson .box .box-con {padding: 30px;border-radius:0 0 20px 20px;border-top: 3px solid #000;background-color: #fff}
section#lesson .box .box-con .photo {width: 70%;margin: 0 auto;}
section#lesson .box .box-con .photo img{width: 100%;}

section#lesson .box .box-con.box-con-flex {display: flex;}
section#lesson .box .box-con.box-con-flex ul{width: 50%;padding: 0;}
section#lesson .box .box-con.box-con-flex ul li {margin: 0 0 10px;font-size: 1.2rem;list-style: none;}
section#lesson .box.box .box-con.box-con-flex ul li span{padding: 2px 10px;margin: 0 15px 0 0;border-radius: 5px;}
section#lesson .box.box-color-1 .box-con.box-con-flex ul li span{background-color: #ffd1df;}
section#lesson .box.box-color-2 .box-con.box-con-flex ul li span{background-color: #c8e6ff;}
section#lesson .box.box-color-3 .box-con.box-con-flex ul li span{background-color: #ffe5c4;}

section#lesson .box .box-con.box-con-flex .photo{width: 50%;}
section#lesson .box .box-con.box-con-flex .photo img{width: 100%;}
section#lesson .box .box-con.box-con-flex .video-con{width: 50%;}



 


section#stu {background-color: #3fb2ff; }
section#stu .box .box-flex {display: flex;background-color: #fff;margin: 80px 0;border:3px solid #000;border-radius: 20px;padding: 30px;justify-content: space-between;}
section#stu .box .box-flex .photo{width: 32%;position: relative;}
section#stu .box .box-flex .photo img{width: 100%;}
section#stu .box .box-flex .text {width: 65%;}

section#stu .box .box-flex .photo .name {border: 3px solid #000;position: absolute;padding: 10px 30px;top: -5px;}
section#stu .box .box-flex .photo .name h5{font-size: 1.6rem;margin: 0;}
section#stu .box .box-flex:nth-child(1) .photo .name {background-color: #ffd8a4;top: -75px;left: -10px;}
section#stu .box .box-flex:nth-child(2) .photo .name {background-color: #ff95b5;top: -75px;right: -10px;}
section#stu .box .box-flex:nth-child(2) {flex-direction: row-reverse;}

section#stu .box .box-flex:nth-child(1) b {border-bottom: 4px solid #ffd796;}
section#stu .box .box-flex:nth-child(2) b {border-bottom: 4px solid #ff95b5;}


section#form {background: url(../images/content-bg-icon.png) , linear-gradient(to top,#70bfff59,#70bfff59);background-size: 100%;background-repeat: repeat-y;padding: 0 0 0px; }
section#form .master-title ul {margin: 20px 0 0;padding: 0;}
section#form .master-title ul li{margin: 10px 0;border-bottom: 2px dashed #000;padding:10px 20px;position: relative;list-style: none;}
section#form .master-title ul li::after{content: ""; position: absolute;width: 8px;height: 8px;border-radius: 100%;background-color: #3fb2ff; color:#3fb2ff ;transform: translate(-50%,0);top: 50%;left: 5px;}
section#form .master-title ul li a{font-size: 1.4rem;color: #000;transition: all .3s ease-in;}

section#form .master-title ul li:last-child{border: 0;}

section#form .master-title ul li a:hover {color: #de4e3b;}







div.Form ul li.send input { background: #de4e3b; }

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



}

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

}

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


}
@media(max-width:1199px){
    /* 大小標題共用 */
    .master-title .icon {width: 100px;}
    .master-title .icon.sm {width:60px;}
    .master-title h2 {font-size:2.2rem;letter-spacing: .2rem;}
    .master-title h3 {font-size: 1.6rem;}
    .master-title p {font-size: 1.25rem;}



     /* 主視覺 */
    header#visual { height: auto;padding: 100px 30px; }
    header#visual .header-title { width: 80%; margin: 0 auto 100px;} 
    header#visual .header-title .header-sub { right: -5%; width: 80%; padding: 8px 20px; }
    header#visual .header-title .header-sub h2 { font-size: 1.3rem; }

    section#advantages .box .box-flex .text h3 { font-size: 1.6rem; }
    section#advantages .item-flex-g .item-flex p { font-size: 1.2rem; }

    section#role .box > h4 { font-size: 1.6rem; }
    section#role .box .box-con .video-bg .video-con h4 { font-size: 1.6rem; }
    
    section#lesson .box .title-flex h4 { font-size: 1.6rem; }
   
    section#stu .box .box-flex .photo .name h5 { font-size: 1.4rem; }


}


@media(max-width:991px){
    .master-title { width: 100%; }

 


}


@media(max-width: 767px){
    .container { padding: 15px;max-width: 98%; }
    section p,section li,section table tr td{font-size: 1rem;}
    section {padding: 30px 0;}
    /* 大小標題共用 */
    .master-title h2 {font-size: 1.5rem;}
    .master-title h3 {font-size: 1.3rem;}
    .master-title p {font-size: 1.05rem;}
    
    .master-title .icon {width: 80px;}
    .master-title .icon.sm {width:40px;}


    .title3d {text-shadow: 1px 1px 0 #000, 2px 2px 2px #000, 3px 3px 2px #000, 4px 4px 2px #000, 5px 5px 2px #000, 6px 6px 2px #000,/* 2px 外框 */ 2px 0 0 #000, -2px 0 0 #000, 0 2px 0 #000, 0 -2px 0 #000, 2px 2px 0 #000, -2px 2px 0 #000, 2px -2px 0 #000, -2px -2px 0 #000;}



    .floatBtn { display: none; }

    section .content { margin: 0 0 60px; }


    header#visual { height: auto; padding: 50px 15px;background:url(../images/header-bg-icon.png) center  / cover ; }
    header#visual .header-title { width: 100%; margin: 0 auto 150px; }
    header#visual .header-title .header-sub { right: -1.5%; width: 90%; padding: 8px 15px;border: 2px solid #000;border-right: 8px solid #000; }
    header#visual .header-title .header-sub h2 { font-size: 1.1rem;line-height: 1.5; }


    section#advantages .box { border: 2px solid #000; }
    section#advantages .box .box-top { border-bottom: 2px solid #000; }
    section#advantages .box .box-top .cir-g {padding: 10px 15px; }
    section#advantages .box .box-top .cir-g .cir { width: 16px; height: 16px; border-radius: 100%;border: 2px solid #000; }
    section#advantages .box .box-flex { flex-direction: column; }
    section#advantages .box .box-flex .photo { width: 80%; }
    section#advantages .box .box-flex .text { width: 100%; padding: 20px; }
    section#advantages .box .box-flex .text h3 { font-size: 1.3rem; }
    section#advantages .box .box-flex .text .item-flex { margin: 10px 0 ;}
    section#advantages .box .box-flex .text .item-flex h4 { font-size: 2rem; }


    section#advantages .item-flex-g .item-flex { width:44.5%; border: 2px solid #000; padding: 15px; flex-direction: column; text-align: center; }
    section#advantages .item-flex-g .item-flex .icon img { width: 60px; margin: 0 0 10px; }
    section#advantages .item-flex-g .item-flex p { font-size: 1.1rem;line-height: 1.6; }


    section#role { background:linear-gradient(to top, #70bfff59, #70bfff59); padding: 60px 0; }
    section#role .role-comic { width: 100%; }


    section#role .box { border: 2px solid #000; }
    section#role .box h5 { font-size: 1.2rem; }
    section#role .box .box-con .con-flex .con-item-g .con-item .con-item-title-flex .icon { width:30px; margin-right: 10px; }
    section#role .box .box-con .con-flex .con-item-g .con-item .con-item-title-flex .icon img { width: 30px; }
    section#role .box > h4 { font-size: 1.4rem; }
    section#role .box .box-con .video-bg .video-con h4 { font-size: 1.4rem; }

    section#role .box .box-con { padding: 20px; border-radius: 0 0 20px 20px; border-top: 2px solid #000; background-color: #fff; }
    section#role .box .box-con .con-flex:nth-child(1) { align-items: flex-start; margin: 0 auto 10px; flex-direction: column; }
    section#role .box .box-con .con-flex .person-photo { width:100%; order: 1 ; margin: 0 0 20px; }
    section#role .box .box-con .con-flex .person-photo img{ width:40%; }
    section#role .box .box-con .con-flex .con-item-g { width: 100%; order: 2 ; }
    section#lesson .box .title-flex h4 { font-size: 1.4rem; }
   
    section#stu .box .box-flex .photo .name h5 { font-size: 1.2rem; }

    section#role .box .box-con .con-flex.sing { padding: 20px; }
    section#role .box .box-con .con-flex.exam { width: 100%; flex-direction: column; }
    section#role .box .box-con .con-flex .exam-photo {width: 100%;}
    section#role .box .box-con .con-flex .exam-photo img { height: auto;width: 100%; }

    section#role .box .box-con .video-bg { padding: 0; }
    section#role .box .box-con .video-bg .video-con { width: 100%;text-align: center; }
    section#role .box .box-con .video-bg .video-con h4{ width: 100%; padding:5px 15px 0;font-size: 1.2rem;}









    section#lesson .num-flex {  width: 100%; }
    section#lesson .num-flex .num p { font-size: 1.2rem; }
    section#lesson .num-flex .num h3 { font-size: 3rem; }
  
    section#lesson .box {border: 2px solid #000; }
    section#lesson .box .title-flex .cir { width: 30px; height: 30px; border-radius: 100%; margin-right: 10px; border: 1px solid #000; font-size: 1.15rem; font-weight: 600; }

    section#lesson .box .title-flex h4 { font-size: 1.2rem; }
    section#lesson .box .box-con { padding: 20px; border-top: 2px solid #000; }
    section#lesson .box .box-con .photo { width: 100%; }
    section#lesson .box .box-con.box-con-flex { flex-direction: column; }
    section#lesson .box .box-con.box-con-flex ul { width:100%;padding: 0 0 0 0px; }
    section#lesson .box .box-con.box-con-flex ul li { margin: 0 0 5px; font-size: 1rem; }
    section#lesson .box.box .box-con.box-con-flex ul li span { margin: 0px 10px 0 0; }
    section#lesson .box .box-con.box-con-flex .photo { width: 100%; }
    section#lesson .box .box-con.box-con-flex .video-con { width:100%; }




    section#stu .box .box-flex { margin: 80px 0; border: 2px solid #000; padding: 20px; flex-direction: column; }

    section#stu .box .box-flex .photo { width: 100%; text-align: center;margin: 0 0 10px;}
    section#stu .box .box-flex .photo .name { border: 2px solid #000; padding: 10px 20px; }
    section#stu .box .box-flex:nth-child(1) .photo .name { top: -45px; left: -5px; }
    section#stu .box .box-flex:nth-child(2) .photo .name { top: -45px; left: -5px;right: auto; }
    section#stu .box .box-flex .photo img { width: 70%; }
    section#stu .box .box-flex .text { width:100%; }
    section#stu .box .box-flex .photo .name h5 { font-size: 1rem; }
    section#stu .box .box-flex:nth-child(2) { flex-direction: column; }



section#form {background:linear-gradient(to top,#70bfff59,#70bfff59);padding: 30px 15px; }
section#form .master-title ul li a{font-size: 1.1rem;color: #000;transition: all .3s ease-in;}
div.Form ul li.no-title h5 {
    font-size: 1.2rem;
}


}

@media(max-width: 575px){
    .container { padding: 15px; }
     header#visual .header-title h1 { font-size: 1.8rem; }
}