
/* 키워드림 로보마켓 */
.kwdrm-body { width: 100%; min-height:100%; position: relative;}

.kwdrm-body .kwdrm-top-area{ background: #ebebfa; padding: 24px 16px; }
.kwdrm-body .kwdrm-top-txt + .kwdrm-card-area { margin-top: 12px;}
.kwdrm-body .kwdrm-top-area.type02 {text-align: center; background:#fff;}
.kwdrm-body .kwdrm-top-area.type02 .kwdrm-top-txt  {padding-top:30px;}
.kwdrm-body .kwdrm-top-area.type02 .kwdrm-card-img  {margin:0 auto 10px auto;}
.kwdrm-body .kwdrm-top-area .kwdrm-card-area {margin-top: 12px}
.kwdrm-body .kwdrm-top-txt .txt01{ font-size: 18px; font-weight: 700; margin-bottom: 2px;}
.kwdrm-body .kwdrm-top-txt .txt01 em { color: #b43a6b; text-decoration: underline;}
.kwdrm-body .kwdrm-top-txt .txt02{font-size: 16px;}
.kwdrm-body .kwdrm-top-txt .desc01{color:#666; font-size:14px}
/* .kwdrm-body .kwdrm-top-txt p + p { font-size: 14px; color: #333;} */
.kwdrm-body .kwdrm-top-txt p + span { font-size: 12px; color: #666; margin-top:12px}
.kwdrm-body .kwdrm-card-area {background: #fff; border-radius: 10px; padding: 20px 16px;   overflow: hidden;}
.kwdrm-body .kwdrm-top-txt .kwdrm-btn {margin-top:24px}
.kwdrm-body .kwdrm-card-img  {width:60px;height: 60px; margin-right:12px ;background: #f5f5f5;border-radius: 50%;}
.kwdrm-body .kwdrm-card-img.kwdrm-radius img {border-radius: 50%;}
.kwdrm-body .kwdrm-card-img img { width: 100%;}
.kwdrm-body .kwdrm-card-img.type02 {width:80px; margin-top:4px}
.kwdrm-body .kwdrm-card-middle {display: flex;flex-wrap: wrap;}
.kwdrm-body .kwdrm-flag-area { margin-bottom: 3px;}
.kwdrm-body .kwdrm-flag-area span { padding: 3px 5px; font-size: 11px; line-height: 12px; display: inline-block; border-radius: 8px; margin-right: 3px;  font-weight: 500;}
.kwdrm-body .kwdrm-flag-area span.type01 { background: #fae6ee; color:  #e33276; }
.kwdrm-body .kwdrm-flag-area span.type02 { background: #e8e6fa; color:  #574bd2;}
.kwdrm-body .kwdrm-flag-area span.type03 { background: #fae6ee; color:  #e22d72;}

.kwdrm-body .kwdrm-flag-area em  { padding: 3px 5px; font-size: 11px; line-height: 12px; display: inline-block; border-radius: 8px; margin-right: 3px;  font-weight: 500;}

.kwdrm-body .kwdrm-flag-area em.type03 { background: #ebd9bd; color:  #ac7d57;}
.kwdrm-body .kwdrm-flag-area em.type02 { background: #dddddd; color:  #707070;}
.kwdrm-body .kwdrm-flag-area em.type01 { background: #ffdfa7; color:  #c68a12;}

.kwdrm-body .kwdrm-form-wrap {display: flex;align-items: center;}
.kwdrm-body .kwdrm-form-wrap .label{white-space: nowrap; margin-right:10px;color: #222;}
.kwdrm-body .kwdrm-select{width: 100%;  height: 36px;padding: 5px 25px 5px 12px;border: 1px solid #bbb;background-image: url(../images/kwdrm/icon-selectbox.png);  background-repeat: no-repeat;  background-position: right center;  background-size: 21px auto;  background-color: #fff;  border-radius: 4px;  color: #333;}
.kwdrm-body .kwdrm-inp-wrap input {width: 100%;  height: 36px;  padding: 10px 8px;  border:1px solid #ddd ; font-size: 12px;  line-height: 15px;}
.kwdrm-body .mt16{margin-top:16px}
.kwdrm-body .kwdrm-inp-wrap .txt01{font-size: 20px; font-weight:700; color:#222 }
.kwdrm-body .kwdrm-inp-wrap .desc{margin-top:8px}
.kwdrm-body .kwdrm-inp-wrap .error{font-size: 12px; color:#fc1717 ;margin-top:8px}
.kwdrm-body .kwdrm-inp-wrap.phone-wrap{display:flex; align-items: center;}
.kwdrm-body .kwdrm-inp-wrap.phone-wrap > div{width:25%}
.kwdrm-body .kwdrm-inp-wrap.phone-wrap > div:nth-child(2),
.kwdrm-body .kwdrm-inp-wrap.phone-wrap > div:nth-child(3){margin-left:4px}
.kwdrm-body .kwdrm-inp-wrap.phone-wrap > div:last-child{margin-left:8px}
.kwdrm-body .kwdrm-inp-wrap.phone-wrap button {width:100%; font-size:12px; height:36px; border:1px solid #212266; color:#212266; border-radius: 4px;}
.kwdrm-body .kwdrm-inp-wrap.phone-wrap + .kwdrm-inp-wrap.phone-wrap {margin-top:8px;}
.kwdrm-body .kwdrm-inp-wrap.phone-wrap + .kwdrm-inp-wrap.phone-wrap > div:first-child {width:75%}
.kwdrm-body .kwdrm-inp-wrap.phone-wrap .oclock {color:#bd527e; margin-left:5px !important; padding-left:4px}
.kwdrm-body .kwdrm-inp-wrap.phone-wrap .oclock::before {content:''; display: inline-block; width:14px; height:14px; background:url(../images/kwdrm/icon_recent.png); background-size: 14px; margin-bottom:-1px}

.kwdrm-body .kwdrm-inp-wrap input::placeholder {color:#bbb}
.kwdrm-body .kwdrm-text-area h3 {line-height:20px; overflow: hidden; word-break: keep-all; text-overflow: ellipsis; display:-webkit-box; -webkit-line-clamp: 2; -webkit-box-orient:vertical; }
.kwdrm-body .kwdrm-text-area p  {line-height: 20px;overflow: hidden;color: #999;font-size: 12px;word-break: keep-all;text-overflow: ellipsis;  display:-webkit-box;-webkit-line-clamp: 2;-webkit-box-orient:vertical;margin-top: 4px;}
.kwdrm-body .kwdrm-text-area .name {float:right; color:#333}
.kwdrm-body .kwdrm-card-img + .kwdrm-text-box {width: calc(100% - 72px);}
.kwdrm-body .kwdrm-card-img.type02 + .kwdrm-text-box {width: calc(100% - 92px);}

.kwdrm-body .kwdrm-btn {display:flex; flex:1; margin-top:18px; }
.kwdrm-body .kwdrm-btn button {width: 100%; text-align: center; border-radius: 6px; padding: 10px 0;  display: block; }
.kwdrm-body .kwdrm-card-area .kwdrm-btn button + button {margin-left:10px}
.kwdrm-body .kwdrm-btn .primary{background:#212266; color:#fff;}
.kwdrm-body .kwdrm-btn .secondary{background:#f7f7f7; border:1px solid #ddd}
.kwdrm-body .kwdrm-btn .success{background:#bd527e;color:#fff;}
.kwdrm-body .kwdrm-btn .cancel{background:#ddd;color:#333;}
.kwdrm-body .kwdrm-btn .success:disabled {background: #f5e9ee; color: #e4a3be;}

.kwdrm-body .fs-12{font-size: 12px !important;}
.kwdrm-body .fs-14{font-size: 14px !important;}

.kwdrm-body .kwdrm-bottom-area { padding: 24px 16px;background: #f5f5f5;}
.kwdrm-body .kwdrm-bottom-area h1 {position:relative; font-size: 18px; margin-bottom: 10px;}
.kwdrm-body .kwdrm-tooltip {overflow: hidden;width: 15px;height: 15px;  line-height: 0;  border-radius: 15px;  background: url(../images/kwdrm/tooltip_btn.png) no-repeat center; background-size: 15px;  margin-bottom: 4px;}
.kwdrm-body .kwdrm-tooltip .tooltop-txt {visibility:hidden; position:absolute;top:30px; left:50%;display: block;width: 100%;transform: translateX(-50%);line-height:20px; background: rgba(33,34,102, 0.9);color: #fff;border-radius: 10px;padding:16px;word-break: keep-all; opacity: 0; transition: opacity 0.3s;}
.kwdrm-body .kwdrm-tooltip:hover .tooltop-txt{visibility: visible; opacity: 1;}
.kwdrm-body .kwdrm-list .kwdrm-card-area { margin-bottom: 10px; }

/*팝업*/
.kwdrm-pop-area{background:#fff;padding-bottom:46px;}
.kwdrm-pop-area.bottom-pop{position:absolute;  left: 0;  right: 0;  top: auto;  bottom: 0;  -webkit-transform: translate(0, 0);transform: translate(0, 0);}
.kwdrm-pop-area .header{position:relative; display: flex;align-items: center;justify-content: center;height: 56px;border-bottom: 1px solid #eee; }
.kwdrm-pop-area.bottom-pop{border-radius: 15px 15px 0 0; }
.kwdrm-pop-area .header h2 {font-size: 20px; }
.kwdrm-pop-area .kwdrm-pop-btn{position: fixed; left: 0; right: 0; bottom: 0; background-color: #fff; z-index: 20;}
.kwdrm-pop-area .kwdrm-pop-btn .kwdrm-btn button { border-radius:0;}
.kwdrm-pop-area .kwdrm-pop-btn .kwdrm-btn button + button:last-child {width: 170%;}
.kwdrm-pop-area .header .close{position: absolute;right: 0;top: 50%;width: 40px; height: 41px; background: url(../images/kwdrm/btn-layer-close.png) no-repeat center; background-size: 40px 41px;  transform: translateY(-50%);  z-index: 20;   }

.kwdrm-pop-body {padding:24px 16px}
.kwdrm-pop-body .align-center{text-align: center;}
.kwdrm-pop-body em {font-weight:700}
.kwdrm-pop-body .img-info{width: 140px; margin-bottom:22px}
.kwdrm-pop-body .img-result{width: 80px; margin-bottom:22px}
.kwdrm-pop-body .img-info + p,
.kwdrm-pop-body .img-result + p {color:#333; line-height:19px}
.kwdrm-pop-area  button {height:46px; font-size: 16px;}
.kwdrm-pop-area .desc {font-size:12px; color:#666; margin-top:12px}
.kwdrm-pop-area .kwdrm-btn {margin-top:0;}
.kwdrm-pop-body .point {color:#fc1717; }

.kwdrm-pop-body .underline {text-decoration: underline;}
.kwdrm-pop-body .terms-wrap {font-size:12px;line-height: 18px;color: #333;}
.kwdrm-pop-body .terms-wrap li{margin-bottom:24px; line-height:20px;font-size:12px; color:#666;}
.kwdrm-pop-body .terms-wrap li:last-child {margin-bottom:0;}
.kwdrm-pop-body .terms-wrap li em{font-size:14px; font-weight:700; color:#333}
.kwdrm-pop-body .terms-wrap li > div {padding-left:16px}
.kwdrm-pop-body .terms-wrap .dash{position:relative; padding-left:8px}
.kwdrm-pop-body .terms-wrap .dash:before {display: inline-block; width: 3px; height: 3px; position: absolute; left: 0; top: 0; content: '-';}
.kwdrm-pop-body .terms-wrap .important{position:relative; padding-left:12px}
.kwdrm-pop-body .terms-wrap .important:before {display: inline-block; width: 3px; height: 3px; position: absolute; left: 0; top: 0; content: '※';}
.kwdrm-pop-body .terms-wrap .important.red:before {color:#fc1717; }
.kwdrm-pop-body .terms-wrap .space{ text-indent: -12px; padding-left:12px;}
.kwdrm-pop-body .terms-wrap.type01 li {margin-bottom: 12px;}
.kwdrm-pop-body .terms-wrap.type01 .num {position:relative;margin-left: 13px;}
.kwdrm-pop-body .terms-wrap.type01 .num:before {display: inline-block;content: '';margin-left: -14px;}
.kwdrm-pop-body .terms-wrap.type01 .point01{color:#b43a6b; font-weight: 500;}
.kwdrm-pop-body .terms-wrap.type01 .point02{color:#333; font-weight: 500;}
.kwdrm-pop-body .terms-wrap.type01 .f-w500 {font-weight:500}
.kwdrm-pop-body .terms-wrap.type01 .f-w700 {font-weight:700}
.kwdrm-pop-body .terms-wrap.type01 .tit {display:block; font-size: 14px; margin-bottom:10px}
.kwdrm-pop-body .terms-wrap.type01 .item {margin-top:10px}
.kwdrm-pop-body .terms-wrap.type01 > div:last-child{margin-top:10px; color:#666}
.kwdrm-pop-body .terms-wrap .kwd-inp-check {
    display: inline-block;
    width: 100%;
    position: relative;
    vertical-align: middle;
    padding: 16px;
}
.kwdrm-pop-body .terms-wrap .kwd-inp-check  label > div > p + p{
    padding-top:12px;
    margin-top:12px;
    border-top:1px solid #ddd
}
.kwdrm-pop-body .terms-wrap .kwd-inp-check  label > div > ul {margin-top:12px}
.kwd-inp-check > input[type="checkbox"] {
    position: absolute;
    left: 16px;
    top: 16px;
    width: 22px;
    height: 22px;
    background-image: url("../images/kwdrm/ico_circle_check01.png");
    background-repeat: no-repeat;
    background-position: center 0;
    background-size: 100% auto;
}
.kwd-inp-check  > label {
    display: block;
}
.kwd-inp-check  > label:after {
    content:'';
    position:absolute;
    top:0;
    left:0;
    display:block;
    width:100%;
    height:100%;
    border: 1px solid #ddd;
    border-radius: 4px;
}
.kwd-inp-check > input[type="checkbox"]:checked + label:after {

    border: 1px solid #212266;
}
.kwd-inp-check > input[type="checkbox"]:checked {
    background-image: url("../images/kwdrm/ico_circle_check02.png");
}
.kwd-inp-check > input[type="checkbox"]:disabled {
    background-position: center -44px;
}

.kwd-inp-check > input[type="checkbox"]:checked:disabled {
    background-position: center -66px;
}

.kwd-inp-check  > label em{display: block;padding-left: 30px;font-size: 14px;font-weight: 500;padding-bottom: 16px;border-bottom: 1px solid #ddd;margin-bottom: 16px;}

.kwd-inp-check > input[type="checkbox"]:checked + label{border-color: #212266;}
.kwdrm-top-cont {display: flex; justify-content: space-between; padding:8px; border-bottom:1px solid #ddd}
.kwdrm-top-cont > p {font-size:12px; color:#707070}
.kwdrm-top-cont .order-wrap{display: flex;}
.kwdrm-top-cont .order-wrap li{display: flex; width:25%; }

.kwdrm-body .step-wrap{display: flex;justify-content: space-between; align-items: center;}
.kwdrm-body .step-wrap li{position: relative;  display: flex;  flex-direction: column;  align-items: center;  flex: 1;  width: 23px;}
.kwdrm-body .step-wrap li .num {position: relative;  display: flex;  justify-content: center;  align-items: center;  width: 16px;  height: 16px;  border-radius: 50%;  border: 1px solid #ccc;  font-size: 10px;  color: #b3b3b3;  background: #fff;  z-index: 5;}
.kwdrm-body .step-wrap li::before {position: absolute;  content: "";  border-bottom: 1px solid #ccc;  width: 100%;  top: 9px;  left: -50%;  z-index: 2;}
.kwdrm-body .step-wrap li::after {position: absolute;  content: "";  border-bottom: 1px solid #ccc;  width: 100%;  top: 9px;  left: 50%;  z-index: 2;}
.kwdrm-body .step-wrap li.active .num{background-color: #212266;border: 0; color:#fff;}
.kwdrm-body .step-wrap li.completed .num{background: url(../images/kwdrm/icon_page_complete.png);background-size: 16px;font-size: 0;border: 0;}


.kwdrm-body .step-wrap li:first-child::before {content: none;}
.kwdrm-body .step-wrap li:last-child::after {content: none;}
.kwdrm-body .kwdrm-notice {position: absolute;left: 0;bottom:46px; width:100%; padding: 30px 16px;background: #fafafa;}
.kwdrm-body .kwdrm-notice .tit {font-size: 16px;font-weight: 700;padding-bottom: 12px;border-bottom: 1px solid #ddd;margin-bottom: 16px;}
.kwdrm-body .kwdrm-notice .kwdrm-dot-list li{position:relative;font-size: 12px;line-height: 16px;color:#666; margin-bottom:10px}
.kwdrm-body .kwdrm-notice .kwdrm-dot-list li:last-child{margin-bottom:0}
.kwdrm-body .kwdrm-notice .kwdrm-dot-list li:before {content: '';display: inline-block;width: 3px;height: 3px; background:#666; border-radius:50%;vertical-align: middle;margin-right: 4px;margin-bottom: 2px;}
.kwdrm-select-wrap.bg{background:#f5f5f5;margin: 0 -16px;padding: 16px;margin-top: 24px;}
.kwdrm-select-wrap > .tit {color:#333; margin-bottom:12px; font-weight:500}
.kwdrm-select-wrap .item{position:relative;}
.kwdrm-select-wrap .item + .item {margin-top:12px}
.kwdrm-select-wrap input[type="radio"]{position: absolute;top: 0;left: 0;width: 100%; height: 100%;  opacity: 0;  cursor: pointer;}
.kwdrm-select-wrap .kwdrm-card-middle {border:1px solid #ddd; border-radius:10px;flex-wrap: nowrap;align-items: center;padding: 20px 16px;background: #fff;}
.kwdrm-select-wrap input[type="radio"]:checked + .kwdrm-card-middle {border:1px solid #ddd;border-color:#212266;}
.kwdrm-select-wrap .kwdrm-card-middle .ico-mark {display:inline-block;width: 29px; height:24px;background: url('../images/kwdrm/ico_circle_check01.png') no-repeat;background-size: 24px;margin-right: 16px;}
.kwdrm-select-wrap input[type="radio"]:checked  + .kwdrm-card-middle .ico-mark {background: url('../images/kwdrm/ico_circle_check02.png')  no-repeat;background-size: 24px;}


.roboStock-agree-txt-wrap {
    margin-top: 24px;
}
.roboStock-agree-txt-wrap:nth-child(1) {
    margin-top: 0px;
}
.roboStock-agree-txt-wrap p,
.roboStock-agree-txt-wrap li {
    font-size: 12px; line-height: 16px;
    color: #666; letter-spacing: -.2px;
    word-break: keep-all;
}
.roboStock-agree-txt-wrap .dash-list {
    margin-bottom: 8px;;
}
.roboStock-agree-txt-wrap p.bold {
    font-size: 14px;color: #222;
    margin-bottom: 8px;
}
.roboStock-agree-txt-notice {
    margin-top: 8px;
}
.roboStock-agree-txt-notice p {
    margin-bottom: 8px;
    font-size: 12px; line-height: 16px;
    color: #666;
    display: flex;
}
.roboStock-agree-txt-notice p::before {
    content: '※';
    margin-right: 5px;
}
.roboStock-agree-txt-notice span {
    display: contents;
}


.roboStock-agree-txt-wrap {
    margin-top: 24px;
}
.roboStock-agree-txt-wrap:nth-child(1) {
    margin-top: 0px;
}
.roboStock-agree-txt-wrap p,
.roboStock-agree-txt-wrap li {
    font-size: 12px; line-height: 16px;
    color: #666; letter-spacing: -.2px;
    word-break: keep-all;
}
.roboStock-agree-txt-wrap .dash-list {
    margin-bottom: 8px;;
}
.roboStock-agree-txt-wrap p.bold {
    font-size: 14px;color: #222;
    margin-bottom: 8px;
}
.roboStock-agree-txt-notice {
    margin-top: 8px;
}
.roboStock-agree-txt-notice p {
    margin-bottom: 8px;
    font-size: 12px; line-height: 16px;
    color: #666;
    display: flex;
}
.roboStock-agree-txt-notice p::before {
    content: '※';
    margin-right: 5px;
}
.roboStock-agree-txt-notice p.dot::before {
    content: '•';
    margin-right: 5px;
}
.roboStock-agree-txt-notice p.dash::before {
    content: '-';
    margin-right: 5px;
}
.roboStock-agree-txt-notice span {
    display: contents;
}
.roboStock-gray-box {
    background: #fafafa;
    padding: 16px;
}
.roboStock-gray-box p {
    color: #222;
    margin-bottom: 6px;
}
.roboStock-gray-box .inp-check  {
    margin-left: 10px;
}
.roboStock-gray-box .inp-check:first-child {
    margin-left: 0;
}
.roboStock-gray-box .inp-check label {
    font-size: 12px; color: #333;
}
.roboStock-notice {

    padding: 24px 20px;
    background: #fafafa;

}
.roboStock-notice h4 {
    border-bottom: 1px solid #ddd;
    padding-bottom: 5px;
    margin-bottom: 16px;
}
.roboStock-notice p {
    font-size: 12px; color: #666;
    line-height: 16px;
}
.roboStock-notice p::before {
    content: '•';
    margin-right: 5px;
}

.dark,
.dark .layer-box {
    background: #121212;
}

.dark .bold,
.dark .roboStock-notice h4,
.dark .roboStock-gray-box .inp-check label {
    color: #fff !important;
}

.dark .roboStock-agree-txt-wrap p,
.dark .roboStock-agree-txt-notice p,
.dark .dash-list li,
.dark .dash-list p {
    color: #ccc;
}

.dark .roboStock-gray-box,
.dark .roboStock-notice {
    background-color: #222;
}
