@import url(basic.css);

html.back, #container.back {
    background-color: #eeeeee
}

html.backsoft, #container.backsoft {
    background-color: #f8f8f8
}

#header {
    overflow: hidden
}

    #header .headerArea {
        top: 0;
        right: 0;
        left: 0;
        position: fixed;
        z-index: 10
    }

        #header .headerArea .logo {
            text-align: center
        }

            #header .headerArea .logo img {
                margin: 4.27vw 0;
                width: 41.07vw;
                height: 5.87vw
            }

        #header .headerArea .title {
            padding: 4.27vw 0;
            height: 5.87vw;
            color: #fff;
            font-size: 4.8vw;
            text-align: center
        }

        #header .headerArea .menuBtn {
            position: relative
        }

            #header .headerArea .menuBtn button.back {
                bottom: 4.53vw;
                left: 4.27vw;
                width: 4.8vw;
                height: 4.8vw;
                text-indent: -9999em;
                border: 0 none;
                background: url("../img/icon/backWht.png") 50% no-repeat;
                background-size: cover;
                position: absolute
            }

    #header .navArea {
        right: 0;
        bottom: 0;
        left: 0;
        margin: 0 auto;
        width: 100%;
        box-shadow: 0 -1px 6.5px 0 rgba(0,0,0,0.13);
        background: #fff;
        position: fixed;
        z-index: 10
    }

        #header .navArea ul {
            text-align: center;
            overflow: hidden
        }

            #header .navArea ul li {
                width: 25%;
                float: left;
                position: relative
            }

                #header .navArea ul li > a {
                    padding: 11.2vw 0 2.67vw;
                    height: 18.13vw;
                    color: #3d3d3d;
                    font-size: 3.47vw;
                    display: block;
                    position: relative
                }

                    #header .navArea ul li > a:before {
                        top: 2.67vw;
                        left: 0;
                        right: 0;
                        margin: 0 auto;
                        width: 6.4vw;
                        height: 6.4vw;
                        background: no-repeat;
                        background-size: cover;
                        position: absolute;
                        content: ''
                    }

                    #header .navArea ul li > a span {
                        opacity: 0.5
                    }

                #header .navArea ul li.on > a span {
                    opacity: 1
                }

                #header .navArea ul li.menu > a:before {
                    background-image: url("../img/nav/menu.png")
                }

                #header .navArea ul li.menu.on > a:before {
                    background-image: url("../img/nav/menuOn.png")
                }

                #header .navArea ul li.home > a:before {
                    background-image: url("../img/nav/home.png")
                }

                #header .navArea ul li.home.on > a:before {
                    background-image: url("../img/nav/homeOn.png")
                }

                #header .navArea ul li.id > a:before {
                    background-image: url("../img/nav/id.png")
                }

                #header .navArea ul li.id.on > a:before {
                    background-image: url("../img/nav/idOn.png")
                }

                #header .navArea ul li.setting > a:before {
                    background-image: url("../img/nav/setting.png")
                }

                #header .navArea ul li.setting.on > a:before {
                    background-image: url("../img/nav/settingOn.png")
                }

    #header:after, #container:after, #footer:after {
        clear: both;
        content: '';
        display: block
    }