/*  수정==220922== height */
/*  수정==221014== height bottom*/
.floating-container {
    position: fixed;
    /*width: 100px;*/
    /*bottom: 74px;*/
    /*height: 170px;*/
    right: 0;
    z-index: 1000;
    margin: 35px 25px;
}

/*  수정==220922== width, height, background, box-shadow 추가== background-color, background-size */
/*  추가==221014== width, height */
.floating-container .floating-button {
    position: absolute;
    width: 68px;
    height: 68px;
    background-color: #fff !important;
    bottom: 0;
    border-radius: 50%;
    left: 0; right: 0;
    margin: auto;
    color: #fff;
    line-height: 65px;
    text-align: center;
    font-size: 25px; font-weight: 500;
    z-index: 100;
    box-shadow: 0 3px 6px rgba(0,0,0,0.16);
    cursor: pointer;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    background: url(https://chat-ralphlauren.codehive.co.kr/resources/js/chat/chatFloating/images/icon/ic_plus.png) no-repeat center;
    background-size: 36px;
}
/*  수정==220922== box-shadow */
.floating-button:hover {
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.32);
    -webkit-transform: translatey(5px);
    transform: translatey(5px);
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}
/*  추가==220922== */
input[id="btn_floating-ch"]:checked + label {
    background-color: #505050 !important;
    background: url(https://chat-ralphlauren.codehive.co.kr/resources/js/chat/chatFloating/images/icon/ic_close.png) no-repeat center;
    background-size: 36px;
}
/*  추가==220922== box-shadow, background-color, margin, line-height 삭제 */
/*  추가==221014== width, height, margin*/
.floating-container .float-element {
    position: relative;
    display: block;
    border-radius: 50%;
    width: 68px;
    height: 68px;
    margin: 16px auto;
    color: white;
    font-weight: 500;
    text-align: center;
    box-shadow: 0 3px 6px rgba(0,0,0,0.16);
    background-color: #fff !important;
    cursor: pointer;
}
/*  추가==220922== */
.floating-container .element-container {
    visibility: hidden;
    opacity: 0;
    -webkit-transform: translateY(100px);
    transform: translateY(100px);
    transition: all 0.1s;
}
/*  추가==220922== */
input[id="btn_floating-ch"]:checked + label + .element-container {
    visibility: visible;
    opacity: 1;
    -webkit-transform: translatey(0px);
    transform: translatey(0px);
    transition: all 0.3s;

}

/*  추가==220922== */
/*  수정==221014== bg-size, bg-position*/
.floating-container .float-element:nth-child(1) {
    background: url(https://chat-ralphlauren.codehive.co.kr/resources/js/chat/chatFloating/images/icon/ic_chat.png) no-repeat center 6px;
    background-size: 36px;
}

.floating-container .float-element .material-icons {
    vertical-align: middle;
}
.floating-container .float-element .material-icons img {
    position:absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%);
}

.floating-container .float-element:hover {
    cursor: pointer;
}

/*  수정==220922== 플로팅(채팅) 채널별 아이콘 - 텍스트 설명 디자인 */
/*  수정==221014== position:top, font-size */
.float-element .viewtxt {
    position: absolute; top: calc(100% - 30px); left: 50%;
    transform: translateX(-50%);
    color: #505050;
    font-size: 13px;
    line-height: 20px;
    letter-spacing: -0.28px;
    white-space: nowrap;
}

/* 랄프로렌 수정 ==230727== height 590px -> 630px */
.chat-box {
    position: fixed;
    bottom: 64px; right: -360px;
    opacity: 0;
    width: 360px; height: 630px;
    border-radius: 8px;
    background: #fff;
    z-index: 1000;
    box-shadow: 0 4px 4px 0 rgba(0,0,0,0.15);
    transition: .25s;
}

/*  수정 ==220922== right */
.chat-box:target {
    position: fixed;
    right: 16px;
    opacity: 1;
    transition: .25s;
}

.chat_top {
    width: 100%; height: 60px;
    line-height: 60px;
    padding-left: 15px;
    font-size: 16px;
    font-weight: 700;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

.chat_kakao .chat_top {
    background: #f8db00;
    color: #331c1c;
}
.chat_naver .chat_top {
    background: #04c035;
    color: #fff;
}
.chat_chat .chat_top {
    background: #9f55f7;
    color: #fff;
}
.chat_kakao .chat_bottom input[type="text"]:focus {
    border: 1px solid #f8db00;
    box-shadow: 0 0 0 3px rgba(248, 219, 0, 0.3);
}

.chat_kakao .chat_bottom textarea:focus {
    border: 1px solid #f8db00;
    box-shadow: 0 0 0 3px rgba(248, 219, 0, 0.3);
}
.chat_naver .chat_bottom textarea:focus {
    border: 1px solid #04c035;
    box-shadow: 0 0 0 3px rgba(4, 192, 53, 0.3);
}
.chat_chat .chat_bottom textarea:focus {
    border: 1px solid #9f55f7;
    box-shadow: 0 0 0 3px rgba(159, 85, 247, 0.3);
}

.chat_naver .chat_bottom input[type="text"]:focus {
    border: 1px solid #04c035;
    box-shadow: 0 0 0 3px rgba(4, 192, 53, 0.3);
}
.chat_chat .chat_bottom input[type="text"]:focus {
    border: 1px solid #9f55f7;
    box-shadow: 0 0 0 3px rgba(159, 85, 247, 0.3);
}

/* 랄프로렌 수정 ==230727== width calc(100% - 60px) -> 100% */
/* 랄프로렌 수정 ==230727== margin 삭제 */
.chat_bottom textarea {
    width: 100%;
    height: 80px;
    margin: 0;
    padding: 10px 12px;
    background: transparent;
    color: #737890;
    border: 1px solid #E3E5EF; border-radius: 6px;
    appearance: none;  -webkit-apperance: none;
    resize : none;
}
.chat_bottom textarea::placeholder { color: #ccc; font-size: 13px; }
.chat_bottom textarea:focus {
    transition: .25s;}
.chat_bottom button .fa {opacity: 1;}
.chat_bottom button {
    padding: 0 15px 0 10px;
    width: 50px; height: 100px;
    background: transparent;
    color: #ccc;
    font-size: 20px;
}
/* 랄프로렌 수정 ==230727== color 변경 */
.chat_bottom button:hover {
    color: #041E3A;
    opacity: 1;
    transition: .25s;
}

.chat-close {
    display: inline-block; position: absolute;
    top: 5px; right: 0;
    width: 50px; height: 50px;
    cursor: pointer;
}
.chat-close span {
    position: absolute;
    top: 24px; right: 0;
    width: 20px; height: 2px;
    border-radius: 2px;
    background: #fff;
}
.chat-close span:first-child {
    left: 15px; transform: rotate(45deg);}
.chat-close span:last-child {
    left: 15px; transform: rotate(-45deg);
}
.chat-close:hover span {
    background: #333;
    transition: .25s;
}

/* 랄프로렌 - 배경color 변경 =230727= */
/* 랄프로렌 수정 ==230727== height -180px -> -220px */
.chat_area {
    position: relative;
    height: calc(100% - 220px); width: 100%;
    overflow-y: auto;
    padding-bottom: 20px;
    background: #E9EBED;
    /*background: #d7dde4;*/
}
.chat_area.cti { position: relative;
    height: calc(100% - 298px);
    padding-bottom: 16px;
    background: transparent;
}
.chat_area.cti.popup {
    height: calc(100% - 114px);
}
.chat_area p {margin: 0;}
.chat_area .clear {clear: both;}
.chat_area .time {display: table-cell; vertical-align: bottom;
}
.chat_area .timeview {
    position: relative; display: inline-block;
    padding: 0 6px;
    font-size: 10px; color: #888;
}
.chat_area .from-them, .chat_area .from-me, .chat_area .from-bot {
    margin-top: 20px;
    position: relative;
    display: table; vertical-align: bottom;
}
.chat_area .from-them { float: left; }
.chat_area .from-me { float: right;}
/* 랄프로렌 수정 - 상담원 img 변경 등 =230727= */
.chat_area .from-them:before {content: "";
    display: block;
    position: absolute;
    left: 12px; top: 8px;
    width: 32px; height: 32px; border-radius: 16px;
    /*background-image: url(https://chat-ralphlauren.codehive.co.kr/resources/js/chat/chatFloating/images/from-them.png);*/
    /*background-image: url(https://chat-ralphlauren.codehive.co.kr/resources/js/chat/chatFloating/images/icon/logo_polo.svg);*/
    background: url(https://chat-ralphlauren.codehive.co.kr/resources/js/chat/chatFloating/images/icon/ico_from-rl.png) no-repeat center / 60%;
    opacity: 1;
    background-color: #FFF;
}
/* 랄프로렌 수정 - 챗봇 img 변경 등 =230727= */
.chat_area .from-them.bot:before {content: "";
    display: block;
    position: absolute;
    left: 12px; top: 8px;
    width: 32px; height: 32px; border-radius: 16px;
    /*background-image: url(https://chat-ralphlauren.codehive.co.kr/resources/js/chat/chatFloating/images/icon/logo_polo.svg);*/
    background: url(https://chat-ralphlauren.codehive.co.kr/resources/js/chat/chatFloating/images/icon/ico_bot-rl.png) no-repeat center / 60%;
    opacity: 1;
    background-color: #FFF;
}

.chat_area .audio_text .me,
.chat_area .audio_text .them { max-width: calc(100vh - 80px); }
.chat_area .audio_text .from-them,
.chat_area .audio_text .from-me { float: left; }
.chat_area .audio_text .time {min-width: 60px;}

.chat_area .from-bot .time {display: block;}

.chat_area .from-bot {
    width: 100%;
    text-align: center;
}

/* system - 안내  신종호 추가 */
.chat_area .from-system {
    width: 100%;
    text-align: center;}
.chat_area .from-system .time {display: block;}
.system_notice {
    margin: 0 15px; padding: 12px;
    width: calc(100% - 30px);
    /*background: #9fa8bd; color: #fff;*/
    background: #041e3a; color: #fff;
    border-radius: 2px;
    font-size: 12px; font-weight: normal; line-height: 1.6em;
}

.system_notice p {
    font-size: 13px;
    color: #fff;
    line-height: 1.6em;
}

/*  상담화면 에서의 채팅 말풍선 - 최대 width값   */
.chat_area.cti .me{ max-width: 340px; }
.chat_area.cti .them{ max-width: 320px; }

.chat_area.on_view .from-them:before {content: none;}

.dim1, .dim2, .dim3, .dim4 {display: none;
    position: absolute; z-index: 1; top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.4); transition: all 0.35s;
}

.bot_notice {
    margin: 0 16px; padding: 12px;
    width: calc(100% - 32px);
    background: #9fa8bd; color: #fff;
    border-radius: 12px;
    font-size: 12px; line-height: 1.6em;
}
.bot_notice .bot_last:before {content: "";
    display: inline-block; margin-right: 6px; vertical-align: -8px;
    width: 24px; height: 24px; border-radius: 8px;
    background-image: url(https://chat-ralphlauren.codehive.co.kr/resources/js/chat/chatFloating/images/icon/logo_polo.svg);
    background-size: 24px;
}

div[class*="modal_chat-end"] {
    z-index: 2;
    padding: 10px 10px 15px;
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 100px);
    max-width: 320px;
    height: auto;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 0 4px rgba(0,0,0,0.3);
    text-align: center;
    display: none;
}
div[class*="modal_chat-end"] p {
    font-size: 13px; font-weight: normal;
    line-height: 20px;
    color: #646d83;
}
div[class*="modal_chat-end"] p:first-of-type {margin-top: 8px;}
div[class*="modal_chat-end"] p:last-of-type {margin-bottom: 8px;}

.modal_top {
    position: relative;
    margin: 8px 0;
    font-size: 18px;
    font-weight: 700;
    color: #364168;
}

.modal_btn-area {
    display: flex;
    padding: 0 8px;
    width: 100%;;
}
.modal_btn-area button {
    flex-grow: 1;
    height: 36px !important;
    font-size: 14px !important; font-weight: 700;
}
.modal_btn-area button~button {margin-left: 8px;
}
/* 랄프로렌 - border 변경 =230727= */
.btn_modal1, .btn_modal2 {
    border-radius: 6px;
}
/* 랄프로렌 - color,badkground 변경 =230727= */
/* 230727 랄프로렌 border:none 처리*/
.btn_modal1 {
    color: inherit; background: #F5F5F2;
    /*border: 1px solid #F5F5F2;*/
    border: none;
}
/* 랄프로렌 - badkground 변경 =230727= */
.btn_modal1:hover {
    background: #041E3A;
    color: #fff;
    transition: .25s;
}

.btn_modal2 {
    /*background: #667FFF;*/
    background: #041e3a;
    border: 1px solid #d1d1d1;

}
.btn_modal2:hover {
    border: 1px solid #041e3a;
    color: #fff;
    background: #041e3a;
    transition: .25s;
}

.chat_area .audio_text .from-them,

.from-them.overlap .them,
.from-me.overlap .me {
    background: #00AD94; color: #fff;
    box-shadow: none;
}

/* mute */
.from-them.mute .them,
.from-me.mute .me {
    background: #92949d; color: #fff;
    box-shadow: none;
}

/* 챗봇 말풍선 */
.from-them.bot .them:after {border: 0;}
.from-them.bot .them { margin-left: 50px;
    border-radius: 12px;}
/* 230727 랄프로렌 border:none 처리*/
.from-them.bot .them button {
    margin-top: 8px;
    position: relative;
    min-height: 20px !important;
    /*border: 1px solid #d1d1d1;*/
}
/* 랄프로렌 - button 화살표 이미지 제거(content 수정) =230727= */
.from-them.bot .them button:after {content: none; display: block;
    position: absolute; top: calc(50% - 6px); right: 8px;
    width: 10px; height: 10px;
    background: url(https://d1gifia3xxgzxs.cloudfront.net/chatFloating/images/right-arrow_blue.png);
    background-size: 10px;
}
.from-them.bot .them button~button {
    margin-top: 4px !important;
    min-height: 20px !important;
}

.me, .them {
    padding: 15px 18px;
    font-size: 13px; font-weight: 400;
    line-height: 1.6em;
    border-radius: 25px;
    word-break: break-all;
}
.me {max-width: 250px; position: relative;
    margin-right: 24px;
    border-bottom-right-radius: 0;
    color: #fff;
    /*background: #647396;*/
    background: #041e3a;
}
.me:after {content: ""; position: absolute; bottom: 0; right: -8px;
    display: block;
    /*width: 0; height: 0; border-bottom: 12px solid #647396;*/
    width: 0; height: 0; border-bottom: 12px solid #041e3a;
    border-right: 9px solid transparent;
}

.me p{
    font-size: 13px;
    color: #fff;
    line-height: 1.6em;
}

.them p {
    font-size: 13px;
    line-height: 1.6em;
}

.them {
    list-style-type: none;
    max-width: 230px; position: relative;
    margin-left: 60px;
    border-top-left-radius: 0;
    background: #fff;
    box-shadow: 0 3px 2px rgba(0,0,0,0.05);
}
.them:after {content: ""; position: absolute; top: 0; left: -8px;
    display: block;
    width: 0; height: 0; border-top: 12px solid #fff;
    border-left: 9px solid transparent;
}

.them .button[disabled]{
    color: #041e3a;
    background: #fff;
}

/* 채팅창(박스) 하단 영역 -- 입력창과 전송버튼 */
/* 랄프로렌 수정==230727== height 120px -> 160px */
/* 랄프로렌 추가==230727== padding */
.chat_bottom {
    position: absolute; bottom: 0;
    width: 100%; height: 160px;
    padding: 10px;
    background: #fff;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    overflow: hidden;
    font-size: 13px;
    color: #4C5C77;

}

.chat_bottom input[type="text"] {
    width: calc(100% - 60px);
    margin: 10px 0 10px 10px;
    height: 40px; line-height: 40px;
    padding: 0 15px;
    background: transparent;
    color: #737890;
    border: 1px solid #ddd; border-radius: 40px;
    appearance: none;  -webkit-apperance: none;
}
.chat_bottom input[type="text"]::-webkit-input-placeholder { font-size: 13px; }
.chat_bottom input[type="text"]:focus {
    transition: .25s;}

.pre_chat {position: absolute; left: 0; top: 0; z-index: 1;
    width: 100%; height: 100%;
    /*background: rgba(100,115,150,0.8);*/
    background: #041e3a;
}
.pre_chat > div {
    color: #fff;
    text-align: center;
    position: absolute;
    left: 50%; top: 16px;
    transform: translate(-50%, 0);
    font-weight: bold;
    white-space: nowrap;
    width: 80%;
}

.pre_chat p {
    font-size: 13px;
    color: #fff;
    line-height: 1.6em;
    margin: 0;
}

/* 파일전송 말풍선 디자인 추가 -- 2022-05-19 */

.send_file {display: flex;}
.send_file .file_img {width: 44px;}
.send_file .file_img img {width: 40px; margin-right: 4px;}
.send_file .file_info {width: calc(100% - 44px);}
.send_file .file_info div {height: 20px;}

/* 상담원 초대하기 팝업 ==modal-공통디자인== */
div[class*="in-modal"] {
    z-index: 2;
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 100px);
    max-width: 320px;
    height: auto;
    padding: 8px 16px 20px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 0 4px rgba(0,0,0,0.3);
    text-align: center;
    display: none;
}

.mgl4 {margin-left: 4px !important;}
.mgt16 {margin-top: 16px !important;}
.mgr8 {margin-right: 8px !important; }
.mgt4 {margin-top: 4px !important;}

.fr {float: right;}

.fontb {font-weight: bold;}

.w100 {width:100% !important;}

.he30x {height: 30px !important;}

.chat_chat button {
    border: none;
    cursor: pointer;
    margin: 0;
    padding: 0;
    box-sizing: border-box;}

.powered {
    position: absolute; bottom: 0;
    height: 23px; width: 100%;
    font-size: 10px;
    text-align: center;
    vertical-align: top;
}

#chat_chat ::-webkit-scrollbar {
    width: 12px; height: 12px;
}
#chat_chat ::-webkit-scrollbar-track {
    border-radius: 12px;
    background-color: transparent;
}
#chat_chat ::-webkit-scrollbar-track:hover {
    background-color: rgba(78,89,131,0.1);
    transition: 0.25s;
}
#chat_chat ::-webkit-scrollbar-thumb {
    background-color: rgba(78,89,131,0.3);
    border-radius: 10px;
    background-clip: padding-box;
    border: 3px solid transparent;
}
#chat_chat ::-webkit-scrollbar-thumb:hover {
    background: rgba(78,89,131,0.5);
    background-clip: padding-box;
    border: 2px solid transparent;
    transition: 0.25s;
}
#chat_chat ::-webkit-scrollbar-button:start:decrement,
#chat_chat ::-webkit-scrollbar-button:end:increment {
    width: 0; height: 0;
}

/* ===================================
   웹챗 design - 2022-09-07
   =================================== */
@font-face {
    font-family: 'SEBANG_Gothic';
    font-style: normal;
    font-weight: 400;
    src: local('SEBANG_Gothic');
    src: url('https://chat-ralphlauren.codehive.co.kr/resources/js/chat/chatFloating/fonts/SEBANG_Gothic.eot'),
    url('https://chat-ralphlauren.codehive.co.kr/resources/js/chat/chatFloating/fonts/SEBANG_Gothic.woff') format('woff'),
    url('https://chat-ralphlauren.codehive.co.kr/resources/js/chat/chatFloating/fonts/SEBANG_Gothic.woff2') format('woff2');
}
@font-face {
    font-family: 'SEBANG_Gothic';
    font-style: normal;
    font-weight: 700;
    src: local('SEBANG_Gothic_Bold');
    src: url('https://chat-ralphlauren.codehive.co.kr/resources/js/chat/chatFloating/fonts/SEBANG_Gothic_Bold.eot'),
    url('https://chat-ralphlauren.codehive.co.kr/resources/js/chat/chatFloating/fonts/SEBANG_Gothic_Bold.woff') format('woff'),
    url('https://chat-ralphlauren.codehive.co.kr/resources/js/chat/chatFloating/fonts/SEBANG_Gothic_Bold.woff2') format('woff2');
}

/* #플로팅버튼-디자인# div.floating-container에 'initalk' class 추가 */
.initalk .floating-button,
.initalk .btn_float,
.initalk .float-element:nth-child(3) {
    background: #6432B4 !important;
    box-shadow: 0 20px 20px -10px rgba(100,50,180,0.5) !important;
}
/* #채팅박스-디자인1# div.chat-box에 'initalk' class 추가 */
.initalk .chat_top {
    position: relative; /* 추가 */
    display: flex; align-items: center;
    background: #041E3A !important;
    /*background: linear-gradient( 45deg, #6432B4, #44227a) !important;*/
    font-family: 'Noto Sans KR'; font-weight: 700;
}
/* 추가 2022-09-14 .chat_title 가운데 위치 */
.initalk .chat_title {
    position: absolute; top: calc(50% - 1px); left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1em;
    letter-spacing: 0em;
}

/* 채팅 입력 textarea color */
.initalk .chat_bottom textarea:focus {
    border: 1px solid rgb(104, 115, 125) !important;
    box-shadow: 0 0 0 3px rgba(153, 153, 153, 0.4) !important;
}
.initalk .chat_bottom button:hover {color: #041e3a;
}
/* #채팅박스-닫기버튼-디자인# div.chat-close에 'c-w' class 추가 */
.chat-close.c-w {opacity: .6;}
.chat-close.c-w:hover {opacity: 1;}
.chat-close.c-w:hover span {background: #fff;
}

@font-face {
    font-family: "Font Awesome 5 Brands";
    font-style: normal;
    font-weight: normal;
    src: url(https://chat-ralphlauren.codehive.co.kr/resources/js/chat/chatFloating/webfonts/fa-brands-400.eot);
    src: url(https://chat-ralphlauren.codehive.co.kr/resources/js/chat/chatFloating/webfonts/fa-brands-400.eot?#iefix) format("embedded-opentype"), url(https://chat-ralphlauren.codehive.co.kr/resources/js/chat/chatFloating/webfonts/fa-brands-400.woff2) format("woff2"), url(https://chat-ralphlauren.codehive.co.kr/resources/js/chat/chatFloating/webfonts/fa-brands-400.woff) format("woff"), url(https://chat-ralphlauren.codehive.co.kr/resources/js/chat/chatFloating/webfonts/fa-brands-400.ttf) format("truetype"), url(https://chat-ralphlauren.codehive.co.kr/resources/js/chat/chatFloating/webfonts/fa-brands-400.svg#fontawesome) format("svg")
}

.chat_chat .fab {
    font-family: "Font Awesome 5 Brands"
}

@font-face {
    font-family: "Font Awesome 5 Free";
    font-style: normal;
    font-weight: 400;
    src: url(https://chat-ralphlauren.codehive.co.kr/resources/js/chat/chatFloating/webfonts/fa-regular-400.eot);
    src: url(https://chat-ralphlauren.codehive.co.kr/resources/js/chat/chatFloating/webfonts/fa-regular-400.eot?#iefix) format("embedded-opentype"), url(https://chat-ralphlauren.codehive.co.kr/resources/js/chat/chatFloating/webfonts/fa-regular-400.woff2) format("woff2"), url(https://chat-ralphlauren.codehive.co.kr/resources/js/chat/chatFloating/webfonts/fa-regular-400.woff) format("woff"), url(https://chat-ralphlauren.codehive.co.kr/resources/js/chat/chatFloating/webfonts/fa-regular-400.ttf) format("truetype"), url(https://chat-ralphlauren.codehive.co.kr/resources/js/chat/chatFloating/webfonts/fa-regular-400.svg#fontawesome) format("svg")
}

.chat_chat .far {
    font-weight: 400
}

@font-face {
    font-family: "Font Awesome 5 Free";
    font-style: normal;
    font-weight: 900;
    src: url(https://chat-ralphlauren.codehive.co.kr/resources/js/chat/chatFloating/webfonts/fa-solid-900.eot);
    src: url(https://chat-ralphlauren.codehive.co.kr/resources/js/chat/chatFloating/webfonts/fa-solid-900.eot?#iefix) format("embedded-opentype"), url(https://chat-ralphlauren.codehive.co.kr/resources/js/chat/chatFloating/webfonts/fa-solid-900.woff2) format("woff2"), url(https://chat-ralphlauren.codehive.co.kr/resources/js/chat/chatFloating/webfonts/fa-solid-900.woff) format("woff"), url(https://chat-ralphlauren.codehive.co.kr/resources/js/chat/chatFloating/webfonts/fa-solid-900.ttf) format("truetype"), url(https://chat-ralphlauren.codehive.co.kr/resources/js/chat/chatFloating/webfonts/fa-solid-900.svg#fontawesome) format("svg")
}




.chat_chat .fa, .chat_chat .fab, .chat_chat .fal, .chat_chat .far, .chat_chat .fas {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1
}

.chat_chat .fa, .chat_chat .far, .chat_chat .fas {
    font-family: "Font Awesome 5 Free"
}

.chat_chat .fa,.chat_chat .fas {
    font-weight: 900
}

.chat_chat .fa-comment-slash:before {
    content: "\f4b3"
}

.chat_chat .fa-minus:before {
    content: "\f068"
}

.chat_chat .fa-times:before {
    content: "\f00d"
}
.chat_chat .fa-paperclip:before {
    content: "\f0c6"
}

.chat_chat .fa-paper-plane:before {
    content: "\f1d8"
}

/*  추가 ==221014== */
@media (max-width: 600px) {

    .chat-box {
        width: calc(100% - 32px) !important;
        height: calc(100% - 76px) !important;
        bottom: 0;
    }
    .chat-box:target{
        right: 0;
        top: 60px;
        left: 16px;
    }
    .chat_top{
        border-top-left-radius: 0!important;
        border-top-right-radius: 0;
    }
    .chat_bottom{
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }
    .chat_area .from-them {
        display: flex;
        width: 100%;
        align-items: flex-end;
    }

    /* 웹챗 - 서브메뉴 추가 ==230705== */
    .chat_submenu {
        z-index: 2;
        right: 0 !important;
        bottom: 0;
        width: 100% !important;
        max-height: 240px;
        overflow-y: auto;
        background: #FFF;
        border-radius: 0 !important;
    }
    .chat_submenu .btn__fold {
        display: block !important;
    }
}

/* 추가==230113== .btn__chat_top, txt_btn-info  */
.btn__chat_top {
    position: absolute;
    top: 0;
    width: 40px; height: 100%;
    background: transparent;
    color: #FFF;
    font-size: 16px;
}
.btn__chat_top:hover .fa {opacity: 1;}

.txt_btn-info {
    position: absolute;
    left: 50%; bottom: calc(100% - 8px);
    transform: translateX(-50%);
    display: none;
    padding: 4px 8px 5px;
    border-radius: 4px;
    background: rgb(0 0 0 / 85%); color: #FFF;
    white-space: nowrap;
    font-size: 13px;
}
.txt_btn-info:after {content: "";
    height: 0; width: 0;
    position: absolute;
    top: 100%; left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: rgb(0 0 0 / 85%);;
}
button:hover .txt_btn-info {
    display: block;
}

/* 채팅알림 (최소화 상태일 때) - 추가 ==230201== */
@keyframes alert__chat {
    0% {transform: none;
        box-shadow: 0 4px 2px rgb(0 0 0 / 12%);}
    50% {transform: translateY(-2px);
        box-shadow: 0 6px 4px rgb(0 0 0 / 8%);
    }
    85% {transform: translateY(-4px);
        box-shadow: 0 8px 6px rgb(0 0 0 / 4%);
    }
    100% {transform: none;
        box-shadow: 0 4px 2px rgb(0 0 0 / 12%);}
}
.float-element [class*="alert"] {
    position: absolute; top: -4px; right: -8px;
    display: flex;
    align-items: center; justify-content: center;
    width: 28px; height: 24px;
    border-radius: 8px;
    font-size: 14px;
    white-space: nowrap;
    animation: alert__chat .65s infinite;
}
.float-element [class*="alert"]:after {
    content: "";
    position: absolute; top: calc(100% - 1px); left: 50%;
    transform: translateX(-50%);
    width: 0; height: 0;
    border-left: 0 solid transparent;
    border-right: 8px solid transparent;
}
/* 채팅알림 >  color */
.float-element .alert__webchat {background: #5a28aa; color: #FFF;}
.float-element .alert__webchat:after {border-top: 6px solid #5a28aa;}
/* 채팅알림 > 카카오톡 color */
.float-element .alert__kakao {background: #ffe100; color: #2d1a1a;}
.float-element .alert__kakao:after {border-top: 6px solid #ffe100;}

/* 채팅알림 (접힘 상태일 때) - 추가 ==230202== */
.floating-button .alert__all {
    position: absolute; top: -8px; right: -8px;
    display: flex;
    align-items: center; justify-content: center;
    width: 36px; height: 32px;
    background: #505050;
    border-radius: 16px;
    font-size: 14px;
    white-space: nowrap;
    animation: alert__chat .65s infinite;
}
.floating-button .alert__all:after {
    content: "";
    position: absolute; top: calc(100% - 1px); left: 50%;
    transform: translateX(-50%);
    width: 0; height: 0;
    border-left: 0 solid transparent;
    border-right: 8px solid transparent;
    border-top: 6px solid #505050;
}
input[id="btn_floating-ch"]:checked + .floating-button .alert__all {display: none;}

/* 웹챗 - 서브메뉴(ralph) ==230720== */
.chat_submenu {
    position: absolute;
    left: 0;
    bottom: 120px;
    width: 100%;
    max-height: 240px;
    overflow-y: auto;
    background: #FFF;
    transition: max-height .25s;
    z-index: 1;
}
.chat_submenu.folded {
    max-height: 68px;
    overflow: hidden;
    transition: max-height .25s;
}
.chat_submenu ul li {
    display: flex;
    align-items: center;
    padding: 0 12px;
    height: 36px;
    cursor: pointer;
}
.chat_submenu ul li .fa {
    opacity: .6;
    margin-right: 6px;
}
.chat_submenu ul li:hover {
    background: #f6f7f9;
    transition: .2s;
}
.chat_submenu .btn__fold {
    position: sticky;
    z-index: 1;
    top: 0;
    width: 100%;
    height: 32px;
    background-color: #FFF;
    border-bottom: 1px solid #F2F3F5;
}


/* 챗봇 - 가로스크롤 ==230721== */
.chat_area .from-them.x-scroll {
    margin-top: 8px;
    display: flex;
    overflow-x: scroll;
    width: 100%;
    -ms-overflow-style: none;
}
.chat_area .from-them.x-scroll::before {
    content: none;
}
.chat_area .from-them.x-scroll::-webkit-scrollbar{
    display:none;
}
.chat_area .from-them.x-scroll .them {
    margin-bottom: 5px;
    min-width: 250px;
}
.chat_area .from-them.x-scroll .them ~ .them {
    margin-left: 8px;
}
.chat_area .from-them.x-scroll .them:last-child {
    margin-right: 50px;
}

/* 챗봇 - 슬라이드 ==230725== */
.chat_area .x-scroll ul {
    display: flex;
    width: 100%;
    overflow-x: hidden;
    scroll-behavior: smooth;
    list-style: none !important;
}
.chat_area .x-scroll [class*="btn_slide-"] {
    z-index: 1;
    position: absolute;
    top: calc(50% - 16px);
    width: 32px;
    height: 32px;
    background: rgb(255 255 255 / 50%) !important;
    opacity: .7;
    transition: opacity .2s, background .2s;
    color: inherit !important;

}
.chat_area .x-scroll [class*="btn_slide-"]:hover {
    opacity: 1;
    background: rgb(255 255 255 / 85%) !important;
    box-shadow: 0 0 8px rgb(0 0 0 / 15%);
    color: inherit !important;

}
.chat_area .x-scroll .btn_slide-l {
    left: 0;
    border-radius: 0 6px 6px 0;
    color: inherit !important;
}
.chat_area .x-scroll .btn_slide-r {
    right: 0;
    border-radius: 6px 0 0 6px;
    color: inherit !important;

}

/* 랄프로렌 챗봇 - 챗봇메뉴(입력 영역 위치) ==230727== */
.chat_bottom .bot-menu__wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
}
.pre_chat .bot-menu__wrap {
    position: absolute;
    left: 50%;
    top: calc(50% - 8px);
    transform: translate(-50%, -50%);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
}
.bot-menu__wrap .btn_bot-menu {
    margin: 5px 4px;
    padding: 0 12px;
    height: 30px;
    width: auto;
    background: #FFF;
    color: #041e3a;
    border: 1px solid #041e3a;
    border-radius: 6px;
    font-size: 13px;
    min-height: 20px !important;
    letter-spacing: -2px !important;
}
.bot-menu__wrap .btn_bot-menu:hover {
    background: #041e3a;
    color: #FFF !important;
}
.pre_chat .bot-menu__wrap .btn_bot-menu:hover {
    background: #FFF;
    color: #041e3a !important;
    opacity: .8;
}

.rl .powered {
    text-align: left;
    padding-left: 6px;
    opacity: .8;
}
.chat_bottom .pre_chat .powered {
    padding-left: 16px;
    color: #FFF;
}
/* 랄프로렌 추가 ==230727== textarea focus color */
.rl .chat_bottom textarea:focus {
    border: 1px solid #041E3A;
    box-shadow: 0 0 1px 2px rgba(4, 30, 58, 0.25);
}