*{font-family: 'Noto Sans TC','微軟正黑體',sans-serif; }
body{ font-family: 'Noto Sans TC','微軟正黑體',sans-serif;background: url(../images/bg2.jpg) center repeat;background-attachment: fixed;background-size: 30%;}
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: #000;}
section p,section li,section table tr td{font-weight: 400;line-height: 1.8;color: #1F1F1F;font-size: 1.2rem;}


.photo img{width: 100%;}

/* 輪播 */
.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: 1em; display: block; }

.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%;}  

.container{max-width:1280px;}

.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%;}  

#fluid { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; color: hsla(180, 100%, 50%, 0.325); }




/* 大小標題共用 */
.master-title {margin:20px 0 40px;}
.master-title.center {text-align: center;margin:10px auto 40px;}
.master-title h2 ,.master-title h3 ,.master-title h5  {color: #000;}
.master-title h2 {font-size: 2.2rem;font-weight: 700;display: inline-block;position: relative;letter-spacing: .05em;margin: 0 0 20px;position: relative;}
.master-title h5 {font-size: 1.4rem;line-height: 2rem;font-weight:400;}

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

.master-title h2.block.yellow ,.master-title h3.block.yellow ,.master-title h5.block.yellow  {color: #000;background-color: #eeda9f;padding: 5px 15px;margin: 0;display: inline-block;font-weight: 600;} 

/* 海浪 */
.master-title.wave h2::before {content: ""; background: url(../images/master-title-icon-wave.svg);width: 60px;height: 60px;position: absolute;left: -80px;top: -5px;}
.master-title.wave h2::after {content: ""; background: url(../images/master-title-icon-wave.svg);width: 60px;height: 60px;position: absolute;right: -80px;top: -5px;transform: scaleX(-1);}

/* 雲朵 */
.master-title.clouds h2::before {content: ""; background: url(../images/master-title-icon-clouds.svg) no-repeat;width: 80px;height: 80px;position: absolute;left: -95px;top: 5px;}
.master-title.clouds h2::after {content: ""; background: url(../images/master-title-icon-clouds.svg) no-repeat;width: 80px;height: 80px;position: absolute;right: -95px;top: 5px;transform: scaleX(-1);}




.con-title h2 ,.con-title h3 ,.con-title h4  {color: #000;}
.con-title.clouds h3 {position: relative;display: inline-block;}
.con-title.clouds h3::before {content: ""; background: url(../images/master-title-icon-clouds.svg) no-repeat;width: 100px;height: 60px;position: absolute;left: -120px;top: -5px;background-size: contain;}
.con-title.clouds h3::after {content: ""; background: url(../images/master-title-icon-clouds.svg) no-repeat;width: 100px;height: 60px;position: absolute;right: -120px;top: -5px;transform: scaleX(-1);background-size: contain;}
.con-title.clouds.sing h3::before  {content: "";background: none;}



.con-title.center {text-align: center;margin:10px auto ;}
.con-title h2 ,.con-title h3 ,.con-title h4{position: relative;} 
.con-title h3 {margin: 30px 0;}
.con-title.white h2 ,.con-title.white h3 ,.con-title.white h4{color: #fff;} 
.con-title.yellow h2 ,.con-title.yellow h3 ,.con-title.yellow h4{color: #eeda9f;} 
.con-title h2.yellow.block ,.con-title h3.yellow.block ,.con-title h5.yellow.block  {color: #000;background-color: #eeda9f;padding: 5px 15px;margin: 0;display: inline-block;font-weight: 600;} 


.text.white p , .text.white ul li , .text.white ol li {color: #fff;}

thead th {font-size: 1.25rem;}
table tbody tr {border-bottom: 1px solid #cacaca;}
table tbody tr:last-child {border: none;}
table thead.border-color-1  {border-bottom: 5px solid rgba(88, 125, 88, 0.6);}
table thead.border-color-2  {border-bottom: 5px solid rgba(126, 169, 144, 0.6)}



section .con {margin: 0 0 120px;}

/* 主視覺 */
header#visual {position: relative;background:url(../images/header-bg.jpg) center  / cover; height: 100vh;display: flex;justify-content: center;align-items: center;}
header#visual .header-title {width: 100%;text-align: center;}
header#visual .header-title img {width: 80%;}
header#visual .logo {width:180px;position: absolute;left: 20px;top: 20px;}







/* 別讓「菜鳥」的標籤限制了你的潛力！ */
section#preface {background: linear-gradient(rgba(59, 68, 59, 0.9), rgba(75, 89, 75, 0.95)), url('../images/bg.jpg'); background-size: 150px;background-repeat: repeat;}
section#preface .master-title h2 {color: #eeda9f;}
section#preface .photo {width: 85%;margin: 60px auto;border-radius:5px;overflow: hidden;}
section#preface .text p span {color: #eeda9f;}




/* 為什麼選擇 Project+ ? */
section#why  {background: url(../images/bg-why.jpg);background-size: cover;background-attachment: fixed; }
section#why .item .icon {width: 100px;margin: 20px auto;}
section#why .item .text {text-align: center;}
section#why .item .text h4 {font-weight: 700;}


section#why .list-g .list {display: flex;padding: 10px 60px;align-items: center;width: 70%;margin: 0 auto 10px;border-radius: 60px;} 
section#why .list-g .list p{ margin: 0;color: #fff;font-size: 1.2rem;font-weight: 600;} 
section#why .list-g .list .icon {width: 60px;margin: 0 15px;}
section#why .list-g .list:nth-child(1) {background-color: #3397e8;}
section#why .list-g .list:nth-child(2) {background-color: #1e3577;}
section#why .list-g .list:nth-child(3) {background-color: #3397e8;}
section#why .list-g .list:nth-child(4) {background-color: #000;}
section#why .list-g  h3 {text-align: center;margin: 30px 0;color: #E7333A;}


section#why ul {list-style: none;border-left:5px solid #000 ;padding: 0 0 0 30px;margin-left: 30px;}
section#why ul li{position: relative;margin: 20px 0 ;}
section#why ul li::before{content: "";width: 25px;height: 25px;border-radius: 25px;background-color: #3d8ecd;left: -45px; top:5px ;position: absolute;border: 3px solid #000;}
section#why .photo {width: 100%;}



/* CompTIA Project+ 國際專案管理師認證暨實務課程 */
section#lesson {background: linear-gradient(rgba(34, 68, 80, 0.9), rgba(34, 68, 80, 0.95)), url('../images/bg.jpg'); background-size: 150px;background-repeat: repeat; color: #fff;}
section#lesson .master-title h3 {margin: 10px auto;}
section#lesson .master-title h5 {color: #fff;}



   
/* 目的 */
section#lesson .con.purpose .photo{border-radius: 5px;overflow: hidden;}


/* 特色 */
section#lesson .con.feature .card {background-color:rgba(11, 41, 58, 0.4) ;border: none;padding: 30px;border-radius: 30px;margin: 20px 0;}
section#lesson .con.feature .card .icon {width: 100px;margin: 20px auto;}
section#lesson .con.feature .con-title h4 {color: #b8ecff;}
section#lesson .con.feature .card .text {text-align: center;}


/* 報名獨家優惠 */
section#lesson .discount-box {background: url(../images/bg3.jpg) repeat ;  padding:30px;background-size: 200px;border-radius: 5px;box-shadow: 0 0 30px rgba(3, 13, 25, 0.8);}
section#lesson .discount-box .master-title{margin: 0;}
section#lesson .discount-box .discount-item{display: flex;align-items: center;margin:20px auto;background-color: #fff;width: 95%; padding: 30px;border: 10px double #367288;}
section#lesson .discount-box .discount-item .icon {width: 100px;margin: 0 30px 0 0;}
section#lesson .discount-box .discount-item .icon img {width: 100px;}
section#lesson .discount-box .discount-item .text h4 {font-size: 1.4rem;font-weight: 700;}
section#lesson .discount-box .discount-item .text p{font-size: 1.3rem;margin: 0;}
section#lesson .discount-box .discount-item .text p span {color: #E7333A;}
section#lesson .discount-box .discount-item .text ul li span {color: #E7333A;}
section#lesson .discount-box .discount-item .text p span.color-block  {background-color:#E7333A;color: #fff;padding: 2px 5px;}









section#lesson  .btn h5{margin: 0;padding: 0; font-weight: 600;font-size: 1.5rem;transition: all ease 200ms;display: inline-block;color: #fff;text-wrap: wrap;}
section#lesson  a:hover h5 {color: #fff;}
section#lesson a {  text-decoration: none;display: block;text-align: center; width:85%;font-size: 1.2rem;font-weight: 600;transition: all ease 200ms;margin: 20px 0;text-align: center;background-color: transparent;border: 5px solid #62d3ff;padding: 10px;border-radius: 30px;}
section#lesson a:hover{border: 5px solid #2c9ac5;;background-color: rgba(8, 78, 106, 0.5);}












section#lab {background: linear-gradient(rgba(231, 241, 244, 0.9), rgba(231, 241, 244, 0.9)), url('../images/bg.jpg'); background-size: 150px;background-repeat: repeat;}
section#lab .con-title h3{background-color: #A1CEEE !important;color: #000; padding: 5px 15px; margin: 0 0 10px; display: inline-block; font-weight: 600;}

section#lab .labs-box {margin: 60px 0;}

section#lab .labs-step-g ol{text-align: center;list-style: none;}
section#lab .labs-step-g ol li {margin:80px 0;}
section#lab .labs-step-g ol li:first-child {margin: 20px 0 80px;}
section#lab .labs-step-g ol li .photo {border-radius: 5px;overflow: hidden;width: 100%;text-align: center;}
section#lab .labs-step-g ol li .photo img {width: 100%;}
section#lab .labs-step-g ol li h5 {text-align: center;}
section#lab .labs-step-g ol li h5 i {color: #93b6d5;font-size: 30px;display: block;margin: -10px 0 0;}


section#lab .experience-flex {display: flex;justify-content:space-between ;align-items: center;} 
section#lab .experience-flex .experience-item{width: 33%;} 
section#lab .experience-flex .experience-item .text{margin: 0 0 30px;} 
section#lab .experience-flex .experience-item .photo {text-align: center;}
section#lab .experience-flex .experience-item .photo img{width: 80%;}
section#lab .experience-flex .experience-item .text h4 {border-bottom:5px solid #93b6d5 ;padding: 5px 0;}


/* 考試 */
section#exam {background: linear-gradient(rgba(59, 68, 59, 0.9), rgba(75, 89, 75, 0.95)), url('../images/bg.jpg'); background-size: 150px;background-repeat: repeat;} 
/* section#exam {background: url(../images/bg-6.jpg);background-size: cover;}  */
section#exam .box{background-color: rgba(255, 255, 255, 0.75);width: 60%;margin: 0 auto;padding: 30px;border-radius: 10px;	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}
section#exam .box table {width: 100%;}
section#exam .box table tr td , section#exam .box table tr th{padding: 5px 15px;}




/* 比較 */
section#compare {background: linear-gradient(rgba(231, 244, 235, 0.9), rgba(231, 244, 235, 0.9)), url('../images/bg.jpg'); background-size: 150px;background-repeat: repeat;}
section#compare table {width: 100%;}
section#compare table tr td , section#exam .box table tr th{padding: 5px 15px;}

section#compare .con {background-color: rgba(190, 212, 190, 0.4);border-radius: 30px;padding: 30px;margin:  0 0 40px;}
section#compare .text-flex {display: flex;align-items: center;justify-content: center;margin:  0 0 20px;}
section#compare .con .text-flex .icon {width: 80px;margin-right: 30px;}
section#compare .con .text-flex .icon img{width: 80px;}




/* 講師介紹 */
section#lector {background: linear-gradient(rgba(34, 68, 80, 0.9), rgba(34, 68, 80, 0.95)), url('../images/bg.jpg');  background-size: 150px;background-repeat: repeat; }
section#lector .text-flex { display: flex;}
section#lector .text-flex .photo {width: 30%;}
section#lector .text-flex .text {width: 70%;padding: 30px;}





/* 顧客心得 */
section#experience .item-g {display: flex;}
section#experience .item-g .item{display: flex; background-color: #d7efff; margin: 20px 0;border-radius: 30px;padding: 30px;}
section#experience .item-g .item .icon{width: 80px;margin: 0 20px 0 0; }
section#experience .item-g .item .icon img {width: 80px;}
section#experience .photo {margin: 20px 0;}
















/* 按鈕*/ 
section#BTN {position: relative;padding: 0 0 30px ;}

section#BTN  .btn h5{margin: 0;padding: 0; font-weight: 600;font-size: 1.5rem;transition: all ease 200ms;display: inline-block;color: #000;text-wrap: wrap;}
section#BTN  a:hover h5 {color: #fff;}
section#BTN a {  text-decoration: none;display: block;text-align: center; width:85%;font-size: 1.2rem;font-weight: 600;transition: all ease 200ms;margin: 0 auto 20px;text-align: center;background-color: transparent;border: 5px solid #005b7f;padding: 10px;border-radius: 30px;}
section#BTN a:hover{border: 5px solid #005b7f;;background-color: #007aaa;}













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



}

@media(max-width:1440px){
     /* 主視覺 */
   

}

@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: auto; }
    header#visual .header-title { padding:80px 15px; }
    header#visual .header-title img { width: 100%; }
    

    section#preface .photo { width:100%; }
    

    section#why .list-g .list { padding: 15px; width: 100%; }



    section#lesson .con.feature .card { padding: 15px; }
    section#lesson .discount-box .discount-item { flex-direction: column; width: 100%; padding: 15px; }
    section#lesson .discount-box .discount-item .icon { width: 100px; margin: 20px 0; }
    section#lesson .discount-box .discount-item .text p span.color-block { display: block; }
   
    section#lesson .discount-box { padding: 15px; }
    section#lesson .discount-box .master-title h2{ margin: 0 !important; }
 
 
 
    section#lab .experience-flex { flex-direction: column; }
    section#lab .experience-flex .experience-item { width: 100%; }



    section#exam .box { width:90%; }



    section#BTN a {  width: 400px;}

     
     
}


@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: 1.7rem; }
    .master-title h4 { font-size: 1.3rem; }
    .master-title h5 { font-size: 1.1rem;line-height: 1.8; }

    section p, section li, section table tr td { font-size: 1.05rem; }






    /* 海浪 */
    .master-title.wave h2::before {background: none;width:0;}
    .master-title.wave h2::after {background: none;width:0;}

    /* 雲朵 */
    .master-title.clouds h2::before {background: none;width:0;}
    .master-title.clouds h2::after {background: none;width:0;}

    .con-title.clouds h3::before {background: none;width:0;}
    .con-title.clouds h3::after {background: none;width:0;}
    .con-title.clouds.sing h3::before  {background: none;width:0;}







    section#lesson a {   width:85%;margin: 20px auto;}










    section#lab .experience-flex .experience-item.order-num-1 { order:1;}
    section#lab .experience-flex .experience-item.order-num-2 { order:2;}
    section#lab .experience-flex .experience-item.order-num-3 { order:3;}
    section#lab .labs-step-g ol { padding: 0; }

    section#exam .box { width:100%; }

    section#lector .text-flex { flex-direction: column; }
    section#lector .text-flex .text { width: 100%; padding: 15px; } section#lector .text-flex .photo { width: 50%;margin: 0 auto; }

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

    



}












@media(max-width: 575px){
    .container { padding: 15px; }
    .title h3 { font-size: 1.6rem; }
    h2{font-size: 1.6rem;}
    h3{font-size: 1.3rem;}
    h4{font-size: 1.2rem;}
    h5{font-size: 1.1rem;}
    .title h4 { font-size: 1.3rem; }
   
    header#visual .header-photo { height:300px; }

}