@charset "UTF-8";
html, body, div, span, iframe,h1, h2, h3, h4, h5, h6, p,a, em, img,
b, u, i, dl, dt, dd, ol, ul, li,form, label, article, aside, nav {margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit; vertical-align: baseline;}
article, aside,footer, header, menu, nav{display: block;}
body {line-height: 1;}
ol, ul { list-style: none;}
blockquote, q { quotes: none;}
table {border-collapse:clapse; border-spacing: 0;}
body { font-family: "微軟正黑體" !important;}
.clearfix {clear: both;}
/*置頂按鈕*/
.gotop { position: fixed; right:10px;  bottom:10px; width: 50px;  height: 50px; background-color: #555;
  opacity: 1;  transition: all 0.4s ease-in-out 0s;  z-index: 888;  border-radius: 50%; display: flex; justify-content: center; align-items: center; }
.gotop a{ text-align: center; color: #fff; text-decoration:none; transition: all .3s; }
.gotop a:hover{ color: #fff; text-decoration:none;}
.gotop:active{ box-shadow:1px 1px 3px 2px rgba(20%,20%,40%,0.5) inset;transition: all 0s;}

/* ===== desktop ===== */
/* header */
header{background:url(../images/headernew.png)no-repeat;width: 100%;height: 0;padding-bottom:36.3%;background-size: cover;position: relative;overflow: hidden;}
header::before{content:'';display: block;position: absolute;bottom: 0;right: 0;width: 100%;height: 100%;background:url(../images/header-1.png)no-repeat;background-size: cover;z-index: -1;transform: translateY(100%);}
.head-an::before{animation:upheader 1s linear;animation-fill-mode: both;animation-delay: .5s;}
@keyframes upheader{
from{transform: translateY(100%);}
to{transform: translateY(0);}
}
header::after{content:'';display: block;position: absolute;bottom: 0;right: 0;width: 100%;height: 100%;background:url(../images/header-2.png)no-repeat;background-size: cover;z-index: -1;transform: translateY(100%);}
.head-an::after{animation:upheader 1s linear;animation-fill-mode: both;animation-delay: .5s;}
@keyframes upheader{
from{transform: translateY(100%);}
to{transform: translateY(0);}
}
.header{background: url(../images/header-content.png)no-repeat;background-size: cover;position: absolute;top: 0;left: 0;width: 100%;height: 100%;transform: translateY(100%);}
.head-an>div{animation:headerContent 2s linear;animation-fill-mode: both; transform-origin:center 100%;}
/* .head-an>div{animation:headerContent 2s linear infinite;animation-fill-mode: both; transform-origin:center 100%;} */
@keyframes headerContent{
    0%{transform: translateY(100%);}
    50%{transform: translateY(0);}
    60%{transform: skewX(10deg);}
    70%{transform: skewX(-10deg);}
    80%{transform: skewX(10deg);}
    90%{transform: skewX(-10deg);}
    100%{transform: skewX(0);}
}
/* @keyframes headerContent{
    00%{transform: skewX(0deg);}
    10%,30%,50%,70%,90%{transform: skewX(-10deg);}
    20%,40%,60%,80%{transform: skewX(10deg);}
    100%{transform: skewX(0);}
} */
/* main */
.brand{background: #a9203a;box-sizing: border-box;padding:1% 5%; text-align: center;}
.brand strong{font-size: 2.5rem; color: #ffe100;}

.work{background: #a9203a;display: flex;justify-content:flex-end;align-items:center;flex-wrap:wrap;box-sizing: border-box;padding:30px calc((100% - 900px)/2) 80px;}
.work>img{width: 25%;}

.work>div{margin-left:50px;width: 65%;}
.work h2{box-sizing: border-box;padding: 25px 50px 25px 25px;background: #000;color: #fff;font-weight: bold;font-size: 44px;border-top-right-radius:50px;border-bottom-right-radius:50px;display: inline-block;}
.work .head{font-weight: bold;font-size: 37px;color: #ffe100;margin: 20px 0;line-height:1.3;}
.work .content{color:#fff;font-size: 25px;line-height: 1.25; text-align: justify; margin: 0;}
.work>p{width: 100%;text-align: center; margin-bottom: 0;}
.work a{color: #187987;text-decoration: none;background:#ffe100;font-weight: bold;box-sizing: border-box;padding:15px 50px;border-radius: 10px;font-size: 24px;display: inline-block;margin-top:40px;}
.work a:hover{color: #187987 ;}
.work a::before{content:"\f05a";font-family:"Font Awesome 5 Free";display: inline-block;font-weight:900;}

.advantage{background: #fff2e0;padding:110px calc((100% - 1100px)/2);box-sizing: border-box;text-align: center;overflow: hidden;}
.advantage h2{text-align: center;font-size: 55px;color: #264678; margin-bottom: 0;}
.advantage ul{display: flex;justify-content: center;margin:60px 0 170px 0; padding: 0;}
.advantage ul li{width:19.72%;}
.advantage ul li:nth-child(even){transform: translateY(49%);}
.advantage ul li img{transition: all .3s;transform-origin:100% center; max-width: 150%;}
.advantage ul li:nth-child(1) img{transform:translateX(-100%) translateY(-300%);}
.advantage ul li:nth-child(2) img{transform:translateX(-100%) translateY(300%);}
.advantage ul li:nth-child(3) img{transform:translateX(0) translateY(-300%);}
.advantage ul li:nth-child(4) img{transform:translateX(100%) translateY(300%);}
.advantage ul li:nth-child(5) img{transform:translateX(100%) translateY(-300%);}
.advantage .ull li img{transform: translateX(0) translateY(0) !important;}

.advantage a{display: inline-block;margin: 0 auto;text-decoration:none;background: #264678;color: #fff;box-sizing: border-box;padding:15px 40px;font-size: 34px;border-radius: 10px;}
.advantage a:hover{color: #fff;}
.advantage a::before{content:"\f05a";font-family:"Font Awesome 5 Free";display: inline-block;font-weight:900;}

.feedback{background: url(../images/feedback-bkg.jpg);box-sizing: border-box;padding:100px calc((100% - 1000px)/2) 120px calc((100% - 1000px)/2);position: relative;}
.feedback .feedback-left{content:'';display: block;width: 30%;height: 0;padding-bottom:12.5%;position: absolute;top: 0;left: 0;background:url(../images/feedback-2.png)no-repeat;background-size:cover;}
.feedback .feedback-right{content:'';display: block;width: 30%;height: 0;padding-bottom:12.5%;position: absolute;top: 0;right: 0;background:url(../images/feedback-1.png)no-repeat;background-size:cover;}
.feedback h2{color: #fff;font-size: 50px;text-align: center;line-height: 1.3; margin-bottom: 0;}
.feedback ul{display: flex;justify-content:space-around;margin-top: 150px; margin-bottom: 0; padding: 0;}
.feedback ul li{width: 48%;background: #fff;position: relative;padding: 100px 34px;box-sizing: border-box;}
.feedback ul .divIMG{position: absolute;top: 0;left: 0;width: 100%;text-align: center;transform: translateY(-60%);}
.feedback ul .head{color: #42b0a4;font-weight: bold;font-size: 30px;line-height: 1.3;margin-bottom:20px;}
.feedback ul .content{font-size: 20px;line-height: 1.6; text-align: justify; margin: 0;}
.feedback .divA{position: absolute;bottom:6%;left: 0;width: 100%;text-align: center;}
.feedback a{box-sizing: border-box;padding:10px 40px;background: #42b0a4;text-decoration: none;color: #fff;font-weight: bold;font-size: 25px;border-radius: 10px;}
.feedback a:hover{color: #fff;}
.feedback a::before{content:"\f05a";font-family:"Font Awesome 5 Free";display: inline-block;font-weight:900;}

.life{padding: 90px calc((100% - 800px)/2) 350px calc((100% - 800px)/2);box-sizing: border-box;text-align: center;position: relative;}
.life::after{content:'';display: block;position: absolute;bottom: 0;left: 0;width: 100%;padding-top:14.32%;background:url(../images/lifebkg.png)no-repeat;background-size: cover;}
.life h2{text-align: center;font-size: 55px;color: #a9203a;margin-bottom:30px;line-height: 1.3;}
.life .detail p{font-size:28px;margin-bottom:30px;line-height: 1.5;}
.life a{box-sizing: border-box;padding:15px 50px;background: #a9203a;text-decoration: none;color: #fff;font-weight: bold;font-size: 25px;border-radius: 10px;display: inline-block;}
.life a:hover{color: #fff;}
.life a::before{content:"\f05a";font-family:"Font Awesome 5 Free";display: inline-block;font-weight:900;}

.plane{background: #19a3a3;box-sizing: border-box;padding:100px calc((100% - 1000px)/2);text-align: center;}
.plane h2{color: #fff;font-size: 55px;line-height: 1.2;text-align: center; margin: 0;}
.plane ul{display: flex;justify-content: space-between;flex-wrap:wrap;margin: 30px 0; padding: 0;}
.plane li{width: 23%;display: flex;flex-flow: column;justify-content:flex-start;}
.plane .top{text-align: center;background: #a9203a;color: #fff;font-weight: bold;font-size: 25px;padding: 15px 0;box-sizing: border-box;border-top-left-radius: 10px;border-top-right-radius: 10px;}
.plane .down{background: #fff;box-sizing: border-box;padding: 15px; font-size: 19px;height: 100%;line-height: 1.5; text-align: center;}
.plane .planeIMG{display:block;width: 100%;text-align: center;}
.plane a{box-sizing: border-box;padding:15px 50px;background: #ffe100;text-decoration: none;color: #187987;font-weight: bold;font-size: 25px;border-radius: 10px;display: inline-block;}
.plane a:hover{color: #187987;}
.plane a::before{content:"\f05a";font-family:"Font Awesome 5 Free";display: inline-block;font-weight:900;}
.plane img{max-width: 20%; margin: 0 auto 2%;}

/* 8大輔考特色 */
.service {
    padding: 80px calc((100% - 1000px) / 2);
    text-align: center;
    background:url(../images/zero-bkg.jpg)no-repeat;
    background-size: cover;
    background-position: center center;
    }
.service h2 {
    font-size: 55px;
    line-height: 1.2;
    color: #a9203a;
    margin-bottom: 0;
}
.service .list ul{
    margin: 30px 0; 
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1%;
    flex-wrap: wrap;
}
.service .list ul li {
    width: 32%;
    background-color: #31435f;
    color:#fff;
    text-align: left;
    margin: 4px 0;
    padding: 12px 25px;
    font-size: 1.8rem;		  
}	
.service .list ul li:nth-child(4),.service .list ul li:nth-child(5),.service .list ul li:nth-child(6) {
    background-color: #19a3a3;
}    
.service .list ul li:nth-child(7),.service .list ul li:nth-child(8) {
  width: 45%;
}    
.service .btn a {
    clear: both;
    margin: 0 auto;
    padding:15px 50px;
    line-height: 60px;
    background-color: #a9203a;
    border-radius: 10px;
    font-size: 25px;
    font-weight: bold;
    color: #FFF;
    text-align: center;
    text-decoration: none;
}
.service a::before {
  content:"\f05a";
  font-family:"Font Awesome 5 Free";
  display: inline-block;
  font-weight:900;
}



.zero{background:url(../images/zero-bkg.jpg)no-repeat;background-size: cover;background-position: center 0; padding: 90px calc((100% - 900px)/2);display: flex;justify-content: center;align-items: center;}
.zero>div{margin-left: 15px;}
.zero h2{font-size: 60px;color: #a9203a;margin-bottom:25px;}
.zero p{font-size: 40px;margin-bottom: 15px;}
.zero a{box-sizing: border-box;padding:15px 50px;background: #a9203a;text-decoration: none;color: #fff;font-weight: bold;font-size: 25px;border-radius: 10px;display: inline-block;}
.zero a:hover{color: #fff;}
.zero a::before{content:"\f05a";font-family:"Font Awesome 5 Free";display: inline-block;font-weight:900;}

/* footer */
.footer{ padding: 50px calc((100% - 1200px)/2); width:100%; background: #31435f; box-sizing: border-box;}
.footer ul{display: flex; flex-wrap: wrap; padding: 0;}
.footer ul li{ width: 20%; margin: 8px 0;}
.footer ul li a{ display:inline-block; font-size:20px; text-decoration:none; color:#FFF; position: relative;}
.footer ul li a::after{ content:''; display: inline-block; position: absolute; bottom:-2px; left: 45%; width: 0; height: 1px; background:#fff; transition: all .8s;}
.footer ul li a:hover::after{ left: 0; width: 99%;}

@media(max-width:1400px){.advantage ul li img{width: 100%;}}

@media (max-width: 1200px) {
  .footer{ padding: 50px 5%;}
  .footer li{ text-align: center;}
}

@media(max-width:1180px){
.work{padding:70px 2%;}
.work h2{font-size: 42px;}

.advantage{padding:70px 2%;}
.advantage ul{flex-wrap: wrap;justify-content:center;align-items: center;margin: 60px 0;}
.advantage ul li{width:30%;}
.advantage ul li:nth-child(even){transform: unset;}
.advantage ul li:nth-child(1){order:1;}
.advantage ul li:nth-child(2){order:4;}
.advantage ul li:nth-child(3){order:2;}
.advantage ul li:nth-child(4){order:5;}
.advantage ul li:nth-child(5){order:3;}

.feedback{padding:70px 2%}

.life{padding:70px 2% 100px;}

.plane{padding:70px 2%;}

/* 智能服務 */
.service {
	padding: 80px 2%;
}
.service h3{
	text-align: justify;
}
.service .list ul li {
  font-size: 1.4rem;
}

.zero{padding:70px 1%;}
}

@media screen and ( min-width:768px ) and ( max-width:1024px ){

	/* == line連結展開區塊 == */
	.line-wrap{ display: none; width: 100%; padding: 50px 2%;}
	.line-wrap .linebox p{ padding-bottom:20px; font-size: 2em;}
	.line-wrap .linebox ul{ display: flex; flex-wrap: wrap; justify-content: center;}
	.line-wrap .linebox ul li{ width: 20%; margin: 5px; }
	.line-wrap .linebox ul a{ font-size: 1.2em;}
}
/* == 平版版型區 ============================================================================= */
@media( max-width:768px){
    
/* main */
.work{justify-content: center;}
.work h2{font-size: 5vw;padding:15px 40px 15px 20px;}
.work>div{margin-left:20px;}
.work .head{font-size: 26px;}
.work .content{font-size: 22px;}

.advantage{padding: 50px 1%;}
.advantage a{padding: 15px 50px;font-size: 24px;font-weight: bold;}

.feedback{padding:70px 1% 50px 1%;}
.feedback ul li{padding: 100px 20px;}
.feedback ul .head{font-size:25px;line-height: 1.2;}

.life{padding:70px 2% 19vw;}
.life h2{font-size:36px;margin-bottom: 25px;}
.life .detail p{font-size:22px;margin-bottom:20px;}

.plane h2{font-size: 5vw;}
.plane li{width: 21%;}
.plane .top{font-size:2.5vw;}
.plane .down{padding: 10px;font-size: 2vw;}

/* 智能服務 */
  .service h2{
  font-size: 5vw;
  }
  .service h3{
  font-size: 1.2em;
  }
  .service .list ul li {
  font-size: 1.4em;
  } 
  .service .btn a {
	font-size: 25px;
  }

.zero{padding:60px 1%;flex-wrap: wrap;text-align: center;}
.zero h2{margin-bottom: 10px;}
.zero h2 br{display: none;}
.zero img{width:45%;margin-bottom:50px;}
.zero p br{display: none;}
.zero>div{margin-left: 0;width: 100%;}

/* footer */
.footer { padding: 30px 4%;}
.footer ul li{ text-align: center;}
	
}

/* == 手機版型區 ============================================================================= */
@media( max-width:600px ){
/* header */
header{background:url(../images/header-mobile.jpg)no-repeat;width: 100%;padding-bottom: 140%;background-size: cover;}
.head-an::before,.head-an::after,.header{display: none;}

/* main */
/* main{display: none;} */

.brand strong{font-size: 1.5rem;}

.work{flex-wrap: wrap;padding:50px 5%;}
.work h2{font-size:7vw;padding: 10px 20px 10px 10px;}
.work>img{max-width:150px;width: unset;}
.work>div{width: 100%;margin:30px 0;text-align: center;}
.work .content{line-height: 1.6;}
.work a{margin-top: 0;}

.advantage h2{font-size: 9vw;font-weight: bold;}
.advantage ul{justify-content: flex-start;margin:40px 2% 20px;}
.advantage ul li{width: 50%;margin-bottom:30px;}
.advantage ul li:nth-child(even){transform: translateY(50%);}
.advantage ul li:nth-child(1){order:0 !important;}
.advantage ul li:nth-child(2){order:0 !important;}
.advantage ul li:nth-child(3){order:0 !important;}
.advantage ul li:nth-child(4){order:0 !important;}
.advantage ul li:nth-child(5){order:0 !important;}
.advantage ul li:nth-child(1) img{ transform:translateX(-150%) translateY(-350%);}
.advantage ul li:nth-child(2) img{ transform:translateX(150%) translateY(-350%);}
.advantage ul li:nth-child(3) img{ transform:translateX(-300%) translateY(0%);}
.advantage ul li:nth-child(4) img{ transform:translateX(150%) translateY(350%);}
.advantage ul li:nth-child(5) img{ transform:translateX(-150%) translateY(350%);}

.feedback{padding: 70px 4% 50px;}
.feedback h2{font-size: 8vw;font-weight: bold;}
.feedback ul{flex-wrap: wrap;}
.feedback ul li{width: 100%;padding: 100px 20px;margin-bottom:150px;}
.feedback ul li:last-child{margin-bottom: 0;}
.feedback .divIMG img{max-width:150px;}
.feedback ul .head{font-size:7vw;}

.life{padding: 13vw 4% 20vw 4%;}
.life h2{font-size:8vw;font-weight: bold;}
.life .detail p{text-align: justify;line-height: 1.3;}

.plane{padding: 13vw 4%;}
.plane h2{font-size: 8vw;}
.plane .planeIMG{order:-1;max-width:50%;margin:20px 25%;}
.plane .planeIMG img{width:100%;}
.plane li{width:48%; margin: 2vw 0;}
.plane .top{font-size:6.5vw;}
.plane .down{font-size: 4.5vw;}

/* 智能服務 */
.service {
  padding: 13vw 4%;
}
  .service h2 {
    font-size: 7vw;
  }
	.service .list ul li {
	  width: 49%;
	  padding: 12px 15px;
    margin: 2px 0;
    font-size: 1rem;
	  background-color: rgb(25, 163, 163);
	}  
	.service .list ul li:nth-of-type(7) {
	  width: 100%;
	}
	.service .list ul li:nth-of-type(8) {
	  width: 100%;
	}
	.service .list ul li:nth-of-type(9) {
	  width: 100%;
	}
	.service .btn a{
	  font-size: 25px;
    padding: 15px 30px;
	}

@keyframes arrowmove{
        0%{ transform: translateY(-8px);}
        20%{ /*從 20% 的地方才開始變形*/}
        50%{ transform: translateY(0px); }
        80%{ }
        100%{ transform: translateY(-10px)}
}

.zero img{width: 80%;margin-bottom: 40px;}
.zero h2{font-size:9vw;}
.zero p{font-size:6vw;line-height: 2;}

/* footer */
 .footer{ padding: 30px 2% 70px;}
 .footer ul li{ width: 33%;}
 .footer ul li a{ font-size: 16px;}
	
}


/* == AI學習系統 ============================================================================= */
.ai-learning{
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#894991+0,3d4f8f+100 */
    background: linear-gradient(135deg,  #894991 0%,#3d4f8f 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.ai-learning>div{
    background-image: url(../images/images-ai-bg.png);
    background-position: center top;
    background-repeat: repeat-y;
}
.ai-subtitle{
    position: relative;
    z-index: 1;
}
.ai-subtitle::after{
    content: "";
    position: absolute;
    background-color: rgba(255, 255, 255, 0.3);
    display: inline-block;
    width: 100%; height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
    border-radius: 50px;
}
.ai-subtitle .subtit-box{
    display: flex;
    justify-content: center;
    align-items: center;
}
.ai-subtitle .subtit-box img{ max-width: 60px;}
.ai-subtitle .subtit-box p{
    font-size: 1.8rem;
    color: #ffffff;
    line-height: 1.1;
    font-weight: bold;
}
.ai-main>img{ max-width: 100%;}
.ai-main-box{ padding: 5px 24px;}
.ai-main-box h3{ font-size: 2.5rem;}
.ai-main-box h5{ 
    display: block;
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f900a2+0,00e5ae+100 */
    background: linear-gradient(to right,  #f900a2 0%,#00e5ae 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    padding: 8px;
    border-radius: 10px;
    font-size: 1.2rem;
}
.ai-learning .ai-btn{ text-align: center;}
.ai-learning .ai-btn a{ 
  display: block; 
  width:30%; 
  margin: 0 auto; padding: 15px 0; 
  border: 2px solid #fff; 
  font-size: 1.7rem; color: #2A2867; font-weight: bold;
  border-radius: 50rem; background-color: #00E5AE;
  box-shadow: 4px 5px 0 rgba(0, 0, 0, 0.3); transform: translateY(0);
  cursor: pointer;
  transition: all 1s;
}
.ai-learning .ai-btn a:hover{ transform: translateY(-5px); }

/* ===== 平板Tablet ====================================================================================== */
@media(max-width:992px){
    .ai-subtitle .subtit-box p{
    font-size: 1.2rem;
    }
    .ai-subtitle .subtit-box img{
        max-width: 20%;
    }
    .ai-main-box{ padding: 5px 12px;}
    .ai-main-box h5{ 
    font-size: 1rem;
    }
    .ai-learning .ai-btn a{ 
    width:70%;
    }
}


/* ===== 手機mobile ====================================================================================== */
@media(max-width:667px){

    .ai-subtitle .subtit-box p{
    font-size: 1rem;
    text-align: center;
    line-height: 1.2;
    }
    .ai-main>img{ max-width: 75%;}
    .ai-main-box{
        padding: 0px;
        display: flex;
        align-items: center;
    }
    .ai-main-box>img{
        max-width: 16%;
    }
    .ai-main-box>div{
        padding-left: 10px;
    }
    .ai-main-box h3{ font-size: 1.6rem;}
    .ai-main-box h5{ 
    padding: 5px 8px;
    border-radius: 10px;
    font-size: 0.95rem;
    }
    .ai-main-box p{ 
    font-size: 0.8rem;
    }
    .ai-learning .ai-btn a{ 
    width:70%;
    padding: 8px 0;
    font-size: 1.2rem;
}

}