html, body { margin: 0;  }

body { 
    background: -webkit-linear-gradient(top,#BAD3DD,#EFEFED) no-repeat;
    background: -moz-linear-gradient(top,#BAD3DD,#EFEFED) no-repeat;
    background: -ms-linear-gradient(top,#BAD3DD,#EFEFED) no-repeat;
    margin: 0 0 0 0;
    background-size: cover;
    height: 100%;
}


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: 800px;
    margin: 0 auto 0 auto; 
    padding: 0;
    clear: both;  
    background: #FFF;
    box-shadow: rgba(3,3,3,0.1) 0 0 10px 0;
    color: #000;
    overflow: hidden;
}

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; background: #FFF; padding: 15px; text-align: center; overflow: hidden; border-radius: 8px; }

section hr { border: solid 2px rgba(119,150,158,0.2); }

section table { width: 100%;  }
section table tr {  }
section table td { padding: 10px; }
section table td > p { margin: 0 0 8px 0; padding: 0; color: #C33; font-weight: 600; }
section table td > ul { padding: 0 0 0 25px; }
section table td > p, section table td > ul > li { font-size: 14px; }

section table#Rote tr:nth-child(even) { border-top: solid 2px #EFEFED; border-bottom: solid 2px #EFEFED; }
section table#Rote td:nth-child(odd) { background: #F9F8F2 }

section table#Event tr:nth-child(even) { background: #FFF9DE;}
section table#Event tr:nth-child(odd) { background: #FFE783;}
section table#Event td:nth-child(odd) { font-weight: 600; color: #383D3F; width: 120px; text-align: right; }
section table#Event td { font-size: 15px; font-weight: 600; padding: 15px; }

section ul { padding: 10px 0 15px 30px; }
section ul > li { font-size: 14px; margin: 0 0 5px 0 }



div.Mobile { display: none; }


/* 主視覺 */

header#Visual { 
    background: url('../images/BG1-01.png') #EAF4F4 no-repeat;
    background-position: center 10px ;
    background-size: 90%;
    position: relative; 
    height: 400px;
}
header#Visual > img { position: absolute; right: 8px; top: 10px; width: 120px; }
header#Visual > div.Content { 
    width: 100%; 
    background-color: rgba(25,150,207,0.8); 
    color: #FFF; 
    position: absolute; 
    bottom: 0px; 
    padding: 15px 0;
}
header#Visual > div.Content ul { padding: 0; list-style: none; width: 400px; margin: 0 auto; }
header#Visual > div.Content ul > li { float: left; width: 50%; text-align: center; margin: 10px 0; font-size: 20px;  padding: 5px 0; text-shadow: rgba(0,0,0,0.5) 0 1px 1px;  }
header#Visual > div.Content ul > li:first-child { background-color: rgba(255,255,255,0.2); border-top-left-radius: 15px; border-bottom-left-radius: 15px; }
header#Visual > div.Content ul > li:last-child { background-color: rgba(0,0,0,0.2); border-top-right-radius: 15px; border-bottom-right-radius: 15px; }
header#Visual > div.Content h1, header#Visual > div.Content h2 { margin: 0; padding: 0; clear: both;}
header#Visual > div.Content h2 {
    animation-name: TOPIC_TXT; 
    animation-duration: 1s; 
    animation-iteration-count: infinite;
}

/*MOV*/

@keyframes TOPIC_TXT {
    0%  { color: #FFF; }
    50%  { color: #FFE783;  }
    100%  { color: #FFF; }
}

section > div#Middle h3 { color: #423E38; margin: 35px auto 15px auto; padding: 10px 0; border-radius: 6px; letter-spacing: 1px; font-size: 18px; text-align: left; }

section > div#Bottom h3 { 
    line-height: 1.5; 
    margin: 35px 0 15px 0;
    animation-name: Bottom_TXT; 
    animation-duration: 1.3s; 
    animation-iteration-count: infinite;
}


    /*MOV*/

    @keyframes Bottom_TXT {
        0%  { color: #000; }
        70%  { color: #FF5B00;  }
        100%  { color: #000; }
    }


section > div#Bottom p { text-align: center; font-weight: 600; color: #BC5500;  }
section > div#Bottom ul > li:last-child { font-weight: 600; color: #275DAA }


/* CPT 內容設定*/
div#CPT { width: 300px; margin: auto; padding-top: 25px }
div#CPT div.BTN { 
    margin: 10px 0; 
    background:#1996CF; 
    color: #FFF; 
    text-align: center; 
    font-size: 16px; 
    padding: 10px 10px; 
    border-radius: 5px;
    transition: 0.20s linear;
    width: 100%;
}
div#CPT div.BTN a { display: block; color: #FFF; }
div#CPT div.BTN:hover { background: #2ABEF2; color: #FFF; transition: 0.20s linear; }



/*聯絡資訊設定*/
footer div.InfoArea { background: #434C4F; }
footer .MainContent { width: 85%; }
footer .MainContent div.ContactInfo { width: 100%; margin: 0; padding: 0; }
footer .MainContent div.ContactInfo div.location { width: 50%; }
footer .MainContent div.ContactInfo div.location ul { padding: 0 10px 0 0; }
footer .MainContent div.ContactInfo div.location ul li { font-size: 12px; }
footer div.Copyright p { font-size: 12px;  }




/* RWD Setting */

    @media (max-width: 800px) {
        article { width: 600px;  }
        section p { font-size: 14px !important }
        /* 主視覺 */
        header#Visual { height: 350px; }
        header#Visual > img { width: 100px; }
        header#Visual > div.Content h1 { font-size: 2.3em; line-height: 1; }
        header#Visual > div.Content h2 { font-size: 2em; }
        header#Visual > div.Content ul { width: 350px; }
        header#Visual > div.Content ul > li { margin: 10px 0; font-size: 18px; }

    }

    @media (max-width: 599px) {
        article { width: 395px;  }
        section { padding: 20px 20px; clear: both; display: inline-block; }
        section p { font-size: 12px !important }
        section table th { font-size: 12px !important ; }
        section table th:first-child { width: 100px; }
        section table td, section table td > ul li { font-size: 12px; }
        /* 主視覺 */
        header#Visual { height: 250px; }
        header#Visual > img { width: 70px; }
        header#Visual > div.Content h1 { font-size: 1.6em; line-height: 1; }
        header#Visual > div.Content h2 { font-size: 1.4em; }
        header#Visual > div.Content ul { width: 250px; }
        header#Visual > div.Content ul > li { margin: 10px 0; font-size: 15px; }

        section > div#Middle h3 { padding: 8px 0; font-size: 16px; }
        section > div#Bottom ul > li { font-size: 12px; }
    }

    /*iPhone 6 */
    @media (max-width: 395px) {
        article { width: 100%;  }
    }



    /*iPhone 5 */
    @media (max-width: 320px) {


       

    }




