@media all and (min-width:768px) and (max-width:1023px) {
    .wrapper {
        width: 768px
    }

    .logo {
        margin-left: 15px
    }

    .logo a {
        font-size: 1.5em
    }

    .logo .logo_icon {
        width: 35px;
        height: 35px;
        background-size: 35px 35px
    }

    nav ul {
        padding: 0;
        padding-right: 30px
    }

    nav ul li {
        margin-right: 12px
    }

    nav ul li a {
        font-size: .85em
    }

    .enquiry {
        background: #fff;
        border: 2px solid transparent;
        padding: 8px 16px;
        border-radius: 50px;
        display: inline-block;
        transition: .3s;
        cursor: pointer;
        margin-right: 15px
    }

    .list {
        padding: 50px 0
    }

    .list .banner-list {
        width: 630px;
        height: 840px;
        grid-template-rows: repeat(3, 210px)
    }

    .list .banner-list .deco.l2 {
        top: 820px
    }

    .list .banner-list .deco.r2 {
        top: 820px
    }

    .list .banner-item figure {
        height: 190px;
        width: 190px
    }

    .list .banner-item img,
    .list .banner-item video {
        width: 190px
    }

    .list .banner-card.active {
        width: 630px;
        height: 830px;
        padding: 40px
    }

    .list .banner-card.active figure {
        height: 160px;
        width: 160px
    }

    .list .banner-card.active figure img,
    .list .banner-card.active figure video {
        width: 160px
    }

    .list .banner-card.active .info a {
        padding: 15px 25px
    }

    .description {
        width: 660px
    }

    .rowlist ul {
        width: 660px
    }

    .imgset {
        display: inline-block;
        background-image: url(/res/img/iconset_120.png)
    }

    .icon_150 {
        width: 120px;
        height: 120px
    }

    .icon03-1 {
        background-position: 0 0
    }

    .icon03-2 {
        background-position: -120px 0
    }

    .icon03-3 {
        background-position: -240px 0
    }

    .icon05-1 {
        background-position: 0 -120px
    }

    .icon05-2 {
        background-position: -120px -120px
    }

    .icon05-3 {
        background-position: -240px -120px
    }

    .hoelist ul {
        width: 740px
    }

    .hoelist ul li .img {
        width: 120px;
        height: 150px;
        margin-right: 20px
    }

    .hoelist ul li .img img {
        width: 120px;
        height: 120px
    }
}

@media all and (min-width:480px) and (max-width:767px) {
    .wrapper {
        width: 100%
    }

    .moblie {
        display: flex;
        margin-left: auto;
        margin-right: 15px
    }

    header {
        position: relative
    }

    .logo {
        margin-left: 15px
    }

    .logo a {
        font-size: 1.5em
    }

    .logo .logo_icon {
        width: 35px;
        height: 35px;
        background-size: 35px 35px
    }

    nav {
        display: none;
        position: absolute;
        top: 65px;
        right: 80px;
        background-color: rgba(0, 0, 0, .7);
        border-radius: 10px;
        min-width: 200px;
        z-index: 200
    }

    nav ul {
        padding: 10px 30px
    }

    nav ul li {
        display: block;
        margin-right: 12px
    }

    nav ul li a {
        font-size: .85em;
        display: inline-block;
        line-height: 2.4;
        font-size: 1em
    }

    .enquiry {
        display: none
    }

    .list {
        padding: 50px 0
    }

    .list .info {
        width: 80%;
        margin: 15px auto 0 auto
    }

    .list .banner-list {
        width: 80%;
        height: auto;
        display: block;
        padding: 20px;
        overflow: auto;
        margin: 10px auto
    }

    .list .banner-list .deco.l1,
    .list .banner-list .deco.l2,
    .list .banner-list .deco.r1,
    .list .banner-list .deco.r2 {
        display: none
    }

    .list .banner-item {
        display: inline-block;
        justify-content: center;
        align-items: center;
        width: 50%;
        height: auto;
        padding: 10px
    }

    .list .banner-item figure {
        width: auto;
        height: auto
    }

    .list .banner-item img,
    .list .banner-item video {
        width: 100%;
        height: auto
    }

    .list .banner-card.active {
        position: fixed;
        width: 100%;
        height: 100%;
        padding: 40px 0;
        background-color: rgba(0, 0, 0, .9)
    }

    .list .banner-card.active figure {
        height: 160px;
        width: 160px
    }

    .list .banner-card.active figure img,
    .list .banner-card.active figure video {
        width: 160px
    }

    .list .banner-card.active .info a {
        padding: 15px 25px
    }

    .description {
        width: 80%;
        margin: 0 auto;
        font-size: 1em
    }

    h1 {
        letter-spacing: -1px
    }

    h2 {
        letter-spacing: -3px;
        font-size: 1.8em
    }

    .rowlist ul {
        width: 80%;
        margin: 0 auto
    }

    .rowlist ul {
        display: block;
        width: 80%;
        margin: 20px auto 0 auto
    }

    .rowlist ul li {
        padding: 20px 0
    }

    .rowlist ul li .img {
        width: 120px;
        height: 150px;
        margin-right: 20px
    }

    .rowlist ul li .img img {
        width: 120px;
        height: 120px
    }

    .imgset {
        display: inline-block;
        background-image: url(/res/img/iconset_120.png)
    }

    .icon_150 {
        width: 120px;
        height: 120px
    }

    .icon03-1 {
        background-position: 0 0
    }

    .icon03-2 {
        background-position: -120px 0
    }

    .icon03-3 {
        background-position: -240px 0
    }

    .icon05-1 {
        background-position: 0 -120px
    }

    .icon05-2 {
        background-position: -120px -120px
    }

    .icon05-3 {
        background-position: -240px -120px
    }

    .hoelist ul {
        width: 80%;
        margin: 20px auto 0 auto
    }

    .hoelist ul li {
        display: block;
        padding: 20px 0
    }

    .hoelist ul li .img {
        width: 100%;
        text-align: center
    }

    .hoelist ul li .img img {
        width: 120px;
        height: 120px
    }

    .hoelist ul li .text h3 {
        text-align: center
    }

    #scrollTop {
        position: fixed;
        cursor: pointer;
        right: 50px;
        bottom: 50px;
        display: none;
        width: 45px;
        height: 45px;
        background-image: url(/res/img/scrolltop.svg);
        background-size: 45px 45px
    }

    footer {
        padding: 60px 40px;
        background-color: #0d2e45;
        color: rgba(255, 255, 255, .3);
        font-size: .75em;
        text-align: center
    }

    footer .fwr {
        width: inherit
    }
}

@media all and (max-width:479px) {
    .wrapper {
        width: 100%
    }

    .moblie {
        display: flex;
        margin-left: auto;
        margin-right: 15px
    }

    header {
        position: relative
    }

    .logo {
        margin-left: 20px
    }

    .logo a {
        font-size: 1.5em
    }

    .logo .logo_icon {
        width: 35px;
        height: 35px;
        background-size: 35px 35px
    }

    nav {
        display: none;
        position: absolute;
        top: 65px;
        right: 80px;
        background-color: rgba(0, 0, 0, .7);
        border-radius: 10px;
        min-width: 200px;
        z-index: 200
    }

    nav ul {
        padding: 10px 30px
    }

    nav ul li {
        display: block;
        margin-right: 12px
    }

    nav ul li a {
        font-size: .85em;
        display: inline-block;
        line-height: 2.4;
        font-size: 1em
    }

    .enquiry {
        display: none
    }

    .list {
        padding: 30px 0
    }

    .list .info {
        width: 80%;
        margin: 15px auto 0 auto
    }

    .list .banner-list {
        width: 80%;
        height: auto;
        display: block;
        padding: 10px 0;
        overflow: auto;
        margin: 0 auto
    }

    .list .banner-list .deco.l1,
    .list .banner-list .deco.l2,
    .list .banner-list .deco.r1,
    .list .banner-list .deco.r2 {
        display: none
    }

    .list .banner-item {
        display: inline-block;
        justify-content: center;
        align-items: center;
        width: 50%;
        height: auto;
        padding: 10px
    }

    .list .banner-item figure {
        width: auto;
        height: auto
    }

    .list .banner-item img,
    .list .banner-item video {
        width: 100%;
        height: auto
    }

    .list .banner-card.active {
        position: fixed;
        width: 100%;
        height: 100%;
        padding: 40px 0;
        background-color: rgba(0, 0, 0, .9)
    }

    .list .banner-card.active figure {
        height: 160px;
        width: 160px
    }

    .list .banner-card.active figure img,
    .list .banner-card.active figure video {
        width: 160px
    }

    .list .banner-card.active .info a {
        padding: 15px 25px
    }

    .list .help {
        width: 90%;
        margin: 0 auto;
        padding-top: 20px;
        text-align: center;
        font-size: .7em
    }

    .description {
        width: 90%;
        margin: 0 auto;
        font-size: 1em
    }

    h1 {
        letter-spacing: -1px
    }

    h2 {
        letter-spacing: -2px;
        font-size: 1.5em
    }

    .rowlist ul {
        width: 90%;
        margin: 0 auto
    }

    .rowlist ul {
        display: block;
        width: 90%;
        margin: 20px auto 0 auto
    }

    .rowlist ul li {
        padding: 10px 0
    }

    .rowlist ul li .img {
        width: 120px;
        height: 150px;
        margin-right: 20px
    }

    .rowlist ul li .img img {
        width: 120px;
        height: 120px
    }

    .imgset {
        display: inline-block;
        background-image: url(/res/img/iconset_120.png)
    }

    .icon_150 {
        width: 120px;
        height: 120px
    }

    .icon03-1 {
        background-position: 0 0
    }

    .icon03-2 {
        background-position: -120px 0
    }

    .icon03-3 {
        background-position: -240px 0
    }

    .icon05-1 {
        background-position: 0 -120px
    }

    .icon05-2 {
        background-position: -120px -120px
    }

    .icon05-3 {
        background-position: -240px -120px
    }

    .hoelist ul {
        width: 90%;
        margin: 20px auto 0 auto
    }

    .hoelist ul li {
        display: block;
        padding: 20px 0
    }

    .hoelist ul li .img {
        width: 100%;
        text-align: center
    }

    .hoelist ul li .img img {
        width: 120px;
        height: 120px
    }

    .hoelist ul li .text h3 {
        text-align: center
    }

    #scrollTop {
        position: fixed;
        cursor: pointer;
        right: 50px;
        bottom: 50px;
        display: none;
        width: 45px;
        height: 45px;
        background-image: url(/res/img/scrolltop.svg);
        background-size: 45px 45px
    }

    footer {
        padding: 60px 40px;
        background-color: #0d2e45;
        color: rgba(255, 255, 255, .3);
        font-size: .75em;
        text-align: center
    }

    footer .fwr {
        width: inherit
    }
}