.both {
    clear: both;
}

.both .bx1 {
    padding: 10vh 0px;
}



/* Style：01 */
.both #title {
    padding-bottom: 5vh;
}

.both #title p {
    margin: 0;
    padding-bottom: 8px;

    font-size: 48px;
    font-weight: 100;
}
.both #title p > span {
    display: inline;
}
.both #title p > bk {
    display: block;

    padding-left: 5px;
    letter-spacing: 5px;

    color: rgba(0, 0, 0, .5);

    font-size: 24px;
    font-weight: 700;
}

.both #title hr {
    max-width: 75px;
    border: 0;
    height: 5px;
    background-color: rgba(0, 0, 0, .75);
}

.both #title none,
.both #notes {
    display: none;
}
.both #none {
    display: block;
}

.both clear {
    clear: both;
    display: block;
    width: 100%;
    height: 0vh;
}

@media (max-width: 767px) {
    /* --- --- --- Style 01 --- --- --- */
    .both .bx1 {
        padding: 0vh 0px;
    }

    .both #title {
        padding-bottom: 16px;
        border-bottom: 1px #e8e0d9 solid;
    }
    .both #notes {
        padding-top: 16px;
    }

    .both #title > div,
    .both #notes > div {
        width: calc(100vw - 32px);
    }

    .both #title > div {
        height: calc(100vh - 83px);
    }
    .both #notes > div {
        height: calc(100vh - 117px);
    }

    .both #title > div {
        background-image: url(../../imgs/touch.gif);
    }
    .both #title p {
        color: rgba(255, 255, 255, .75);
    }
    .both #title p > span {
        font-size: 24px;
    }
    .both #title p > bk {
        color: #fff;

        font-size: 32px;
        font-weight: 600;

        padding-left: 3px;
        letter-spacing: 3px;
    }

    .both #title hr {
        display: none;
        background-color: rgba(255, 255, 255, .75);
    }

    .both #title none,
    .both #notes,
    .both #notes a {
        display: block;
    }

    .both #title none {
        color: rgba(255, 255, 255, .75);
        font-size: 48px;
    }

    .both #notes > div {
        color: #e8e0d9;
        border: 1px #392d23 solid;
        background-color: #1b1b1b;
    }

    .both #notes a {
        padding: 8px 16px;
        border-bottom: 1px #392d23 solid;

        font-size: 16px;
        font-weight: 600;
        text-align: justify;
        letter-spacing: 3px;

        -webkit-filter: brightness(.65);
    }
    .both #notes a:hover {
        -webkit-filter: brightness(1);
    }

    .both #notes a > small {
        font-size: 12px;
        font-weight: 500;
        text-align: justify;
        letter-spacing: 1.5px;
    }

    .both #none {
        display: none;
    }

    /*
    .both clear {
        height: 0vh;
    }

    --- --- --- Style 02 --- --- ---
    #title {
        padding-bottom: 10vh;
    }

    #title > div {
        width: 100vw;
        height: calc(80vh - 51px);
        display: table-cell;
        vertical-align: middle;
        background-color: #ee0000;
    }

    #title p > span {
        display: block;
    }
    */

    @media (max-width: 500px) {
        .both #title p > span {
            font-size: 20px;
        }
    }
}
/* === End === --- --- --- --- --- --- --- --- --- Style：01 --- --- --- */



/* Style：02 */
.both .wx3 {
    float: left;

    width: calc(100% / 3);

    padding: 32px;

    transition: all .75s;
}
.both .wx3:hover {
    background-color: #f0f0f0;
}

.both .wx3.b1 {
    border-top: 1px transparent solid;
    border-bottom: 1px #f0f0f0 solid;
    border-left: 1px transparent solid;
    border-right: 1px #f0f0f0 solid;
}
.both .wx3.b2 {
    border-top: 1px transparent solid;
    border-bottom: 1px #f0f0f0 solid;
    border-left: 1px #f0f0f0 solid;
    border-right: 1px #f0f0f0 solid;
}
.both .wx3.b3 {
    border-top: 1px transparent solid;
    border-bottom: 1px #f0f0f0 solid;
    border-left: 1px #f0f0f0 solid;
    border-right: 1px transparent solid;
}
.both .wx3.b4,
.both .wx3.b7 {
    border-top: 1px #f0f0f0 solid;
    border-bottom: 1px transparent solid;
    border-left: 1px transparent solid;
    border-right: 1px #f0f0f0 solid;
}
.both .wx3.b5,
.both .wx3.b8 {
    border-top: 1px #f0f0f0 solid;
    border-bottom: 1px transparent solid;
    border-left: 1px #f0f0f0 solid;
    border-right: 1px #f0f0f0 solid;
}
.both .wx3.b6,
.both .wx3.b9 {
    border-top: 1px #f0f0f0 solid;
    border-bottom: 1px transparent solid;
    border-left: 1px #f0f0f0 solid;
    border-right: 1px transparent solid;
}

.both .wx3.b0 {
    display: none;
}

@media (max-width: 1199px) {
    .both .wx3 {
        padding: 16px;
        width: calc(100% / 2);
    }

    .both .wx3.b1 {
        border-top: 1px transparent solid;
        border-bottom: 1px #f0f0f0 solid;
        border-left: 1px transparent solid;
        border-right: 1px #f0f0f0 solid;
    }
    .both .wx3.b2 {
        border-top: 1px transparent solid;
        border-bottom: 1px #f0f0f0 solid;
        border-left: 1px #f0f0f0 solid;
        border-right: 1px transparent solid;
    }
    .both .wx3.b3,
    .both .wx3.b7 {
        border-top: 1px #f0f0f0 solid;
        border-bottom: 1px #f0f0f0 solid;
        border-left: 1px transparent solid;
        border-right: 1px #f0f0f0 solid;
    }
    .both .wx3.b4,
    .both .wx3.b8 {
        border-top: 1px #f0f0f0 solid;
        border-bottom: 1px #f0f0f0 solid;
        border-left: 1px #f0f0f0 solid;
        border-right: 1px transparent solid;
    }
    .both .wx3.b5,
    .both .wx3.b9 {
        border-top: 1px #f0f0f0 solid;
        border-bottom: 1px transparent solid;
        border-left: 1px transparent solid;
        border-right: 1px #f0f0f0 solid;
    }
    .both .wx3.b6,
    .both .wx3.b0 {
        border-top: 1px #f0f0f0 solid;
        border-bottom: 1px transparent solid;
        border-left: 1px #f0f0f0 solid;
        border-right: 1px transparent solid;
    }

    .both .wx3.b0 {
        display: inherit;
    }
}

@media (max-width: 499px) {
    .both .wx3 {
        padding: 8px;
    }
}
/* === End === --- --- --- --- --- --- --- --- --- Style：02 --- --- --- */