@charset "utf-8";


/* ——————————————————————————————————————
 * orderList
/* —————————————————————————————————————— */
/* orderAlert */
.orderAlert{margin-bottom:20px}

/* orderSearch */
.orderSearch{}
.orderSearch form>ul{margin:0 -10px}
.orderSearch form>ul>li{float:left;padding:0 10px}
.orderSearch form>ul>li .form_group{display:inline-block}
.orderSearch form .form_field,
.orderSearch form .form_label,
.orderSearch form .form_separator,
.orderSearch form .radioType_1,
.orderSearch form .selectric_wrap{float:left}
.orderSearch form .form_label{line-height:38px;margin-bottom:0;margin-right:8px}
.orderSearch form .selectric_wrap{width:120px}
.orderSearch form .form_separator{line-height:38px;display:inline-block;margin:0 4px;font-size:14px}
.orderSearch form>ul>li.sch_keyword .selectric_wrap{width:110px;margin-right:4px}
.orderSearch form>ul>li.sch_keyword .form_field{min-width:auto;width:220px}
.orderSearch form>ul>li.sch_date .form_field{min-width:auto;width:120px}
.orderSearch form>ul>li.sch_date .selectric_wrap{width:100px;margin-right:4px}


/* ——————————————————————————————————————
 * orderWrite | popup
/* —————————————————————————————————————— */
#orderWrite{}
#orderWrite .btn_group{margin-top:30px;text-align:center}

/* prodBox */
#orderWrite .prodBox{}
#orderWrite .prodBox:before{content:'';display:block;border-top:1px dashed #ddd;margin:10px 0}
#orderWrite .prodBox:first-child:before{display:none}
#orderWrite .prodBox>ul{width:100%;display:table}
#orderWrite .prodBox>ul>li{width:auto;display:table-cell;vertical-align:middle;padding:0 2px}
#orderWrite .prodBox>ul>li:first-child{padding-left:0}
#orderWrite .prodBox>ul>li:last-child{padding-right:0}
#orderWrite .prodBox .form_field,
#orderWrite .prodBox .selectric_wrap{width:100%;min-width:auto;display:inline-block}


/* ——————————————————————————————————————
 * orderView | popup
/* —————————————————————————————————————— */
#orderView {
    width: 800px;
}


/* ——————————————————————————————————————
 * commentWrap | popup
/* —————————————————————————————————————— */
.commentAlert{width:800px;margin:10px auto 0}

#commentWrap{width:800px}
#commentWrap .winPopup_head{border-bottom:0}
#commentWrap .winPopup_head_tit h1 span{color:#FB6D3A}
#commentWrap .winPopup_head_tit h1 em{color:#999}
#commentWrap .comment_write{margin-top:0}
#commentWrap .comment_list{border-top:1px dashed #e4e4e4;margin-top:20px}


/* ——————————————————————————————————————
 * customer
/* —————————————————————————————————————— */
.customer{}
.customer .container .row .col{float:left}
.customer .contact{width:25%}
.customer .notice{width:75%;padding-left:30px}

/* contact */
.customer .contact .portlet_body{padding:0 0 10px}
.customer .contact .contact_gruop{padding:20px 30px;border-top:1px solid #eee}
.customer .contact .contact_bilrigo{padding:30px 30px 20px;border-top:0}
.customer .contact .contact_gruop h3{margin-bottom:12px;font-size:15px}
.customer .contact .contact_bilrigo h3{text-align:right}
.customer .contact .contact_bilrigo h3 img{width:140px;height:auto}
.customer .contact .contact_gruop h3 span{display:inline-block}
.customer .contact .contact_gruop .contact_txt dl{width:100%;display:table;margin:2px 0 0}
.customer .contact .contact_gruop .contact_txt dd,
.customer .contact .contact_gruop .contact_txt dt{display:table-cell;letter-spacing:0;font-size:12px;color:#444}
.customer .contact .contact_gruop .contact_txt dt{width:28%;color:#999}
.customer .contact .contact_gruop .contact_txt dd{width:72%}
.customer .contact .contact_gruop .info_box{font-size:13px;color:#999;background:#f6f6f6;border-radius:4px;padding:8px 10px;margin-top:18px}

/* notice */
.customer .notice .portlet{min-height:707px}


/* ——————————————————————————————————————
 * login
/* —————————————————————————————————————— */
body.login_page{width:100%;height:100%;height:100vh;border-collapse:separate;background:url("/assets/img/pattern_bilrigo-min.png") #f6f4f3 no-repeat;-webkit-background-size:cover;background-size:cover}
.login_wrap{max-width:580px;_width:30%;height:100%;position:absolute;top:0;left:50%;bottom:0;transform:translateX(-50%)}
.login_wrap .login_box{width:100%;height:100%;display:table;position:relative;-webkit-box-shadow:0 0 13px 0 rgba(0,0,0,0.07);box-shadow:0 0 13px 0 rgba(0,0,0,0.07);background-color:#fff;padding:80px}
.login_wrap .login_box_inner{display:table-cell;vertical-align:middle}
.login_box h1.logo{padding:0 0 25px;border-bottom:2px solid #222;margin-bottom:25px}
.login_box h1.logo img{width:auto;height:64px}
.login_box .form_group{margin-bottom:12px}
.login_box .form_field_login{display:inline-block;width:100%;height:57px;padding:15px 20px 16px;vertical-align:middle;font-size:16px;line-height:24px;color:#222;border:1px solid #ddd;border-radius:3em;outline:none;background:#fff;-webkit-box-shadow:0 1px 4px 0 rgba(0,0,0,0.1);box-shadow:0 1px 4px 0 rgba(0,0,0,0.1);-webkit-transition:border 300ms,-webkit-box-shadow 300ms;transition:border 300ms,-webkit-box-shadow 300ms;transition:border 300ms,box-shadow 300ms;transition:border 300ms,box-shadow 300ms,-webkit-box-shadow 300ms;-webkit-appearance:none}
.login_box .form_field_login:hover{background:#f8f8f8;-webkit-box-shadow:0 1px 4px 0 rgba(0,0,0,0.1),inset 0 0 0 0 #222;box-shadow:0 1px 4px 0 rgba(0,0,0,0.1),inset 0 0 0 0 #222}
.login_box .form_field_login:focus{background:#f8f8f8;border-color:#222;-webkit-box-shadow:0 1px 4px 0 rgba(0,0,0,0.1),inset 0 0 0 0 #222;box-shadow:0 1px 4px 0 rgba(0,0,0,0.1),inset 0 0 0 0 #222}
.login_box .switchType_1{margin-top:16px}
.login_box .btn{width:100%;margin-top:25px}
.login_box .info_list{margin-top:20px}


/* ——————————————————————————————————————
 * myEdit | popup
/* —————————————————————————————————————— */
#myEdit{width:540px}
#myEdit .btn_group{margin-top:30px;text-align:center}

#loading {
    display: none;
    position: absolute;
    top:50%;
    left:50%;
    z-index:9999;
    _display: inline-block;
    width: 50px;
    height: 50px;
    border: 3px solid rgb(0 0 0 / 30%);
    border-radius: 50%;
    border-top-color: #000;
    animation: spin 1s ease-in-out infinite;
    -webkit-animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
    to { -webkit-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
    to { -webkit-transform: rotate(360deg); }
}

.btn_green { background-color: #28a745; color: white; }    /* 신청완료: 초록색 */
.btn_blue { background-color: #007bff; color: white; }     /* 접수요청: 파란색 */
.btn_orange { background-color: #fd7e14; color: white; }   /* 접수완료: 주황색 */
.btn_purple { background-color: #6f42c1; color: white; }   /* 주문확정: 보라색 */
.btn_yellow { background-color: #ffc107; color: black; }   /* 배송중: 노란색 */
.btn_red { background-color: #dc3545; color: white; }      /* 설치완료: 빨간색 */
.btn_gray { background-color: #6c757d; color: white; }     /* 처리완료: 회색 */
.btn_pink { background-color: #e83e8c; color: white; }     /* 재상담요청: 분홍색 */

.btn-purple { background-color: #6f42c1; color: #fff; transition: all 0.3s ease; }
.btn-purple:hover { background-color: #7d51d4; color: #fff; }

.btn-pink { background-color: #e83e8c; color: #fff; transition: all 0.3s ease; }
.btn-pink:hover { background-color: #f062a5; color: #fff; }

.btn-navy { background-color: #001f3f; color: #fff; transition: all 0.3s ease; }
.btn-navy:hover { background-color: #003366; color: #fff; }