﻿@charset "utf-8";
/*CSS Info ======================================================================
File Name: global.css
Editor: Shellsirius
CreateDate: 2018/11/16
Version: 1.0
---------------------------
【 Table of Contents 】
	Materialize架構
=================================================================================*/

/*===============================================================================
                               Browser-CSS Reset
=================================================================================*/
@import "Reset.css";

/*===============================================================================
                                     全域設定
=================================================================================*/
body {
    font:16px/1 "\5FAE\8EDF\6B63\9ED1\9AD4", Arial, Helvetica, clean, Helmet, Freesans, sans-serif;
}

em {
    font-style: italic;
}

#Header {
    position: relative;
}

    #Header #NaviBar {
        position: absolute;
        top: 0;
        padding-top: 2rem;
        width: 100%;
    }

        #Header #NaviBar a {
            margin: 0 2rem;
            color: #333;
            float: right;
        }

            #Header #NaviBar a:hover {
                color: #0B6DC2;
                font-weight: bold;
            }

    #Header #banner {
        width: 800px;
        height: 300px;
        background-image: url(../Images/banner.png);
        background-size: 100% auto;
        background-repeat: no-repeat;
        background-position: center center;
        position: relative;
        margin: 0 auto;
    } 

        #Header #banner div {
            height: 80px;
            width: 400px;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -200px;
            margin-top: -40px;
            text-align: left;
            padding-left: 80px;
        }

            #Header #banner div p, #Header #banner div h1 {

            }

            #Header #banner div p {
                font-size: 2.25rem;
                font-weight: bold;
                color: #0B6DC2;
                text-align: left;
                letter-spacing: 2px;
            }

            #Header #banner div h1 {
                font-size: 3.5rem;
                color: #0B6DC2;
                text-align: left;
            }
         
#MainWrap {
}

@media (max-width: 413px) {
    #Footer p {
        text-align: center;
        font-size: 0.8rem;
        line-height: 1.5rem;
    }

    #Footer a {
        display: inline-block;
        margin: 1rem 0rem;
        padding: 0 0.5rem;
        color: #333;
        font-size: 0.8rem;
    }
}

#Footer {
    /*height: 400px;*/
    background-color: #FFF;
    background-image: url(../Images/Footer.png);
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: center bottom;
    text-align: center;
    padding-top: 200px;
}

    #Footer h5 {
        padding: 2rem 0;
        font-size: 1.25rem;
        font-weight: bold;
        color: #0B6DC2;
    }

    #Footer  p {
        text-align: center;
        font-size: 1rem;
        line-height: 1.5rem;
    }

         #Footer a {
             display: inline-block;
             margin: 1rem 0.5rem;
             padding-left: 1rem;
             color: #333;
         }

            #Footer a+a {
                border-left: 1px solid #333;
            }

                #Footer a:hover {
                    text-decoration: underline;
                    color: #0B6DC2;
                    font-weight: bold;
                }

.divider {
    height: 2px;
    background-color: #EFDCED;
}

.mar-bot {
    margin-bottom: 3rem;
}

p {
    line-height: 1.5rem;
}

/*===============================================================================
                                   RWD 設定
=================================================================================*/

@media only screen and (max-width: 960px) {
    #Header #banner {
        width: 100%;
    } 

    #Footer {
        background-size: auto 100%;
    }
}