@charset "utf-8";

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none} */
/* 原始處理 */
body {
    font-size: 20px;
    color: #222;
    /* line-height: 20px; */
    font-family: "Heiti TC", "Microsoft JhengHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
    margin: 0px;
    /* background-image:url(images/bg.jpg); */
    /* background-repeat: repeat-x;
	background-position: center top;
	background-attachment: fixed;
	background-color: #fff;
	font-weight: bold; */
}

a {
    outline: none; /* for Firefox */
    hlbr: expression(this.onFocus=this.blur()); /* for IE */
}

    a,
    a:visited {
        color: #03f;
    }

        a:hover {
            color: #c03;
            text-decoration: none;
        }

img {
    border: 0px;
}

form {
    margin: 0px;
}
/* header */
div.header {
    /* color: #176a68; */
    /* width: 844px; */
    margin-right: auto;
    margin-left: auto;
    position: relative;
}

    div.header a,
    div.header a.visited {
        color: #176a68;
        text-decoration: none;
        letter-spacing: 1px;
        font-weight: bold;
    }

        div.header a:hover {
            color: #fff;
            text-decoration: underline;
        }

    div.header .links {
        text-align: left;
        padding-top: 4px;
        line-height: 16px;
        padding-left: 14px;
    }
/* logo */
#logo {
    /* position: absolute;
	left: 15px;
	top: 12px;
	width: 155px;
	height: 115px; */
    z-index: 1;
    text-align: center;
    background-color: #fff;
    padding: 28px 0;
    min-width: 1200px;
}

    #logo a {
        display: inline-block;
    }
/* promotion */
div.promotion {
    margin-right: auto;
    margin-left: auto;
    position: relative;
    text-align: center;
    /* background-image: url(images/Frame.png); */
    /* background-repeat: no-repeat; */
    height: 420px;
    /* padding-top: 80px; */
    background-color: #000;
    position: relative;
    overflow: hidden;
    min-width: 1200px;
}

.promotion img {
    position: absolute;
    top: 0;
    left: calc(50% - 960px);
}
/* container */
div.container {
    /* width: 1200px; */
    margin-right: auto;
    margin-left: auto;
    /* background-image: url(images/bg.png); */
    background-repeat: repeat-y;
    background-position: center top;
    padding-bottom: 5px;
}

/* nav */
div.nav {
    color: #fff;
    font-size: 25px;
    /* font-weight: bold; */
    line-height: 75px;
    /* margin-right: 25px; */
    /* margin-left: 25px; */
    font-weight: 300;
    padding: 72px 10px;
    /* width: 1200px; */
    width: 1180px;
    margin: auto;
}

    div.nav a,
    div.nav a:visited {
        color: #ffffff;
        text-decoration: none;
        display: block;
        /* border: 1px solid #000; */
        /* background-image: url(images/nav_bg.jpg); */
        /* background-repeat: repeat-x; */
        /* background-position: left center; */
        background-color: #5c5c5c;
        padding-right: 2px;
        padding-left: 2px;
    }

        div.nav a:hover {
            /* color: #FF0; */
            /* border: 1px solid #300; */
            /* background-image: url(images/nav_bg2.jpg); */
            background-repeat: repeat-x;
            background-position: left center;
            background-color: #a2a2a2;
        }

    div.nav table {
        width: 100%;
    }

        div.nav table td {
            text-align: center;
        }
/* nav新增 */
.nav table {
    padding: 0;
    display: block;
    border-spacing: 0;
}

    .nav table tbody {
        display: block;
    }

        .nav table tbody tr {
            width: 100%;
            display: block;
            text-align: center;
        }

            .nav table tbody tr td {
                width: 32%;
                margin-bottom: 5px;
                display: inline-block;
            }
/* content */
div.content {
    background-color: #fff;
    /*background-image: url(images/con_t.png);
	background-repeat: no-repeat;
	background-position: center top;*/
    /* width: 740px; */
    font-size: 20px;
    padding-top: 5px;
}

    div.content h1 {
        font-size: 35px;
        font-weight: bold;
        line-height: 42px;
        color: #3f3f3f;
        text-align: center;
        letter-spacing: 1px;
        /* line-height: 30px; */
        padding: 48px 0;
        border-top: #d2d3d8 2px solid;
        border-bottom: #d2d3d8 2px solid;
        background-color: #f9f9f9;
        margin: 0 auto 24px;
    }

    div.content h2 {
        font-size: 20px;
        /* color: #FFFFFF; */
        text-align: center;
        /* margin-top: 0px;
	margin-right: -20px;
	margin-bottom: 0px;
	margin-left: -20px; */
        margin-bottom: 24px;
        line-height: 24px;
        /* background-image: url(images/event_title.png); */
        background-repeat: no-repeat;
        background-position: center bottom;
        padding-top: 0px;
        padding-bottom: 14px;
        padding-right: 8px;
        padding-left: 8px;
        font-weight: bold;
    }

    div.content h3 {
        /* margin-top: 15px; */
        /* font-size: 15px;
	margin-top: 15px; */
        font-size: 24px;
        margin-top: 24px;
        margin-bottom: 5px;
        /* background-image: url(images/deco2.png); */
        /* background-repeat: no-repeat; */
        /* background-position: left center; */
        padding-left: 20px;
        color: #3f3f3f;
        font-weight: bold;
    }

    div.content p {
        margin-top: 0px;
        margin-bottom: 0px;
        margin-left: 18px;
    }

    div.content ol {
        margin-top: 0px;
        margin-bottom: 0px;
    }

    div.content > div {
        width: 900px;
        margin: auto;
    }

    div.content img {
        max-width: 100%;
    }

table.item_tb {
    max-width: 100%;
    width: 100%;
    background-color: #999;
}

    table.item_tb th {
        background-color: #ccc;
        padding-top: 3px;
        padding-bottom: 3px;
    }

    table.item_tb td {
        background-color: #fff;
        text-align: center;
        line-height: 18px;
        padding: 4px;
    }

        table.item_tb td ul {
            margin-top: 0px;
            margin-bottom: 0px;
            margin-left: 18px;
            margin-right: 0px;
            padding: 0px;
        }
/*div.content div.content_bot {
	background-image: url(images/con_b.png);
	background-repeat: no-repeat;
	background-position: center bottom;
	margin-right: -25px;
	margin-left: -25px;
	padding-top: 25px;
}*/

/* #apDiv { position:absolute;	z-index:9999px;	left: 50%;}
#gotop {  position: fixed; filter: alpha(opacity=100); bottom: 180px; margin-left:430px;	cursor: pointer; zoom: 1;}
.gotop {display:block; padding-top:15px;text-align:center;} */

/*div.gotop a{
	background-image: url(images/gotop.png);
	background-repeat: no-repeat;
	background-position: center top;
	height: 22px;
	width: 78px;
	margin-right: auto;
	margin-left: auto;
	display: block;
	text-decoration: none;
}*/
div.bottom {
    /* background-image: url(images/bottom.png); */
    background-image: url(../images/bottom-dec.png);
    background-repeat: no-repeat;
    background-position: center bottom;
    height: 240px;
    padding-top: 28px;
    width: 1178px;
    margin-right: auto;
    margin-left: auto;
}
/* div.copyright {
	background-image: url(https://tw.beanfun.com/MapleStory/footer/footer_01.jpg);
	background-repeat: no-repeat;
	background-position: center -6px;
	height: 75px;
	background-color: #FFF;
	margin-top: 20px;
} */
div.fb {
    position: absolute;
    left: 745px;
    top: 2px;
}

@media screen and (max-width: 750px) {
    #logo {
        min-width: 750px;
    }

    div.promotion {
        min-width: 750px;
        height: 164px;
        /* height: auto; */
    }

    .promotion > img {
        margin: 0px auto !important;
        max-width: 100% !important;
        height: auto !important;
        display: block !important;
        left: 50%;
        transform: translateX(-50%);
    }

    div.nav {
        width: 750px;
        padding: calc(72 / 750 * 100vw) calc(10 / 750 * 100vw);
        font-size: calc(25 / 750 * 100vw);
        box-sizing: border-box;
    }

    div.content {
        font-size: 20px !important;
    }

        div.content > * {
            /* font-size: 20px !important; */
        }

        div.content span {
            /* font-size: 20px !important; */
        }

        div.content > div {
            width: 100%;
        }

        div.content h1,
        div.content h1 > span {
            font-size: 35px !important;
            color: #3f3f3f !important;
        }

        div.content h2,
        div.content h3,
        div.content h4,
        div.content h5 {
            color: #3f3f3f !important;
            font-size: 24px !important;
        }

        div.content img {
            max-width: 100% !important;
            display: block;
        }

    div.bottom {
        width: 750px;
        height: 153px;
        background-size: 100%;
        padding-top: calc(28 / 750 * 100vw);
    }
}

.nav2 {
    width: 1180px;
    padding: 50px 0;
    margin: 0 auto;
    font-size: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

    .nav2 a {
        width: 378px;
        height: 75px;
        margin: 0 3px 6px 3px;
        font-size: 25px;
        text-decoration: none;
        background: #5c5c5c;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
    }

        .nav2 a:hover {
            background: #a2a2a2;
        }