html {width: 100%; height: 100%;}
body {width: 100%; height: 100%; min-width:1014px; min-height:734px; background: #000000;}

.wrap{position:relative; top:50%; width:1200px; height:750px; margin:0 auto; background: #4a5863; transform:translateY(-50%); border:2px solid #4b5963; box-sizing:border-box;}

.main_header{position:absolute; top:0; left:0; width:100%; height:56px; background:#1c2b36;}

.account_wrap{float:left; display:inline-block; width:250px; height:56px; padding-left:30px; box-sizing:border-box; background:#162027; font-size:14px; color:#fff; line-height:56px;}
.account_wrap .avatar{display:inline-block; width:24px; height:24px; border-radius:50%; overflow:hidden; vertical-align:middle;}
.account_wrap .avatar img{vertical-align:top;}
.account_wrap .companyid{display:inline-block; margin-left:5px;}

.time_wrap{position:relative; display:inline-block; height:56px; margin:0 25px; line-height:56px;}
.time_wrap::after{content:''; position:absolute; top:14px; right:-25px; display:inline-block; width:1px; height:30px; background:#f3f3f3;}
.time_wrap .btn_time{display:inline-block; width:96px; height:30px; line-height:30px; text-align:center; font-weight:700; font-size:14px; color:#00bcd4; background:#fff; vertical-align:middle; }

.connect_wrap{display:inline-block; height:56px; margin-left:25px; line-height:25px;}
.connect_wrap .txt{display:inline-block; margin-right:20px; font-weight:700; font-size:14px; color:#00bcd4;}
.connect_wrap .btn_direct{display:inline-block; width:80px; height:30px; font-weight:700; font-size:14px; color:#fff; background:#00bcd4; text-align:center; line-height:30px;}
.connect_wrap .btn_sms{display:inline-block; width:80px; height:30px; font-weight:700; font-size:14px; color:#fff; background:#00bcd4; text-align:center; line-height:30px;}
.connect_wrap .btn_connect.on{background:#1D89CF;}
#time_popup{position:absolute; top:56px; right:-25px; display:none; width:232px; height:135px; padding:10px; box-sizing:border-box; line-height:1; background:#00bcd4; box-shadow:5px 5px 10px 0px rgba(71,71,71,.7); z-index: 10;}
#direct_popup{position:absolute; top:56px; display:none; width:232px; height:135px; padding:10px; box-sizing:border-box; line-height:1; background:#00bcd4; box-shadow:5px 5px 10px 0px rgba(71,71,71,.7); z-index: 10;}
#sms_popup{position:absolute; top:56px; display:none; width:232px; height:175px; padding:10px; box-sizing:border-box; line-height:1; background:#00bcd4; box-shadow:5px 5px 10px 0px rgba(71,71,71,.7); z-index: 10;}


.capture_img_wrap{position:relative; display:inline-block; margin-left:30px;}
.capture_img_wrap img{vertical-align: middle;}
.capture_img_wrap .badge{position:absolute; top:-5px; right:-8px; display:inline-block; min-width:16px; height:16px; line-height:16px; box-sizing:border-box; padding:0 3px; font-size:14px; color:#fff; text-align:center; border-radius:8px; background:#e92020;}

.state_wrap{float:right; display:inline-block; width:250px; height:56px; padding-left:30px; box-sizing: border-box; background:#25323c; line-height:56px;}
.state_wrap img{vertical-align:top;}
.online{display:inline-block; font-weight:700; font-size:14px; color:#fff; vertical-align:middle;}
.online .bullet{display:inline-block; width:10px; height:10px; border-radius:50%; background:#a1aab3;}
.online.on .bullet{background:#00bcd4;}
.call{position:relative; display:inline-block; width:20px; height:21px; padding-left:15px; vertical-align:middle;}
.call .phone{position:absolute; top:0;}
.call .wave{position:absolute; top:0px; left:26px;}
.subMenu{display:inline-block; width:13px; height:3px; padding-left:15px; vertical-align:middle;}
.info{display:inline-block; width:20px; height:21px; padding-left:15px; vertical-align:middle;}


.main_body{height:100%; padding-top:56px; padding-bottom:175px; box-sizing:border-box;}

.video_wrap {position:absolute; width:680px; top:56px; bottom:175px; background:#333;}
.video_img {position:absolute; top:50%; left:50%; display:inline-block; width: auto; height: 100%; transform:translate(-50%, -50%);}

.control_window{position:absolute; display:inline-block; width:330px; height:175px; background:#1c2b36; box-sizing: border-box;}
.control_window .header{width:100%; height:28px; line-height: 28px; background:#2e3e4a;}
.control_window .title{display:inline-block; margin-left:10px; font-weight:700; font-size:14px; color:#f0f3f4;}
.control_window .btn_desc{float:right; display:inline-block; margin-right:10px; font-size:12px; color:#f0f3f4;}

.btn_list{margin:5px; font-size:0;}
.btn_list > li{display:inline-block; margin:5px; vertical-align:top;}

.btn_toggle{display:inline-block; width:43px; height:35px; overflow:hidden;}

.btn_control{display:inline-block; width:43px; height:35px; line-height:35px; border-radius:3px; box-shadow:5px 5px 10px 0px rgba(0,0,0,.4); text-align:center; overflow:hidden; background:#fff; vertical-align:top;}
.btn_control img{vertical-align:middle;}
.btn_control .off{display:inline-block;}
.btn_control .on{display:none;}
.btn_control:hover {background:#00bbd3;}
.btn_control:hover .off{display:none;}
.btn_control:hover .on{display:inline-block;}
.btn_control.stop{background:#e92020;}

.btn_control2{display:inline-block; width:30px; height:35px; line-height:35px; text-align:center; overflow:hidden; vertical-align:top;}
.btn_control2 img{vertical-align:middle;}

.btn_toggle.sharing{width:53px; height:56px;}
.btn_control3{display:inline-block; width:53px; vertical-align:top; text-align:center;}
.btn_control3 .icon{display:inline-block; width:43px; height:35px; line-height:35px; border-radius:3px; box-shadow:0px 0px 5px 0px rgba(0,0,0,0.1); background:#fff;}
.btn_control3 img{vertical-align:middle;}
.btn_control3 .txt{display:inline-block; font-size:11px; color:#fff;}
.btn_control3:hover .icon{background:#6ad8e6;}


.btn_remote{display:inline-block; width:43px; height:28px; margin-left:5px; line-height:28px; font-size:12px; color:#fff; text-align:center; background:#1d89cf; border-radius:3px; vertical-align:top;}
.btn_remote.stop{background:#ed7161;}

#local_window{left:0; bottom:0;}
.zoom_wrap{padding: 10px 10px 0px 15px;}
.zoom_list{display:inline-block; width:210px; height:1px; margin-top:5px; background:#6a7882; font-size:0; vertical-align: top;}
.zoom_list > li{position:relative; display:inline-block; width:16.5%; font-size:12px; color:#aeb9c1;}
.zoom_list > li:last-child{width:1px;}
.zoom_list .btn_zoom_handle{position:absolute; left:0; top:0px; display:inline-block; width:10px; height:10px; background:#6a7882; border-radius:50%; transform:translate(-50%, -50%);}
.zoom_list .btn_zoom_handle::after{content:''; position:absolute; display:none; width:16px; height:16px; border-radius:50%; background:rgba(0, 188, 212, .5); transform:translate(-50%, -50%);}
.zoom_list .btn_zoom_handle.on::after{content:''; display:inline-block;}
.zoom_list .zoom_num{position:absolute; left:0; top:0px; display:inline-block; transform:translate(-50%, 10px);}

.num_wrap{position:relative; display:inline-block; width:75px; height:30px; margin-left:10px; background:#f3f3f3; vertical-align: middle;}
.num_wrap .input_num{width:60px; height:100%; box-sizing:border-box; padding-left:10px; border:none; border-right:1px solid #ebebeb; background:#f3f3f3;}
.num_wrap .btn_num{position:absolute; display:inline-block; width:8px; height:5px; padding:5px 7px; box-sizing:content-box;}
.num_wrap .btn_num img{vertical-align:top;}
.num_wrap .btn_num.inc{right:0; top:0;}
.num_wrap .btn_num.dec{right:0; bottom:0;}

.mic_wrap,
.speaker_wrap{display:inline-block; margin-left:5px;}
.btn_toggle.mic,
.btn_toggle.speaker{display:inline-block; width:28px; vertical-align: middle;}
.range_value{display:inline-block; width:25px; margin-top:5px; font-size:14px; color:#00bcd4; vertical-align:middle;}
/* range_wrap */
.range_wrap{display:inline-block; width:90px; vertical-align: middle;}
.rangeslider {display:inline-block; height: 4px; width: 100%; background: #888f95; border-radius:2px;}
.rangeslider__fill {background: #00bcdf; border-radius:2px;}
.rangeslider__handle {background: #00bcdf; border:none; width: 10px;  height: 10px; top:-3px !important;}
.rangeslider__handle:after {content: ""; width: 10px; height: 10px;}
/* sharing_wrap */
#sharing_wrap{position:absolute; left:63px; top:-65px; display:none; width:222px; background:#00bcd4; border-radius:3px; box-shadow:0px 0px 10px 0px rgba(71,71,71,.7); z-index:10;}
#sharing_wrap::after{content: ""; position: absolute; top: 100%; left: 20px; margin-left: -5px; border-width: 5px; border-style: solid; border-color: #00bcd4 transparent transparent transparent;}
#sharing_wrap .sharing_title{height:25px; line-height:25px; padding:0 10px; font-size:14px; color:#fff; background:#6ad8e6; border-top-left-radius: 3px; border-top-right-radius: 3px;}
#sharing_wrap .btn_close{position: absolute; right: 5px; top: 1px;}
#sharing_wrap .btn_close img{vertical-align:middle;}
.sharing_list{padding:10px 5px 5px; font-size:0;}
.sharing_list > li{display:inline-block; vertical-align:top;}

#remote_window{left:330px; bottom:0; width:350px; border-left:1px solid #4b5963;}
.draw_color_wrap{position:absolute; right:-160px; top:83px; display:none; width:235px; height:35px; border-radius:3px; background:#fff; box-shadow:0px 0px 10px 0px rgba(71,71,71,.7); z-index:10;}
.draw_color_wrap::after{content: ""; position: absolute; top:50%; left: -10px; margin-top: -5px; border-width: 5px; border-style: solid; border-color:transparent #fff transparent transparent;}
.draw_color_wrap .title{display:inline-block; margin:0 5px; line-height:35px; font-size:14px; color:#1c2b36;}
.draw_color_wrap .btn_close{display:inline-block; vertical-align:middle;}
/* radio */
.draw_color_radio{display:inline-block; vertical-align:middle;}
.draw_color_radio [type="radio"]:checked,
.draw_color_radio [type="radio"]:not(:checked)
{position: absolute; left: -9999px;}
.draw_color_radio [type="radio"]:checked + label,
.draw_color_radio [type="radio"]:not(:checked) + label
{position: relative; display:inline-block; width:20px; height:20px; padding:0 1.5px;}
.draw_color_radio [type="radio"] + label:before{content: ''; position: absolute; left: 0; top: 0; width: 20px; height: 20px; border-radius: 50%;}
.draw_color_radio .red + label:before{background:#e92020;}
.draw_color_radio .yellow + label:before{background:#ffc700;}
.draw_color_radio .green + label:before{background:#1dce81;}
.draw_color_radio .blue + label:before{background:#00bcd4;}
.draw_color_radio .purple + label:before{background:#ae62aa;}
.draw_color_radio [type="radio"]:checked + label:after{content:url(../office_img/icon_radio_checked.png); position:absolute; display:block; left:3px; top:-1px;}

/* select */
.select-hidden {display: none; visibility: hidden; padding-right: 10px;}
.select {cursor: pointer; display: inline-block; position: relative; font-size: 14px; color: #8a9298; width: 100%; height: 28px;}
.select-styled {position: absolute; top: 0; right: 0; bottom: 0; left: 0; line-height:28px; padding-left:10px; background-color: #fff;}
.select-styled:after {content: url(../office_img/icon_select_arrow.png); position: absolute; top:0px; right:5px; display:inline-block; width:8px; height:5px;}
.select-styled:active, .select-styled.active {background-color: #fff;}
.select-styled:active:after, .select-styled.active:after {top:25px; transform:rotate(180deg);}
.select-options {display: none; position: absolute; width:100%; z-index: 999; margin: 0; padding: 0; list-style: none; background-color: #fff;}
.select-options li {height:28px; line-height:28px; padding:0 10px; margin: 0; background:#f0f3f4;}
.select-options li:hover {background: #eee;}
.select-options li[rel="hide"] {display: none;}
/* select */

.address_bar{position:relative; display:inline-block; width:225px; margin-left:10px;}
.address_bar .select-options{bottom:30px;}
.address_bar .select-options li{background:#f0f3f4;}
.address_bar .select-options li:hover {background: #eee;}
.address_bar .btn_toggle.bookmark{position:absolute; top: -4px; right: 12px; width: 30px;}
.address_bar .btn_toggle.bookmark_cancel{position:absolute; top: -4px; right: 30px; width: 30px;}

.select_wrap{display:inline-block; width: 212px; margin-bottom:10px;}
.select_wrap .select-options{top:30px;}
.select_wrap.tel{width:130px;}
.select_wrap.sms{float:right; width:70px;}
.btn_call{display:inline-block; width:212px; height:35px; line-height:35px; background:#1c2b36; font-size:16px; color:#fff; text-align:center;}


/* chat_wrap */
.chat_wrap{position:absolute; top:56px; bottom:0; right:180px; display:inline-block; width:338px; background:#f3f5f5;}
.chat_wrap h1{height:30px; padding-left:10px; line-height:30px; font-weight:normal; font-size:14px; color:#fff; background:#00bcd4; box-sizing: border-box;}
/*ysjung 채팅 창 배경 색 수정*/
/* .chat_wrap .chat_msg{position:absolute; top:30px; bottom:140px; width:100%; background:#cbe9ec; overflow:hidden; box-sizing: border-box; padding: 10px 20px 10px 10px;} */
.chat_wrap .chat_msg{position:absolute; top:30px; bottom:140px; width:100%; background:#fff; overflow:hidden; box-sizing: border-box; padding: 10px 20px 10px 10px;}
.chat_wrap .chat_msg .left{padding-bottom:20px; text-align:left;}
.chat_wrap .chat_msg .right{padding-bottom:20px; text-align:right;}
.chat_wrap .chat_send{position:absolute; left:0; bottom:0; width:100%; height:140px; box-sizing:border-box; padding:10px;}
.chat_wrap .chat_input{display:inline-block; width:247px; height:100%; background:#fff; vertical-align:top;}
.chat_wrap .chat_input textarea{width:100%; height:100%; box-sizing:border-box; padding:10px; border:0; outline:0;}
.chat_wrap .btn_chat_send{float:right; display:inline-block; width:55px; height:100%; color:#fff; background:#00bcd4; vertical-align:top;}

/* right_wrap */
.right_wrap{position:absolute; top:56px; bottom:0; right:0; display:inline-block; width:180px; background:#1c2b36;}

.profile_wrap{height:270px; font-size:0;}
.tablink {display:inline-block; width: 50%; height:30px; line-height:30px; border: none; outline: none; cursor: pointer; font-size: 14px; color:#1c2b36; text-align:center; background-color: #eff2f3;}
.tablink:hover {background-color: #2e3e4a; color: white;}
.tablink.on {background-color: #1c2b36; color: white;}
.tabcontent {display:none; height:240px; box-sizing:border-box; padding:10px; color: white; text-align:center; background-color:#1c2b36;}
.tabcontent.on{display:block;}
.tabcontent .picture{display:inline-block; width:43px; height:43px; background:#00bcd4; border-radius:50%; border:3px solid #00bcd4; overflow:hidden;}
.tabcontent .name{font-size:16px; color:#00bcd4;}
#customer.tabcontent .name{margin:30px 20px;}
.tabcontent .belong{line-height:1.2; font-size:12px; color:#ddd;}
.tabcontent .modify{display:block; margin-top:10px; font-size:11px; color:#a1aab3; text-align:left;}
.tabcontent .privacy{margin-top:5px; line-height:1.2; font-size:12px; color:#fefefe; text-align:left;}

.team_member_wrap{ background:#1c2b36;}
.team_member_wrap h1{height:30px; padding-left:10px; line-height:30px; font-weight:normal; font-size:14px; color:#fff; background:#ffc700;}
.team_member_wrap > .panel{position:absolute; top:300px; bottom:205px; width:100%; padding:5px 0;}
.team_member_list{}
.team_member_list > li{border-top:1px solid #999fa3;}
.team_member_list > li:first-child{border-top:none;}
.team_member_list .accordion{display:block; width:100%; padding:6px 10px; text-align:left;}
.team_member_list .login_state{display:inline-block; width:10px; height:10px; border-radius:50%; background:#a1aab3;}
.team_member_list .login_state.on{background:#00bcd4;}
.team_member_list .name{display:inline-block; padding-left:5px; font-size:14px; color:#fff;}
.team_member_list .arrow{float:right; display:inline-block; transition:transform 0.3s; transform-origin:center 13px;}
.team_member_list .accordion.on .arrow{transform:rotate(180deg);}
.team_member_list .panel{display:none; margin:0 10px 10px; background:#ececec;}
.team_member_list .panel.on{display:block;}
.team_member_list .title_invite{height:26px; line-height:26px; padding-left:10px; background:#f4f4f4;}
.team_member_list .btn_send_invite{display:block; width:100%; height:35px; line-height:35px; color:#fff; text-align:center; background:#00bcd4;}
.team_member_wrap .custom_radio{padding:5px 10px;}

/* radio */
.custom_radio [type="radio"]:checked,
.custom_radio [type="radio"]:not(:checked)
{position: absolute; left: -9999px;}
.custom_radio [type="radio"]:checked + label,
.custom_radio [type="radio"]:not(:checked) + label
{position: relative; padding-left:20px; padding-top:0px; cursor: pointer; line-height: 20px; display: inline-block; font-size:14px; color: #8a9298;}
.custom_radio [type="radio"] + label:before{content: ''; position: absolute; left: 0; top: 0; width: 16px; height: 16px; border-radius: 3px; background: #fff;}
.custom_radio [type="radio"]:checked + label:after{content:''; position:absolute; display:block; left: 2px; top: 2px; width: 12px; height: 12px; border-radius: 3px; background:#00bcd4;}


.call_history_wrap{position:absolute; bottom:0; width:100%; height:30px; overflow:hidden; background:#1c2b36;}
.call_history_wrap.on{height:205px;}
.call_history_wrap .accordion{display:block; width:100%; height:30px; padding:0 10px; line-height:30px; font-weight:normal; font-size:14px; color:#fff; background:#ed7161; text-align:left;}
.call_history_wrap .arrow{float:right; display:inline-block; transition:transform 0.3s;}
.call_history_wrap .accordion.on .arrow{transform:rotate(180deg);}
.call_history_wrap .panel{display:none; height:175px;}
.call_history_wrap .panel.on{display:block;}
.call_history_list{}
.call_history_list > li{margin:0px 10px 10px; box-sizing:border-box; border-top:1px solid #999fa3;}
.call_history_list > li:first-child{border-top:none;}
.call_history_list .date{padding-top:8px; font-size:12px; color:#fff;}
.call_history_list .chat_transcript{padding-bottom:5px; font-size:12px; color:#8a9298;}
.call_history_list .customer{display:inline-block; padding:5px; font-size:12px; color:#00bcd4; background:#fff;}
.call_history_list .get_file{display:inline-block; padding-left:5px; font-size:12px; color:#8a9298;}
.mCSB_inside > .mCSB_container{margin-right: 10px;}

body.login{background:#1c2b36;}
.login_wrap{position:relative; top:50%; width:890px; height:445px; margin:0 auto; transform:translateY(-50%); border-radius:10px; background:#00bcd4; overflow:hidden;}
.login_wrap .logo_wrap{float:left; position:relative; display:inline-block; width:445px; height:445px; background: linear-gradient(120deg,rgba(0, 187, 210,.3), rgba(28, 43, 54,.3));}
.login_wrap .logo_wrap .logo{position:absolute; top:50%; left:50%; display:inline-block; transform:translate(-50%, -50%);}
.login_wrap .content_wrap{float:right; display:inline-block; width:445px; height:445px; background: #fff; padding: 35px; box-sizing: border-box;}
.login_wrap h2{margin-bottom:15px; font-weight:bold; font-size:43px; color:#f0f3f4;}
.login_wrap .input_login{width:375px; height:50px; margin-bottom:15px; box-sizing:border-box; padding:0 20px; font-size:18px; color:#8a9298; border-radius:5px !important; border:none; outline:none; background:#f0f3f4;}
.login_wrap .remember_me{display:inline-block; margin-bottom:30px;}
.login_wrap .forgot_password{float:right; display:inline-block; font-size:16px; color:#00bcd4;}
.login_wrap .btn_login{clear:both; width:375px; height:50px; margin-bottom:30px; line-height:50px; text-align:center; font-size:20px; color:#fff; border-radius:5px; background:#1c2b36;}
.login_wrap .copyright{text-align:center; font-size:13px; color:#8a9298;}


/* checkbox */
.custom_checkbox[type="checkbox"]:checked,
.custom_checkbox[type="checkbox"]:not(:checked)
{position: absolute; left: -9999px;}
.custom_checkbox[type="checkbox"]:checked + label,
.custom_checkbox[type="checkbox"]:not(:checked) + label
{position: relative; padding-left:30px; padding-top:0px; cursor: pointer; line-height: 20px; display: inline-block; font-size:16px; color: #00bcd4;}
.custom_checkbox[type="checkbox"] + label:before{content: ''; position: absolute; left: 0; top: 0; width: 20px; height: 20px; border-radius: 3px; background: #f0f3f4;}
.custom_checkbox[type="checkbox"]:checked + label:after{content:''; position:absolute; display:block; left: 3px; top: 3px; width: 14px; height: 14px; border-radius: 3px; background:#00bcd4;}




/* ysjung 주석 : 처리 화면 크기 반응형으로 변할때 비디오 영역 침범하는 문제 발생 */
/* @media only screen and (max-width : 1204px) {
    .wrap{width:100%;}
    .video_wrap{width:62%;}

    .control_window{width:30%;}
    .num_wrap{width:60px; margin-left:5px;}
    .num_wrap .input_num{padding-left:5px;}
    .mic_wrap, .speaker_wrap{margin-left:0px;}

    #remote_window{left:30%; width:32%;}
    .btn_list > li{margin:4px;}
    .address_bar{width:208px;}
    .btn_remote{margin-left:2px;}

    .chat_wrap{width:23%; right:15%;}
    .chat_wrap .chat_input{width:100%; height:80px;}
    .chat_wrap .btn_chat_send{width:100%; height:30px; margin-top:10px;}
    .right_wrap{width:15%;}
}
@media only screen and (max-height : 754px) {
    .wrap{height:100%;}
} */