/* css variable */
:root{
    --menuHeight: 100px;
    --menuLogoHeight: 50px;
}

*{
    /* 固定box寬度，即margin & padding後的寬度為設定的寬度 */
    box-sizing: border-box;
    /* 外距預設為0 */
    margin: 0;
    /* 內距預設為0 */
    padding: 0;
    /* 預設字體 */
    font-family: "微軟正黑體";
}
body{
    /* 背景圖 */
    background: url(../images/bodyBackground.jpg) no-repeat center;
    background-size: cover;
}
/* 跳轉標籤設定 */
a{
    /* 去除a標籤的底線 */
    text-decoration: none;
}
/* 段落標籤設定 */
p, pre{
    /* 預設字型大小與粗度 */
    font-size:20px;
    font-weight: 700;
}
/* 分隔線設定 */
.line{
    display: block;
    width: 100%;
    height: 2px;
    /* 透明-不透-透明 */
    background-image: linear-gradient(to right, rgba(0,100,127,0), rgba(0,100,127,0.75), rgba(0,100,127,0.75), rgba(0,100,127,0.75), rgba(0,100,127,0));
}
/* menu part */
#menubar{
    width: 100%;
    height: var(--menuHeight);
    min-width: 1000px;
    position: fixed;    /* 位置固定 */
    background-color: rgba(240,240,240,0.75);
    z-index: 100;   /* 層級設定 數字越大越上層 */
}
/* menu box-left */
#menu-left{
    float: left;
    min-width: 400px;
    width: 400px;
    min-height: 100px;
    height: 100px;
    background: linear-gradient(to left top,  rgba(0, 150, 210, 0.8),  #fff);
    border-top-right-radius: 90px;
    border-bottom-right-radius: 90px;
}
#menu-left #logo{
    float: left;
    height: var(--menuLogoHeight);
    width: 55px;
    /* 上右下左 */
    margin: calc(calc(var(--menuHeight) - var(--menuLogoHeight) ) / 2) 10px 0px 20px;
    padding: 5px 0;
}
#menu-left p{
    height: var(--menuHeight);
    line-height: var(--menuHeight); /* 行高, 當只有一行時, 借用此方法垂直置中 */
    font-size: 18px;
    color: black;
}
/* menu box-right */
#menu-right a{
    float: right;
    width: 100px;
    height: var(--menuHeight);
    line-height: var(--menuHeight); /* 行高, 當只有一行時, 借用此方法垂直置中 */
    text-align: center; /* 文字水平置中 */
    color: black;
    margin-right: 15px;
    /* hover切換時間 */
    transition: all .5s;
}
#menu-right:hover a{
    color: #888;
}
#menu-right #menuItem1:hover a,
#menu-right #menuItem2:hover a,
#menu-right #menuItem3:hover a,
#menu-right #menuItem4:hover a,
#menu-right #menuItem5:hover a{
    color: black;
}
#menubar .menuLine{
    display: none;  /* 設定不顯示 */
    border: 0;
    width: 100%;
    height: 7px;
    background-color: rgb(255, 120, 0);
    border-radius: 30px;
}
#menu-right a:hover .menuLine,
#menu-right li:hover .menuLine{
    display: block; /* hover時, 設定block屬性即以block顯示 */
    position: relative; /* 相對位置, 以原位置為中心, 可透過top right left bottom位移 */
    bottom:7px;
}

/* context part */
#headerImg{
    width: 100%;
    height: 500px;
    min-width: 1000px;
    margin: 0 auto;
}
.container{
    width: 55%;
    margin: 0 auto;
    min-width: 1000px;
    background-color: rgba(170, 170, 170, 0.8);
}

/*  footer part  */
footer pre{
    background-color: rgba(14, 42, 70, 0.9);
    text-align: center;
    padding: 30px;
    color:#ddd;
    min-width: 1000px;
}
#sendMail{
    cursor: pointer;    /* 鼠標指向時, 鼠標圖示改為手指 */
}
#map{
    color: lightseagreen;
}

/* button: to Top */
#backTop{
    width: 50px;
    height: 50px;
    position: fixed;
    right: 50px;
    bottom: 50px;
    border-style: none;
     color: white;
     /* 消除點擊後的藍色外框 */
     outline: none;
    /* 6邊形純色 */
     /* clip-path: polygon(75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%, 25% 0); */
     /* background-color: rgba(0,100,127,1); */
     /* 圓形背景圖 */
     border-radius: 180px;
     background: url("../images/backTopImg_small.jpg") no-repeat center;
}