body { 
    background: #222628 ;
    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: #41515e;
    color: #FFF;
    overflow: hidden;
}

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; }
section div.BOX > h3 { color: #ffce43; font-size: 20px; }

/* 主視覺 */

header#Visual { 
    background: -webkit-linear-gradient(top,rgba(255,255,255,0),rgba(65,81,94,0),rgba(65,81,94,1)),url('../images/Visual.jpg') ;
    background: -moz-linear-gradient(top,rgba(255,255,255,0),rgba(65,81,94,0),rgba(65,81,94,1)),url('../images/Visual.jpg') ;
    background: -ms-linear-gradient(top,rgba(255,255,255,0),rgba(65,81,94,0),rgba(65,81,94,1)),url('../images/Visual.jpg') ;
    background-size: 100%;
    background-position: center;
    height: 700px;
}
header#Visual > div.TOPIC { width: 40%; margin: 100px 0 0 14%; }
header#Visual > div.TOPIC > img { width: 100%; }
header#Visual > div.TOPIC > div.descp { background: rgba(0,0,0,0.7); color: #FFF; font-weight: 600; border-radius: 10px; padding: 15px 22px; }
header#Visual > div.TOPIC > div.descp > p { color: #ffe340; }
header#Visual > div.TOPIC > div.descp > ul { padding: 0 0 0 20px; }
header#Visual > div.TOPIC > div.descp > ul > li { font-size: 14px; }
header#Visual > div.TOPIC > div.BTN { 
    width: 300px; 
    height: 50px; line-height: 50px; 
    margin: 20px auto; 
    background: #C33; 
    color: #FFF; 
    font-size: 18px; 
    text-align: center; 
    border-radius: 4px;
}
header#Visual > div.TOPIC > div.BTN a { color: #FFF; }

/* PageA 內容設定*/
section#PageA { padding-top: 10px; }
section#PageA > div.BOX { border: solid 2px rgba(255,255,255,0.3); border-radius: 5px; padding: 12px 20px; }
section#PageA > div.BOX > h3 { border-bottom: solid 2px rgba(255,255,255,0.3); padding-bottom: 10px; }
section#PageA > div.BOX > p { text-align: left; padding: 10px 0; }

/* PageB 內容設定*/
section#PageB { 
    background: -webkit-linear-gradient(top,rgba(65,81,94,0),rgba(65,81,94,0.4)),url('../images/PageB-BG.jpg'); 
    background: -moz-linear-gradient(top,rgba(65,81,94,0),rgba(65,81,94,0.4)),url('../images/PageB-BG.jpg'); 
    background: -ms-linear-gradient(top,rgba(65,81,94,0),rgba(65,81,94,0.4)),url('../images/PageB-BG.jpg'); 
    background-size: 100%; 
}
section#PageB > div.BOX > table { width: 100%; border-collapse: separate; border-spacing: 5px; }
section#PageB > div.BOX > table tr td { font-size: 15px; padding: 8px; border-radius: 4px; }
section#PageB > div.BOX > table tr td > a { color: #FFF; }
section#PageB > div.BOX > table tr td.ClassID { width: 100px; background: #a02828;  }
section#PageB > div.BOX > table tr td.ClassName { text-align: left; background: rgba(0,0,0,0.3); }
section#PageB > div.BOX > table tr td.ClassName:hover { background: rgba(0,0,0,0.7);  }

section#PageB > div.BTN { width: 300px; text-align: center; margin: auto; background: #a02828; height: 45px; line-height: 45px; font-size: 18px; border-radius: 4px; }
section#PageB > div.BTN:hover { background: #930c0c; transition: 0.2s; }
section#PageB > div.BTN a { color: #FFF; }

/* PageC 內容設定*/
section#PageC > p { text-align: center; }
section#PageC div.MOV { margin:auto; position:relative; width:100%; margin-top:80px; height:550px; overflow:hidden; }
section#PageC div.Mobile { display: none; }


/* PageD 內容設定*/
section#PageD { padding-top: 0; }



/* CPT 內容設定*/
section#PageD { padding-top: 0px; }
section#PageD > div#CPT { width: 800px; margin: auto; }
section#PageD > div#CPT > div.BTN-CPT { 
    width: 48%; margin: 10px 1%; 
    float: left; 
    text-align: center;
    font-size: 18px;
    background: #aa2b2b; 
    height: 55px; line-height: 55px;
    border-radius: 5px;
}
section#PageD > div#CPT > div.BTN-CPT:hover { background: #d64c3a; 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;  }
     
    }
    
    @media (max-width: 1280px) {
        article { width: 100%;  }
    }

    @media (max-width: 1200px) {
        article { width: 800px;  }
        section { padding: 40px 40px;  }
        header#Visual { background-position: top center; background-repeat: no-repeat; height: 500px; }
        header#Visual > div.TOPIC { width: 52%; margin: 30px 0 0 8%; text-align: center; }
        header#Visual > div.TOPIC > img { width: 80%; }
        header#Visual > div.TOPIC > div.descp > p { font-size: 12px; text-align: left; }
        header#Visual > div.TOPIC > div.descp > ul { padding: 0 0 0 20px; }
        header#Visual > div.TOPIC > div.descp > ul > li { font-size: 12px; text-align: left; }
        header#Visual > div.TOPIC > div.BTN { width: 100%; font-size: 16px; }

        section div.BOX { width: 100%; margin: 15px 0; float: initial; }
        section div.BOX > h3 { color: #ffce43; font-size: 18px; }
        section div.BOX > p { font-size: 13px; }
        section table tr td { font-size: 13px !important; }
        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; }
        section#PageC div.MOV { display: none; }
        section#PageC div.Mobile { display: block; }
        section#PageC div.Mobile > div.CircleBOX { 
            width: 48%; height: 100px; line-height: 100px;
            font-size: 1.7em;
            text-align: center; 
            background: rgba(0,0,0,0.5); 
            overflow: hidden; 
            margin: 10px 1%; 
            border-radius: 12px;
            float: left; 
        }
        section#PageC div.Mobile > h1 { padding-bottom: 15px; font-size: 2.2em; }
        section#PageC div.Mobile > div.BTN { 
            width: 120px; height: 120px; 
            padding-top: 35px; 
            border:solid 4px #FFF; 
            border-radius: 99em; 
            background: #C33; 
            color: #FFF; 
            text-align: center; 
            margin: 15px auto; 
            font-size: 1.3em; 
            box-shadow: rgba(0,0,0,0.2) 0 0 35px 0;
        }
        section#PageC div.Mobile > div.BTN a { color: #FFF; }
        section#PageC div.Mobile > div.BTN:hover { background: #ff6d00; transition: 0.2s; }

    }

    @media (max-width: 800px) {
        article { width: 100%;  }


    }

    @media (max-width: 780px) {
        article { width: 395px;  }
        section { padding: 20px 15px;  }
        section p { font-size: 12px !important; }
        header#Visual { 
            background: url('../images/Visual.jpg')#41515e ;
            background-size: 250%; 
            background-repeat: no-repeat;
            background-position: -500px -100px;
            height: 800px;  
        }
        header#Visual > div.TOPIC { width: 90%; margin: 320px auto 0 auto; text-align: center; }
        header#Visual > div.TOPIC > img { width: 100%; }

        section#PageA div.BOX > h3 { font-size: 18px; line-height: 1.4; padding: 0px 10% 15px 10%; }

        section#PageC div.Mobile > div.CircleBOX { width: 100%; height: 60px; line-height: 60px; font-size: 1.5em; margin: 10px auto; float: initial; }
      
    }

    /*iPhone 6 */
    @media (max-width: 395px) {
        article { width: 100%;  }

        section#PageA div.BOX > h3 { font-size: 18px; line-height: 1.4; padding: 0px 5% 15px 5%; }
    }








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: #222; }