@charset "utf-8";


.testbtn {
    position: absolute;
    z-index: 99999;
    left: 1em;
    bottom: 50em;
}

.chatroom{
    display: none;
    position: absolute;
    z-index: 99998;
    font-size:12px;
    right:20px;
    bottom:20px;
    width: 100%;
    max-width: 300px;
    height: 100%;
    max-height: 400px;
    background-color: white;
    color:black;
    box-shadow: 0px 0px 2px 0px #c2c2c2;
    padding-top: 24px;
    box-sizing: border-box;
    border-radius: 10px 10px 0 0;
    overflow: hidden;
}
.chatroom .title-wrap { padding: 24px 15px 4px; overflow: hidden; }
.chatroom .title-wrap img { display: block; float: left; margin-right: 4px; }
.chatroom .title-wrap p { display: block; float: left; line-height: 26px; height: 26px; font-size: 18px; color: #168aad; }
.chatroom .chatInputBox { position: absolute; box-sizing: border-box; bottom: 0; width: 100%; background: #e3e3e3; padding: 8px; }
.chatroom .chatInputBox input { padding: 0 8px; width: calc(100% - 56px); height: 30px; float: left; margin-right: 6px; box-sizing: border-box; }
.chatroom .chatBtn { width: 50px; float: left; color: #ffffff; background: #184e77; height: 30px; font-weight: bold; }
.chatroom .close { position: absolute; top: 0; left: 0; width: 100%; height: 24px; background: gray; text-align: center; font-size: 12px; color: #fff; font-weight: bold; }

#chatBlock { overflow: hidden; height: calc(100% - 100px); padding: 0 15px 8px; box-sizing: border-box; width: 100%; overflow-y: auto; }
#chatBlock::-webkit-scrollbar { width: 4px; background: #e6e6e6; }
#chatBlock::-webkit-scrollbar-thumb { background: #024b82; }
.chatotherMsg {text-align: left; margin-bottom: 8px; }
.chatotherMsg span { display: inline-block; line-height: 1.2; font-size: 15px; color: #000000; padding: 8px 10px; background: #e3e3e3; border-radius: 0 10px 10px 10px; }
.chatMyMsg { text-align: right; margin-bottom: 8px; }
.chatMyMsg span { display: inline-block; line-height: 1.2; font-size: 15px; color: #fff; padding: 8px 10px; background: #184e77; border-radius: 10px 0 10px 10px; box-sizing: border-box; max-width: 100%; word-break: break-all; }

.chatroom-open { display: none; position: fixed; right: 20px; bottom: 20px; z-index: 1; }
.chatroom-open button { padding: 8px 16px; font-size: 14px; font-weight: bold; border-radius: 5px 0 5px 5px; background: #c2c2c2; border: 1px solid #c2c2c2; }
.chatroom-open button:hover { border: 1px solid #000; }

.loginWrap { display: none; position: absolute; width: 100%; height: 100%; background-size: 100% 100%; z-index: 99999; backdrop-filter: blur(11px);}
.login_Area { position: absolute; width: 100%; height: 100%; max-width: 615px; max-height: 513px; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.login_Area h1 { font-size: 36px; font-weight: 200; padding-bottom: 40px; text-align: center; color: #fff; }
.login_Area h1 span{color: #63d5ea; font-weight: bold;}

.login_frm { background: url('../images/modal-imgs/bg_login.png') no-repeat top; width: 100%; height: 100%; padding: 160px 80px; box-sizing: border-box; }
.login_frm .input-wrap { width: 100%; height: 50px; }
.login_frm .input-wrap + .input-wrap { margin-top: 15px; }
.login_frm .input-wrap label { width: 140px; height: 100%; line-height: 50px; font-size: 25px; color: #fff; font-weight: bold; display: block; float: left; }
.login_frm .input-wrap input { width: calc(100% - 140px); height: 100%; display: block; float: left; padding: 0 16px; box-sizing: border-box; border-radius: 5px; }

.login_frm .btn-wrap { clear: both; padding-top: 40px; }
.login_frm .btn-wrap button { display: block; float: right; margin-left: 10px; width: 150px; height: 50px; box-sizing: border-box; font-size: 20px; font-weight: bold; color: #184e77; background: #fff; border: 1px solid #184e77; border-radius: 5px; }
.login_frm .btn-wrap button + button { background: #184e77; color: #fff; }
@media screen and (max-width:768px){
    .login_Area { max-width: 100%; max-height: 100%; }
    .login_frm { position: relative; padding: 0; background: url('../images/modal-imgs/bg_login.png') no-repeat center; background-size: cover; }
    .login_frm .contents-wrap { position: absolute; width: 100%; height: 160px; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 0 4%; box-sizing: border-box; }
    .login_frm .input-wrap { height: 35px; }
    .login_frm .input-wrap label { width: 90px; font-size: 16px; line-height: 35px; }
    .login_frm .input-wrap input { width: calc(100% - 90px); }
    .login_frm .btn-wrap { padding-top: 30px; }
    .login_frm .btn-wrap button { height: 40px; font-size: 18px; max-width: 120px; }

}

/* ***********************************사용자지정 *********************** */
.pop_custom_wrap {position: fixed; z-index: 9999; top: 50%; left: 50%; max-width: 414px; max-height: 600px; background-image: url('../images/modal-imgs/bg.png'); background-size: cover; background-color: rgb(255, 255, 255); border-radius: 10px; text-align: center; transform: translate(-50% ,-50%);}
.pop_custom_wrap section.container span,.pop_custom_wrap section.container input {
    font-family:Arial, Helvetica, sans-serif; font-size:16px; color:#FFFFFF;
}
section.container {padding: 53px; box-sizing: border-box;}
section.container .header {margin-bottom: 39px;}
section.container .header .logo {display: inline;}

section.container .contents {margin-bottom: 145px; text-align: left;}

section.container .contents .ex {display: block; margin-bottom: 10px; font-size: 16px;}

section.container .contents .id_box {display: flex; padding: 10px 17px; width: 100%; height: 45px; background-color: rgb(255, 255, 255); border-radius: 5px; box-sizing: border-box;}
section.container .contents .pw_box {margin-top: 10px; padding-left: 13px;}
section.container .contents .id_box label {width: 22px; height: 100%;}
/* section.container .contents .pw_box label {padding-right: 14px !important;} */
section.container .contents .pw_box label img {width: 22px;}
section.container .contents .id_box label {position: relative; padding-right: 17px;}
section.container .contents .id_box label:after {content: ''; position: absolute; top: 50%; right: 0; width: 1px; height: 30px; background-color:  rgb(227, 227, 227); opacity: 0.502; transform: translateY(-50%);}
section.container .contents .id_box input {margin: 0 15px; width:100%; height: 100%; border: 0; outline: none; font-size: 17px; color: #121212;}
section.container .contents .id_box input::placeholder {font-size: 17px; color: rgb(227, 227, 227);}

section.container .btn_wrap {display: flex; justify-content: space-between; flex-wrap: wrap; min-width: 308px;}
section.container .btn_wrap .btn_box {margin-bottom: 5px; width: 152px; height: 50px; border: 0; border-radius: 5px;  color: #fff;}
section.container .btn_wrap .btn_box .btn_info_wrap {display: flex; justify-content: center; align-items: center;}
section.container .btn_wrap .btn_grup {background-color: rgb(22, 138, 173);}
section.container .btn_wrap .btn_present {background-color: rgb(24, 78, 119);}
section.container .btn_wrap .btn_box span {padding-left: 10px; font-size: 17px; font-weight: 700;}
section.container .btn_wrap .btn_cancel {width: 100%; height: 50px; background-color: rgb(227, 227, 227); border: 0; border-radius: 5px; color: #fff;}
section.container .btn_wrap .btn_cancel span {font-size: 17px; font-weight: 700;}

@media screen and (max-width:768px){
    .default-wrap { padding: 25px 4%; } 
    .title-wrap { margin-bottom: 20px; padding-bottom: 12px; }
    .title-wrap .title, .product-view .title-wrap .title { margin-bottom: 16px; font-size: 30px; }
    /* user_custom */
    section.container {padding: 25px 5%;}
    .pop_custom_wrap {min-width: 320px; min-height: 485px; background: rgb(27 117 159);}

    section.container .header {margin-bottom: 30px;}
    section.container .header .logo img {width: 65px; height: 69px;}

    section.container .contents {margin-bottom: 90px;}
    section.container .contents .ex {font-size: 13px;}
    section.container .contents .pw_box {margin-top: 10px; padding-left: 15px !important;}
    section.container .contents .pw_box label:after {right: 1px !important;}
    /* section.container .contents .id_box label img {width: 110%; padding-top: 2px;} */
    section.container .contents .id_box input {font-size: 14px;}
    section.container .contents .id_box input::placeholder {font-size: 14px;} 

    section.container .btn_wrap {min-width: initial;}
    section.container .btn_wrap .btn_box {display: flex; justify-content: center; align-items: center; width: 100%; height: 40px;}
    section.container .btn_wrap .btn_box .btn_info_wrap {width: 50%;}
    section.container .btn_wrap .btn_box .btn_info_wrap_first {padding-right: 18px;}
    section.container .btn_wrap .btn_box .img img {width: 90%;}
    section.container .btn_wrap .btn_box span {font-size: 14px;}
    section.container .btn_wrap .btn_cancel {height: 40px;}
    section.container .btn_wrap .btn_cancel span {font-size: 14px;}
}


#conference_init_modal {
    display: none !important;
}

/* .noselect  */