@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display&family=Poppins&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic+Coding&display=swap');
/* font-family: 'Playfair Display', serif;
font-family: 'Poppins', sans-serif; */
/* font-family: 'Nanum Gothic Coding', monospace; */



@media screen and (max-width:750px){
    .fff{
        background-color: #fff;
    }
    #slider{
        /* background-image: url(../img/main/main.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-position: bottom;
        background-attachment:  fixed; */
        min-width: 100%;
        height: 700px;
        display: flex;
        align-items: center;
    }
    #clickmenu li:not(:first-of-type) a{
        color: #fff;
    }
    #wrap::after{
        content: '';
        position: fixed;
        top:0;
        left: 0;
        width: 100%;
        height: 100vh;
        z-index: -1;
        background-image: url(../img/main/main.jpg);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        /* -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover; */
    }
    #content{
        width:100%;
        height: 50%;
        display: flex;
        justify-content: space-around;
        align-items: center;
    }
    #content_text{
        width: 80%;
        transform: translate(0,150px);
        transition: 1s ease-out;
    
    }
    #content_text>h1{
        font-family: 'Playfair Display', serif;
        color: #fff;
        font-size: 45px;
        margin-bottom: 30px;
    }
    #content_text .button{
        width: 140px;
        display: inline-block;
        padding: 12px 0;
        border-radius: 4px;
        border: none;
        font-family: 'Poppins', sans-serif;
        text-align: center;
        transition: all 0.3s ease-out;
        font-size: 13px;
        color: #333;
        letter-spacing: 3px;
    
    }
    #content_text .button:first-of-type{
        background-color: #fad091;
        color: #fff;
        border: 1px solid #fad091;
    
    }
    #content_text .button:first-of-type:hover{
        background-color: transparent;
        color: #fad091;
    }
    #content_text .button:nth-of-type(2){
        background-color: #fff;
        border: 1px solid #fff;
    
    }
    #content_text .button:nth-of-type(2):hover{
        background-color: transparent;
        color: #fff;
    }
    .content_form{

        width: 100%;
        height: 450px;
        margin: 0 auto;
        display: flex;
        justify-content: center;
        align-items: center;
        
        
    }
    .hideform{
        display: none;
    }
    .content_form>form{
        width: 90%;
        height: 400px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        align-content: space-around;
        box-shadow: 0px 10px 5px 1px #ccc;
        background-color: #fff;
        border-radius: 10px;




    }
    .content_form>form input,.content_form>form select{
        font-family: 'Poppins', sans-serif;
    }
    .content_form>form input:first-of-type{
        width: 90%;
        height: 40px;
        border-radius: 5px;
        border: none;
        background-color: #f3f4f7;
        padding: 0 0 0 10px;
    
    }
    .content_form>form input:not(:first-of-type),
    .content_form>form select{
        height: 40px;
        width: 40%;
        border-radius: 5px;
        border: none;
        background-color: #f3f4f7;
        padding: 0 0 0 10px;
        font-weight: 100;
    
    
    }
    .content_form>form select{
        font-family: 'Poppins', sans-serif,'Nanum Gothic Coding', monospace; 
        color: #777;
    }
    .option_color{
        color: #777;
    }
    .content_form>form input[type='submit']{
        width: 90%;
        height: 40px;
        background-color: #fad091;
        border: 1px solid #fad091;
        border-radius: 5px;
        color: #fff;
        padding: 0 0 0 0px;
        cursor: pointer;
        transition: all 0.3s ease-out;
        font-weight: bold;
        letter-spacing: 3px;
    }
    .content_form>form input[type='submit']:hover{
        background-color: transparent;
        color: #fad091;
    }
    .content_form>form h3{
        width: 90%;
        height: 40px;
        font-family:'Playfair Display', serif;
        font-weight: 100;
        font-size: 25px;
    }
    select option[value=""][disabled]{
        display: none;
    }
    #price{
        width: 100%;
        height: 1400px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        font-family: 'Poppins', sans-serif,'Nanum Gothic Coding';
        opacity: 0;
        transition: 1s ease-out;
        align-items: center;
        transform: translate(0,400px);

    }
    #price>div{
        width: 75%;
        height: 400px;
        background-color: #fff;
        border-radius: 10px;
        display: flex;
        flex-direction: column;
        /* border: 1px solid black; */
        overflow: hidden;
        align-items: center;
        justify-content: space-around;
        box-shadow: 0px 10px 5px 1px #ccc;
        
    }
    #price ul{
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    #price ul li>a{
        width: 120px;
        display: block;
        padding: 10px 0;
        border-radius: 4px;
        border: none;
        font-family: 'Nanum Gothic Coding';
        text-align: center;
        transition: all 0.3s ease-out;
        font-size: 12px;
        letter-spacing: 3px;
        background-color: #fad091;
        color: #fff;
        border: 1px solid #fad091;
    }
    #price ul li{
        font-size: 12px;
        letter-spacing: 3px;
        padding: 5px 0;
        color: #333;
        font-weight: bold;
        text-align: center;
    }
    #price ul li>a:hover{
        background-color: transparent;
        color: #fad091;
    }
    #price img{
        width: 100%;
        height: 100%;
    }
    #small>div,#mid>div,#large>div{
        width: 90%;
        height: 55%;
        /* border: 2px solid #fad091; */
        overflow: hidden;
        border-radius: 10px;
    
    }
    #room{
        width: 100%;
        height: 3500px;

        display: flex;
        flex-direction: column;
        background-color: #f3f4f7;
        /* transform: translate(0, 400px); */
        transition: 1s ease-out;
    }
    
    #room>h2{
        width: 100%;
        text-align: center;
        font-size: 54px;
        font-family: 'Playfair Display', serif;
        font-weight: 100;
        padding: 50px 0;
    }
    #room>div{
        width: 100%;
        height: 800px;
        display: flex;
        flex-direction: column;
        transition: 1s ease-out;
        transform: translate(0, 400px);
        opacity: 0;
        
    }
    #room>div img{
        width: 100%;
        height: 50%;
    }
    #room .detail{
        height: 50%;
        width: 100%;
        position: relative;
        transition: all 0.4s ease-out;
        background-color: #fff;
        order: 1;
       
    
    }
    /* .first::after{
        content: "";
        width: 0;
        height: 0;
        border-right: 20px solid #fff;
        border-bottom:15px solid transparent ;
        border-top:15px solid transparent ;
        border-left:0px solid transparent ;
        position: absolute;
        top: 50%;
        left: -20px;
        transform: translateY(-50%);
        transition: all 0.4s ease-out;
    
    } */
    /* .second::after{
        content: "";
        width: 0;
        height: 0;
        border-right: 0px solid transparent;
        border-bottom:15px solid transparent ;
        border-top:15px solid transparent ;
        border-left:20px solid  #fff;
        position: absolute;
        top: 50%;
        right: -20px;
        transform: translateY(-50%);
        transition: all 0.4s ease-out;
    
    } */
    #room .detail:hover{
        background-color: #fad091;
    }
    #room .detail:hover  p{
        color: #fff;
    }
    #room .detail:hover a{
        border: none
    }
    .first:hover::after{
        border-right: 20px solid #fad091;
    }
    .second:hover::after{
        border-left: 20px solid #fad091;
    }
    #room .detail{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .detail p{
        padding: 10px 0;
        font-family: 'Playfair Display', 'Nanum Gothic Coding';
        font-weight: bold;
        color: #333;
        
    
        /* font-size: 30px; */
    }
    .detail p:first-of-type{
        font-size: 30px;
        font-weight:normal
    }
    /* .detail p:nth-of-type(2){
        font-weight: bold;
    } */
    .detail a{
        color: #333;
        background-color: #fff;
        border: 1px solid #999;
        margin-top: 10px;
        padding: 10px 15px;
        border-radius: 5px;
        font-family: 'Poppins', sans-serif;
    }
    .poppins{
        font-family: 'Poppins', sans-serif !important;
    
    }
    .bgbox{
        background-color: #f3f4f7;
        width: 100%;
       
    }
    .bgbox h2{
        text-align: center;
        font-size: 54px;
        font-family: 'Playfair Display', serif;
        font-weight: 100;
        padding: 50px 0;
    }
    #space{
        width:90%;
        height: 400px;
        overflow: hidden;
        /* display: flex; */
        /* justify-content: space-around; */
        position: relative;
        transform: translate(0, 300px);
        transition: 1s ease-out;
        opacity: 0;
        margin: 0 auto;
    }
    #space>div>div{
        width: 8%;
        height: 290px;
        border: 1px solid #fad091;
        background-color: #fad091;
        font-family: 'Nanum Gothic Coding', monospace; 
        color: #fff;
        font-weight: bold;
        border-radius: 5px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
        box-shadow: 0px 5px 5px #ccc;
        /* margin: 0 10px; */
        transition: all 1s ease;

    }
    #album{
        position: absolute;
        display: flex;
        justify-content: space-around;
        transition: all 1s ease;
    }
    .space_img{
        width: 94%;
        height: 86%;
        border-radius: 5px;
        overflow: hidden;
    }
    .space_img img{
        width: 100%;
        height: 100%;
    }
    #dot{
        display: flex;
        justify-content: center;
        width: 100%;
        position: absolute;
        bottom: 60px;
    }
    #dot .init{
        display: inline-block;
        background-color: #fad091;
        width: 18px;
        height: 18px;
        margin: 0 5px;
        border-radius: 50%;
        cursor: pointer;
    }
    
    #con{
        width: 100%;
        height: 1800px;
        display: flex;
        flex-direction: column;
        transform: translate(0, 400px);
        transition: 1s ease-out;
        align-items: center;
        justify-content: space-around;
    }
    #con>div{
        width: 90%;
        height: 800px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    #con>div:nth-of-type(2){
        align-items: center;
    }
    #con>div img{
        height: 80%;
    }
    #con>div:first-of-type p{
        height: 15%;
    }
    #con>h2{
        height: 20%;
    }
    #con span{
        color: #fad091;
        font-family: 'Poppins', sans-serif;
        font-weight: bold;
        font-size: 25px;
    }
    #con>div>p{
        /* width: 95%; */
        font-family:'Nanum Gothic Coding',monospace;
        font-size: 17px;
    }
    #con #con_line{
        line-height: 28px;
        width: 90%;
    }
    #con_h2{
        padding: 20px 0 0px 0;
    }
    #check{
        width: 100%;
        height: 70%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
    }
    #check>div{
        width: 48%;
        height:20%;
        /* background-color: pink; */
        display: flex;
        align-items: center;
        justify-content: space-around;
    }
    .check_list{
        width: 40px;
        height: 40px;
        /* background-color: #41f08f; */
        background-color: #fad091;
        border-radius: 50%;
        background-image: url(../img/main/check.png);
        background-position: center;
        background-size: cover;
    }
    .check_text{
        width: 75%;
        height: 100%;
        font-size: 12px;
        
    }
    .check_text p{
        font-size: 13px;
        font-weight: bold;
        padding-bottom: 10px;
    }
    
    #bgimg{
        width: 100%;
        height: 300px;
        /* background-image: url(../img/main/main.jpg);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        background-attachment: fixed ;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover; */
    }
    /* #bgimg::after{
        content: '';
        position: fixed;
        top:0;
        left: 0;
        width: 100%;
        height: 100vh;
        z-index: -1;
        background-image: url(../img/main/main_small.jpg);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
    } */
    #filter{
        width: 100%;
        height: 100%;
        background-color: rgba(250, 208, 145,0.6);
    
    }
    #bgtxt{
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        opacity: 0;
        transform: translate(0, 200px);
        transition: 1s ease-out;
        
    }
    #bgimg h2{
        font-size: 42px;
        color: white;
        font-family: 'Playfair Display', serif;
        text-align: center;
       
    }
    #btnbox{
        margin-top: 20px;
    }
    #bgimg a{
        width: 140px;
        display: inline-block;
        padding: 12px 0;
        border-radius: 4px;
        border: none;
        font-family: 'Poppins', sans-serif;
        text-align: center;
        transition: all 0.3s ease-out;
        font-size: 13px;
        color: #333;
        letter-spacing: 3px;
    }
    #bgimg a:first-of-type{
        background-color: #fad091;
        color: #fff;
        border: 1px solid #fad091;
    
    }
    #bgimg a:first-of-type:hover{
        background-color: transparent;
        color: #fad091;
    }
    #bgimg a:nth-of-type(2){
        background-color: #fff;
        border: 1px solid #fff;
    
    }
    #bgimg a:nth-of-type(2):hover{
        background-color: transparent;
        color: #fff;
    }
    
    #news{
        width: 100%;
        height: 1800px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        transform: translate(0, 200px);
        transition: 1s ease-out;
        opacity: 0;
    }
    #news>div{
        width: 80%;
        height: 500px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        border-radius: 5px;
        overflow: hidden;
        box-shadow: 0px 10px 5px 1px #ccc;
        font-family: 'Poppins', sans-serif;
    
    }
    .news_img{
        width: 100%;
        height: 60%;
        background-color: #fad091;
    }
    .news_img img{
        width: 100%;
        height: 100%;
    }
    .news_date{
        width: 90%;
        height: 5%;
        color: #fad091;
        text-align: center;
    }
    .news_text span{
        font-weight: bold;
        font-size: 15px;
    }
    .news_text{
        width: 90%;
        height: 30%;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        color: #666;
        line-height: 30px;
        font-size: 14px;
        text-align: center;
    
    
    }
    #news a{
        width: 125px;
        display: block;
        padding: 4px 0;
        border-radius: 4px;
        border: none;
        font-family: 'Poppins', sans-serif;
        text-align: center;
        transition: all 0.3s ease-out;
        font-size: 14px;
        letter-spacing: 2px;
        background-color: #fad091;
        color: #fff;
        border: 1px solid #fad091;
    }
    
    #news a:hover{
        background-color: transparent;
        color: #fad091  ;
    }
   
    #follow{
        margin-top: 30px;
        height: 50px !important;
    }
    #foot .sns{
        width: 40px;
        height: 40px;
        /* background-color: #fad091; */
        border-radius: 5px;
        margin-right: 10px;
        border: 1px solid rgba(255, 255, 255, 0.1);
        background-image: url(../img/main/twitter.png);
        background-position: center;
        /* background-size: cover; */
        background-size: 60%;
        background-repeat: no-repeat;
    }
    #foot .sns:nth-of-type(2){
        background-image: url(../img/main/facebook.png);
    }
    #foot .sns:nth-of-type(3){
        background-image: url(../img/main/insta.png);
    }
    
}
@media screen and (min-width:751px) and (max-width:1199px){
    #slider{
        background-image: url(../img/main/main.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: bottom;
        width: 100%;
        height: 900px;
        background-attachment: fixed;
        display: flex;
        align-items: center;
    }
    #content{
        width:100%;
        height: 50%;
        display: flex;
        justify-content: space-around;
        align-items: center;
    }
    #content_text{
        width: 45%;
        transform: translate(0,150px);
        transition: 1s ease-out;
    
    }
    #content_text>h1{
        font-family: 'Playfair Display', serif;
        color: #fff;
        font-size: 45px;
        margin-bottom: 30px;
    }
    #content_text .button{
        width: 140px;
        display: inline-block;
        padding: 12px 0;
        border-radius: 4px;
        border: none;
        font-family: 'Poppins', sans-serif;
        text-align: center;
        transition: all 0.3s ease-out;
        font-size: 13px;
        color: #333;
        letter-spacing: 3px;
    
    }
    #content_text .button:first-of-type{
        background-color: #fad091;
        color: #fff;
        border: 1px solid #fad091;
    
    }
    #content_text .button:first-of-type:hover{
        background-color: transparent;
        color: #fad091;
    }
    #content_text .button:nth-of-type(2){
        background-color: #fff;
        border: 1px solid #fff;
    
    }
    #content_text .button:nth-of-type(2):hover{
        background-color: transparent;
        color: #fff;
    }
    .content_form{
        width: 40%;
        background-color: #fff;
        border-radius: 10px;
        
    }
    .small_form{
        display: none;
    }
    .content_form>form{
        width: 100%;
        height: 400px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        align-content: space-around;
    }
    .content_form>form input,.content_form>form select{
        font-family: 'Poppins', sans-serif;
    }
    .content_form>form input:first-of-type{
        width: 90%;
        height: 40px;
        border-radius: 5px;
        border: none;
        background-color: #f3f4f7;
        padding: 0 0 0 10px;
    
    }
    .content_form>form input:not(:first-of-type),
    .content_form>form select{
        height: 40px;
        width: 40%;
        border-radius: 5px;
        border: none;
        background-color: #f3f4f7;
        padding: 0 0 0 10px;
        font-weight: 100;
    
    
    }
    .content_form>form select{
        font-family: 'Poppins', sans-serif,'Nanum Gothic Coding', monospace; 
        color: #777;
    }
    .option_color{
        color: #777;
    }
    .content_form>form input[type='submit']{
        width: 90%;
        height: 40px;
        background-color: #fad091;
        border: 1px solid #fad091;
        border-radius: 5px;
        color: #fff;
        padding: 0 0 0 0px;
        cursor: pointer;
        transition: all 0.3s ease-out;
        font-weight: bold;
        letter-spacing: 3px;
    }
    .content_form>form input[type='submit']:hover{
        background-color: transparent;
        color: #fad091;
    }
    .content_form>form h3{
        width: 90%;
        height: 40px;
        font-family:'Playfair Display', serif;
        font-weight: 100;
        font-size: 25px;
    }
    select option[value=""][disabled]{
        display: none;
    }
    #price{
        width: 100%;
        height: 500px;
        margin: 0px auto;
        display: flex;
        justify-content: space-around;
        font-family: 'Poppins', sans-serif,'Nanum Gothic Coding';
        opacity: 0;
        transition: 1s ease-out;
    }
    #price>div{
        width: 30% ;
        height: 420px;
        background-color: #fff;
        border-radius: 10px;
        display: flex;
        flex-direction: column;
        /* border: 1px solid black; */
        overflow: hidden;
        align-items: center;
        justify-content: space-around;
        box-shadow: 0px 10px 5px 1px #ccc;
        
    }
    #price ul{
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    #price ul li>a{
        width: 120px;
        display: block;
        padding: 10px 0;
        border-radius: 4px;
        border: none;
        font-family: 'Nanum Gothic Coding';
    
        text-align: center;
        transition: all 0.3s ease-out;
        font-size: 12px;
        letter-spacing: 3px;
        background-color: #fad091;
        color: #fff;
        border: 1px solid #fad091;
    }
    #price ul li{
        font-size: 12px;
        letter-spacing: 3px;
        padding: 5px 0;
        color: #333;
        font-weight: bold;
        text-align: center;
    }
    #price ul li>a:hover{
        background-color: transparent;
        color: #fad091;
    }
    #price img{
        width: 100%;
        height: 100%;
    }
    #small>div,#mid>div,#large>div{
        width: 90%;
        height: 55%;
        /* border: 2px solid #fad091; */
        overflow: hidden;
        border-radius: 10px;
    
    }
    /* #small{
        background-image: url(../img/main/price1.jpg);
        background-repeat: no-repeat;
        background-size: 100%;
    }
    #mid{
        background-image: url(../img/main/price2.jpg);
        background-repeat: no-repeat;
        background-size: 100%;
    } */
    
    #room{
        width: 100%;
        display: flex;
        /* flex-wrap: wrap; */
        flex-direction: column;
        background-color: #f3f4f7;
    }
    
    #room>h2{
        width: 100%;
        text-align: center;
        font-size: 54px;
        font-family: 'Playfair Display', serif;
        font-weight: 100;
        padding: 50px 0;
    }
    #room>div{
        width: 100%;
        height: 400px;
        display: flex;
        opacity: 0;
        transform: translate(0, 400px);
    
        transition: 1s ease-out;
        
    }
    #room>div img{
        width: 50%;
    }
    #room .detail{
        width: 50%;
        position: relative;
        transition: all 0.4s ease-out;
        background-color: #fff;
       
    
    }

    .first::after{
        content: "";
        width: 0;
        height: 0;
        border-right: 20px solid #fff;
        border-bottom:15px solid transparent ;
        border-top:15px solid transparent ;
        border-left:0px solid transparent ;
        position: absolute;
        top: 50%;
        left: -20px;
        transform: translateY(-50%);
        transition: all 0.4s ease-out;
    
    }
    .second::after{
        content: "";
        width: 0;
        height: 0;
        border-right: 0px solid transparent;
        border-bottom:15px solid transparent ;
        border-top:15px solid transparent ;
        border-left:20px solid  #fff;
        position: absolute;
        top: 50%;
        right: -20px;
        transform: translateY(-50%);
        transition: all 0.4s ease-out;
    
    }
    #room .detail:hover{
        background-color: #fad091;
    }
    #room .detail:hover  p{
        color: #fff;
    }
    #room .detail:hover a{
        border: none
    }
    .first:hover::after{
        border-right: 20px solid #fad091;
    }
    .second:hover::after{
        border-left: 20px solid #fad091;
    }
    #room .detail{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .detail p{
        padding: 10px 0;
        font-family: 'Playfair Display', 'Nanum Gothic Coding';
        font-weight: bold;
        color: #333;
        
    
        /* font-size: 30px; */
    }
    .detail p:first-of-type{
        font-size: 30px;
        font-weight:normal
    }
    /* .detail p:nth-of-type(2){
        font-weight: bold;
    } */
    .detail a{
        color: #333;
        background-color: #fff;
        border: 1px solid #999;
        margin-top: 10px;
        padding: 10px 15px;
        border-radius: 5px;
        font-family: 'Poppins', sans-serif;
    }
    .poppins{
        font-family: 'Poppins', sans-serif !important;
    
    }
    .bgbox{
        background-color: #f3f4f7;
        width: 100%;
       
    }
    .bgbox h2{
        text-align: center;
        font-size: 54px;
        font-family: 'Playfair Display', serif;
        font-weight: 100;
        padding: 50px 0;
    }
    #space{
        width: 90%;
        height: 400px;
        overflow: hidden;
        margin: 0 auto;
        /* display: flex; */
        /* justify-content: space-between; */
        position: relative;
        transform: translate(0, 300px);
        transition: 1s ease-out;
        opacity: 0;
    }
    #space>div>div{
        width: 8%;
        height: 290px;
        border: 1px solid #fad091;
        background-color: #fad091;
        font-family: 'Nanum Gothic Coding', monospace; 
        color: #fff;
        font-weight: bold;
        border-radius: 5px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
        box-shadow: 0px 5px 5px #ccc;
        /* margin-right: 100px; */
        
    }
    #album{
        position: absolute;
        /* width: 1800px; */
        display: flex;
        justify-content: space-around;
        transition: all 1s ease;
    }
    .space_img{
        width: 94%;
        height: 86%;
        border-radius: 5px;
        overflow: hidden;
    }
    .space_img img{
        width: 100%;
        height: 100%;
    }
    #dot{
        display: flex;
        justify-content: center;
        width: 1100px;
        position: absolute;
        bottom: 60px;
    }
    #dot .init{
        display: inline-block;
        background-color: #fad091;
        width: 18px;
        height: 18px;
        margin: 0 5px;
        border-radius: 50%;
        cursor: pointer;
    }
    
    #con{
        width: 100%;
        height: 900px;
        margin: 0 auto;
        display: flex;
        transform: translate(0, 400px);
        transition: 1s ease-out;
    }
    #con>div{
        width: 50%;
        height: 800px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    #con>div:nth-of-type(2){
        align-items: center;
    }
    #con>div img{
        height: 80%;
    }
    #con>div:first-of-type p{
        height: 15%;
    }
    #con>h2{
        height: 20%;
    }
    #con span{
        color: #fad091;
        font-family: 'Poppins', sans-serif;
        font-weight: bold;
        font-size: 25px;
    }
    #con>div>p{
        /* width: 95%; */
        font-family:'Nanum Gothic Coding',monospace;
        font-size: 17px;
    }
    #con #con_line{
        line-height: 28px;
        width: 90%;
    }
    #con_h2{
        padding: 20px 0 0px 0;
    }
    #check{
        width: 100%;
        height: 70%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
    }
    #check>div{
        width: 48%;
        height:20%;
        /* background-color: pink; */
        display: flex;
        align-items: center;
        justify-content: space-around;
    }
    .check_list{
        width: 60px;
        height: 60px;
        /* background-color: #41f08f; */
        background-color: #fad091;
        border-radius: 50%;
        background-image: url(../img/main/check.png);
        background-position: center;
        background-size: cover;
    }
    .check_text{
        width: 75%;
        font-size: 12px;
        
    }
    .check_text p{
        font-size: 13px;
        font-weight: bold;
        padding-bottom: 10px;
    }
    
    #bgimg{
        width: 100%;
        height: 300px;
        background-image: url(../img/main/main.jpg);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        
        background-attachment: fixed ;
    
        
        
    }
    #filter{
        width: 100%;
        height: 100%;
        background-color: rgba(250, 208, 145,0.6);
    
    }
    #bgtxt{
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        opacity: 0;
        transform: translate(0, 200px);
        transition: 1s ease-out;
        
    }
    #bgimg h2{
        font-size: 60px;
        color: white;
        font-family: 'Playfair Display', serif;
        text-align: center;
       
    }
    #btnbox{
        margin-top: 20px;
    }
    #bgimg a{
        width: 140px;
        display: inline-block;
        padding: 12px 0;
        border-radius: 4px;
        border: none;
        font-family: 'Poppins', sans-serif;
        text-align: center;
        transition: all 0.3s ease-out;
        font-size: 13px;
        color: #333;
        letter-spacing: 3px;
    }
    #bgimg a:first-of-type{
        background-color: #fad091;
        color: #fff;
        border: 1px solid #fad091;
    
    }
    #bgimg a:first-of-type:hover{
        background-color: transparent;
        color: #fad091;
    }
    #bgimg a:nth-of-type(2){
        background-color: #fff;
        border: 1px solid #fff;
    
    }
    #bgimg a:nth-of-type(2):hover{
        background-color: transparent;
        color: #fff;
    }
    
    #news{
        width: 100%;
        margin: 0 auto;
        height: 600px;
        display: flex;
        justify-content: space-around;
        transform: translate(0, 200px);
        transition: 1s ease-out;
        opacity: 0;
    }
    #news>div{
        width:30%;
        height: 500px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        border-radius: 5px;
        overflow: hidden;
        box-shadow: 0px 10px 5px 1px #ccc;
        font-family: 'Poppins', sans-serif;
    
    }
    .news_img{
        width: 100%;
        height: 50%;
        background-color: #fad091;
    }
    .news_img img{
        width: 100%;
        height: 100%;
    }
    .news_date{
        width: 90%;
        height: 5%;
        color: #fad091;
        text-align: center;
    }
    .news_text span{
        font-weight: bold;
        font-size: 15px;
    }
    .news_text{
        width: 90%;
        height: 40%;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        color: #666;
        line-height: 30px;
        font-size: 14px;
        text-align: center;
    
    
    }
    .news_text p{
        height: 65%;
    }
    #news a{
        width: 125px;
        display: block;
        padding: 4px 0;
        border-radius: 4px;
        border: none;
        font-family: 'Poppins', sans-serif;
        text-align: center;
        transition: all 0.3s ease-out;
        font-size: 14px;
        letter-spacing: 2px;
        background-color: #fad091;
        color: #fff;
        border: 1px solid #fad091;
    }
    
    #news a:hover{
        background-color: transparent;
        color: #fad091  ;
    }
}
@media screen and (min-width:1200px){
    #slider{

        background-image: url(../img/main/main.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        width: 100%;
        height: 900px;
        background-attachment: fixed;
        display: flex;
        align-items: center;
    }
    #content{
        width: 1100px;
        margin: 0 auto;
        height: 50%;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    #content_text{
        width: 600px;
        transform: translate(0,150px);
        transition: 1s ease-out;
    
    }
    #content_text>h1{
        font-family: 'Playfair Display', serif;
        color: #fff;
        font-size: 70px;
        margin-bottom: 30px;
    }
    #content_text .button{
        width: 140px;
        display: inline-block;
        padding: 12px 0;
        border-radius: 4px;
        border: none;
        font-family: 'Poppins', sans-serif;
        text-align: center;
        transition: all 0.3s ease-out;
        font-size: 13px;
        color: #333;
        letter-spacing: 3px;
    
    }
    #content_text .button:first-of-type{
        background-color: #fad091;
        color: #fff;
        border: 1px solid #fad091;
    
    }
    #content_text .button:first-of-type:hover{
        background-color: transparent;
        color: #fad091;
    }
    #content_text .button:nth-of-type(2){
        background-color: #fff;
        border: 1px solid #fff;
    
    }
    #content_text .button:nth-of-type(2):hover{
        background-color: transparent;
        color: #fff;
    }
    .content_form{
        width: 350px;
        background-color: #fff;
        border-radius: 10px;
        
    }
    .small_form{
        display: none;
    }
    .content_form>form{
        width: 100%;
        height: 400px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        align-content: space-around;
        margin: 0 0 0 0px;
    
    
    }
    .content_form>form input,.content_form>form select{
        font-family: 'Poppins', sans-serif;
    }
    .content_form>form input:first-of-type{
        width: 320px;
        height: 40px;
        border-radius: 5px;
        border: none;
        background-color: #f3f4f7;
        padding: 0 0 0 10px;
    
    }
    .content_form>form input:not(:first-of-type),
    .content_form>form select{
        height: 40px;
        width: 150px;
        border-radius: 5px;
        border: none;
        background-color: #f3f4f7;
        padding: 0 0 0 10px;
        font-weight: 100;
    
    
    }
    .content_form>form select{
        font-family: 'Poppins', sans-serif,'Nanum Gothic Coding', monospace; 
        color: #777;
    }
    .option_color{
        color: #777;
    }
    .content_form>form input[type='submit']{
        width: 320px;
        height: 40px;
        background-color: #fad091;
        border: 1px solid #fad091;
        border-radius: 5px;
        color: #fff;
        padding: 0 0 0 0px;
        cursor: pointer;
        transition: all 0.3s ease-out;
        font-weight: bold;
        letter-spacing: 3px;
    }
    .content_form>form input[type='submit']:hover{
        background-color: transparent;
        color: #fad091;
    }
    .content_form>form h3{
        width: 320px;
        height: 40px;
        font-family:'Playfair Display', serif;
        font-weight: 100;
        font-size: 25px;
    }
    select option[value=""][disabled]{
        display: none;
    }
    #price{
        width: 1100px;
        height: 500px;
        margin: 0px auto;
        display: flex;
        justify-content: space-between;
        font-family: 'Poppins', sans-serif,'Nanum Gothic Coding';
        opacity: 0;
        transition: 1s ease-out;
    }
    #price>div{
        width: 340px ;
        height: 420px;
        background-color: #fff;
        border-radius: 10px;
        display: flex;
        flex-direction: column;
        /* border: 1px solid black; */
        overflow: hidden;
        align-items: center;
        justify-content: space-around;
        box-shadow: 0px 10px 5px 1px #ccc;
        
    }
    #price ul{
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    #price ul li>a{
        width: 120px;
        display: block;
        padding: 10px 0;
        border-radius: 4px;
        border: none;
        font-family: 'Nanum Gothic Coding';
    
        text-align: center;
        transition: all 0.3s ease-out;
        font-size: 12px;
        letter-spacing: 3px;
        background-color: #fad091;
        color: #fff;
        border: 1px solid #fad091;
    }
    #price ul li{
        font-size: 12px;
        letter-spacing: 3px;
        padding: 5px 0;
        color: #333;
        font-weight: bold;
        text-align: center;
    }
    #price ul li>a:hover{
        background-color: transparent;
        color: #fad091;
    }
    #price img{
        width: 100%;
        height: 100%;
    }
    #small>div,#mid>div,#large>div{
        width: 90%;
        height: 55%;
        /* border: 2px solid #fad091; */
        overflow: hidden;
        border-radius: 10px;
    
    }
    /* #small{
        background-image: url(../img/main/price1.jpg);
        background-repeat: no-repeat;
        background-size: 100%;
    }
    #mid{
        background-image: url(../img/main/price2.jpg);
        background-repeat: no-repeat;
        background-size: 100%;
    } */
    
    #room{
        width: 100%;
        display: flex;

        flex-wrap: wrap;
        background-color: #f3f4f7;
        transform: translate(0, 400px);
        transition: 1s ease-out;
    }
    
    #room>h2{
        width: 100%;
        text-align: center;
        font-size: 54px;
        font-family: 'Playfair Display', serif;
        font-weight: 100;
        padding: 50px 0;
    }
    #room>div{
        width: 50%;
        height: 400px;
        display: flex;
        opacity: 1;
        /* transition: 1s ease-out; */
        
    }
    #room>div img{
        width: 50%;
    }
    #room .detail{
        width: 50%;
        position: relative;
        transition: all 0.4s ease-out;
        background-color: #fff;
       
    
    }
    .room_right{
        transform: translate(-1000px, 400px);
        transition: 1.3s ease-out;
    }
    .room_left{
        transform: translate(1000px, 400px);
    
        transition: 1.3s ease-out;
    }
    .first::after{
        content: "";
        width: 0;
        height: 0;
        border-right: 20px solid #fff;
        border-bottom:15px solid transparent ;
        border-top:15px solid transparent ;
        border-left:0px solid transparent ;
        position: absolute;
        top: 50%;
        left: -20px;
        transform: translateY(-50%);
        transition: all 0.4s ease-out;
    
    }
    .second::after{
        content: "";
        width: 0;
        height: 0;
        border-right: 0px solid transparent;
        border-bottom:15px solid transparent ;
        border-top:15px solid transparent ;
        border-left:20px solid  #fff;
        position: absolute;
        top: 50%;
        right: -20px;
        transform: translateY(-50%);
        transition: all 0.4s ease-out;
    
    }
    #room .detail:hover{
        background-color: #fad091;
    }
    #room .detail:hover  p{
        color: #fff;
    }
    #room .detail:hover a{
        border: none
    }
    .first:hover::after{
        border-right: 20px solid #fad091;
    }
    .second:hover::after{
        border-left: 20px solid #fad091;
    }
    #room .detail{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .detail p{
        padding: 10px 0;
        font-family: 'Playfair Display', 'Nanum Gothic Coding';
        font-weight: bold;
        color: #333;
        
    
        /* font-size: 30px; */
    }
    .detail p:first-of-type{
        font-size: 30px;
        font-weight:normal
    }
    /* .detail p:nth-of-type(2){
        font-weight: bold;
    } */
    .detail a{
        color: #333;
        background-color: #fff;
        border: 1px solid #999;
        margin-top: 10px;
        padding: 10px 15px;
        border-radius: 5px;
        font-family: 'Poppins', sans-serif;
    }
    .poppins{
        font-family: 'Poppins', sans-serif !important;
    
    }
    .bgbox{
        background-color: #f3f4f7;
        width: 100%;
       
    }
    .bgbox h2{
        text-align: center;
        font-size: 54px;
        font-family: 'Playfair Display', serif;
        font-weight: 100;
        padding: 50px 0;
    }
    #space{
        width: 1100px;
        height: 400px;
        overflow: hidden;
        margin: 0 auto;
        /* display: flex; */
        /* justify-content: space-between; */
        position: relative;
        transform: translate(0, 300px);
        transition: 1s ease-out;
        opacity: 0;
    }
    #space>div>div{
        width: 7.6%;
        height: 290px;
        border: 1px solid #fad091;
        background-color: #fad091;
        font-family: 'Nanum Gothic Coding', monospace; 
        color: #fff;
        font-weight: bold;
        border-radius: 5px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
        box-shadow: 0px 5px 5px #ccc;
    }
    #album{
        position: absolute;
        width: 1800px;
        display: flex;
        justify-content: space-around;
        transition: all 1s ease;
    }
    .space_img{
        width: 94%;
        height: 86%;
        border-radius: 5px;
        overflow: hidden;
    }
    .space_img img{
        width: 100%;
        height: 100%;
    }
    #dot{
        display: flex;
        justify-content: center;
        width: 1100px;
        position: absolute;
        bottom: 60px;
    }
    #dot .init{
        display: inline-block;
        background-color: #fad091;
        width: 18px;
        height: 18px;
        margin: 0 5px;
        border-radius: 50%;
        cursor: pointer;
    }
    
    #con{
        width: 1100px;
        height: 900px;
        margin: 0 auto;
        display: flex;
        transform: translate(0, 400px);
        transition: 1s ease-out;
    }
    #con>div{
        width: 50%;
        height: 800px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    #con>div:nth-of-type(2){
        align-items: center;
    }
    #con>div img{
        height: 80%;
    }
    #con>div:first-of-type p{
        height: 15%;
    }
    #con>h2{
        height: 20%;
    }
    #con span{
        color: #fad091;
        font-family: 'Poppins', sans-serif;
        font-weight: bold;
        font-size: 25px;
    }
    #con>div>p{
        /* width: 95%; */
        font-family:'Nanum Gothic Coding',monospace;
        font-size: 17px;
    }
    #con #con_line{
        line-height: 28px;
        width: 90%;
    }
    #con_h2{
        padding: 20px 0 0px 0;
    }
    #check{
        width: 100%;
        height: 70%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
    }
    #check>div{
        width: 48%;
        height:20%;
        /* background-color: pink; */
        display: flex;
        align-items: center;
        justify-content: space-around;
    }
    .check_list{
        width: 60px;
        height: 60px;
        /* background-color: #41f08f; */
        background-color: #fad091;
        border-radius: 50%;
        background-image: url(../img/main/check.png);
        background-position: center;
        background-size: cover;
    }
    .check_text{
        width: 75%;
        font-size: 12px;
        
    }
    .check_text p{
        font-size: 13px;
        font-weight: bold;
        padding-bottom: 10px;
    }
    
    #bgimg{
        width: 100%;
        height: 300px;
        background-image: url(../img/main/main.jpg);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        
        background-attachment: fixed ;
    
        
        
    }
    #filter{
        width: 100%;
        height: 100%;
        background-color: rgba(250, 208, 145,0.6);
    
    }
    #bgtxt{
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        opacity: 0;
        transform: translate(0, 200px);
        transition: 1s ease-out;
        
    }
    #bgimg h2{
        font-size: 60px;
        color: white;
        font-family: 'Playfair Display', serif;
        text-align: center;
       
    }
    #btnbox{
        margin-top: 20px;
    }
    #bgimg a{
        width: 140px;
        display: inline-block;
        padding: 12px 0;
        border-radius: 4px;
        border: none;
        font-family: 'Poppins', sans-serif;
        text-align: center;
        transition: all 0.3s ease-out;
        font-size: 13px;
        color: #333;
        letter-spacing: 3px;
    }
    #bgimg a:first-of-type{
        background-color: #fad091;
        color: #fff;
        border: 1px solid #fad091;
    
    }
    #bgimg a:first-of-type:hover{
        background-color: transparent;
        color: #fad091;
    }
    #bgimg a:nth-of-type(2){
        background-color: #fff;
        border: 1px solid #fff;
    
    }
    #bgimg a:nth-of-type(2):hover{
        background-color: transparent;
        color: #fff;
    }
    
    #news{
        width: 1100px;
        margin: 0 auto;
        height: 600px;
        display: flex;
        justify-content: space-between;
        transform: translate(0, 200px);
        transition: 1s ease-out;
        opacity: 0;
    }
    #news>div{
        width: 350px;
        height: 500px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        border-radius: 5px;
        overflow: hidden;
        box-shadow: 0px 10px 5px 1px #ccc;
        font-family: 'Poppins', sans-serif;
    
    }
    .news_img{
        width: 100%;
        height: 50%;
        background-color: #fad091;
    }
    .news_img img{
        width: 100%;
        height: 100%;
    }
    .news_date{
        width: 90%;
        height: 5%;
        color: #fad091;
        text-align: center;
    }
    .news_text span{
        font-weight: bold;
        font-size: 15px;
    }
    .news_text{
        width: 90%;
        height: 40%;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        color: #666;
        line-height: 30px;
        font-size: 14px;
        text-align: center;
    
    
    }
    #news a{
        width: 125px;
        display: block;
        padding: 4px 0;
        border-radius: 4px;
        border: none;
        font-family: 'Poppins', sans-serif;
        text-align: center;
        transition: all 0.3s ease-out;
        font-size: 14px;
        letter-spacing: 2px;
        background-color: #fad091;
        color: #fff;
        border: 1px solid #fad091;
    }
    
    #news a:hover{
        background-color: transparent;
        color: #fad091  ;
    }
}