body { 
    background: -webkit-linear-gradient(top,rgba(50,72,110,0.9),rgba(73,96,130,0.95)),url('../images/Visual-01.jpg') fixed;
    background: -moz-linear-gradient(top,rgba(50,72,110,0.9),rgba(73,96,130,0.95)),url('../images/Visual-01.jpg') fixed;
    background: -ms-linear-gradient(top,rgba(50,72,110,0.9),rgba(73,96,130,0.95)),url('../images/Visual-01.jpg') fixed;
    margin: 0 0 0 0;
    background-size: cover; 
    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; }


/* Article 整體寬度調整*/
 article  { 
    width: 1200px;
    margin: 0 auto 0 auto; 
    padding: 0;
    clear: both;  
    box-shadow: rgba(56,194,237,0.6) 0 0 500px 0;
    background: #f9f7f2;
    color: #000;
}

header, section { width: 100%; margin: 0; clear: both; }
section { min-height: 100px; padding: 50px 60px 25px; clear: both; display: inline-block; }
section div.BOX { margin: 15px 1%; float: left; background: #FFF; padding: 15px; text-align: center; overflow: hidden; border-radius: 8px; }
section p { text-align: justify; text-justify:inter-ideograph; }


div.Mobile { display: none; }


/* 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%;}
/* 主視覺 */

header#Visual { 
    height: 600px;
    background: -webkit-linear-gradient(left,rgba(172,229,137,0),rgba(255,244,215,0.4),rgba(255,255,255,0)), url('../images/Visual-01.jpg') #32486e no-repeat ;
    background: -moz-linear-gradient(left,rgba(172,229,137,0),rgba(255,244,215,0.4),rgba(255,255,255,0)), url('../images/Visual-01.jpg') #32486e no-repeat ;
    background: -ms-linear-gradient(left,rgba(172,229,137,0),rgba(255,244,215,0.4),rgba(255,255,255,0)), url('../images/Visual-01.jpg') #32486e no-repeat ;
    background-size: 101%;
    background-position: top center;
    overflow: hidden;
    position: relative;
    border-bottom: solid 6px #EFEFED;

}
header#Visual > div.Content { width: 600px; margin: auto; position: relative; z-index: 9999; animation-name: TOPIC_IMG; animation-duration: 3s; }
header#Visual > div.Content > img { width: 100%; }


header#Visual div.CircleLight { position: absolute; width: 1px; height: 1px; border-radius: 99em; bottom: 150px; background: rgba(255,255,255,0);  }

header#Visual div.CircleLight.C01 { left: 20%; animation-name: TOPIC_CA; animation-duration: 0.14s; animation-iteration-count: infinite; }
header#Visual div.CircleLight.C02 { left: 48%; animation-name: TOPIC_CB; animation-duration: 0.15s; animation-iteration-count: infinite; }
header#Visual div.CircleLight.C03 { right: 20%; animation-name: TOPIC_CC; animation-duration: 0.16s; animation-iteration-count: infinite; }


/* PageA 內容設定*/
section#PageA { background-color: #f9f7f2 }
section#PageA > div.BOX { width: 48%; border: solid 4px #EFEFED; padding: 25px 15px; overflow: hidden; height: 520px; transition: 0.1s; }
section#PageA > div.BOX:hover { box-shadow: rgba(88,175,219,0.3) 0 0 30px 1px; transition: 0.1s; border: solid 4px #FFF; margin-top: -6px; }
section#PageA > div.BOX > h2 { margin: 0; }
section#PageA > div.BOX > h4 { font-weight: 500; }
section#PageA > div.BOX > p { text-align: left; margin: 0; }
section#PageA > div.BOX p.source { text-align: center; font-weight: 600; color: #666; padding: 5px 0; }
section#PageA > div.BOX > img { width: 100%; }
section#PageA > div.BOX.left > img { width: 85%; padding: 10px 0; }

section#PageA > p.EndText { clear: both; font-size: 20px; text-align: center; line-height: 1.8; padding: 30px 0 0 0;  }



/* PageC 內容設定*/
section#PageC, section#PageE01 { 
    background: #5ca4b7; color:#FFF;  
    background: -webkit-linear-gradient(top,rgba(92,164,183,0.9),rgba(92,164,183,1),rgba(92,164,183,1),rgba(92,164,183,0.75)), url('../images/bg2.jpg') #5ca4b7 fixed ;
    background: -moz-linear-gradient(top,rgba(92,164,183,0.9),rgba(92,164,183,1),rgba(92,164,183,1),rgba(92,164,183,0.75)), url('../images/bg2.jpg') #5ca4b7 fixed ;
    background: -ms-linear-gradient(top,rgba(92,164,183,0.9),rgba(92,164,183,1),rgba(92,164,183,1),rgba(92,164,183,0.75)), url('../images/bg2.jpg') #5ca4b7 fixed ;
    background-size: 100%;
    background-position: center;
}
section#PageC h1, section#PageE01 h1 { text-shadow: rgba(0,0,0,0.3) 0 2px 1px; }
section#PageC p, section#PageE01 p { text-align: center; }




/* PageD 內容設定*/
section#PageD div.grid { list-style: none; padding: 0;  }
section#PageD div.grid > div.grid-item { 
    width: 23%; 
    margin: 7px 1%; 
    float: left; 
    position: relative; 
    border: solid 3px #d8e6ea; 
    padding: 12px; 
    border-radius: 10px; 
    background: #FFF;  
    background-repeat: no-repeat;
    background-position: 5px 5px;
    opacity: 0.6;
}

section#PageD div.grid > div.grid-item:nth-child(1) { background-image: url('../images/P_01.png'); background-size: 45px;  }
section#PageD div.grid > div.grid-item:nth-child(2) { background-image: url('../images/P_02.png'); background-size: 45px;  }
section#PageD div.grid > div.grid-item:nth-child(3) { background-image: url('../images/P_03.png'); background-size: 45px;  }
section#PageD div.grid > div.grid-item:nth-child(4) { background-image: url('../images/P_04.png'); background-size: 45px;  }
section#PageD div.grid > div.grid-item:nth-child(5) { background-image: url('../images/P_05.png'); background-size: 45px;  }
section#PageD div.grid > div.grid-item:nth-child(6) { background-image: url('../images/P_06.png'); background-size: 45px;  }
section#PageD div.grid > div.grid-item:nth-child(7) { background-image: url('../images/P_07.png'); background-size: 45px;  }
section#PageD div.grid > div.grid-item:nth-child(8) { background-image: url('../images/P_08.png'); background-size: 45px;  }
section#PageD div.grid > div.grid-item:nth-child(9) { background-image: url('../images/P_09.png'); background-size: 45px;  }
section#PageD div.grid > div.grid-item:nth-child(10) { background-image: url('../images/P_10.png'); background-size: 45px;  }
section#PageD div.grid > div.grid-item:nth-child(11) { background-image: url('../images/P_11.png'); background-size: 45px;  }
section#PageD div.grid > div.grid-item:nth-child(12) { background-image: url('../images/P_12.png'); background-size: 45px;  }
section#PageD div.grid > div.grid-item:nth-child(13) { background-image: url('../images/P_13.png'); background-size: 45px; }
section#PageD div.grid > div.grid-item:nth-child(14) { background-image: url('../images/P_14.png'); background-size: 45px;  }
section#PageD div.grid > div.grid-item:nth-child(15) { background-image: url('../images/P_05.png'); background-size: 45px;  }
section#PageD div.grid > div.grid-item:nth-child(16) { background-image: url('../images/P_16.png'); background-size: 45px;  }




section#PageD div.grid > div.grid-item:hover { border: solid 3px #a7cfd8; opacity: 1; transition: 0.2s; }
section#PageD div.grid > div.grid-item > div.IMG { display: none }

section#PageD div.grid > div.grid-item > p { width: 78%; font-size: 16px; padding: 0; float: right; text-align: left; font-weight: 600;  }


section#PageD div.grid > div.moreContent {}
section#PageD div.Content { height: 250px; overflow: hidden; position: relative; }
section#PageD div.Content > div.Mask { 
    background: -webkit-linear-gradient(top,rgba(249,247,242,0),rgba(249,247,242,0.6),rgba(249,247,242,1));
    background: -moz-linear-gradient(top,rgba(249,247,242,0),rgba(249,247,242,0.6),rgba(249,247,242,1));
    background: -ms-linear-gradient(top,rgba(249,247,242,0),rgba(249,247,242,0.6),rgba(249,247,242,1));
    position: absolute; bottom: 0; width: 100%;
    height: 150px;
}
section#PageD > div.BTN { 
    clear: both; 
    margin: 10px auto 10px auto; 
    width: 200px; height: 50px; 
    line-height: 50px; 
    text-align: center; 
    border-radius: 8px; 
    background: #5ca4b7;
    font-size: 20px;
    color: #FFF;
    position: relative;

    animation-name: Testimony_BTN; animation-duration: 1s; animation-iteration-count: infinite;
}

section#PageD > div.BTN:hover { cursor: pointer; background: #49586f; transition: 0.2s; }
section#PageD > div.BTN.B-close { display: none; }

/* PageE 內容設定*/
section#PageE01 > h1 { border: solid 3px #FFF; width: 560px; margin: 15px auto 0 auto; border-radius: 8px; overflow: hidden; transition: 0.2s; }
section#PageE01 > h1 a { display: block; text-shadow: none; padding: 10px 0; transition: 0.2s; }
section#PageE01 > h1 a:hover { background: #FC0; color: #000; transition: 0.2s; }
section#PageE01 > h1:hover { border: transparent; transition: 0.2s; }

section#PageE01 a { color:#FFF; }
section#PageE02 ul { list-style: none; }
section#PageE02 ul > li { width: 23%; float: left; margin: 10px 1%; text-align: center; height: 180px; }
section#PageE02 ul > li > div.IMG { 
    width: 120px; height: 120px; 
    background: #EFEFED; 
    border-radius: 10px; 
    margin: 0 auto 10px auto; 
    background-size: 100%; 
    background-repeat: no-repeat; 
    background-position: center; 
    border: solid 2px #FFF;
}
section#PageE02 ul > li > div.IMG.IM1 { background-image: url('../images/target_01.png'); background-color: #e1efe3; }
section#PageE02 ul > li > div.IMG.IM2 { background-image: url('../images/target_02.png'); background-color: #f4eadf; }
section#PageE02 ul > li > div.IMG.IM3 { background-image: url('../images/target_03.png'); background-color: #e1ecef; }
section#PageE02 ul > li > div.IMG.IM4 { background-image: url('../images/target_04.png'); background-color: #e6e1ef; }
section#PageE02 ul > li > div.IMG.IM5 { background-image: url('../images/target_05.png'); background-color: #ecefe1; }
section#PageE02 ul > li > div.IMG.IM6 { background-image: url('../images/target_06.png'); background-color: #EFEFED; }
section#PageE02 ul > li > div.IMG.IM7 { background-image: url('../images/target_07.png'); background-color: #efe1e1; }
section#PageE02 ul > li > div.IMG.IM8 { background-image: url('../images/target_08.png'); background-color: #efefda; }
section#PageE02 ul > li > p { text-align: center; padding: 5px 15%; font-weight: 600; }
.E01_btn{width: 320px;margin: auto;}

/* PageF 內容設定*/

section#PageF { padding-bottom: 0; padding-top: 0; }
section#PageF > div.BOX { width: 48%; border: solid 4px #EFEFED;  }
section#PageF > div.BOX > h2 { padding: 8px 0 10px 0; margin: 0 0 10px 0; border-bottom: solid 4px #FC0;  }
section#PageF > div.BOX ul { padding: 0 25px;  }
section#PageF > div.BOX ul > li { text-align: left; padding: 5px 0; margin: 15px 0; border-bottom: dashed 1px #CCC; line-height: 1.5 }
section#PageF > div.BOX ul > li:last-child { border-bottom: 0; }
section#PageF > div.BOX ul > li > span { font-weight: 600; color:#C30; }

section#PageF > div.PDU-BOX { 
    clear: both; 
    background: url('../images/PDU_IMG.jpg') #FFF  no-repeat; 
    background-position: 10px center; 
    background-size: 50px; 
    padding: 15px 15px 15px 70px; 
    border-radius: 8px;  
    border: solid 2px #EFEFED;
}
section#PageF > div.PDU-BOX p { padding: 0; margin: 0; }


section#PageG { padding-top: 15px; }
section#cpyright {padding: 0;} 




.Copyright{ font-size: 12px; color: #666;text-align: center;}

/* CPT 內容設定*/
div#CPT { width: 880px; margin: auto; padding-top: 25px }
div#CPT div.BTN { 
    margin: 10px 1%; 
    float: left;
    background:#5ca4b7; 
    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: #49586f; color: #FFF; transition: 0.20s linear; }



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


div#roadmap div.modal-body img {
    width: 100%;
}
@media screen and (min-width: 768px){
.modal-dialog {
    right: auto;
    left: 50%;
    width: 100%;
    padding-top: 30px;
    padding-bottom: 30px;
    z-index: 999999999;
}
}
/*聯絡資訊設定*/

footer div.InfoArea { background: #49586f; }





/* RWD Setting */

 

    @media (max-width: 1200px) {
        article { width: 800px;  }
        section { padding: 40px 40px;  }
        section h1 { font-size: 24px !important }
        section h2 { font-size: 22px !important }
        section p { font-size: 14px !important }
        section ul li { font-size: 14px !important }

        /* 主視覺 */
        header#Visual { height: 400px;}
        header#Visual > div.Content { width: 400px; margin: auto; }
        header#Visual div.CircleLight { display: none  }
        section#PageA > div.BOX { height: 450px; }
        section#PageD div.grid > div.grid-item { width: 31.3333%; }
        section#PageF > div.BOX ul { padding: 0 15px 0 25px;  }

        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 h1 { font-size: 20px !important }
        section h2 { font-size: 18px !important }
        section h3 { font-size: 15px !important }
        section ul li { font-size: 12px !important }
        section p { font-size: 12px !important }
        section div.BOX { margin: 10px 0 !important; clear: both !important; float: none !important; width: 100% !important; }
        /* 主視覺 */
        header#Visual { height: 400px; background-size: cover;}
        header#Visual > div.Content { width: 90%; margin: auto; }


        section#PageA > div.BOX { height: auto;  }

        section#PageD div.grid > div.grid-item { width: 48%; border: solid 2px #d8e6ea; border-radius: 5px; background-position: 5px 5px; background-size: 35px !important; opacity: 1; margin: 3px 1%; }


        /* PageE 內容設定*/
        section#PageE01 > h1 { border: solid 2px #FFF; width: 90%; border-radius: 4px; }
        section#PageE02 ul > li { width: 48%; margin: 10px 1%; height: 180px; }
        .E01_btn{width: 270px;margin: auto;}
      
    }

    /*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; }
       

    }