/*quick2*/


body.quick02 #wrap{
    width:640px;
    margin: auto;
    margin-top: 113px;
}

.guide_box{
     font-size: 13px;
     font-weight: 500;
     padding:15px;
     border:1px solid #c5c5c5;
     margin-top: 15px;
    margin-bottom: 25px;
}
.guide_box li{
     padding:4px 0;
}

body.quick02 #wrap .btns{
     margin-top: 10px;
     height: auto;
     display: block;
     line-height: auto;
}



body.quick02 .t_layout2{
    margin-bottom: 25px;
}

body.quick02  .sel_page{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
body.quick02  .sel_page h2{
    width:100px;
}
body.quick02 .section1 .btns.last {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end;
}

body.quick02 .btns .btn3{
    position: relative;
    display: inline-block;
    margin-left: 0;
    float: right;
}






/*간편,상세>디자인파일*/
body.quick02 #mask .popup{
     width:960px;
}

body.quick02 #mask .popup_cont{
     height:450px;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-pack: justify;
         -ms-flex-pack: justify;
             justify-content: space-between;
}

body.quick02 #mask .popup_cont > ul{
     width:140px;
     height: 100%;
     overflow-y: auto;
     overflow-x: hidden;
     padding-right:10px;

}
body.quick02 #mask .popup_cont > ul >li.on{
     background:#e82c23;
     border:2px solid #b5322b;
     color: white;
     font-weight: 800;
}
body.quick02 #mask .popup_cont > ul >li{
     width:100%;
     border:1px solid #dddddd;
     margin-bottom: 4px;
}

body.quick02 .popup_cont > ul >li:hover{
     background-color: rgba(213, 213, 213, 0.29);
}
body.quick02 #mask .popup_cont > ul >li > a{
     width:100%;
     height: 100%;
     display: block;
     padding:15px 0;
     -webkit-box-sizing: border-box;
             box-sizing: border-box;
     text-align: center;

}

body.quick02 #mask .popup_cont .cont_right{
     width:737px;
     position: relative;
}
body.quick02 #mask .popup_cont .cont_right ul.sample_list li{
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-pack: justify;
         -ms-flex-pack: justify;
             justify-content: space-between;
     margin-bottom: 5px;
     margin-right: 4px;
}
body.quick02 #mask .popup_cont .cont_right ul.sample_list li .sample_box{
     min-width:180px;
     width:180px;
     height: 180px;
     display:block;
     background-color: white;
     border:1px solid #e2e2e2;
     -webkit-box-sizing: border-box;
             box-sizing: border-box;
}

body.quick02  .popup,body.quick02  #mask{display: none;}

body.quick02 .sample_box{
     background-image: url('http://www.bonobo.co.kr/datazone/templet/OPENAS_2495831_mid.jpg');
     background-position: center center;
     background-size: cover;
     background-repeat: no-repeat;
}
body.quick02 #mask .popup_cont .cont_right ul.sample_list li a.on{
     border:3px solid #e82c23;
}
body.quick02  .popup .check_form input{
     display: none;
}
body.quick02  .popup .check_form input[type="radio"]+label{
     width:100%;
     height: 100%;
     position: relative;
     box-sizing: border-box;
     margin-left: 0;
}
body.quick02 .popup .check_form  input[type="radio"]+label{
    width:23px;
    height: 23px;
}
body.quick02 .popup .check_form  input[type="radio"]+label:before{background:url(../img/check3.png) no-repeat; background-size: contain; width:23px; height: 23px; position: absolute;
top:0;left: 0;}
body.quick02 .popup .check_form  input[type="radio"]:checked+label:before{background:url(../img/checked3.png) no-repeat;}


body.quick02 .popup .sample_list>li{position:relative;}
body.quick02 .popup .sample_list .flex_line{
    position: absolute;
    bottom: 0;
    left: 0;
    width:100%;
    background-color:rgba(255,255,255,.8);
    height: 40px;
    box-sizing: border-box;
    border: 1px solid #e2e2e2;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

body.quick02 .popup .sample_list .flex_line .input_wrap{
    height: 40px;
    width: 40px;
    display: flex;
    justify-content: center;
    align-items:center;
}
body.quick02 .popup .sample_list .flex_line .btn_zoom {
    margin-right: 5px;
}
body.quick02 .popup .sample_list .flex_line .btn_zoom img{
    width:23px;
    height: 23px;
    opacity: 0.4;
}
body.quick02  .paging_num li.num.on{
    border: 1px solid #e82c23;
}

body.quick02 .paging_num{
     margin-top: 40px;
     width: 100%;
     justify-content: center;
     position: absolute;
     bottom: 10px;
}

body.quick02 .popup .btn3{
     position: absolute;
     bottom: 0;
     right:0;
}

body.quick02 .check_form label:before{
    top:4px;
    margin-right: 5px;
}
body.quick02 .check_form label{
    margin-right: 10px;
}

.r_b{
    font-size: 16px;
    font-weight: 700;
}


/*step 3*/



body.step03 #wrap{
    width:650px;
    margin: 113px auto 0;
}

body.step03 .section1 .btns.last {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end;
    display: block;
    text-align: right;
    margin-top: 40px;
}

.t_layout3  .btns .btn3{
    position: relative; display: inline-block;
    margin-left: 0;

}

body.step03 .t_layout3 {
    margin-top: 30px;
}





body.step03 tr.name input{
    width:130px;
    margin-right: 5px;
}
body.step03 tr.name select{
    width:100px;
}
body.step03 tr.addr{
    height: 155px;

}
body.step03 tr.addr th{
    vertical-align: top;
    padding-top: 16px;
}

body.step03 tr.addr .btn_round{
    color:#ee2e24;
    border: 2px solid #ee2e24;
    width:85px;

}

body.step03 tr.addr ul li{
   margin-bottom: 7px;
}

body.step03 tr.addr ul .line2 input,body.step03 tr.addr ul .line3 input{
    width:470px;
}

body.step03 tr.addr ul .line3 span{
    color:#ee2e24;
    font-size: 12px;
    padding-top: 8px;
    display: inline-block;
}

body.step03 .in2{
    width:150px;
    display: inline-block;
    margin-top: 30px;
}
body.step03 .in2+span b{
    color:#ee2e24;
}

body.step03 tr.phone input{
    width:75px;
}

body.step03 tr.email input{
    width:250px;
}


/*step4*/


body.step04 #wrap{
	width:740px;
    margin:113px auto 0;
}
body.step04 .envelop_wrap{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
}
body.step04 #wrap .left{
	width:325px;
	margin-right: 30px;
    float: left;
}
body.step04 #wrap .right{
	width:385px;
    float: left;
}
body.step04 #wrap .right>p,body.step04 #wrap .left>p{
	font-size: 15px; font-weight: 600;
	margin-top: 30px;
}

body.step04 #wrap div.right p.two{
	margin-top: 10px;
}
body.step04 #wrap .btns{
	width:100%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: end;
	    -ms-flex-pack: end;
	        justify-content: flex-end;
    text-align: right;
}
body.step04 #wrap div .box{
	border:1px solid #dddddd;
	margin-top: 15px;
	-webkit-box-shadow: 2px 2px 5px #dddddd;
	        box-shadow: 2px 2px 5px #dddddd;
	width:100%;
}
body.step04 #wrap .left .box{

	height:445px;
	overflow: hidden;
	position: relative;
}

body.step04 #wrap .left .box img{
	min-width: 100%;
	min-height: 100%;
	position: absolute;
	left: 50%;
	top: 50%;
	-webkit-transform:translate(-50%,-50%);
	        transform:translate(-50%,-50%);
}
body.step04 #wrap .right .box{
	height:200px;
	background-size: cover;
}

body.step04 .btns a{display: inline-block;
margin-left: 0;}


body.step04 .box1{
	background:url(../img/envelop_front.png) no-repeat;
	position: relative;

}
body.step04 .box2{
	background:url(../img/envelop_back.png) no-repeat;
}

body.step04 .box1>div{
	position: absolute;
	font-size: 11px;
	overflow: hidden;
	white-space: nowrap;
}


/*봉투 앞.*/
.send_info{
	width:240px;
	left: 20px;
	top:25px;
}

.rece_info{
	width:175px;
	right: 25px;
	bottom:18px;
}
.b{font-weight: 800;}
.rece_info .sn{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
}
.rece_info .adress{
	white-space: normal;
	max-height: 32px;
	overflow: hidden;
}
.mark{
	width:65px;
	height: 65px;
	background:url(../img/send_mark.png) no-repeat;
	background-size: contain;
	right:15px;
	top: 15px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;
	-ms-flex-pack: distribute;
	    justify-content: space-around;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;

}
.mark p{
	font-size: 7px;
	letter-spacing: -1px;
}

.del_num{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: end;
	    -ms-flex-pack: end;
	        justify-content: flex-end;
}

.pod_box{
	padding: 5px 17px;
	text-align: center;
	border: 1px solid black;
	left: 20px;
	bottom: 45px;

}



/*발송함, 주문내역*/



body.send #wrap{
	width:680px;
	margin: 153px auto 0;
}
.btn_round.red{
	color: #ee2e24;
    border: 2px solid #ee2e24;
    display: inlnie-block;
	width:auto;
	padding:4px 30px;
	font-weight: 600;
}

body.send .guide_box1{
	width:100%;
	background: url(../img/send_guide1.svg) no-repeat;
	height:150px;
	height:180px;
	background-size: contain;
	margin-bottom: 30px;
    position:absolute;
    top:20px;
    left:28px;
}

body.send .section1{
    padding-top: 190px;
    padding-left: 10px;
}

body.send #wrap .btns{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: end;
	    -ms-flex-pack: end;
	        justify-content: flex-end;
    position: relative;
    left: 10px;
}
body.send #wrap .btns a{
	margin-left: 0;
	display: inline-block;
}

body.send .lookup_date{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
}
body.send .lookup_date dt{
	min-width:70px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	font-size: 14px;
	font-weight: 400;
}
body.send .lookup_date input{
	width:130px;
}
body.send .lookup_date  dd span{
	margin:0 10px;

}
body.send .lookup_date .btn_round{
	margin-left: 10px;
}

body.send .t_layout1 thead tr th,body.send .t_layout1 tbody tr td{
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
}
body.send .t_layout1 thead{width:100%;}
body.send .t_layout1 tbody{
	border-bottom: 1px solid #dddddd;
	width:100%;
    width:600px;
}
body.send .t_layout1 tbody tr td{
	font-weight: 400;
}
body.send .t_layout1 thead tr th:nth-child(1){
	width:100px;
	min-width:100px;
	padding-left: 10px;
	text-align: center;
}
body.send .t_layout1 tbody tr td:nth-child(1){
	width:100px;
	min-width:100px;
	max-width:100px;
	text-align: center;
}

body.send .t_layout1 thead tr th:nth-child(2){
	width:100px;
	text-align: center;
	min-width:100px;
}
body.send .t_layout1 tbody tr td:nth-child(2){
	width:100px;
	max-width:100px;
	min-width:100px;
}
body.send .t_layout1 tbody tr{
     width:600px;
     box-sizing: border-box;
}
body.send .t_layout1 tbody tr.on{
    background: rgba(0,0,0,.03);
}

body.send .t_layout1 thead tr th:nth-child(3){
	width:150px;
	max-width:150px;
	min-width:150px;
	text-align: right;
	padding-right: 50px;
}
body.send .t_layout1 tbody tr td:nth-child(3){
	width:150px;
	max-width:150px;
	min-width:150px;
	text-align: right;
	padding-right: 50px;
}

body.send .t_layout1 thead tr th:nth-child(4){
	width:110px;
	padding-right: 0px;
	text-align: center;
}
body.send .t_layout1 tbody tr td:nth-child(4){
	width:110px;
	padding-right: 0px;
	text-align: center;
}

body.send .t_layout1 thead tr th:nth-child(5){
	width:140px;
	text-align: center;
	padding-right: 30px;
}
body.send .t_layout1 tbody tr td:nth-child(5){
	width:110px;
	text-align: center;
}
body.send  #wrap .btns{margin-top: 20px;}
body.send  #wrap .btns a{margin-left: 5px;}

body.send #wrap> div > h2{
	font-size: 22px;
	font-weight: 700;
}
body.send #wrap> div > h2.r_b{
	font-size: 17px;
	margin-top: 30px;
	margin-bottom: 10px;
}
body.send .send_list{
	width:100%;
	border:1px solid #e2e1e1;
	border-top: 6px solid #e12b22;
	margin-top: 20px;
}
body.send .send_list .top{
	padding: 15px 50px;
	width:100%;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
	background-color:#f5f5f5;
	border-bottom:1px solid #e2e1e1;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
}
body.send .send_list .top .left{
	font-size: 16px;
	color: #dd2b21;
	width:145px;
	border-right: 1px solid #e2e1e1;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
}
body.send .send_list .top .left p span{
	font-size: 25px; font-weight: 700;
}
body.send .send_list .top .right{
	margin-top: 10px;
}
body.send .send_list .top .right dl{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	margin-bottom: 10px;
	width:240px;
	-webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
	-webkit-box-align: end;
	    -ms-flex-align: end;
	        align-items: flex-end;
}
body.send .send_list .top .right dt{
	font-size: 11px;
}
body.send .send_list .top .right dd{
	font-size: 14px;
}
body.send .send_list table{
     border-collapse:collapse; width:100%;
}
body.send .send_list table tbody{
     height: 120px;
     overflow:auto;
     overflow-y:auto; overflow-x:hidden; float:left; height:100px;
     wdith:600px;
}
body.send .send_list table td{
	height:30px;
	border-bottom: 1px solid #e2e1e1;
     white-space: nowrap;
}

body.send .send_list table td:nth-child(1){
	width:100px;
	padding-left: 30px;
     max-width: 150px;
     overflow: hidden;
}
body.send .send_list table td:nth-child(2){
	width:433px;
     padding-left: 20px;
}
body.send .send_list table td b{
	color:#e12b22;
}
body.send .t_layout2{
	width:600px;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;

}

body.send .t_layout2 tbody{
     max-width:600px;
     color:#adadad;
}
body.send .t_layout2 tbody tr{
     width:100%;

}
body.send .t_layout2 thead tr{
     width:100%;
}
body.send .t_layout2 thead tr th:nth-child(1){
	width:400px;
}
body.send .t_layout2 tbody tr td:nth-child(1){width:400px;}

body.send .t_layout2 thead tr th:nth-child(2){width:100px; max-width: 100px;}
body.send .t_layout2 tbody tr td:nth-child(2){width:100px; max-width: 100px;}

body.send .t_layout2 thead tr th:nth-child(3){width:100px; max-width: 100px;}
body.send .t_layout2 tbody tr td:nth-child(3){width:80px; max-width: 80px;}

body.send .flex_line{
     margin:30px 0;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     font-size: 16px;
     font-weight: 400;
}
body.send .flex_line dt h2{
     width:95px;
     margin-right: 25px;
}
body.send .flex_line dt h2.r_b:after{
     position: absolute;
     right:0;
}

body.send .flex_line .addr span{
     display: inline-block;
     margin:0 15px;
}