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

/* AD */
div.EventAD { width: 120px; display: block; position: fixed; right: 0; top: 50px; z-index: 2000; animation-name: EventAD-M; animation-duration: 5s; animation-iteration-count: infinite; }
div.EventAD:hover { width: 130px; right: 25px; transition: 0.3s; animation-iteration-count: initial; animation-name: initial; }
@keyframes EventAD-M { 0%{ right: 0; } 70%{ right: 70px; } 100%{ right:0; } }
div.EventAD img { width: 100%; box-shadow: 0 0 15px rgb(120, 120, 120); border-radius: 10px; }
div.EventAD img:hover { box-shadow: 0 0 20px rgb(150, 150, 150); }

.carousel{display: block;}

/* visual */
header#visual{height: 100vh;position: relative;background-size: cover;overflow: hidden;}
header#visual .title{position: absolute;z-index: 1000;width: 100vw;height: 60vh;}
header#visual .title img.slogn{width: 47%;position: absolute;right: 0;top: 40%;}
header#visual .title img.subtitle{width: 30%;margin-top:42vw;}

/* introduction */
section#introduction{position: relative;background: linear-gradient(135deg, #f6f6f6 0%,#f1f1f1 23%,#e1e1e1 24%,#ffffff 61%,#ffffff 70%);padding: 86px 0;}
section#introduction .red-img{height: 350px;margin-left: 60px;}
section#introduction .red-txt{padding: 80px 60px 80px 120px;line-height: 2;text-align: justify;font-weight: 600;}
section#introduction .blu-img{height: 350px;margin-left: -60px;}
section#introduction .blu-txt{padding: 80px 60px;line-height: 2;text-align: justify;font-weight: 600;}

/* introduction nav-tabs */
section#introduction .nav .nav-item {margin: 0;flex: 50%;text-align: center;height: 120px;padding-top: 10px;}
section#introduction .nav-link {opacity: 0.5;color: #FFFFFF;border-radius: 10px 10px 0 0;font-weight: 600;background-color: transparent;}
section#introduction .nav-link.active {opacity: 1;}
section#introduction .tab-title{color: #FFF;line-height: 1.6;}
section#introduction .tab-title span{font-size: 2rem;}
section#introduction a{color: #FFF;}
.blu{border: 3px solid #063a71;}
.blu-bg{background-color: #063a71;}
.red{border: 3px solid #e6311c;}
.red-bg{ background-color: #e6311c;}


section#introduction .card-header{background-color:#063a71;color: #FFF;text-align: center;border-radius: 0;height: 20px;}
section#introduction .card{border-radius: 0;margin-top: -1px;}
.p-150{padding: 0 150px;}
.p-50{padding: 0 50px;}

section#introduction h5{text-align: left; font-weight: bold; font-size: 1.45rem;line-height: 1.8;padding-top: 30px;}
.order-2 {-ms-flex-order: 1;order: 1;}


section#introduction .shortcut{width: 70%;display: block;margin: auto;}


/* red */
section#red{background: url(../images/par4_bg.jpg) 0 -135px no-repeat;padding: 100px 0 0 0;}
section#red .gery{background: linear-gradient(to bottom, #55b7e2 0%,#4488c4 100%);background: -webkit-linear-gradient(top,rgba(214,43,74,1),rgba(214,43,74,0.5),rgba(191,83,154,0.7)), url(../images/part2_bg.png);background-attachment: fixed;background-size: 100%;background-position: center bottom;}

.title{width: 28%;margin: auto;display: block;}
.title-lg{color:#FFF;width: 60%;text-align: center;font-weight: 600;}
section#red p{z-index: 1000;color: #000000;font-weight: 600;}
h3{
    display: flex;
    align-items: center;
    font-size: 36px;
    font-weight: 400;
    transform: translate3d(0px, 0px, 0px);
}


.container{position: relative;}

.CPENT-mb{display: none;}
.CPENT-pc{display: block;}

/* 課程連結區塊 */
.list-service .white-box {
    display: flex;
    flex-direction:  column;
    justify-content:  center;
    align-items: flex-start;
    width: 95%;
    height: 100%;
    padding-left: 580px;
}
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 li.CEH:before {
    content: "";
    background: url(../images/01.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.CPENT:before {
    content: "";
    background: url(../images/02.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.Practical: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.WAHS:before {
    content: "";
    background: url(../images/05.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.CCT:before {
    content: "";
    background: url(../images/08.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 {
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    list-style: none;
}
.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: 100%;
    height: 340px;
    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;
    border-radius: 10px;
}
.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: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: 32px;
    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: 100%;padding-top: 28px;line-height: 28px;text-align: justify;font-size: 1rem;}
.CPENT-p{padding-top: 0;}


/* blue */


section#blue{background: url(../images/part3_bg.png) 0 -135px no-repeat;padding: 100px 0 0 0;}
section#blue .gery{background: linear-gradient(to bottom, #55b7e2 0%,#4488c4 100%);background: -webkit-linear-gradient(top,rgba(228,75,30,1),rgba(228,75,30,0.9),rgba(243,205,95,0.7)), url(../images/pic1.png);background-attachment: fixed;background-size: 100%;background-position: center bottom;}

.title{width: 28%;margin: auto;display: block;}
.title-lg{color:#FFF;width: 70%;text-align: center;font-weight: 600;text-shadow: rgba(0, 0, 0, 0.8) 0 2px 5px;}
section#blue p{z-index: 1000;color: #000000;font-weight: 600;}
.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);
}
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/04.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;}

section#course .Banner{display:flex;align-items: center;justify-content: center;border: 3px solid #FFF;}
section#course .Banner span{background-color:#e6311c; color: #FFF;padding: 3px 5px;border-radius: 3px;}
section#course .Banner span:hover{background-color:#000;}
section#course .title{width: 50%;display: block;margin: auto;}
section#course .course-imgA{width: 92%;margin-left: 40px;}
section#course .course-imgB{width: 92%;}
section#course div.text{background: #FFF;box-shadow: 0 0 20px rgba(6,0,1,0.2);border-radius: 10px;padding:20px 50px;margin-bottom: 20px;}
section#course div.text > h5{color:#000000;border-left:5px solid #e6311c;padding-left:10px;font-size: 1.3rem;font-weight: 550;margin-top: 10px;}
section#course div.text p span{background-color: #000000;color: #FFF;border-radius: 50px;padding: 10px 30px;}
section#course div.text ul{margin-left: -18px;}
section#course .group{width: 300px;height: 120px;background: #FFF;border-radius: 10px;color: #000000;padding: 5px;text-align: center;font:italic 550 1.3em/110px Arial;margin: auto;}
section#course div.text b{border-bottom: 5px solid #f4a57a;}
button{ width: 100%; margin: 15px auto 25px auto; display: block; background:#000000; color:#FFFFFF; border: 5px solid #e6311c; border-radius: 50px; padding: 13px 20px; font-weight: bold; font-size:1.4rem;}
button:hover{ background: transparent; border: 5px solid #e6311c;background:#FFFFFF; color: #000000;transition: all .4s ease;}
.pb-100{padding-bottom: 100px;padding-top: 50px;}

section#btnLink h5{background-color: #000000;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;}
section#btnLink 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;}
.w-75{width: 93%!important;}
/* btnLink */
section#btnLink{background-color: #54b1da;padding: 0;}
section#btnLink button{ width: 40%; margin: 15px auto 25px auto; display: block; background:#000000; color:#FFFFFF; border: 5px solid #FFFFFF; border-radius: 50px; padding: 13px 20px; font-weight: bold; font-size:1.4rem;}
section#btnLink button:hover{ background: transparent; border: 5px solid #000000;background:#FFFFFF; color: #000000;transition: all .4s ease;}

.student:hover{transition: all .4s ease;opacity:0.7;}

@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){
.col-sm-6{width: 50%;}
.carousel{display: none;}
h3{font-size: 1.9rem;text-align: left;}
header#visual .title img.slogn{width: 100%;position: absolute;right: 0;top: 80%;}
section#introduction .shortcut{width: 100%;display: block;margin: auto;}


.btn-lg{font-size: 1.25rem;}
section#introduction h5{text-align: left; font-weight: bold; font-size: 1rem;line-height: 1.8;padding-top: 30px;}
.gery{width: 100%;margin-top: 50px;}
.container{max-width: 100%;}
.list-service {padding: 0;}
section#blue,section#red,section#course{padding: 50px 0 0 0;}
section#blue .title-lg > img{width: 25%;margin-left: 0;}
section#red .title-lg > img{width: 25%;margin-left: 0;}
section#course .title-lg > img{width: 20%;margin-left: 0;}
.btn-red{position: absolute;left: 0;top: 0;border: 0;width: 100%;padding: 10px;}
.btn-blue{position: absolute;right: 0;top: 0;border: 0;width: 100%;padding: 10px;}
.btn-course{position: absolute;right: 0;top: 0;border: 0;width: 100%;padding: 10px;}
.btn{white-space: normal;}
.list-service .white-box {
    display: flex;
    flex-direction:  column;
    justify-content:  center;
    align-items: flex-start;
    width: 100%;
    height: 100%;
    padding-left: 0;
    padding: 10;
}
.text-detail{padding-top: 43%;line-height: 35px;margin-left: 0;font-size: 1rem;}
.text-detail {
    width: 100%;
    padding-top: 32%;
    line-height: 24px;
    text-align: justify;
    padding-right: 30px;
    margin-left: 0;
    font-size: 1rem;
    padding-left: 30px;
}
.list-service li {width: 100%;height: 100%;}


.list-service li.CND:before,.list-service li.ECIH:before,.list-service li.CPENT:before,.list-service li.CEH:before,.list-service li.Practical:before,
.list-service li.CCT:before,.list-service li.WAHS:before,.list-service li.CCSE:before,.list-service li.ECIH:before,.list-service li.CSA:before,.list-service li.CTIA:before{
    display: none;
}
.mt-50{margin-top: 50px;}
section#btnLink button{width: 100%;}
}