*{font-family: 'Noto Sans TC','微軟正黑體',sans-serif; }
body{ font-family: 'Noto Sans TC','微軟正黑體',sans-serif; background: #F4F4F4;}
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: #0D1F2D;}
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;}





/* 輪播 */
.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:1250px;}

.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:20px 0 40px;position: relative;}
.master-title.center {text-align: center;margin:20px auto 40px;}
.master-title h2 ,.master-title h3 ,.master-title h5  {color: #0D1F2D;}
.master-title h2 {color: #E97C21;  /* 文字顏色 */
     text-shadow:
    -2px -2px 0 #0D1F2D,
     2px -2px 0 #0D1F2D,
    -2px  2px 0 #0D1F2D,
     2px  2px 0 #0D1F2D,
     0px  -2px 0 #0D1F2D,
     0px   2px 0 #0D1F2D,
    -2px  0px 0 #0D1F2D,
     2px  0px 0 #0D1F2D, 2px 2px 0 #002b56,
    4px 4px 0 #00000033;}



.master-title.white h2 ,.master-title.white h3 ,.master-title.white h4 ,.master-title.white h5 {color: #fff;}

.master-title h2 {font-size: 3.6rem;font-weight: 900;letter-spacing: .08em;margin: 0 0 15px;}
.master-title h3 {font-size: 1.6rem;color: #fff;border: 2px solid #0D1F2D;padding: 5px 15px;display: inline-block;margin: 0 auto;border-radius: 20px;margin: 0 0 20px;position: relative; background-color: #0D1F2D;}

.master-title h3::after{
  content: "";
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 15px;
  height: 15px;
  background-color: #0D1F2D;
  border-left: 2px solid #0D1F2D;
  border-bottom: 2px solid #0D1F2D;
  transform: translateX(-50%) rotate(-45deg);}




.master-title h4 {font-size: 1.6rem;}
.master-title h5 {font-size: 1.4rem;line-height: 1.6;}
.master-title h5 span.yellow {color: #f8eb98;}
.master-title h5 span.blue {color: #8bdbfd;}
.master-title h5 span.bg-blue {background-color: #19568cce;color: #fff; border-radius: 10px;padding: 5px 10px;margin: 5px 0 0 ;display: inline-block;}





.con-title {margin:100px 0 20px;position: relative;}
.con-title.center {text-align: center;margin:100px auto 20px;}
.con-title.center .icon {width: 100px;margin: 0 auto;} 
.con-title.center .icon img{width: 100%} 
.con-title h2 ,.con-title h3 ,.con-title h5  {color: #0D1F2D;}
.con-title.white h2 ,.con-title.white h3 ,.con-title.white h4 ,.con-title.white h5 {color: #fff;}

.con-title h2 {font-size: 2.6rem;font-weight: 700;letter-spacing: .08em;}
.con-title h4 {font-size: 1.5rem;}
.con-title h5 {font-size: 1.4rem;line-height: 1.6;}


.con-title.white h3 {color: #fff;font-weight: 900;letter-spacing: .08em;font-size: 2rem;font-size: 2.4rem;
     text-shadow:
    -2px -2px 0 #0D1F2D,
     2px -2px 0 #0D1F2D,
    -2px  2px 0 #0D1F2D,
     2px  2px 0 #0D1F2D,
     0px  -2px 0 #0D1F2D,
     0px   2px 0 #0D1F2D,
    -2px  0px 0 #0D1F2D,
     2px  0px 0 #0D1F2D, 2px 2px 0 #002b56,
     4px 4px 0 #00000033;}





.master-title .dot-g .dot {width: 14px;height:14px;border-radius: 14px;margin:0 10px 20px;}
.master-title.center .dot-g {display: flex;align-items: center;justify-content: center;}
.master-title.center .dot-g .dot{background-color: #8cd4ee;}
.master-title.white .dot-g .dot{background-color: #ffffff;}











.link a{color:#4186c1;text-decoration: none;display: inline;font-weight: 400;transition: all .3s ease-in;}
.link svg {display: inline;width: 32px;transform: translate(0,-3px);transition: all .3s ease-in;}
.link svg .link-svg { fill: none; stroke: #4186c1; stroke-linecap: round; stroke-linejoin: round; stroke-width: 5px;transition: all .3s ease-in; }

.link:hover a {color: #0D1F2D;}
.link:hover svg {transform: translate(5px,-3px);}
.link:hover svg .link-svg {stroke: #0D1F2D;}



/* 主視覺 */
header#visual {position: relative;background:url(../images/header-bg.jpg) center bottom / cover;  height: 100vh;display: flex;justify-content: center;background-color: #192471;}
header#visual .container {position: relative;}
header#visual .header-title {width:80%;text-align: center;margin:10px auto ;}
header#visual .header-title img {width: 100%;}
header#visual h1 {opacity: 0;position: absolute;z-index: -999;}
header#visual .header-photo-robot {width: 38%;position: absolute;transform: translate(-50%,0);left: 50%;animation: robot 1.2s cubic-bezier(0.24, 0.5, 0.57, 0.9) infinite alternate;}
header#visual .header-photo-robot img {width: 100%;}

@keyframes robot{
0%{bottom: 3%;}
100%{bottom: 0%;}
}


header#visual .header-icon-gear {animation: gear 15s linear infinite ;position: absolute;}
header#visual .header-icon-gear img{width: 100%;}
header#visual .header-icon-gear.gear-1 {left: 8%;top:5% ;width:5% ;} 
header#visual .header-icon-gear.gear-2 {left: 15%;  top:28% ;width:3% ;} 
header#visual .header-icon-gear.gear-3 {right: 12%;top:15% ;width:5% ;} 

@keyframes gear{
0%{transform: rotate(0deg);}
100%{transform: rotate(360deg);}
}




section#why { background: #4186c1;}
section#why .card {border-radius: 20px;padding: 30px;margin:20px 0;min-height: 340px;}
section#why .card .icon-flex{ margin: 0 auto 10px;}
section#why .card .icon-flex .icon{ width: 40%;margin: 0 auto 10px;}
section#why .card .icon-flex .icon img{ width: 100%;}
section#why .card .icon-flex .icon-text-flex {width: 100%;display: flex;align-items: center;justify-content: center;}
section#why .card .icon-flex .icon-text-flex .arrow {width: 40px;margin: 0 0 0 10px;}
section#why .card .icon-flex .icon-text-flex h4 {margin: 0;font-size: 2.4rem;font-weight: 900;}








section#stu .box {position: relative;}
section#stu .box .bg{background-color: rgba(176, 226, 255, 0.3);width: 100%;height: 100%;position: absolute;}
section#stu .box .container{padding: 60px;}
section#stu .box .name ,section#stu .box .stu-title .text ,section#stu .box .con-text {width: 68%;padding: 15px 30px;}
section#stu .box .name {display: flex;align-items: center;}
section#stu .box .name h3{color: #4186c1;font-weight: 600;margin:0 15px 10px 0;font-size: 2.6rem;width: 135px;}
section#stu .box .name h4 {margin: 0;font-size: 1.25rem;}
section#stu .box .name h4 a{color: #0D1F2D;text-decoration: none;transition: all .3s ease-in;font-size: 1.25rem;}
section#stu .box .name h4 a:hover {color: #4186c1;}
section#stu .box .name h4 span {display: block;transform: translateX(5px);}
section#stu .box .stu-title {position: relative;background-color: #4186c1;}
section#stu .box .stu-title .text h5 {color: #fff;margin: 0;line-height: 1.8;font-size: 1.4rem;}

section#stu .box .stu-title .photo {width: 32%;position: absolute;right: 20px;top: -60px;padding: 0 20px;}
section#stu .box .stu-title .photo img{width:100%;}


section#stu .box .con-text{position: relative;}
section#stu .box .con-text p{  text-align: justify;
  text-justify: inter-ideograph;font-size: 1.05rem;}
section#stu .box .con-text .icon-comma {position: absolute;width: 150px;top: 10px;left: 20px;opacity: .5;}



/* 偶數換位置 */
section#stu .box:nth-child(even) .stu-title .photo {left: 20px; right: auto;}
section#stu .box:nth-child(even) .name ,section#stu .box:nth-child(even) .stu-title .text ,section#stu .box:nth-child(even) .con-text {margin-left: auto; margin-right: 0;}





section#lesson {background:url(../images/lesson-bg.jpg) bottom center;background-size: cover;background-attachment: fixed;}
section#lesson .box-g {padding: 30px;border-radius: 20px;background-color: #fff;}
section#lesson .box-g .box-flex {display: flex;align-items: center;justify-content: space-around;padding: 40px 20px;}
section#lesson .box-g .box-flex .icon {width: 180px;position: relative;}
section#lesson .box-g .box-flex .icon img{width: 100%;}
section#lesson .box-g .box-flex .icon::after {content:"";width: 100%;height: 100%;border-radius: 100%;background-color: #4186c1;position: absolute;left: 0;top: 0;z-index: -1;transition: all .3s ease-in;}


section#lesson .box-g .box-flex .text {width: 80%;}

section#lesson .box-g .box-flex .text h4 {color: #0D1F2D;font-size: 1.4rem;border-left: 8px solid #E97C21;margin: 0 0 10px;padding: 0 10px;color:#E97C21 ;}
section#lesson .box-g .box-flex .text .text-con {background-color: rgba(176, 226, 255, 0.2);padding: 20px;border-radius: 20px;margin: 20px 0 0;transition: all .3s ease-in;}



section#lesson .box-g .box-flex .text .text-con a {transform: translateX(-10px); font-size: 1.3rem;font-weight: 400;color: #4186c1;text-decoration: none;display: inline-block;margin: 0 0 5px;}
section#lesson .box-g .box-flex .text .text-con a:hover {color: #0D1F2D;}
section#lesson .box-g .line {border:1px solid #cdd3d7 ;margin: 10px auto;}
section#lesson .box-g .box-flex .text .text-con p {margin: 0;}


section#lesson .box-g a  {text-decoration: none;}
section#lesson .box-g a .box-flex .text .text-con h5 {transform: translateX(-10px); font-size: 1.5rem;font-weight: 600;color: #4186c1;display: inline-block;margin: 0 0 5px;transition: all .3s ease-in;}
section#lesson .box-g a:hover .box-flex .text .text-con h5 {color:#0D1F2D;}
section#lesson .box-g a:hover .box-flex .icon::after {background-color: #E97C21;}
 
section#lesson .box-g a:hover .box-flex .text .text-con {background-color: rgba(176, 226, 255, 0.5);}






/* 按鈕*/ 
section#BTN {background-color: #4186c1;}
section#BTN h5 {line-height: 1.8;color: #fff;font-size: 1.2rem;}
section#BTN h2 {line-height: 1.8;color: #fff;}
section#BTN h5 span {background: linear-gradient(to bottom , transparent 0% , #00f7ff59 80%, #00e1ff59 80%);color: #fff;} 

section#BTN .big-btn {margin: 0 auto;font-size: 1.7rem;padding: 12px 15px;text-align: center;width: 100%;background-color: #fff;border-radius: 20px;}
section#BTN a {font-weight: 600;text-decoration: none;color: #4186c1;transition: all .3s ease-in;}
section#BTN a:hover {color: #0D1F2D;}
section#BTN a i {transition: all .3s ease-in;}
section#BTN a:hover i{transform: translateX(5px);}







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



}

@media(max-width:1440px){
     /* 主視覺 */
   header#visual .header-icon-gear.gear-1 {left: 2%;top:5% ;width:5% ;} 
   header#visual .header-icon-gear.gear-2 {left: 5%;top:28% ;width:3% ;} 
   header#visual .header-icon-gear.gear-3 {right: 2%;top:15% ;width:5% ;} 

}

@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;}

    header#visual { height:600px; }
  

    
}


@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: 2.2rem; }
    .master-title h3 { font-size: 1.4rem; }
    .master-title h5 { font-size: 1.2rem;}
  
    .con-title.white h3 { font-size: 1.6rem; }
    .con-title.center .icon { width: 80px; }
    .con-title.center { margin: 60px auto 20px; }

    section { padding: 30px 0;}
    section p, section li, section table tr td { font-size: 1.1rem; }
    header#visual .header-title img { width: 100%; }
    header#visual { height:500px; }
header#visual {
    position: relative;
    background: url(../images/header-bg.jpg) center bottom  / 100%;
    background-repeat: no-repeat;
}
    section#why .card { padding: 20px; min-height: auto; }
    section#why .card .icon-flex .icon { width: 30%; }

    section#stu .box .container { padding: 15px; }
    section#stu .box .name { align-items: flex-start; flex-direction: column; }
    section#stu .box .stu-title .photo { width:50%; right: auto; left: 50%; top: 330px; padding: 0; transform: translate(-50%,-50%);}
    section#stu .box:nth-child(even) .stu-title .photo { left: 50% ;right: auto; }
    section#stu .box .name, section#stu .box .stu-title .text, section#stu .box .con-text { width: 100%; padding: 15px; }
    section#stu .box .con-text { margin:250px 0 20px; padding: 0;}
    section#stu .box .stu-title .text {padding: 10px 15px;height: 300px;}
    section#stu .box .name h4 span {display: block;}



    section#lesson .box-g .box-flex { display: flex ; align-items: center; justify-content: space-around; padding: 40px 20px;flex-direction: column;  padding: 40px 0; }


    section#lesson .box-g { padding: 15px; }
    section#lesson .box-g .box-flex .text { width: 100%; }
    section#lesson .box-g .box-flex .icon { width: 120px; margin: 0 0 20px; }

    section#BTN .big-btn { width: 80%; margin: 20px auto; }
    section#BTN a { width: 100%;}

  
}












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


    header#visual { height:320px; }
    header#visual .header-photo-robot { width: 36%; }
    header#visual .header-title { width: 100%; }

   header#visual .header-icon-gear.gear-1 {left: 1%;top:5% ;width:5% ;} 
   header#visual .header-icon-gear.gear-2 {left: 3%;top:40% ;width:3% ;} 
   header#visual .header-icon-gear.gear-3 {right: 1%;top:12% ;width:5% ;} 

   .con-title.white h3 { font-size: 1.5rem; }




   section#stu .box .stu-title .photo { width:80%;}
   section#BTN .big-btn { width: 100%; margin: 20px auto;    font-size: 1.4rem; }

}