.kitchen_color{position: absolute; left: 0; top: 0; width: 100%; height: 100%;background-image: url(../img/film/k/0.jpg); background-size: cover;background-position: center;}


/* 배경 선택 */
.bg_select{position: fixed; right:300px; bottom: 7%; display: flex; }
.bg_select li{width: 100px; height: 100px; border-radius: 50%; overflow: hidden; border: 1px solid #FFF;margin: 0 10px ; cursor: pointer; position: relative;}
.bg_select li img{height: 100px; }
.bg_select li h3{position: absolute; font-size: 14px; color: #fff; left: 50%; top: 50%; transform: translate(-50%, -50%); text-shadow: 1px 1px 2px rgba(0,0,0,0.9);width: 100%; text-align: center; }

/* 도어 */

.mb_info{display: none;}

.bg .bg_high{display: block;}
.bg .bg_mid{display: none;}
.bg .bg_low{display: none;}


/* 상품 정보 */
.kitchen_info{position: absolute; left: 50%; top: 50%; transform: translate(30% , -80%); padding: 20px; border: 1px solid #666; box-sizing: border-box; background-color: rgba(255,255,255,0.6); }
.kitchen_info::before{position: absolute; left: -1px; bottom: -120px; ; content: ""; display: block; width:1px ; height: 120px ; background-color: #666;}
.kitchen_info::after{position: absolute; left: -5px; bottom: -120px;content: ""; display: block; width: 10px;height: 10px; border-radius: 5px; background-color: #666;}
.kitchen_info h3{font-size: 1.4em; font-weight: bold; color: #1f1f1f; margin-bottom: 1em;}
.kitchen_info p{font-size: 1em; color: #333; margin-bottom: 1em;}
.kitchen_info a{display: block; width: 140px; height: 40px; border: 1px solid #1f1f1f; color: #FFF; text-align: center; line-height: 40px; border-radius: 21px; background-color: rgba(0,0,0,0.9);}



/* test */
.kitchen_shadow{position: absolute; left: 0; top: 0;}

/* pc1 */
@media screen and (max-width: 1920px) {
.bg_select{position: fixed; right:230px; bottom: 7%; display: flex; }

.bg{width: 1920px;}
.bg .bg_inner>img,.door_shadow img{width: 1920px;}


.select_warp{width: 220px;}
}

/* pc2 */
@media screen and (max-width: 1600px) {
.bg{width: 1600px;}
.bg .bg_inner>img,.door_shadow img{width: 1600px;}


.kitchen_info{left: 50%; top: 50%; transform: translate(15% , -100%); padding: 20px;}
}

/* pc3 */
@media screen and (max-width: 1280px) {
.bg{width: 1280px;}
.bg .bg_inner>img,.door_shadow img{width: 1450px; margin-left: -100px;}


.kitchen_info::before{left: -90px;content: ""; display: block; width:90px ; height: 1px ; background-color: #666;}
.kitchen_info::after{left: -90px; bottom: -6px;}
.kitchen_info h3{font-size: 1.2em; margin-bottom: .5em;}
.kitchen_info p{font-size: .95em; margin-bottom: 1em; color: #555;}

.select_warp{width: 200px;}
}

@media screen and (max-width: 1000px) {
.kitchen_info{left: 50%; top: 50%; transform: translateY(-100%); padding: 20px;}  
}

/* tablet 세로*/
@media screen and (max-width: 900px) {
    .header{left:15px; top: 15px;}
    .header h1 img{width: 100px;}
    
    .bg{top: 0; left: 50%; transform: translateX(-50%);  height: calc(100vh - 60px); width: 100%; }  



    .bg .bg_high{display: none;}
    .bg .bg_mid{display: block ;width: 900px; height: auto; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}
    .bg .bg_low{display: none; }    
    
    .bg .bg_inner>img, .door_shadow_m img{width: 100%; margin-left: 0;}

   /* 배경 선택 */
   .bg_select{position: fixed; left: 50%; transform: translateX(-50%); right: auto; bottom: 65px; display: flex; }
   .bg_select li{width: 60px; height: 60px; border-radius: 50%; overflow: hidden; border: 1px solid #FFF;margin: 0 10px ; cursor: pointer;}
   .bg_select li img{height: 60px; }



   .mb_info{display: flex; align-items: center;}
   .mb_info h3{font-size:1em; margin-bottom: 0; width: 40%;}
     


    .kitchen_info{position: relative; top : auto; bottom: auto; left: 50%; transform: translateX(-50%);background-color: rgba(255,255,255,0.9); border: none; width: 100%; border-radius: 10px; height: 60px;}
    .kitchen_info::before, .kitchen_info::after{display: none;}
    .pc_info{display: none;}
    .mb_info{display: flex;}
    
    .info_bt p{display: none;}
    .info_bt a{position: absolute; right: 15px; top: 50%; transform: translateY(-50%);}        
    
    .select_warp{position: fixed; height: 40vh; width: 98%;  top: auto; bottom:calc(-40vh + 60px); left: 1% ; background-color: rgba(255,255,255,1); transition-duration: 0.5s; box-shadow: 0 0 3px rgba(0,0,0,0.3); border-radius: 10px 10px 0 0;}

    .select_show{display: block; position: absolute; left: 50%; top: 5px; transform: translateX(-50%);background-color:#FFC700 ; color: #000; border: none; height: 50px; width: 50px; ; border-radius: 50%;  line-height: 50px; font-size: 2em;border: 10px solid #FFF; box-sizing: content-box; top: -10px;}
    .select_show div{position: absolute; left: 50%; top: 50%; transform: translate(-50%, -30%) rotate(-45deg); width: 14px; height: 14px; border: 1px solid #000; border-left: none; border-bottom: none;transition-duration: 0.5s; }
    
    .select_warp .select_top{ height: 60px;}
    .select_warp .list_wrap{height: calc(40vh - 120px);}
    .select_warp .list_wrap>ul{ display: flex; }
    .select_warp .list_wrap>ul>li{width: 16%;  cursor: pointer; margin-bottom: 4%;}


}




/* tablet 모바일2*/
@media screen and (max-width:450px) {
    .bg_select li h3{font-size: 12px; width: 100%; text-align: center;}


    .header{left:15px; top: 15px;}
    .header h1 img{width: 100px;}
        
    .bg{top: 0; left: 50%; transform: translateX(-50%);  height: calc(100vh - 60px); width: 100%;}
   

    .bg .bg_high{display: none;}
    .bg .bg_mid{display: none;}
    .bg .bg_low{display: block; width: 450px; height: auto; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}    



    /* 필름 변경 */
    .kitchen_color{position: absolute; left: 0; top: 0; width: 100%; height: 100%;background-image: url(../img/film/k/0.jpg); background-size: cover; background-position: center;}



    /* 배경 선택 */
    .bg_select{position: fixed; left: 50%; transform: translateX(-50%); right: auto; bottom: 65px; display: flex; }
    .bg_select li{width: 60px; height: 60px; border-radius: 50%; overflow: hidden; border: 1px solid #FFF;margin: 0 10px ; cursor: pointer;}
    .bg_select li img{height: 60px; }
    .bg_select li h3{font-size: 12px;}


    .mb_info{display: flex; align-items: center;}
    .mb_info h3{font-size: 0.9em; margin-bottom: 0; width:90px;}
    .info_bt p{ display: none;}
    .info_bt a{position: absolute; right: 15px; top: 50%; transform: translateY(-50%); width: 100px; height: 30px; font-size: 0.8em; line-height: 30px;}           

    .select_show{display: block; position: absolute; left: 50%; top: 5px; transform: translateX(-50%);background-color:#FFC700 ;  border: none; height: 50px; width: 50px; ; border-radius: 50%; border: 10px solid #FFF; box-sizing: content-box; top: -10px; }
    .select_show div{position: absolute; left: 50%; top: 50%; transform: translate(-50%, -30%) rotate(-45deg); width: 14px; height: 14px; border: 1px solid #000; border-left: none; border-bottom: none;transition-duration: 0.5s; }

    .select_warp .list_wrap>ul>li{width: 24%;  cursor: pointer; margin-bottom: 2%; align-items: flex-start;}
}





/* tablet 세로*/
/* 
@media screen and (max-width: 780px) {
.header{left:15px; top: 15px;}
.header h1 img{width: 100px;}

.bg{top: 0; left: 50%; transform: translateX(-50%); width: auto;}
.bg .bg_inner>img,.door_shadow img{width: 950px; margin-left: 120px;}
.door_box{width: 195px; left: 39%;}

.kitchen_info{position: fixed; top: auto; bottom: 120px; left: 50%; transform: translateX(-50%); padding: 15px; background-color: rgba(255,255,255,0.9); border: none; width: 90vw; border-radius: 10px;}
.kitchen_info::before, .kitchen_info::after{display: none;}
.pc_info{display: none;}
.mb_info{display: block;}

.info_bt p{margin-right: 10px; margin-bottom: 0;}
.info_bt a{position: absolute; right: 15px; top: 50%; transform: translateY(-50%);}

.select_show{position: fixed; left:50%; bottom:40px; transform: translateX(-50%); display: block; background:#1f1f1f;
    color: #FFF; border: 1px solid rgba(255,255,255,0.5);  padding: 10px 15px; border-radius: 25px;}



.select_warp .select_top{height: 50px;}
.select_warp .select_top .slide_down{display: block; width: 300px; height: 20px; border: none; background:none; margin: 0 auto;}
.select_warp .select_top .slide_down span{display: block; width: 10px; height: 10px; margin: 0 auto;
    border-right: 2px solid #bbb; border-bottom: 2px solid #bbb; transform: rotate(45deg);}
.select_warp{right: auto; top: auto; left: 0; bottom: calc(-100vh + 200px); width: 100%; height: calc(100vh - 500px);  background-color: rgba(255,255,255,0.9);}
.list_wrap{height: 230px; margin-top: 10px;}
.list_wrap>ul>li{width: 22.5%; cursor: pointer; margin-bottom: 4%;}
} */


/* mobile1 */
/* @media screen and (max-width: 450px) {
.bg .bg_inner>img, .door_shadow img{width: 950px; margin-left: 120px;}
.door_box{width: 195px; left: 39%;}

.kitchen_info{top: auto; bottom: 100px; width: 90vw;}
.kitchen_info h3{font-size: 1.1em; margin-bottom: .5em;}
.kitchen_info p{font-size: .9em; margin-bottom: 0;}
.kitchen_info a{width: 115px; height: 28px; line-height: 28px; border-radius: 21px; background-color: rgba(0,0,0,0.9); align-self: center;
display: block; margin: 0 auto; font-size: .9em;}
.select_show{bottom:30px;}
.select_warp{right: auto; top: auto; left: 0; bottom: -300px; width: 100%; height: 300px;  background-color: rgba(255,255,255,0.9);}
.select_warp h2{font-size: 1.4em; line-height: 1.8em;}
.select_warp h2 span{font-size: 0.8em}
} */

/* mobile2 */
/* @media screen and (max-width: 390px) {
.bg .bg_inner>img{width: 850px;}
.door_shadow img{width: 850px;}
.door_box{width: 175px; left: 40%;}
.kitchen_info{bottom: 100px; top: auto;}
.kitchen_info a{font-size: .85em;}
.select_warp{bottom: -300px; height: 300px;}

} */