@charset "utf-8";

/* 스타일 초기화 */
@import url("base.css");
#chatbot_popup{width:auto; height:72%; max-height:738px; display:inline-block; position:fixed; right:90px; bottom:128px; z-index:100; top:initial; left:initial; transform:none; -webkit-transform:none; background:none;}


/* chatbot */
.chatbotWrap{width:390px; height:100%; position:relative;z-index:10; -webkit-box-shadow:0px 2px 8px 2px rgba(0, 0, 0, 0.3); box-shadow:0px 2px 8px 2px rgba(0, 0, 0, 0.3);}

/*챗봇 Head */
.chatbotHead{background:#4eaab7;padding:9px 16px;position:absolute;top:0;left:0;width:100%;z-index:10;}
.chatbotHead p{text-align:center}
.chatbotHead div{position:absolute;top:17px;width: 100%;}
.chatbotHead .btnPrev{display:inline-block;margin-left:10px;}
.chatbotHead .btnClose{float: right;padding-right: 30px;}

/* 챗봇 Contents */
.chatbotCon{position:absolute;top:0;left:0;padding:50px 0 60px 0;width:100%;height: 100%;}
.chatbotConInner{padding:0 0 10px 0;height:100%; overflow-y:auto;;}
.chatTimer{text-align:center;font-size:12px;color:#666666;}

.chat-left-box{text-align:left;position:relative;padding-left:60px;margin-right:10px;}
.chat-left-box .img-profile{position:absolute;top:0;left:10px;}
.chat-left-box .img-profile img{width:50%}
.chat-left-box .chat-com{margin-bottom:15px;display:inline-block;border:1px solid #e2e2e2;position:relative;background:#f3f3f3;border-radius: 0 22px 22px 22px;}
.chat-left-box .chat-com .top-bg{position:absolute;top:-1px;left:-11px;background:url(/resources/images/chatbot/airbot/chat-icon-left.png) no-repeat 0 0;width:11px;height:17px;}
.chat-left-box .chat-com p{line-height:20px;padding: 11px 14px;letter-spacing:-0.5px;}
.chat-left-box .chat-com p.write{background:url(/resources/images/chatbot/airbot/chat-msg-write.gif) no-repeat 0 0;width:62px;height:28px;margin:15px;}

.chat-right-box{text-align:right;position:relative;padding-right:10px;margin-right:10px;}
.chat-right-box .chat-com{text-align: left;margin-bottom: 15px;display: inline-block;border: 1px solid #2891a0;position: relative;background: #4eaab7;padding: 8px 14px;border-radius: 22px 0 22px 22px;}
.chat-right-box .chat-com .top-bg{position:absolute;top:-1px;right:-11px;background:url(/resources/images/chatbot/airbot/chat-icon-right.png) no-repeat 0 0;width:11px;height:14px;}
.chat-right-box .chat-com p{line-height:22px;color:#fff;}
.chat-com>p>a{color: #237682 !important;padding: 10px 15px;background: #ddd;border-radius: 4px;}

/* 왼쪽대화 - 버튼 */
.chat-left-box.box-select{margin-right:40px;text-align:left;}
.chat-left-box.box-select .chat-com{display:block;}

.btn-select-wrap{overflow:hidden;width:100%;}
.btn-select-wrap li{float:left;width:50%;}
.btn-select-wrap li:first-child{border-right:1px solid #dddddd;}
.chat-left-box .btn-select{display:block;text-align:center;color:#ff625a;font-size:17px;border-top:1px solid #dddddd;padding:10px 0; font-family:'NGB';}

/* 쳇 리스트 */
.list-wrap li{text-align:left;line-height:22px;padding-left:30px;}

/* 왼쪽대화 - 갤러리 */
.galleryList{text-align:left;}
.galleryList .img-load{display:block;}
.galleryList .view-link{font-family:'NGB';color:#fff;padding:10px;border-radius:50px;display:block;text-align:center;background:#666;}
.galleryList .img-load img{border-radius:6px 6px 0 0;border:1px solid #dddddd;}

.gallery-wrap {margin-bottom:15px;padding-left:30px;}
.gallery-wrap .slick-slide{width:auto;margin-left:25px;outline:none;}
.gallery-wrap .slick-slide:first-child{margin-left:0;}


/* 체크박스 리스트 - 렌탈 */
.rental-wrap {margin-bottom:15px;padding-left:30px;}
.rental-wrap .slick-slide{width:117px;margin-left:25px;outline:none;}
.rental-wrap .slick-slide:first-child{margin-left:0;}

.product-wrap {margin-bottom:15px;padding-left:30px;}
.product-wrap .slick-slide{width:117px;margin-left:25px;outline:none;}
.product-wrap .slick-slide:first-child{margin-left:0;}

/* check box - radio - 렌탈선택 */
.checkboxLental{display:inline-block;width:117px; position:relative; height:153px; line-height:153px;cursor:pointer;}
.checkboxLental input[type="radio"]{
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity:0;

}
.checkboxLental label{display:inline-block; height:153px; line-height:153px; cursor:pointer;color:#acadae;}
.checkboxLental label.active{color:#ff625a; font-family:'NGB';}
.checkboxLental label:after{display:inline-block; content:''; position:absolute; top:0; left:0; width:117px; height:153px;
    transition:all .1s linear;
    -webkit-transition:all .1s linear;
    -moz-transition:all .1s linear;
    -ms-transition:all .1s linear;
}
.checkboxLental.img-rental1 label:after{background:url(/resources/images/chatbot/airbot/rental-img01.png) no-repeat 0 0;}
.checkboxLental.img-rental2 label:after{background:url(/resources/images/chatbot/airbot/rental-img02.png) no-repeat 0 0;}
.checkboxLental.img-rental3 label:after{background:url(/resources/images/chatbot/airbot/rental-img03.png) no-repeat 0 0;}
.checkboxLental.img-rental4 label:after{background:url(/resources/images/chatbot/airbot/rental-img04.png) no-repeat 0 0;}

.checkboxLental.img-rental1 input[type="radio"]:checked + label:after{background-image:url(/resources/images/chatbot/airbot/rental-img01-on.png);}
.checkboxLental.img-rental2 input[type="radio"]:checked + label:after{background-image:url(/resources/images/chatbot/airbot/rental-img02-on.png);}
.checkboxLental.img-rental3 input[type="radio"]:checked + label:after{background-image:url(/resources/images/chatbot/airbot/rental-img03-on.png);}
.checkboxLental.img-rental4 input[type="radio"]:checked + label:after{background-image:url(/resources/images/chatbot/airbot/rental-img04-on.png);}

/* check box - radio - 구입제품 문의 */
.checkbox input[type="checkbox"]{position:absolute; top:0; left:0; z-index:1; width:117px; height:153px; cursor:pointer;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity:0;
}
.checkbox{display:block; position:relative; width:117px;; height:153px; line-height:153px; cursor:pointer;}
.checkbox:after{display:inline-block; content:''; position:absolute; top:0; left:0; width:117px; height:153px;
    transition:all .1s linear;
    -webkit-transition:all .1s linear;
    -moz-transition:all .1s linear;
    -ms-transition:all .1s linear;
}
.checkbox.active:after{background-image:url(/resources/images/chatbot/airbot/icon-imgbox-on.png);}

.checkbox.img-product1{background:url(/resources/images/chatbot/airbot/product-img01.png) no-repeat 0 0;}
.checkbox.img-product2{background:url(/resources/images/chatbot/airbot/product-img02.png) no-repeat 0 0;}
.checkbox.img-product3{background:url(/resources/images/chatbot/airbot/product-img03.png) no-repeat 0 0;}
.checkbox.img-product4{background:url(/resources/images/chatbot/airbot/product-img04.png) no-repeat 0 0;}
.checkbox.img-product5{background:url(/resources/images/chatbot/airbot/product-img05.png) no-repeat 0 0;}
.checkbox.img-product6{background:url(/resources/images/chatbot/airbot/product-img06.png) no-repeat 0 0;}
.checkbox.img-product7{background:url(/resources/images/chatbot/airbot/product-img07.png) no-repeat 0 0;}


/* 왼쪽 슬라이드 버튼 */
.btnPrevArrow{position:absolute;top:38%;left:0;z-index:10;}
.btnNextArrow{position:absolute;top:38%;right:0;z-index:10;}

/* 챗봇 Foot */
.chatbotFoot{width:100%;padding:10px 60px 10px 10px;background:#fff;position:absolute;bottom:0;left:0;border-top: 2px solid #307b89;}
.chat-send ul{position:relative;padding:8px 10px 8px 40px;width:100%;}
.chat-send ul li:first-child{position:absolute;top:8px;left:8px;width:auto;}
.chat-send ul li{width:100%;}
.chat-send ul li input{width:100%;height:22px;border:0;}
.chat-send ul li input:focus {outline: none;}
.chat-send .btn-send{position:absolute;top:11px;right:10px;}
#start_button {display: inline-block;position: absolute;top: 11px;right: 60px;border: 0px;background: #fff;border-radius: 50%;}

/* 부가 옵션 열기 */
.counsel-option-layer{display:none;position:absolute;bottom:60px;left:0;width:100%;z-index:10;height:155px;background:#fff;border-top:1px solid #bfbebe;}
.counsel-option-bg{margin:0 10px;border-bottom:1px solid #f5f5f5;}
.counsel-option-layer a{display:block;width:100%;color:#268896;}
.counsel-option-layer .addClose-btn{background:url(/resources/images/chatbot/airbot/chad-btn-down.png) no-repeat 50% 50%;height:30px;margin:5px 0;}

.counsel-option-layer .add-btn01,
.counsel-option-layer .add-btn02{border:1px solid #4eaab7;border-radius:5px;margin-bottom:10px;padding:10px 0 10px 0;text-align:center;font-size:14px;}

.counsel-option-layer .add-btn01 span,
.counsel-option-layer .add-btn02 span{display:inline-block;padding-left:25px;}

.counsel-option-layer .add-btn01 span{background:url(/resources/images/chatbot/airbot/chat-layer-icon01.png) no-repeat 0 0px;}
.counsel-option-layer .add-btn02 span{background:url(/resources/images/chatbot/airbot/chat-layer-icon02.png) no-repeat 0 0px;}

/* 챗봇 타이머 */
.chatTimer {overflow:hidden;margin:10px;}
.chatTimer span{float:left;width:40%;font-size:11px;display:block;text-align:center;color:#999999;padding:10px 0;height:38px;overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.chatTimer span.bd-type{width:30%;background:url(/resources/images/chatbot/airbot/timer-bd.gif) repeat-x 0 50%;min-width:30px;}

/* 왼쪽 layer */
.chatbotLayerBox{display:none;position:absolute;top:0;left:-500px;width:500px;padding-right:30px;height:100%;z-index:10;}
.chatbotLayer{border-radius:8px;width:100%;height:100%;position:relative;z-index:10;background:#ff795d;}
.chatbotLayerHead{padding:15px;position:absolute;top:0;left:0;width:100%;z-index:10;}
.chatbotLayerHead .chatbotLayer-close{position:absolute;top:17px;right: 13px;}
.chatbotLayerCon{position:absolute;top:0;left:0;padding:56px 10px 10px 10px;width:100%;height: 100%;}
.chatbotLayerCon .chatbotLayerBg{width:100%;height: 100%;border-radius:8px;background:#fff;padding:10px;}

/* 삼각형 bg */
.bd-triangle-right {position:absolute;top:56px;right:12px;z-index:10;width: 0;height: 0;border-top: 15px solid transparent;border-bottom:15px solid transparent;border-left: 20px solid #ff795d;}

/* 카테고리 선택 */
.category-select{margin-bottom:15px;margin-right:20px;padding:0 10px 0 60px;}
.category-select p{/*background:#ff795d url(/resources/images/chatbot/airbot/icon-category.png) no-repeat 20px 50%;*/background: #666;border-radius:6px 6px 0 0;color:#fff;padding:10px 18px 10px 28px;font-size:16px;border-bottom: 2px solid #000;}
.category-select ul {background:#fff;border-radius: 0 0 6px 6px;border:1px solid #bfbebe;font-family:'NGB';}
.category-select ul li{border-top:1px solid #dddddd;padding:0px 18px;}
.category-select ul li:first-child{border:0;}

.category-icon{background:url(/resources/images/chatbot/airbot/icon-dot.png) no-repeat 5% 50%;}
.category-icon button{border:0px;background:#fff;width:100%;vertical-align: middle;padding: 8px 0 0px 5px;}
.category-icon button img{float:right}
.category-icon button label{float:left}

/* 레이어 팝업 */
.mask-box{position:absolute;top:0;left:0;width:100%;height:100%;z-index:10;background:#000;opacity:.6; filter:alpha(opacity=60); }
.layer-popup{display:none;position:absolute;top:0;left:0;z-index:100;width:300px;}

.popLayerBox{width:100%;height:100%;position:relative;z-index:10;}
.popLayerHead{padding:12px;border-radius:6px 6px 0 0;background:#ff795d;position:relative;}
.popLayerHead p{color:#fff;font-size:22px;}
.popLayerHead .btn-layer-close{position:absolute;top:17px;right: 13px;}

.popLayerCon{padding:18px;background:#fff;}
.popLayerFoot{background:#fff;border-radius: 0 0 6px 6px;border-top:1px solid #f4f4f4;padding:15px 19px;}
.popLayerFoot .btn-ok-close{border:1px solid #fc5f58;border-radius:6px;display:block;text-align:center;padding:10px 0;font-size:16px;color:#fc5f58; font-family:'NGB';}

/* 레이어 - 시간 선택 */
.reservation-time{width:100%;}
.reservation-time:after{display:block;content:'';clear:both;}
.reservation-time dt{width:100%;text-align:center;float:left;padding:0 0 13px 0;font-size:16px;}
.reservation-time dd{cursor:pointer;float:left;width:21%;padding:3px 0 4px 0;font-size:14px;color:#acadae;text-align:center;border:1px solid #acadae;border-radius:3px;margin:0 5px 10px 5px;}
.reservation-time dd.active{background:#ff795d;color:#fff;border:1px solid #ff795d;}

/* 레이어 - 인원 선택 */
.numPeople{width:100%;}
.numPeople p{color:#9a9a9a;font-size:13px;text-align:center;margin-top:10px;}
.numPeople dl{width:100%;position:relative;padding:0 90px 0 80px;margin-top:10px;}
.numPeople dl dt{font-size:16px;position:absolute;top:14px;left:0;}
.numPeople dl dd.count-txt{font-size:33px;color:#333;text-align:right;width:100%;}
.numPeople dl dd.count-txt span{ font-family:'NGB';margin-right:10px;}
.numPeople dl dd.count-btn{position:absolute;top:6px;right:0;}
.numPeople dl dd.count-btn:after{display:block;content:'';clear:both;}
.numPeople dl dd.count-btn a{float:left;}


/* 레이어 - 연락처 정보 입력 */
.tellPhone{width:100%;padding:10px 0;}
.tellPhone:after{display:block;content:'';clear:both;}
.tellPhone > li{float:left;width:26%;}
.tellPhone > li.hypen{width:20px;text-align:center;font-size:18px;font-family:'NGB';}
.tellPhone > li input{border-radius:3px;border:1px solid #acadae;width:100%;font-size:16px;padding:5px 5px;}

/* 레이어 - 달력 */
.popLayerConDay{padding:20px 0 10px 0;background:#fff;width:100%;}
.weekday-moon.slick-slider{background:url(/resources/images/chatbot/airbot/day-bd-top.gif) repeat-x 0 0;border-bottom:1px solid #f4f4f4;}
.weekday-moon .slick-list{padding:0 !important;width:300px;}

.weekday-moon .slick-slide a{text-align:center;display:block;font-size:32px;color:#d3d3d4;line-height:33px;outline:none;padding:10px 0;}
.weekday-moon .slick-slide a span{display:block;font-size:9px;line-height:13px;}
.weekday-moon .slick-slide.slick-center a{color:#ff625a;border-top:1px solid #ff625a}

.dayTableList{width:100%;margin-top:10px;}
.dayTableList th{text-align:center;font-weight:normal;font-size:11px;padding:8px 0;}
.dayTableList td{text-align:center;font-size:14px;padding:8px 0;}
.dayTableList td a{display:inline-block;padding:3px 5px;color:#acadae;}
.dayTableList td a.on{color:#fff;background:#fc5f58;border-radius:25px;}
.dayTableList td a.off{color:#acadae;background:#ebecef;border-radius:25px;pointer-events: none;cursor: default;}
.dayTableList .sunDay,
.dayTableList .sunDay a{color:#996b56;}


/* 레이어 - 주소 입력 */
.adressEnter li{margin-top:10px;}
.adressEnter li:first-child{margin-top:0;}

/* selectedtype-img */
.img-load{width: 110px;}
.img-load .view-link{border: 0px;width: 100%;background: #fff;white-space: inherit;}
.message-selectedtype-img {width: 110px;min-height: 113px;border: 0px;text-indent: -99em;background: none;}    
.putBubble{color: #fff;border: 0px;border-radius: 50px;background-color: #666;padding: 10px;font-family: 'NGB';}

@media (max-width:640px){
	/* chatbot Layer popup */
	#chatbot_popup {top:0;left:0;width:100%;height:100%;max-height:100%;bottom:0;}
	.chatbotWrap{width:100%;}

	/* left layer hidden */
	.chatbotHead .btnPrev{display:none;}
	.chatbotLayerBox{display:none;}


	.gallery-wrap {padding-left:60px;padding-right:0;}

}