@charset "utf-8";
/*CSS Info ======================================================================
File Name: global.css
Creator: Sharon
CreateDate:2017/10/05
Editer: Sharon 
LastEditDate:2018/04/03
Version: 1.1
---------------------------
【 Table of Contents 】
	DIV XHTML頁面
	Free Style
	橫向Menu，頁面置中
【 Responsive Web Design 】
    寬度1024以上
=================================================================================*/

/*===============================================================================
                               Browser-CSS Reset
=================================================================================*/
@import "Reset.css";

/*===============================================================================
                                     全域設定
=================================================================================*/
body {
    font-family: "\5FAE\8EDF\6B63\9ED1\9AD4", Arial;
    background: #f7f7f7;
}

#Wrap {}

/*-----------------Header-----------------*/
#Header {
    height: 50px;
    position: relative;
    padding-top: 10px;
    padding-bottom: 10px;
    background-color: #FFF;
}

    #Header .MyLogo {
        float: left;
        width: 50px;
        height: 50px;
        background-image: url(../images/epa.png);
        background-size: 30px 30px;
        background-repeat: no-repeat;
        background-position: center center;
    }

    #Header h1 {
        display: block;
        float: left;
        height: 3rem;
        line-height: 3rem;
        font-size: 1.75em;
        color: #333;
    }

    #Header .user {
        float: right;
        font-size: 1.15em;
        padding-top: 20px;
        height: 30px;
        line-height: 30px;
        color: #444E50;
    }

        #Header .user .username {
            padding-right: 1em;
            padding-left: 1em;
            border-right: 2px solid #444E50;
        }

        #Header .user a {
            color: #444E50;
            font-size: 1em;
            padding-right: 1em;
            padding-left: 1em;
        }

.wrapper {
	width:1560px;
	position:relative;
	margin:0 auto;
	color:#3f3f3f;
}

    @media screen and (min-width: 1440px) and (max-width: 1600px) {
        .wrapper {
            width: 1400px;
        }
    }

    @media screen and (min-width: 1280px) and (max-width: 1439px) {
        .wrapper {
            width: 1200px;
        }
    }

    @media screen and (min-width: 1024px) and (max-width: 1279px) {
        .wrapper {
            width: 960px;
        }
    }

    @media screen and (min-width: 768px) and (max-width: 1023px) {
        .wrapper {
            width: 730px;
        }
    }

    @media screen and (max-width: 767px) {
        .wrapper {
            width: 95%;
            margin: 0 auto;
        }
    }

i {
    margin-right: 0.25em;
}

/*------ Menu ------*/

#mainMenu {
	height: 65px;
	font-size: 1.25em;
	background-color: #ffb435;
    box-shadow: 1px 1px 3px #888;
    z-index: 10000;
}

/* 第一層選單 */
ul#Navigation {
    height: 65px;
}

ul#Navigation li {
	float:left;
	line-height: 65px;
}

    ul#Navigation li:hover {
        background-color: #FFF;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        margin-top: 10px;
        height: 55px;
        line-height: 55px;
    }

    ul#Navigation li a {
        color: #FFF;
        font-weight: bold;
        display: block;
        padding-left: 30px;
        padding-right: 30px;
    }

        ul#Navigation li:hover a {
            color: #795547;
            font-weight: bold;
        }

/* 第二層選單 */
ul#Navigation li ul.secondNav {
    display: none;
    position: absolute;
    z-index: 10000;
}

    ul#Navigation li:hover ul.secondNav {
        display: block;
    }

    ul#Navigation li ul.secondNav li {
        display: block;
        float: none;
        min-width: 180px;
        border-left: 10px solid #ffb435;
        background-color: #FFF;
        height: 3.75rem;
        line-height: 3.75rem;
        margin-top: 0.25rem;
        box-shadow: 1px 1px 3px rgba(0,0,0,.3); 
    }

        ul#Navigation li ul.secondNav li:hover {
            border-radius: 0;
            margin-top: 0.25rem;
            height: 3.75rem;
            line-height: 3.75rem;
            border-left: 10px solid #6d4a2c;
        }

        ul#Navigation li ul.secondNav li a {
            color: #555;
            font-weight: normal;
        }

            ul#Navigation li ul.secondNav li:hover a {
                color: #333;
                font-weight: bold;
            }

/*-----------------Content-----------------*/
#Content {
    font-family:"微軟正黑體",Arial;
}
	
#Main {  

}

/*------------------Footer------------------*/
#Footer {
	background-color: #5f5551;
	padding: 2rem 0;
}

    #Footer div.wrapper {
        width: 900px;
    }

    #Footer div.wrapper div {
	    width: 50%;
        float: left;
        padding: 0.5em 1em;
        -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
        -moz-box-sizing: border-box;    /* Firefox, other Gecko */
        box-sizing: border-box;         /* Opera/IE 8+ */
    }

        #Footer div.wrapper div.MyLogo {
            float: left;
            width: 3rem;
            height: 3rem;
            background-image: url(../images/epa.png);
            background-size: 2rem auto;
            background-repeat: no-repeat;
            background-position: center center;
        }

        #Footer h5 {
            line-height: 3rem;
            color: #FFF;
            font-weight: bold;
        }

        #Footer p {
            color: #CCC;
            line-height: 2rem;
        }

    @media screen and (max-width: 1023px) {
        #Footer div.wrapper {
            width: 80%;
        }

            #Footer div.wrapper div {
                width: 100%;
            }
    }
/*===============================================================================
                         General Setting
=================================================================================*/
.mappath {
	float:right;
}

.Clear{
	clear:both;
}

.Dispear{
	display:none;
}

.Show{
	display:block;
}
	
/*-----------------文字顏色標註設定-----------------*/
.Note{	/*備註 灰字*/
	font-size: small;
	color: #666666;
}

.Alert{	/*紅*/
	color: #CC0000;
}

.Alert2{ /*桃紅*/
	color: #FF3366;
}

.Near{	/*橘*/
	color: #FF9933;
}

span.alertMust {
    display: inline-block;
    width: 1.5rem;
    text-align: center;
    color: #fc2d2d;
}

/*-----------------文字格式設定-----------------*/
.smallWords{
	font-size: small;	
}

.AddHeight{
	line-height: 1.5em;
}

/*-----------------文字靠齊設定-----------------*/
.txtLeft{	
	text-align: left;
}

.txtCeter{
	text-align: center;
}

.txtRight{
	text-align: right;
}

/*-----------------圖片靠齊設定-----------------*/
.imgMiddle{
	vertical-align:middle;
}
/*-----------------指標-----------------*/
.clickable{cursor: pointer;}