body{ font-family: "Arial","微軟正黑體";background-color: #253845;}
.container{ position: relative;max-width: 80%;}
a:hover{text-decoration: none;}
section{ padding: 100px 0; }
p{font-size: 18px;}

/* AD */
.carousel{display: block;}

/* 浮動快速 */
.floatBtn { display: block; position: fixed; top:0;right: 0; animation: floatBtn 5s  infinite; z-index: 9999;}
.floatBtn .floatBtn-1{background-color: rgba(142, 239, 250, 0.3);border-radius: 0px 0px 0px 60px;box-shadow: 2px 2px 20px 0px rgba(1, 46, 42, 0.15000000596046448);width: 160px;height: 140px;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{position: relative;width: 100%;height: 100vh;background: linear-gradient(180deg, #00285e 100%, #00285e 50%, #00285e 100%);}
header#Visual video{width: 100%;height: 100%;position: absolute;top: 0;left: 0;object-fit: cover;object-position: center center;opacity: 0.4;}
header#Visual .heaer-title {width: 60%;position: absolute;left: 50%;bottom: 25%;transform: translateX(-50%);z-index: 2;}
header#Visual .heaer-title img{width: 100%;}


/* introduction */
section#introduction{position: relative;background: linear-gradient(180deg, #55c0dd 0, #1a70b8 50%, #1e3691 100%);padding: 50px 0;}
section#introduction h4{color: #FFF;font-weight: bold; font-size: 1.6rem;line-height: 1.8;text-align: center;}
section#introduction h5{color: #253845;font-weight: bold; font-size: 1.4rem;line-height: 1.8;text-align: center;}


.icon-circle {
  width: 100px;
  height: 100px;
  background: linear-gradient(90deg, #ffd1f3, #ddcfff, #bbd1ff);
  border-radius: 50%;
  margin: -80px auto 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s;
}

.course-title span{background: linear-gradient(to right,#69cdf0 52%, #8eeffa 100%);border-radius: 20px;padding: 10px 25px;color: #253845;}
.course-title {
    font-weight: 700;
    font-size: 1.6rem;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFF;
}
.card{border-radius: 1rem !important;}




/* red */
section#red{background-color:#253845;background: url(../images/part4_bg.png) 0 -200px no-repeat;padding: 100px 0 0 0;overflow: hidden;}
section#red .gery{background-color:#253845;background: -webkit-linear-gradient(top,rgba(37,56,69,1),rgba(37,56,69,0.9),rgba(37,56,69,0.7)), url(../images/Big-bg.png);background-attachment: fixed;background-size: 100%;}

/* red-大標 */
section#red .title-bg{display: flex;align-items: center;justify-content: center;}
section#red .title-lg{width:65%;text-align: center;text-shadow: rgba(0, 0, 0, 0.8) 0 2px 5px;display: inline-block;font-weight: 700;padding: 40px 150px;font-size: 3em;color: #c6cbfe;}
section#red p{z-index: 1000;font-weight: 600;}


section#red .section-bg-r {width:100%; position: relative;background: rgba(255, 255, 255, 1);border-radius:0 20px 20px 0;border-left: #8d7efb 20px solid;}
section#red .step-content h3 {margin: 0 0 6px 0;font-size: 20px;font-weight:bold;color: #FFF;background: linear-gradient(232.18deg, #8eeffa 4.01%, #8d7efb 88.34%);padding: 10px;}


section#red .info-box {width: 50%;background: #ecebfd;padding: 15px;margin-left: -20px;border: none;}
section#red .step-box .num {font-size: 36px;font-weight: 700;margin-top: 6px;color: #6e57e5;}
section#red .btn-custom {border-radius:30px;padding:12px 26px; font-weight:600;background: linear-gradient(232.18deg, #adadf5 4.01%, #a093ff 88.34%);color: #000;}



/* blue */

section#blue{background-color:#253845;background: url(../images/part3_bg.png) 0 -200px no-repeat;padding: 100px 0 0 0;overflow: hidden;}
section#blue .gery{background-color:#253845;background: -webkit-linear-gradient(top,rgba(37,56,69,1),rgba(37,56,69,0.9),rgba(37,56,69,0.7)), url(../images/Big-bg.png);background-attachment: fixed;background-size: 100%;}

/* blue-大標 */
section#blue .title-bg{display: flex;align-items: center;justify-content: center;}
section#blue .title-lg{width:65%;text-align: center;text-shadow: rgba(0, 0, 0, 0.8) 0 2px 5px;display: inline-block;font-weight: 700;padding: 40px 150px;font-size: 3em;color: #8eeffa;}
section#blue p{z-index: 1000;font-weight: 600;}




/* 課程 */
.step-box{width: 86px;min-width: 86px;text-align: center;padding-right: 18px;border-right: 1px solid #eee;margin-right: 18px;}
.step-box .label{font-size: 12px;letter-spacing: 2px;color: #222;padding-left: 5px;}
.step-box .num {font-size: 36px;font-weight: 700;margin-top: 6px;color: #4488c4;}
.step-content h3 {margin: 0 0 6px 0;font-size: 20px;font-weight:bold;color: #253845;background: linear-gradient(to right,#69cdf0 52%, #8eeffa 100%);padding: 10px;}
.step-content p {margin: 0;}
.step-action {margin-left: auto;display:flex;align-items: flex-end;}
section#blue hr{background: #8eeffa}
ul{margin-left: -13px;}
.info-box {width: 50%;background: #eff9ff;padding: 15px;margin-left: -20px;border: none;}
.icon-sm {max-width: 30px;}

/* 右側圖片
.feature-img {background-image: url(../images/Pic03.jpg);background-size: cover;background-position: center right;background-repeat: no-repeat;border-radius: 0 20px 20px 0;min-height: 300px;} */

.img-box {position: relative;display: inline-block;width: 100%;}
.main-img {width: 100%;display: block;}

/* 右下圓形按鈕 */
.corner-btn {
    position: absolute;
    right: 12px;
    bottom: 12px;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(0,0,0,0.85);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.25s ease;
}

/* SVG icon */
.btn-icon {
    width: 22px;
    height: 22px;
    filter: brightness(0) invert(1);   /* 讓 SVG 變白 */
    transition: transform 0.45s ease;
    transform-origin: center center;
}

/* 🎉 滑鼠摸到整張圖 → link.svg 自己旋轉 */
.img-box:hover .btn-icon {
    transform: rotate(360deg);
}

/* hover 圓形按鈕變色 */
.img-box:hover .corner-btn {
    background-color: #00bcd4;
}




.section-bg-r {width:100%; position: relative;background: rgba(255, 255, 255, 1);border-radius:0 20px 20px 0;border-left: #55b7e2 20px solid;}

.section-bg-r::before {
    content: "";
    position: absolute;
    display: block;
    width: 100%;
    top: 0;
    height: 100%;
    right: 0;
    
    
}

.section-bg-l { padding:60px 40px; width:100%; border-radius:0;position: relative;}

.section-bg-l::before {
    content: "";
    position: absolute;
    display: block;
    width: 100%;
    top: 0;
    height: 100%;
    left: -25%;
    background-color: #F1EFEA;
    background: rgba(255, 255, 255, 0.1);
    background: linear-gradient(135deg, rgba(255,255,255,0.26) 27%,rgba(255,255,255,0) 100%); 
}
section#blue p{color: #000;}
.date{
    width: 60px;
    height: 60px;
    background: none;
    border: 3px solid #69cdf0;
    padding: 10px;
    margin-right: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #253845;
    color: #FFF !important;
}

.btn-custom {border-radius:30px;padding:12px 26px; font-weight:600;background: linear-gradient(135deg, #8eeffa 0, #69cdf0 100%);color: #000;}

.btn-custom:hover{color: #FFF !important;}

section#blue h4{color: #8eeffa;font-weight:bold;}


.yt-btn:hover{transition: opacity .3s;opacity: 0.8;}







.title{width: 28%;margin: auto;display: block;}


.blu_flow{width: 100%;display: block;margin: auto;}
h3{
    display: flex;
    align-items: center;
    font-size: 36px;
    font-weight: 400;
    transform: translate3d(0px, 0px, 0px);
    justify-content: space-between;
}
section#blue .title-lg > img{width: 12%;margin-left: 5%}
section#red .title-lg > img{width: 12%;margin-left: 5%}
section#course .title-lg > img{width: 12%;margin-left: 5%}
.list-service li.CND:before {
    content: "";
    background: url(../images/AAA.jpg) no-repeat;
    position: absolute;
    left: 0;
    top: 0;
    background-size: cover;
    width: 35%;
    height: 100%;
    -webkit-transition: -webkit-transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.1s;
    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;
    transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.1s, -webkit-transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.1s;
}

.list-service li.CSA:before {
    content: "";
    background: url(../images/03.jpg) no-repeat;
    position: absolute;
    left: 0;
    top: 0;
    background-size: cover;
    width: 35%;
    height: 100%;
    -webkit-transition: -webkit-transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.1s;
    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;
    transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.1s, -webkit-transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.1s;
}

.list-service li.CTIA:before {
    content: "";
    background: url(../images/06.jpg) no-repeat;
    position: absolute;
    left: 0;
    top: 0;
    background-size: cover;
    width: 35%;
    height: 100%;
    -webkit-transition: -webkit-transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.1s;
    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;
    transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.1s, -webkit-transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.1s;
}

.list-service li.ECIH:before {
    content: "";
    background: url(../images/Pic08.jpg) no-repeat;
    position: absolute;
    left: 0;
    top: 0;
    background-size: cover;
    width: 35%;
    height: 100%;
    -webkit-transition: -webkit-transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.1s;
    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;
    transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.1s, -webkit-transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.1s;
}
.list-service li.CCSE:before {
    content: "";
    background: url(../images/pic3.jpg) no-repeat;
    position: absolute;
    left: 0;
    top: 0;
    background-size: cover;
    width: 35%;
    height: 100%;
    -webkit-transition: -webkit-transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.1s;
    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;
    transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.1s, -webkit-transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.1s;
}
.btn-blue span{background-color: #FFFFFF;color: #e44b1e;padding:2px 5px;border-radius: 2px;}
.btn-blue:hover span{color: #23272b;transition: all .4s ease;}
.btn-blue{position: absolute;right: -10px;top: 21px;background: linear-gradient(to right, #e44b1e 52%,#f3cd5f 100%);border: 0;width: 62%;text-align: left;}
.btn-blue:hover{background-color: #23272b;border: 0;transition: all .4s ease;}
.btn-80{padding-left: 80px;}
.mt-40{margin-top: 40%;}
.btn-lg{font-size: 1.5rem;}

.btn-red span{background-color: #FFFFFF;color: #d62b4a;padding:2px 5px;border-radius: 2px;}
.btn-red{position: absolute;right: -10px;top: 21px;background: linear-gradient(to right, #d62b4a 52%,#bf539a 100%);border: 0;width: 62%;text-align: left;}
.btn-red:hover{background-color: #23272b;border: 0;transition: all .4s ease;}

.btn-course span{background-color: #FFFFFF;color: #4488c4;padding:2px 5px;border-radius: 2px;}
.btn-course{position: absolute;right: -10px;top: 21px;background: linear-gradient(to right, #4488c4 52%,#55b7e2 100%);border: 0;width: 62%;text-align: left;}
.btn-course:hover{background-color: #23272b;border: 0;transition: all .4s ease;}

/* course */
section#course{background: url(../images/part1_bg.jpg) center -135px no-repeat;font-weight: bold;padding: 100px 0 0 0;}
section#course .gery{background: linear-gradient(to bottom, #55b7e2 0%,#4488c4 100%);background: -webkit-linear-gradient(top,rgba(85,183,226,1),rgba(85,183,226,0.9),rgba(68,136,196,0.7)), url(../images/pic3.png);background-attachment: fixed;background-size: 100%;background-position: center bottom;}

.gery{width: 100%;margin-top: 80px;}





/* btnLink */





section#big-tag{background-color: #253845;position: relative;}
section#big-tag .blue-bg {top: 100%;left: 50%;}
section#big-tag  .big-tag-card .card   {padding: 5px;margin: 15px 0;box-shadow: 0 0 15px 4px rgb(31 66 135 / 10%);background-color: rgba(116, 178, 236, 0.2);}
section#big-tag  .big-tag-card .card .photo {width: 100%;height: 250px;background-color: #253845;border-radius: 10px;}


section#big-tag  .big-tag-card .card  .text{width: 100%;height:80px;display: flex;align-items: center;justify-content: center;padding: 8px 15px;}



.big-tag-card .card  .text h5{ margin: 0;text-align: center;}
.big-tag-card .card .photo { transition: all .3s linear;}
.big-tag-card:nth-child(1) .photo {background:url(../images/big-tag-photo-1.jpg) center  no-repeat;background-size: 100%;}
.big-tag-card:nth-child(2) .photo {background:url(../images/big-tag-photo-2.jpg) center  no-repeat;background-size: 100%;}
.big-tag-card:nth-child(3) .photo {background:url(../images/big-tag-photo-3.jpg) center  no-repeat;background-size: 100%;}
.big-tag-card:nth-child(4) .photo {background:url(../images/big-tag-photo-4.jpg) center  no-repeat;background-size: 100%;}
.big-tag-card:nth-child(5) .photo {background:url(../images/big-tag-photo-5.jpg) center  no-repeat;background-size: 100%;}
.big-tag-card:nth-child(6) .photo {background:url(../images/big-tag-photo-6.jpg) center  no-repeat;background-size: 100%;}
.big-tag-card .card:hover .photo {background-size: 105%;}

section#big-tag h5{padding: 10px 20px;border-radius: 5px;color: #FFFFFF;font-weight: bold;margin-top: 2%;position: relative;width: 95%;display: block;margin: auto;font-size: 1rem;text-align: center;font-size: 1.5rem;}
section#big-tag h5:before{content: '';position: absolute;left: 22px;top: 22px;-webkit-transform: translate(0, -50%);width: 22px;height: 22px;background: url(../images/ico_arrow_2-2.svg) no-repeat bottom center;}




/* btnLink */
section#btnLink{padding:5% 0;background-color: #253845;position: relative;}
section#btnLink .btn{display: block;position: relative;border-radius: 45px;width: 37%;height: 64px;margin:10px auto;font-size: 1.5rem;line-height: 0.5rem;font-weight: bold;padding: 40px 150px;font-size: 2em;background: #FFF;color: #007070;}
section#btnLink .btn:hover{transition: opacity .3s;font-weight: bold;background: linear-gradient(135deg, #8eeffa 0, #69cdf0 100%);color: #FFF;}

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) {}
@media (max-width: 1440px) {
/* visual */
.moble{display: block;}
.PC{display: none;}
header#visual{height: 100vh;padding: 0;background: url(../images/header_m.jpg) no-repeat center;background-size: cover;position: relative;}
/* introduction nav-tabs */
section#introduction .nav .nav-item {height: 185px;}
section#introduction .red-img{margin: 0 auto;display: block;}
section#introduction .red-txt{padding: 33px 26px 14px 27px;}
section#introduction .blu-img{margin: 0 auto;display: block;}
section#introduction .blu-txt{padding: 30px;}
.mt-40{margin-top: 0;}
/* blu */
.title-lg{width: 100%;}
.list-service li {width: 612px;height: 447px;}
.list-service li:after {position: absolute;right: -178px;top: 20px;}
.text-detail{padding-top: 26px;line-height: 35px;margin-left: 55px;font-size: 1.3rem;}
.title-box > h2{padding-left: 139px;}
.title-box > p{padding-left: 120px;margin-top: -10px;}
}

@media(max-width: 767px){

.floatBtn { display: none;}
.container{max-width: 100%;}
header#Visual{height: 30vh;}
header#Visual .heaer-title img {width: 95% !important;}
section#blue .title-lg{width:100%;padding: 0;font-size: 1.9em;}
.step-card{align-items: center;flex-direction: column;}
.info-box {width: 100%;}
.step-action {margin-top: 5%;margin-bottom: 5%;}
section#red .info-box {width: 100%;}
.title-lg{width:100%;padding: 0;font-size: 2em;}
section#red .title-lg{width:100%;padding: 0;font-size: 2em;}
section#btnLink .btn {

    width: 100%;
    padding: 40px 0;

}
}