*{font-family: '微軟正黑體', 'Microsoft Jhenghei', 'Arial', sans-serif;box-sizing: border-box;}
body{overflow-x:hidden;}
html {font-size:16px;}
h1, h2, h3, h4, h5, h6 {clear: both;}
h2{line-height: 2.6rem;}
h3{line-height: 2.2rem;}
h4{line-height: 2.6rem;}
h5{line-height: 1.8rem;font-size:1.2rem; text-align: justify;}
a{ text-decoration: none;color: #2a2a2a;transition: all .2s linear; }
a:hover{ text-decoration: none;color: #000000; }

button{outline:none;}
button:focus{outline:none;}

dl, ol, ul {
    list-style: none;
}


/* 粒子 */
/* ---- reset ---- */ body{ margin:0; font:normal 75% Arial, Helvetica, sans-serif; } canvas{ display: block; vertical-align: bottom; } /* ---- particles.js container ---- */ #particles-js{ position:absolute; width: 100%; height: 100%; background-color: #ffffff; background-image: url(""); background-repeat: no-repeat; background-size: cover; background-position: 50% 50%; } /* ---- stats.js ---- */ .count-particles{ background: #000022; position: absolute; top: 48px; left: 0; width: 80px; color: #13E8E9; font-size: .8em; text-align: left; text-indent: 4px; line-height: 14px; padding-bottom: 2px; font-family: Helvetica, Arial, sans-serif; font-weight: bold; } .js-count-particles{ font-size: 1.1em; } #stats, .count-particles{ -webkit-user-select: none; margin-top: 5px; margin-left: 5px; } #stats{ border-radius: 3px 3px 0 0; overflow: hidden; } .count-particles{ border-radius: 0 0 3px 3px; }

/*bootstrapt 間距設定*/
/* .container {padding-right:10px;padding-left: 10px;} */
.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 { padding-right: 15px; padding-left: 15px; }

/* RWD 整體寬度調整*/
header div.content {  position: relative; }
div.content { width: 1200px; margin: auto; clear: both;}
header, section { width: 100%; margin: 0; clear: both; padding: 0;}
section p,section li{  margin-bottom: 0rem;font-size: 1.05rem;line-height: 1.85rem;letter-spacing:1px; }
section b{  margin-bottom: 0rem;font-size: 1.1rem;line-height: 1.7rem; }
section { padding:30px 15px; clear: both; }

/* youtube 影片 */
.video-width { width:100%; margin: 0 auto;border: 10px solid rgb(0, 0, 0); }
.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%;}

/* owl輪播點點修正 */
.owl-carousel span { width:10px; height:10px; margin:5px 7px; background: #ffffff !important; display:block; -webkit-backface-visibility:visible; -webkit-transition:opacity 200ms ease; -moz-transition:opacity 200ms ease; -ms-transition:opacity 200ms ease; -o-transition:opacity 200ms ease; transition:opacity 200ms ease; -webkit-border-radius:30px; -moz-border-radius:30px; border-radius:30px; }
.owl-carousel .active span { width:10px; height:10px; margin:5px 7px; background: #4faec9 !important; display:block; -webkit-backface-visibility:visible; -webkit-transition:opacity 200ms ease; -moz-transition:opacity 200ms ease; -ms-transition:opacity 200ms ease; -o-transition:opacity 200ms ease; transition:opacity 200ms ease; -webkit-border-radius:30px; -moz-border-radius:30px; border-radius:30px; }
.search_left{top:50%;left: -30px;position: absolute;color: #b3b3b3;font-size: 2rem;transition: .4s;}
.search_left:active{color: #d1d1d1;}
.search_right{top:50%;right: -30px;position: absolute;color: #b3b3b3;font-size: 2rem;transition: .4s;}
.search_right:active{color: #d1d1d1;}

/* 基本操作 */
.row{position: relative;z-index: 999;}
.text_center{text-align: center;}
.text_left{text-align: left;}
.flex{display: flex;}
.clear{clear: both;}
.h20{margin: 20px 0 0;}
.h50{margin: 50px 0 0;}
.h100{margin: 100px 0 0;}
.n30{margin: -30px 0;}

section .page_title h3 i {
    color: #FF3372;
    margin: 10px 0 0;
}
/* 大標 */
.title{color: #fff;width: 100%;margin: 50px auto 0;}
.title_icon{width:100px;margin:15px auto 5px;}
.row_hight{margin:100px 0 0;}
section .content .title  h2{ margin: 0 0 30px 0;text-align: center;line-height: 2.4rem;} 

/* 主視覺 */
header#Visual {position: relative;background: url('../images/master_bg.jpg') no-repeat center;background-size: cover;background-attachment: fixed;border:1px solid;}
header#Visual > .container-fluid{width: 100%;}
.master-title{width: 98%;margin: 30px 0;}
.master-title img{width: 100%;}
.header_content{position: relative;}
.people-title{width: 90%;float: right;}
.people-title img{width: 100%;} 
.more_box_hight{height: 150px;width: 100%;position: relative;}
.more_box_1{width: 50%;padding:20px;animation: more_btn 2s ease infinite;position:absolute;left:0%;}
.more_box_2{width: 50%;padding:20px;animation: more_btn 2s ease infinite;position:absolute;right:0%;}
@keyframes more_btn{
    0%{ top:0; }
    70%{ top:15px; }
    90%{ top:15px; }
    100%{ top:0px; }
}

.little_bg{width: 100%;height: 100%;position:absolute;z-index: 1;top:0;animation: little 30s linear infinite;background: url('../images/little.png') repeat-x center;}
@keyframes little{
    0%{
        background-size: 100%;
    }

    100%{
        background-size: 200%;
    }
}

/* PageA 內容設定*/
#PageA{ position: relative; background-color: rgba(255, 255, 255, 0);}
#PageA .page_title{text-align: center;}
#PageA .page_title h1{ color:#22DDDD;}
#PageA .page_title h2{ color:#22DDDD;}
#PageA .page_title h5{ text-align: justify;margin-bottom: 0rem;}
#PageA .page_title p{ text-align: justify;margin-bottom: 0rem;}

.pageA_text h2{text-align: center;margin: 0 0 20px;font-weight: bold;}
.pageA_text {
    padding: 40px;
    width: 93%;
    margin: 0 auto 30px;
    background-size: contain;
    border: 2px solid #6B6967;
    position: relative;
}
.pageA_text::before {
    content: "";
    top: -10px;
    left: -10px;
    position: absolute;
    background: url(../images/pageA_mark-l.svg) no-repeat center;
    width: 50px;
    height: 50px;
    border: 10px solid #fff;
}
.pageA_text::after {
    content: "";
    bottom: -10px;
    right: -10px;
    position: absolute;
    background: url(../images/pageA_mark-r.svg) no-repeat center;
    width: 50px;
    height: 50px;
    border: 10px solid #fff;
}


.page_float_text{float: left;width: 78%;}
.magnifier{float: left;width: 15%;margin:0 0px 0 2%;}
/* section#PageA .content{  color:#fff;}  */
/* .text-white{color:#fff;} */

/* .page_flex{display: flex;margin:0;;padding: 0;justify-content: center;align-items: center;}
.page_flex .magnifier{width: 38%;margin:0 10px;} */
/* PageB 內容設定*/
section#PageB{ position: relative; z-index: 99;background-color: rgba(253, 253, 253, 0);background: url('../images/content_bg.jpg') repeat-y center;background-attachment:fixed;}

section#PageB .page_title{color:rgb(0, 0, 0);text-align: left;position: relative;}
section#PageB .page_title h2{color:#FF3372;text-align: center;}
section#PageB .page_title h2 br{content: ""; margin: 0em; display: block; margin-bottom: -15px;}
section#PageB .page_title h4{ text-align: center;margin-bottom: 0rem;color:rgb(18,60 ,160);font-weight: 800;}
section#PageB .page_title p{ text-align: justify;margin-bottom: 0rem;}
section#PageB .page_title ul > li{text-indent : -0.8em ;margin: 10px 0;margin-left:0.8em;color:rgb(7, 41, 119);}
section#PageB .page_title ul > li i{ color: #FF3372;margin: 0 5px;}


/* 背景形狀再飄 */
.w_sense{width: 100%;position: relative;}
.shape-d{position:absolute;opacity: 0;top:30%;left:50px;}
.shape-c img{width: 80%;}
.shape-c{position:absolute;right:0px;opacity: 0;}
.shape-c img{width: 80%;}
.shape-d2{position:absolute;right:-100px;opacity: 0;}
.shape-d2 img{width: 80%;}
/* 職缺輪播 */
.slick-slide { opacity: .2; position: relative; z-index: -99;transform: scale(0.8); }
.slick-center { opacity: 1; transform: scale(1.2); z-index: 99; }
.center{ width: 100%; margin: 0 auto; }
.center img{ margin:50px 0; width: 100%;padding: 10px;}
.jobs img{box-shadow: 0 2px 5px 0 rgba(206, 206, 206, 0.5), 0 5px 10px 0 rgba(206, 206, 206, 0.5);background-color: #fff;}

/* PageC 內容設定*/
section#PageC{ position: relative; z-index: 99;background-color: #26313C;}
section#PageC .page_title{color:rgb(255, 255, 255);text-align: left;position: relative;margin: 0 0 30px;}
section#PageC .page_title h3{color:#FF3372;text-align: center;}
section#PageC .page_title h3 br{content: ""; margin: 0em; display: block; margin-bottom: -15px;}
section#PageC .page_title h2{ color:#22DDDD;text-align: center; font-weight: 600;}
section#PageC .page_title h4{ color:#22DDDD;text-align: center;}
section#PageC .page_title p{ text-align: justify;margin-bottom: 0rem;}
section#PageC .page_title ul > li{text-indent : -0.8em ;margin: 10px 0;margin-left:0.8em;}
section#PageC .page_title ul > li i{ color: #668DCC;margin: 0 5px;}

/* PageD 內容設定*/
section#PageD{position: relative; z-index: 99;background-color: #e5eaeb;}
section#PageD .page_title{color:rgb(0, 0, 0);text-align: left;position: relative;}
section#PageD .page_title h2{color:#FF3372;text-align: center;}
section#PageD .page_title h2{color:#FF3372;text-align: center;}
section#PageD .page_title h2 br{content: ""; margin: 0em; display: block; margin-bottom: -15px;}
section#PageD .page_title h4{ text-align: center;margin-bottom: 0rem;}
section#PageD .page_title p{ text-align: justify;margin-bottom: 0rem;}
section#PageD .page_title ul > li{text-indent : -0.8em ;margin: 10px 0;margin-left:0.8em;}
section#PageD .page_title ul > li i{ color: #668DCC;margin: 0 5px;}

.lesson_box{box-shadow: 0 2px 5px 0 rgba(206, 206, 206, 0.5), 0 5px 10px 0 rgba(206, 206, 206, 0.5);padding: 30px;text-align: center;margin: 20px 0 40px;}
.lesson_box img{width:80px;margin:0px auto 5px;}
.lesson_box h4{text-align: center;font-weight: 600;}
.lesson_box p{text-align: left;font-size: 1rem;line-height: 1.8rem;}
.table tr:first-child th {border-top: 0px solid #dee2e6;}
.table tr:first-child td {border-top: 0px solid #dee2e6;}
.table tr td { height: 60px; vertical-align: middle;}

.box-color1{ background: linear-gradient(-180deg, rgb(247, 247, 255) 5%, rgb(255, 255, 255) 50%); }
.box-color2{ background: linear-gradient(-180deg, rgb(247 ,255, 255) 5%, rgb(255, 255, 255) 50%); }
.box-color3{ background: linear-gradient(-180deg, rgb(255, 247, 255) 5%, rgb(255, 255, 255) 50%); }
.box-color4{ background: linear-gradient(-180deg, rgb(255, 255, 247) 5%, rgb(255, 255, 255) 50%); }
.lessin_span{color:#fff;border-radius: 2px;text-align: center;height: 30px;line-height: 30px;width: 80px;margin: 0 10px 0 0;float: left;font-weight: 800;font-size: .8rem;}
.lessin1_span{background-color: #8984B5;}
.lessin2_span{background-color: #62a4b3;}
.table tr td b{float: left;width: 80%;text-align: left;font-size:1.1rem ;}

/* PageE 內容設定*/

section#PageE{  position: relative; z-index: 99;background: url('../images/content_bg.jpg') repeat-y center;background-attachment: fixed;}
section#PageE .page_title{color:rgb(0, 0, 0);text-align: left;position: relative;}
section#PageE .page_title h2{color:#FF3372;text-align: center;}
section#PageE .page_title h2{color:#FF3372;text-align: center;}
section#PageE .page_title h2 br{content: ""; margin: 0em; display: block; margin-bottom: -15px;}
section#PageE .page_title h4{ text-align: center;margin-bottom: 0rem;}
section#PageE .page_title p{ text-align: justify;margin-bottom: 0rem;}
section#PageE .page_title ul > li{text-indent : -0.8em ;margin: 10px 0;margin-left:0.8em;}
section#PageE .page_title ul > li i{ color: #668DCC;margin: 0 5px;}

/* btn 內容設定 */
section#page_btn{ position: relative; z-index: 99;}

.button_text_white{color:#fff;transition: all 0.3s;}
.button:hover.button_text_white{ color: #fff; }
.button_text_black{color:rgb(0, 0, 0);transition: all 0.3s;margin: 20px 0; padding: 15px !important; }
.button:hover.button_text_black{ color: #fff; }
.button, .button::after {transition: all 0.3s; }
.button{  background: none; border: 2px solid #FF3372; border-radius: 5px;display: block; font-weight: bold; text-align: center; margin: 20px auto; padding:5px; position: relative;font-size: 1.2rem;overflow: hidden;}
.button::before,.button::after { background: #FF3372; content: ''; position: absolute; z-index: -1; }
.btn::after { height: 0; left: 50%; top: 50%; width: 0; }
.btn:hover:after { height: 100%; left: 0; top: 0; width: 100%; }
.button:hover{border:2px solid #ff337400; transition: all 0.3s; }

.button2:hover.button_text_black{ color: #fff; }
.button2{transition: all 0.3s; }
.button2{  background: none; border: 2px solid #FF3372; border-radius: 5px;display: block; font-weight: bold; text-align: center; margin: 20px auto;position: relative;font-size: 1.2rem;overflow: hidden;background: #FF3372;padding:10px 0;}
.button2:hover{ background: #d41551}

/* RWD Setting */
    @media (max-width: 1440px) {
       /* RWD 整體寬度調整*/
        div.content { width: 1100px; margin: 0 auto;}
      
        /* 主視覺 */ 
    }

    @media (max-width: 1199px) {
        /* RWD 整體寬度調整*/
        div.content { width: 951px; margin: 0 auto;}

        /* 主視覺 */

        /* PageA 內容設定*/
        .page_flex .magnifier{width: 98%;}
        /* PageB 內容設定*/
        /* PageD 內容設定*/
        .table tr td b{width: 100%;}

        .table tr td { height: auto; }
    }

    @media (max-width:991px) {
        /* RWD 整體寬度調整*/
        div.content { width:100%;}

        /* 主視覺 */
        header#Visual { background-size: cover; }
        .master-title { width: 100%; margin: 20px 0;  }
        .more_box_hight { height: 100px;}
        .people-title{width: 100%;}

        /* PageA 內容設定*/
    
        /* PageB 內容設定*/
         section#PageB .page_title ul > li { margin: 5px 0; }
    }

    @media (max-width: 768px) {
         /* RWD 整體寬度調整*/
     
   
        /*主視覺*/

        /* PageA 內容設定*/
        .page_flex{display: flex;margin:0;;padding: 0;justify-content: center;align-items: center;}
        .page_flex .magnifier{width:170%;}
        .page_float_text{width: 60%;}
.magnifier{float: left;width: 38%;margin:0 0px 0 2%;}
        /* PageB 內容設定*/
        .winner_people{width: 40%;margin: 0 auto;}
        .table-l tr:first-child td {border-top: 1px solid #dee2e6;}
        /* 職缺輪播 */
        .slick-center {  transform: scale(0.8); }
        .center{ width: 100%; margin: 0 auto; }
        .center img{ margin:0px 0;padding: 0px;}
        .page_title ul { padding: 0px 0 0 20px;  margin-bottom: 0rem;}
       
    }
    
    @media (max-width: 576px) {
        body { margin: 0;}
     
        /*RWD 整體寬度調整*/
        i{margin-right: 5px;}
        h4{font-size: 1.3rem;line-height: 1.6rem;}
        h5{font-size: 1.1rem;line-height: 1.7rem;}
     
        section p,section li,section b{margin-bottom: 0rem;font-size: .9rem;line-height: 1.4rem;}
        table tr td p{font-size: .9rem;line-height: 1.4rem;}
        table tr td a { font-size: .9rem;line-height: 1.4rem;}
       
        section {padding: 15px; margin: 0; }
        section h1 { font-size:1.9rem; line-height: 2.1rem;; }
        dl, ol, ul { padding:0 10px; }
        section .content .title {text-align: center;}
        .title_icon { width: 80px; margin: 5px auto; }

        .w_sense{opacity: 0;}
        /* 主視覺 */
        .people-title{width: 70%;margin: -50px auto 0;float: inherit;}
        .more_box { width:90%; left: 5%; }
        .more_box_1{width: 50%;padding:0px;animation: more_btn 1.4s ease infinite;position:absolute;left:0%;}
        .more_box_2{width: 50%;padding:0px;animation: more_btn 1.4s ease infinite;position:absolute;right:0%;}
        /* PageA 內容設定*/
        section#PageA .page_title h2{line-height: 2.3rem;}
  
        .page_float_text{float: none;width: 100%;}
        .magnifier{float: none;width: 50%;margin:30px auto 0;}
        .page_title ul {
            padding: 10px 0px 0px 38px;
            margin-bottom: 0rem;
        }
        

        /* PageB 內容設定*/
 
        .magnifier img{width: 100%;}
        section#PageB .page_title h3 i{margin: 8px 0 0;}
        /* 輪播 */
        .jobs img{margin-bottom:30px;}

        /* PageC 內容設定*/
        .button{ font-size: 1rem;}



    }