@charset "UTF-8";
@import url('board.css');

/*popup title area*/
.titArea {height: 80px; margin-bottom: 40px; background: url('#') right -50px top -10px no-repeat #243674; position: relative;}
.titArea h1 {font-size: 24px; font-weight: 500; color: #fff; line-height: 80px; box-sizing: border-box; padding: 0 30px;}
.titArea .btn.close {display: inline-block; width: 20px; height: 20px; font-size: 0; background: url('../images/popup/popup_close.png') center center no-repeat; position: absolute; right: 30px; top: 50%; transform: translateY(-50%);}

.content {padding: 0 30px 30px;}
.content table tbody tr td div .selectbox label {line-height:18px;}
.content table tbody tr td div .selectbox + span {display:inline-block;}
.content table tbody tr td::after {display:block; content:""; clear:both;}
.content table tbody tr td div {margin: 8px 0;}
.content table tbody tr td div.number p {display:inline-block;}
.etc {font-size:14px; color:#666666; margin-left:10px;}

/*popup btn area*/
.btnArea {font-size: 0;}

/*LGN*/
.content .btn.otp {display: block; width: 400px; height: 80px; background-color: #fdb741; border-radius: 5px; text-align: center; margin: 0 auto;}
.content .btn.otp span {color: #fff; line-height: 80px; font-size: 18px; font-weight: 700;}
.content .id {font-size: 18px;}
.content .id span {font-size: 18px; font-weight: 700;}

/* PRI */
.content table tbody tr td div.PRI {float:left; font-size:0;  margin:5px 0;}
.content table tbody tr td div.PRI input[type="radio"] {margin-right:8px; vertical-align:top;}
.content table tbody tr td div.PRI > span{font-size:14px; float:left; margin-right:8px;}
.content table tbody tr td div.PRI div.PImg {display:inline-block; width:140px; box-sizing:border-box; background-color:#f3f3f3; height:80px; margin-right:20px;}
.content table tbody tr td div.PRI div.PImg + div {width:140px;margin-left:25px; margin-top:10px;}
.content table tbody tr td div.PRI div.PImg + div div {background-color:#243674; height:13px; margin-bottom:0;}
.content table tbody tr td div.PRI div.PImg + div p {color:#939393;}

/* 통계 */
.content tbody tr td.result {width:100%; padding-top: 10px; padding-bottom: 10px;}
.content tbody tr td.result div {font-size: 0; display: flex;}
.content tbody tr td.result div .graph {width:76%; float:right; display:inline-block; background: #ebebeb; height: 16px;}
.content tbody tr td.result div .graph span{display: inline-block; background: #243674; height: 100%;}
.content tbody tr td.result div span.txt {float:left; width:24%; color:#666; padding-right:10px;  box-sizing: border-box; font-size: 14px;}
.content tbody tr td.result div span em{color:#000; font-size:14px; font-weight: 500;}

/* 통계 */
.content tbody tr td.result2 {width:100%; padding-top: 10px; padding-bottom: 10px;}
.content tbody tr td.result2 > div {font-size: 0; display: inline-block; width: 100%;   border-bottom: 1px solid #d5d5d5; padding: 5px 14px 14px 14px; box-sizing: border-box; }
.content tbody tr td.result2 div .graph {width:76%; float:right; display:inline-block; background: #ebebeb; height: 16px; box-sizing: border-box;}
.content tbody tr td.result2 div .graph span{display: inline-block; background: #243674; height: 100%;}
.content tbody tr td.result2 div span.txt {float:left; width:100%; color:#666; padding-right:10px;  box-sizing: border-box; font-size: 14px;}
.content tbody tr td.result2 div span.txt_table{float:left; width:23%; color:#666; padding-right:10px;  box-sizing: border-box; font-size: 14px; clear:both; display:block; content:"";
}
.content tbody tr td.result2 div span em{color:#000; font-size:14px; font-weight: 500;}

span.red {color: #e3500c; font-weight: 700;}
p.B {font-size: 18px; font-weight: bold;}

/*라이선스 정보 팝업*/
.licenseInfo h2 span {color: inherit;}
.licenseInfo h2 span::after {content: ""; display: inline-block; width: 2px; height: 14px; background-color: #243674; margin: 0 10px;}
.licenseInfo h2 span:last-child::after {content: none;}

.licenseInfo .name {position: relative;}
.licenseInfo .name span:hover {cursor: pointer; text-decoration: underline;}
.licenseInfo .name .moreInfo {display: none; width: 240px; box-sizing: border-box; padding: 20px; text-align: left; position: absolute; left: 80%; top: -6px; z-index: 10; box-shadow: 0 1px 4px rgba(0,0,0,0.2); background-color: #fff;}
.licenseInfo .name .moreInfo.on {display: block;}
.licenseInfo .name .moreInfo ul li::before {content: ""; display: inline-block; width: 4px; height: 4px; border-radius: 50%; background-color: #333; vertical-align: middle; margin-right: 6px;}
.licenseInfo .name .moreInfo ul li:not(:first-child) {margin-top: 10px;}

/*210317 김은서 추가 (비밀번호 초기화 메일)*/
.popup.reset .content {text-align: center;}
.popup.reset .content p {font-size: 16px; margin-top: 40px;}