


body { 
    background: #EFEFED ;
    margin: 0 0 0 0;

}



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: 1360px;
    margin: 0 auto 0 auto; 
    padding: 0;
    clear: both;  
    box-shadow: rgba(84,72,62,0.2) 0 0 8px 0;
    background: #FFF;
    color: #333;
}

header, section { width: 100%; margin: 0; clear: both; }
section { min-height: 100px; padding: 50px 80px; clear: both; display: inline-block; }

section div.BOX { width: 48%; margin: 15px 1%; float: left; padding: 0; text-align: center; overflow: hidden; border-radius: 2px; }

/* 主視覺 */

header#Visual { 
    background: -webkit-linear-gradient(top,rgba(255,255,255,0),rgba(255,255,255,0),rgba(255,255,255,0),rgba(255,255,255,1)),url('../images/Visual.jpg') ;
    background: -moz-linear-gradient(top,rgba(255,255,255,0),rgba(255,255,255,0),rgba(255,255,255,0),rgba(255,255,255,1)),url('../images/Visual.jpg') ;
    background: -ms-linear-gradient(top,rgba(255,255,255,0),rgba(255,255,255,0),rgba(255,255,255,0),rgba(255,255,255,1)),url('../images/Visual.jpg') ;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
    height: 700px;
}
header#Visual > img { float: left; width: 60%; position: relative; top: 40%; left: 20%; }
header#Visual > div.TOPIC { float: right; width: 35%; margin: 100px 5% 0 0; }
header#Visual > div.TOPIC > h1 { text-align: left; }
header#Visual > div.TOPIC > p { font-weight: 600; }


/* PageA 內容設定*/
section#PageA { 
    background: url('../images/PageA-Graphic01-01.svg'); 
    background-size: 800px; 
    background-position: center 150px; 
    background-repeat: no-repeat; 
    min-height: 450px;
    padding-top: 0;
}
section#PageA > img { width: 700px; }



section#PageA > div.Content { width: 350px; margin: 30px 0 0 0; }
section#PageA > div.BOX-left { float: left; }
section#PageA > div.BOX-right { float: right; }
section#PageA > div.Content > div.BOX { 
    width: 100%; 
    background: rgba(59,70,76,0.9); 
    color: #FFF; 
    border-radius: 10px; 
    padding: 15px 5px; 
    overflow: hidden; 
    clear: both; 
    float: initial; 
    margin: 0;
    
}
section#PageA > div.Content > div.BOX:hover { 
    box-shadow: rgba(0,0,0,0.2) 0 0 20px 0; 
    background: rgba(66,105,150,0.9);
    transition: 0.2s; 
}
section#PageA > div.Content > div.TOP { margin: 0 0 180px 0; }

section#PageA > div.Content ul { list-style: square; padding: 0 10px 0 20px; width: 90%; margin: auto; }
section#PageA > div.Content ul li { text-align: left; border-bottom: dashed 1px rgba(255,255,255,0.4); padding: 8px 0; }
section#PageA > div.Content ul li a { color: #FFF; font-size: 15px; }
section#PageA > div.Content ul li a:hover { color: #fffa3b; }
section#PageA > div.Content ul li.EndLine { border-bottom: none; }



/* PageB 內容設定*/

section#PageB { padding-bottom: 20px }

section#PageB > div.BOX > h3 { background: #b53604; color: #FFF; font-size: 20px; padding: 8px 0; border-radius: 4px; }
section#PageB > div.BOX > p { text-align: left; }




/* PageC 內容設定 */

section#PageC { padding-top: 10px; text-align: center; }
section#PageC > img { width: 600px; padding: 20px 0; }
section#PageC > h2 { line-height: 1.5; padding-bottom: 25px; }
section#PageC > h3 { width: 400px; background: none; color: #b53604; margin: auto; padding: 10px 0; border-radius: 5px; font-size: 22px; }

/* PageD 內容設定*/

section#PageD { padding-top: 0; }



/* CPT 內容設定*/

section#PageD > div#CPT { width: 700px; margin: auto; }
section#PageD > div#CPT > div.BTN-CPT { 
    width: 48%; margin: 10px 1%; 
    float: left; 
    text-align: center;
    font-size: 18px;
    background: #d11e1e; 
    height: 55px; line-height: 55px;
    border-radius: 5px;
}
section#PageD > div#CPT > div.BTN-CPT:hover { background: #a02828; transition: 0.3s; }
section#PageD > div#CPT > div.BTN-CPT a { color: #FFF; }







/* RWD Setting */

    @media (max-width: 1440px) {
        article { width: 100%;  }     
    }

    @media (max-width: 1400px) {
        article { width: 1280px;  }

        section#PageA { background-size: 650px; background-position: center 170px; min-height: 450px; }
             
    }
    
    @media (max-width: 1280px) {
        article { width: 100%;  }
    }

    @media (max-width: 1200px) {
        article { width: 800px;  }
        section { padding: 40px 40px;  }
        section h1 { font-size: 2em; }
        header#Visual { background-position: top center; height: 500px; background-size: 100%; }
        header#Visual > img { width: 80%; top: 50%; left: 10%; }
        header#Visual > div.TOPIC { width: 35%; margin: -110px 5% 0 0; }
        header#Visual > div.TOPIC > h1 { font-size: 1.8em; }
        header#Visual > div.TOPIC > p { font-size: 14px; }

        section#PageA { background-size: 650px; background-position: center 80px; }
        section#PageA > div.Content { width: 48%; margin: 300px 1% 0 1%; }
        section#PageA > div.BOX-right { float: left; }
        section#PageA > div.Content > div.TOP { margin: 0 0 10px 0; }

        section#PageB > div.BOX { clear: both; margin: 10px 0; width: 100%; }
        section#PageB > div.BOX > h3 { font-size: 20px; }


        section#PageC > h2 { font-size: 1.4em; }
        section#PageC > h3 { width: 350px; font-size: 18px; }

                


    }

    @media (max-width: 800px) {
        article { width: 100%;  }

        section#PageD > div#CPT { width: 100%; margin: auto; }
        section#PageD > div#CPT > div.BTN-CPT { width: 100%; margin: 10px 0; float: initial; font-size: 16px; }

    }

    @media (max-width: 780px) {
        article { width: 395px;  }
        section { padding: 20px 15px;  }
        section p { font-size: 12px !important; }
        ul li { font-size: 12px !important }
        section div.BOX { width: 100%; margin: 15px 0; float: initial; }

        header#Visual { background-size: 200%; background-position: top center; height: 620px; }
        header#Visual > img { float: initial; clear: both; width: 95%; position: initial; top: auto; left: auto; margin: 300px 0 0 0; }
        header#Visual > div.TOPIC { float: initial; width: 100%; margin: 10px auto 0 auto; background: #172027; color: #FFF; padding: 10px 20px; }
        header#Visual > div.TOPIC > h1 { text-align: left; color: #FC0; }


        section#PageA { background-size: 90%; background-position: center 80px; }
        section#PageA > div.BOX-left { padding-top: 180px; }
        section#PageA > div.Content { width: 100%; margin:  0 0 10px 0; clear: both; }
        section#PageA > div.Content > div.TOP { margin: 0 0 10px 0; }

        section#PageB > div.BOX > h3 { font-size: 14px; }

        section#PageC > img { width: 100%; padding: 0px 0; }
        section#PageC > h2 { font-size: 12px; }
        section#PageC > h3 { width: 300px; font-size: 16px; }

      
    }

    /*iPhone 6 */
    @media (max-width: 395px) {
        article { width: 100%;  }
    }








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; }



/*聯絡資訊設定*/

footer div.InfoArea { background: #252930; }

