@import url(basic.css);

#container {
    margin: 13.87vw 0 18.13vw
}

    #container .boxArea {
        margin: 1.87vw 0 0;
        border-top: 1px solid #d8d8d8;
        background-color: #fff
    }

        #container .boxArea.top {
            border: 0 none;
            border-bottom: 1px solid #d8d8d8
        }

    #container .shortCutArea {
        height: 36vw
    }

        #container .shortCutArea ul {
            padding: 8.53vw 0 6.9vw;
            text-align: center;
            overflow: hidden
        }

            #container .shortCutArea ul li {
                width: 25%;
                height: 16vw;
                float: left;
                position: relative
            }

                #container .shortCutArea ul li > a {
                    padding: 14.4vw 0 2.67vw;
                    color: #3d3d3d;
                    font-size: 3.2vw;
                    display: block;
                    position: relative
                }

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

    #container .infoArea {
        height: 36vw;
        position: relative
    }

        #container .infoArea > div {
            padding: 4.27vw 6.4vw 0;
            overflow: hidden
        }

            #container .infoArea > div h3 {
                margin: 2.13vw 0 0;
                color: #121212;
                font-size: 5.33vw
            }

            #container .infoArea > div p {
                color: #121212;
                font-size: 3.73vw
            }

                #container .infoArea > div p span {
                    margin: 0 0 0 2.13vw
                }

            #container .infoArea > div > div {
                right: 0;
                bottom: 0;
                left: 0;
                overflow: hidden;
                position: absolute
            }

                #container .infoArea > div > div a {
                    width: 50%;
                    line-height: 14.4vw;
                    display: inline-block;
                    color: #838383;
                    font-size: 4.27vw;
                    text-align: center;
                    background-color: #fff;
                    float: left;
                    color: #3d3d3d;
                    position: relative
                }

                    #container .infoArea > div > div a:after {
                        top: 0;
                        right: 0;
                        bottom: 0;
                        margin: auto 0;
                        width: 1px;
                        height: 9.6vw;
                        background-color: #e5e5ea;
                        position: absolute;
                        content: ''
                    }

                #container .infoArea > div > div button {
                    width: 50%;
                    height: 14.4vw;
                    border: 0 none;
                    color: #838383;
                    font-size: 4.27vw;
                    text-align: center;
                    background-color: #fff;
                    float: left
                }

    #container .infoPictureArea {
        height: 36vw
    }

        #container .infoPictureArea > div {
            padding: 6.4vw;
            overflow: hidden;
            position: relative
        }

            #container .infoPictureArea > div div {
                float: left
            }

                #container .infoPictureArea > div div img {
                    width: 20.3vw;
                    height: 27.0vw;
                    border-radius: 20%
                }

                #container .infoPictureArea > div div h3 {
                    margin: 0 0 5.33vw;
                    color: #3d3d3d;
                    font-size: 5.33vw
                }

                #container .infoPictureArea > div div p {
                    margin: 2.13vw 0 0;
                    color: #3d3d3d;
                    font-size: 3.73vw
                }

                #container .infoPictureArea > div div button {
                    right: 6.4vw;
                    bottom: 6.4vw;
                    width: 16.27vw;
                    height: 6.4vw;
                    border: 0 none;
                    color: #3d3d3d;
                    font-size: 3.2vw;
                    text-align: center;
                    background-color: #ebebeb;
                    border-radius: 2.13vw;
                    position: absolute
                }

                #container .infoPictureArea > div div:first-child {
                    margin: 0 8.53vw 0 0
                }

    #container .menuArea .shallowNavArea {
        overflow: hidden
    }

        #container .menuArea .shallowNavArea li {
            font-weight: 500;
            border-bottom: 1px solid #e5e5ea
        }

            #container .menuArea .shallowNavArea li > a {
                padding: 6.4vw;
                color: #3d3d3d;
                font-size: 4.27vw;
                display: block
            }

            #container .menuArea .shallowNavArea li span {
                font-size: 3.73vw;
                vertical-align: .27vw;
                float: right
            }

                #container .menuArea .shallowNavArea li span.update {
                    color: #be3838
                }

    #container .menuArea .deepNavArea {
        overflow: hidden
    }

        #container .menuArea .deepNavArea > li {
            font-weight: 500;
            border-bottom: 1px solid #e5e5ea
        }

            #container .menuArea .deepNavArea > li > button {
                padding: 6.4vw;
                width: 100%;
                color: #3d3d3d;
                font-size: 4.27vw;
                text-align: left;
                border: 0 none;
                background: none;
                position: relative
            }

                #container .menuArea .deepNavArea > li > button:after {
                    top: 0;
                    right: 5.33vw;
                    bottom: 1.07vw;
                    margin: auto 0;
                    width: 1.6vw;
                    height: 1.6vw;
                    border: solid #3d3d3d;
                    border-width: 0 1px 1px 0;
                    position: absolute;
                    transform: rotate(45deg);
                    content: ''
                }

            #container .menuArea .deepNavArea > li .navDepth {
                display: none
            }

                #container .menuArea .deepNavArea > li .navDepth li {
                    border-top: 1px solid #e5e5ea
                }

                    #container .menuArea .deepNavArea > li .navDepth li a {
                        padding: 6.4vw;
                        color: #3d3d3d;
                        font-size: 4.27vw;
                        background-color: #f8f8f8;
                        display: block
                    }

            #container .menuArea .deepNavArea > li.on > button:after {
                bottom: -1.07vw;
                transform: rotate(-135deg)
            }

            #container .menuArea .deepNavArea > li.on .navDepth {
                display: block
            }

    #container .timetableArea {
        padding: 6.4vw
    }

        #container .timetableArea h2 {
            color: #121212;
            font-size: 5.87vw
        }

        #container .timetableArea p {
            font-size: 3.73vw;
            font-weight: 500
        }

        #container .timetableArea div {
            margin: 12.8vw 0 0
        }

            #container .timetableArea div ol li {
                margin: 6.4vw 0 0;
                color: #a0a0a0;
                font-size: 4.27vw;
                overflow: hidden
            }

                #container .timetableArea div ol li span {
                    margin: 1.07vw 0 0;
                    float: left
                }

                #container .timetableArea div ol li dl {
                    margin: 0 0 0 4.27vw;
                    float: left
                }

                    #container .timetableArea div ol li dl dt {
                        color: #3d3d3d;
                        font-size: 4.27vw;
                        font-weight: 700
                    }

                    #container .timetableArea div ol li dl dd {
                        margin: .53vw 0 0;
                        color: #a0a0a0;
                        font-size: 3.73vw
                    }

    #container .infoViewArea {
        padding: 6.4vw 4.27vw
    }

        #container .infoViewArea article + article {
            margin-top: 8vw
        }

        #container .infoViewArea h2 {
            margin: 0 0 6.4vw;
            color: #121212;
            font-size: 5.33vw
        }

            #container .infoViewArea h2 + dl {
                position: relative
            }

                #container .infoViewArea h2 + dl:before {
                    top: 0;
                    left: -4.27vw;
                    width: 100vw;
                    height: 1px;
                    position: absolute;
                    background-color: #e5e5ea;
                    content: ''
                }

        #container .infoViewArea dl {
            padding: 4.27vw 0;
            border-bottom: 1px solid #e5e5ea
        }

            #container .infoViewArea dl dt {
                margin: 0 2.93vw 0 0;
                width: 22.67vw;
                color: #121212;
                font-size: 3.73vw;
                float: left
            }

            #container .infoViewArea dl dd {
                color: #121212;
                font-size: 3.73vw;
                font-weight: 700;
                float: left
            }

            #container .infoViewArea dl:after {
                clear: both;
                content: '';
                display: block
            }

        #container .infoViewArea table {
            border-bottom: 1px solid #e5e5ea
        }

            #container .infoViewArea table th {
                height: 12.53vw;
                color: #121212;
                font-size: 3.73vw;
                font-weight: 700;
                text-align: center;
                word-wrap: break-word;
                vertical-align: middle;
                border-top: 1px solid #e5e5ea;
                border-left: 1px solid #e5e5ea
            }

            #container .infoViewArea table td {
                padding: 1.33vw;
                height: 12.53vw;
                color: #121212;
                font-size: 3.73vw;
                text-align: center;
                word-wrap: break-word;
                vertical-align: middle;
                border-top: 1px solid #e5e5ea;
                border-left: 1px solid #e5e5ea
            }

                #container .infoViewArea table th:first-child, #container .infoViewArea table td:first-child {
                    border-left: 0 none
                }

            #container .infoViewArea table .noList {
                height: 106.67vw;
                text-align: center
            }

    #container .identifyArea {
        margin: 0 4.27vw 31.47vw 4.27vw;
        padding: 4.27vw 5.07vw 8.53vw;
        border-radius: 2.13vw;
        background-color: #fff;
        position: relative
    }

        #container .identifyArea:before {
            top: 24.27vw;
            right: 0;
            left: 0;
            margin: 0 auto;
            width: 81.33vw;
            height: 80vw;
            background: url("../img/logo/back.png") no-repeat;
            background-size: cover;
            position: absolute;
            content: ''
        }

        #container .identifyArea h1 {
            margin: 0 0 17.33vw;
            font-size: 5.87vw;
            text-align: center
        }

        #container .identifyArea .info {
            overflow: hidden
        }

            #container .identifyArea .info .student {
                width: 41.07vw;
                float: left
            }

                #container .identifyArea .info .student h2 {
                    color: #121212;
                    font-size: 5.87vw
                }

                    #container .identifyArea .info .student h2 + p {
                        margin: 2.13vw 0 6.4vw
                    }

                #container .identifyArea .info .student p {
                    color: #121212;
                    font-size: 4.27vw
                }

                    #container .identifyArea .info .student p:last-child {
                        margin: 1.07vw 0 0
                    }

            #container .identifyArea .info .photo {
                float: right
            }

                #container .identifyArea .info .photo img {
                    width: 34.0vw;
                    height: 45.3vw;
                    position: relative
                }

        #container .identifyArea #qrcode {
            margin: 20.53vw 0 14.93vw;
            text-align: center
        }

            #container .identifyArea #qrcode img {
                margin: 0 auto;
                padding: 1.07vw;
                width: 41.07vw;
                height: 41.07vw;
                background-color: #fff;
                position: relative
            }

        #container .identifyArea .logo {
            text-align: center
        }

            #container .identifyArea .logo img {
                /* width: 46.13vw; */
                height: 10.93vw
            }

    #container .listArea {
        padding: 0 4.27vw
    }

        #container .listArea.info {
            margin: 0 0 7.2vw;
            position: relative
        }

            #container .listArea.info h2 {
                margin: 0 0 2.13vw;
                padding: 6.4vw 0 0;
                color: #121212;
                font-size: 4.27vw
            }

                #container .listArea.info h2.center {
                    color: #121212;
                    font-size: 3.73vw;
                    text-align: center;
                    font-weight: 400
                }

            #container .listArea.info select {
                margin: 6.4vw 0 2.13vw;
                font-size: 3.73vw;
                border: 0 none;
                background-color: #f8f8f8
            }

            #container .listArea.info > p {
                line-height: 1.6;
                color: #838383;
                font-size: 2.67vw
            }

                #container .listArea.info > p span {
                    margin: 0 0 0 8.53vw
                }

                #container .listArea.info > p.caption {
                    margin: 6.4vw 0 -4.27vw
                }

                #container .listArea.info > p.closing {
                    margin: -2.93vw 0 0;
                    padding-bottom: 7.2vw
                }

                #container .listArea.info > p.quantity {
                    margin: 0 0 -2.93vw;
                    padding: 6.4vw 0 0;
                    color: #121212;
                    font-size: 4.27vw
                }

                    #container .listArea.info > p.quantity strong {
                        color: #0d9951
                    }

                #container .listArea.info > p.class {
                    right: 4.27vw;
                    position: absolute
                }

                    #container .listArea.info > p.class span {
                        margin: 0 0 0 8px
                    }

                    #container .listArea.info > p.class.select {
                        top: 6.13vw;
                        color: #121212;
                        font-size: 3.73vw
                    }

                    #container .listArea.info > p.class.h2 {
                        top: 6.93vw;
                        color: #838383;
                        font-size: 3.2vw
                    }

                #container .listArea.info > p.training {
                    padding: 6.4vw 0 0
                }

                    #container .listArea.info > p.training strong {
                        color: #0d9951
                    }

            #container .listArea.info .search {
                position: relative
            }

                #container .listArea.info .search input {
                    padding: 0 9.6vw 0 2.13vw;
                    width: 100%;
                    height: 9.6vw;
                    font-size: 3.73vw;
                    border: 1px solid #e5e5ea;
                    background-color: #fff
                }

                #container .listArea.info .search button {
                    top: 0;
                    right: 1.6vw;
                    bottom: 0;
                    margin: auto;
                    width: 6.4vw;
                    height: 6.4vw;
                    text-indent: -9999em;
                    border: 0 none;
                    background: url("../img/icon/search.png") 50% no-repeat;
                    background-size: 80%;
                    position: absolute
                }

            #container .listArea.info .card {
                margin: 4.27vw 0 0;
                padding: 4.27vw 4.27vw 0;
                border-radius: 1.07vw;
                background-color: #fff;
                box-shadow: 0 1px 6.5px 0 rgba(0,0,0,0.15)
            }

                #container .listArea.info .card .caption {
                    color: #121212;
                    font-size: 2.67vw
                }

                #container .listArea.info .card .amount {
                    margin: 6.93vw 0;
                    color: #121212;
                    font-size: 7.47vw
                }

                    #container .listArea.info .card .amount strong {
                        margin: 0 1.07vw 0 0;
                        font-size: 8.53vw
                    }

                #container .listArea.info .card a {
                    padding: 4.27vw 0;
                    color: #3d3d3d;
                    font-size: 3.2vw;
                    display: block;
                    position: relative
                }

                    #container .listArea.info .card a:before {
                        top: 0;
                        right: 0;
                        left: 0;
                        width: 100%;
                        height: 1px;
                        background-color: #e5e5ea;
                        position: absolute;
                        content: ''
                    }

            #container .listArea.info .asyncArea {
                margin: 0 -4.27vw;
                border-bottom: 1px solid #e5e5ea
            }

                #container .listArea.info .asyncArea ul {
                    overflow: hidden
                }

                    #container .listArea.info .asyncArea ul li {
                        width: 33.33%;
                        height: 17.07vw;
                        float: left;
                        position: relative
                    }

                        #container .listArea.info .asyncArea ul li button {
                            padding: 4.8vw 0 0;
                            width: 100%;
                            height: 100%;
                            color: #3d3d3d;
                            font-size: 4.27vw;
                            font-weight: 700;
                            text-align: center;
                            border: 0 none;
                            background: none
                        }

                        #container .listArea.info .asyncArea ul li.on:before {
                            top: 4.8vw;
                            right: 0;
                            left: 0;
                            margin: 0 auto;
                            width: 2.13vw;
                            height: 2.13vw;
                            border-radius: 50%;
                            position: absolute;
                            content: ''
                        }

            #container .listArea.info .credit {
                margin: 4.27vw 0 0
            }

                #container .listArea.info .credit span {
                    color: #121212;
                    font-size: 3.73vw
                }

                #container .listArea.info .credit input {
                    margin: 0 0 0 1.6vw;
                    padding: 1.07vw 0;
                    width: 8.8vw;
                    height: 7.47vw;
                    font-size: 3.73vw;
                    text-align: center;
                    border: 1px solid #e5e5ea;
                    border-radius: 1.07vw
                }

                    #container .listArea.info .credit input + span:before {
                        margin: 0 4.27vw;
                        width: 1px;
                        height: 7.47vw;
                        vertical-align: middle;
                        display: inline-block;
                        content: ''
                    }

            #container .listArea.info .infoTable {
                margin: 2.13vw 0 4.27vw
            }

                #container .listArea.info .infoTable table {
                    border-top: 1px solid #ebebeb
                }

                    #container .listArea.info .infoTable table tbody th, #container .listArea.info .infoTable table tbody td {
                        padding: 1.33vw;
                        height: 9.87vw;
                        color: #121212;
                        font-size: 2.4vw;
                        text-align: center;
                        word-wrap: break-word;
                        vertical-align: middle;
                        border-bottom: 1px solid #ebebeb;
                        border-left: 1px solid #ebebeb
                    }

                        #container .listArea.info .infoTable table tbody th:last-child, #container .listArea.info .infoTable table tbody td:last-child {
                            border-right: 1px solid #ebebeb
                        }

                #container .listArea.info .infoTable ~ p {
                    margin: 0 0 4.27vw
                }

            #container .listArea.info .infoDl {
                margin: 4.27vw 0 0
            }

                #container .listArea.info .infoDl div {
                    border-bottom: 1px solid #ebebeb;
                    overflow: hidden;
                    position: relative
                }

                    #container .listArea.info .infoDl div dl {
                        line-height: 9.6vw;
                        color: #121212;
                        font-size: 2.4vw;
                        float: left;
                        overflow: hidden
                    }

                        #container .listArea.info .infoDl div dl dt {
                            float: left
                        }

                            #container .listArea.info .infoDl div dl dt:after {
                                margin: 0 .53vw 0 0;
                                content: ':'
                            }

                        #container .listArea.info .infoDl div dl dd {
                            float: left
                        }

                            #container .listArea.info .infoDl div dl dd + dt, #container .listArea.info .infoDl div dl dd + dd {
                                margin: 0 0 0 5.07vw
                            }

                        #container .listArea.info .infoDl div dl + dl {
                            margin: 0 0 0 4.8vw;
                            padding-left: 4.8vw;
                            width: 48.53vw;
                            border-left: 1px solid #ebebeb;
                            float: right
                        }

                    #container .listArea.info .infoDl div:first-child {
                        border-top: 1px solid #ebebeb
                    }

                #container .listArea.info .infoDl + p {
                    margin: 2.13vw 0 0
                }

        #container .listArea.dataGray {
            padding-bottom: 7.2vw
        }

            #container .listArea.dataGray h2 {
                margin: 0 0 4.27vw;
                color: #121212;
                font-size: 4.27vw
            }

                #container .listArea.dataGray h2.center {
                    text-align: center
                }

            #container .listArea.dataGray table {
                border-radius: 1.07vw 1.07vw 0 0;
                border-collapse: separate;
                overflow: hidden
            }

                #container .listArea.dataGray table thead th {
                    padding: 1.6vw 0;
                    height: 3.73vw;
                    color: #fff;
                    font-size: 3.2vw;
                    font-weight: 700;
                    text-align: center;
                    word-wrap: break-word;
                    vertical-align: middle;
                    background-color: #a0a0a0;
                    border-bottom: 1px solid #ebebeb;
                    border-left: 1px solid #ebebeb
                }

                    #container .listArea.dataGray table thead th:last-child {
                        border-right: 1px solid #ebebeb
                    }

                #container .listArea.dataGray table tbody th, #container .listArea.dataGray table tbody td {
                    padding: 1.33vw;
                    height: 7.2vw;
                    color: #121212;
                    font-size: 3.2vw;
                    text-align: center;
                    word-wrap: break-word;
                    vertical-align: middle;
                    background-color: #fff;
                    border-bottom: 1px solid #ebebeb;
                    border-left: 1px solid #ebebeb
                }

                    #container .listArea.dataGray table tbody th:last-child, #container .listArea.dataGray table tbody td:last-child {
                        border-right: 1px solid #ebebeb
                    }

                #container .listArea.dataGray table tbody .title {
                    padding: 1.33vw 2.67vw;
                    max-width: 0;
                    text-align: left;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    overflow: hidden
                }

                    #container .listArea.dataGray table tbody .title a {
                        color: #121212
                    }

                #container .listArea.dataGray table tfoot th {
                    padding: 1.33vw;
                    height: 7.2vw;
                    color: #121212;
                    font-size: 3.2vw;
                    text-align: center;
                    word-wrap: break-word;
                    vertical-align: middle
                }

                #container .listArea.dataGray table tfoot td {
                    padding: 1.33vw;
                    height: 7.2vw;
                    color: #121212;
                    font-size: 2.4vw;
                    text-align: center;
                    word-wrap: break-word;
                    vertical-align: middle
                }

                #container .listArea.dataGray table .noList {
                    height: 106.67vw;
                    text-align: center
                }

        #container .listArea.dataWhite {
            padding-bottom: 7.2vw
        }

            #container .listArea.dataWhite h2 {
                margin: 0 0 4.27vw;
                color: #121212;
                font-size: 4.27vw
            }

            #container .listArea.dataWhite table {
                border-bottom: 1px solid #e5e5ea
            }

                #container .listArea.dataWhite table th {
                    padding: 1.33vw;
                    height: 7.2vw;
                    color: #121212;
                    font-size: 2.4vw;
                    font-weight: 700;
                    text-align: center;
                    word-wrap: break-word;
                    vertical-align: middle;
                    border-top: 1px solid #e5e5ea;
                    border-left: 1px solid #e5e5ea;
                    background-color: #fff
                }

                #container .listArea.dataWhite table td {
                    padding: 1.33vw;
                    height: 7.2vw;
                    color: #121212;
                    font-size: 2.4vw;
                    text-align: center;
                    word-wrap: break-word;
                    vertical-align: middle;
                    border-top: 1px solid #e5e5ea;
                    border-left: 1px solid #e5e5ea;
                    background-color: #fff
                }

                #container .listArea.dataWhite table .title {
                    padding: 1.33vw 4vw;
                    text-align: left;
                    word-break: keep-all
                }

                #container .listArea.dataWhite table .content {
                    padding: 4.27vw;
                    height: 80vw;
                    line-height: 1.5;
                    vertical-align: top
                }

                    #container .listArea.dataWhite table .content td {
                        padding: 0;
                        height: auto
                    }

                    #container .listArea.dataWhite table .content ol {
                        margin: 1em 0;
                        padding: 0 0 0 12.27vw;
                        list-style-type: decimal
                    }

                    #container .listArea.dataWhite table .content ul {
                        margin: 1em 0;
                        padding: 0 0 0 12.27vw;
                        list-style-type: disc
                    }

                    #container .listArea.dataWhite table .content img {
                        max-width: 100%
                    }

                #container .listArea.dataWhite table th:first-child, #container .listArea.dataWhite table td:first-child {
                    border-left: 0 none
                }

            #container .listArea.dataWhite.view {
                padding-top: 5.33vw
            }

        #container .listArea.dataCalendar {
            padding: 0 2.13vw 7.2vw
        }

            #container .listArea.dataCalendar h2 {
                margin: 0 0 4.27vw;
                color: #121212;
                font-size: 4.27vw
            }

            #container .listArea.dataCalendar table {
                border: 1px solid #e5e5ea;
                border-radius: 2.13vw;
                border-collapse: separate;
                overflow: hidden
            }

                #container .listArea.dataCalendar table th {
                    height: 6.93vw;
                    color: #838383;
                    font-size: 3.2vw;
                    font-weight: 700;
                    text-align: center;
                    word-wrap: break-word;
                    vertical-align: middle;
                    border-right: 1px solid #e5e5ea;
                    background-color: #fff
                }

                #container .listArea.dataCalendar table td {
                    padding: 2.13vw;
                    height: 8.27vw;
                    word-wrap: break-word;
                    border-top: 1px solid #e5e5ea;
                    border-right: 1px solid #e5e5ea;
                    background-color: #fff
                }

                    #container .listArea.dataCalendar table td .fill {
                        height: 100%;
                        color: #fff;
                        font-weight: 700;
                        display: table
                    }

                        #container .listArea.dataCalendar table td .fill .time {
                            font-size: 3.2vw;
                            display: table-row
                        }

                            #container .listArea.dataCalendar table td .fill .time p {
                                font-size: 2.4vw;
                                font-weight: 400
                            }

                        #container .listArea.dataCalendar table td .fill .subject {
                            font-size: 2.4vw;
                            vertical-align: bottom;
                            display: table-cell
                        }

                            #container .listArea.dataCalendar table td .fill .subject p {
                                font-weight: 400
                            }

                    #container .listArea.dataCalendar table td .text {
                        color: #121212;
                        font-size: 2.4vw;
                        font-weight: 700;
                        text-align: center
                    }

                        #container .listArea.dataCalendar table td .text .date {
                            margin: 0 0 1.6vw;
                            font-size: 3.2vw;
                            text-align: left
                        }

                    #container .listArea.dataCalendar table th:last-child, #container .listArea.dataCalendar table td:last-child {
                        border-right: 0 none
                    }

        #container .listArea.dataPurchase {
            margin: -7.2vw 0 0;
            overflow: hidden
        }

            #container .listArea.dataPurchase ul li {
                padding: 4.27vw 0;
                position: relative
            }

                #container .listArea.dataPurchase ul li .date {
                    color: #121212;
                    font-size: 2.67vw
                }

                #container .listArea.dataPurchase ul li .content {
                    margin: 4.53vw 0 6.67vw;
                    color: #3d3d3d;
                    font-size: 3.73vw
                }

                #container .listArea.dataPurchase ul li .breakdown {
                    color: #3d3d3d;
                    font-size: 4.27vw;
                    font-weight: 700
                }

                    #container .listArea.dataPurchase ul li .breakdown span:after {
                        margin: 0 .53vw 0 1.07vw;
                        color: #3d3d3d
                    }

                #container .listArea.dataPurchase ul li.save .breakdown span {
                    color: #37d282
                }

                    #container .listArea.dataPurchase ul li.save .breakdown span:after {
                        content: '+'
                    }

                #container .listArea.dataPurchase ul li.use .breakdown span {
                    color: #f3654a
                }

                    #container .listArea.dataPurchase ul li.use .breakdown span:after {
                        content: '-'
                    }

                #container .listArea.dataPurchase ul li:after {
                    right: 0;
                    bottom: 0;
                    left: -4.27vw;
                    width: 100vw;
                    height: 1px;
                    background-color: #e5e5ea;
                    position: absolute;
                    content: ''
                }

        #container .listArea.pieChart {
            padding-bottom: 7.2vw;
            text-align: center
        }

            #container .listArea.pieChart > div {
                margin: 10.13vw 0;
                width: 79.2vw;
                height: 79.2vw;
                border-radius: 50%;
                display: inline-block;
                position: relative;
                overflow: hidden
            }

                #container .listArea.pieChart > div:before {
                    top: 0;
                    right: 0;
                    bottom: 0;
                    left: 0;
                    margin: auto;
                    width: 57.6vw;
                    height: 57.6vw;
                    line-height: 57.6vw;
                    border-radius: 50%;
                    background-color: #fff;
                    position: absolute;
                    content: ''
                }

                #container .listArea.pieChart > div:after {
                    top: 0;
                    right: 0;
                    bottom: 0;
                    left: 0;
                    margin: auto;
                    width: 53.33vw;
                    height: 53.33vw;
                    line-height: 53.33vw;
                    border-radius: 50%;
                    background-color: #fff;
                    box-shadow: 0 1px 6.5px 0 rgba(0,0,0,0.15);
                    position: absolute;
                    content: ''
                }

                #container .listArea.pieChart > div span {
                    right: 0;
                    left: 0;
                    margin: 0 auto;
                    line-height: 79.2vw;
                    color: #121212;
                    font-size: 8.53vw;
                    font-weight: 700;
                    z-index: 1;
                    position: absolute
                }

            #container .listArea.pieChart p {
                color: #838383;
                font-size: 3.73vw
            }

            #container .listArea.pieChart strong {
                color: #121212;
                font-size: 4.8vw
            }

    #container .writeArea > div {
        margin: 0 0 8.53vw;
        position: relative;
        overflow: hidden
    }

        #container .writeArea > div .picture {
            padding: 6.4vw 0 8.53vw;
            text-align: center
        }

            #container .writeArea > div .picture img {
                width: 20.3vw;
                height: 27.0vw;
                border-radius: 20%
            }

        #container .writeArea > div dl {
            margin: 0 0 2.13vw;
            padding: 0 4.27vw;
            color: #121212;
            font-size: 3.73vw;
            overflow: hidden
        }

            #container .writeArea > div dl dt {
                width: 25.07vw;
                height: 9.6vw;
                line-height: 9.6vw;
                float: left
            }

            #container .writeArea > div dl dd {
                width: 66.13vw;
                line-height: 9.6vw;
                font-weight: 700;
                float: left
            }

                #container .writeArea > div dl dd label {
                    margin: 0 0 0 1.6vw;
                    color: #3d3d3d;
                    font-size: 2.67vw;
                    vertical-align: .8vw
                }

                #container .writeArea > div dl dd input[type='text'], #container .writeArea > div dl dd input[type='password'], #container .writeArea > div dl dd input[type='number'] {
                    padding: 2.13vw 2.4vw;
                    width: 100%;
                    height: 9.6vw;
                    color: #3d3d3d;
                    font-size: 3.73vw;
                    border: 1px solid #e5e5ea;
                    border-radius: 1.07vw
                }

                    #container .writeArea > div dl dd input[type='text'] + input[type='text'], #container .writeArea > div dl dd input[type='password'] + input[type='text'], #container .writeArea > div dl dd input[type='number'] + input[type='text'] {
                        margin: 2.13vw 0 0
                    }

                #container .writeArea > div dl dd textarea {
                    padding: 2.13vw 2.4vw;
                    width: 100%;
                    height: 14.93vw;
                    color: #3d3d3d;
                    font-size: 3.73vw;
                    border: 1px solid #e5e5ea;
                    border-radius: 1.07vw;
                    resize: none
                }

                #container .writeArea > div dl dd input[type='checkbox'] {
                    margin: 0 0 0 2.13vw;
                    width: 3.73vw;
                    height: 3.73vw;
                    vertical-align: 0vw
                }

                #container .writeArea > div dl dd div dl {
                    padding: 0
                }

                    #container .writeArea > div dl dd div dl dt {
                        left: 6.4vw;
                        font-weight: 400;
                        position: absolute
                    }

                    #container .writeArea > div dl dd div dl dd {
                        width: 64vw
                    }

                #container .writeArea > div dl dd.address div:first-child {
                    overflow: hidden
                }

                #container .writeArea > div dl dd.address input[type='number'] {
                    width: 41.87vw;
                    float: left
                }

                #container .writeArea > div dl dd.address button {
                    width: 21.87vw;
                    height: 9.6vw;
                    color: #3d3d3d;
                    font-size: 3.2vw;
                    border: 0 none;
                    border-radius: 1.07vw;
                    background: #ebebeb;
                    float: right
                }

                #container .writeArea > div dl dd.address .addressWrap {
                    right: 0;
                    left: 0;
                    margin: 2.13vw auto 0;
                    width: 91.47vw;
                    height: 133.33vw;
                    border: 1px solid #000;
                    overflow: hidden;
                    position: absolute;
                    display: none;
                    z-index: 3;
                    -webkit-overflow-scrolling: touch
                }

            #container .writeArea > div dl:last-child {
                margin: 0
            }

        #container .writeArea > div p {
            padding: 0 0 0 2.13vw;
            color: #be3838;
            font-size: 2.67vw
        }

    #container .writeArea > p {
        margin: 4.27vw 6.4vw 0;
        color: #838383;
        font-size: 2.67vw
    }

    #container .writeArea .btnArea {
        padding: 8.53vw 0;
        text-align: center
    }

        #container .writeArea .btnArea button {
            width: 87.2vw;
            height: 13.87vw;
            color: #fff;
            font-size: 4.8vw;
            font-weight: 700;
            text-align: center;
            border: 0 none;
            border-radius: 1.07vw
        }

html.popup {
    height: 100%
}

    html.popup body {
        height: 100%
    }

    html.popup #container > :not(.popupArea) {
        height: 0;
        overflow: hidden;
        position: relative
    }