body{font-family: "Arial","微軟正黑體";background-color: #FFF;}
button:focus{outline:none}
.container{position: relative;max-width: 80%;}
a:hover{text-decoration: none;}
section{padding: 100px 0;}
p{font-size: 20px;}
h3{display: flex;align-items: center;font-size: 25px;font-weight: 400;transform: translate3d(0px, 0px, 0px);}
h4{line-height: 1.8;}
h6{font-size: 1.8rem;}




/* 浮動快速 */
.floatBtn { display: block; position: fixed; top:0;right: 0; animation: floatBtn 5s  infinite; z-index: 9999;}
.floatBtn .floatBtn-1{background-color: rgba(38, 63, 61, 0.7);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;}



/* visual */
header#visual{height: 80vh;overflow: hidden;}
header#Visual .master_content{height: 80vh;position: relative;background: url('../images/header-01bg.jpg') center repeat;background-size:cover;}
header#Visual .master_content .title > img {width: 60%;padding-top: 9%;padding-left: 4%;}



/* red */
section#First{background: #133b6b;padding: 120px 0 80px 0;position: relative;}
section#First:before{content: "";width: 100%;height: 100%;position: absolute;top: 0;left: 0;background: url("../images/header-05bg.png") no-repeat center;background-size: cover;z-index: 0;background-attachment: fixed;}
section#First .icon2{width: 80%;display: block;}
section#First .benefits-title h2{color: #6dedd4;font-weight: bold;font-style: italic;position: relative;text-align: center;font-size: 2.8rem;margin-bottom: 100px;}


section#First .benefits-title h2:after{
    background-color: #2172de;
    bottom: -25px;
    content: "";
    display: inline-block;
    height: 4px;
    left: calc(50% - 40px);
    position: absolute;
    text-align: center;
    width: 80px;
}




/* STEP */
.step-box {background-color: #fff;border-radius: 8px;margin-bottom: 15px;box-shadow: 0 2px 4px rgba(0,0,0,0.1);}
.step-title {background-color: #004aad;color: #fff;font-weight: bold;padding: 5px 0;margin-bottom: 10px;border-top-left-radius: 8px;border-top-right-radius: 8px;}
.step-4 .step-title {background-color: #44c9c9;}
.step-icon {height: 160px;object-fit: contain;}

@media (min-width: 768px) {

}

/* Second */
section#Second{background: #FFF;padding: 120px 0 80px 0;background-size: 100%;background: url(../images/bg_footer01_pc.png) top center no-repeat;position: relative;}


/* 3欄 */
.icon-box {
    width: 60px;
    height: 60px;
    background-color: #007070;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  
  .first  .icon-box{
    background-color: #273775;
  }

  .icon-box img {
    width: 30px;
    height: 30px;
    object-fit: contain;
  }
  
  h5 {
    color: #000;
  }
  

section#Second h3:after{
    background-color: #273775;
    bottom: -15px;
    content: "";
    display: inline-block;
    height: 2px;
    left: calc(50% - 40px);
    position: absolute;
    text-align: center;
    width: 80px;
}




/* Third */
section#Third{background: #133b6b;text-align: left;padding: 0;padding-top: 50px;}
section#Third h5{font-size: 1.1rem;}

/* 左右 */

.instructor-card {
      background: #fff;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 2px 6px rgba(0,0,0,0.1);

      position: relative;
    }

    .instructor-photo {
      width: 100%;
      height: auto;
    }

    .instructor-name {
      font-size: 1rem;
      font-weight: bold;
      color: #0056b3;
      text-align: left;
    }

    .instructor-title {
      font-size: 1rem;
      color: #333;
    }

    .badge-circle {
      position: absolute;
      top: 10px;
      right: 10px;
      background: #007bff;
      color: #fff;
      border-radius: 50%;
      width: 60px;
      height: 60px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1rem;
      font-weight: bold;
    }

    .plus-sign {
      width: 100px;
      height: 100px;
    }

    .instructor-footer {
      background: #007bff;
      color: #fff;
      padding: 10px;
      font-size: 1.5rem;
    }

    .instructor-card {
        background: #fff;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 2px 6px rgba(0,0,0,0.1);
        text-align: center;
        position: relative;
        transform: skew(-5deg); /* 傾斜框框 */
        padding: 10px;
      }
      
      .instructor-card > * {
        transform: skew(5deg); /* 抵消子元素文字的傾斜，看起來正 */
      }



/* 課程連結區塊 */
.list-service .white-box {
    position: relative;
    height: 100%;
    padding-left: 50px;
    padding-top: 30px;
    z-index: 50;
   
}
li.workship:before {
    content: "";
    background: url(../images/red-class-01.jpg) no-repeat;
    position: absolute;
    left: 0;
    top: 0;
    background-size: cover;
    width: 301px;
    height: 100%;
}

.list-service {
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    list-style: none;
    transform: skew(-5deg);
}
.list-service li {
    opacity: 0;
    -webkit-transform: translateY(50px);
    transform: translateY(50px);
    -webkit-transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0.5s;
    transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0.5s;
}
.list-service li {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
}

.list-service li {
    position: relative;
    width: 460px;
    height: 460px;
    background-color: #fff;
    -webkit-box-shadow: 11px 13px 27px 6px rgb(0 0 0 / 8%);
    box-shadow: 11px 13px 27px 6px rgb(0 0 0 / 8%);
    overflow: hidden;
    margin-bottom: 82px;
}
.list-service li a {
    color: #111;
    text-decoration: none;
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.list-service li a:after {
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
}
.list-service li a:after {
    content: "";
    background-color: #fff;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 50;
    -webkit-transition: -webkit-transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.8s;
    transition: -webkit-transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.8s;
    transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.8s;
    transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.8s, -webkit-transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.8s;
}
.list-service li:after {
    content: "";
    background-color: #fff;
    width: 460px;
    height: 460px;
    z-index: 10;
    position: absolute;
    right: 0;
    top: 230px;

    -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.475, 0.425, 0, 0.995) 0.4s;
    transition: -webkit-transform 0.3s cubic-bezier(0.475, 0.425, 0, 0.995) 0.4s;
    transition: transform 0.3s cubic-bezier(0.475, 0.425, 0, 0.995) 0.4s;
    transition: transform 0.3s cubic-bezier(0.475, 0.425, 0, 0.995) 0.4s, -webkit-transform 0.3s cubic-bezier(0.475, 0.425, 0, 0.995) 0.4s;
}
.list-service li:hover:before {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}

.list-service li a:before {
    content: "";
    background: url(../images/icon-arrow-black.png) no-repeat;
    width: 32px;
    height: 11px;
    background-size: 100%;
    position: absolute;
    z-index: 50;
    left: 32px;
    bottom: 32px;
    -webkit-transition: -webkit-transform 0.3s ease-out;
    transition: -webkit-transform 0.3s ease-out;
    transition: transform 0.3s ease-out;
    transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out;
    left: initial;
    right: 32px;
}
.list-service li:hover a:before {
    -webkit-transform: translateX(10px);
    transform: translateX(10px);
}
.text-detail{width: 300px;padding-top: 28px;line-height: 28px;text-align: justify;padding-right: 10px;margin-left: -25px;font-size: 1rem;}


section#Third .btn-blue{position: absolute;right: 0;bottom: 0;background-color: #1553ba;border: 0;}
section#Third .btn-blue:hover{background-color: #23272b;border: 0;}
.title-box{position: absolute;left: 0;top:178px;background-color: #2172de;}
section#Third li.CCNA20 .btn-blue{background-color: #01a292;}
li.CCNA20 .title-box{background-color: #01a292;}
.text-detail{position: absolute;right: 50px;bottom: 55px;}
section#Third .btn{border-radius: 0;font-size: 1.5rem;}


.list-service li.CTIA:before {
    content: "";
    background: url(../images/240_F_954827414_.jpg) no-repeat;
    position: absolute;
    left: 0;
    top: 0;
    background-size: cover;
    width: 480px;
    height: 100%;
    -webkit-transition: -webkit-transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.1s;
    transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.1s;
}



.list-service li.CCNA20:before {
    content: "";
    background: url(../images/1000_F_1410495814_8.jpg) no-repeat;
    position: absolute;
    left: 0;
    top: 0;
    background-size: cover;
    width: 480px;
    height: 100%;
    -webkit-transition: -webkit-transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.1s;
    transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.1s;
}


/* Discount */
section#Discount{background: rgba(222, 240, 252, 1);padding: 120px 0 80px 0;background-size: 100%;background: url(../images/bg_footer01_pc.png) top center no-repeat;}



section#Discount .icon{width: 65%;}

.custom-card{box-shadow: 4px 4px 32px rgba(2, 162, 146, 0.15);border: 3px solid #FFF;min-height: 450px;}






/* btnLink */
section#btnLink{padding:5% 0;background-color: #FFF;position: relative;}
section#btnLink .btn{display: block;position: relative;border-radius: 45px;width: 37%;height: 64px;margin:10px auto;background: rgb(255, 230, 65);color: #007070;font-size: 1.5rem;line-height: 3.5rem;font-weight: bold;}
section#btnLink .btn:hover{border: 2px solid #FFF;background: #FFF;transition: opacity .3s;color: #007070;font-weight: bold;}

section#btnLink .btn:before{content: '';position: absolute;right: 10px;top: 50%;-webkit-transform: translate(0, -50%);transform: translate(0, -50%);width: 45px;height: 45px;}
section#btnLink .btn:before{background: url(../images/ico_arrow_2.svg) no-repeat;pointer-events: none;transition: opacity .3s;}

section#btnLink .btn:after{background: url(../images/ico_arrow_2-2.svg) no-repeat;}
section#btnLink .btn:after{content: '';position: absolute;right: 10px;top: 50%;-webkit-transform: translate(0, -50%);transform: translate(0, -50%);width: 45px;height: 45px;pointer-events: none;transition: opacity .3s;opacity: 0;}

section#btnLink .btn:hover:before{opacity: 0;}
section#btnLink .btn:hover:after{opacity: 1;}

section#btnLink:before{content: "";width: 100%;height: 100%;position: absolute;top: 0;left: 0;background: url("../images/header-05bg.png") no-repeat center;background-size: cover;z-index: 0;background-attachment: fixed;}










@media(min-width: 1441px){
.container {max-width: 1320px;}
}
@media(max-width: 1440px){}
@media(max-width: 767px){

.container{max-width: 100%;}

/* 浮動快速 */
.floatBtn { display: none;}

/* visual */
header#visual{height: 63vh;}
header#visual .title img{width: 100%;}
header#Visual .master_content{height: 80vh;position: relative;background: url('../images/header-01bg.jpg') -760px 0px repeat;background-size:cover;}

header#Visual .master_content .title > img {width: 100%;padding: 0;position: absolute;bottom: 50px;left: 0;}

/* First */
section#First .step-box {height: auto;}
section#First .icon2{width: 100%;display: block;}
section#First .benefits-title h2{font-size: 2rem;}

/* Second */
section#Second{background-size: cover;padding: 60px 0 0 0;}

/* Third */
section#Third .list-service {transform: skew(0deg);}
section#Third .pl-5{padding-left: 0 !important;}
section#Third .mb-40{margin-left: -20px;}
section#Third .text-detail{position: absolute;right: 50px;bottom: 43px;}
section#Third .btn{font-size: 1.3rem;}

/* Discount */
section#Discount{padding: 60px 0 80px 0;background-size: cover;}
section#Discount .container{padding: 0;}
section#Discount .container-fluid{padding: 0;}

/* btnLink */
section#btnLink .btn{width: 100%;}

}