@charset "UTF-8";

html.on,
body.on{ overflow: hidden; }

#ft,
#hd{ background:#06295f; position: relative;}

#ft_copy{ color:#fff; border-color:#fff; }
.main_h2{ font-size:24px; line-height:24px; }
html , body{ height:100%; font-family: "Noto Sans", sans-serif; font-weight:300; }
.hd_login li > span{ color:#06295f; }

.intro{ position: fixed; left:0;top:0;right:0;bottom:0; background:#fff; z-index: 10000; }
.intro .in{ position: absolute;left:50%;top:50%; transform:translate(-50%,-50%);text-align:center; }
.intro .in h1{ font-size:30px; }
.intro .in h2{ font-size:28px;margin:10px 0; }
.intro .in ul{ font-size:0; display: inline-block; }
.intro .in ul li{ display: inline-block; margin:0 5px; }
.intro .in ul li a{ display: block; font-size:20px; color:#fff; background:#06295f; padding:10px 20px; }


.tab_area > .tab_tit{  }
.main_tab{ overflow: hidden; }
.main_tab li{ float:left; cursor:pointer; border:2px solid #06295f; line-height:25px; padding:10px 20px; border-left:0; font-size:16px; font-weight:500; }

.tab_tit{ margin-bottom:15px; }

.main_tab li:hover,
.main_tab li.on{ background:#06295f; color:#fff; font-weight:bold;border-color:#06295f; }
.main_tab li:first-child{ border-left:2px solid #06295f; }

.product_list .in{ width:100%; position: absolute;left:0;right:0;top:-9999px; }
.product_list .in.on{ position: relative;top:0; }


.tit_h3{ font-size:24px; line-height:26px; margin-bottom:10px; text-align:center;}
.tile { position: relative; }
.tile .tab_tit{ font-size:0; text-align:center; }
.tile .tab_tit li{ float:none;display: inline-block;vertical-align:middle;  }

.in.tile.on{ position: relative; padding-bottom:100px;  }
.tab_tit.bottom { position: absolute;left:0;right:0;bottom:25px; text-align:center; }
.tit_h3.bottom { position: absolute;left:0;right:0;bottom:-10px; text-align:center; }

.product_list .in > .tab_cont .select_area { position: relative;padding-bottom:7px; }
.product_list .in > .tab_cont .select_area .choice{ font-size:14px;line-height:16px; }
.product_list .in > .tab_cont .select_area .box{ position: absolute;left:0;top:0;right:0; background:#fff; border:1px solid #000; border-radius:5px; margin:0 ; display: none; max-height:130px; overflow:auto;}
.product_list .in > .tab_cont .select_area .box ul{ margin:0; }
.product_list .in > .tab_cont .select_area .box ul li{ font-size:14px; line-height:16px;padding:3px 5px; border-top:1px solid #333; display: block; width:100%; margin:0; cursor:pointer; }
.product_list .in > .tab_cont .select_area .box ul li:hover{ color:#fff; background:#333; }
.product_list .in > .tab_cont .select_area .box ul li:first-child{ border-top:0; }



.tile_detail{ position: fixed; left:0;top:0;right:0;bottom:0; background:rgba(0,0,0,0.6);z-index: 1010; display: none; }
.tile_detail .in{ width:1200px; position: absolute;left:50%;top:50%; transform:translate(-50%,-50%); }
.tile_detail .in > div{ position: relative;z-index: 1; }
.tile_detail .in > div.top{  }
.tile_detail .in > div.bottom{  }
.tile_detail .in div ul{ overflow: hidden; }
.tile_detail .in div ul li{position: relative; float:left; width: calc( 100% / 8 ) ; }
.tile_detail .in div ul li .img{ width:100%; }
.tile_detail .in div ul li .img img{ width:100%; }


.tile_detail .in .top.width ul li{ width: calc( 100% / 4 ); }

.tit_h3 button{ font-size:16px; line-height:18px; padding:5px; display: inline-block; background:#6b0806; color:#fff; }

.tile_detail .in div ul li:before{ content:""; display: block;border:1px solid #fff; position: absolute; left:0;top:0;right:0;bottom:0; }

.tile_detail .in.white ul li:before{ border-color:#fff; }
.tile_detail .in.vanila ul li:before{ border-color:#e7e0ce; }
.tile_detail .in.ivory ul li:before{ border-color:#dbd5d1; }
.tile_detail .in.bagei ul li:before{ border-color:#d8cec5 }
.tile_detail .in.bambu ul li:before{ border-color:#cac3b6; }
.tile_detail .in.lightgray ul li:before{ border-color:#d7d7d7 }
.tile_detail .in.gray ul li:before{ border-color:#c1bfc0; }
.tile_detail .in.darkgray ul li:before{ border-color:#87868d }
.tile_detail .in.cement ul li:before{ border-color:#b0aeab }
.tile_detail .in.volcano ul li:before{ border-color:#726f70 }
.tile_detail .in.cocoa ul li:before{ border-color:#6f5239 }
.tile_detail .in.darkcocoa ul li:before{ border-color:#594a48 }
.tile_detail .in.bidulgy ul li:before{ border-color:#b3b3b3 }
.tile_detail .in.jin_gray ul li:before{ border-color:#868583 }

.tile_detail .in .close{ width:30px; height:30px; right:-35px;top:0; position: absolute; transform:rotate(45deg);}
.tile_detail .in .close:before{ content:""; display: block; border-left:2px solid #fff; position: absolute;left:50%; top:0;bottom:0;margin-left:-1px; }
.tile_detail .in .close:after{ content:""; display: block; border-top:2px solid #fff; position: absolute;left:0; top:50%;right:0;margin-top:-1px; }


.tile_detail .color{ position: absolute;right:-30px;top:50px; z-index: 2;}
.tile_detail .color li{ width:20px;height:20px; border-radius:50%;margin-top:5px; position: relative; border:1px solid #000; cursor:pointer; }
.tile_detail .color li span{ position: absolute;display: block; width:80px; text-align:right; right:10px; top:-3px; background:#fff; padding:3px; opacity:0;
    -webkit-transition: all 0.15s ease-in-out;z-index: -1;
    -moz-transition: all 0.15s ease-in-out;
    -ms-transition: all 0.15s ease-in-out;
    -o-transition: all 0.15s ease-in-out;
}
.tile_detail .color li:hover span{ opacity:1; right:25px; }

.tile_detail .color li.white{ background:#fff;}
.tile_detail .color li.vanila{ background:#e7e0ce;}
.tile_detail .color li.ivory{ background:#dbd5d1;}
.tile_detail .color li.bagei{ background:#d8cec5}
.tile_detail .color li.bambu{ background:#cac3b6;}
.tile_detail .color li.lightgray{ background:#d7d7d7}
.tile_detail .color li.gray{ background:#c1bfc0;}
.tile_detail .color li.cement{ background:#b0aeab}
.tile_detail .color li.darkgray{ background:#87868d}
.tile_detail .color li.volcano{ background:#726f70}
.tile_detail .color li.cocoa{ background:#6f5239}
.tile_detail .color li.darkcocoa{ background:#594a48}
.tile_detail .color li.bidulgy{ background:#b3b3b3}
.tile_detail .color li.jin_gray{ background:#868583}

.tile_detail .type{ position: absolute;right:10px;top:20px; font-size:0;z-index: 2; }
.tile_detail .type li{ font-size:13px; color:#fff; background:#06295f; padding:5px; border-radius:20px; margin:0 3px; display: inline-block; cursor:pointer; }


.product_list .in ul:after{ content:"";display: block; clear:both; }
.product_list .main_tab {  }
.product_list .in > ul {}
.product_list .in > ul > li{ }
.product_list .in > ul li .img{ position: relative; box-shadow:0 0 5px rgba(0,0,0,0.2)}
.product_list .in > ul li .img img{ width:100%; }
.img .add{ font-size:0; width:26px; height:26px; border-radius:50%; position: absolute;right:10px; bottom:10px; border:1px solid #000; background:#fff; opacity:0;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
 }
.img .add:before{ content:""; display: block; border-left:2px solid #000; position: absolute;left:50%; top:2px;bottom:2px; margin-left:-1px; }
.img .add:after{ content:""; display: block; border-top:2px solid #000; position: absolute;left:2px; top:50%;right:2px; margin-top:-1px; }
.img:hover .add{ opacity:1; }
.bottom_swipe .img .add{ bottom:auto; top:10px; }


.product_list .in > ul li .name{ display: block;font-size:14px;margin:10px 0 5px; line-height:18px; font-weight:bold; }
.product_list .in > ul li .price{ display: block; font-size:14px;line-height:15px;font-weight:400; }
.product_list .in > ul li .price:before{ content:"가격 : "; }
.product_list .in > ul li .price:after{ content:" 원"; }
.product_list .in > ul li .price.set{ display: none; }
.product_list .in > ul li .price.on{ display: block; }
.product_list .in > ul li .price.import{ display: block !important; }
.product_list .in > ul li .size { font-size:14px; margin-bottom:5px; position: relative; padding-left:55px; line-height:18px;}
.product_list .in > ul li .price + .size { margin-top:5px;}
.product_list .in > ul li .size:before{ content:"사이즈 :"; position: absolute;left:0;top:0px; font-size:18px; font-size:14px; }
.product_list .in > ul li p.info:before{ content:"정보 :"; position: absolute;left:0;top:0px; font-size:18px; font-size:14px; }

.product_list .in .main_tab{  }

.product_list .in .tab_cont{ position: relative;z-index: 1; }
.product_list .in .tab_cont.wall{ z-index: 2; }

.product_list .in .tab_cont .in > .tab_cont {  }
.product_list .in > .tab_cont ul:after { content:""; display: block;clear:both; }
.product_list .in > .tab_cont ul{ margin:-25px -10px 0; font-size:0; }
.product_list .in > .tab_cont ul li{ position: relative;width: calc( 100% / 6 ); padding:0 5px ; margin-top:20px; display: inline-block; vertical-align:top; z-index: 2;}
.product_list .in > .tab_cont ul li.on{ z-index: 3; }

.product_list .in > ul.tab_tit{ margin:0 0 15px; }
.product_list .in > ul.tab_tit li{ width:auto; padding:10px 20px; margin:0; }

.tab_cont .tile {}
.tab_cont .tab_cont .tile ul {}
.tab_cont .tab_cont  .tile ul:after { content:""; display: block; clear:both; }
.tab_cont .tab_cont  .tile ul li { width:20%; float:left; }

.mb_log_cate h2{ width:100%; }
.mb_log_cate .join { display: none; }

.detail_view{ position: fixed;left:0;top:0;right:0;bottom:0; background:rgba(0,0,0,0.5);z-index: 1010; display: none;}

.detail_view .in{ position: absolute;left:50%; top:50%; transform:translate(-50%,-50%); max-height:80vh; background:#fff; }
.detail_view .in .cont{ max-width:550px; max-height:80vh; }
.detail_view .in .cont .img ,
.detail_view .in .cont .img img{ max-width:100%; max-height:100%;}
.detail_view .in .cont .name{ display: block; text-align:center; font-size:20px; font-weight:bold; padding:10px 0; background:#fff; }
.detail_view .in .cont .size,
.detail_view .in .cont .price{ display: none; }

.detail_view .in button{ position: absolute; font-size:0; transform:rotate(45deg); cursor:pointer;}
.detail_view .in .close{ width:30px; height:30px; right:-35px;top:0; }
.detail_view .in .arr{ width:40px; height:40px;border:2px solid #fff;border-width:2px 2px 0 0 ; top:50%; margin-top:-25px; }
.detail_view .in .left{ transform:rotate(-135deg); left:-50px; }
.detail_view .in .right{  transform:rotate(45deg); right:-50px; }
.detail_view .in .close:before{ content:""; display: block; border-left:2px solid #fff; position: absolute;left:50%; top:0;bottom:0;margin-left:-1px; }
.detail_view .in .close:after{ content:""; display: block; border-top:2px solid #fff; position: absolute;left:0; top:50%;right:0;margin-top:-1px; }

.detail_view .box{ display: none; }

.detail_view .add{ display: none; }

.tile_swipe .swiper-slide{ float:left;width: calc( 100% / 6 );padding:5px 5px 0px; position: relative; }
.tile_swipe .swiper-slide .img{ box-shadow:0 0 5px rgba(0,0,0,0.5); position: relative;z-index: 2;}
.tile_swipe .swiper-slide .add_detail{ font-size:0; width:26px; height:26px; border-radius:50%; position: absolute;left:10px; top:10px; border:1px solid #000; background:#fff; opacity:0;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    background:#fff url(../img/ico_detail.jpg) center no-repeat;background-size:16px 16px;
 }
.tile_swipe .swiper-slide:hover .add_detail{ opacity:1; }

.wall .tile_swipe .swiper-slide .add_detail { top:auto; bottom:10px; }

.tile_area{  position: relative; max-width:1400px; margin:0 auto; }
.tile_area .chk_tile{ position: absolute; right:20px;top:5px; z-index: 3; cursor:pointer; display: none;}
.tile_area .chk_tile input{ position: absolute;left:-9999px; top:0; visibility: visible;}
.tile_area .chk_tile label { font-size:14px;position: relative; padding-left:25px; z-index: 3; }
.tile_area .chk_tile label:before{ content:""; display: block; width:20px; height:20px;position: absolute;left:0;top:0px; background:url(../img/img_chk.png) 0 0 no-repeat; background-size:100%; }
.tile_area .chk_tile input:checked + label:before {  background:url(../img/img_chk_on.png) 0 0 no-repeat; background-size:100%;  }

.choice_tile{ background:none; border:0; background:#771414; color:#fff; vertical-align:middle; display: inline-block; padding:5px 10px; position: relative;top:-2px; cursor:pointer;}
.tile_area .chk_tile.bottom{ top:auto; bottom:0; }
.tile_area .dim{ position: absolute;left:0;top:0;right:0;bottom:0; background:rgba(0,0,0,0);z-index: 2; }
.tile_swipe{ position: relative; overflow: hidden; padding:0 10px; position: relative; z-index: 1; }
.tile_swipe .swiper-slide.swiper-slide-active:before{ content:""; display: block; border:2px solid #06295f; position: absolute;left:0px;top:5px;right:0px;bottom:0px; z-index: 1;}
.tile_swipe .swiper-slide img{ width:100%; vertical-align:top; }
.tile_swipe .swiper-slide strong{ display: block; padding:5px 0 10px; font-size:14px; text-align:Center; }
.wall_swipe .swiper-slide{ padding-top:35px; position: relative; }
.wall_swipe .swiper-slide strong { padding:0 0 5px; position: absolute; left:0;top:10px;right:0; }
.tile_swipe .swiper-pagination{ bottom:-10px !important; }



.wall_swipe .swiper-slide.swiper-slide-active:before { border-bottom:0; }
.bottom_swipe { margin-top:-5px; }
.bottom_swipe .swiper-slide.swiper-slide-active:before { border-top:0; }



.cadalog_list{ position: absolute;left:50%;top:50%; transform:translate(-50%,-50%);z-index: 1; text-align:center;}
#hd_wrapper .nick{ font-size:18px; color:#fff; font-weight:500; position: absolute; right:0;top:35px;}


.cadalog_list ul{ font-size:0; }
.cadalog_list ul li{ display: inline-block; margin:0 5px;vertical-align:middle; }
 .cadalog_list ul li a{ display: block;  border:1px solid #fff; border-radius:25px; padding:10px; color:#fff; font-size:14px; line-height:16px;
     -webkit-transition: all 0.15s ease-in-out;
     -moz-transition: all 0.15s ease-in-out;
     -ms-transition: all 0.15s ease-in-out;
     -o-transition: all 0.15s ease-in-out;
}
.cadalog_list ul li a:hover{ color:#06295f; background:#fff; }


.layer_list{ position: absolute; right:0;top:10px; }
.layer_list ul{ overflow: hidden; display: inline-block; }
.layer_list ul li{ cursor:pointer; float:left; color:#fff; font-size:15px; line-height:20px; padding:0 10px; position: relative; }
.layer_list ul li:before{ content:""; display: block; border-left:1px solid #fff; height:10px; position: absolute;left:0;top:50%; margin-top:-5px; }
.layer_list ul li:first-child:before{ display: none; }
.layer_list ul li a{ color:#fff; font-size:15px; }

.layer_list .checkbox{ position: relative; left:0;top:0; cursor:pointer; }
.layer_list .checkbox label{ font-size:15px; width:auto; padding-left:25px; line-height:20px;}
.layer_list .checkbox label:before{ background: url(../img/ico_checkw.png) 0 0 no-repeat; background-size:100% 100% !important; }
.layer_list .checkbox input:checked + label:before {
    background: url(../img/ico_checkw_on.png) 0 0 no-repeat;}

.cadalog_box{ position: fixed;left:0;top:0;right:0;bottom:0; z-index: 1002;background:rgba(0,0,0,0.6); display: none; height:100%; }

.cadalog_slide{ position: absolute;top:-9999px; overflow: hidden; height:inherit;}
.cadalog_slide.on{ position: relative;top:0; }
.cadalog_slide .img { height:inherit; }
.cadalog_slide img{ max-width:100%; max-height:100%; }




.product_layer{ position: fixed;left:0;top:0;right:0;bottom:0; background:rgba(0,0,0,0.5);visibility: hidden;z-index: -1; opacity:0; width:830px;}
.product_layer.on{ opacity:1; z-index: 2000;visibility: visible; }
.product_layer .in{ position: absolute;left:-830px;top:0;bottom:0; width:830px;background:#fff; padding:15px;  height:inherit;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out; opacity:0;
}
.product_layer.on .in{ left:0; opacity:1; }
.product_layer .in .in_box{ border:1px solid #333; height: calc( 100% - 55px );padding:10px; overflow-y:auto; }
.product_layer .in .inner{}
.product_layer .in .inner .box{ height:100%; overflow-y:auto; }
.product_layer .in .close{ width:30px; height:30px; right:-35px;top:10px; position: absolute; transform:rotate(45deg); font-size:0;}
.product_layer .in .close:before{ content:""; display: block; border-left:2px solid #fff; position: absolute;left:50%; top:0;bottom:0;margin-left:-1px; }
.product_layer .in .close:after{ content:""; display: block; border-top:2px solid #fff; position: absolute;left:0; top:50%;right:0;margin-top:-1px; }


.product_layer .in table{ width:100%; border-collapse: collapse; }
.product_layer .in table input{ outline:none; width:100%; border:1px solid #fff; }
.product_layer .in table input::placeholder{ font-weight:300; letter-spacing:0.5px; }
.product_layer .in table th ,
.product_layer .in table td { font-size:13px;}
.product_layer .in table th { font-weight:400; text-align:left;padding:0 5px; }
.product_layer .in table thead th{ }
.product_layer .in table thead td{ }
.product_layer .in table td input{ width:100%;height:29px;padding:0 5px; }
.product_layer .in .first{ border:1px solid #000; border-width: 0 0 1px 1px; }
.product_layer .in .first th,
.product_layer .in .first td{ border:1px solid #000; border-width:1px 1px 0 0 ; }
.product_layer .in table th.first{ border-left:1px solid #000; }

.product_layer .in table tbody th{ border-top:0; border-left:0; }
.product_layer .in table tbody td{ border:1px solid #000; border-width:0 1px 1px 0; }
.product_layer .in .button_area { font-size:0; text-align:center; padding-top:10px; }
.product_layer .in .button_area .button{ display: inline-block;padding:10px 30px; font-size:15px; line-height:18px; border-radius:25px; margin:0 5px; font-weight:500; }
.product_layer .in .button_area .list{ background:#ddd; color:#000; }
.product_layer .in .button_area .save{ color:#fff; background:#06295f; }
.product_layer .in .button_area .modify{ color:#fff; background:#215cb5;}
.product_layer .in .button_area .copy{ color:#fff; background:#a30e09;}

.product_layer .in .left table tbody td{ border-right:0; }

.product_layer .in .cont_tit{ overflow: hidden; margin:15px 0 5px; }
.product_layer .in .cont_tit > div{ float:left; width:50%; }
.product_layer .in .cont_tit .tit{ overflow: hidden; position: relative; }
.product_layer .in .cont_tit .tit h4{ float:left; width:70px; }


.product_layer .in .bottom_trap{  }
.product_layer .in .bottom_trap > div{ font-size:0; }
.product_layer .in .bottom_trap select{ width:auto;;margin-right:5px; display: inline-block; vertical-align:middle; font-size:14px; height:25px; line-height:25px; border:1px solid #ccc;}
.etc_list .select_area .add,
.etc_list .select_area .remove,
.product_layer .in .bottom_trap .remove,
.product_layer .in .bottom_trap .add{ color:#fff; background:#083a86; width:30px; text-align:center; height:24px; line-height:24px; border-radius:3px;  display: inline-block; vertical-align:middle; font-size:13px;}

.product_layer .in .bottom_trap{  }
.etc_list .select_area .remove,
.product_layer .in .bottom_trap .remove{ background:#8b8b8b; }
.product_layer .in .bottom_trap .trap-row{ border-top:1px solid #000;padding:2px;}
.product_layer .in .bottom_trap .trap-row:first-child{ border:0; margin-top:0; }

.etc_list .select_area{ padding:2px; }
.etc_list .select_area select,
.etc_list .select_area .choice{ border:1px solid #ccc; height:25px; line-height:21px; padding:2px;vertical-align:middle; }

.etc_list .select_area .choice{ min-width:150px;padding:2px 5px;  }
.etc_list .select_area .color{ position: relative; margin-top:3px; }
.etc_list .select_area .color:first-child{ margin-top:0 }
.etc_list .select_area .color .box{ position: absolute;left: 0;
    top: 30px; display: none;
    background: #fff;
    border: 1px solid #000;
    border-radius: 5px;
    z-index: 5;
    height:150px; overflow-y:auto;
}
.etc_list .select_area .color .box li{ cursor:pointer; }
.etc_list .select_area .reset{ color: #fff;
    background: #a30e09;
    width: 45px;
    text-align: center;
    height: 24px;
    line-height: 24px;
    border-radius: 3px;
    display: inline-block;
    vertical-align: middle;
    font-size: 13px;
    display: none;
}

.product_layer h4 { font-size:16px; line-height:23px; font-weight:500;  }

.checkbox{ position: absolute;left:75px;cursor:pointer; top:2px; cursor:pointer; }
.checkbox input{ position: absolute;left:-9999px; top:0; visibility: visible;}
.checkbox label { font-size:0; position: relative; z-index: 3; display: block;  width:20px; height:20px; }
.checkbox label:before{ content:""; display: block; width:20px; height:20px;position: absolute;left:0;top:0px; background:url(../img/ico_check.png) 0 0 no-repeat; background-size:100%; }
.checkbox input:checked + label:before {  background:url(../img/ico_check_on.png) 0 0 no-repeat; background-size:100%;  }

.etc_arr{ padding-bottom:2px; margin-top:-2px; }
.etc_arr input{ height:19px !important; line-height:20px !important; }
.etc_arr select{ margin-left:2px; }

.etc_arr div{  }
.etc_arr div input{ width:30px !important;padding:0 !important; }

dl.size_dl{ float:right; width: calc( 100% - 110px ); }
dl.size_dl dt{ line-height:24px; float:left;width:30px; font-size:14px; font-weight:500; color:#000; }
dl.size_dl dd {position: relative; font-size:14px; color:#000; }
dl.size_dl dd input{display: inline-block; width: 44px !important; border:1px solid #000 !important; border-radius:3px; padding:2px 3px !important; }
dl.size_dl dd input:after{ content:"mm"; display: block; position: absolute;right:0;top:10px; }
dl.size_dl dd span{ display: inline-block; margin-left:2px; font-size:11px; font-weight:500; }

textarea:focus,
input[type="text"]:focus{ outline:2px solid #06295f !important; }

.add_acc{ position: relative; }
.product_layer .in table td.add_acc input{ width: calc( 100% - 60px ); }
.add_acc .all_acc{
    color: #fff;
    background: #083a86;
    width: 50px;
    text-align: center;
    height: 24px;
    line-height: 24px;
    border-radius: 3px;
    display: inline-block;
    vertical-align: middle;
    font-size: 12px;
    position: absolute;
    right:5px ;
    top:2px;
}

.add_acc .all_acc.on{ background:#333; }

.product_info{ overflow: hidden; }
.product_info .in_produc{position: relative; overflow: hidden; border:1px solid #000; border-width:1px 0 1px 1px; float:left; width:100%; }
.product_info .in_produc:before{ content:""; display:block; border-left:1px solid #000; position: absolute;left:50%;bottom:0;top:0; margin-left:75px; }
.product_info .in_produc:after{ content:""; display:block; border-left:1px solid #000; position: absolute;right:0;bottom:0;top:0; }
.product_info.scroll { margin-right:-11px; }
.product_info .cont{ float:left; width:50%; }
.product_info .left{ position: relative; }
.product_info .left:before{ content:""; display:block; border-left:1px solid #000; position: absolute;right:-1px;bottom:0;top:0; }

.product_info .left:after{ content:""; display: block; border-left:1px solid #000; position: absolute;left:76px;bottom:-1000px;top:0; }
.product_info .left table tbody th{ border-bottom:1px solid #000; position: relative;}
.product_info .right { position: relative; }
.product_info .right table tbody th{ border:1px solid #000; border-width:0 0 1px 1px }
.product_layer .in .product_info .cont_tit .right th{ border-left:0; }
.product_layer .in .product_info .cont_tit .right td{ border-right:0; }
.product_info .left table tbody th .checkbox{ left: 64px; top:4px;}

.product_info table tbody tr:last-child td,
.product_info table tbody tr:last-child th{ border-bottom:0 !important; }


.product_info .bottom_box .left:after { display: none; }
.product_info .bottom_box .left table tbody th{ border-right:1px solid #000; }

.product_layer .etc_list { border-bottom:1px solid #000; }
.product_layer .bottom_box{ float:left; width:100%;margin-top:10px; position: relative;}
.product_layer .bottom_box:before{ content:""; display: block; border-bottom:1px solid #000; position: absolute;left:0;bottom:0;right:0; z-index: 2;}
.product_layer .bottom_box:after{ content:""; display: block; border-right:1px solid #000; position: absolute;top:33px;bottom:0;right:0; }
.product_layer .bottom_box h4{padding:5px 0; }
.product_layer .bottom_box h4 strong{ background:#e01414; color:#fff; font-size:14px;display: inline-block; padding:5px;  border-radius:5px; margin-left:10px;}
.product_layer .bottom_box table{ border-top:1px solid #000; position: relative;  }
.product_layer .bottom_box table:before{ content:""; display: block;border-left:1px solid #000; position: absolute;left:0;top:0;bottom:0; }
.product_layer .bottom_box .bottom table:after{ content:""; display: block;border-bottom:1px solid #fff; position: absolute;left:0;bottom:-1px;right:0; z-index: 1;}
.product_layer .bottom_box .left{ float:left; width:60%; border:0; }
.product_layer .bottom_box .left:before{ content:""; display: block; border-left:1px solid #000; top:33px; right:0;bottom:0;z-index: 1; position: absolute; }
.product_layer .bottom_box .right { float:left; width:40%;border:0; }
.product_layer .bottom_box .right textarea{ border-top:1px solid #000;padding:5px; width:100%; resize:none; height:311px; white-space: pre-wrap; word-break: break-all; resize: none; overflow: hidden;}


.color_v{}
.color_v li{ padding-left:25px !important;; position: relative; }
.color_v li:before{ content:""; display: block;width:14px;height:14px; border-radius:50%; border:1px solid #000;  position: absolute;left:5px;top:50%; margin-top:-7px;}
.color_v li:first-child:before{ background:#fff; }

.etc_list .select_area .choice:before,
.color_v li.white:before{ background:#fff;}
.color_v li.vanila:before{ background:#e7e0ce;}
.color_v li.ivory:before{ background:#dbd5d1;}
.color_v li.bagei:before{ background:#d8cec5}
.color_v li.bambu:before{ background:#cac3b6;}
.color_v li.lightgray:before{ background:#d7d7d7}
.color_v li.gray:before{ background:#c1bfc0;}
.color_v li.cement:before{ background:#b0aeab}
.color_v li.darkgray:before{ background:#87868d}
.color_v li.volcano:before{ background:#726f70}
.color_v li.cocoa:before{ background:#6f5239}
.color_v li.darkcocoa:before{ background:#594a48}
.color_v li.bidulgy:before{ background:#b3b3b3}
.color_v li.jin_gray:before{ background:#868583}


.etc_list .select_area .choice:before{ content:""; display: inline-block;width:14px;height:14px; border-radius:50%; position: relative; top:-2px; margin-right:3px; vertical-align:middle; border:1px solid #333;}
.etc_list .select_area .choice.white:before{ background:#fff;}
.etc_list .select_area .choice.vanila:before{ background:#e7e0ce;}
.etc_list .select_area .choice.ivory:before{ background:#dbd5d1;}
.etc_list .select_area .choice.bagei:before{ background:#d8cec5}
.etc_list .select_area .choice.bambu:before{ background:#cac3b6;}
.etc_list .select_area .choice.lightgray:before{ background:#d7d7d7}
.etc_list .select_area .choice.gray:before{ background:#c1bfc0;}
.etc_list .select_area .choice.cement:before{ background:#b0aeab}
.etc_list .select_area .choice.darkgray:before{ background:#87868d}
.etc_list .select_area .choice.volcano:before{ background:#726f70}
.etc_list .select_area .choice.cocoa:before{ background:#6f5239}
.etc_list .select_area .choice.darkcocoa:before{ background:#594a48}
.etc_list .select_area .choice.bidulgy:before{ background:#b3b3b3}
.etc_list .select_area .choice.jin_gray:before{ background:#868583}


#order_list_box{ }
#order_list_box table{ width:100%; border-collapse: collapse;}
#order_list_box table thead *{ font-size: 18px; font-weight:500;}
#order_list_box table thead th{ height:24px; line-height:24px; padding:5px;border-bottom:1px solid #333; color:#333; }
#order_list_box table tbody td { height:24px; line-height:24px; padding:5px; color:#333; border-bottom:1px solid #ccc; text-align:center; }

.order_bottom{ text-align:right; padding:15px 0; }
.order_bottom button{ color:#fff; background:#06295f; padding:10px 20px; border-radius:10px; font-size:16px; }

.delete_row_btn{ color:#fff; background:#222222; padding:5px 10px; border-radius:5px; }



.product_layer .in .ceiling{padding:6px;}
.product_layer .in .ceiling > div:after{ content:"";display: block; clear:both; }
.product_layer .in .ceiling > div input{ width:50%; float:left;}
.product_layer .in .ceiling .top{ margin-bottom:5px; }
.product_layer .in .ceiling .bottom{}
.product_layer .in .ceiling > div > div{ width:40%;float:left; }
.product_layer .in .ceiling > div > div:first-child{ width:60%; }
.product_layer .in .ceiling > div > div strong{ height:20px; line-height:20px;display: inline-block; margin-right:5px; }
.product_layer .in .ceiling > div > div select{ height:20px; line-height:20px; border:1px solid #ddd; }




.product_layer .in .length_box{ }
.product_layer .in .length_box:after{ content:""; display: block; clear:both; }
.product_layer .in .length_box > input{ float:left; width:50%;}
.product_layer .in .length_box .length_chk{ float:right; width:36%;padding:3px 0;   }
.product_layer .in .length_box .length_chk strong{ float:left; height:22px; }
.product_layer .in .length_box .length_chk input{ float:left; border:1px solid #ccc; width:29px;margin:0 5px; height:22px; line-height:20px;}
.product_layer .in .length_box .length_chk .chk{ float:left;color:#fff; background:#06295f; padding:2px 5px; border-radius:3px; font-size:12px; width:35px; }



.product_layer .etc_list .length_box{  }
.product_layer .etc_list .length_box > input{ width:135px; }
.product_layer .in .etc_list table td .size_dl input{ height:22px; }
.etc_list .size_dl{ float:left; width:auto; padding-top:3px; }
.etc_list .size_dl table td input{  }
.etc_list dl.size_dl dt{ position: absolute;left:-9999px;top:0; }

.product_layer .in .etc_list .length_chk{ width:78px !important;padding:3px 0 0 !important;}




#app_alert_layer{ position:fixed; inset:0; z-index:3000; opacity:0; transition:opacity .15s; }
#app_alert_layer.on{ visibility:visible !important; opacity:1; }
#app_alert_layer .app-alert-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.5); }
#app_alert_layer .app-alert-panel{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(420px,90vw); background:#fff; border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,.2);
  border:1px solid #06295f20; overflow:hidden;
}
#app_alert_layer .app-alert-message{ padding:22px 20px; font-size:15px; line-height:1.5; color:#333; }
#app_alert_layer .app-alert-actions{ display:flex; justify-content:center; gap:8px; padding:12px; border-top:1px solid #eee; }
#app_alert_layer .app-alert-ok{
  min-width:100px; height:36px; line-height:36px; padding:0 16px;
  border-radius:8px; border:0; background:#06295f; color:#fff; font-weight:500; cursor:pointer;
}
#app_alert_layer .app-alert-ok:focus{ outline:2px solid #215cb5; outline-offset:2px; }

#app_confirm_layer{ position:fixed; inset:0; z-index:3000; opacity:0; transition:opacity .15s; }
#app_confirm_layer.on{ visibility:visible !important; opacity:1; }
#app_confirm_layer .app-confirm-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.5); }
#app_confirm_layer .app-confirm-panel{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(420px,90vw); background:#fff; border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,.2);
  border:1px solid #06295f20; overflow:hidden;
}
#app_confirm_layer .app-confirm-message{ padding:22px 20px; font-size:15px; line-height:1.5; color:#333; }
#app_confirm_layer .app-confirm-actions{ display:flex; justify-content:flex-end; gap:8px; padding:12px; border-top:1px solid #eee; }
#app_confirm_layer .app-confirm-ok,
#app_confirm_layer .app-confirm-cancel{
  min-width:90px; height:36px; line-height:36px; padding:0 14px; border-radius:8px; border:0; cursor:pointer; font-weight:500;
}
#app_confirm_layer .app-confirm-ok{ background:#06295f; color:#fff; }
#app_confirm_layer .app-confirm-cancel{ background:#ddd; color:#000; }
#app_confirm_layer .app-confirm-ok:focus,
#app_confirm_layer .app-confirm-cancel:focus{ outline:2px solid #215cb5; outline-offset:2px; }







.test{  }