*{font-family: 'Noto Sans TC','微軟正黑體',sans-serif; }
body{ font-family: 'Noto Sans TC','微軟正黑體',sans-serif; background: url(../images/master-bg.jpg) center repeat;background-attachment: fixed;background-size: 100%;}
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); }





.btn-style {border-radius: 5px ;border: 3px solid #96e0ff;color: #fff;padding: 5px 15px;position: relative;  box-shadow: 0 0 4px #96e0ff, 0 0 8px #96e0ff, 0 0 10px #00bfff inset;color: #dfe5e6;transition: all .2s ease-in;cursor: pointer;}
.btn-style:hover {box-shadow: 0 0 6px #96e0ff, 0 0 10px #96e0ff, 0 0 15px #00bfff inset;color: #ffffff;} 


.btn-photo {border: 3px solid #96e0ff;color: #fff;position: relative;  box-shadow: 0 0 4px #96e0ff, 0 0 8px #96e0ff, 0 0 10px #00bfff inset;color: #d0dadd;transition: all .2s ease-in;cursor: pointer;}
.btn-photo:hover {box-shadow: 0 0 6px #96e0ff, 0 0 10px #96e0ff, 0 0 15px #00bfff inset;color: #ffffff;} 








/* 大小標題共用 */
.master-title {margin:20px 0 40px;position: relative;}
.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;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 h4 ,.master-title.white h5 {color: #fff;}
.master-title.yellow h2,.master-title.yellow h3 ,.master-title.yellow h5{color: #eeda9f;}


.master-title h2::before {background: url(../images/con-title-icon.svg) no-repeat;width: 100px;height: 60px;position: absolute;left: -80px;top: 50%;background-size: contain;content: "";transform: translateY(-50%);}
.master-title h2::after {background: url(../images/con-title-icon.svg) no-repeat;width: 100px;height: 60px;position: absolute;right: -80px;top: 50%;background-size: contain;content: "";transform: translateY(-50%) scaleX(-1);}

.con-title h2 ,.con-title h3 ,.con-title h4  {color: #000;}


.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;background-color: #192471;}
header#visual .header-title {width: 100%;text-align: center;margin: 0 0 20px;}
header#visual .header-title img {width: 90%;}
header#visual h1 {opacity: 0;position: absolute;z-index: -999;}
header#visual .header-con-out {position: relative;background: linear-gradient(90deg,#e62ee6,#00a1e6);padding:15px;width: fit-content;margin: 0 auto;border-radius: 5px;z-index: 999;position: relative;}
header#visual .header-con {position: relative;background-color: #080641;padding:30px 200px 2px 200px;text-align: center;  width: fit-content;color: #fff;}
header#visual .header-con-out::after {  content: ''; position: absolute; bottom: -58px; left: 50%; transform: translate(-50%,0%); width: 100%; height: 60px; background: linear-gradient(90deg,#e62ee6,#00a1e6); clip-path: polygon(50% 100%, 0 0, 100% 0); z-index: 98; }
header#visual .header-con::after { content: ''; position: absolute; bottom: -58px; left: 50%; transform: translate(-50%,0%); width: 100%; height: 60px; background:#080641; clip-path: polygon(50% 100%, 0 0, 100% 0); z-index: 99; }

header#visual .header-con h5 {line-height: 1.6;}
header#visual .header-con h2 {margin: 0 0 20px;position: relative;text-shadow: 0 0 3px #ffe000;font-weight: 600;}
header#visual .header-con h2::before {position: absolute;content: "";left: -5px;background: url("../images/header-title-icon-star.png");width: 38px;height: 38px;top: 4px;background-size: contain;}
header#visual .header-con h2::after {position: absolute;content: "";right: -5px;background: url("../images/header-title-icon-star.png");width: 38px;height: 38px;top: 4px;background-size: contain;transform: scaleX(-1);}




/* AI改變了視覺設計師的工作模式 */
section#change {
    background: linear-gradient(to bottom, rgba(87, 5, 195, 0.9) 0%, rgba(14, 64, 139, 0.9) 30%, rgba(7, 5, 64, 1) 100%);  }
section#change .text {text-align: left;}
section#change .text.center {text-align: center;}
section#change .text p ,section#change .text h4{color: #fff;}
section#change .text p span {background: linear-gradient(to bottom , transparent 0% , #00f7ff59 80%, #00e1ff59 80%);color: #fff;}
section#change .icon { width: 150px; margin: 0 auto 10px; }
section#change .icon img { mix-blend-mode: screen;width: 100%; }
section#change .photo {margin:  0 0 20px;}
section#change .text a {color: #fff8d7;}

/* 熟練操作技巧，立即靈活應用於創作中 */
section#tool {background:  linear-gradient(to right,rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.2) 30%,rgba(0, 0, 0, 0.2) 70%,rgba(0, 0, 0, 1) 100%), url(../images/master-bg-2.jpg) ; background-size: contain;  background-attachment: fixed; }

section#tool .master-title {text-align: center;}
section#tool .master-title img {height: 120px;margin: 0 auto 20px;display: block;}
section#tool .con-g .con .con-title {padding:8px 15px;margin: 20px 0 ; text-align: center;mix-blend-mode: screen;border-radius: 5px;}
section#tool .con-g .con .con-title h3 {margin: 0;color: #080641;font-weight: 600;}
section#tool .con-g .con .text-flex {display: flex;}
section#tool .con-g .con .text-flex .lesson {width: 55%;}
section#tool .con-g .con .text-flex .video-item {width: 45%;padding: 30px;}
section#tool .con-g .con .text-flex .video-item img {width: 100%;}


section#tool .con-g .con .text-flex .lesson .logo img{height: 80px;}
section#tool .con-g .con .text-flex .lesson a h5 {color: #fff;font-size: 1.8rem;transition: all .3s ease-in;}
section#tool .con-g .con .text-flex .lesson a p {color: #fff;}
section#tool .con-g .con .text-flex .lesson a:hover  {text-decoration: none;}


section#tool .con-g .con .text-flex .lesson ul {display: flex;list-style: none;padding: 0; margin: 20px 0;}
section#tool .con-g .con .text-flex .lesson ul li {color: #94a7ba;margin:  0 20px 0 0 ;}
section#tool .con-g .con:nth-child(odd) .con-title{background: linear-gradient(90deg,rgba(113, 212, 255, 1),rgba(0, 179, 255, 0.8))}
section#tool .con-g .con:nth-child(even) .con-title{background: linear-gradient(90deg,#ffb9ff,rgba(233, 90, 233, 0.8))}


section#tool .con-g .con:nth-child(odd) .text-flex .lesson a:hover h5 {color: rgba(192, 240, 255, 0.85);}
section#tool .con-g .con:nth-child(even) .text-flex .lesson a:hover h5 {color: rgba(255, 221, 248, 0.85);}

section#tool a.lesson-btn {font-size: 1.5rem;border-radius: 5px ;border: 5px solid #96e0ff;color: #fff;padding: 5px 15px;margin: 20px 0 20px;display: inline-block;text-shadow: 0 0 8px #96e0ff;position: relative;}

section#tool a.lesson-btn {font-size: 1.5rem;margin: 20px 0 20px;display: inline-block;}




section#implementation {background: linear-gradient(to bottom,  rgba(14, 64, 139, 0.9) 0%, rgba(7, 5, 64, 1) 100%); }
section#implementation .item-out {width: 100%;background-color: #96e0ff;padding: 10px;border-radius: 5px;align-items: center;padding: 8px;margin: 20px 0;}
section#implementation .item-out .item-flex {background: linear-gradient(to bottom , #004d9a , #008fd6);width: 100%;height: 100%;display: flex;align-items: center;padding: 10px;} 
section#implementation .item-out .icon {text-align: center;width: 50%;}
section#implementation .item-out .icon img{  mix-blend-mode: screen;width: 180px;}
section#implementation .item-out .text {width: 50%;}
section#implementation .item-out .text h4 {display: inline-block;color:#fff ;}




section#assure {background:  linear-gradient(to right,rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.2) 30%,rgba(0, 0, 0, 0.2) 70%,rgba(0, 0, 0, 1) 100%), url(../images/master-bg-2.jpg) ; background-size: contain;  background-attachment: fixed;}

section#assure .box-out {background-color: #fff;background: linear-gradient(90deg,#e62ee6,#00a1e6);padding: 10px;border-radius: 5px;}
section#assure .box-out .box{background-color: #fff;min-height: 320px;}
section#assure .box-out .box p {margin: 0;}

section#assure .box-out .photo {width: 100%;height: 160px;}
section#assure .box-out .box .text {padding: 10px 20px;}
section#assure .box-out .box .text h4 {text-align: center;margin: 10px 0 5px;}

section#assure .stu-item-g {display: flex;justify-content:space-between;flex-wrap: wrap;}
section#assure .stu-item-g .stu-item {width: 49%;display: flex;align-items: center;padding: 20px;}
section#assure .stu-item-g .stu-item .stu-photo {width: 80px;margin-right: 10px;}
section#assure .stu-item-g .stu-item .stu-photo img{width: 80px;}
section#assure .stu-item-g .stu-item .text p{color: #fff;margin: 0;}
section#assure .con-g .con:nth-child(odd) .con-title {border: 3px solid #fb629a;}
section#assure .con-g .con:nth-child(even) .con-title {border: 3px solid #00a1e6;}
section#assure .con-g .con .con-title {width: 60%;text-align: center;margin:  20px auto;padding: 10px 15px;border-radius: 60px;}
section#assure .con-g .con .con-title h4{color: #fff;text-align: center;margin: 0;}



section#subscription {background: linear-gradient(to bottom,  rgba(14, 64, 139, 0.9) 0%, rgba(7, 5, 64, 1) 100%); }

section#subscription .text h5 {color: #fff;}
section#subscription .photo {width: 100%;border: 3px solid #00a1e6;  position: relative;}
section#subscription .photo .black {width: 100%;height: 100%;background-color: rgba(5, 31, 77, 0.9);position: absolute;z-index: 10;top: 0;left: 0;transition: all .2s ease-in;}


section#subscription .photo.yt {background: url("../images/subscription-video.jpg") no-repeat center;background-size: contain;}
section#subscription .photo.blog {background: url("../images/subscription-blog.jpg") no-repeat center;background-size: contain;}

section#subscription .photo.yt::before,section#subscription .photo.blog::before {
 content: "";
  display: block;
  padding-top:  56.4%; /* padding−top=(高度÷寬度)×100 圖片比例*/}


section#subscription .photo:hover .black{background-color: rgba(3, 20, 52, 0.8);}

section#subscription .photo .text  {position: absolute;z-index: 99;transform: translate(-50%,-50%);left: 50%;top: 50%;text-align: center;}
section#subscription .photo .text .icon {width: 50px;margin: 0 auto 10px;}
section#subscription h5 {line-height: 1.8;color: #fff;font-size: 1.4rem;}
section#subscription h5 span {background: linear-gradient(to bottom , transparent 0% , #00f7ff59 80%, #00e1ff59 80%);color: #fff;} 




/* 按鈕*/ 
section#BTN {position: relative;background: linear-gradient(to bottom,  rgba(179, 3, 255, 0.95) 0%, rgba(0, 56, 145, 0.98) 100%);}
section#BTN h5 {line-height: 1.8;color: #fff;font-size: 1.2rem;}
section#BTN h2 {line-height: 1.8;color: #fff;}
section#BTN h5 span {background: linear-gradient(to bottom , transparent 0% , #00f7ff59 80%, #00e1ff59 80%);color: #fff;} 

section#BTN .big-btn {width: 80%;margin: 0 auto;font-size: 2.5rem;padding: 8px 15px;text-align: center;}
section#BTN a {font-weight: 600;}
section#BTN a:hover {text-decoration: none;}



@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-con h2::before { left: -5px; top: 0;}
    header#visual .header-con h2::after { right: -5px; top: 0;}
    header#visual .header-con { padding: 30px 100px 2px 100px; }


    
}


@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.5rem; }
    .master-title h4 { font-size: 1.3rem; }
    .master-title h5 { font-size: 1.2rem;line-height: 1.8; }
    .master-title h2{ width: 60%; }
    
    section p, section li, section table tr td { font-size: 1.1rem; }
    header#visual .header-title img { width: 100%; }
      
    section#change .text.center { margin: 0 0 60px; }

    section#tool .master-title img { height: auto; width: 100%; display: block; }
    section#tool .con-g .con .con-title h3 { font-size: 1.5rem; }

    section#assure .stu-item-g .stu-item { width: 100%; display: flex ; align-items: center; padding: 20px; margin: 0 0 20px; }


    section#tool .con-g .con .text-flex { flex-direction: column; }
    section#tool .con-g .con .text-flex .lesson { width: 100%; }
    section#tool .con-g .con .text-flex .video-item { width:100%; padding: 0; margin: 20px 0;}
    section#tool .con-g .con .text-flex .lesson a h5 { font-size: 1.4rem; }
    section#tool .con-g .con .text-flex .lesson ul { flex-wrap: wrap; }
    section#tool .con-g .con .text-flex .lesson .logo img { height: 60px; }
    section#tool a.lesson-btn { margin: 20px auto 20px; display: block; text-align: center; width: 200px; }

    section#implementation .item-out .icon img { width: 120px; }
    
    
    section#assure .box-out { margin: 0 0 20px;}
    section#assure .box-out .photo { width: 100%; height: 220px; }
    section#assure .con-g .con .con-title { width: 100%; border-radius: 30px; }

    section#subscription .text {margin: 0 0 20px;}
    section#subscription .photo {margin: 0 0 20px;}

    section#BTN .big-btn { width: 80%; margin: 20px auto; }
    section#BTN a { width: 100%;}

  
}












@media(max-width: 575px){
    .container { padding: 15px; }

   
    header#visual .header-con { padding: 30px 30px 2px;width: 100%; }
    header#visual .header-con-out { width: 98%; margin: 0 auto; }
    header#visual h5 {font-size: 1.1rem;}

}