/* tablets col-xxl */
@media (max-width: 1400px) {
    .rwd:after{
        content: 'mx1400';
    }
}
/* tablets col-xl */
@media (max-width: 1200px) {
    .rwd:after{
        content: 'mx1200';
    }
}
/* desktops col-lg  */ 
@media (max-width: 992px) {
    .rwd:after{
        content: 'mx992';
    }
    /**/
    .menu_mobile{
        display: none;
    }
    /**/
    section{
        padding: 50px 0px;
    }
    h2{
        font-size: 20px;
    }
    h3{
        font-size: 24px;
    }
    p{
        font-size: 16px;
    }
    .en{
        display: none;
    }
    /**/
    .hint{
        width: 60px;
        height: 60px;
        font-size: 16px;
    }
    .m_menu{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 8px;
        width: 60px;
        height: 60px;
        position: fixed;
        background-color: rgba(198, 134, 70, .5);
        top: 0;
        left: 0;
        z-index: 10;
    }
    .m_menu span{
        display: block;
        width: 60%;
        margin: 0 auto;
        height: 1px;
        background-color: #fff;
        transition: all .3s;
    }
    .m_menu.active{
        gap: 0;
    }
    .m_menu.active span:nth-child(1){
        transform: rotate(45deg);
    }
    .m_menu.active span:nth-child(2){
        opacity: 0;
    }
    .m_menu.active span:nth-child(3){
        transform: rotate(-45deg);
    }
    .topbar{
        height: 60px;
    }
    .topbar .nav{
        width: 85%;
        max-width: 1440px;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .topbar .nav .logo{
        width: 100px;
        margin: 0 auto;
        position: relative;
        z-index: 11;
    }
    .topbar .nav .menu{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: calc(100vh - 0px);
        position: fixed;
        top: 0px;
        left: 0;
        background-color: rgba(225, 168, 101, .9);
        transform: translateX(-100%);
        transition: all .3s;
    }
    .topbar .nav .menu.active{
        transform: translateX(0%);
    }
    .topbar .nav .menu .item{
        font-size: 20px;
        display: block;
        text-align: center;
    }
    .topbar.active .nav .menu .item{
        color: #fff;
    }
    .topbar .nav .menu .item + .item{
        margin-left: 0;
        margin-top: 20px;
    }
    /**/
    /*.kv{
        background-size: 60%;
    }
    .kv .bg2{
        width: 70%;
    }
    .kv .box{
        width: 60%;
    }*/
    .kv{
        background-image: url(../img/kv-bgm.jpg?v=1);
    }
    .kv .box{
        width: 70%;
    }
    .kv .box .main{
        /*background-image: url(../img/kv-bgm.jpg?v=1);*/
        /*padding-bottom: 153.3%;*/
    }
    .kv .box .t2{
        width: 80%;
        display: block;
    }
    .kv .box .pic + .pic{
        margin-top: 20px;
    }
    /**/
    .s1 .box{
        flex-direction: column;
        gap: 0;
    }
    .s1 .box .image{
        width: 100%;
        margin-bottom: 20px;
    }
    .s1 .box .text{
        width: 100%;
        padding: 0;
        display: block;
    }
    .s1 .box .text h2{
        margin-bottom: 20px;
    }
    /**/
    .s2 .bg{
        width: 50%;
    }
    .s2 .box{
        flex-direction: column;
        gap: 0;
    }
    .s2 .box .image{
        width: 100%;
        margin-bottom: 20px;
    }
    .s2 .box .image .pic img{
        border-radius: 10px;
    }
    .s2 .box .text{
        width: 100%;
        display: block;
    }
    .s2 .box .text h2{
        margin-bottom: 20px;
    }
    /**/
    .s3 .box{
        flex-direction: column;
        gap: 0;
    }
    .s3 .box .image{
        width: 100%;
        margin-bottom: 20px;
    }
    .s3 .box .image .pic img{
        border-radius: 10px;
    }
    .s3 .box .text{
        width: 100%;
        display: block;
    }
    .s3 .box .text h2{
        margin-bottom: 20px;
    }
    /**/
    .s4 .box{
        flex-wrap: wrap;
        gap: 4px;
    }
    .s4 .box .t1{
        background-image: url(../img/s4-1-1.jpg);
    }
    .s4 .box .t2{
        background-image: url(../img/s4-2-1.jpg);
    }
    .s4 .box .t3{
        background-image: url(../img/s4-3-1.jpg);
    }
    .s4 .box .t4{
        background-image: url(../img/s4-4-1.jpg);
    }
    .s4 .box .pic{
        width: calc(50% - 2px);
        padding-bottom: 50%;
    }
    .s4 .box .pic:hover{
        transform: scale(1);
    }
    .s4 .t_con{
        top: 50%;
        left: 50%;
        width: 85%;
        display: 100%;
        padding: 80px 20px 20px 20px;
        transform: translateX(-200%) translateY(-50%);
    }
    .s4 .t_con.active{
        transform: translateX(-50%) translateY(-50%);
    }
    .s4 .t_con .close{
        width: 30px;
        top: 20px;
        left: 20px;
    }
    .s4 .t_con .image{
        display: none;
    }
    .s4 .t_con .text{
        width: 100%;
    }
    .s4 .t_con .text h2{
        font-size: 20px;
    }
    .s4 .t_con .text p{
        margin-top: 20px;
        margin-bottom: 20px;
    }
    /**/
    .s5 .bg{
        bottom: -5%;
        width: 60%;
    }
    .s5 .box{
        flex-direction: column;
        gap: 0;
    }
    .s5 .box .image{
        width: 100%;
        margin-bottom: 20px;
    }
    .s5 .box .image .pic img{
        border-radius: 10px;
    }
    .s5 .box .text{
        width: 100%;
        display: block;
    }
    .s5 .box .text h2{
        margin-bottom: 20px;
    }
    /**/
    .s6 .bg{
        top: auto;
        bottom: 20%;
        width: 50%;
    }
    .s6 .box{
        flex-direction: column;
        gap: 0;
    }
    .s6 .box .image{
        width: 100%;
        margin-bottom: 20px;
    }
    .s6 .box .image .pic img{
        border-radius: 10px;
    }
    .s6 .box .text{
        width: 100%;
        display: block;
    }
    .s6 .box .text h2{
        margin-bottom: 20px;
    }
    .s6 .box .text p + p{
        margin-top: 10px;
    }
    .s6 .box .text p b{
        font-size: 18px;
    }
    /**/
    .s7 .bg1{
        width: 42%;
    }
    .s7 .bg2{
        width: 42%;
        transform: translateY(50%);
    }
    .s7 .box{
        height: 60vh;
    }
    .s7 .box .pic{
        width: 100%;
    }
    /**/
    .s8 .bg{
        width: 50%;
    }
    .s8 .box{
        flex-direction: column;
        gap: 0;
    }
    .s8 .box .image{
        width: 100%;
        margin-bottom: 20px;
    }
    .s8 .box .image .pic img{
        border-radius: 10px;
    }
    .s8 .box .text{
        width: 100%;
        display: block;
    }
    .s8 .box .text h2{
        margin-bottom: 20px;
    }
    /**/
    input[name="name"],
    input[name="phone"],
    select{
        margin-bottom: 10px;
    }
    input[type="checkbox"]{
        transform: scale(1.2);
        margin-right: 0;
    }
    .reservation .gmap .logo{
        width: 70%;
    }
    .reservation form{
        display: block;
        margin-top: 30px;
        display: none;
    }
    .reservation form h2{
        -webkit-writing-mode: unset;
        writing-mode: unset;
        letter-spacing: 4px;
        text-align: center;
        margin-bottom: 20px;
    }
    .reservation form .privacy{
        margin-top: 20px;
    }
    .reservation form .privacy p{
        margin-bottom: 10px;
    }
    .reservation .reg_line{
        margin-top: 30px;
    }
    .reservation .reg_line h2{
        margin-bottom: 10px;
        font-size: 30px;
    }
    .reservation .reg_line img{
        width: 100%;
    }
}

/* tablets col-md */
@media (max-width: 768px) {
    .rwd:after{
        content: 'mx768';
    }
}

/* phones col-sm */
@media (max-width: 576px) {
    .rwd:after{
        content: 'mx576';
    }    
}