@charset "utf-8";
/* font-family: 'Playfair Display', serif;
font-family: 'Poppins', sans-serif; */
/* font-family: 'Nanum Gothic Coding', monospace; */
@media screen and (max-width:750px){
    #popup_img{
        position: fixed;
        width: 80%;
        height: 40%;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        background-color: #fff;
        border-radius: 5px;
        border: 10px solid #fff;
        display: none;
    }
    .hidden{
        height: 100%;
        min-height: 100%;
        overflow: hidden;
        touch-action: none;
    }
    #slider{
        width: 100%;
        height: 500px;
        background-image: url(../img/sub/sub.jpg);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        display: flex;
        /* background-attachment: fixed; */
        justify-content: center;
        align-items: center;
    }
    #clickmenu li:not(:nth-of-type(4)) a{
        color: #fff;
    }
    /* #wrap{
        background-color: #f3f4f7;
    
    } */
    #s_text{
        width: 100%;
        height: 30%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
        color: #fff;
    }
    #s_text p{
        font-family: 'Poppins', sans-serif; 
    
    }
    #s_text h1{
        font-family: 'Playfair Display', serif;
    
        
    }
    .bgbox{
        width: 100%;
        /* height: 2050px; */
        display: flex;
        flex-direction: column;
        align-items: center;
        /* margin: 50px 0; */
        background-color: #f3f4f7;
        justify-content: space-around;
    }
    #room{
        width: 100%;
        height: 3800px;
        display: flex;
        margin: 0px auto;
        flex-direction: column;
        background-color: #f3f4f7;
        transition: 1s ease-out;
        justify-content: space-between;

    }
    
    #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: 880px;
        display: flex;
        flex-direction: column;
        opacity: 1;
        /* transition: 1s ease-out; */
        
    }
    
    #room .dot{
        height: 30px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        /* background-color: #fff; */
        /* opacity: 0.5; */
        font-size: 25px;
    }
    .dot>p span{
        display: inline-block;
        width: 15px;
        height: 15px;
        background-color: #fad091;
        border-radius: 50%;
        margin: 0 5px;
        cursor: pointer;
        opacity: 0.5;
    }
    .dot>p span:first-of-type{
        opacity: 1;
    }
    .dot>span{
        cursor: pointer;
        color: #fad091;
        font-weight: bold;
    }
    
    
    .room_img{
        width: 100%;
        height: 50%;
        /* background-color: #fff; */
    }
    .li{
        position: absolute;
        /* width: 2860px; */
        height: 100%;
        display: flex;
        transition: 1s all;
    }
    .sli{
        width: 100%;
        height: 90%;
        overflow: hidden;
        position: relative;
    }
    
    .li img{
        width: 50%;
    }
    #li3 img{
        width: 33.3%;
    }
    #room .detail{
        width: 100%;
        height: 50%;
        position: relative;
        transition: all 0.4s ease-out;
        background-color: #fff;
        order: 1;
       
    
    }
    .room_right{
        transition: 1.3s ease-out;
    }
    .room_left{
    
        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;
        z-index: 1;
        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 span{
        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 span{
        color: #333;
        background-color: #fff;
        border: 1px solid #999;
        margin-top: 10px;
        padding: 10px 0px;
        border-radius: 5px;
        font-family: 'Poppins', sans-serif;
        cursor: pointer;
        transition: 1s;
        width: 50%;
        display: flex;
        justify-content: center;
    }
    .poppins{
        font-family: 'Poppins', sans-serif !important;
    
    }
    #reform{
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0, 0.3);
        position: fixed;
        top: 0;
        left: 0;
        z-index: 99;
        display: none;
        overflow: hidden;
    }
    .content_form{
        width: 85%;
        height: 100%;
        margin: 0 auto;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .content_form>form{
        width: 90%;
        height: 500px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        align-content: space-around;
        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;
    }
    #type{
        display: flex;
        width: 100%;
        justify-content: space-around;
        margin-bottom: 30px;
    }
    #type h4{
        width: 50%;
        padding: 20px 0px;
        background-color: #fff;
        text-align: center;
        border: 10px solid #fad091;
        font-family: 'Poppins', sans-serif; 
        cursor: pointer;
        color: #444;
    }
    #type h4:first-of-type{
        border-right: none;
    }
    .bgbox>p{
        width: 95%;
        font-size: 18px;
        font-family: 'Poppins','Nanum Gothic Coding', sans-serif; 
        color: #444;
        font-weight: 300;
        margin: 30px 0;
    }
    
    #space{
        width: 100%;
        display: none;
        flex-direction: column;
    }
    #space>div:not(:last-of-type){
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
    }
    #space>div>div{
        width: 90%;
        position: relative;
    }
    #space img{
        width: 100%;
        height: 90%;
    }
    #space>div>div>p{
        width: 100%;
        text-align: center;
        position: absolute;
        top:50%;
        left: 0;
        transform: translateY(-50%);
        overflow: hidden;
        padding: 15px 0;
        background-color: rgba(250, 208, 145,0.9);
        color: #fff;
        font-weight: bold;
        font-size: 18px;
        display: none;
        font-family: 'Poppins','Nanum Gothic Coding', sans-serif; 
    }
}
@media screen and (min-width:751px) and (max-width:1199px){
    #popup_img{
        position: fixed;
        width: 80%;
        height: 50%;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        background-color: #fff;
        border-radius: 5px;
        border: 10px solid #fff;
        display: none;
    }
    .hidden{
        height: 100%;
        min-height: 100%;
        overflow: hidden;
        touch-action: none;
    }
    #slider{
        width: 100%;
        height: 500px;
        background-image: url(../img/sub/sub.jpg);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        display: flex;
        /* background-attachment: fixed; */
        justify-content: center;
        align-items: center;
    }
    #clickmenu li:not(:nth-of-type(4)) a{
        color: #fff;
    }
    /* #wrap{
        background-color: #f3f4f7;
    
    } */
    #s_text{
        width: 100%;
        height: 30%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
        color: #fff;
    }
    #s_text p{
        font-family: 'Poppins', sans-serif; 
    
    }
    #s_text h1{
        font-family: 'Playfair Display', serif;
    
        
    }
    .bgbox{
      
        width: 100%;
        /* height: 2050px; */
        display: flex;
        flex-direction: column;
        align-items: center;
        /* margin: 50px 0; */
        background-color: #f3f4f7;
        justify-content: space-around;
        
    }
    #room{
        width: 100%;
        /* height: 2000px; */
        display: flex;
        margin: 0px auto;
        flex-wrap: wrap;
        background-color: #f3f4f7;
        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: 440px;
        display: flex;
        opacity: 1;
        /* transition: 1s ease-out; */
        
    }
    
    #room .dot{
        height: 30px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        /* background-color: #fff; */
        /* opacity: 0.5; */
        font-size: 25px;
    }
    .dot>p span{
        display: inline-block;
        width: 15px;
        height: 15px;
        background-color: #fad091;
        border-radius: 50%;
        margin: 0 5px;
        cursor: pointer;
        opacity: 0.5;
    }
    .dot>p span:first-of-type{
        opacity: 1;
    }
    .dot>span{
        cursor: pointer;
        color: #fad091;
        font-weight: bold;
    }
    
    
    .room_img{
        width: 65%;
        /* background-color: #fff; */
    }
    .li{
        position: absolute;
        width: 2860px;
        height: 100%;
        display: flex;
        transition: 1s all ;
    }
    .sli{
        width: 100%;
        height: 90%;
        overflow:hidden;
        position: relative;
    }
    .li img{
        width: 50%;
    }
    #li3 img{
        width: 33.3%;
    }
    /* .room_img img{
        width: 100%;
        height: 100%;
    } */
    /* .room_img:not(:nth-of-type(3))img{
        width: 50%;
    } */
    #room .detail{
        width: 35%;
        height: 90%;
        position: relative;
        transition: all 0.4s ease-out;
        background-color: #fff;
       
    
    }
    .room_right{
        transition: 1.3s ease-out;
    }
    .room_left{
    
        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;
        z-index: 1;
        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 span{
        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 span{
        color: #333;
        background-color: #fff;
        border: 1px solid #999;
        margin-top: 10px;
        padding: 10px 0px;
        border-radius: 5px;
        font-family: 'Poppins', sans-serif;
        cursor: pointer;
        transition: 1s;
        width: 50%;
        display: flex;
        justify-content: center;
        font-size: 13px;
    }
    .poppins{
        font-family: 'Poppins', sans-serif !important;
    
    }
    #reform{
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0, 0.3);
        position: fixed;
        top: 0;
        left: 0;
        z-index: 99;
        display: none;
        overflow: hidden;
    }
    .content_form{
        width: 65%;
        height: 100%;
        margin: 0 auto;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .content_form>form{
        width: 90%;
        height: 500px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        align-content: space-around;
        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;
    }
    #type{
        display: flex;
        width: 90%;
        justify-content: space-around;
        margin-bottom: 30px;
    }
    #type h4{
        width: 50%;
        padding: 20px 0px;
        background-color: #fff;
        text-align: center;
        border: 10px solid #fad091;
        font-family: 'Poppins', sans-serif; 
        cursor: pointer;
        color: #444;

    
    
    
    }
    #type h4:first-of-type{
        border-right: none;
    }
    .bgbox>p{
        width: 90%;
        font-size: 22px;
        font-family: 'Poppins','Nanum Gothic Coding', sans-serif; 
        color: #444;
        font-weight: 300;
        margin: 30px 0;
        
    }
    
    #space{
        width: 100%;
        display: none;
        flex-direction: column;
        align-items: center;
    }
    #space>div:not(:last-of-type){
        width: 90%;
        display: flex;
        justify-content: space-around;
    }
    #space>div>div{
        width: 47%;
        position: relative;
    }
    #space img{
        width: 100%;
        height: 90%;
    }
    #space>div>div>p{
        width: 100%;
        text-align: center;
        position: absolute;
        top:50%;
        left: 0;
        transform: translateY(-50%);
        overflow: hidden;
        padding: 15px 0;
        background-color: rgba(250, 208, 145,0.9);
        color: #fff;
        font-weight: bold;
        font-size: 18px;
        display: none;
        font-family: 'Poppins','Nanum Gothic Coding', sans-serif; 
    }
    
}
@media screen and (min-width:1200px){
  
    .hidden{
        height: 100%;
        min-height: 100%;
        overflow: hidden;
        touch-action: none;
    }
    #slider{
        width: 100%;
        height: 500px;
        background-image: url(../img/sub/sub.jpg);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        display: flex;
        /* background-attachment: fixed; */
        justify-content: center;
        align-items: center;
    }
    #clickmenu li:not(:nth-of-type(4)) a{
        color: #fff;
    }
    /* #wrap{
        background-color: #f3f4f7;
    
    } */
    #s_text{
        width: 1100px;
        height: 30%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
        color: #fff;
    }
    #s_text p{
        font-family: 'Poppins', sans-serif; 
    
    }
    #s_text h1{
        font-family: 'Playfair Display', serif;
    
        
    }
    .bgbox{
        width: 100%;
        /* height: 2050px; */
        display: flex;
        flex-direction: column;
        align-items: center;
        /* margin: 50px 0; */
        background-color: #f3f4f7;
        justify-content: space-around;
    }
    #room{
        width: 1100px;
        /* height: 2000px; */
        display: flex;
        margin: 0px auto;
        flex-wrap: wrap;
        background-color: #f3f4f7;
        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: 440px;
        display: flex;
        opacity: 1;
        /* transition: 1s ease-out; */
        
    }
    
    #room .dot{
        height: 30px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        /* background-color: #fff; */
        /* opacity: 0.5; */
        font-size: 25px;
    }
    .dot>p span{
        display: inline-block;
        width: 15px;
        height: 15px;
        background-color: #fad091;
        border-radius: 50%;
        margin: 0 5px;
        cursor: pointer;
        opacity: 0.5;
    }
    .dot>p span:first-of-type{
        opacity: 1;
    }
    .dot>span{
        cursor: pointer;
        color: #fad091;
        font-weight: bold;
    }
    
    
    .room_img{
        width: 65%;
        /* background-color: #fff; */
    }
    .li{
        position: absolute;
        width: 2860px;
        height: 100%;
        display: flex;
        transition: 1s all;
    }
    .sli{
        width: 100%;
        height: 90%;
        overflow: hidden;
        position: relative;
    }
    
    .room_img img{
        width: 100%;
        height: 100%;
    }
    #room .detail{
        width: 35%;
        height: 90%;
        position: relative;
        transition: all 0.4s ease-out;
        background-color: #fff;
       
    
    }
    .room_right{
        transition: 1.3s ease-out;
    }
    .room_left{
    
        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;
        z-index: 1;
        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 span{
        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 span{
        color: #333;
        background-color: #fff;
        border: 1px solid #999;
        margin-top: 10px;
        padding: 10px 0px;
        border-radius: 5px;
        font-family: 'Poppins', sans-serif;
        cursor: pointer;
        transition: 1s;
        width: 50%;
        display: flex;
        justify-content: center;
        
    }
    .poppins{
        font-family: 'Poppins', sans-serif !important;
    
    }
    #reform{
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0, 0.3);
        position: fixed;
        top: 0;
        left: 0;
        z-index: 99;
        display: none;
        overflow: hidden;
    }
    .content_form{
        width: 65%;
        height: 100%;
        margin: 0 auto;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .content_form>form{
        width: 90%;
        height: 500px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        align-content: space-around;
        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;
    }
    #type{
        display: flex;
        width: 1100px;
        justify-content: space-around;
        margin-bottom: 30px;
    }
    #type h4{
        width: 50%;
        padding: 20px 0px;
        background-color: #fff;
        text-align: center;
        border: 10px solid #fad091;
        font-family: 'Poppins', sans-serif; 
        cursor: pointer;
        color: #444;
    
    
    
    }
    #type h4:first-of-type{
        border-right: none;
    }
    .bgbox>p{
        width: 1100px;
        font-size: 22px;
        font-family: 'Poppins','Nanum Gothic Coding', sans-serif; 
        color: #444;
        font-weight: 300;
        margin: 30px 0;
    }
    
    #space{
        width: 1100px;
        display: none;
        flex-direction: column;
    }
    #space>div:not(:last-of-type){
        width: 100%;
        display: flex;
        justify-content: space-around;
    }
    #space>div>div{
        width: 47%;
        position: relative;
    }
    #space img{
        width: 100%;
        height: 90%;
    }
    #space>div>div>p{
        width: 100%;
        text-align: center;
        position: absolute;
        top:50%;
        left: 0;
        transform: translateY(-50%);
        overflow: hidden;
        padding: 15px 0;
        background-color: rgba(250, 208, 145,0.9);
        color: #fff;
        font-weight: bold;
        font-size: 18px;
        display: none;
        font-family: 'Poppins','Nanum Gothic Coding', sans-serif; 
    }
    #popup_img{
        position: fixed;
        width: 50%;
        height: 50%;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        background-color: #fff;
        border-radius: 5px;
        border: 10px solid #fff;
        display: none;
    }
}
    .space_img{
        cursor: pointer;
    }
    
    #popup_img img{
        width: 100%;
        height: 100%;
        border-radius: 5px;
    }
    #popup_img span{
        position: absolute;
        top: 0;
        right: 0;
        padding: 5px 12px;
        font-size: 20px;
        font-weight: bold;
        background-color: rgba(255, 255, 255,0.5);
        color: #333;
        cursor: pointer;
        border-radius: 5px;
    }
    .detail{
        cursor: pointer;
    }