/* 2022-08-18 */
@charset "utf-8";
:root {
--font-pretendard: "Pretendard JP Variable", "Pretendard JP", 'Pretendard', '-apple-system', 'BlinkMacSystemFont', system-ui, 'Roboto', "Helvetica Neue", "Segoe UI", "Hiragino Sans", "Apple SD Gothic Neo", Meiryo, "Noto Sans JP", "Noto Sans KR", "Malgun Gothic", Osaka, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
--font-pretendard-settings: 'case', 'calt', 'cv02', 'cv03', 'cv04', 'cv05', 'ss03', 'ss05', 'ss06';
--font-pixel: '맑ì€ê³ 딕','Malgun Gothic','malgungothic','Apple SD Gothic Neo','ë‹ì›€','Dotum', sans-serif;
}
*,
*::before,
*::after {
box-sizing: border-box;
font-synthesis: none;
}
html, body {
font-synthesis: none;
}
.point_color {
color: #ed5c23 !important;
}
.font_500 {
font-weight: 500 !important;
}
.font_600 {
font-weight: 600 !important;
}
.font_700 {
font-weight: 700 !important;
}
button[type=button],
button[type=button]:focus{border: none; outline: none;}
html,body{min-height: 100%;}
.inner{width:100%; max-width: 1050px; margin:0 auto;}
.inner::after {content: ""; display: block; clear: both; visibility: hidden; font-size: 0; height: 0;}
.clearfix:after {content: ""; display: block; clear: both; visibility: hidden; font-size: 0; height: 0;}
video{
transform: rotateY(180deg);
-webkit-transform:rotateY(180deg); /* Safari and Chrome */
-moz-transform:rotateY(180deg); /* Firefox */
}
header.sticky-pin,
header.sticky-ibt-pin{position: fixed; top: 0; z-index:999;}
header > .notice{display: none;}
@media screen and (max-width:1100px){
.inner{width: 95%;}
}
.mg-top50{margin-top:50px !important;}
.mg-bottom50{margin-bottom:50px !important;}
.mg-left50{margin-left:50px !important;}
.mg-right50{margin-right:50px !important;}
.display-flex{
display: -webkit-flex;
display: flex;
}
.justify-start{
-ms-flex-pack: start !important;
justify-content: flex-start !important;
}
.test_vod_webRTC *{
box-sizing: border-box;
font-family: var(--font-pretendard);
word-break: keep-all;
/* text-align: justify; */
text-rendering: auto;
-webkit-font-smoothing: antialiased;
/* font-feature-settings: 'ss03', 'ss05', 'case', 'calt', 'tnum', 'ss06'; */
font-feature-settings: var(--font-pretendard-settings);
}
.test_vod_webRTC{
position:relative; background-color: #fff; min-height: calc(100vh - 33px);
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
.test_vod_webRTC img{max-width: 100%; vertical-align: middle;}
.test_vod_webRTC button{
-moz-appearance:none; /* Firefox */
-webkit-appearance:none; /* Safari and Chrome */
appearance:none; outline: none;
}
.test_vod_webRTC .box_ab50{
position: absolute; top:50%; left:50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: max-content;
max-width: 100%;
}
/* 충ëŒë‚˜ëŠ” css ìž¬ì •ì˜ */
.test_vod_webRTC .page-content{
max-width: 100% !important;
padding:0 35px !important;
/* padding:0 !important; */
}
/*
.test_vod_webRTC .page-content::after{content: ''; display: block; height: 60px;}
.test_vod_webRTC .survey-answer-wrap .page-content ~ .btn_area{transform: translateY(-60px); height: 0;}
*/
.test_vod_webRTC .survey-answer-wrap{
/* min-height: 100vh; */
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
.test_vod_webRTC .survey-answer-wrap.attibt{background-color: #ededed;}
.survey-answer-wrap .ibt_page_title{padding: 0 35px;}
.survey-answer-wrap #app{
position: relative;
flex: 1;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
}
.ss12{font-feature-settings: 'ss12';}
.colon {font-feature-settings: 'ss03'; margin: auto 1px; font-size:inherit; color:inherit; font-weight: inherit;}
.no_tnum{font-feature-settings: 'tnum', 'ss01', 'ss02', 'ss03', 'ss05';}
.test_vod_webRTC header{padding-left:0; padding-right:0; width: 100%;}
.test_vod_webRTC header .notice{display: none;}
.test_vod_webRTC main{padding:50px 0 70px; flex:1;position: relative; min-height:300px;}
.test_vod_webRTC main > section{margin-bottom: 50px;}
.test_vod_webRTC main > section.btn_area{margin-bottom: 0;}
.test_vod_webRTC main > section:last-child{margin-bottom:0;}
.test_vod_webRTC main > section > .items{padding: 2rem;margin:10px 0;/* margin-bottom: 0; */border-radius: 15px;}
.test_vod_webRTC main > section > .items > h1.items_title{font-size:160%;font-weight: 800;color: #222;margin-bottom: 1.5rem;}
.test_vod_webRTC footer{width:100%; background-color: #EEE; text-align: center; padding: 7px;}
.test_vod_webRTC footer a{font-size:12px; color: #999;}
.test_vod_webRTC footer a:hover{color:#222;}
.test_vod_webRTC.footer_fix footer{position:fixed; bottom:0px;}
section.notice{width: 100%;background-color: #333;text-align: center; padding:12px 0;color: #fff;font-size: small;}
section.progress{width: 100%; height:auto;background-color: #ed5c23;border-radius: 0;padding:20px; z-index:10;}
section.progress .progressbar{
position:relative; z-index: 1; width: 100%; max-width: 750px; margin:0 auto;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
}
section.progress .progressbar::after {content: ""; display: block; clear: both; visibility: hidden; font-size: 0; height: 0;}
section.progress .progressbar > li{
position: relative;text-align: center; color:rgba(255,255,255,0.4);
flex:1;
/* float: left;width: 25%; */
}
section.progress .progressbar > li:before{
content: ""; display: block; width: 15px; height: 15px; margin: 0 auto 7px;
text-align: center;
background-color: #ed5c23; border: 3px solid rgba(255,255,255,0.4);
border-radius: 50%; box-sizing: border-box;
}
section.progress .progressbar > li:after{
content: ''; position: absolute; left: -50%; top: 6px; z-index: -1;
width:100%; height: 3px; background: rgba(255,255,255,0.3);
}
section.progress .progressbar > li:first-child:after{content: none;}
section.progress .progressbar > li.active{color: rgba(255,255,255,1);}
section.progress .progressbar > li.active::after{background: rgba(255,255,255,1);}
section.progress .progressbar > li.active::before{border-color: rgba(255,255,255,1);background: #222;}
/* 페ì´ì§€ 프로세스 스í¬ë¡¤ 변화 */
section.progress {
/* transition: ease .3s; */
transition-property: height, padding;
transition-duration: .3s, .3s;
transition-timing-function: ease;
}
.sticky-pin section.progress,
.sticky-ibt-pin section.progress{padding-top:10px; padding-bottom: 10px;}
.sticky-pin section.progress .progressbar > li,
.sticky-ibt-pin section.progress .progressbar > li{font-size:12px;}
.sticky-pin section.progress .progressbar > li:before,
.sticky-ibt-pin section.progress .progressbar > li:before{width: 10px; height: 10px; background-color: #f49d7b; border-width: 0;}
.sticky-pin section.progress .progressbar > li:after,
.sticky-ibt-pin section.progress .progressbar > li:after{top:4px;}
.sticky-pin section.progress .progressbar > li.active::before,
.sticky-ibt-pin section.progress .progressbar > li.active::before{background-color: #fff;}
/* 시험 타ì´í‹€ */
section.test_title{text-align: center;}
section.test_title h1{display: block;color: #222;font-size: 2.5em;font-weight: 900;line-height: 140%; max-width:100%; margin-left: auto; margin-right: auto;}
section.test_title h1 i.fa-spinner{display: block;/* margin-bottom:.5rem; */font-size: 1.25em;color: #ed5c23;}
section.test_title h2{display: block; color: #ed5c23; font-size: 1.4em; font-weight: 700; margin-top: 10px; letter-spacing: -.5px;}
section.test_title h2 .box_txt{
display: block; font-size: medium; color:#777; margin:10px 0; line-height: 140%;
}
section.test_title h2 > span.time{
display: inline-block; padding:5px 5px 4px; margin-left: 5px; background-color: #ed5c23;
color: #fff; font-size: 0.78em; font-weight: 700; letter-spacing: .25px;
border-radius: 5px; vertical-align: 2px;
}
section.test_title h3{display: block;font-size: 110%;color: #555;line-height: 1.25em;margin-top: 10px;}
section.test_title .guide{
margin: 20px auto; padding:20px; width:80%; max-width: 500px;
border: 1px solid #DDD; border-radius: 15px;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
section.test_title .guide > li strong{color:#ed5c23; font-weight: 600;}
section.test_title .guide > li::after{content: "\007c"; font-size: 90%; color: #ddd; margin:0 10px;} /* content: "|"; */
section.test_title .guide > li:last-child::after{display: none;}
/* section.test_title + div{overflow-y: auto;} */
/* 주ì˜ì‚¬í• */
section.precaution{}
section.confirm + section.precaution{margin-top: -15px;}
section.precaution .precaution_title{margin: 30px 0;text-align: center;}
section.precaution .precaution_title p{
display: inline-block;
padding-bottom: 5px;
border-bottom: 2px solid #222;
font-size: 1.4em;
font-weight: 800;
color: #222;
}
section.precaution .precaution_box{background-color: #F5F5F5;}
section.precaution .precaution_box dl{/* margin-top:20px; */}
section.precaution .precaution_box dl dt{font-size: 1.1em;font-weight: 800; color:#222;margin: 20px 0 10px 0;}
section.precaution .precaution_box dl dt:first-child{margin-top:0;}
section.precaution .precaution_box dl dt::before{font: var(--fa-font-solid); content: "\f058"; font-size: 14px; color:#ed5c23; margin-right:6px;}
section.precaution .precaution_box dl dt strong{color: #ed5c23;}
section.precaution .precaution_box dl dd{margin: 5px 0 5px 20px;color:#555;line-height: 1.25em; width:100%; padding:0; border: 0;}
section.precaution .precaution_box dl dd:last-child{margin-bottom: 0;}
section.precaution .precaution_box .num_circle{color: #333; font-size:130%;vertical-align: -2px;font-weight: 500;}
section.precaution .browser_guide{
margin-top: 15px;
}
section.precaution .browser_guide > span{display: block; margin:7px 0;}
section.precaution .browser_guide > span strong{color:#222; font-weight: 700;}
section.precaution .browser_guide > span > i{font-size: 82%; vertical-align: 1px; color:#999; margin-right:3px;}
section.precaution .browser_guide > span > i.broswer_i{font-size:100%; color:#555; vertical-align: 0; margin:0 3px;}
section.precaution .browser_guide > span > i.ico_firefox_notification{
display:inline-block; width:15px; height:13px; vertical-align: -2px; margin-left:3px;
background-image: url(/img/att/webRTC/svg/ico_firefox_notification.svg); background-size: cover;
}
/* 시험ë™ì˜ */
section.precaution.precaution_agreement ul{margin-top:10px;}
section.precaution.precaution_agreement ul li{margin-bottom:10px;}
section.precaution.precaution_agreement .notice{margin-top:20px; font-size:1.1em; color:#222; line-height: 200%; }
section.precaution.precaution_agreement .notice strong{display: block;}
section.precaution.precaution_agreement .form_area{margin-top:30px; text-align: center;}
section.precaution.precaution_agreement .form_area input[type='checkbox']{border: 1px solid #222;width: 16px;height: 16px;vertical-align: -3px;margin-right: 5px;}
section.precaution.precaution_agreement .form_area label{font-size:1.1em; color:#222; font-weight: 700; cursor: pointer;}
/* 하누리 시험ë™ì˜ */
section.precaution.precaution_agreement .test_guide_agree p {
margin: 0;
line-height: 150%;
}
/* í•¸ë“œí° ì—°ê²°ì•ˆë‚´ */
section.precaution.connect_guide{}
section.precaution.connect_guide .items{background-color: #F5F5F5;}
section.precaution.connect_guide .box,
section.precaution.connect_guide .box > div{
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
align-content: flex-start;
}
section.precaution.connect_guide .box{margin-top:20px;}
section.precaution.connect_guide .box > h3{width:100%;font-size: 1.1em;font-weight: 700;color: #222;margin: 5px 0;}
section.precaution.connect_guide .box > h3::before {font: var(--fa-font-solid); content: "\f058";font-size: 14px; color: #ed5c23; margin-right: 6px;}
section.precaution.connect_guide .box > div{width: 50%;padding:10px 20px;}
section.precaution.connect_guide .box dl{}
section.precaution.connect_guide .box dt{position:relative; padding-left:10px; font-size:110%; color:#222;font-weight: 500;margin-bottom: 5px;line-height: 140%;}
section.precaution.connect_guide .box dt::before{
content:
"";
position: absolute;
top: 8px; left:0;
width: 4px;
height: 4px; background:#ed5c23;
border-radius: 5pt;
/* -webkit-transform: translate(100px, 50px);
-ms-transform: translate(0, -50%);
transform: translate(0, -50%); */
}
section.precaution.connect_guide .box dd{padding-left:9px; font-size:1em; margin:3px 0;font-size:1em;}
section.precaution.connect_guide .box dd i{font-style: normal; font-size:1.25em; font-weight:400; vertical-align: -.07em; margin-right:3px;}
section.precaution.connect_guide .box .img_qrcode{width: 90px; margin-left:3em;}
section.precaution.connect_guide .box .img_connect{padding-left:29px;}
section.precaution.connect_guide .box .send_url a{font-weight:600; color: var(--blue); text-decoration:underline;}
section.precaution.connect_guide .box .send_input{
margin-top:7px; margin-left:-3px;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
section.precaution.connect_guide .box .send_input input{
width: 70%; max-width: 250px; min-height: 40px; text-align: left; font-size: inherit;
border: 1px solid #ddd; border-radius: 5px; outline: none; text-indent: 10px;
}
section.precaution.connect_guide .box .send_input input::placeholder{color: #888; font-size: small;}
section.precaution.connect_guide .box .send_input input:focus {
border: 1px solid #222; border-bottom:1px solid #222;
box-shadow: none;
}
section.precaution.connect_guide .box .send_input button{margin-left:5px;min-height: 40px;min-width: 90px;}
@media screen and (max-width:920px){
section.precaution.connect_guide .box{
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
section.precaution.connect_guide .box > div{width: 100%;}
}
/* ì‹ ë¶„ì¦ ì´¬ì˜ ê°€ì´ë“œ */
section.precaution.photoshoot_guide .items{}
section.precaution.photoshoot_guide .box{/* margin-top:0; */}
section.precaution.photoshoot_guide .box > div{width: 100%;}
section.precaution.photoshoot_guide .box dt{font-size: 100%; margin-bottom:0;}
section.precaution.photoshoot_guide .box dt::before{width:4px; height:4px; top:7px;}
section.precaution.photoshoot_guide .box_img{padding-left:20px;}
section.precaution.photoshoot_guide .box_img img{max-width:250px;}
/* QR코드 ì ‘ì†ì‹œ ëª¨ë°”ì¼ í™”ë©´ */
.connect_mobile > .inner{
padding:0 10vw;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}
.connect_mobile section{padding: 3vh 0;}
.connect_mobile .logo{width:100%; max-width:165px; margin:0 auto;}
.connect_mobile .logo img{}
.connect_mobile .txt{font-size:1.17em; line-height: 130%; color:#222; text-align:center; margin:5vh 0;}
.connect_mobile .btn{width:100%;}
.connect_mobile.camera{position: relative;}
.connect_mobile.camera video{position:absolute; top:0; left:0; width:100%; height:100%; background-color:rgba(0,0,0,0.5);}
.connect_mobile.camera .camera-connected{
position:absolute; z-index:10; margin:1em; background-color:rgba(0,0,0,0.7); padding:0.5em 1em;
color:#fff; font-size:120%; border-radius:5px;
}
.connect_mobile.camera .camera-connected i{margin-right:5px;}
/* ì‹ ë¶„ì¦ ì´¬ì˜ íŽ˜ì´ì§€ ë‚´ */
.id_photoshoot{margin:0 auto; max-width:760px; margin-top: -20px; margin-bottom: 50px;}
.id_photoshoot .photoshoot_area{text-align:center;}
.id_photoshoot .photoshoot_area .cam_change{text-align: right; margin-bottom:.75em;}
.id_photoshoot .photoshoot_area .cam_change select{
display: inline-block; position: relative; z-index: 100;
border:1px solid #ddd; font-size:1em !important; padding:5px; color:#333;
}
.id_photoshoot .photoshoot_area .shooting_area{
position: relative; height: 0;
padding-bottom: 56.25%; /* 16:9 */
}
.id_photoshoot .photoshoot_area .shooting_area .box{background-color: #111; position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.id_photoshoot .btn_area{text-align: center;}
.video_auto_height{
max-width: 100%;
position: absolute;
top: 50%;
left: 50%;
width: auto;
max-height: 100%;
transform: translate(-50%, -50%) rotateY(0deg);
}
/* ì›¹ìº ì„ íƒ íŽ˜ì´ì§€ ë‚´ */
.webcam_choice{margin-bottom:50px;}
.webcam_choice .webcam_list{
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}
.webcam_choice .webcam_list li{margin:1em;}
.webcam_choice .txt_guide{text-align:center; margin-top:2em; color:#222; font-weight:600;}
.webcam_choice .txt_guide i{color:#ed5c23;}
.webcam_choice .txt_guide button{display: inline-block; margin:auto 5px; min-width:70px;}
/* 스피커 ì²´í¬ */
.speaker_check{text-align: center;}
.speaker_check .check_form{max-width: 500px; margin:0 auto; color:#222; text-align: center;
}
.speaker_check .check_form_select{margin:3em 0; border: 1px solid #ddd; border-radius:15px; padding:2em;}
.speaker_check .check_form_select h1{display:block; font-weight:600; color:#ed5c23; margin-bottom: 1em;}
.speaker_check .check_form_select label{cursor: pointer; font-size:1.5em; margin:0 1em; font-weight:600;}
.speaker_check .check_form_select input[type=radio]{width:18px; height: 18px; margin-right:5px; cursor: pointer; vertical-align: -3px; color:#222;}
.speaker_check .check_form_result{text-align: left;}
.speaker_check .check_form_result h1{display: block; font-size: 1.1em; font-weight: 700; color:#222;}
.speaker_check .check_form_result h1::before{font: var(--fa-font-solid); content: "\f058"; font-size: 14px; color: #ed5c23; margin-right: 6px;}
.speaker_check .check_form_result ul{padding-left:18px;}
.speaker_check .check_form_result li{position:relative; padding:10px 0 0 10px;}
.speaker_check .check_form_result li::before{position:absolute; left:0; top:0; content: "\00b7"; font-size:30px; } /* content: "·"; */
.speaker_check_btn{background:#e9e9e9; border-radius: 10px; width: 150px; height: 150px; color:#222;}
.speaker_check_btn:active{transform: translate(1px, 1px);}
.speaker_check_btn i{display:block; font-size: 4em; margin-bottom:10px;}
.speaker_check_btn span{display:block; font-size: 1.75em; font-weight: 600;}
/* í™”ë©´íšŒì „ ê³ ì • */
.mobile-rotate{
touch-action: none;
transform: rotate(90deg) translateY(-100%);
transform-origin: top left;
min-width: 100vh; width: 100vh;
min-height: 100vw; height: 100vw;
}
.mobile-rotate .test_vod_webRTC{
min-width: 100vh;
min-height: 100vw;
}
.mobile-rotate .inner{width:100%;}
.mobile-rotate .connect_mobile section{width:300px; max-width:80%; padding:0;}
.mobile-rotate .connect_mobile .logo{margin: 0 auto;}
.mobile-rotate .connect_mobile .txt{margin:3vh 0;}
.mobile-rotate .connect_mobile .btn{min-width:100%;}
.mobile-rotate .connect_mobile.camera video{
width: 100vw; height: 100vh;
transform: rotate(90deg) translateY(calc((100vw/2) - (100vh/2))) translateX(calc(50vw - 50vh)) scaleY(-1);
object-fit: fill;
}
.mobile-rotate .connect_mobile.camera video.upside-down{
transform: rotate(-90deg) translateY(10%) translateX(33.5%) !important;
}
.mobile-rotate .connect_mobile.camera video.portrait{
width: 100vh; height: 100vw;
transform: rotate(0deg);
}
/* 시험 ì •ë³´ */
section.test_info{margin-bottom:30px !important;}
section.test_info .items{border: 2px solid #222;}
section.test_info .text_info_box{}
section.test_info .text_info_box > li{
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
font-size: 1.1em; padding-bottom: 15px;
}
section.test_info .text_info_box .th{width:110px; color: #888;}
section.test_info .text_info_box .td{flex:1; color: #222; font-weight: 700;}
/* ì‘ì‹œìž ì¸ì¦ */
section.confirm .items{border: 2px solid #ed5c23;}
section.confirm .confirm_form li{
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
font-size: 1.1em; padding-bottom:10px;
}
section.confirm .confirm_form li:last-child{padding-bottom:0;}
section.confirm .confirm_form .th{min-width:120px; width: 22%; color: #222; font-weight: 600;}
section.confirm .confirm_form .td{flex:1;}
section.confirm .confirm_form input{
width:100%; max-width:250px; min-height:40px;
text-align: left;
padding: 5px;
border: 1px solid #ddd;
border-radius: 5px;
outline: none;
font-size: inherit;
}
section.confirm .confirm_form input:focus {
border: 1px solid #222; border-bottom:1px solid #222;
box-shadow: none;
}
/* ì‘ì‹œìž í™”ë©´ê³µìœ */
section.sharing{}
.btn_area.sharing_screen{margin-top:3em; text-align: center; position: relative; z-index: 1;}
.btn_area.sharing_screen .btn{width:80%; max-width:380px; font-weight: 600;}
.sharing_notice_1{}
.sharing_notice_1 h3{display: block; margin:5px 0; color:#ee0000; font-size:110%; font-weight: 600; margin-bottom:15px;}
.sharing_notice_1 {}
.sharing_notice_1 li{padding-left:10px;}
.sharing_notice_1 li strong{position: relative; display: block; color: #000; margin-bottom:5px; font-size:110%;}
.sharing_notice_1 li strong::before{
content:""; display:inline-block; position: absolute; top:50%; left:-10px;
width:4px; height:4px; background-color: #000; border-radius: 10px; margin-top:-1px;
-webkit-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
transform: translate(0, -50%);
}
.sharing_notice_2{margin-top:0 !important;}
.sharing_notice_2 li{position: relative; display: block; padding-left: 19px;;}
.sharing_notice_2 li::before{
content:""; display:inline-block; position: absolute; top:5px; left:6px;
width:5px; height:5px; background-color: #000; border-radius: 10px;
}
.btn_sharing_guide{position: absolute; top:80px; right: 2em;}
/* 페ì´ì§€ 버튼ì˜ì— */
section.btn_area{text-align: center;}
section.btn_area a, section .btn_area a,
section.btn_area button, section .btn_area button{margin:0 3px;}
/* Box ì•ŒëžŒì„¤ì • */
.notification_box{
padding:15px 30px; margin: 10px 0; border: 1px solid #FFDDD0; background-color: #FFF3EF; border-radius: 15px;
font-size: 1.1em; color: #ed5c23; font-weight: 800 !important;
}
.notification_box:empty{display: none;}
.notification_box.inbox{}
.notification_box i{margin-right: 5px; font-size: 14px;}
/* ì•„ì´ì½˜ ê´€ë ¨ */
i.ico_numbering{position:relative; display:inline-block; width: 14px; height: 14px; top: 2px; background-color: #ed5c23; border-radius: 50pt; margin-right: 5px;}
i.ico_numbering > span{
position: absolute;top: 50%;left: 50%; width:100%;margin-top: 1px; margin-left:0.25px;font-size: 11px;color:#fff;text-align: center;font-style: normal;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
i.ico_numbering.dark{background:#222;}
i.ico_numbering.white{background:#fff; border: 1px solid #555;}
i.ico_numbering.white > span{color:#555;}
/* 모달 ê´€ë ¨ */
.modal-header button{margin-left:5px;}
.modal-header .minimize{opacity: .8;}
.modal-header .minimize span{font-size: 0;}
.modal-header .minimize span::before{
content: "\f056";
font: var(--fa-font-solid);
color: #000;
font-size: 1.3rem;
}
.modal-open .sticky-pin,
.modal-open .sticky-ibt-pin{width: calc(100% - 17px);}
.modal-backdrop-transparent{background-color:rgba(0,0,0,0) !important; opacity: 0 !important; }
.modal-content .modal-footer{}
.modal-content .modal-footer.modal-footer-center{
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}
.modal-content .modal-footer.modal-footer-leftright{
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
}
.modal-content .modal-footer.modal-footer-leftright .left_area{flex:1; color:#333;}
.modal_alert .modal-header.title-empty{background:#fff;}
.modal_alert .modal-title{color: #222; font-weight: 700; font-size: 1em; flex: 1;}
.modal_alert .modal-title .nowntest_logo{width:auto; height:18px; vertical-align: -4px;}
.modal_alert .modal-body i.fa-icon,
.modal_alert .modal-body i.fa-triangle-exclamation{display:block; color:#ed5c23; font-size: 3em; margin-bottom: 20px;}
.modal_alert .modal-body h3,
.modal_alert .modal-body span{display:block; line-height:1.35; color: #000; max-width:90%; margin-left:auto !important; margin-right:auto !important;}
.modal_alert .modal-body .txt_strong{font-size:130%; font-weight: 700; margin:1rem 0;}
.modal_alert .modal-body .txt_small{font-size:90%;}
.modal_alert .modal-body .txt_bgcolor{ background:#F5F5F5; color:#000; padding: 1rem; border-radius: 0.3rem; margin:1rem auto;}
.modal_alert .modal-body .txt_bgcolor hr{display: block !important; margin:10px 0; opacity: 0.25;}
.modal_alert .modal-body .list-style-1{display:inline-block;}
.modal_alert .modal-body .list-style-1 li{position:relative; text-align:left; margin:5px 0;}
.modal_alert .modal-body .list-style-1 li:before{content:"\00b7"; position: absolute; left:-7px; font-weight:900;} /* content:"·"; */
.modal_alert.toft{z-index: 10001; position: relative;}
.modal_alert.toft > .modal{background-color: rgba(0,0,0,0.5) !important;;}
.modal_alert .modal-header{
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
.modal_popup_basic .modal-header.title-empty{background:#fff;}
.modal_popup_basic .modal-title .nowntest_logo{width:auto; height:18px; vertical-align: -4px;}
.modal_popup_basic .modal-body i.modal-icon-1{display:block; color:#ed5c23; font-size: 3em; margin-bottom: 20px;}
.modal_popup_basic .modal-body i.fa-triangle-exclamation{display:block; color:#ed5c23; font-size: 3em; margin-bottom: 20px;}
.modal_popup_basic .modal-body span{display:block; line-height:1.25;}
.modal_popup_basic .modal-body .txt_strong{font-size:130%; color: #000; font-weight: 700; margin:1rem 0;}
.modal_popup_basic .modal-body .txt_small{font-size:90%;}
.modal_popup_basic .modal-body .txt_bgcolor{background: #F5F5F5; color: #000; padding: 1rem; border-radius: 0.3rem; margin: 1rem auto; }
.modal_popup_basic .modal-body .txt_bgcolor hr {border-top:1px solid #ddd; margin: 10px 0; }
.modal_popup_basic .modal-body dl{}
.modal_popup_basic .modal-body dt{color:#222; font-weight: 700; margin:5px 0;}
.modal_popup_basic .modal-body hr{display:block; border: 0; background:#eee; width:100%;}
.modal_popup_basic .modal-body .bgcolor_on{
background:#f7f7f7; border-radius: .3em; padding:1em;}
.modal_guidebox{}
.modal_guidebox dl dt{font-size:1.1em; color:#222; font-weight: 700; margin-bottom:5px; margin-top:25px;}
.modal_guidebox dl dt:first-child{margin-top:0;}
.modal_guidebox dl dt i{margin-right:3px;}
.modal_guidebox dl dd{position: relative; padding-top:0px; padding-left: 10px; line-height: 140%;}
.modal_guidebox dl dd::before{content: "\002d"; position:absolute;top: 0px; left:0; font-weight:300;color: #555;} /* content: "-"; */
.modal_sharing_error,
.modal_network_error{position:absolute; z-index:999999999 !important;}
.modal_sharing_error .modal-body{text-align: center;}
.modal_sharing_error .modal-body i{color:#ed5c23; font-size: 3em; margin-bottom: 10px;}
.modal_sharing_error .modal-body span{display: block; font-size: 120%; line-height: 150%; color:#555;}
.modal_sharing_error .modal-body span strong{color: #000; font-weight: 700;}
.modal_network_error .modal-header{background:#fff;}
.modal_network_error .modal-body{text-align: center; margin-top:-20px;}
.modal_network_error .modal-body i{color:#ed5c23; font-size: 3em; margin-bottom: 10px;}
.modal_network_error .modal-body span{display: block; font-size: 100%; line-height: 130%; color:#555;}
.modal_network_error .modal-body span strong{display: block; color: #000; font-weight: 700; font-size:1.5em; margin-bottom:10px;}
.modal_network_error .modal-body dl{margin-top:20px;}
.modal_network_error .modal-body dt{color:#222; font-weight: 700; font-size:110%; margin:5px 0;}
.modal_network_error .modal-body dd{display:block; margin:3px 0;}
.modal_network_error .modal-footer{
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}
.modal_photoshoot{}
.modal_photoshoot .modal-header{/* background-color: transparent; */}
.modal_photoshoot .modal-body .items{background-color: #fff !important; margin-top:-20px; border-bottom: 1px solid #ddd;}
.modal_photoshoot .modal-body .box > h3{font-size:100% !important;}
.modal_photoshoot .modal-body .box > div{padding-top:1px !important;}
.modal_photoshoot .modal-body .box dt{font-size: .875em !important; font-weight: 400 !important;}
.modal_photoshoot .photoshoot_area{text-align:center;}
.modal_photoshoot .photoshoot_area .shooting_area{
position: relative;
}
.modal_photoshoot .photoshoot_area .shooting_area .box{background-color: #111; position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.modal_photoshoot .photoshoot_area .shooting_area video{background-color: #111; width:100%; max-height: 425px;}
.modal_photoshoot .photoshoot_area .btn_area{margin:10px 0;}
.modal_browser_guide{text-align: left;}
.modal_browser_guide dl{padding:5px;}
.modal_browser_guide dl dt{position: relative; margin: 5px 0; font-weight: bold;}
.modal_browser_guide dl dt:before {content: "\00b7"; position: absolute; left: -7px; font-weight: 900;} /* content: "·"; */
.modal_browser_guide dl dd{font-weight: 400; color:#333; line-height: 1.3; margin-bottom:15px;}
.modal_browser_guide dl dd i {font-size: 82%; vertical-align: 1px; color: #999; margin-right: 3px;}
.modal_browser_guide dl dd i.broswer_i {font-size: 100%; color: #555; vertical-align: 0; margin: 0 3px;}
.modal_browser_guide dl dd:last-child{margin-bottom: 0;}
.modal_message .modal-content{
border:1px solid #ddd !important; border-radius: 5px !important;
box-shadow: 0 3px 3px 0px rgba(0,0,0,0.05);
}
.modal_message .modal-header{padding:.75rem 1rem .5rem}
.modal_message .modal-title{color:#ED5C23; font-weight: 700; font-size:1em;}
.modal_message .modal-title .date{font-size:.875em; color:#777; margin-left:10px}
.modal_message .modal-body{padding: 1.5em 1rem !important; color:#222;}
.modal_message .modal-body, .modal_message .modal-body span, .modal_message .modal-body strong{line-height: 1.3em;}
.modal_message .modal-footer{padding-top: 0.25em; padding-bottom:0.25em; border-top:1px solid #eee;}
/* 메세지 작성 */
#modal_messege_reply .modal-body{padding:10px !important;}
.modal_message .msg_list{height:120px; overflow-y: scroll; padding-right:5px; border:0px solid #ddd;}
.modal_message .msg_list li{margin:0.5em 0;}
.modal_message .msg_list .box{
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start; border:0 !important;
}
.modal_message .msg_list li:hover,
.modal_message .msg_list .box:hover{border: 0 !important;}
.modal_message .msg_list .box > div{padding:0 3px; line-height: 130%;}
.modal_message .msg_list .box .msg_write{padding-left:0; color:#2952ae; font-size:0.82em;}
.modal_message .msg_list .box .msg_write.super{color:#dc3545; }
.modal_message .msg_list .box .msg_time{color:#777; font-size:xx-small; padding-top:1px;}
.modal_message .msg_list .box .msg_txt{padding-right:0; font-size:0.9em;}
.modal_message .msg_input{position:relative; background-color:#FFF3EF;}
.modal_message .msg_input textarea{width:100%; min-height:70px; color:#333; font-size:0.9em; border: 0;}
.modal_message .msg_input textarea:focus{border: 0; box-shadow:none !important;}
.modal_message .msg_input textarea::placeholder {color: #ccc; font-weight: 300;}
.modal_message .msg_input .txt_cut{position: absolute; right:10px; bottom:3px; font-size:xx-small; color:#666;}
/* ì†ë“¤ê¸° */
.fix-handsup{position: fixed; left:2vw; width: 140px;}
.fix-handsup .tip_txt{
border:1px solid #ddd; background:#fff; border-radius: .375rem;
position: absolute; top: -3.5rem; left: 0px; width:140px; padding:.25rem;
}
.fix-handsup .tip_txt span{font-size: 12px;letter-spacing: -.75px;font-weight: 400;}
.fix-handsup .tip_txt .arrow{
position: absolute; left:50%;
display: block; width: 1rem; height: 0.5rem;
bottom: calc((0.5rem + 1px) * -1);
-webkit-transform: translate(-50%, 0);
-ms-transform: translate(-50%, 0);
transform: translate(-50%, 0);
}
.fix-handsup .tip_txt .arrow::before,
.fix-handsup .tip_txt .arrow::after{content: ""; display: block; position: absolute; border-color: transparent; border-style: solid;}
.fix-handsup .tip_txt .arrow::before{bottom: 0; border-top-color:rgba(0,0,0,.22); border-width: 0.5rem 0.5rem 0;}
.fix-handsup .tip_txt .arrow::after{bottom: 1px; border-top-color: #fff; border-width: 0.5rem 0.5rem 0;}
#hand-up .btn,
#hand-down .btn{width:100%; min-width:90px; font-weight: 500;}
#hand-up .btn .img_hand,
#hand-down .btn .img_hand{width: 16px;vertical-align: -3px; margin-right:3px;}
#hand-up .btn:before,
#hand-down .btn:before{padding-left:20px; background-image:url('/img/att/webRTC/ico_handshake.png'); background-size:contain; background-repeat: no-repeat; background-position: 0 50%;}
#hand-up .btn:before{content:"\c190\b4e4\ae30";} /* content:"ì†ë“¤ê¸°"; */
#hand-down .btn:before{content:"\c190\b0b4\b9ac\ae30";} /* content:"ì†ë‚´ë¦¬ê¸°" */
.shake-up {animation: shake-up .5s ease;}
@keyframes shake-up {
0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
40% {transform: translateY(-5px);}
60% {transform: translateY(-3px);}
80% {transform: translateY(-5px);}
}
.shake-down {animation: shake-down .5s ease;}
@keyframes shake-down {
0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
40% {transform: translateY(3px);}
60% {transform: translateY(5px);}
80% {transform: translateY(3px);}
}
/* ì›¹ìº */
.webcam_select{
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
width: 100%; max-width: 560px;
margin:0 auto;
}
.webcam_select li{margin:1rem;}
.cam_box{
text-align:Center; padding:.75em; box-sizing: border-box; width:240px; height:auto;
border:1px solid #ddd; box-shadow:0px 0px 0px 2px #fff inset;
transition: ease .3s;
}
.cam_box.active{
border: 1px solid #ED5C23; box-shadow:0px 0px 0px 2px #ED5C23 inset;
transition: ease .3s;
}
.cam_box .device_cam{position: relative; width:100%; height:160px; overflow: hidden; background-color: #000;}
.cam_box .device_cam > div,
.cam_box .device_cam > video,
.cam_box .device_cam > img{
position: absolute; width: 100%; height:100%; top: 50%; left: 50%; background:#000;
object-fit: none; object-position: center;
-webkit-transform: translate(-50%, -50%) rotateY(-180deg) !important;
-ms-transform: translate(-50%, -50%) rotateY(-180deg) !important;
transform: translate(-50%, -50%) rotateY(-180deg) !important;
}
.cam_box .device_cam > div.screen_share,
.cam_box .device_cam > video.screen_share,
.cam_box .device_cam > img. {
-webkit-transform: translate(-50%, -50%) rotateY(0deg) !important;
-ms-transform: translate(-50%, -50%) rotateY(0deg) !important;
transform: translate(-50%, -50%) rotateY(0deg) !important;
}
.cam_box .device_name{
margin-top:10px; max-width: 100%; font-size: small;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fix-webcam{position: fixed; right:2vw; z-index:99991;}
.modal-open .fix-webcam{margin-right:17px;}
.fix-webcam .cambox{
width:160px; height:90px; background:#111;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
.fix-webcam .camchat{text-align:right; }
.fix-webcam .camchat button{
position: relative; right:-5px; margin-bottom:5px;
padding:10px; background:#000; border-radius: 50pt;
transition: ease .3s;
}
.fix-webcam .camchat button i{display:block; color:#ffc107; font-size: 150%;}
.fix-webcam .camchat button:hover{margin-bottom:2px;}
.fix-handsup.fix-bottom,
.fix-webcam.fix-bottom{bottom: 2.75rem;}
.survey-answer-wrap.attibt:has(.omr_wraper) .fix-webcam.fix-bottom:hover {
opacity: 0;
}
.survey-answer-wrap.attibt:has(.omr_wraper) .fix-webcam.fix-bottom video {
pointer-events: none;
}
.survey-answer-wrap.attibt:has(.omr_wraper) .fix-webcam.fix-bottom:hover .camchat {
pointer-events: none;
}
/* 로딩중 */
.ico_loading{height:50px; margin:1rem 0;}
.ico_loading .loader-object{
position: relative; top: 50%;
width: 10px; height: 10px; margin: 0 auto; border-radius: 50%;
animation: loader-object-animation 1s linear infinite;
-webkit-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
transform: translate(0, -50%);
}
@keyframes loader-object-animation{
0% {
box-shadow: 0 -20px 0 0 rgba(237, 92, 35, 0.05), 15px -15px 0 0 rgba(237, 92, 35, 0.1), 20px 0 0 0 rgba(237, 92, 35, 0.2), 15px 15px 0 0 rgba(237, 92, 35, 0.3), 0 20px 0 0 rgba(237, 92, 35, 0.4), -15px 15px 0 0 rgba(237, 92, 35, 0.6), -20px 0 0 0 rgba(237, 92, 35, 0.8), -15px -15px 0 0 #ED5C23; }
12.5% {
box-shadow: 0 -20px 0 0 #ED5C23, 15px -15px 0 0 rgba(237, 92, 35, 0.05), 20px 0 0 0 rgba(237, 92, 35, 0.1), 15px 15px 0 0 rgba(237, 92, 35, 0.2), 0 20px 0 0 rgba(237, 92, 35, 0.3), -15px 15px 0 0 rgba(237, 92, 35, 0.4), -20px 0 0 0 rgba(237, 92, 35, 0.6), -15px -15px 0 0 rgba(237, 92, 35, 0.8); }
25% {
box-shadow: 0 -20px 0 0 rgba(237, 92, 35, 0.8), 15px -15px 0 0 #ED5C23, 20px 0 0 0 rgba(237, 92, 35, 0.05), 15px 15px 0 0 rgba(237, 92, 35, 0.1), 0 20px 0 0 rgba(237, 92, 35, 0.2), -15px 15px 0 0 rgba(237, 92, 35, 0.3), -20px 0 0 0 rgba(237, 92, 35, 0.4), -15px -15px 0 0 rgba(237, 92, 35, 0.6); }
37.5% {
box-shadow: 0 -20px 0 0 rgba(237, 92, 35, 0.6), 15px -15px 0 0 rgba(237, 92, 35, 0.8), 20px 0 0 0 #ED5C23, 15px 15px 0 0 rgba(237, 92, 35, 0.05), 0 20px 0 0 rgba(237, 92, 35, 0.1), -15px 15px 0 0 rgba(237, 92, 35, 0.2), -20px 0 0 0 rgba(237, 92, 35, 0.3), -15px -15px 0 0 rgba(237, 92, 35, 0.4); }
50% {
box-shadow: 0 -20px 0 0 rgba(237, 92, 35, 0.4), 15px -15px 0 0 rgba(237, 92, 35, 0.6), 20px 0 0 0 rgba(237, 92, 35, 0.8), 15px 15px 0 0 #ED5C23, 0 20px 0 0 rgba(237, 92, 35, 0.05), -15px 15px 0 0 rgba(237, 92, 35, 0.1), -20px 0 0 0 rgba(237, 92, 35, 0.2), -15px -15px 0 0 rgba(237, 92, 35, 0.3); }
62.5% {
box-shadow: 0 -20px 0 0 rgba(237, 92, 35, 0.3), 15px -15px 0 0 rgba(237, 92, 35, 0.4), 20px 0 0 0 rgba(237, 92, 35, 0.6), 15px 15px 0 0 rgba(237, 92, 35, 0.8), 0 20px 0 0 #ED5C23, -15px 15px 0 0 rgba(237, 92, 35, 0.05), -20px 0 0 0 rgba(237, 92, 35, 0.1), -15px -15px 0 0 rgba(237, 92, 35, 0.2); }
75% {
box-shadow: 0 -20px 0 0 rgba(237, 92, 35, 0.2), 15px -15px 0 0 rgba(237, 92, 35, 0.3), 20px 0 0 0 rgba(237, 92, 35, 0.4), 15px 15px 0 0 rgba(237, 92, 35, 0.6), 0 20px 0 0 rgba(237, 92, 35, 0.8), -15px 15px 0 0 #ED5C23, -20px 0 0 0 rgba(237, 92, 35, 0.05), -15px -15px 0 0 rgba(237, 92, 35, 0.1); }
87.5% {
box-shadow: 0 -20px 0 0 rgba(237, 92, 35, 0.1), 15px -15px 0 0 rgba(237, 92, 35, 0.2), 20px 0 0 0 rgba(237, 92, 35, 0.3), 15px 15px 0 0 rgba(237, 92, 35, 0.4), 0 20px 0 0 rgba(237, 92, 35, 0.6), -15px 15px 0 0 rgba(237, 92, 35, 0.8), -20px 0 0 0 #ED5C23, -15px -15px 0 0 rgba(237, 92, 35, 0.05); }
100% {
box-shadow: 0 -20px 0 0 rgba(237, 92, 35, 0.05), 15px -15px 0 0 rgba(237, 92, 35, 0.1), 20px 0 0 0 rgba(237, 92, 35, 0.2), 15px 15px 0 0 rgba(237, 92, 35, 0.3), 0 20px 0 0 rgba(237, 92, 35, 0.4), -15px 15px 0 0 rgba(237, 92, 35, 0.6), -20px 0 0 0 rgba(237, 92, 35, 0.8), -15px -15px 0 0 #ED5C23; }
}
/* 시험지 ì˜ì— */
.webRTC_survey{background:#ededed;}
.webRTC_survey header{position: relative; width: 100%; z-index:10001; background-color: #fff;}
.webRTC_survey header.sticky,
.webRTC_survey header.sticky-ibt {/* transition: ease .3s; */}
.webRTC_survey header.sticky-pin,
.webRTC_survey header.sticky-ibt-pin{position: fixed; top: 0;}
.webRTC_survey header .sticky-pin,
.webRTC_survey header .sticky-ibt-pin{position: fixed; top: 0;}
.webRTC_survey .top_section{position:relative; z-index:1000;width: 100%;background-color: #ED5C23;text-align: center;padding: 7px 0;color: #fff;}
.webRTC_survey .top_section > ul{
position: relative;
display: -ms-flexbox !important;
display: -webkit-flex !important;
display: flex !important;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-align-content: center;
-ms-flex-line-pack: center;
align-content: center;
}
.webRTC_survey .top_section > ul > li{
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
.webRTC_survey .top_section .test-info > span{margin:0 .4rem; text-align: left;}
.webRTC_survey .top_section .test-info > span:first-child{margin-left: 0;}
.webRTC_survey .top_section .test-info > span:last-child{margin-right: 0;}
.webRTC_survey .top_section .test-info .title{font-size:1em; font-weight: 700;}
.webRTC_survey .top_section .test-info .date{font-size:1em; font-weight: 300; color:rgba(255, 255, 255, 0.9);}
.webRTC_survey .top_section .btn_cam{background: #f7f7f7;FONT-SIZE: .75rem !important;font-weight: 500;border-radius: 3px;margin-left: 10px; cursor: default;}
.webRTC_survey .top_section .btn_cam:hover{filter: none;}
.webRTC_survey .top_section .btn_cam::before{
content: ""; display:inline-block; width:11px; height:11px; margin-bottom: 1px; margin-right:3px;
background-color: var(--secondary); vertical-align: middle; border-radius: 50pt;
}
.webRTC_survey .top_section .btn_cam.on::before{background-color: var(--success);}
.webRTC_survey .top_section .btn_notice{border:1px solid #222; color:#222; font-weight: 500; margin-right:10px;}
.webRTC_survey .top_section .btn_notice:hover{background-color: #222; color: #fff;}
.webRTC_survey .top_section .btns,
.webRTC_survey .top_section .time-reminder{margin-left:auto;}
.webRTC_survey .top_section.v2{background:#fff; border-bottom:1px solid #ddd;}
.webRTC_survey .top_section.v2 > ul > li{
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.webRTC_survey .top_section.v2 > ul > li > div{margin-right: 10px;}
/* ì‘시창 ë° ì‘ì‹œìží™”ë©´ ë…¸ì¶œì •ë³´ 미리보기 ìˆ˜ì • */
.survey-answer-wrap .time-info-text dl {
display: flex;
gap: 7px;
margin-left: 18px;
}
.webRTC_survey .top_section.v2 .time-info-text dl {
display: flex;
gap: 7px;
margin-left: 7px;
}
.preview_header {
display: flex;
justify-content: space-between;
}
@media all and (max-width: 380px) {
.preview_header {
flex-direction: column;
}
.survey-answer-wrap .time-info-text dl {
margin-bottom: 25px;
}
}
/* 시험시작시간 */
.webRTC_survey .top_section.v2 .time-info-text{width:100%; font-size:small; color: initial;}
.webRTC_survey .top_section.v2 .time-info-text ul{
display: -ms-flexbox;
display: -webkit-flex;
display: flex; margin-top:1em;
}
.webRTC_survey .top_section.v2 .time-info-text ul li{position: relative; padding-left:7px; margin-left:10px;}
.webRTC_survey .top_section.v2 .time-info-text ul li::before{content:"\007c"; position: absolute; left:0; color:#ccc; font-size:small;}/*content:"|";*/
.webRTC_survey .top_section.v2 .time-info-text ul li:first-child{padding-left:0; margin-left:0;}
.webRTC_survey .top_section.v2 .time-info-text ul li:first-child::before{display: none;}
.webRTC_survey .top_section.v2 .time-info-text dl{
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
font-size: 1em; color:#5f5f5f; }
.webRTC_survey .top_section.v2 .time-info-text dt{font-weight: 600; margin-left:.4rem;}
.webRTC_survey .top_section.v2 .time-info-text dd{margin-left:10px;}
/* 시험페ì´ì§€ 프로세스바 */
.webRTC_survey .survey-progress{margin:.7em auto -.5em; background:#fff; border:1px solid #fff; border-radius:15px; padding:1em 0 0 0;}
.webRTC_survey .survey-percent-wrap{}
.webRTC_survey .survey-percent-wrap .percentage-bar-wrap,
.webRTC_survey .survey-percent-wrap .percentage-bar-wrap .percentage-bar{height:7px;}
.webRTC_survey main{
background:#fff; margin-top:3rem; border-radius:1em;
/* padding: 3rem 35px; */
padding: 3rem 0px;
z-index: 2;
}
/* 남ì€ì‹œê°„ 타ì´ë¨¸ */
.webRTC_survey .time-reminder{position: relative; margin-right:-20px}
.webRTC_survey .time-reminder iframe{width: 421px; max-width:100%; height:75px; }
.webRTC_survey main .time-reminder{text-align: center; margin-right: 0;}
.webRTC_survey main .page-content .time-reminder iframe{transform-origin: center;}
/* ì‹œí—˜ë¬¸í• ë””ìžì¸ */
.webRTC_survey .survey-set{margin: 0 0 3em; padding-top:1em; background-color: transparent; }
.webRTC_survey .survey-set.ibt_section{margin-bottom: 0;}
/*
.webRTC_survey .survey-set input[type=text]{
font-family: var(--font-pretendard); font-size: initial;
height: auto !important; height: 30px !important; line-height: 110%; vertical-align: 0px; padding-bottom: 5px;
}
*/
.webRTC_survey .survey-question{font-size:1.25em;}
.webRTC_survey .survey-select-wrap{padding: 0 0 0 60px; display: inline-block;}
.webRTC_survey .survey-select-arr{display: block; padding:0px 0 15px !important; position: relative;}
.webRTC_survey .survey-select-arr *{color:inherit;}
.webRTC_survey .survey-select-arr button {color:#fff;}
.webRTC_survey .survey-select-arr > *{}
.webRTC_survey .survey-select-arr .col label p{font-size: initial;}
.webRTC_survey .survey-select-arr .sub-tit-wrap{padding-left: 0; padding-bottom:30px; }
.webRTC_survey .survey-select-arr .sub-tit-wrap:last-child{padding-bottom:0;}
.webRTC_survey .survey-select-arr .sub-tit-wrap h4{font-weight: 400;}
.webRTC_survey .survey-select-arr .sub-tit-wrap h4 > span{font-weight: inherit;}
.webRTC_survey .survey-select-arr .sub-tit-wrap .write-answer-wrap{font-size:initial;}
.webRTC_survey .survey-select-arr .sub-tit-wrap .write-answer-wrap .ex-answer-list2{flex: 1; height: auto;}
/* 단답형 ëª¨ë°”ì¼ */
.webRTC_survey .survey-select-arr .sub-tit-wrap .write-answer-wrap{}
.webRTC_survey .survey-set h3,
.webRTC_survey .survey-set h5{letter-spacing: -.5px;}
.webRTC_survey .survey-set h3 > span{font-size: 1.13em; font-weight: 500; line-height: 150%;}
.webRTC_survey .survey-set h3 > span.mark_chk_box {width: 100%; height: 100%; display: block;}
.webRTC_survey .survey-set h5 > strong{width:60px;}
/* 번호 질문 ì •ë ¬ css 추가 */
.survey-set .survey-question h3 {
display: flex;
padding: 0;
align-items: flex-start;
justify-content: center;
}
.survey-set .survey-question h3 > span{flex:1; padding: 18px 0;}
.webRTC_survey .survey-set .alt-msg{height:0;}
.webRTC_survey .survey-set.focus .alt-msg{background:#f0f0f0; height:40px; font-size: .875em;}
.webRTC_survey .single-question{width:auto;}
.webRTC_survey .have-text{padding-right:0;}
.webRTC_survey .have-text input[type=text],
.webRTC_survey .have-text textarea{
font-family: var(--font-pretendard); font-size: initial;
max-width: calc(100% - 1em);
}
.webRTC_survey .have-text textarea{}
/* 1. ê°ê´€ì‹ */
.webRTC_survey .survey-set .radio,
.webRTC_survey .survey-set .checkbox{position: relative; margin: 15px 0 20px;}
.webRTC_survey .survey-set .radio label,
.webRTC_survey .survey-set .checkbox label{font-size: 0.94em; color:#333;line-height: 1.4; padding:0 1em 0 34px; word-wrap: break-word; max-width: 100%;}
.webRTC_survey .survey-set .radio label img,
.webRTC_survey .survey-set .checkbox label img{}
.webRTC_survey .check-wrap{padding-left: 0 !important;}
.webRTC_survey .checkbox label:before{width: 22px; height: 22px;}
.webRTC_survey .checkbox input[type="checkbox"]:checked + label:after{top: 5px; width: 14px; height: 8px;}
/* 2. OX */
.webRTC_survey .survey-table-ox-prev-wrap{
display: flex;
flex-direction: column;
margin-top: 0;
}
.webRTC_survey .survey-table-ox-prev-wrap ._res_thead,
.webRTC_survey .survey-table-ox-prev-wrap ._res_t_row {
display: flex;
flex-direction: row;
}
.webRTC_survey .survey-table-ox-prev-wrap ._res_t_row {
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
padding: 15px 0;
}
.webRTC_survey .survey-table-ox-prev-wrap ._res_thead .spcol-2{width:120px; margin: 0 .75em; padding-top: 0;}
.webRTC_survey .survey-table-ox-prev-wrap ._res_thead .spcol-2:first-child,
.webRTC_survey .survey-table-ox-prev-wrap ._res_t_row .spcol-2:first-child{flex:1; width:auto; max-width:100%; margin-left:0;}
.webRTC_survey .survey-table-ox-prev-wrap ._res_thead .spcol-2:last-child{margin-right:0;}
.webRTC_survey .survey-table-ox-prev-wrap ._res_thead .spcol-2::after{left:0; right:0;}
.webRTC_survey .survey-table-ox-prev-wrap ._res_t_row h4{
display: inline-flex; align-items: flex-start; min-width: 32px;
font-size: 0.94em; color:#333;line-height: 145%; font-weight: 400; padding: 0;
}
.webRTC_survey .survey-table-ox-prev-wrap ._res_t_row h4 > span{padding: 0; display: inline-table;}
.webRTC_survey .survey-table-ox-prev-wrap ._res_t_row h4 > span:first-child{min-width: 32px; font-size: 90%; padding: 1.5px 5px;}
.webRTC_survey .survey-table-ox-prev-wrap ._res_t_row ._res_col{}
.webRTC_survey .survey-table-ox-prev-wrap ._res_t_row ._res_col.radio-wrap{
width:auto; margin-left: auto; min-width: 120px; margin: 0 .75em; padding: 0;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.webRTC_survey .survey-table-ox-prev-wrap ._res_t_row ._res_col.radio-wrap:last-child{margin-right: 0;}
.webRTC_survey .survey-table-ox-prev-wrap ._res_t_row ._res_col.radio-wrap > span{width: 100%; margin: 0; padding-top:0; padding-bottom:0;}
.webRTC_survey .survey-table-ox-prev-wrap ._res_t_row ._res_col.radio-wrap .radio label{text-indent:-1000vw;}
.webRTC_survey .survey-table-ox-prev-wrap ._res_t_row ._res_col.radio-wrap .radio input[type=radio]{
opacity: 0 !important; display: block !important; border:0 !important;
width:22px; height:22px;
position: absolute; top:50%; left:50%; z-index:0;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
/* ë‚ ì§œ ì—°ë½ì²˜ */
.webRTC_survey .survey-select-arr .sub-tit-wrap .write-answer-wrap:has(.date){align-items: center;}
.webRTC_survey .survey-select-arr .sub-tit-wrap .write-answer-wrap .date{}
.webRTC_survey .survey-select-arr .sub-tit-wrap .write-answer-wrap .date .select-wrapper{width: calc(100% - 10px);}
/* ì‘시결과 ì •ë‹µí™•ì¸ */
.webRTC_survey .survey-table-ox-wrap{
display: flex;
flex-direction: column;
margin-top: 0;
}
.webRTC_survey .survey-table-ox-wrap ._res_thead,
.webRTC_survey .survey-table-ox-wrap ._res_t_row{
display: flex;
flex-direction: row;
}
.webRTC_survey .survey-table-ox-wrap ._res_t_row{
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
padding: 15px 0;
}
.webRTC_survey .survey-table-ox-wrap ._res_thead .spcol-2{width: 120px; margin: 0 .75em; padding-top: 0;}
.webRTC_survey .survey-table-ox-wrap ._res_thead .spcol-2:first-child,
.webRTC_survey .survey-table-ox-wrap ._res_t_row .spcol-2:first-child{flex:1; width:auto; max-width:100%; margin-left:0;}
.webRTC_survey .survey-table-ox-wrap ._res_thead .spcol-2:last-child{margin-right:0;}
.webRTC_survey .survey-table-ox-wrap ._res_thead .spcol-2::after{left:0; right:0;}
.webRTC_survey .survey-table-ox-wrap ._res_t_row h4{display: flex; align-items: center; gap: 8px; font-size: 0.94em; color: #333; line-height: 145%; font-weight: 400; padding: 0;}
.webRTC_survey .survey-table-ox-wrap ._res_t_row ._res_col.radio-wrap{
width:auto; margin-left: auto; min-width: 120px; margin: 0 .75em; padding: 0;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.webRTC_survey .survey-table-ox-wrap ._res_t_row ._res_col.radio-wrap:last-child{margin-right: 0;}
@media screen and (max-width:780px){
.webRTC_survey .survey-table-ox-wrap ._res_thead,
.webRTC_survey .survey-table-ox-prev-wrap ._res_thead{display: none;}
.webRTC_survey .survey-table-ox-wrap ._res_t_row,
.webRTC_survey .survey-table-ox-prev-wrap ._res_t_row{
flex-direction: column;
align-items: flex-start;
margin-bottom: 10px;
}
.webRTC_survey .survey-table-ox-wrap ._res_t_row:last-child,
.webRTC_survey .survey-table-ox-prev-wrap ._res_t_row:last-child{margin-bottom: 0;}
.webRTC_survey .survey-table-ox-prev-wrap ._res_t_row h4{width: 100%;}
.webRTC_survey .survey-table-ox-wrap ._res_t_row ._res_col.radio-wrap,
.webRTC_survey .survey-table-ox-prev-wrap ._res_t_row ._res_col.radio-wrap{min-width: auto; margin: 10px 0 0 0;}
.webRTC_survey .survey-table-ox-wrap ._res_t_row ._res_col.radio-wrap > span,
.webRTC_survey .survey-table-ox-prev-wrap ._res_t_row ._res_col.radio-wrap > span{padding-left: 0;}
.webRTC_survey .survey-table-ox-wrap ._res_t_row h4 > span:first-child,
.webRTC_survey .survey-table-ox-prev-wrap ._res_t_row h4 > span:first-child{padding-left: 3px; padding-right: 3px;}
.webRTC_survey .survey-table-ox-wrap ._res_t_row ._res_col.radio-wrap .radio label,
.webRTC_survey .survey-table-ox-prev-wrap ._res_t_row ._res_col.radio-wrap .radio label{text-indent: 33px; width: auto; height: auto;}
.webRTC_survey .survey-table-ox-wrap ._res_t_row h4{width: 100%; padding-left: 0; padding-right: 0;}
.webRTC_survey .survey-table-ox-wrap ._res_t_row ._res_col.radio-wrap .radio label .correct-name{display: block;}
}
/* 3. ë“œë¡ë‹¤ìš´ */
.webRTC_survey .survey-select-wrap .select-wrapper{}
.webRTC_survey .survey-select-wrap .select-wrapper .select-dropdown{text-indent: 0px;}
.webRTC_survey .survey-select-wrap .select-wrapper .caret{bottom:auto; top:15px;}
.webRTC_survey .survey-select-wrap .select-wrapper .dropdown-content{position: relative; margin-bottom:-57px !important;}
.webRTC_survey .survey-select-wrap .select-wrapper .dropdown-content.select-dropdown{position: absolute; z-index: 99999; }
.webRTC_survey .survey-select-wrap .select-wrapper .dropdown-content li{height: fit-content;}
.webRTC_survey .survey-select-wrap .select-wrapper .dropdown-content li > a,
.webRTC_survey .survey-select-wrap .select-wrapper .dropdown-content li > span{font-size: initial; color: inherit;}
.webRTC_survey .survey-select-wrap .select-wrapper input[type=text]:not(.browser-default){height: 3rem !important; padding-right: 20px; box-sizing: border-box;}
/* 단답형 & 소질문 ëª¨ë°”ì¼ ìµœëŒ€ ë„“ì´ ì„¤ì • */
@media screen and (max-width:768px){
.webRTC_survey .survey-select-wrap .select-wrapper{max-width: calc(100% - 1em);}
.webRTC_survey .sub-tit-wrap .write-answer-wrap input{max-width: calc(100% - 1em);}
.webRTC_survey .sub-tit-wrap .write-answer-wrap .date{min-width: 90px; margin-right: -10px;}
.webRTC_survey .sub-tit-wrap .write-answer-wrap .datetxt{margin-right:10px;}
}
}
/* 4. 순위 */
.webRTC_survey .rank-wrap.have-col{margin-top:20px;}
/*
.webRTC_survey .rank-wrap input[type=text]{
font-family: var(--font-pretendard); height: auto; line-height: 100%;
padding-bottom: 5px; margin-top: 9px;
}
*/
/* 5. 단답형 단수 */
.webRTC_survey .single-question-wrap{}
.webRTC_survey .single-question-wrap .single-question .have-text input[type=text]{padding-bottom: 0px; min-height: 30px; height: 30px; line-height: 1; font-size: 100%; vertical-align: 0;}
.webRTC_survey .single-question-wrap .single-question .have-text p{font-size:smaller; }
/* 6. 단답형 복수 */
.webRTC_survey .single-question-wrap .multi-question{}
.webRTC_survey .single-question-wrap .multi-question input{font-family: inherit; font-size: inherit; min-height: 30px; height: 30px; line-height: 1;}
.webRTC_survey .sub-tit-wrap .write-answer-wrap input{font-family: inherit; font-size: inherit; min-height: 30px; height: 30px; line-height: 1;}
/* 7. ì„œìˆ í˜• */
.webRTC_survey .jang-question{width: 100%;}
.webRTC_survey .jang-question .have-text > div:first-child{font-size:.75em; color:#666; width:85%;}
.webRTC_survey .jang-question .have-text textarea.subject-input{min-height:30px; overflow-y: auto !important;}
/* 8. 빈칸채우기 */
.webRTC_survey .blank-wrap h4 span{line-height: 2.5em;}
.webRTC_survey .blank-wrap input.subject-input{padding-left: 10px;}
/* ì •ë‹µí™•ì¸ */
.webRTC_survey .sub-tit-wrap .write-answer-wrap{display: flex;}
.webRTC_survey .sub-tit-wrap .write-answer-wrap > span{width: max-content !important;}
.webRTC_survey .sub-tit-wrap .write-answer-wrap .setting-unit-score-sub{
min-width: fit-content; margin-left: auto;
display: inline-flex; justify-content: flex-end; align-items: baseline;
font-size: 14px; color: #5f5f5f;
}
/* 9. 순서배열 */
/* 10. ë“œëž˜ê·¸ì•¤ë“œë¡ */
.webRTC_survey .drag-box.choice-list-answer .container > .setting-unit-score-sub{
font-size: 14px; color: #5f5f5f;
margin-top: auto; margin-bottom: auto; margin-right: -5px;
}
/* 11. ë³´ê³ ë§í•˜ê¸° */
.webRTC_survey .contents-speak{padding-right: 60px !important;}
@media screen and (max-width:780px){
.webRTC_survey .contents-speak{padding-right: 24px !important;}
.webRTC_survey .contents-speak h5 > strong{width: auto;}
.webRTC_survey .contents-speak h5 > span{padding-right: 0;}
}
/* 12. ë“£ê³ ë§í•˜ê¸° */
/* 13. ì—°ë½ì²˜ */
.webRTC_survey .survey-select-arr .sub-tit-wrap.fl-clear h6{position: relative; display: inline-block; margin-top: 15px; bottom: -5px;}
/* 14. 글/그림/ì˜ìƒ */
/* 쪽지창 */
.message-box{
position: fixed; top:50%; right:1vw; z-index:10001; overflow: auto;
width:96%; max-width:340px; max-height: 700px;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
background-color: #fff; border:1px solid #ccc; padding-top:.75px; border-radius:5px;
box-shadow: 0 3px 3px 0px rgb(0 0 0 / 5%);
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-pack: justify;
justify-content: space-between;
}
.message-box.resize{resize: vertical;}
.modal-dialog.size-sm,
.message-box.size-sm{max-width:300px !important;}
.modal-dialog.size-lg,
.message-box.size-lg{max-width:800px !important;}
.message-box .message-header{
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: justify;
justify-content: space-between;
padding: .75rem 1rem; background: #EEE;
border-radius: calc(5px - 1px);
}
/* 메세지창 여러개ì¼ë•Œ 위치 변경 */
.msg-right-trans-1{}
.msg-right-trans-2{transform: translate(-30px, 0px);}
.msg-right-trans-3{transform: translate(-60px, 45px);}
.msg-right-trans-4{transform: translate(-90px, 90px);}
.msg-right-trans-5{transform: translate(-120px, 135px);}
.message-box .message-title{color:#222; font-weight: 700; font-size: 1em; flex:1;}
.message-box .message-title .date{display:none; font-size: .875em; color: #777; margin-left: 10px;}
.message-box .message-title .num-style1{color:#ED5C23; font-size:smaller; font-weight: 500;}
.message-box .message-title .new_num{
display:inline-block; position:absolute; width:20px; height:20px;
margin-top:-3px; margin-left:5px;
background:#ED5C23; border-radius: 50px;
}
.message-box .message-title .new_num > span{
position: absolute; top:50%; left:50%;
color:#fff; font-size:11px; font-family: var(--font-pixel); letter-spacing: -.5px;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.message-box .message-title.super{color: #ED5C23}
.message-box .message-title.super .date{display:initial;}
.message-box .message-header button{margin-right:auto;}
.message-box .message-header .close span,
.message-box .message-header .minimize span{font-size: 0;}
.message-box .message-header .close span::before {content: "\f057"; font: var(--fa-font-solid); color: #303030; font-size: 1.3rem;}
.message-box .message-header .minimize span::before {content: "\f056"; font: var(--fa-font-solid); color: #303030; font-size: 1.3rem;}
.message-box .message-body{padding: 1.5em 1rem; color: #222; line-height: 1.3em;}
.message-box .message-body .con-style1{margin-bottom:10px;}
.message-box .message-body .con-style1-dashed{margin-bottom:10px; padding-bottom:10px; border-bottom: 1px dashed #ddd;}
.message-box .message-body .msg_date{
display: -ms-flexbox;
display: flex;
-ms-flex-align: flex-end;
align-items: flex-end; font-size:0.82em; margin-bottom:15px;
}
.message-box .message-body .msg_date .msg_write{padding-left:0; color:#2952ae; }
.message-box .message-body .msg_date .msg_write.super{color:#ed5c23; }
.message-box .message-body .msg_date .msg_time{color:#777; padding-left:5px;}
.message-box .message-selectbox{
display: inline-block; border:1px solid #ddd; padding:5px; min-height:2.25em; font-weight:600;
}
.message-box .message-footer{
padding: .25em .75em; border-top: 1px solid #eee;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: end;
justify-content: flex-end;
}
.message-box .message-footer > * {margin: 0.25rem;}
.message-box .message-footer.center{
-ms-flex-pack: center;
justify-content: center;
}
.message-box.reply .message-body{
padding:1.5em 1em 1em;
flex: 1;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-pack: justify;
justify-content: space-between;
}
.message-box.reply .msg_list{
flex:1; max-height:100%; overflow-y: scroll;
padding-right:5px; border:0px solid #ddd; margin-top: -10px; padding-bottom:10px;
}
.message-box.reply .msg_list li{margin:0.5em 0;}
.message-box.reply .msg_list .box{
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start; border: 0 !important;
}
.message-box.reply .msg_list li:hover,
.message-box.reply .msg_list .box:hover{border: 0 !important;}
.message-box.reply .msg_list .box > div{padding:0 3px; line-height: 130%;}
.message-box.reply .msg_list .box .msg_write{padding-left:0; color:#2952ae; font-size:0.82em; width: 35px;}
.message-box.reply .msg_list .box .msg_write.super{color:#dc3545; }
.message-box.reply .msg_list .box .msg_time{color:#777; font-size:xx-small; padding-top:1px; width: 65px;}
.message-box.reply .msg_list .box .msg_txt{padding-right:0; font-size:0.925em; flex: 1;}
.message-box.reply .msg_input{position:relative; background-color:#FFF3EF;}
.message-box.reply .msg_input textarea{width:100%; min-height:70px; color:#333; font-size:0.9em; border: 0; line-height:130%; padding:5px; resize: none;}
.message-box.reply .msg_input textarea:focus{border: 0; box-shadow:none !important;}
.message-box.reply .msg_input textarea::placeholder {color: #ccc; font-weight: 300;}
.message-box.reply .msg_input .txt_cut{position: absolute; right:20px; bottom:3px; font-size:xx-small; color:#666;}
.message-box.reply .msg_input_error{display: block; font-size:small; margin-top:10px; color:#ed5c23; }
.message-box.reply .msg_input_error::before{font: var(--fa-font-solid); content: "\f06a"; font-size: 90%; color:#ed5c23; margin-right:3px;}
.message-box .webcam_choice{}
.message-box .connect_guide{}
.message-box .connect_guide .items_title{font-size: 160%; font-weight: 800; color: #222; margin-bottom: 1.5rem;}
.message-box .connect_guide .box h3{width: 100%; font-size: 1.1em; font-weight: 700; color: #222; margin: 5px 0;}
.message-box .connect_guide .box h3::before {font: var(--fa-font-solid); content: "\f058"; font-size: 14px; color: #ed5c23; margin-right: 6px;}
.message-box .connect_guide .box{
display: -ms-flexbox;
display: flex;
-ms-flex-pack: start;
align-content: flex-start;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-align: end;
align-items: flex-end;
}
.message-box .connect_guide .box dl {}
.message-box .connect_guide .box dl h3{position: relative; left:-1.4em; margin-bottom: 10px;
}
.message-box .connect_guide .box dt {position: relative; padding-left: 10px;
font-size: 110%; color: #222; font-weight: 500; margin-bottom: 5px; line-height: 140%;}
.message-box .connect_guide .box dt::before {content: ""; position: absolute; top: 8px; left: 0; width: 4px; height: 4px; background: #ed5c23; border-radius: 5pt;}
.message-box .connect_guide .box dd {padding-left: 9px; font-size: 1em; margin: 3px 0; font-size: 1em;}
.message-box .connect_guide .box dd i {font-style: normal; font-size: 1.25em;
font-weight: 400; vertical-align: -.07em; margin-right: 3px;}
.message-box .connect_guide .box .img_qrcode {width: 125px; margin-right: 3em;}
.message-box .ico{
display: -ms-flexbox;
display: flex;
height: 18px;
width: fit-content;
margin: 0 5px;
filter: var(--hex_darkgray);
}
.message-box img.on {
opacity: 1;
filter: var(--hex_orange);
}
/* 블ë¼ì¸ë“œ */
.out-blind{
position:fixed; z-index:10000; top:0; left:0; width: 100%; height: 100%; background:rgba(0,0,0,1);
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
| -webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
.out-blind.opacity_50{background:rgba(0,0,0,0.5) !important;}
.out-blind.opacity_0{background:rgba(0,0,0,0) !important;}
.out-blind .out-con{
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
width:90%; max-width: 850px;
}
.out-blind .out-con .txt{margin-bottom:2em; width: 98%; max-width: 800px;}
.out-blind .out-con .txt h1{display: block; line-height:130%; margin:0 auto; text-align:center; font-weight:800; color:#fff; font-size:2rem; background-color: transparent;}
.out-blind .out-con .txt h2{display: block; line-height:130%; margin:1rem auto; text-align:center; font-weight:500; color:#ffc107; }
.out-blind .out-con .txt h2 > span{display:block; margin-bottom:5px;}
.out-blind .out-con .txt h2 > span:last-child{margin-bottom: 0;}
.out-blind .out-con .message-box{
position:relative; top:auto; right:auto;
width:96%; max-width:450px;
-webkit-transform: translateY(0%);
-ms-transform: translateY(0%);
transform: translateY(0%);
}
.out-blind .position-left-bottom{display:block; position:absolute; bottom: 2.75rem; left: 2vw; max-width: 90%; padding-right:180px;}
.out-blind .position-left-bottom .txt h1,
.out-blind .position-left-bottom .txt h2{text-align:left;}
.out-blind-of-top{z-index:10001 !important;}
/* ì •ë‹µí™•ì¸ */
.mark-correct {width:136px; height:103px; background: url('https://www.nowntest.com/img/ibt/bg_correct.png') no-repeat; position:absolute; left:-20px; z-index:900; padding:0;}
.mark-wrong {width:136px; height:103px; background: url('https://www.nowntest.com/img/ibt/bg_wrong.png') no-repeat;position:absolute; left:-20px; z-index:900;}
.mark-wrong-part {width:136px; height:103px; background: url('https://www.nowntest.com/img/ibt/bg_wrong_part.png') no-repeat;position:absolute; left:-20px; z-index:900; padding:0;}
.ibt-top-timeinfo {position:absolute; top:0; max-width:1050px; width:100%; /*height:210px;*/ height:140px; padding:20px 15px; margin: 0 auto; text-align: center; border-bottom: 1px solid #dedede; background-color:#FFF; z-index:999; box-sizing: border-box;}
.ibt-top-timeinfo::after{content:''; display:block; clear:both;}
.test_vod_webRTC .ibt-top-timeinfo{
border-bottom: 1px solid #ddd;
padding:0 3em 2em; margin:-1em auto 3em;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
align-items: center;
position: relative; top: auto; max-width: 100%; height: auto; text-align: initial;
}
.test_vod_webRTC .ibt-top-timeinfo .time-info-text dl{
display: -ms-flexbox;
display: -webkit-flex;
display: flex; font-size:1em; margin-bottom:.5em;
}
.test_vod_webRTC .ibt-top-timeinfo .time-info-text dl::before{
content: "·"; margin-right: 5px;
font-weight: 900; color: #ed5c23; line-height: 1;
/* width: 3px; height: 3px; border-radius: 30px; background-color: #ed5c23;
position: relative; top:5px; */
}
.test_vod_webRTC .ibt-top-timeinfo .test-score-info{font-size:1.155em; margin-left: auto; text-align: right;}
.test_vod_webRTC .ibt-top-timeinfo .test-score-info .get-score{font-size:1.5em; margin-left:10px; font-weight:800; color:var(--red); vertical-align: -1px;}
.test_vod_webRTC .ibt-top-timeinfo .test-score-info .t-red{display: block; color:#ff0000; font-size:12px; margin:5px 0 0 0;}
.test_vod_webRTC .ibt-top-timeinfo .test-score-info .t-red:first-of-type{margin-top:10px;}
.test_vod_webRTC .setting-unit-score{font-size:14px; margin-bottom: 15px; margin-right: 0;}
.test_vod_webRTC .setting-unit-score input[type=text]{font-size:110%;}
.test_vod_webRTC .setting-unit-score input.answer-score{font-family: inherit; font-size: 16px;}
.test_vod_webRTC .answer-ex{background-color: #f6f6f6; font-size:1rem; margin-top:10px;}
.test_vod_webRTC .answer-ex .ex-title{font-size:small;}
.test_vod_webRTC .answer-ex .ex-comment{font-size:smaller;}
.test_vod_webRTC .answer-ex .ex-comment > div{margin-top:5px;}
.test_vod_webRTC .answer-ex .ex-comment > div p {word-break: break-all;}
.test_vod_webRTC .answer-ex .ex-comment > div:empty{margin-top:0;}
.test_vod_webRTC .answer-info{font-weight: 700; margin-top: 10px;}
.test_vod_webRTC .ibt-top-timeinfo .time-info-text dt{font-weight: 700; padding-right:1em;}
/* OX ì •ë‹µí™•ì¸ */
.webRTC_survey .survey-table-ox-prev-wrap.pscore ._res_t_row{}
.webRTC_survey .survey-table-ox-prev-wrap.pscore ._res_t_row h4{
flex: 1;
width: auto;
max-width: 100%;
}
.webRTC_survey .survey-table-ox-prev-wrap.pscore ._res_t_row ._res_col.radio-wrap,
.webRTC_survey .survey-table-ox-prev-wrap.pscore ._res_t_row .setting-unit-score-sub{
width:120px; margin-left:1.5em;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}
.webRTC_survey .survey-table-ox-prev-wrap.pscore ._res_t_row .setting-unit-score-sub{font-size:90%;}
.webRTC_survey .survey-table-ox-prev-wrap.pscore ._res_t_row .setting-unit-score-sub .answer-score{background-color: transparent;}
/* íˆ´íŒ Tooltip */
[tooltip] {position: relative;}
/* Applies to all tooltips */
[tooltip]::before,
[tooltip]::after {text-transform: none; font-size: 11px; line-height: 130%; user-select: none; pointer-events: none; position: absolute; display: none; opacity: 0;
}
[tooltip]::before {content: ''; border: 5px solid transparent; z-index: 1001;}
[tooltip]::after {
content: attr(tooltip); text-align: center; padding: 1em; border-radius: .3ch;
min-width: 3em; max-width: 21em; background: #333; color: #fff;
box-shadow: 0 1em 2em -.5em rgba(0, 0, 0, 0.35);
z-index: 1000;
}
[tooltip]:hover::before,
[tooltip]:hover::after {display: block;}
[tooltip='']::before,
[tooltip='']::after {display: none !important;}
/* FLOW: UP */
[tooltip]:not([flow])::before,
[tooltip][flow^="up"]::before {bottom: 100%; border-bottom-width: 0; border-top-color: #333; margin-bottom:5px;}
[tooltip]:not([flow])::after,
[tooltip][flow^="up"]::after {bottom: calc(100% + 10px);}
[tooltip]:not([flow])::before,
[tooltip]:not([flow])::after,
[tooltip][flow^="up"]::before,
[tooltip][flow^="up"]::after {left: 50%; transform: translate(-50%, -.5em);}
/* FLOW: DOWN */
[tooltip][flow^="down"]::before {top: 100%; border-top-width: 0; border-bottom-color: #333; margin-top:5px;}
[tooltip][flow^="down"]::after {top: calc(100% + 10px);}
[tooltip][flow^="down"]::before,
[tooltip][flow^="down"]::after {left: 50%; transform: translate(-50%, .5em);}
/* FLOW: LEFT */
[tooltip][flow^="left"]::before {top: 50%; border-right-width: 0; border-left-color: #333; left: calc(0em - 5px); transform: translate(-.5em, -50%);}
[tooltip][flow^="left"]::after {top: 50%; right: calc(100% + 5px); transform: translate(-.5em, -50%);}
/* FLOW: RIGHT */
[tooltip][flow^="right"]::before {top: 50%; border-left-width: 0; border-right-color: #333; right: calc(0em - 5px); transform: translate(.5em, -50%);}
[tooltip][flow^="right"]::after {top: 50%; left: calc(100% + 5px); transform: translate(.5em, -50%);}
/* KEYFRAMES */
@keyframes tooltips-vert {
to {
opacity: .9; transform: translate(-50%, 0);
}
}
@keyframes tooltips-horz {
to {
opacity: .9; transform: translate(0, -50%);
}
}
/* FX All The Things */
[tooltip]:not([flow]):hover::before,
[tooltip]:not([flow]):hover::after,
[tooltip][flow^="up"]:hover::before,
[tooltip][flow^="up"]:hover::after,
[tooltip][flow^="down"]:hover::before,
[tooltip][flow^="down"]:hover::after {animation: tooltips-vert 200ms ease-out forwards;}
[tooltip][flow^="left"]:hover::before,
[tooltip][flow^="left"]:hover::after,
[tooltip][flow^="right"]:hover::before,
[tooltip][flow^="right"]:hover::after {animation: tooltips-horz 200ms ease-out forwards;}
/* lightbox gallery */
body.hidden-scroll {overflow: hidden; }
.sl-overlay {position: fixed; left: 0; right: 0; top: 0; bottom: 0; background: #000; display: none; z-index: 1035;}
.sl-wrapper {position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 1040;}
.sl-wrapper * {box-sizing: border-box;}
.sl-wrapper button {border: 0 none; background: transparent; font-size: 28px; padding: 0; cursor: pointer; }
.sl-wrapper button:hover {opacity: 0.7;}
.sl-wrapper .sl-close{display: none; position: fixed; right: 30px; top: 20px; z-index: 10060; font-size: 0;}
.sl-wrapper .sl-close::before{font: var(--fa-font-solid); content: "\f00d"; font-size: 2rem; color:#fff;}
.sl-wrapper .sl-counter{
display: none;
position: fixed; top: 26px;right: 70px; z-index: 1060; background: #000; padding: 3px 10px 5px;
font-size: 12px; color:#999; text-align: right; border-radius: 50pt;
}
.sl-wrapper .sl-counter .sl-current{color:#fff;}
.sl-wrapper .sl-navigation {width: 100%; display: none;}
.sl-wrapper .sl-navigation button {
position: fixed; top: 50%; margin-top: -22px; height: 44px; z-index: 10060;
display: block; font-size:0; color:#fff;}
.sl-wrapper .sl-navigation button.sl-next{right:2vw;}
.sl-wrapper .sl-navigation button.sl-next::before{font: var(--fa-font-solid); content: "\f105"; font-size: 2rem;}
.sl-wrapper .sl-navigation button.sl-prev{left: 2vw;}
.sl-wrapper .sl-navigation button.sl-prev::before{font: var(--fa-font-solid); content: "\f104"; font-size: 2rem;}
.sl-wrapper.sl-dir-rtl .sl-navigation {direction: ltr;}
.sl-wrapper .sl-image {position: fixed; -ms-touch-action: none; touch-action: none; z-index: 10000;}
.sl-wrapper .sl-image img {margin: 0; padding: 0; display: block; border: 0 none; width: 100%; height: auto;}
.sl-wrapper .sl-image .sl-caption {
display: none; position:initial; bottom:0; left:0; right:0; width:100%; background: rgba(0, 0, 0, 0.8);
padding: 10px; color: #fff; font-size: small; text-align:center;
}
.sl-wrapper .sl-image .sl-caption.pos-top {bottom: auto; top: 0;}
.sl-wrapper .sl-image .sl-caption.pos-outside {bottom: auto; }
.sl-wrapper .sl-image .sl-download {display: none; position: absolute; bottom: 5px; right: 5px; color: #000; z-index: 1060;}
.sl-spinner {
display: none;
position: fixed; top: 50%; left: 50%; width: 40px; height: 40px; z-index: 1007;
border: 5px solid #333; border-radius: 40px; margin: -20px 0 0 -20px; opacity: 0;
-webkit-animation: pulsate 1s ease-out infinite;
-moz-animation: pulsate 1s ease-out infinite;
-ms-animation: pulsate 1s ease-out infinite;
-o-animation: pulsate 1s ease-out infinite;
animation: pulsate 1s ease-out infinite;
}
.sl-scrollbar-measure {position: absolute; top: -9999px; width: 50px; height: 50px; overflow: scroll;}
.sl-transition {
transition: -moz-transform ease 200ms;
transition: -ms-transform ease 200ms;
transition: -o-transform ease 200ms;
transition: -webkit-transform ease 200ms;
transition: transform ease 200ms;
}
@-webkit-keyframes pulsate {
0% {transform: scale(0.1); opacity: 0.0;}
50% {opacity: 1; }
100% {transform: scale(1.2); opacity: 0; }
}
@keyframes pulsate {
0% {transform: scale(0.1); opacity: 0.0; }
50% {opacity: 1; }
100% {transform: scale(1.2); opacity: 0; }
}
@-moz-keyframes pulsate {
0% {transform: scale(0.1); opacity: 0.0; }
50% {opacity: 1; }
100% {transform: scale(1.2);opacity: 0; }
}
@-o-keyframes pulsate {
0% {transform: scale(0.1); opacity: 0.0; }
50% {opacity: 1; }
100% {transform: scale(1.2); opacity: 0; }
}
@-ms-keyframes pulsate {
0% {transform: scale(0.1); opacity: 0.0; }
50% {opacity: 1; }
100% {transform: scale(1.2); opacity: 0; }
}
/* 지ì›ë¶ˆê°€ 브ë¼ìš°ì € */
.pop_support_browser{}
.pop_support_browser > .pop_content{
text-align: center; margin:20pt 0; border:0px solid #000;
}
.pop_support_browser .pop_title{margin-bottom: 3em;}
.pop_support_browser .pop_title > h1{font-size:2.25em; font-weight: 600; color: #000;}
.pop_support_browser .pop_title > h5{margin-top:1.5em; line-height:1.7; font-size:1em; font-weight: 400; color:#333;}
.pop_support_browser .pop_title > h5 strong.st1{position:relative;display: inline-block;font-weight: bold; color:#000; font-size: 108%; margin-bottom: 8px;}
.pop_support_browser .pop_title > h5 strong.st1:after{content:""; position:absolute;bottom: 0px; left:0; width:100%;height: 1px; background:#333;}
.pop_support_browser .pop_title > h5 span{display: block;}
.pop_support_browser .browser_list{
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
width:80%; margin:0 auto;
}
.pop_support_browser .browser_list > li{flex:1; text-align: center; margin:0 10px;}
.pop_support_browser .browser_list > li:first-child{margin-left: 0;}
.pop_support_browser .browser_list > li:last-child{margin-right: 0;}
.pop_support_browser .browser_list .ico > img{width:100%;max-width: 60px;}
.pop_support_browser .browser_list .browser_name{font-size:12px; margin-top:7px; color:#222;}
/* 메세지창 */
#alram-explain .mobile .popup-box .popup-box-in{
border-radius: 0.3rem;
}
#alram-explain .popup-box .popup-box-in button{width:21px; height:21px;}
/* custom selet */
.custom-select{position: relative; min-width:60px; text-align: left;}
.custom-select select{display: none;}
.select-selected {background-color: #ccc;}
.select-selected:after {
content: "";
position: absolute; top: 14px; right: 5px; width: 0; height: 0;
border: 6px solid transparent;
border-color: #fff transparent transparent transparent;
}
/*point the arrow upwards when the select box is open (active):*/
.select-selected.select-arrow-active:after {
border-color: transparent transparent #fff transparent;
top: 7px;
}
/*style the items (options), including the selected item:*/
.select-items div,.select-selected {
color: #ffffff;
padding: 8px 16px;
border: 1px solid transparent;
border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
cursor: pointer;
user-select: none;
}
/*style items (options):*/
.select-items {
position: absolute;
background-color: DodgerBlue;
top: 100%;
left: 0;
right: 0;
z-index: 99;
}
/*hide the items when the select box is closed:*/
.select-hide {
display: none;
}
.select-items div:hover, .same-as-selected {
background-color: rgba(0, 0, 0, 0.1);
}
/* .test_vod_webRTC #alram-explain{} */
.test_vod_webRTC #alram-explain .popup-box .popup-box-in button{margin: 7px; text-align: right;}
/* 스피커 마우스 ì²´í¬ */
.check_device{border: 1px solid #ddd; border-radius: 15px; max-width: 700px; margin: auto;}
.check_device .ico{position:relative; }
.check_device .ico.active{background-color: #ed5c23; }
.check_device .ico_speak img{content: url('/img/common/icon-player-speak.svg'); width: auto; height:60%; filter: invert(100%) sepia(0%) saturate(1%) hue-rotate(337deg) brightness(150%) contrast(150%);}
.check_device .ico_play img{content:url('/img/common/ico-player-record-play.svg'); filter: none; height: 100%;}
.check_device .check_device_title{padding:2em; padding-bottom: 0;}
.check_device .check_device_title span{display: block; text-align:center; font-weight: 500; font-size:medium; color:#333; min-height: 21px;}
.check_device .check_device_title i{display: inline-block; width:18px; height: 18px; vertical-align: middle; margin: 0 3px 3px 0; border-radius: 50%;}
.check_device .check_form{border-top: 1px solid #ddd; padding:2em; text-align: center;}
.check_device .check_form_select h1{display: block; font-weight: 600; color: #ed5c23; margin-bottom: 1em;}
.check_device .check_form_select label{cursor: pointer; font-size: 1.5em; margin: 0 1em; font-weight: 600; color: #222;}
.check_device .check_form_select input[type=radio]{width: 18px; height: 18px; margin-right: 5px; cursor: pointer; vertical-align: -3px; color: #222;}
.check_device .check_form_result{text-align: left; background: #F5F5F5; border-radius: 10px; padding:1.5em; max-width: fit-content; margin:30px auto 0;}
.check_device .check_form_result h1{display: block; font-size: 1.1em; font-weight: 700; color: #222;}
.check_device .check_form_result h1::before{font: var(--fa-font-solid); content: "\f058"; font-size: 14px; color: #ed5c23; margin-right: 6px;}
.check_device .check_form_result ul{padding-left: 18px;}
.check_device .check_form_result li{position: relative; padding: 10px 0 0 10px; }
.check_device .check_form_result li::before{position: absolute; left: 0; top: 0; content: "\00b7"; font-size: 30px;}
.check_device .speaker_check_btn{margin:30px auto;}
/* ë§í•˜ê¸° 듣기 í”Œë ˆì´ì–´ ì°½ */
.test_vod_webRTC .control_box .box-player .player-time{font-weight: 500; font-size: 14px;}
.test_vod_webRTC .control_box .box-player .player-txt span{font-size: 14px;}
.test_vod_webRTC .control_box .box-player .player-right .txt_btn{color: #000 !important; padding-bottom: 3px;}
.test_vod_webRTC .control_box .box-guide i.play{font-size:10px; color:#999;}
/* 스피커 & 마ì´í¬ 테스트 í”Œë ˆì´ì–´ì°½ */
.test_vod_webRTC .check_device .control_box{
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-align: start;
align-items: flex-start;
-ms-flex-pack: center;
justify-content: center;
}
.test_vod_webRTC .check_device .control_box{
align-items: center;
padding:2em;
}
.test_vod_webRTC .check_device .control_box .box-player{max-width: 400px;}
.test_vod_webRTC .check_device .control_box .box-player .player-btn.record .ico_btn{background-color: #ed5c23;}
.test_vod_webRTC .check_device .control_box .box-player .ico_record.stop img{max-height: 50%;}
.test_vod_webRTC .check_device .control_box .box-player .player-bars .bars{outline-color: #ed5c23;}
.test_vod_webRTC .check_device .control_box .box-player .player-time{color:#ed5c23;}
.test_vod_webRTC .check_device .control_box .box-player .player-right .txt_btn{padding-bottom: 5px;}
/*
.test_vod_webRTC .check_device .control_box .box-player .player-btn.record.play + .player-status + .player-bars .bars,
.test_vod_webRTC .check_device .control_box .box-player .player-btn.record.play_pause + .player-status + .player-bars .bars{outline-color:#ccc;}
.test_vod_webRTC .check_device .control_box .box-player .player-btn.record.play + .player-status + .player-bars .bars > span,
.test_vod_webRTC .check_device .control_box .box-player .player-btn.record.play_pause + .player-status + .player-bars .bars > span{background: #555;}
*/
/* ì‘ì‹œ ì²´í—˜ ì‚¬ì „í…ŒìŠ¤íŠ¸ */
.webRTC_survey.pretest{}
.webRTC_survey.pretest main{
background-color: transparent;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.webRTC_survey.pretest main .test_title{background:#fff; border-radius: 1em; padding:3em;}
.webRTC_survey.pretest main .test_title h3{font-weight: 400; font-size: 100%; margin: 20px;}
.webRTC_survey.pretest main .test_title .logo_nowntest{display: block; width: 120px; margin:0 auto 30px;}
.webRTC_survey.pretest main .test_title .button-section{margin-top:30px;}
.webRTC_survey.pretest main .test_title button.btn-pretest-connect{
font-family: inherit; line-height: 1.5; height: inherit; margin: 0;
}
.overlay_wrap{
position: fixed; top: 0; left: 0; z-index: 1051; width: 100%; height: 100%; overflow: hidden; outline: 0;
display: flex;
justify-content: center;
align-items: center;
}
.overlay_wrap.opavity_50{background-color: rgba(0, 0, 0, 0.5); }
.overlay_wrap .ico_loading{position: relative;}
.overlay_wrap .ico_loading span{
position: absolute; bottom: -2em; left:50%; margin-top: 1em;;
display: block; color: #ed5c23; font-size: 110%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
}
/* 통합ì‘시창 화면 í¬ê¸° ì¡°ì ˆ ìœ„ì¹˜ì¡°ì • */
main.inner .screen_zoom_inout {margin: -1.75rem 18px .75rem auto;}
main.inner .screen_zoom_inout ~ .box_ab50{position: relative; transform:none; top:0; left: 0;}
@media (max-width: 1200px) {
main.inner .screen_zoom_inout{margin-top: 12px;}
}
/* QA 후 추가작업 */
.webRTC_survey .survey-select-arr label br + span.img-wrap{margin-top: 30px;}
.survey-set h5 > span > div ~ div{margin-top: 30px;}
/* ê³µì§€í™•ì¸ ë° ì˜¤ë¥˜ì‹ ê³ íŒì—…ì°½ */
#noticeErrorPop {
position: fixed;
width: 100%;
height: 100%;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 10001;
pointer-events: none;
}
#noticeErrorPop>div {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
.popup_notice {
width: 420px;
height: 621px;
position: relative;
pointer-events: auto;
border-radius: 10px;
border-top: 25px solid #ededed !important;
box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 8px;
}
#noticeErrorPop iframe {
width: 420px;
height: 621px;
border: 1px solid #dcdcdc;
pointer-events: auto;
border-radius: 10px;
}
#noticeErrorClose {
position: absolute;
top: 17px !important;
right: 17px !important;
cursor: pointer;
filter: invert(100%) sepia(100%) saturate(1%) hue-rotate(116deg) brightness(150%) contrast(101%);
z-index: 999;
}
.write-container .write .write-content .form-control {
padding: 0;
}
.form-control {
padding: 0;
}
@media all and (max-width: 420px) {
#noticeErrorPop>div {
align-items: flex-end;
}
.popup_notice {
width: 100%;
height: 100%;
}
#noticeErrorPop iframe {
width: 100%;
height: 100%;
position: absolute;
bottom: 0;
}
#noticeErrorClose {
top: 27px !important;
}
}
/* 시험 화면 ë°– í´ë¦ ì‹œ 메세지 */
.focus_chk_box {
position: fixed;
width: 100%;
height: 100%;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 10002;
}
.focus_chk {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
align-items: center;
justify-content: center;
padding: 0 25px;
border: 0;
background-color: rgba(0, 0, 0, 0);
}
.focus_chk_txt {
text-align: center;
font-size: 18px;
color: #222;
font-weight: 500;
background-color: #ffffff;
padding: 20px;
border-radius: 10px;
border: 2px solid #dcdcdc;
}
@media all and (max-width: 420px) {
.focus_chk_txt {
font-size: 16px;
}
}
/* ë‚¨ì€ ì‹œí—˜ 수 íŒì—… */
.no_check::-webkit-scrollbar {
width: 7px;
}
.no_check::-webkit-scrollbar-thumb {
background: #a0a0a0; /* 스í¬ë¡¤ë°” ìƒ‰ìƒ */
}
.no_check::-webkit-scrollbar-track {
background: #dcdcdc; /*스í¬ë¡¤ë°” ë’· ë°°ê²½ 색ìƒ*/
}
.primary_color {
color: #ed5c23;
}
.primary_back {
background-color: #ed5c23;
}
.sub_back {
background-color: #FFE6DC;
}
.modal_wrap {
width: 100%;
height: 100%;
z-index: 99991;
}
.modal_overlay {
position: fixed;
width: 100%;
height: 100%;
top: 0;
background-color: rgb(0 0 0 / 0.5);
}
.modal_body {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 476px;
height: auto;
max-height: 450px;
background-color: #fff;
border-radius: 10px;
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}
.modal_con {
padding: 20px;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 20px;
}
.modal_con .proposal {
/* display: flex;
align-items: center;
justify-content: center; */
font-size: 16px;
color: #222;
gap: 5px;
text-align: center;
}
.modal_con .proposal p {
font-weight: 500;
text-align: center;
line-height: 150%;
}
.modal_con .proposal .primary_color {
font-weight: 700;
}
.modal_con .material-symbols-outlined {
text-align: center;
width: 100%;
margin-top: 0;
font-size: 72px;
color: #dcdcdc;
}
.modal_con .modal_icon {
width: 100%;
display: flex;
justify-content: center;
}
.modal_con .ico_warning {
text-align: center;
width: 100%;
margin-top: 0;
width: 68px;
}
.logo_src_nowntest {
position: absolute;
position: absolute;
display: flex;
justify-content: space-between;
width: 100%;
right: 0;
padding: 0 20px;
}
.logo_src_nowntest img {
width: 90px;
}
.logo_src_nowntest img.close {
width: 20px;
height: 20px;
cursor: pointer;
}
.warning_text_wrap {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.warning_text_wrap p.warning_text {
position: relative;
color: #333;
font-size: 14px;
font-weight: 500;
line-height: 140%;
text-align: center;
padding-left: 10px;
display: inline-block;
}
.warning_text_wrap p.warning_text::before {
position: absolute;
content: '※';
color: #ed5c23;
font-size: 16px;
left: 0;
top: 50%;
transform: translateY(-50%);
}
.warning_text_wrap p.warning_text .primary_color {
font-weight: 600;
}
.btn_wrap {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
.modal_btn button {
width: 130px;
height: 42px;
line-height: 42px;
text-align: center;
border-radius: 5px;
font-size: 16px;
font-weight: 600;
}
.modal_btn button.sub_back {
color: #ed5c23;
}
.modal_btn .btn_reunlocking {
color: #fff;
}
.no_check {
position: relative;
background-color: #f5f5f5;
border-radius: 5px;
padding: 10px;
height: 98px;
overflow-y: auto;
}
.no_check .no_check_list {
display: flex;
align-items: center;
justify-content: center;
gap: 7px;
margin-top: 15px;
flex-wrap: wrap;
}
.no_check .no_check_list li {
position: relative;
font-size: 18px;
color: #333;
font-weight: 600;
}
.no_check .no_check_list li::after {
position: absolute;
content: ',';
}
.no_check .no_check_list li:last-child:after {
content: '';
}
.no_check_wrap {
position: relative;
margin-top: 15px;
}
.no_check_title {
position: absolute;
top: -12px;
left: 50%;
transform: translateX(-50%);
border: 1px solid #bbb;
background-color: #fff;
padding: 3px 10px;
border-radius: 50px;
line-height: 20px;
color: #222;
z-index: 2;
font-weight: 500;
}
@media all and (max-width: 768px) {
.modal_body {
width: 94%;
}
.modal_con {
padding: 12px;
}
}
@media all and (max-width: 400px) {
.modal_con .proposal {
flex-direction: column;
}
.no_check .no_check_list li {
font-size: 16px;
}
}
/* 답안표기란 ì¸í¬ íŒì—… */
.modal_wrap.omr_info_modal * {
line-height: 1.4;
}
.modal_wrap.omr_info_modal .modal_body {
height: auto;
max-height: 80vh;
}
.modal_wrap.omr_info_modal .modal_con {
height: calc(100% - 48px);
}
.modal_wrap.omr_info_modal .omr_ex_wrap {
display: flex;
justify-content: center;
margin-bottom: 20px;
}
.modal_wrap.omr_info_modal .logo_src_nowntest {
top: 20px;
flex-direction: row-reverse;
}
.modal_wrap.omr_info_modal .pop_title {
text-align: center;
margin-top: 20px;
color: #333;
}
.modal_wrap.omr_info_modal .pop_title p {
font-weight: 700;
font-size: 20px;
}
.modal_wrap.omr_info_modal .omr_ex_wrap {
display: flex;
justify-content: center;
}
.modal_wrap.omr_info_modal .omr_ex {
display: flex;
align-items: center;
justify-content: center;
gap: 25px;
border: 2px solid #ed5c23b0;
border-radius: 10px;
padding: 34px 20px 12px;
}
.modal_wrap.omr_info_modal .omr_ex img {
width: 28px;
}
.modal_wrap.omr_info_modal .omr_ex .number {
font-size: 20px;
font-weight: 700;
color: #222;
}
.modal_wrap.omr_info_modal .omr_ex .number,
.modal_wrap.omr_info_modal .omr_ex .omr_num,
.modal_wrap.omr_info_modal .omr_ex .icon_check {
position: relative;
}
.modal_wrap.omr_info_modal .omr_ex .number::after,
.modal_wrap.omr_info_modal .omr_ex .omr_num::after,
.modal_wrap.omr_info_modal .omr_ex .icon_check::after {
position: absolute;
content: '';
background-color: #FD3B22;
color: #fff;
width: 16px;
height: 16px;
border-radius: 30px;
font-size: 12px;
font-weight: 400;
display: flex;
align-items: center;
justify-content: center;
top: -23px;
left: 50%;
transform: translateX(-50%);
width: 18px;
height: 18px;
}
.modal_wrap.omr_info_modal .omr_ex .number::after {
background: url('/img/template/ico_omr_info_num_1.svg') no-repeat center;
}
.modal_wrap.omr_info_modal .omr_ex .omr_num::after {
background: url('/img/template/ico_omr_info_num_2.svg') no-repeat center;
}
.modal_wrap.omr_info_modal .omr_ex .icon_check::after {
background: url('/img/template/ico_omr_info_num_3.svg') no-repeat center;
}
.modal_wrap.omr_info_modal .omr_ex .omr_num {
display: flex;
gap: 5px;
}
.modal_wrap.omr_info_modal .omr_info_wrap {
margin-top: 20px;
}
.modal_wrap.omr_info_modal .omr_info {
margin-bottom: 20px;
}
.modal_wrap.omr_info_modal .omr_info:last-child {
margin-bottom: 0;
}
.modal_wrap.omr_info_modal .omr_info .omr_info_title {
position: relative;
margin-bottom: 3px;
display: flex;
align-items: center;
gap: 15px;
padding-left: 5px;
}
.modal_wrap.omr_info_modal .omr_info .omr_info_title::before {
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
content: '';
width: 18px;
height: 18px;
}
.modal_wrap.omr_info_modal .omr_info .omr_info_title1::before {
background: url('/img/template/ico_omr_info_num_1.svg') no-repeat center;
}
.modal_wrap.omr_info_modal .omr_info .omr_info_title2::before {
background: url('/img/template/ico_omr_info_num_2.svg') no-repeat center;
}
.modal_wrap.omr_info_modal .omr_info .omr_info_title3::before {
background: url('/img/template/ico_omr_info_num_3.svg') no-repeat center;
}
.modal_wrap.omr_info_modal .omr_info .omr_info_title p {
padding-left: 22px;
font-size: 16px;
color: #333;
font-weight: 600;
}
.modal_wrap.omr_info_modal .omr_info .omr_info_title .omr_info_ex {
display: flex;
align-items: center;
gap: 7px;
}
.modal_wrap.omr_info_modal .omr_info .omr_info_title .omr_info_ex b:not(.primary_color) {
color: #333;
}
.modal_wrap.omr_info_modal .omr_info .omr_info_title .omr_info_ex img {
width: 26px;
}
.modal_wrap.omr_info_modal .omr_info .omr_info_description {
padding-left: 25px;
}
.modal_wrap.omr_info_modal .omr_info .omr_info_description p {
position: relative;
padding-left: 10px;
color: #555;
}
.modal_wrap.omr_info_modal .omr_info .omr_info_description p::before {
position: absolute;
content: '-';
left: 0;
}
/* omr_wrap 기본 ìƒíƒœ (슬ë¼ì´ë“œ 숨기기) */
.omr_wrap {
position: fixed;
top: 20px;
bottom: 20px;
right: -250px;
width: 242px;
height: 100%;
transition: right 0.3s ease, opacity 0.3s ease;
z-index: 10001;
}
/* omr_wrap 활성화 ìƒíƒœ (슬ë¼ì´ë“œ 열기) */
.omr_wrap.on {
right: 0; /* 슬ë¼ì´ë“œê°€ 화면 안으로 ì´ë™ */
opacity: 1;
}
/* omr_fold_wrap 기본 ìƒíƒœ (버튼 오른쪽 ë) */
.omr_fold_wrap {
position: fixed;
top: 32px;
right: 15px;
transition: right 0.3s ease;
z-index: 99991;
}
@media all and (max-width: 1030px) {
.omr_fold_wrap {
top: 130px;
right: 20px;
}
}
.omr_fold_wrap.rotate {
right: 200px;
top: 32px;
}
/* omr_fold 기본 ìŠ¤íƒ€ì¼ */
.omr_fold {
background: #fff;
border-radius: 20px;
cursor: pointer;
transition: all 0.3s ease;
z-index: 0;
border-radius: 50px;
padding: 7px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
transition: 1s ease;
}
.omr_fold img {
width: 18px;
transform: rotate(0deg);
transition: transform 0.3s ease;
filter: invert(40%) sepia(67%) saturate(1238%) hue-rotate(345deg) brightness(95%) contrast(95%);
}
.omr_fold_wrap.rotate .omr_fold img {
transform: rotate(180deg);
}
/* omr_fold í…스트 */
.omr_fold .text {
font-size: 15px;
font-weight: 500;
color: #ed5c23;
text-align: center;
padding-right: 5px;
opacity: 0;
transition: 1s ease;
display: none;
}
/* 버튼 hover ì‹œ í…스트 표시 */
@media (hover:hover) and (pointer: fine) {
/* .omr_fold:hover {
padding-right: 13px;
box-shadow: 0 0 8px 1px rgba(255, 199, 176, 0.7);
border: 1px solid rgb(255, 129, 74);
border-right: 0;
background-color: #fff;
transition: all 0.3s ease;
} */
.omr_wrap:not(.on) .omr_fold:hover {
padding-left: 14px;
}
.omr_wrap:not(.on) .omr_fold:hover .text {
display: block;
opacity: 1;
transition: 0.8s;
}
}
.omr_wrap.on .text {
display: none;
}
/* omr_wrap 내부 ìŠ¤íƒ€ì¼ */
.omr_wrap .omr_body {
width: 242px;
overflow: hidden;
box-shadow: rgba(17, 17, 26, 0.1) 0px 0px 16px;
border-radius: 15px 0 0 15px;
display: flex;
flex-direction: column;
max-height: calc(100% - 40px);
}
.omr_wrap .omr_body .omr_header {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
height: 58px;
padding: 8px;
border-bottom: 1px solid #FBEBE5;
border-radius: 15px 0 0 0;
flex-shrink: 0;
}
.omr_wrap .omr_body .omr_header .omr_title {
width: 100%;
}
.omr_wrap .omr_body .omr_header .omr_title > div {
display: flex;
align-items: center;
gap: 12px;
font-size: 18px;
font-weight: 700;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 100%;
justify-content: center;
}
.omr_wrap .omr_body .omr_header .omr_title .icon_info {
width: 18px;
height: 18px;
cursor: pointer;
filter: invert(100%) sepia(31%) saturate(5904%) hue-rotate(312deg) brightness(122%) contrast(101%);
}
/* omr_wrap ë‚´ìš© 스í¬ë¡¤ ìŠ¤íƒ€ì¼ */
.omr_wrap .omr_body .omr_con {
display: flex;
flex-direction: column;
border-radius: 0 0 0 15px;
width: 100%;
min-height: auto;
max-height: calc(100% - 58px);
overflow-x: hidden;
overflow-y: auto;
}
.omr_wrap .omr_body .omr_con table {
width: 100%;
height: auto;
}
.omr_wrap .omr_body .omr_con .ico_check {
font-size: 20px;
color: #dcdcdc;
}
.omr_wrap .omr_body .omr_con table {
margin-top: 0;
}
.omr_wrap .omr_body .omr_con table tr {
position: relative;
background-color: #fff;
}
.omr_wrap .omr_body .omr_con table tr::after {
position: absolute;
left: 0;
bottom: 0;
content: '';
width: 100%;
height: 1px;
border: 0.1px dashed #ffd4c380;
}
.omr_wrap .omr_body .omr_con table tr::after {
position: absolute;
left: 0;
bottom: 0;
content: '';
width: 100%;
height: 1px;
border: 0.1px dashed #ffd4c380;
}
.omr_wrap .omr_body .omr_con table td {
position: relative;
text-align: center;
vertical-align: middle;
height: 40px;
overflow: hidden;
}
.omr_wrap .omr_body .omr_con table td:first-child {
width: 48px;
background-color: #FFF5F1;
color: #333;
font-weight: 600;
font-size: 15px;
cursor: pointer;
}
.omr_wrap .omr_body .omr_con table td:first-child.check {
color: #ed5c23;
}
.omr_wrap .omr_body .omr_con table td:nth-child(2) {
width: 153px;
text-align: left;
color: #F3926B;
font-weight: 500;
padding: 0 0 0 12px;
white-space: nowrap;
font-size: 15px;
background-color: #fff;
}
.omr_wrap .omr_body .omr_con table td:nth-child(2) p {
display: inline-block;
padding: 3px 6px;
font-weight: 500;
}
.omr_wrap .omr_body .omr_con table td:nth-child(2) p.check {
background-color: #ed5c23;
padding: 3px 6px;
border-radius: 5px;
color: #fff;
}
.omr_wrap .omr_body .omr_con table td:nth-child(2) b.answer_text {
color: #777;
padding-left: 5px;
font-weight: 400;
}
.omr_wrap .omr_body .omr_con table td:nth-child(2) b.answer_text::after {
content: "";
position: absolute;
top: 0;
right: 0;
width: 50px; /* ê·¸ë¼ë°ì´ì…˜ ì˜ì—ì˜ ë„ˆë¹„ */
height: 100%;
background: linear-gradient(to left, white, rgba(255, 255, 255, 0));
pointer-events: none; /* ê·¸ë¼ë°ì´ì…˜ ì˜ì—ì´ í´ë¦ì— ì˜í–¥ì„ 주지 ì•Šë„ë¡ ì„¤ì • */
}
.omr_wrap .omr_body .omr_con table td:nth-child(3) {
background-color: #fff;
}
.omr_wrap .omr_body .omr_con table td:nth-child(4) {
background-color: #fff;
}
.omr_wrap .omr_body .omr_con table td .omr_num,
.omr_wrap .omr_body .omr_con table td .omr_en,
.omr_wrap .omr_body .omr_con table td .omr_ko,
.omr_wrap .omr_body .omr_con table td .omr_ox {
width: 25px;
height: 25px;
display: inline-block;
cursor: pointer;
margin-right: 1px;
vertical-align: middle;
}
.omr_wrap .omr_body .omr_con table td .omr_num.omr_num1 {
background: url('/img/template/orm_num_1.svg') no-repeat center;
}
.omr_wrap .omr_body .omr_con table td .omr_num.omr_num2 {
background: url('/img/template/orm_num_2.svg') no-repeat center;
}
.omr_wrap .omr_body .omr_con table td .omr_num.omr_num3 {
background: url('/img/template/orm_num_3.svg') no-repeat center;
}
.omr_wrap .omr_body .omr_con table td .omr_num.omr_num4 {
background: url('/img/template/orm_num_4.svg') no-repeat center;
}
.omr_wrap .omr_body .omr_con table td .omr_num.omr_num5 {
background: url('/img/template/orm_num_5.svg') no-repeat center;
}
.omr_wrap .omr_body .omr_con table td .omr_num.omr_num1.check {
background: url('/img/template/orm_num_1_fill.svg') no-repeat center;
}
.omr_wrap .omr_body .omr_con table td .omr_num.omr_num2.check {
background: url('/img/template/orm_num_2_fill.svg') no-repeat center;
}
.omr_wrap .omr_body .omr_con table td .omr_num.omr_num3.check {
background: url('/img/template/orm_num_3_fill.svg') no-repeat center;
}
.omr_wrap .omr_body .omr_con table td .omr_num.omr_num4.check {
background: url('/img/template/orm_num_4_fill.svg') no-repeat center;
}
.omr_wrap .omr_body .omr_con table td .omr_num.omr_num5.check {
background: url('/img/template/orm_num_5_fill.svg') no-repeat center;
}
.omr_wrap .omr_body .omr_con table td .omr_en.omr_en1 {
background: url('/img/template/orm_en_1.svg') no-repeat center;
}
.omr_wrap .omr_body .omr_con table td .omr_en.omr_en2 {
background: url('/img/template/orm_en_2.svg') no-repeat center;
}
.omr_wrap .omr_body .omr_con table td .omr_en.omr_en3 {
background: url('/img/template/orm_en_3.svg') no-repeat center;
}
.omr_wrap .omr_body .omr_con table td .omr_en.omr_en4 {
background: url('/img/template/orm_en_4.svg') no-repeat center;
}
.omr_wrap .omr_body .omr_con table td .omr_en.omr_en5 {
background: url('/img/template/orm_en_5.svg') no-repeat center;
}
.omr_wrap .omr_body .omr_con table td .omr_en.omr_en1.check {
background: url('/img/template/orm_en_1_fill.svg') no-repeat center;
}
.omr_wrap .omr_body .omr_con table td .omr_en.omr_en2.check {
background: url('/img/template/orm_en_2_fill.svg') no-repeat center;
}
.omr_wrap .omr_body .omr_con table td .omr_en.omr_en3.check {
background: url('/img/template/orm_en_3_fill.svg') no-repeat center;
}
.omr_wrap .omr_body .omr_con table td .omr_en.omr_en4.check {
background: url('/img/template/orm_en_4_fill.svg') no-repeat center;
}
.omr_wrap .omr_body .omr_con table td .omr_en.omr_en5.check {
background: url('/img/template/orm_en_5_fill.svg') no-repeat center;
}
.omr_wrap .omr_body .omr_con table td .omr_ko.omr_ko1 {
background: url('/img/template/orm_ko_1.svg') no-repeat center;
}
.omr_wrap .omr_body .omr_con table td .omr_ko.omr_ko2 {
background: url('/img/template/orm_ko_2.svg') no-repeat center;
}
.omr_wrap .omr_body .omr_con table td .omr_ko.omr_ko3 {
background: url('/img/template/orm_ko_3.svg') no-repeat center;
}
.omr_wrap .omr_body .omr_con table td .omr_ko.omr_ko4 {
background: url('/img/template/orm_ko_4.svg') no-repeat center;
}
.omr_wrap .omr_body .omr_con table td .omr_ko.omr_ko5 {
background: url('/img/template/orm_ko_5.svg') no-repeat center;
}
.omr_wrap .omr_body .omr_con table td .omr_ko.omr_ko1.check {
background: url('/img/template/orm_ko_1_fill.svg') no-repeat center;
}
.omr_wrap .omr_body .omr_con table td .omr_ko.omr_ko2.check {
background: url('/img/template/orm_ko_2_fill.svg') no-repeat center;
}
.omr_wrap .omr_body .omr_con table td .omr_ko.omr_ko3.check {
background: url('/img/template/orm_ko_3_fill.svg') no-repeat center;
}
.omr_wrap .omr_body .omr_con table td .omr_ko.omr_ko4.check {
background: url('/img/template/orm_ko_4_fill.svg') no-repeat center;
}
.omr_wrap .omr_body .omr_con table td .omr_ko.omr_ko5.check {
background: url('/img/template/orm_ko_5_fill.svg') no-repeat center;
}
.omr_wrap .omr_body .omr_con table td .omr_ox_o {
background: url('/img/template/ox_o.svg') no-repeat;
}
.omr_wrap .omr_body .omr_con table td .omr_ox_x {
background: url('/img/template/ox_x.svg') no-repeat;
}
.omr_wrap .omr_body .omr_con table td .omr_ox_o.check {
background: url('/img/template/ox_o_check.svg') no-repeat;
}
.omr_wrap .omr_body .omr_con table td .omr_ox_x.check {
background: url('/img/template/ox_x_check.svg') no-repeat;
}
.omr_check {
background: url('/img/template/ico_check_before.svg') no-repeat;
background-size: 22px;
width: 22px;
height: 22px;
cursor: pointer;
}
.omr_check.check {
background: url('/img/template/ico_check_after.svg') no-repeat;
background-size: 22px;
width: 22px;
height: 22px;
cursor: pointer;
}
.container {
text-align: center;
}
.test_end_notice_wrap {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 15px;
width: fit-content;
margin: 0 auto;
background-color: #ffeedf;
width: 400px;
height: 400px;
border-radius: 500px;
margin-top: 40px;
}
.test_end_notice_wrap h3 {
font-size: 36px;
font-weight: 700;
background-color: rgba(0, 0, 0, 0);
}
.test_end_notice_wrap p {
text-align: center;
font-size: 22px;
}
/* ì œì¶œí•˜ê¸° 버튼 오른쪽 */
.omr_wrap .btn-subimit {
position: static;
transform: none;
text-align: center;
padding: 17px 0;
background-color: #fff5f1;
}
.btn-subimit .btn {
width: 90%;
margin: 0 auto;
font-size: 18px !important;
}
::-webkit-scrollbar {
width: 6px; /* 세로축 스í¬ë¡¤ ë°” 너비 */
height: 6px; /* 가로축 스í¬ë¡¤ ë°” ë†’ì´ */
padding: 0 2px;
}
::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button:end:increment {
display: block; /* 스í¬ë¡¤ 버튼 표시 */
height: 10px; /* 스í¬ë¡¤ 버튼 ë†’ì´ */
}
::-webkit-scrollbar-thumb {
border-radius: 8px;
background-color: #aaa;
min-height: 50px; /* 스í¬ë¡¤ ì¸(ì´ë™ 가능한 부분)ì˜ ìµœì†Œ ë†’ì´ ì„¤ì • */
}
/* 스í¬ë¡¤ë°” ì¸ í˜¸ë²„ 효과 */
::-webkit-scrollbar-thumb:hover {
background-color: #888; /* 호버 ì‹œ ë” ì§„í•œ 회색으로 변경 */
}
::-webkit-scrollbar-button {
display: none !important;
height: 0;
width: 0;
background-color: rgba(0, 0, 0, 0);
}
::-webkit-scrollbar-track {
background-color: #e9e9e9;
}
.omr_wrap .omr_body .omr_con::-webkit-scrollbar {
width: 6px; /* 세로축 스í¬ë¡¤ ë°” 너비 */
height: 20px; /* 가로축 스í¬ë¡¤ ë°” ë†’ì´ */
}
@media all and (max-width: 768px) {
.webRTC_survey .survey-set .radio label,
.webRTC_survey .survey-set .checkbox label.webRTC_survey .survey-set .radio label,
.webRTC_survey .survey-set .checkbox label {
padding: 0 1em 0 32px;
}
}
@media all and (max-width: 430px) {
.modal_wrap.omr_info_modal .pop_title p {
font-size: 18px;
}
.modal_wrap.omr_info_modal .omr_ex img {
width: 22px;
}
.modal_wrap.omr_info_modal .omr_ex .number {
font-size: 18px;
}
.modal_wrap.omr_info_modal .omr_info .omr_info_title .omr_info_ex img {
width: 22px;
}
}