
body { 
    background: -webkit-linear-gradient(top,#EFEFED,#FEFEFE), no-repeat;
    background: -moz-linear-gradient(top,#EFEFED,#FEFEFE), no-repeat; 
    background: -ms-linear-gradient(top,#EFEFED,#FEFEFE), no-repeat; 
    margin: 0 0 0 0;
    background-size: 100%; 
    background-position: top center;

}


h1, h2, h3, h4, h5, h6 { font-weight: 600; text-align: center; clear: both;   }


ul { padding: 0 0 0 0; margin: 0 0 0 0; }
ul li { font-size: 16px; }
p { font-size: 15px; line-height: 1.6; }
a:hover { text-decoration: none; }

/* Article 整體寬度調整*/
 article  { 
    width: 1200px;
    margin: 0 auto 0 auto; 
    padding: 0;
    clear: both;  
    box-shadow: rgba(84,72,62,0.1) 0 0 40px 5px;
    background: #FFF;
    color: #000;
}

header, section { width: 100%; margin: 0; clear: both; }
section { min-height: 100px; padding: 40px 60px; clear: both; display: inline-block; }
section div.BOX { margin: 15px 1%; float: left; padding: 15px; overflow: hidden;  }

div.Mobile { display: none; }


/* 主視覺 */

header#Visual { 
    height: 480px;
    background: -webkit-linear-gradient(top,rgba(232,218,212,0.4),rgba(255,255,255,0),rgba(255,255,255,0)), url('../images/180323_PMPV6_Visual.jpg') #FFF no-repeat fixed ;
    background: -moz-linear-gradient(top,rgba(232,218,212,0.4),rgba(255,255,255,0),rgba(255,255,255,0)), url('../images/180323_PMPV6_Visual.jpg') #FFF no-repeat fixed ;
    background: -ms-linear-gradient(top,rgba(232,218,212,0.4),rgba(255,255,255,0),rgba(255,255,255,0)), url('../images/180323_PMPV6_Visual.jpg') #FFF no-repeat fixed ;
    background-size: 1200px;
    background-position: top center;
    overflow: hidden;
    position: relative;
}

header#Visual > div.Content { 
    position: absolute; 
    top: 50px; right: 0; 
    width: 50%; 
    background: rgba(79,175,136,0.9); 
    padding: 20px 40px 20px 40px; 
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}
header#Visual > div.Content h1 { font-size: 4.8em; text-align: left; color:#FFF; margin: 0 0 10px 0; padding: 0 0 5px 0; border-bottom: solid 3px #FFF; }
header#Visual > div.Content h3 { font-size: 2.1em; text-align: left; color: #FFF; margin: 0; padding: 0; letter-spacing: 3.3px; }
header#Visual > div.Content h1 > span { font-size: 22px; }
header#Visual > div.Content > div.BTN { 
    width: 50%; height: 45px; line-height: 45px; 
    border: solid 2px rgba(255,255,255,0.7); 
    text-align: center; 
    font-size: 18px; font-weight: 500;
    border-radius: 4px;
    margin: 8px 0 0 0;
    letter-spacing: 2px;
    transition: 0.2s;
}
header#Visual > div.Content > div.BTN:hover { background-color: rgba(0,0,0,0.2); transition: 0.2s; border: solid 2px rgba(255,255,255,0);  }
header#Visual > div.Content > div.BTN a { color: #FFF; display: block; }



/* PageA 內容設定*/
section#PageA { background-color: #4faf88; color: #FFF; padding-top: 10px; padding-bottom: 0px; }
section#PageA a { color:#fffdab; font-weight: 600; }
section#PageA > div.BOX.left { width: 38%; overflow: initial; }
section#PageA > div.BOX.right { width: 58%  }
section#PageA > div.BOX p { font-size: 16px; margin: 0 0 0 0; }

section#PageA div#TOP-IMG { margin-top: -100px; }
section#PageA div.item { padding: 15px 15px 10px 15px; position: relative; transition: 0.4s; }
section#PageA div.item:hover { top:-10px; transition: 0.4s; }
section#PageA div.item img { border-radius: 10px !important; border: solid #d9e8e2 4px; box-shadow: rgba(0,0,0,0.5) 0 0 15px 0; }

section#PageA .owl-theme .owl-controls .owl-page span { background:#FFF !important;  }
section#PageA .owl-theme .owl-controls { margin-top: 0; }


section#PageA > div.BOX.right > p span { animation-name: light_TXT; animation-duration: 2s; animation-iteration-count: infinite; font-size: 18px; }


    /*MOV*/
    @keyframes light_TXT {
        0%  { }
        50%  { color: #4faf88; }
        100%  {  }
        
    }

/* PageB 內容設定*/
section#PageB, section#PageD, section#PageE { 
    background: -webkit-linear-gradient(top,rgba(255,255,255,0.9),rgba(255,255,255,0.9),rgba(255,255,255,0.9)), url('../images/BG02.jpg') #FFF no-repeat fixed; 
    background: -moz-linear-gradient(top,rgba(255,255,255,0.9),rgba(255,255,255,0.9),rgba(255,255,255,0.9)), url('../images/BG02.jpg') #FFF no-repeat fixed; 
    background: -ms-linear-gradient(top,rgba(255,255,255,0.9),rgba(255,255,255,0.9),rgba(255,255,255,0.9)), url('../images/BG02.jpg') #FFF no-repeat fixed; 
    background-size: 60%;
    background-position: left top;
}

section#PageD, section#PageE {
    background: -webkit-linear-gradient(top,rgba(255,255,255,0.9),rgba(255,255,255,0.9),rgba(255,255,255,0.9)), url('../images/BG03.jpg') #FFF no-repeat fixed; 
    background: -moz-linear-gradient(top,rgba(255,255,255,0.9),rgba(255,255,255,0.9),rgba(255,255,255,0.9)), url('../images/BG03.jpg') #FFF no-repeat fixed; 
    background: -ms-linear-gradient(top,rgba(255,255,255,0.9),rgba(255,255,255,0.9),rgba(255,255,255,0.9)), url('../images/BG03.jpg') #FFF no-repeat fixed; 
}

section#PageB > p { text-align: center; }
section#PageB > div.BOX { width: 48%;   }
section#PageB > div.BOX.BA { border-radius: 10px; height: 240px; background-image: url('../images/BIMG_FeeIMG.png'); background-size: 80%; background-position: center 120px; background-repeat: no-repeat; }
section#PageB > div.BOX.BA > h1 { font-size: 26px; margin: 14px 0 0 0; padding: 0; }
section#PageB > div.BOX.BA > h1 > a { color: #377c5e; display: block;}
section#PageB > div.BOX.BA > p { font-size: 15px; margin: 0; padding: 5px 0; text-align: center; }
section#PageB > div.BOX.BA > h4 { font-size: 18px; margin: 0; padding: 8px 0 7px 0; background-color: #4faf88; color: #FFF; border-radius: 4px; }

section#PageB > div.BOX.BA, 
section#PageB > div.BOX.BB > div { background-color: #f2f2eb;  }

section#PageB > div.BOX.BB { padding: 0; }
section#PageB > div.BOX.BB > div { height: 110px; border-radius: 10px; margin: 0 0 20px 0; padding: 15px; }
section#PageB > div.BOX.BB > div > div.IMG { width: 20%; height: 80px; float: left; background-size: 90%; background-position: center left; background-repeat: no-repeat; }
section#PageB > div.BOX.BB > div.BB01 div.IMG { background-image: url('../images/BIMG-06.png'); }
section#PageB > div.BOX.BB > div.BB02 div.IMG { background-image: url('../images/BIMG-07.png'); }
section#PageB > div.BOX.BB > div > div.Content { width: 80%; float: left; padding-right: 5px; }
section#PageB > div.BOX.BB > div > div.Content h3 { text-align: left; margin: 0 0 5px 0; padding: 0 0 5px 0; font-size: 22px; border-bottom: solid 3px #4faf88; font-weight: 500;  }
section#PageB > div.BOX.BB > div > div.Content p { text-align: left; margin: 0; padding: 0; }

/* PageC 內容設定*/
section#PageC { background: #e4efea }
section#PageC div.BOX { background-color: #FFF; border-radius: 5px;  height: 330px; width: 96%;}
section#PageC div.BOX > h3 { font-size: 20px; margin: 15px 0 0 0; padding: 0 0 0 0; font-weight: 500; color: #377c5e; text-align: left; }
section#PageC div.BOX > p { padding: 7px 0 0 0; font-size: 14px; }
section#PageC div.BOX.C4 > h3 { font-size: 17px; }
section#PageC div.BOX li{ font-size: 14px; }
section#PageC div.BOX ul{ margin-left: 25px;margin-top: -10px;}
section#PageC div.BOX ol{ margin-top: -10px;}
section#PageC div.BOX div.IMG { height: 130px; background-color: #f2f2eb; background-repeat: no-repeat; background-position: top center; border-radius: 5px;  }

div.BOX.C1 div.IMG { background-image: url('../images/BIMG-01.png'); background-size: 80%; }
div.BOX.C2 div.IMG { background-image: url('../images/BIMG-02.png'); background-size: 80%; background-position: bottom center; }
div.BOX.C3 div.IMG { background-image: url('../images/BIMG-03.png'); background-size: 80%; }
div.BOX.C4 div.IMG { background-image: url('../images/BIMG-04.png'); background-size: 50%; }
div.BOX.C5 div.IMG { background-image: url('../images/BIMG-05.png'); background-size: 50%; }

/* PageD 內容設定*/
section#PageD > h1 { line-height: 1.4; }
section#PageD  div.BOX.item { height: 200px; background: #f2f2eb; border-radius: 10px; opacity: 0.8; transition: 0.2s; }
section#PageD  div.BOX.item:hover { opacity: 1; transition: 0.2s; }
section#PageD  div.BOX.item > h3 { margin: 0 0 8px 0; border-bottom: solid 3px #4faf88; padding: 0 0 8px 0; }

section#PageD > div.BTN { width: 200px; height: 45px; line-height: 45px; text-align: center; margin: 10px auto; font-size: 16px; background: #4faf88; border-radius: 3px; }
section#PageD > div.BTN a { display: block; color: #FFF; }
section#PageD > div.BTN:hover { background-color: #377c5e; }

section#PageD > h3 { margin-top: 50px; }
section#PageD > h3 > span { border-bottom: solid 3px #FC0; padding: 10px; }

section#PageD .Video{border-radius: 10px;border: 5px #377c5e solid;overflow: hidden;width:100%;height:220px;margin: 50px auto 0 auto;}


section#PageD .Video + a {margin: 20px auto;font-size: 2rem;display: inline-block;width: 100%;text-align: center;color: #4faf88;font-weight: 600;}
section#PageD .Video + a:hover {color: #377c5e;}














#cert div.BOX.item {height: auto !important;margin: 0 auto;margin: 40px 0 0;}
#cert .BOX img{width: 100%;}





/* PageE 內容設定*/
section#PageE { padding-top: 0; }
section#PageE > p { clear: both; text-align: center; padding: 25px 0 0 0; }




/* CPT 內容設定*/
div#CPT { width: 880px; margin: auto; padding-top: 25px }
div#CPT div.BTN { 
    margin: 10px 1%; 
    float: left;
    background:#4faf88; 
    color: #FFF; 
    text-align: center; 
    font-size: 1.3em; 
    padding: 15px 10px; 
    border-radius: 5px;
    transition: 0.20s linear;
    width: 31.3333%;
}
div#CPT div.BTN a { display: block; color: #FFF; }

div#CPT div.BTN:hover { background: #377c5e; transition: 0.20s linear; }




/*聯絡資訊設定*/

footer div.InfoArea { background: #51504c; }





/* RWD Setting */

    @media (max-width: 1200px) {
        article { width: 800px;  }
        section { padding: 20px 40px;  }
        section p { font-size: 14px !important }

        /* 主視覺 */
        header#Visual { height: 350px; background-size: 800px; background-position: top center; }
        header#Visual > div.Content { width: 50%; }
        header#Visual > div.Content h1 { font-size: 3.8em; }
        header#Visual > div.Content h3 { font-size: 1.5em; text-align: center; }
        header#Visual > div.Content > div.BTN { width: 100%; }


        /* PageA 內容設定*/
        section#PageA { padding-top: 0px; }
        section#PageA a { color:#fffdab; font-weight: 600; }
        section#PageA > div.BOX { margin: 10px 0; padding: 10px !important; }
        section#PageA > div.BOX.left { width: 100%;  }
        section#PageA > div.BOX.right { width: 100%  }


        section#PageA div#TOP-IMG { margin-top: 0px; }
        section#PageA div.item { padding: 20px 80px 0 80px;  }
        section#PageA div.item:hover { top:0px;  }
        section#PageA div.item img { border-radius: 10px !important; border: solid #d9e8e2 4px; box-shadow:none; }

        section#PageB > div.BOX.BA > h1 { font-size: 22px; margin: 12px 0 0 0; }
        section#PageB > div.BOX.BA > h4 { font-size: 16px;  }
        section#PageB > div.BOX.BB > div > div.Content h3 { font-size: 18px;  }

        div#CPT { width: 100%; }
        div#CPT div.BTN { float: initial; clear: both; margin: 10px auto; font-size: 15px; width: 100%; }


    }

    @media (max-width: 800px) {
        article { width: 100%;  }
    }

    @media (max-width: 799px) {
        article { width: 395px;  }
        section { padding: 20px 15px;  }
        section p { font-size: 12px !important }

        section div.BOX { float: initial; width: 100% !important; }

        /* 主視覺 */
        header#Visual { height: 450px; background-size: cover; background-attachment: initial; background-position: -230px bottom; }
        header#Visual > div.Content { width: 100%; top: initial; bottom: 0; height: auto; padding: 20px 10px; border-radius: 0; }
        header#Visual > div.Content h1 { font-size: 3em; text-align: center; }
        header#Visual > div.Content h3 { font-size: 1.5em; text-align: center; }

        section#PageA { background-color: #4faf88; }
        section#PageA div.item { padding: 0 0 0 0; }
        section#PageA > div.BOX.right { margin-top: -25px;  }

        /* PageB 內容設定*/
        section#PageB > div.BOX { width: 100%; }

        section#PageD > h1 { font-size: 22px; }
        section#PageD > h3 { font-size: 15px; }
        section#PageD  div.BOX.item { height: 160px; }
        section#PageD .Video{width: 320px;height: 180px;}


        section#PageD .Video{width:100%;height:280px;}
    }

    /*iPhone 6 */
    @media (max-width: 395px) {
        article { width: 100%;  }
    }

    /*Galaxy S5 */
    @media (max-width: 360px) {
       
    }

    /*iPhone 5 */
    @media (max-width: 320px) {
        article { width: 100%;  }
        header#Visual { height: 650px; }
       

    }


.modal-content img { width: 100%; }

.modal-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1040;
  background-color: #d9e8e2;
}


.modal-backdrop.in {
  filter: alpha(opacity=90);
  opacity: .9;
}



div#SocialMedia { position: fixed; right: 10px; bottom: 50px; }
div#SocialMedia ul { list-style: none;  }
div#SocialMedia ul li { 
    background: rgba(0,0,0,0.75); 
    color: #FFF; 
    width: 40px; 
    height: 40px; 
    line-height: 40px; 
    font-size: 1.25em; 
    text-align: center; 
    margin: 8px 0 0 0;
    border-radius: 4px;
}
div#SocialMedia ul li a { color: #FFF; }
div#SocialMedia ul li.FB:hover { background: #39507C; transition: .20s linear;  }
div#SocialMedia ul li.Youtube:hover { background: #DB1B1B; transition: .20s linear; }
div#SocialMedia ul li.Contact:hover { background: #096; transition: .20s linear; }
