/* 배경 선택 */
.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;}
.bg_select li img{height: 100px; }

/* 도어 */
.door_box{position: absolute; width: 530px; left: 31%; bottom:9.2%; box-shadow: -1px 1px 5px rgba(0,0,0,0.3)}
.door_box img{width: 100%;}
.door_shadow{position: absolute; width: 2560px; left: 0; top: 0; width: 100%;}
.door_shadow img{width: 100%;}
.door_shadow_m{display: none;}
.door_shadow_l{display: none;}
.mb_info{display: none;}


/* 상품 정보 */
.door_info{position: absolute; left: 50%; top: 50%; transform: translate(30% , -100%); padding: 20px; border: 1px solid #666; box-sizing: border-box; background-color: rgba(255,255,255,0.6); }
.door_info::before{position: absolute; left: -120px; bottom: -1px; ; content: ""; display: block; width:120px ; height: 1px ; background-color: #666;}
.door_info::after{position: absolute; left: -120px; bottom: -6px;content: ""; display: block; width: 10px;height: 10px; border-radius: 5px; background-color: #666;}
.door_info h3{font-size: 1.4em; font-weight: bold; color: #1f1f1f; margin-bottom: 1em;}
.door_info p{font-size: 1em; color: #333; margin-bottom: 1em;}
.door_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);}


/* 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;}
.door_box{width: 397px; left: 31%;}

.select_warp{width: 220px;}
}

/* pc2 */
@media screen and (max-width: 1600px) {

.bg{width: 1600px;}
.bg .bg_inner>img,.door_shadow img{width: 1600px;}
.door_box{width: 330px; left: 31.2%;}

.door_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;}
.door_box{width: 300px; left: 27%;}

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

.select_warp{width: 200px;}
}

@media screen and (max-width: 1000px) {
.door_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: auto;    }  

    .bg .bg_high{display: none;}
    .bg .bg_mid{display: block;}
    .bg .bg_low{display: none;}
    
    .bg .bg_inner>img, .door_shadow_m img{height: calc(100vh - 60px); width: auto; 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; }

    .door_shadow{display: none;}
    .door_shadow_m{display: block; position: absolute; left: 50%; top: 0; transform: translateX(-50%); 
        height: calc(100vh - 60px);}
    .door_shadow_l{display: none;}
 
    .door_box{height:calc(79.33vh - 60px); width: auto ; left: 50%; transform: translateX(-49%); bottom:9.3%;}
    .door_box img{height: 100%; width: auto; }

    .door_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;}
    .door_info::before, .door_info::after{display: none;}
    .pc_info{display: none;}
    .mb_info{display: block;}
    
    .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 세로*/
/* @media screen and (max-width: 700px) {
    .header{left:15px; top: 15px;}
    .header h1 img{width: 100px;}

      
    .select_warp .list_wrap>ul>li{width: 16%;  cursor: pointer; margin-bottom: 4%;}

} */


/* tablet 모바일*/
/* @media screen and (max-width: 600px) {
    .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: 960px; margin-left: 130px;}
    .door_box{width: 195px; left: 40%;}
    
    .door_info{position: fixed; top: auto; bottom: 25vh; left: 50%; transform: translateX(-50%); padding: 15px; background-color: rgba(255,255,255,0.9); border: none; width: 90vw; border-radius: 10px;}
    .door_info::before, .door_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_warp{position: fixed; height: 30vh; width: 100%; top: auto; bottom: -30vh; left: 0 ; background-color: rgba(255,255,255,1); }
    .select_show{display: block; position: absolute; left: 50%; top: -30px; transform: translateX(-50%); height: 40px; background-color: rgba(255,255,255,1); border: none;  width: 150px; border-radius: 20px 20px 0 0; }
    .select_warp .select_top{ height: 60px;}
    .select_warp .list_wrap{height: calc(30vh - 70px);}
    .select_warp .list_wrap>ul{ display: flex; }
    .select_warp .list_wrap>ul>li{width: 24%;  cursor: pointer; margin-bottom: 4%;}

} */


/* tablet 모바일2*/
@media screen and (max-width:450px) {
    .header{left:15px; top: 15px;}
    .header h1 img{width: 100px;}
        
    .bg{top: 0; left: 50%; transform: translateX(-50%);  height: calc(100vh - 60px); width: auto;}
   

    .bg .bg_high{display: none;}
    .bg .bg_mid{display: none;}
    .bg .bg_low{display: block;}
    
    .bg .bg_inner>img, .door_shadow_l img{height: calc(100vh - 60px); width: auto; margin-left: 0;}

    .door_shadow{display: none;}
    .door_shadow_m{display: none; }
    .door_shadow_l{display: block; position: absolute; left: 50%; top: 0; transform: translateX(-50%); 
        height: calc(100vh - 60px);}

 
    .door_box{height:calc(69.5vh - 60px); width: auto ; left: 50%; transform: translateX(-49%); bottom:15%;}
    .door_box img{height: 100%; width: auto; }

    
    /* 배경 선택 */
    .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: 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: 4%;}
}




/* 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%;}

.door_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;}
.door_info::before, .door_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%;}

.door_info{top: auto; bottom: 100px; width: 90vw;}
.door_info h3{font-size: 1.1em; margin-bottom: .5em;}
.door_info p{font-size: .9em; margin-bottom: 0;}
.door_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%;}
.door_info{bottom: 100px; top: auto;}
.door_info a{font-size: .85em;}
.select_warp{bottom: -300px; height: 300px;}

} */