@charset "utf-8";
/* chatbox */
.chatbox { } 
.chatbox .time { color: #e5394a; font-size: 1.125rem; line-height: 26px; background-image: url(../image/sub/bg_line.png); background-repeat: no-repeat; background-position: 50% 50%; display: flex; justify-content: center; align-items: center; margin-top: 40px; } 
.chatbox .time p { width: 420px; background-color: #fff; text-align: center; } 
.chatbox .state_box { display: inline-block; background-color: #666; font-size: 13px; border-radius: 30px; line-height: 26px; color: #fff; padding: 0 12px; vertical-align: bottom; } 

/*::: chatbox - user */
.chatbox .message_user { margin-top: 40px; } 
.chatbox .message_user .profile { width:calc(100% - 80px); } 
.chatbox .message_user .profile .admin_mask { position: relative; width: 50px; height: 50px; border-radius: 50px; overflow: hidden; background-color:#f6f9fd; display: inline-block; } 
.chatbox .message_user .profile .admin_mask img { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 1; } 
.chatbox .message_user .profile span { display: inline; line-height: 50px; vertical-align: top; font-size: 1.063rem; } 
.chatbox .message_user .profile a { display:inline-block; color: #333; font-size: 0.875rem; } 
.chatbox .message_user .profile a.btn_modify img { vertical-align: middle; margin-right: 3px; margin-bottom: 4px; } 
.chatbox .message_user .profile a.btn_delete img { vertical-align: middle; margin-right: 3px; margin-bottom: 2px; } 

.chatbox .message_user ul { width:calc(100% - 80px); background-color: #f6f9fd; border: solid 1px #dfe6ec; border-radius: 30px; border-top-left-radius:0px; } 
.chatbox .message_user ul li:last-of-type { border-top: 1px solid #dfe6ec; } 
.chatbox .message_user .title { color: #003964; font-size:1.375rem; font-weight: 800; padding: 35px 30px 0 30px; } 
.chatbox .message_user .name { color: #000; font-size:1.063rem; font-weight: 500; display: inline-block; margin-top: 5px; padding: 0 30px; } 
.chatbox .message_user .message_txt { padding: 20px 30px 35px 30px; color: #666; } 

/*::: chatbox - admin */
.chatbox .message_admin { margin-top: 40px; margin-left: 80px; } 
.chatbox .message_admin .profile { width:100%; text-align: right; } 
.chatbox .message_admin .profile i { font-style: normal; } 
.chatbox .message_admin .profile i.time2 { font-size: 1rem; color: #999; } 
.chatbox .message_admin .profile .admin_mask { position: relative; width: 50px; height: 50px; border-radius: 50px; overflow: hidden; background-color:#f6f9fd; display: inline-block; } 
.chatbox .message_admin .profile .admin_mask img { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 1; } 
.chatbox .message_admin .profile span { display: inline-block; font-size: 1.063rem; vertical-align: top; } 
.chatbox .message_admin .profile a { display:inline-block; color: #333; font-size: 0.875rem; } 
.chatbox .message_admin .profile a.btn_modify img { vertical-align: middle; margin-right: 3px; margin-bottom: 4px; } 
.chatbox .message_admin .profile a.btn_delete img { vertical-align: middle; margin-right: 3px; margin-bottom: 2px; } 


.chatbox .message_admin ul { width:100%; background-color: #f6f6f6; border: solid 1px #e8e8e8; border-radius: 30px; border-top-right-radius:0px; } 
.chatbox .message_admin ul li:last-of-type { border-top: 1px solid #dfe6ec; } 
.chatbox .message_admin .title { color: #333; font-size:1.375rem; font-weight: 800; padding: 35px 30px 0 30px; } 
.chatbox .message_admin .title img { vertical-align: text-top; margin-right: 10px; } 
 
.chatbox .message_admin .message_txt { padding: 20px 30px 35px 30px; color: #666; } 


/* message_file */
/*::: message_file - user*/
.chatbox .message_user .message_file { width:100%; padding: 10px 30px 10px 30px; font-size: 1rem; } 
.chatbox .message_user .message_file .w100 { width: 100% !important; } 
.chatbox .message_user .message_file table { width: 100%; } 
.chatbox .message_user .message_file table tr { border: 0 !important; } 
.chatbox .message_user .message_file table .txt { vertical-align: top; padding-top: 3px; } 
.chatbox .message_user .message_file table a { display:block !important; } 
.chatbox .message_user .message_file span { font-size: 1rem; color: #666; margin-right: 10px; line-height: 36px; } 
.chatbox .message_user .message_file a { line-height: 36px; display: inline-block; font-size: 1rem; color: #333; margin-right: 20px; padding:2px 0; padding-left: 35px; background-position: 0 50%; background-repeat: no-repeat; } 
.chatbox .message_user .message_file a.btn_download { display: inline-block !important; margin: 0 !important; padding: 0 20px; height: 40px; line-height: 38px; color: #666; font-size: 0.875rem; background-color: #fff; border: 1px solid #e8e8e8; border-radius: 8px; } 
.chatbox .message_user .message_file a.btn_download img { display: inline-block; margin-right: 4px; } 

.chatbox .message_user .message_file table .all_down { vertical-align: bottom; text-align: right; } 

.chatbox .message_user .message_file a.default { background-image: url(../image/sub/icon_office_default.png); } 
.chatbox .message_user .message_file a.hancom { background-image: url(../image/sub/icon_office_hancom.png); } 
.chatbox .message_user .message_file a.powerpoint { background-image: url(../image/sub/icon_office_powerpoint.png); } 
.chatbox .message_user .message_file a.word { background-image: url(../image/sub/icon_office_word.png); } 
.chatbox .message_user .message_file a.video { background-image: url(../image/sub/icon_video.png); } 
.chatbox .message_user .message_file a:last-of-type { margin-right: 20px; } 
.chatbox .message_user .message_file a p i { font-style: normal; color: #999; font-size: 00.875rem; margin-left: 3px; } 
.chatbox .message_user .message_file a.btn_download { display: block; padding: 0 20px; height: 40px; line-height: 38px; color: #666; font-size: 0.875rem; background-color: #fff; border: 1px solid #e8e8e8; border-radius: 8px; } 
.chatbox .message_user .message_file a.btn_download img { display: inline-block; margin-right: 4px; } 


/*::: message_file - admin*/
.chatbox .message_admin .message_file { width:100%; padding: 10px 30px 10px 30px; font-size: 1rem; } 
.chatbox .message_admin .message_file .w100 { width: 100% !important; } 
.chatbox .message_admin .message_file table { width: 100%; } 
.chatbox .message_admin .message_file table tr { border: 0 !important; } 
.chatbox .message_admin .message_file table .txt { vertical-align: top; padding-top: 3px; } 
.chatbox .message_admin .message_file table a { display:block !important; } 
.chatbox .message_admin .message_file span { font-size: 1rem; color: #666; margin-right: 10px; line-height: 36px; } 
.chatbox .message_admin .message_file a { line-height: 36px; display: inline-block; font-size: 1rem; color: #333; margin-right: 20px; padding:2px 0; padding-left: 35px; background-position: 0 50%; background-repeat: no-repeat; } 
.chatbox .message_admin .message_file a.btn_download { display: inline-block !important; margin: 0 !important; padding: 0 20px; height: 40px; line-height: 38px; color: #666; font-size: 0.875rem; background-color: #fff; border: 1px solid #e8e8e8; border-radius: 8px; } 
.chatbox .message_admin .message_file a.btn_download img { display: inline-block; margin-right: 4px; } 

.chatbox .message_admin .message_file table .all_down { vertical-align: bottom; text-align: right; } 
.chatbox .message_admin .message_file a.hancom { background-image: url(../image/sub/icon_office_hancom.png); } 
.chatbox .message_admin .message_file a.powerpoint { background-image: url(../image/sub/icon_office_powerpoint.png); } 
.chatbox .message_admin .message_file a.word { background-image: url(../image/sub/icon_office_word.png); } 
.chatbox .message_admin .message_file a.video { background-image: url(../image/sub/icon_video.png); } 
.chatbox .message_admin .message_file a:last-of-type { margin-right: 20px; } 
.chatbox .message_admin .message_file a p i { font-style: normal; color: #999; font-size: 00.875rem; margin-left: 3px; } 
.chatbox .message_admin .message_file a.btn_download { display: block; padding: 0 20px; height: 40px; line-height: 38px; color: #666; font-size: 0.875rem; background-color: #fff; border: 1px solid #e8e8e8; border-radius: 8px; } 
.chatbox .message_admin .message_file a.btn_download img { display: inline-block; margin-right: 4px; } 


/* chatbox :btn */
.chat_btn { height: 44px; text-align: right; } 
.chat_btn .btn_regist { margin-top: 0; } 
.chat_btn .btn_regist.btn_basic { min-width: 160px; } 

.chatbox_prev { border: 1px solid #e8e8e8; border-radius: 10px; color: #666; font-size: 1rem; text-align: center; margin: 25px 0 40px 0; } 
.chatbox_prev a { display: block; width: 100%; height: 53px; line-height: 53px; } 
.chatbox_prev a:hover { transition: .2s; box-shadow: 0px 5px 8px rgb(151 174 182 / 10%); } 
.chatbox_prev a>span>img { transform: rotate(-90deg); margin-left: 8px; } 

.chatbox_next { border: 1px solid #e8e8e8; border-radius: 10px; color: #666; font-size: 1rem; text-align: center; margin: 40px 0 30px 0; } 
.chatbox_next a { display: block; width: 100%; height: 53px; line-height: 53px; } 
.chatbox_next a:hover { transition: .2s; box-shadow: 0px 5px 8px rgb(151 174 182 / 10%); } 
.chatbox_next a>span>img { transform: rotate(90deg); margin-left: 8px; } 



/* media */
@media screen and (max-width: 800px) {.chatbox { padding-top: 20px; padding-bottom: 70px; background-color: #f6f6f6; } 
.chatbox_prev { position: fixed; top:55px; z-index: 1; width: 100%; background-color: #fff; border:none; border-radius: 0; color: #9d9d9d; font-size: 0.75rem; text-align: center; margin: 0px 0 40px 0; box-shadow: 0px 0px 10px rgb(151 174 182 / 30%); } 
.chatbox_prev a { display: block; width: 100%; height: 25px; line-height: 25px; } 
.chatbox_prev a:hover { box-shadow: 0px 5px 8px rgb(151 174 182 / 10%); } 
.chatbox_prev a>span>img { transform: rotate(-90deg); margin-left: 8px; opacity: .5; } 

.chatbox_next { width: 100%; background-color: #fff; border:none; border-radius: 0; color: #9d9d9d; font-size: 0.75rem; text-align: center; margin-top: 20px; box-shadow: 0px 0px 10px rgb(151 174 182 / 30%); } 
.chatbox_next a { display: block; width: 100%; height: 25px; line-height: 25px; } 
.chatbox_next a:hover { transition: .2s; box-shadow: 0px 5px 8px rgb(151 174 182 / 10%); } 
.chatbox_next a>span>img { transform: rotate(90deg); margin-left: 8px; opacity: .5; } 


.chatbox .time { position: relative; color: #fff; font-size: 0.875rem; line-height: 37px; background-image: url(../image/sub/bg_line.png); background-repeat: no-repeat; background-position: 50% 50%; display: flex; justify-content: center; align-items: center; } 
.chatbox .time p { width: auto; height: 37px; background-color: #e5394a; text-align: center; border-radius: 50px; padding: 0 20px; } 
.chatbox .time p b { letter-spacing: 0; } 
.chatbox .state_box { position: absolute; top: 68px; right: 40px; width:auto; display: inline-block; background-color: #3c76ed; font-size: 0.76rem; border-radius: 30px; line-height: 22px; color: #fff; padding: 0 10px; vertical-align: bottom; } 

.chat_btn { position: absolute; z-index: 999; bottom: 0; right: 0; left: 0; } 
.chat_btn .btn_regist { position: relative; } 
.chat_btn .btn_basic { float: left; border-radius: 0; width: 50%; height: 44px; line-height: 44px;; margin-right: 0; background-color: #e5384b!important; } 
.chat_btn .btn_basic.btn_white, .chat_btn .btn_basic.btn_white { background-color: #dfe4ea!important; color: #2a4175; border-color: #dfe4ea; } 

/*::: chatbox - user */
.chatbox .message_user { padding: 0 15px; margin-top: 20px; } 
.chatbox .message_user .profile { width:100%; height: 35px; } 
.chatbox .message_user .profile .admin_mask { position: relative; width: 35px; height: 35px; border-radius: 50px; overflow: hidden; background-color:#f6f9fd; display: inline-block; } 
.chatbox .message_user .profile .admin_mask img { width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 1; } 
.chatbox .message_user .profile span { display: inline; line-height: 35px; vertical-align: top; font-size: 0.937rem; } 
.chatbox .message_user .profile a { display:inline-block; color: #5c5c5c; font-size: 0.875rem; } 
.chatbox .message_user .profile a.btn_modify { padding-left: 20px; } 
.chatbox .message_user .profile a.btn_modify img { width: 13px; vertical-align: middle; margin-right: 3px; margin-bottom: 4px; } 
.chatbox .message_user .profile a.btn_delete img { width: 13px; vertical-align: middle; margin-right: 3px; margin-bottom: 2px; } 
.chatbox .message_user .profile a.btn_delete::before { content: ''; display: inline-block; width: 1px; height: 10px; background-color: #d7d7d7; margin-left: -10px; margin-right: 10px; } 
.chatbox .message_user ul { width:calc(100% - 25px); background-color: #2b4173; border: none; border-radius: 30px; border-top-left-radius:0px; } 
.chatbox .message_user ul li:last-of-type { border-top: 1px solid #405c8e; } 
.chatbox .message_user .title { color: #fff; font-size:1.186rem; font-weight: 800; padding: 15px 15px 0 15px; } 
.chatbox .message_user .name { color: #fff; font-size:1rem; font-weight: 500; display: inline-block; margin-top: 5px; padding: 0 15px; } 
.chatbox .message_user .message_txt { padding: 18px 15px 15px 15px; color: #fff; font-size: 0.937rem; } 


/*::: chatbox - admin */
.chatbox .message_admin { padding: 0 15px; margin-top: 40px; margin-left: 25px; } 
.chatbox .message_admin .profile { width:100%; height: 35px; text-align: right; position: relative; } 
.chatbox .message_admin .profile i { font-style: normal; } 
.chatbox .message_admin .profile i.time2 { font-size: 0.76rem; color: #999; position: absolute; left: 6px; bottom: -1px; } 
.chatbox .message_admin .profile .admin_mask { position: relative; width: 35px; height: 35px; border-radius: 50px; overflow: hidden; background-color:#f6f9fd; display: inline-block; } 
.chatbox .message_admin .profile .admin_mask img { width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 1; } 
.chatbox .message_admin .profile span { display: inline-block; font-size: 0.937rem; line-height: 35px; vertical-align: top; } 

.chatbox .message_admin ul { width:100%; background-color: #fff; box-shadow: 0px 0px 10px rgb(151 174 182 / 30%); border: none; border-radius: 30px; border-top-right-radius:0px; } 
.chatbox .message_admin ul li:last-of-type { border-top: 1px solid #dfe6ec; } 
.chatbox .message_admin .title { color: #333; font-size:1.186rem; font-weight: 800; padding: 20px 15px 0 15px; } 
.chatbox .message_admin .title img { width: 35px; vertical-align: text-top; margin-right: 10px; } 
.chatbox .message_admin .message_txt { padding: 18px 15px 15px 15px; color: #5f5f5f; font-size: 0.937rem; } 



/* message_file */
/*::: message_file - user*/
.chatbox .message_user .message_file { width:100%; padding: 10px 20px 10px 20px; font-size: 1rem; } 
.chatbox .message_user .message_file table .txt { display: none; } 
.chatbox .message_user .message_file table .all_down { display: none; } 
.chatbox .message_user .message_file a p i { display: none; } 

.chatbox .message_user .message_file table col:nth-child(1) { display: none; } 
.chatbox .message_user .message_file table col:nth-child(2) { width: 100%; } 
.chatbox .message_user .message_file table col:nth-child(3) { display: none; } 
.chatbox .message_user .message_file a { line-height: 20px; display: inline-block; font-size: 0.875rem; color: #9ad1ff; margin-right:0px; padding:2px 0; padding-left: 20px; background-position: 0 50%; background-repeat: no-repeat; } 
.chatbox .message_user .message_file a.default { background-image: url(../image/sub/icon_file_blue.png); } 
.chatbox .message_user .message_file a.hancom { background-image: url(../image/sub/icon_file_blue.png); } 
.chatbox .message_user .message_file a.powerpoint { background-image: url(../image/sub/icon_file_blue.png); } 
.chatbox .message_user .message_file a.word { background-image: url(../image/sub/icon_file_blue.png); } 
.chatbox .message_user .message_file a.video { background-image: url(../image/sub/icon_file_blue.pngg); } 
.chatbox .message_user .message_file a:last-of-type { margin-right: 0px; } 
/*::: message_file - admin*/
.chatbox .message_admin .message_file { width:100%; padding: 10px 20px 10px 20px; font-size: 1rem; } 
.chatbox .message_admin .message_file table .txt { display: none; } 
.chatbox .message_admin .message_file a p i { display: none; } 
.chatbox .message_admin .message_file table col:nth-child(1) { display: none; } 
.chatbox .message_admin .message_file table col:nth-child(2) { width: 100%; } 
.chatbox .message_admin .message_file table col:nth-child(3) { display: none; } 
.chatbox .message_admin .message_file a { line-height: 20px; display: inline-block; font-size: 0.875rem; color: #787878; margin-right:0px; padding:2px 0; padding-left: 20px; background-position: 0 50%; background-repeat: no-repeat; } 
.chatbox .message_admin .message_file a.default { background-image: url(../image/sub/icon_file_grey.png); } 
.chatbox .message_admin .message_file a.hancom { background-image: url(../image/sub/icon_file_grey.png); } 
.chatbox .message_admin .message_file a.powerpoint { background-image: url(../image/sub/icon_file_grey.png); } 
.chatbox .message_admin .message_file a.word { background-image: url(../image/sub/icon_file_grey.png); } 
.chatbox .message_admin .message_file a.video { background-image: url(../image/sub/icon_file_grey.png); } 
.chatbox .message_admin .message_file a:last-of-type { margin-right: 0px; } 
}