@charset "UTF-8";

/* skipNavi */
#skipNavi a {display: block; position: fixed; top: 0; left: 0; width: 100%; height: 0; background-color: #583cc9; color: #fff; font-size: 14px; font-weight: bold; line-height: 1; text-align: center; overflow: hidden; z-index: 9999;}
#skipNavi a:focus, #skipNavi a:active {margin-top: 0; height: auto; padding: 10px 0px;}

/*================== 영상통화, 화면공유 시스템 (상담사용, 고객용) ===================*/
/* common */
body {min-width: auto; color: #111;}
body.surFace {min-width: 1368px;}
body *{box-sizing: border-box; font-family:'Roboto Regular', 'NotoSans Regular', 'Malgun Gothic', '맑은 고딕', 'Apple SD Gothic Neo', sans-serif; font-size: 18px;}

header [class^=wrap]{margin: 0 40px;clear: both;}
header [class^=Wrap]::after,header [class^=Wrap]::before {content: ''; display: table}
header [class^=Wrap]::after {clear: both;}

.caseBox{max-width: 100%;}

/* text */
[class^=signH]{line-height: 1;}
.signH2{font-size: 30px; font-weight: bold; margin-bottom: 50px;}
.signH3{font-size: 24px; margin-bottom: 30px; font-family:'Roboto Medium', 'NotoSans Medium', 'Malgun Gothic', '맑은 고딕', 'Apple SD Gothic Neo', sans-serif;}
.sTxt {line-height: 28px;}

.refList > li, .refList:not(ul) {display: list-item; position: relative; padding-left: 18px; font-size: 14px; color: #777; line-height: 1.6em}
.txtList > li:first-child, .refList > li:first-child, .dashList > li:first-child {margin-top: 0 !important;}
.refList > li:before, .refList:not(ul):before {display: block; content: '※'; position: absolute; top: 0; left: 0;}

/* color */
.c555 {color: #555 !important;}
.pointC1 {color:#d6006d !important;}

/* button */
.btnArea {margin-top: 40px; text-align: center;}
[class^=cbtn] {display: inline-block; min-width: 180px; height: 50px; padding:0 20px; background-color:#0063cc; line-height: 50px; vertical-align: middle; text-align: center; border-radius:9px; border-top-right-radius:0; border-bottom-left-radius:0; box-sizing: border-box; color:#fff; font-family:'Roboto Regular', 'NotoSans Regular', 'Malgun Gothic', '맑은 고딕', 'Apple SD Gothic Neo', sans-serif; font-size:18px; transition:background-color 0.125s, border 0.125s;}
[class^=cbtn].S {min-width: 120px; height: 40px; font-size: 18px; line-height: 40px;}
.cbtnWB {background-color: #fff; border:1px solid #0063cc; color:#0063cc}

/* form */
.ipt {display: inline-block; width: 100%; height: 40px; padding: 0 18px; border: 1px solid #d2d2d2; border-radius: 4px; background-color: #fff; transition: border-color ease-in-out 0.225s, box-shadow ease-in-out 0.225s; color: #333; box-sizing: border-box; font-size:13px; font-family: 'Roboto Light', 'NotoSans Light', sans-serif; line-height: 38px;}

select.ipt, .selectBtn {background: #fff url('../img/common/btn_select.png') no-repeat right center; padding-right: 45px;}
select.ipt:focus::-ms-value {color:#333 !important; background-color: transparent !important;}
.ie select.ipt {padding-right: 0; background: none;}
.oldChrome table [class*=col_] > select.ipt {vertical-align: top;} /* old(크롬) 셀럭트 옵션 선택 시 춤추는 현상 */
select option {max-width: 260px; font-size: 13px;}

/* 볼륨바 */
/* chrome */
input[type=range] {width: 100%; height: 5px; background-color: #ddd; border-radius: 3px; cursor: pointer; -webkit-appearance: none; transition: background 450ms ease-in;}
input[type=range]::-webkit-slider-thumb {width: 20px; height: 20px; background-color: #0063cc; border: 3px solid #eee; border-radius: 50%; cursor: pointer;-webkit-appearance: none;}
input[type=range]::-moz-range-thumb {width: 20px; height: 20px; background-color: #0063cc; border: 3px solid #eee; border-radius: 50%; cursor: pointer;}
input[type=range]::-moz-range-track {background-color: #0063cc;}
/* edge */
input[type=range]::-ms-track {width: 100%; background: transparent; border-color: transparent; cursor: pointer; color: transparent;}
input[type=range]::-ms-thumb {width: 20px; height: 20px; background-color: #0063cc; border: 3px solid #eee; border-radius: 50%; cursor: pointer; transform: scale(1);}
input[type=range]::-ms-fill-lower {background-color: #0063cc;}
input[type=range]::-ms-fill-upper {background-color: #eee;}

/* optionWrap checkbox */
/* checkbox */
.optionWrap input[type="checkbox"]:not(.def) {position: absolute; top: auto; display: inline-block; opacity: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; z-index: -10; box-sizing: border-box; vertical-align: top;}
.optionWrap input[type="checkbox"]:not(.def)+label {position:relative; display: inline-block; margin-right: 20px; padding: 0; cursor: pointer; box-sizing: border-box; color:#666; line-height: 20px; vertical-align: top; font-size: 12px;}
.optionWrap input[type="checkbox"]:not(.def)+label:hover,
.optionWrap input[type="checkbox"]:not(.def):focus+label {text-decoration: underline; color:#0063CC}
.optionWrap input[type="checkbox"]:not(.def)+label:before {content: ""; position: relative; display: inline-block; width: 20px; height: 20px; margin: 0 6px 0 0; border: 1px solid #999; border-radius: 2px; background-color:#fff; box-sizing: border-box; z-index: 1; transition: background-color ease-in-out 0.225s; vertical-align: top}
.optionWrap input[type="checkbox"]:not(.def):checked+label:hover:before,
.optionWrap input[type="checkbox"]:not(.def):checked:focus+label:before {border:1px solid #0063cc;}
.optionWrap input[type="checkbox"]:not(.def):checked+label:before {border-color:#0063cc; background: #0063cc url('../img/common/ico_checkbox.png') no-repeat -1px; transition: background-color 0s}
.optionWrap input[type="checkbox"]:not(.def)+label:hover:before,
.optionWrap input[type="checkbox"]:not(.def):focus+label:before {border:2px solid #0063cc; outline:1px dotted #999 !important;}    
.optionWrap input[type="checkbox"]:not(.def):checked:focus+label:before {outline:1px dotted #0063cc;}

/* checkbox 재정의  */
.optionWrap input[type="checkbox"]:not(.def):checked+label:after {
	content:''; position:absolute; top:0; left:0; width: 20px; height: 20px; border-radius: 2px; background: #0063cc; z-index:2;
	-webkit-animation: chkmotion 0.25s 1 linear forwards;
	animation: chkmotion 0.25s 1 linear forwards;
}
@-webkit-keyframes chkmotion {0%{width: 20px; left:0}45%{width: 12px; left:8px;}75%{width: 12px; left:8px;}100%{width: 0; left:20px;}}
@keyframes chkmotion {0%{width: 20px; left:0}55%{width: 12px; left:8px;}65%{width: 12px; left:8px;}100%{width: 0; left:20px;}}
@-webkit-keyframes chkmotionBlk {0%{width: 20px; left:-27px}45%{width: 12px; left:-19px;}75%{width: 12px; left:-19px;}100%{width: 0; left:-7px;}}
@keyframes chkmotionBlk {0%{width: 20px; left:-27px}55%{width: 12px; left:-19px;}65%{width: 12px; left:-19px;}100%{width: 0; left:-7px;}}
.ie .iptGroup input[type="checkbox"]:checked+label:after {content: none;}
@keyframes iptGlow {
	0%{box-shadow: 0px 0px 6px 0px rgba(0,104,212,0.9);}
	30%{box-shadow: 0px 0px 6px 0px rgba(0,104,212,0.9);}
	50%{box-shadow: 0px 0px 13px 0px rgba(0,104,212,0.9);}
	100%{box-shadow: 0px 0px 6px 0px rgba(0,104,212,0.9);}
}


/* layout */
/* header */
.areaTop{position: relative;color: #fff;}
.areaTop > *{position: relative; z-index: 3;}
.areaTop::before, .areaTop::after{content: ''; position:absolute; height:100%;}
.areaTop::before{top: 0; left: 0; right: 0;  background: -webkit-linear-gradient(to right, #0063cc 0%, #0063cc 49%, #af13c7 51%, #af13c7 100%); background: linear-gradient(to right, #0063cc 0%, #0063cc 49%, #af13c7 51%, #af13c7 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0063cc', endColorstr='#af13c7', GradientType=1); z-index: 0}
.areaTop::after{width: 100%; left:50%; top:0;transform: translateX(-50%); background: -webkit-linear-gradient(to right, #0063cc 0%, #583cc9 50%, #af13c7 100%); background: linear-gradient(to right, #0063cc 0%, #583cc9 50%, #af13c7 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0063cc', endColorstr='#af13c7', GradientType=1); z-index: 1}

.wrapTop{min-height: 80px; padding: 25px 0;}
.wrapTop .left{float: left;}
.wrapTop .right{float: right; margin-top: -4px; font-size: 0;}
.wrapTop .right:after{content: ''; display: block; clear: both;}

.logo {line-height: 30px; font-size: 0;}
.logo img{width: 177px; height: 27px; margin-right: 30px; margin-bottom: 1px; vertical-align: middle;}
.logo span{font-size: 24px; font-family:'Roboto Medium', 'NotoSans Medium', 'Malgun Gothic', '맑은 고딕', 'Apple SD Gothic Neo', sans-serif; color: #fff; line-height: 1; vertical-align: middle;}

.right [class*=btn] {display: inline-block; width: 40px; height: 40px; background-size: 40px; background-repeat: no-repeat; background-position: center;} 
.right [class*=btn] + [class*=btn] {margin-left: 20px;}
.right .btnHelp {background-image: url('../img/common/btn_sign_help.png');} 
.right .btnClose {background-image: url('../img/common/btn_sign_close.png');} 

/* window popup */
.popCont > .scroll {padding: 0 30px 0; margin-bottom: 30px; overflow: auto; box-sizing: border-box;}
body.windowPop {overflow: auto; min-width: 0; background: #fff}
body.windowPop .scroll > table:not(.mt30):first-of-type, body.windowPop .scroll > .titArea:first-of-type {margin-top: 0 !important}
body.windowPop section {margin: 0 auto 50px;}
body.windowPop .popHeader {position: fixed; top: 0; left: 0; right: 0; z-index: 1000}
body.windowPop .popHeader {min-height: 60px; padding: 11px 30px 11px 40px; margin-bottom: 30px; background: #001f5b; box-sizing: border-box;}
body.windowPop .popHeader:after, .popHeader:before {content: " "; display: table;}
body.windowPop .popHeader:after {clear: both;}
body.windowPop .popHeader .tit {float: left; font-size: 24px; color:#fff;}
body.windowPop .popHeader .popBtnArea {float: right; margin-top: 6px;}
body.windowPop .popHeader .popBtnClose {background: url('../img/common/btn_pop_close2.png') no-repeat center; background-size: 22px;}
body.windowPop .popHeader [class*=popBtn]:not(.popBtnArea), .popHeader .icoBtnPrint {display: inline-block; width: 30px; height: 30px; margin-left: 6px; vertical-align: middle;}

body.windowPop .popCont {box-shadow: none; border-radius: 0;}
body.windowPop .popCont .scroll {overflow: visible; padding: 98px 40px 90px;}
body.windowPop .popCont > .btnArea, body.windowPop form > .btnArea  {position: fixed; bottom: 0; left: -20px; right: -20px; margin: 0; padding: 40px 0; border: none; background-color: #fff; z-index: 100}
body.windowPop .popCont .scroll .signH3 {margin-bottom: 15px;}
body.windowPop .popCont .scroll .textBox {margin-top: 30px; border-top: 1px solid #111;}
body.windowPop .popCont .scroll .textBox strong {display: block; padding: 25px 0 14px 0; font-weight: bold;}
body.windowPop .popCont .scroll .textBox .refList {padding-top: 10px;}
body.windowPop .popCont .scroll .textBox .refList li {font-size: 16px;}

/* layer popup */
.alert {display: none; position: absolute; top: 0; left: 0; right:0; bottom: 0; width: 100%; height: 100%; overflow: auto; background: rgba(0,0,0,0.7); z-index: 100; box-sizing: border-box; outline:rgba(0,0,0,0.7)}
.alert .popContain {position: relative; display: table; width: 100%; height: 100%; padding: 30px 0; margin: 0 auto; box-sizing: border-box; text-align: center; z-index: 101; table-layout: fixed;}
.alert .popup {display: table-cell; height: 100%; margin: 0 auto; z-index: 10; box-sizing: border-box; vertical-align: middle;}
.alert .popup .popCont {position: relative; width: 300px; padding: 54px 20px 30px; margin: 0 auto; background: #fff; box-sizing: border-box; overflow: hidden; border: 1px solid #000; border-radius: 10px; box-shadow: 5px 5px 5px rgba(0,0,0,0.1); z-index: 10;}
.alert .popup .popCont .msg {text-align: center;}
.alert .popup .popCont .btnArea {position: static; padding: 0;margin-top: 45px;}
.alert .popup .popCont .btnArea button + button {margin-left: 8px;}


/* content */
/* VCNFLN06N10 */
.callSystem {width: 100%;background-color: #eff4fa; }
.callSystem #content {min-height: calc(100vh - 80px); padding: 20px !important;}
.callSystem #content:before {content: '';display: block;clear: both;}
.callSystem #content iframe {height: 100%;min-height: calc(100vh - 120px);margin: 0; background-color: #fff; border-radius: 20px; text-align: center;}
.callSystem #content .faceCont {float: left; width: calc(25.45% - 10px);}
.callSystem #content .screenCont {float: right;width: calc(74.55% - 10px);}

/* VCNFLN04N20 */
.videoWrap {position: relative; min-height: 100vh;}
.videoWrap .endBtn {position: absolute;top: 15px;right: 15px;display: inline-block; width: 40px;height: 40px;background:#d6006d url('../img/common/ico_call_end.png') no-repeat center;background-size: 18px auto;border-radius: 50%;z-index: 10;}

.videoWrap .callInfo {padding-top: 60px; text-align: center;}
.videoWrap .callInfo .signH3 {margin-bottom: 25px;}
.videoWrap .callInfo .sTxt + .callAcept {margin-top: 60px;}
.videoWrap .callInfo .rowArea {margin: 4px auto 0;}
.videoWrap .callInfo .rowArea.callHold {width: 100%; height: 294px; background-image: url('../img/common/img_callHold.png');background-repeat: no-repeat;background-position: center; background-size: auto 294px;}
.videoWrap .callInfo .rowArea.callAcept {width: 100%; height: 294px; background-image: url('../img/common/img_callAcept.png');background-repeat: no-repeat;background-position: center; background-size: auto 294px;}
.videoWrap .callInfo .rowArea.tabChoice {width: 400px; height: 320px; margin-top: 34px; background-image: url('../img/common/img_tabChoice.png');background-repeat: no-repeat;background-position: center; background-size: 100% auto;}

/* VCNFLN04N40 */
.videoWrap .videoCall {position: relative; height: 100vh;}
.videoWrap .videoCall .faceArea {position: relative;height: 50vh; overflow: hidden;}
.videoWrap .videoCall .faceArea video {width: 100%; height: 100%;}
.videoWrap .videoCall .faceArea:before {content: '';display: block;clear: both;}
.videoWrap .videoCall .faceArea > div {position: relative;float: left;width: 100%;;height: 50vh; background-color: #333;}

/* 수정필요 */
.videoWrap .videoCall .pauseWrap {display: none; position: absolute; top: 0; left: 0; right:0; bottom: 0; width: 100%; height: 100%; overflow: auto; background: #333; z-index: 10; box-sizing: border-box;}
.videoWrap .videoCall .icoPause {position: absolute; left: 50%; top: 50%; width: 80px; height: 93px; background: url('../img/common/ico_pause.png') no-repeat center; background-size: 80px auto; transform: translate(-50%, -50%); z-index: 11;}
/* 수정필요 */

.videoWrap .callLabel {display: inline-block;;position: absolute;top: 15px;left: 15px;padding: 3px 10px 3px 13px;background-color: rgba(0,0,0,0.5); border-radius: 18px; color: #fff; font-size: 13px;vertical-align: middle; z-index: 20;}
.videoWrap .callLabel:before {content: '';display: inline-block;width: 15px;height: 15px;margin: -2px 7px 0 -8px;background-color: #6ddd2a; border-radius: 50%;vertical-align: middle;}
.videoWrap .callLabel em {font-size: 13px;}

.videoWrap .videoCall .btnWrap {position: absolute; bottom: 30px; left: 50%; /* width: 100%; */ transform: translateX(-50%); z-index: 11;}
.videoWrap .videoCall .btnWrap > ul{min-width: 220px;font-size: 0;}
.videoWrap .videoCall .btnWrap > ul > li{display: inline-block; font-size: 18px; cursor: pointer;}
.videoWrap .videoCall .btnWrap > ul > li + li {margin-left: 20px;}
.videoWrap .videoCall .btnWrap > ul > li a {display: block; width: 60px; height: 60px; border-radius: 50%; background-color: #fff;background-repeat: no-repeat;background-position: center center;background-size: 60px 60px;box-shadow: 7px 7px 20px 0px rgba(0,0,0,0.2)}
.videoWrap .videoCall .btnWrap > ul > li:nth-child(1) a {background-image: url(../img/common/ico_mic_on.png);}
.videoWrap .videoCall .btnWrap > ul > li:nth-child(2) a {background-image: url(../img/common/ico_camera_on.png);}
.videoCall .btnWrap > ul > li:nth-child(3) a {background-image: url(../img/common/ico_more.png);}
.videoWrap .videoCall .btnWrap > ul > li.off:not(:last-child) a {background-image: url(../img/common/ico_mic_off.png);background-color: transparent; border: 2px solid #fff; box-shadow: none;}
.videoWrap .videoCall .btnWrap > ul > li.off:nth-child(2) a { background-image: url(../img/common/ico_camera_off.png);}

.videoWrap .optionWrap {display:none; position: absolute; top:0; left: 0; right:0; bottom:0; width:100%; height:100%; overflow:auto; background: rgba(0,0,0,0.7); z-index: 100; box-sizing: border-box; outline:rgba(0,0,0,0.7)}
.videoWrap .optionWrap.on {display: block;}
.videoWrap .closeBtn {display: block; position: absolute; top: 17px; right: 16px; width: 18px;height: 18px;background: url('../img/common/btn_close_option.png') no-repeat center;background-size: 18px 18px;}
.videoWrap .optionBox {position: absolute; bottom:110px;left:50%; transform:translateX(-50%);width: calc(100% - 28px); padding: 13px 20px 27px; background-color: #fff; border-radius: 10px; border:1px solid #000; z-index: 101;}
.videoWrap .optionBox:before {content: '';display: block; clear: both;}
.videoWrap .optionBox h3 {display: inline-block;}
.videoWrap .optionBox ul {padding-top: 33px; padding-bottom: 31px;text-align: center;font-size: 0;}
.videoWrap .optionBox .optionMenu {display: inline-block; text-align: center;}
.videoWrap .optionBox .optionMenu + .optionMenu {margin-left: 50px;}
.videoWrap .optionBox .optionMenu > a {display: block;}
.videoWrap .optionBox .optionMenu .optionIcon {display: block;width: 60px; height: 60px; margin-bottom: 5px; border-radius: 50%; border: 2px solid #eee; background-repeat: no-repeat; background-position: center; background-size: 60px;}
.videoWrap .optionBox .optionMenu.btnInvite .optionIcon {background-image: url('../img/common/btn_ico_add.png');}
.videoWrap .optionBox .optionMenu.btnSetting .optionIcon {background-image: url('../img/common/btn_ico_set.png');}
.videoWrap .optionBox .optionMenu span {font-size: 13px;}

/* VCNFLN06N20 */
.videoWrap .optionBox .setMenu {margin-top: 30px;}
.videoWrap .optionBox .setMenu + .setMenu {margin-top: 26px;}
.videoWrap .optionBox .setMenu .setTit {display: table;width: 100%; padding-bottom: 7px;}
.videoWrap .optionBox .setMenu .setTit > * {display: table-cell;font-size: 13px; text-align:left;}
.videoWrap .optionBox .setMenu .setTit .valTxt {text-align: right; font-weight: bold; color: #0063cc; }
.videoWrap .optionBox .setMenu .setTit .valTxt em {font-size: 13px;}
.videoWrap .optionBox .setMenu .btnArea {margin-top: 26px; margin-bottom: 3px;}
.videoWrap .optionBox .setMenu .btnArea [class^=cbtn].S {font-size: 15px;}
.videoWrap .optionBox .setMenu .ipt + .ipt {margin-top: 10px;}

/* VCNFLN05N20 */
.videoWrap .optionBox.screenOp {max-width: 300px;}

/* VCNFLN04N50 */
.videoWrap .finishWrap {height: 100vh;}
.videoWrap .finishWrap > strong {display: block;position: relative;top: 50%;transform: translateY(-50%);text-align: center; background-size: 80px 49px;line-height: 1.5;background-repeat: no-repeat; background-position: center top;font-size: 24px;}
.videoWrap .videoSys > strong {padding-top: 75px;background-image: url('../img/common/ico_finish_msg01.png'); background-size: 80px 49px;}

/* VCNFLN05N50 */
.videoWrap .shareSys > strong {padding-top: 80px;background-image: url('../img/common/ico_finish_msg02.png'); background-size: 79px 58px;}

/* VCNFLN05N40 */
.videoWrap .videoCall .screenArea {position: relative; height: 100vh; overflow: hidden;}
.videoWrap .videoCall .screenArea video {width: 100%; height: 100%; }
.videoWrap .videoCall .screenArea .callLabel:before {background-color:#d6006d}
.videoWrap .videoCall .btnWrap.changeTab {left: auto;transform: translateX(0);right: 30px;text-align: right;}
.videoWrap .videoCall .btnWrap.changeTab > ul > li:nth-child(1) a {background-image: url(../img/common/ico_tab_change.png);}

/********************************* 고객용 *********************************/
/* 고객용 iframe 작업으로 인한 추가 css */
.clientView {display: block;width: 100%; height: 100vh; margin:0; padding:0; overflow: hidden;}

/* 공통 */
body.client{min-width: auto; line-height: 1.5; letter-spacing: -0.04em;}
body.client p{font-size: 1rem;}
.client .wrapper{position: relative;}
.client .moOnly {display: none;}
.client input[type="text"],
.client input[type="number"],
.client input[type="password"],
.client input[type="tel"] {display: inline-block; height:2.5rem; padding: 0 1.125rem; border: 1px solid #d2d2d2; border-radius: 4px; background-color: #fff; color: #333; line-height: 2.375rem;}

.client .wrapTop{min-height: 5rem; margin: 0; padding: 1.563rem 2.5rem;}
.client .logo img{width: 12.188rem; height: 1.875rem; margin-bottom: 0;}
.client .logo span{font-size: 1.5rem;}

.client #content.signCon.type2{min-height: calc(100vh - 5rem); padding: 5rem 0 8.125rem !important;}
.client #content.signCon section{width: 70.75rem;margin: 0 auto 8.125rem;}
.client .signH2{margin-bottom: 1rem; font-size: 2.125rem;}
.client .signH2 + p{margin-bottom: 2.5rem;  font-size: 1.25rem; font-family:'Roboto Regular', 'NotoSans Regular', 'Malgun Gothic', '맑은 고딕', 'Apple SD Gothic Neo', sans-serif;}

/* radio checkbox */
.client input[type="radio"]:not(.def), input[type="checkbox"]:not(.def){position: absolute; top: auto; display: inline-block; opacity: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; z-index: -10;}
.client input[type="radio"]:not(.def):focus+label:before, input[type="checkbox"]:not(.def):focus+label:before {border:2px solid #0063cc; outline:1px dotted #999 !important;}
/* radio */
.client input[type="radio"]:not(.def)+label{position:relative; display: inline-block; margin-left: 2.5rem; padding: 0; cursor: pointer; color:#666; line-height: 1.25em;}
.client input[type="radio"]:not(.def)+label:before{content: ""; position: relative; top: -1px; display: inline-block;width: 1.5rem; height: 1.5rem; margin: 0 0.375rem 0 0; border: 1px solid #999; border-radius: 50%; background-color:#fff; transition: border-color linear 0.5s; vertical-align: middle; box-sizing: border-box;}
.client input[type="radio"]:not(.def):checked:focus+label:before{border:1px solid #0063cc;}
.client input[type="radio"]:not(.def):checked+label:before{border-color:#0667cd; background-color: #0063cc; box-shadow: inset 0 0 0 5px #fff;}
/* checkbox */
.client input[type="checkbox"]:not(.def)+label {position:relative; display: inline-block; margin: 0; padding: 0 0 0 35px; cursor: pointer; font-family:'Roboto Medium', 'NotoSans Medium', 'Malgun Gothic', '맑은 고딕', 'Apple SD Gothic Neo', sans-serif; font-size: 1rem; color:#111; text-decoration: none}
.client input[type="checkbox"]:not(.def)+label:before {content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); display: inline-block;  width: 1.563rem; height: 1.563rem; margin: 0 0.625rem 0 0; border: 1px solid #ccd4d9; border-radius: 50%; background-color:#fff; background: url('../img/common/ico_check_sign_off.png') no-repeat center; background-size: 1.563rem 1.563rem; transition: border-color linear 0.5s; vertical-align: middle; box-sizing: border-box;}
.client input[type="checkbox"]:not(.def):checked+label:before{background-color: #0063cc; background-image: url('../img/common/ico_check_sign_on.png'); border-color: #0063cc;}
.client input[type="checkbox"]:not(.def)+label:after{content: none; display: none;}


/* VCNFLN01N10 	영상통화 안내 & VCNFLN03N10 화면공유 안내 (반응형) */
.client .info{border-top: 2px solid #111;}
.client .info > div {display: table; padding-top: 1.875rem;}
.client .info > div::after{content: '';display: block; clear: both;}
.client .info > div > * {display: table-cell;}
.client .info .inputWrap{border-top: 1px solid #d2d2d2; width: 100%;}
.client .info .signH3{width: 16.875rem; min-width: 16.875rem; margin: 0; color: #224ea8;}
.client .listWrap .signH3{margin-top: 0.563rem;}

.client .infoRight {width: 78%;}
.client .infoRight li{margin-bottom: 1.875rem; font-size: 0;}
.client .infoRight li p{display: inline-block; vertical-align: middle; word-break: keep-all; letter-spacing: 0;}
.client .infoRight input[type="text"],
.client .infoRight input[type="number"],
.client .infoRight input[type="password"],
.client .infoRight input[type="tel"]{width: 268px;}

/* 영상통화 사전안내 */
.client .icoInfo{display: inline-block; width: 3.125rem;height: 3.125rem; margin-right: 1.25rem; background: url('../img/common/ico_call_info_01.png') no-repeat center; background-size: 100%; vertical-align: middle;}
.client .icoInfo.camera{background-image: url('../img/common/ico_call_info_02.png');}
.client .icoInfo.record{background-image: url('../img/common/ico_call_info_03.png');}

/* 화면공유 사전안내 */
.client .listBox {font-size: 0px;}
.client .listBox .listNum {display: inline-block; width: 3.125rem;height: 3.125rem; margin-right: 1.25rem; background-color: #617387;border-radius: 50%; line-height: 3.125rem;font-size: 1rem; color: #fff;vertical-align: middle; text-align: center;}
.client .infoRight .iptGroup {float: right; line-height: 3.125rem; font-size: 0;}
.client .infoRight .iptGroup label {font-size: 1rem; vertical-align: middle;}

/* 인증코드입력 */
.client .infoRight > p{color: #666; margin-bottom: 1rem; letter-spacing: 0;}
.client .infoRight > input{width: 18rem;}

/* 하단 체크 박스 및 버튼 (공통) */
.client .chkWrap {margin-top: 3.125rem;}
.client .grayBox2{padding: 0.781rem; border: 1px solid #e0e0e0; border-radius: 4px;}
.client .cbtnB{margin-top: 3.125rem; font-size: 1.125rem;}
.client .cbtnB:disabled{background-color: #9ab7d7; opacity: 1;}


/* 영상통화 & 화면공유*/
.client .callSystem #content{min-height: auto; background: #222; padding: 0.625rem !important;}
.client .callSystem #content.share{height: calc(100vh - 5rem)}
.client .callSystem #content.call{height: calc(100vh - 8.75rem);}

.client .videoWrap{min-height: auto; border-radius: 10px; overflow: hidden; background: #333; text-align: center;}
.client .share .videoWrap{height: calc(100vh - 6.25rem);}
.client .call .videoWrap{height: calc(100vh - 10rem);} 

.client .videoWrap > video{height: 100%; margin: 0 auto;}
.client .share .videoWrap > video{width: 1470px;} 
.client .call .videoWrap > video{width: 630px; /* 비디오 630 고정 */} 

.client .videoWrap .endBtn {top: 0.625rem;right: 0.625rem; width: 2.5rem; height: 2.5rem; background-size: 1.125rem auto;}
.client .callLabel{top: 0.625rem; left: 0.625rem; width: 4.688rem; padding: 0.188rem 0.625rem 0.188rem 0.813rem; font-size: 0.813rem;}

.client .pauseWrap {display:none; position: absolute; top: 0; left: 0; right:0; bottom: 0; width: 100%; height: 100%; overflow: auto; background: #333; z-index: 9; box-sizing: border-box;}
.client .pauseWrap.active{display: block;}
.client .icoPause {position: absolute; left: 50%; top: 50%; width: 80px; height: 93px; background: url('../img/common/ico_pause.png') no-repeat center; background-size: 80px auto; transform: translate(-50%, -50%); z-index: 11;}

 
/* 연결 대기 */
.client .loadMsg {display: none;} 
.client .loadMsg.active {display: block;}
.client .loadMsg .dim{content: ''; position: fixed; left: 0; right: 0; top: 0; bottom: 0; background: rgba(0,0,0,.7); z-index: 100;}

.client .loadWrap { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100%; text-align: center; word-break: keep-all; z-index: 100;}
.client .loadWrap .loading {position: relative; margin-bottom: 3.75rem; font-size: 0;}
.client .loadWrap .loading::after{content: '';position: absolute; right: 0; top: 0;bottom: 0;background: #fff;}

.client .loadWrap .loading li{display: inline-block; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: #fff; animation: load 2s 0.5s infinite;}
.client .loadWrap .loading li:nth-child(2){animation: load 2s 1s infinite;}
.client .loadWrap .loading li:nth-child(3){animation: load 2s 1.5s infinite;}
.client .loadWrap .loading li:nth-child(4){animation: load 2s 2s infinite;}
@-webkit-keyframes load{0%{opacity: 0;}100%{opacity: 1;}}
@keyframes load{0%{opacity: 0;}100%{opacity: 1;}}

.client .loadWrap .loading li + li{margin-left: 1.063rem;}
.client .loadWrap strong{font-size: 1.375rem; font-family:'Roboto Medium', 'NotoSans Medium', 'Malgun Gothic', '맑은 고딕', 'Apple SD Gothic Neo', sans-serif; color: #fff; line-height: 1;}
.client .loadWrap p{margin-top: 0.625rem; font-size: 1rem; color: #fff; line-height: 1.5rem; word-break: keep-all;}

/* 대기 취소 버튼 */
.client button[class^=btn]{display: inline-block; min-width: 10rem; height: 2.5rem; line-height: 2.5rem; vertical-align: middle; text-align: center; border-radius:4px; font-size: 0.875rem; color:#fff; border: 1px solid #fff;}
.client button[class^=btn][disabled],[class^=btn].disabled {opacity: 0.4; cursor: default;}
.client .call .btnWB{font-size: 1rem; margin-top: 1.563rem;}

/* 대기 취소 확인 팝업 */
.client .alert .popup .popCont{width: 21rem; padding: 3.75rem 1.25rem 1.875rem;}
.client .alert .popup .msg{font-size: 1rem;}
.client .alert .popup .btnArea button{margin-top: 0;}

/* 하단 fixed 메뉴 */
.client .fixedArea{position: fixed; left: 0; right: 0; bottom: 0; background: #fff;}
.client .fixedArea > ul{text-align: center; height: 3.75rem;}
.client .fixedArea .menuBtn{display: inline-block; font-size: 1.125rem;}
.client .fixedArea .menuBtn + .menuBtn {margin-left: 1.25rem;}
.client .fixedArea .menuBtn a {display: block; width: 3.75rem; height: 3.75rem; background: url('../img/common/ico_settings.png'); background-repeat: no-repeat;background-position: center center;background-size: 3.75rem 3.75rem;}

.client .thumbs{position: absolute; left: 50%; bottom: 0.625rem; transform: translateX(-50%); width: 100%; /* text-align: left; */ font-size: 0; z-index: 12;}
.client .thumbs > div{position: relative; display: inline-block; width: 6.563rem; height: 9.375rem; border-radius: 0.625rem; overflow: hidden;}
.client .thumbs > div + div{margin-left: 0.625rem;}
.client .thumbs > div .callLabel{left: 0.313rem; top: 0.313rem;}
.client .thumbs > div video{width: 100%; height: 100%;}


/* (VCNFLN02N30) 설정 팝업 */
.client .setWrap{display: none;}
.client .setWrap.active{display: block;}
.client .setWrap .dim{content: ''; position: fixed; left: 0; right: 0; top: 0; bottom: 0; background: rgba(0,0,0,.7); z-index: 21;}

.client .setArea{position: absolute; left: 50%; bottom: 1.563rem; transform: translateX(-50%); max-width: 20.938rem; width: 100%; /* height: 12.656rem; */ padding: 1.25rem 1.25rem 1.875rem; background: #fff; border: 1px solid #111; border-radius: 10px; z-index: 22;}
.client .setArea h3{font-family:'Roboto Medium', 'NotoSans Medium', 'Malgun Gothic', '맑은 고딕', 'Apple SD Gothic Neo', sans-serif; text-align-last: left; line-height: 1;}
.client .setArea ul{width: 15.938rem; margin: 15px auto 0;/*  padding-bottom: 2.5rem;  */font-size: 0; /* text-align: center; */}
.client .setArea .setList{display: inline-block; margin-top: 23px; text-align: center;}
.client .setArea .setList  {margin-left: 2.344rem;}
.client .setArea .setList:nth-child(3n-2) {margin-left: 0;}
.client .setArea .closeBtn{position: absolute; right: 1rem; top: 1rem; width: 1.25rem; height: 1.25rem; background: url('../img/common/btn_call_close.png') no-repeat; background-size: 1.25rem; background-position: center center; font-size: 0; }

.client .setList a{display: inline-block; height: 100%; font-size: 0;}
.client .setList .setIco{display: block; width: 3.75rem;height: 3.75rem;margin: 0 auto; background: #eee url('../img/common/btn_call_headset2.png') no-repeat; background-size: 100% auto; background-position: center center; border-radius: 50%;}
.client .setList .setIco.headset{background-image: url('../img/common/btn_call_headset2.png');}
.client .setList .setIco.speaker{background-image: url('../img/common/btn_call_speaker.png');}
.client .setList .setIco.bluetooth{background-image: url('../img/common/btn_call_bluetooth.png');}
.client .setList .setIco.default{background-image: url('../img/common/btn_call_default.png');}
.client .setList.on .setIco{background-color: #0063cc;}
.client .setList.on .setIco.headset{background-image: url('../img/common/btn_call_headset2_on.png');}
.client .setList.on .setIco.speaker{background-image: url('../img/common/btn_call_speaker_on.png');}
.client .setList.on .setIco.bluetooth{background-image: url('../img/common/btn_call_bluetooth_on.png');}
.client .setList.on .setIco.default{background-image: url('../img/common/btn_call_default_on.png');}

.client .setList .setTit{display: block; margin-top: 0.813rem; font-size: 0.75rem;}


/* 가로모드 안내 문구 */
.client #content.share > .wrap{position: relative;}
.client .fixedNotice{ display: none; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 25rem; padding: 1rem 2rem; color: #fff; background: #333; border-radius: 9px; text-align: center;}
.client .fixedNotice p{line-height: 1.5rem; word-break: keep-all;}
.client .fixedNotice.active{display: block;}



@media (max-width:1439px){

    /* 안내화면 */
    .client #content.signCon section{width:100%; padding-left: 2.5rem; padding-right: 2.5rem;}
    .client .listWrap .signH3{margin-top: 0.4rem;}
    .client .infoRight {width: 82%;}    
    .client .infoRight input{width: 16.75rem;}
    .client .infoRight .listBox > p {width: calc(100% - 15rem);}

    /* 영상통화 & 화면공유 */
    .client .call .videoWrap > video{width: 416px; /* 비디오 416 고정 */} 
    .client .pause {width: 9.375rem; height: 10.813rem; background-size: 9.375rem auto;}

    /* 가로모드 안내 문구 */
    .client .fixedNotice{width: 23.75rem; padding: 1rem 1.375rem;}

    /* 대기 취소 확인 팝업 */
    .client .alert .popup .popCont{width: 21.875rem;}

}

@media (max-width:1023px){

    /* 공통 */
    .client .moOnly {display: block;}

    .client .logo {line-height: 1.125rem;}
    .client .logo img{width: 8.125rem; height: 1.25rem; margin-right: 0.938rem;}
    .client .logo span{font-size: 0.938rem;}

    .client .areaTop .wrapTop{min-height: 3.75rem; padding: 1.25rem;}
    .client #content.signCon.type2{padding: 2.5rem 0 5.625rem !important;}
    .client #content.signCon section{margin-bottom: 0; padding-left: 1.25rem; padding-right: 1.25rem;}

    .client .signH2{margin-bottom: 0.625rem; font-size: 1.375rem;}
    .client .signH2 + p{margin-bottom: 1.563rem; font-size: 1rem; line-height: 1.5rem;}

    /* 안내화면 */
    .client .info > div {display: block;}
    .client .info > div > * {display: block;}
    .client .info .signH3{font-size: 1.125rem;}

    .client .infoRight {width: 100%;}
    .client .infoRight li{margin: 1.25rem 0 0; font-size: 0;}
    .client .listWrap {padding-bottom: 1.875rem;}
    .client .listWrap .signH3{margin-top: 0;}
    .client .infoRight li p{display: inline-block; font-size: 0.875rem; width: 75%;}
    .client .infoRight > p {margin-top: 0.625rem; font-size: 0.875rem;}
    .client .infoRight input[type="text"],
    .client .infoRight input[type="number"],
    .client .infoRight input[type="password"],
    .client .infoRight input[type="tel"]{width: 100%;}
    .client .infoRight .listBox > p {width: 75%;}
    
    .client .grayBox2{padding: 1.188rem 0.938rem !important;}
    .client .infoRight .iptGroup {float: none; display: block; margin-top: 0.938rem; margin-left: 4.375rem; line-height: 1;}

    .client .chkWrap{margin-top: 1.875rem;}
    .client .grayBox2 input[type="checkbox"]:not(.def)+label{padding-left: 2rem; font-size: 0.875rem; line-height: 1.188rem; vertical-align: middle;}
    .client .grayBox2 input[type="checkbox"]:not(.def)+label::before{position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1.563rem;height: 1.563rem;margin-right: 0; background-size:100%; border-width: 1px;}
    
    .client .cbtnB.moFixed{display: block; position: fixed; left: 0; right: 0; bottom: 0; min-width: auto; width: 100%; height: 3.125rem; border-radius: 0;}
    .client [class^=cbtn]{font-size: 1rem;}

    /* 영상통화 & 화면공유 */
    /* .client header [class^=wrap]{margin: 0 1.25rem;} */
    .client .wrapTop{min-height: 3.75rem; padding: 1.25rem 0;}
    .client .logo{line-height: 1.25rem;}
    .client .logo img{width: 8.125rem;height: 1.25rem;margin-right: 0.938rem;margin-bottom: 0;}
    .client .logo span{font-size: 1rem;}

    .client .callSystem #content.share{min-height: calc(100vh - 3.75rem)} 
    .client .callSystem #content.call{height: calc(100vh - 7.5rem);} 
    
    .client .share .videoWrap{height: calc(100vh - 5rem);}
    .client .call .videoWrap{height: calc(100vh - 8.75rem);}

    .client .share .videoWrap > video{position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); width: 100%; height: auto;}
    .client .call .videoWrap > video{width: 100%; margin: 0; /* 비디오 100% */} 

    /* 가로모드 안내 문구 */
    .client .fixedNotice{width: 20.938rem;}
    .client .fixedNotice p{font-size: 0.875rem;}

}


@media screen and (min-width:320px) and (max-width:374px){
    .client .thumbs{width:100%; /* padding-left:0.625rem; */} 
    .client .thumbs > div{width: calc(100% / 3 - 0.625rem);}
    .client .thumbs > div + div{margin-left: 0.625rem;}

    .client .setArea{width: calc(100% - 2.5rem);}
    .client .setArea .setList + .setList{margin-left: 1.8rem;}

    /* 대기 취소 확인 팝업 */
    .client .alert .popup .popCont{width: calc(100% - 2.5rem); padding-left:0; padding-right: 0;}

    /* 가로모드 안내 문구 */
    .client .fixedNotice{width: calc(100% - 1.25rem);}
    .client .fixedNotice p br{display: none;}
}

@media (max-width:320px){
    body.client {width: 320px;}
}