@media screen and (max-width:1120px) {

    .banxs,
    .gridpad {
        grid-template-columns: repeat(2, 1fr)
    }

    :root {
        --maxwidth: 740px
    }

    .gridpad {
        gap: 20px
    }

    #testislider,
    .testi {
        width: 100%
    }

    .testi {
        text-align: center;
        border-bottom: 1px solid #f9f9f9;
        margin-bottom: 30px
    }

    .tourbox {
        padding-top: 0
    }

    .boxdetail,
    .boxview {
        width: 100%;
        float: none
    }

    .boxview {
        max-width: 600px;
        margin: 0 auto 30px
    }

    .banxs,
    .sidecontain {
        margin-top: 20px
    }

    .boxdetail {
        border-top: 5px solid rgba(0, 0, 0, .1);
        padding-top: 20px
    }

    .scontain,
    .sidecontain {
        width: 100%;
        padding: 0
    }

    #randomside {
        max-width: 360px;
        margin: 0 auto
    }
}

@media screen and (max-width:768px) {

    .naviku ul,
    .toggleMenu {
        display: block
    }

    .naviku>li,
    .why {
        text-align: left
    }

    :root {
        --maxwidth: 600px
    }

    .naviku {
        background: #222;
        position: absolute;
        z-index: 99;
        left: 0;
        right: 0
    }

    .naviku>li {
        float: none
    }

    .naviku ul {
        width: 100%
    }

    .naviku li li .parent {
        background-image: none
    }

    .naviku li li.hover ul,
    .naviku>li.hover>ul {
        position: static
    }

    .naviku li ul {
        padding: 0;
        background: #444
    }

    #footerwrap,
    .whypad {
        grid-template-columns: repeat(1, 1fr)
    }

    .why img {
        float: left;
        max-width: 100px;
        margin: 0 10px 5px 0
    }

    .why:hover img {
        padding: 5px
    }

    .why h2 {
        margin-top: 5px
    }

    .tourcs {
        display: none
    }

    .tourt {
        display: block;
        text-align: center;
        margin: 0
    }

    .tourc button,
    .tourc select {
        width: 100%;
        margin-right: 0
    }

    .tabdetail {
        margin-top: 0;
        padding-top: 10px
    }

    .ui-tabs .ui-tabs-nav {
        font-size: 90%
    }

    .ui-state-active,
    .ui-widget-content .ui-state-active,
    .ui-widget-content .ui-state-active a,
    .ui-widget-header .ui-state-active {
        background: var(--colorborder)
    }

    .listblog img {
        max-width: 200px
    }

    .copyright {
        grid-column: 1/1
    }

    .jumbo {
        font-size: 200%
    }

    .headline,
    .intro h2,
    .testi h2,
    h1 {
        font-size: 170%
    }

    .big,
    h2 {
        font-size: 150%
    }

    h3 {
        font-size: 130%
    }

    .listblog h2,
    h4 {
        font-size: 110%
    }

    h5 {
        font-size: 100%
    }

    #tourgoal {
        width: 100%;
        border: none;
        padding: 0
    }

    #tourgoal2 {
        width: 100%;
        margin-top: 20px
    }

    .rentdetail img {
        float: none;
        width: 100%;
        margin: 0 auto
    }
}

@media screen and (max-width:640px) {
    :root {
        --autopad: 15px
    }
}

@media screen and (max-width:500px) {

    #headerwrap,
    .blogsearch,
    .invsearch {
        grid-template-columns: repeat(1, 1fr)
    }

    #headerwrap>div {
        text-align: center
    }

    .gridpad {
        gap: 10px
    }

    #tourreview {
        width: 100%;
        padding: 0;
        float: none
    }

    #tourreview img {
        float: left;
        margin: 0 10px 10px 0;
        max-width: 200px
    }

    #tourform {
        width: 100%;
        margin-top: 20px
    }

    #datetour,
    .jumdiv {
        width: 100%;
        margin-bottom: 0
    }

    .harpil {
        font-size: 95%
    }

    .tomb {
        width: 100%;
        margin: 15px 0 10px
    }

    .toursent {
        padding: 10px
    }
}

@media screen and (max-width:420px) {
    .gridpad {
        grid-template-columns: repeat(1, 1fr);
        padding: 10px 15px;
        gap: 15px
    }

    .listblog img {
        max-width: 100px;
        padding: 5px;
        margin: 5px 10px 2px 0
    }

    .newsticker:after,
    .newsticker:before,
    .pilhar {
        display: none
    }

    #tourgoal img,
    #tourreview img {
        float: none;
        margin: 0 0 10px;
        max-width: 100%;
        display: block
    }

    #captcha_code,
    #captchaimg,
    .element1,
    .element2,
    .element3 {
        width: 100%;
        float: none
    }
}