Index: arms/html/dashboard/content-container.html =================================================================== diff -u -r6965e6d97f91b22f1e9187d9909a1a9647ff1580 -r61c7b7d78fe668cc4ec7ed3bde2f7bd6a3afaf16 --- arms/html/dashboard/content-container.html (.../content-container.html) (revision 6965e6d97f91b22f1e9187d9909a1a9647ff1580) +++ arms/html/dashboard/content-container.html (.../content-container.html) (revision 61c7b7d78fe668cc4ec7ed3bde2f7bd6a3afaf16) @@ -114,19 +114,37 @@

- Time 분석 + Time ( 작업 일정 )

+
+
+ ✔ 총 제품(서비스) 버전 개수 : n/a 개
+ ✔ 요구사항이 있는 제품(서비스) 버전 개수 : n/a 개
+
+
+
+
+
+
@@ -138,34 +156,31 @@

- 투입된 작업 그룹 현황 컬러표 + Scope ( 요구사항 및 연결이슈 수 )

- +
@@ -176,34 +191,33 @@

- 투입된 작업 그룹 현황 컬러표 + Resource ( 자원분배 )

- +
@@ -280,7 +294,7 @@ -->
-
+

@@ -329,7 +343,7 @@ 현재 선택된 제품이 없습니다.

-
+
@@ -348,15 +362,13 @@
-
-
현재 선택된 제품이 없습니다. -
- +
@@ -684,4 +696,11 @@ font-size: 12px; font-weight: bold; } + .timeline:before { + left: 0px !important; + } + .time_element { + overflow-x: scroll; + white-space:nowrap; + } \ No newline at end of file Index: arms/js/dashboard.js =================================================================== diff -u -r9e50b2c2fb91d66ec9a11b45fbc2ea0bd47c8733 -r61c7b7d78fe668cc4ec7ed3bde2f7bd6a3afaf16 --- arms/js/dashboard.js (.../dashboard.js) (revision 9e50b2c2fb91d66ec9a11b45fbc2ea0bd47c8733) +++ arms/js/dashboard.js (.../dashboard.js) (revision 61c7b7d78fe668cc4ec7ed3bde2f7bd6a3afaf16) @@ -24,7 +24,9 @@ "../reference/jquery-plugins/d3-v4.13.0/d3.v4.min.js", //d3 변경 "./js/common/colorPalette.js", "./mock/versionGauge.json", - "../reference/jquery-plugins/info-chart-v1/js/D.js" + "../reference/jquery-plugins/info-chart-v1/js/D.js", + "./js/dashboard/chart/timeline_custom.js", + "./js/dashboard/chart/infographic_custom.css" ], ["../reference/jquery-plugins/select2-4.0.2/dist/css/select2_lightblue4.css", @@ -74,6 +76,7 @@ dashboardColor = dashboardPalette.dashboardPalette04; console.log(dashboardColor); + //console.log("version-timeline-bar element"); console.log($("#version-timeline-bar")[0]); //제품(서비스) 셀렉트 박스 이니시에이터 makePdServiceSelectBox(); @@ -124,6 +127,7 @@ statusCode: { 200: function (data) { ////////////////////////////////////////////////////////// + for (var k in data.response) { var obj = data.response[k]; var newOption = new Option(obj.c_title, obj.c_id, false, false); @@ -160,21 +164,15 @@ //getIssueStatus($("#selected_pdService").val(), endPointUrl); //통계로드 //statisticsLoad($("#selected_pdService").val(), null); + console.log("선택된 제품(서비스) c_id = " + $("#selected_pdService").val()); + statisticsMonitor($("#selected_pdService").val()); - d3.json("./mock/versionGauge.json", function (data) { - //var versionProgress = data.response; - var versionProgress = data; - console.log("=== versionProgress start ==="); - console.log(versionProgress); - console.log("=== versionProgress end ===") - if (versionProgress.length !== 0) { - $("#notifyNoVersion").hide(); - $("#project-start").show(); - $("#project-end").show(); - drawVersionProgress(versionProgress); - } - }); + + //타임라인 + $("#notifyNoVersion2").hide(); + Timeline.init($("#version-timeline-bar"), graphViewList); + }); } // end makePdServiceSelectBox() @@ -358,7 +356,71 @@ update(data1) } +// 1. 제품서비스로만 볼 경우 +// 2. 버전만 따로 선택해서 보고싶은 경우. +function statisticsMonitor(pdservice_id, pdservice_version_id) { + //1. 좌상 게이지 차트. + //2. Time ( 작업일정 ) - 버전 개수 삽입 + d3.json("/auth-user/api/arms/pdService/getNodeWithVersionOrderByCidDesc.do?c_id=" + pdservice_id,function(json) { + console.log("================= by YHS"); + console.log(json); + let versionData = json.pdServiceVersionEntities; + let version_count = versionData.length; + console.log("등록된 버전 개수 = " + version_count); + if(version_count !== undefined) { + $('#version_count').text(version_count); + + if (version_count >= 0) { + let today = new Date(); + console.log(today); + + $("#notifyNoVersion").hide(); + $("#project-start").show(); + $("#project-end").show(); + var versionGauge = []; + versionData.forEach(function (versionElement, idx) { + console.log(idx); + console.log(versionElement); + var gaugeElement = { + "current_date": today.toString(), + "version_name": versionElement.c_title, + "version_id": versionElement.c_id, + "start_date": (versionElement.c_pds_version_start_date == "start" ? today : versionElement.c_pds_version_start_date), + "end_date": (versionElement.c_pds_version_end_date == "end" ? today : versionElement.c_pds_version_end_date) + } + versionGauge.push(gaugeElement); + }); + console.log(versionGauge); + drawVersionProgress(versionGauge); + } + } + }); + + //제품서비스 - status 기반 + $.ajax({ + url: "/auth-user/api/arms/reqStatus/T_ARMS_REQSTATUS_" + pdservice_id + "/getStatistics.do?version=" + pdservice_version_id, + type: "GET", + contentType: "application/json;charset=UTF-8", + dataType: "json", + progress: true, + statusCode: { + 200: function (data) { + console.log(data); + for (var key in data) { + var value = data[key]; + console.log(key + "=" + value); + } + //해당 제품의 총 요구사항 수 (by db, not es) + $('#active_version_count').text(data["version"]); + $('#req_count').text(data["req"]); + $('#linkedIssue_subtask_count').text(+data["issue"]); + } + } + }); +} + + // function drawVersionProgress(data) { var Needle, @@ -386,6 +448,7 @@ svg, totalPercent, width, + versionId, versionName, waveName; @@ -404,7 +467,7 @@ width = 200; height = width; - radius = Math.min(width, height) / 2.1; + radius = Math.min(width, height) / 2.5; // percToDeg percToRad degToRad 고정 percToDeg = function (perc) { @@ -420,7 +483,7 @@ }; // svg = d3 - .select("#version-progress-bar") + .select("#versionGaugeChart") .append("svg") .attr("viewBox", [29, 19, width - 40, height - 40]) .append("g"); @@ -430,7 +493,7 @@ .attr("transform", "translate(" + (width + margin.left) / 2 + ", " + (height + margin.top) / 2 + ")"); var tooltip = d3 - .select("#version-progress-bar") + .select("#versionGaugeChart") .append("div") .style("opacity", 0) .attr("class", "tooltip") @@ -490,6 +553,7 @@ totalDate = startDDay + endDDay; var mouseover = function (d) { + var subgroupId = d.version_id; var subgroupName = d.version_name; var subgroupValue = new Date(d.start_date).toLocaleDateString() + " ~ " + new Date(d.end_date).toLocaleDateString(); tooltip.html("버전명: " + subgroupName + "
" + "기간: " + subgroupValue).style("opacity", 1); @@ -499,7 +563,8 @@ d3.selectAll(".myWave").style("opacity", 0.2); d3.selectAll(".myStr").style("opacity", 0.2); - d3.selectAll(".wave-" + subgroupName).style("opacity", 1); + d3.selectAll(".wave-" + subgroupId).style("opacity", 1); + //d3.selectAll(".wave-" + subgroupName).style("opacity", 1); }; var mousemove = function (d) { @@ -518,9 +583,10 @@ totalPercent += sectionPerc; startPadRad = sectionIndx === 0 ? 0 : padRad / 2; endPadRad = sectionIndx === numSections ? 0 : padRad / 2; + versionId = data[sectionIndx - 1].version_id; versionName = data[sectionIndx - 1].version_name; //waveName = data[sectionIndx - 1].mig_wave_link; - + console.log(versionId); var sectionData = data[sectionIndx - 1]; var arc = d3 @@ -530,14 +596,16 @@ .startAngle(arcStartRad + startPadRad) .endAngle(arcEndRad - endPadRad); - var section = chart.selectAll(".arc.chart-color" + sectionIndx + ".myWave.wave-" + versionName); + var section = chart.selectAll(".arc.chart-color" + sectionIndx + ".myWave.wave-" + versionId); + //var section = chart.selectAll(".arc.chart-color" + sectionIndx + ".myWave.wave-" + versionName); //var section = chart.selectAll(".arc.chart-color" + sectionIndx + ".myWave.wave-" + waveName); section .data([sectionData]) .enter() .append("g") - .attr("class", "arc chart-color" + sectionIndx + " myWave wave-" + versionName) + .attr("class", "arc chart-color" + sectionIndx + " myWave wave-" + versionId) + //.attr("class", "arc chart-color" + sectionIndx + " myWave wave-" + versionName) //.attr("class", "arc chart-color" + sectionIndx + " myWave wave-" + waveName) .on("mouseover", mouseover) .on("mousemove", mousemove) @@ -551,7 +619,8 @@ .attr("d", arc); chart - .selectAll(".arc.chart-color" + sectionIndx + ".myWave.wave-" + versionName) + .selectAll(".arc.chart-color" + sectionIndx + ".myWave.wave-" + versionId) + //.selectAll(".arc.chart-color" + sectionIndx + ".myWave.wave-" + versionName) //.selectAll(".arc.chart-color" + sectionIndx + ".myWave.wave-" + waveName) .append("text") .attr("class", "no-select") @@ -625,9 +694,42 @@ return Needle; })(); - needle = new Needle(38, 2); + needle = new Needle(25, 7.5); needle.drawOn(chart, 0); needle.animateOn(chart, startDDay / totalDate); -} \ No newline at end of file +} + +var graphViewList = [ + { + title: '엔씨소프트 ( NCSOFT )', + startDate: '2019.12.30', + endDate: '2022.11.04', + }, + { + title: 'Daumsoft', + startDate: '2010.12.01', + endDate: '2011.12.01', + }, + { + title: '대성그룹 대성글로벌네트워크 1차', + startDate: '2008.08.01', + endDate: '2010.12.01', + }, + { + title: '고려대학교 컴퓨터정보통신대학원', + startDate: '2013.02.01', + endDate: '2016.07.01', + }, + { + title: '대성그룹 대성글로벌네트워크 2차', + startDate: '2011.12.01', + endDate: '2013.05.01', + }, + { + title: '안철수연구소 ( AHNLAB )', + startDate: '2013.05.01', + endDate: '2019.12.30', + }, +]; \ No newline at end of file Index: arms/js/dashboard/chart/infographic_custom.css =================================================================== diff -u --- arms/js/dashboard/chart/infographic_custom.css (revision 0) +++ arms/js/dashboard/chart/infographic_custom.css (revision 61c7b7d78fe668cc4ec7ed3bde2f7bd6a3afaf16) @@ -0,0 +1,2866 @@ +.ellipsis { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + word-wrap: normal; +} + +div.wrapResumeAll { + margin-top: 30px; +} +div.wrapResumeAll:first-of-type { + margin-top: 0px; +} + +.infographic.basic { + /*background-color: #fff;*/ +} + +.infographic.basic header { + height: 245px; + border-bottom: 1px dotted #dcdcdc; + box-sizing: border-box; +} + +.infographic.basic header:after { + content: ""; + clear: both; + display: block; +} + +.infographic.basic h1 { + font-weight: 400; + font-size: 21px; + height: 61px; + border-bottom: 1px dotted #eaeaea; +} + +.infographic.basic h1 span.displayNo { + font-size: 16px; +} + +.infographic.basic h2 { + font-weight: 500; + font-size: 15px; +} + +.infographic.basic h2 .number { + font-weight: 400; + color: #3b7bbd; + font-size: 15px; + line-height: 1.4; + float: right; + letter-spacing: 1px; + font-family: inherit; +} + +.infographic.basic header .main-info .recruitField { + padding: 13px 0; + height: 104px; + box-sizing: border-box; + border-bottom: 1px dotted #eaeaea; + font-size: 12px; +} + +.infographic.basic header time { + margin-top: 1px; + font-size: 11px; + color: #618bcf; + margin-bottom: 7px; + display: block; + letter-spacing: 0.3px; +} + +.infographic.basic header > div { + padding: 15px 0px; + float: left; +} + +.infographic.basic .pull-right { + float: right; +} + +.infographic.basic header .summary { + padding: 0px; + padding-right: 30px; + width: 235px; + height: 223px; +} +.infographic.basic header .images { + margin-left: 30px; +} +.infographic.basic header .main-info { + margin-left: 35px; +} + +.infographic.basic header img.photo { + display: block; +} + +.infographic.basic img.icon { + display: inline-block; + vertical-align: middle; +} +.infographic.basic .badge { + width: 110px; + height: 50px; + margin-top: 10px; +} + +.infographicTooltip b { + font-weight: 400; + opacity: 1; +} + +.infographic.basic .badge span { + height: 23px; + display: inline-block; + width: 24px; + text-align: center; +} +.infographic.basic .badge span:last-of-type { + padding-right: 0px; +} + +.infographic.basic .badge img { + display: inline-block; +} + +.infographic.basic header .summary li img.finalAcademicStatusCode { + position: absolute; + left: 66px; + top: 14px; +} + +.infographic.basic header .main-info { + width: 360px; +} + +.infographic.basic img[src*="iconBasicMobile"] { + margin-left: 2px; + margin-right: 7px; +} +.infographic.basic img[src*="iconBasicEmail"] { + margin-right: 5px; +} + +.infographic.basic .contact { + margin-top: 9px; + width: 311px; + height: 49px; + white-space: nowrap; +} + +.infographic.basic .contact span { + display: inline-block; + vertical-align: middle; + width: 118px; + font-size: 12px; + letter-spacing: 0.2px; +} + +.infographic.basic .contact span.email { + width: 160px; +} + +.infographic.basic > div { + border-top: 1px dotted #dcdcdc; +} + +.infographic.basic > div.empty { + border-top: none; + position: relative; + width: 840px; + text-align: center; + top: calc(50% - 125px); + line-height: 1.7; +} + +.infographic.basic > div.empty p { + margin-top: 5px; +} + +.infographic.basic strong { + font-weight: 500; + color: #ea4747; +} +.infographic.basic b { + color: #333; + font-weight: 500; +} + +.infographic.basic .subject { + box-sizing: border-box; + float: left; + width: 278px; + height: 224px; + padding: 30px; + position: relative; + border-left: 1px dotted #dcdcdc; + border-bottom: 1px dotted #dcdcdc; +} +.infographic.basic .subject:nth-of-type(n + 4) { + border-top: none; +} + +.infographic.basic .subject:nth-of-type(3n + 1) { + border-left: none; + border-right: 1px dotted #dcdcdc; +} +.infographic.basic .subject:nth-of-type(3n + 2) { + border-left: none; +} +.infographic.basic .subject:nth-of-type(n + 7) { + border-bottom: none; +} + +.infographic.basic .subject .content { + width: 216px; + height: 110px; + bottom: 30px; + position: absolute; + z-index: 1; +} + +.infographic.basic .subject .content.blind { + box-sizing: border-box; + padding-top: 30px; +} +.infographic.basic .subject .content.blind:before { + content: "블라인드"; + display: block; + font-size: 14px; +} + +.infographic.basic .item { + text-align: left; + position: relative; + dislay: block; + font-size: 13px; +} + +.infographic.basic .item span[title] { + margin: 0 10px; + display: inline-block; + width: 124px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + word-wrap: normal; +} +.infographic.basic .activityList span[title] { + width: 68px; +} +.infographic.basic .item > * { + font-size: 12px; + vertical-align: middle; +} +.infographic.basic .item * { + color: #222; +} + +.infographic.basic .item { + padding: 4px 0px; +} + +.infographic.basic .languageExamList .item { + padding: 9px 0px; +} + +.infographic.basic .languageExamList span[title] { + width: 68px; +} + +.infographic.basic .item .grade { + position: absolute; + right: 0; +} + +.infographic.basic .perfectGrade { +} + +.infographic.basic .foreignSkillData text { + font-size: 11px; + font-weight: 400; +} + +.infographic.basic .foreignSkillData text.textinbar { + font-size: 10px; +} + +/*그래프*/ +.infographic.basic .foreignSkillData svg { + margin: 0 auto; + display: inline-block; +} +.infographic.basic .foreignSkillData svg:first-of-type { + margin-right: 10px; +} +.infographic.basic .foreignSkillData svg ~ svg { + margin-left: 7px; +} + +.infographic.basic .foreignSkillData { + margin: 0 auto; +} + +/*TODO(smireat) 이거 foreignUseSkill바뀔거같음*/ +.infographic.basic .subject .content { + text-align: center; +} + +.infographic.basic .foreignSkillData rect { + fill: #555555; +} +.infographic.basic .foreignSkillData .axis path, +.axis line, +.tick line { + stroke: #555555; + stroke-width: 1; + fill: #555555; + shape-rendering: crispEdges; +} +.infographic.basic .foreignSkillData .axis.y path { + display: none; +} + +.infographic.basic .foreignSkillData .axis.x g.tick line { + display: none; +} +.infographic.basic .foreignSkillData .axis.x g.tick text { + font-size: 12px; +} + +.infographic.basic .subject-wrapper:after { + clear: both; + content: ""; + display: block; +} + +.infographic.basic .subject-wrapper { + border-top: none; +} + +.infographic.basic .subject .empty { + position: relative; + top: 33%; +} +.infographic.basic .awardList .empty { + margin-top: -20px; +} +.infographic.basic .licenseList .empty { + margin-top: -7px; +} + +.infographic.basic .volunteerActivityList .empty { + margin-top: -5px; +} +.infographic.basic .overseaExperienceList .empty { + margin-top: 15px; +} + +.infographic.basic .timeline .labelTimeline { + position: absolute; + top: 23px; + right: 25px; +} +.infographic.basic .timeline .yearList { + height: 23px; + border-top: 1px solid #686868; +} +.infographic.basic .timeline .year { + float: left; + position: relative; + height: 23px; + line-height: 23px; + font-size: 11px; + text-align: center; +} + +.infographic.basic .timeline .year a { + color: #f52267; +} + +.infographic.basic .timeline .year a:hover, +.infographic.basic .timeline .year a.active { + text-decoration: underline; +} + +.infographic.basic .timeline .year:before { + content: ""; + display: block; + position: absolute; + top: calc(50% - 3px); + left: 0px; + width: 1px; + height: 6px; + border-left: 1px solid #aaa; +} +.infographic.basic .timeline .year:first-child:before { + content: none; +} + +.infographic.basic img[src*="iconBasicEducation1"] { + float: left; +} +.infographic.basic img[src*="iconBasicEducation2"] { + float: right; +} + +.infographic.basic h3 { + font-weight: 300; + font-size: 13px; +} + +.infographic.basic .education .content > div:nth-of-type(1) { + padding-top: 12px; + padding-bottom: 12px; + float: right; + width: 120px; +} + +.infographic.basic .education .content > div:nth-of-type(2) { + float: left; + width: 81px; + padding-top: 4px; +} + +/*timeline 타임라인 */ +.infographic.basic .timeline { + position: relative; + box-sizing: border-box; + /*padding: 36px 25px 0;*/ + width: 840px; + height: 305px; + border-top: none; +} + +.infographic.basic .timeline .empty { + margin: 0 auto; + text-align: center; + box-sizing: border-box; + padding-top: 58px; + text-align: center; +} + +.infographic.basic .timeline .labelTimeline { + position: absolute; + top: 23px; + right: 25px; +} +.infographic.basic .timeline .graph { + position: relative; + overflow: hidden; + width: 790px; + height: 231px; +} +.infographic.basic .timeline .graph .block { + position: absolute; + bottom: 0px; + border-top-style: solid; +} +.infographic.basic .timeline .graph .label { + position: absolute; + left: -1px; + bottom: 0px; + box-sizing: border-box; + padding-left: 12px; + width: 120px; + border-left-width: 1px; + border-left-style: solid; + font-size: 11.5px; + line-height: 1.1em; + cursor: help; +} +.infographic.basic .timeline .graph .label .ellipsis { + display: block; + width: 100px; +} +.infographic.basic .timeline .graph .block.military .label, +.infographic.basic .timeline .graph .block.award .label { + padding-left: 18px; +} +.infographic.basic .timeline .graph .label:before { + position: absolute; + left: 0px; + top: 0px; + display: block; + line-height: 0px; +} + +.infographic.basic .timeline .yearList { + height: 23px; + border-top: 1px solid #686868; + overflow: hidden; +} +.infographic.basic .timeline .year { + float: left; + position: relative; + height: 23px; + line-height: 23px; + font-size: 11px; + text-align: center; +} + +.infographic.basic .timeline .year:before { + content: ""; + display: block; + position: absolute; + top: calc(50% - 3px); + left: 0px; + width: 1px; + height: 6px; + border-left: 1px solid #ddd; +} +.infographic.basic .timeline .year:first-child:before { + content: none; +} + +.infographic.basic .content img.world { + position: absolute; + top: -32px; + left: 40px; + z-index: -1; +} +.infographic.basic .content img[src*="iconBasicVolunteer1"] { + position: absolute; + top: 14px; + left: 5px; + z-index: -1; +} + +.infographic.basic .content img[src*="iconBasicVolunteer2"] { + left: -31px; + position: relative; +} + +.infographic.basic div.subject.softwareSkillList { +} +.infographic.basic div.subject.softwareSkillList path { + stroke: #555555; + stroke-width: 1; + fill: #dcf1ff; + shape-rendering: crispEdges; +} +.infographic.basic div.subject.softwareSkillList rect { + fill: #555555; + stroke: black; + stroke-width: 1px; + shape-rendering: crispEdges; +} + +.infographic.basic div.subject.softwareSkillList .bar { + fill: #dcf1ff; +} +.infographic.basic div.subject.softwareSkillList .backbar { + fill: #555; +} +.infographic.basic div.subject.softwareSkillList .axis path, +.axis line, +.tick line { + stroke: #555555; + stroke-width: 1; + fill: #555555; + shape-rendering: crispEdges; +} +.infographic.basic div.subject.softwareSkillList .axis.x path { + display: none; +} + +.infographic.basic div.subject.softwareSkillList .axis.y g.tick line { + display: none; +} +.infographic.basic div.subject.softwareSkillList .axis.y g.tick text { + font-size: 12px; +} + +.infographic.basic header .recruitSectorPriority { + margin-right: 10px; +} + +.infographic.basic header .recruitSectorName { + font-size: 12px; + position: absolute; +} + +.infographic.basic .subject .content .item time { + display: inline-block; + right: 0px; + color: #969696; + letter-spacing: 0.1px; +} + +.infographic.basic .subject .content .item img { + display: inline-block; +} + +.infographic.basic .subject .content .item .grade { + font-size: 14px; + display: inline-block; + letter-spacing: 0.5px; + color: #333; +} +.infographic.basic .subject .content .item .perfectGrade { + color: #969696; + font-weight: 300; +} + +.infographic.basic .subject.education .content time { + font-weight: 400; + color: #333; + font-size: 19px; +} + +.infographic.basic .foreignSkillData .skillBar .bar { + fill: #dcf1ff; +} +.infographic.basic .foreignSkillData .skillBar .backbar { + fill: #555555; +} + +.infographic.basic .foreignSkillData .empty .skillBar .backbar { + fill: #bdcedc; +} +.infographic.basic .foreignSkillData .empty rect { + fill: #bdcedc; +} +.infographic.basic .foreignSkillData .empty .axis path, +.infographic.basic .foreignSkillData .empty .axis line, +.infographic.basic .foreignSkillData .empty .tick line { + fill: #bdcedc; + stroke: #bdcedc; +} + +.infographic.basic .foreignSkillData .empty .skillBar .bar { + fill: #ffffff; +} + +.infographic.basic .foreignSkillData .empty text { + color: #b0c3d5; + fill: #b0c3d5; +} + +.infographic.basic .foreignSkillData text { + fill: #000000; +} + +.infographic.basic .langName { + fill: #000000; +} + +.infographicTooltip:before { + content: ""; + position: absolute; + display: block; + width: 0px; + height: 0px; + border-left: 10px solid #283041; + border-right: 10px solid transparent; + border-bottom: 10px solid #283041; + border-top: 10px solid transparent; + top: -10px; + left: 0px; +} + +.infographicTooltip { + text-align: center; + position: absolute; + color: white; + border: none; + background-color: #283041; + padding: 6px 10px; + z-index: 100; + transition: opacity 0.1s; +} + +.infographic.basic header .summary li { + width: 105px; + height: 105px; + display: block; + float: left; + border-radius: 100%; + text-align: center; + padding-top: 72px; + box-sizing: border-box; + position: relative; + z-index: 1; +} + +.infographic.basic header .summary span { + display: block; +} +.infographic.basic header .summary span.dd { + position: relative; + top: -48px; +} +.infographic.basic header .summary span.dt { + font-size: 9px; + font-weight: 500; +} + +.infographic.basic header .summary li img { + position: absolute; + top: 0px; + left: 0px; + z-index: -1; +} + +.infographic.basic header .summary li span.dd { + font-weight: 500; + font-size: 10px; +} + +.infographic.basic header .summary li.achievement span.dd { + position: relative; + top: -43px; + left: 1px; +} + +.infographic.basic header .summary li.score span.dd { + font-size: 12px; +} + +.infographic.basic header .summary li.project span.dd { + font-size: 12px; + top: -48px; +} + +.infographic.basic header .summary li.career span.dd { + font-size: 12px; + top: -47px; +} + +.infographic.basic header .summary li:nth-of-type(n) { + margin-bottom: 16px; +} +.infographic.basic header .summary li:nth-of-type(n + 3) { + margin-bottom: 0px; +} + +.infographic.basic header .summary li:nth-of-type(2n + 1) { + margin-right: 23px; +} + +h2.resumeH2 { + position: relative; + margin-top: 27px; + padding-bottom: 10px; + border-bottom: 1px solid #555; + font-size: 1.14em; + font-weight: 300; +} +h2.resumeH2.first { + margin-top: 0px; +} +h2.resumeH2:before { + content: ""; + display: inline-block; + margin-right: 10px; + width: 3px; + height: 14px; + background: #289cff; +} +h2.resumeH2.STEP1:before { + background: #289cff; +} +h2.resumeH2.STEP2:before { + background: #825bd1; +} + +h2.resumeH2.STEP3:before { + background: #f69b0d; +} + +h2.resumeH2.STEP4:before { + background: #ff6f6f; +} + +h2.resumeH2.STEP5:before { + background: #cd7d5d; +} + +h3.resumeH3 { + position: absolute; + top: 21px; + left: 0px; + font-size: 1em; + font-weight: 300; +} + +h4.resumeH4 { + font-size: 1em; + font-weight: 400; + display: inline-block; + white-space: nowrap; +} + +h4.resumeH4.wordBreak { + word-break: break-all; + white-space: normal; +} + +h4.resumeH4.ellipsis { + display: block; + margin-top: 1px; + margin-bottom: 3px; +} + +h5.resumeH5 { + color: #333; + font-size: 1em; + font-weight: 300; + display: block; +} + +section.main .bold { + font-weight: 500; +} + +h4.resumeH4.summary { + font-weight: 400; + margin-top: 30px; + margin-bottom: 10px; + display: inline-block; +} + +h4.resumeH4.header { + display: block; + line-height: 1.4em; + white-space: normal; +} + +h4.resumeH4.header .title { + display: inline-block; +} + +h4.resumeH4.header div + .title, +h4.resumeH4.header span + .title { + padding-top: 9px; + display: block; +} + +h4.resumeH4.header div.title { + padding-top: 9px; + display: block; +} +h4.resumeH4 .titleCutter { + /* 제목 영역에서 우측 상단 summary 와 자꾸 겹치는 문제 떄문에 가로 영역을 강제로 지정*/ + width: 560px; + line-height: 25px; +} + +h4.resumeH4 .NCSTitleCutter { + width: 460px; +} + +h4.resumeH4.majorCutter { + max-width: 510px; + overflow: hidden; + text-overflow: ellipsis; +} + +h4.resumeH4 .organization { + color: #618bcf; +} +h4.resumeH4 .researchRegistNumber { + color: #c5642e; +} + +h4.resumeH4 .licenseRegistResume { + color: #618bcf; +} + +section.main.resume span.licenseRegistResume { + font-weight: 300; + color: #618bcf; + margin-bottom: 4px; +} + +h4.resumeH4 .category { + color: #618bcf; + margin-right: 10px; +} +.box h4.resumeH4 .category { + margin-top: 3px; + display: block; +} + +h4.resumeH4 .licenseRegistResume.block { + margin-top: 3px; + display: block; +} + +h4.resumeH4.licenseName { + width: 100%; +} + +section.main { + width: 840px; +} +section.main.resume div.row { + margin-bottom: 0px; + position: relative; + padding: 19px 20px 19px 145px; + border-bottom: 1px solid #eee; +} +section.main.resume div.row.summary { + position: relative; + padding-left: 20px; + background: #fafafb; + font-size: 1.07em; + font-weight: 400; + border-top: 1px solid #555; +} +section.main.resume div.row + div.row.summary { + margin-top: 19px; +} +section.main.resume h2.resumeH2 + div.row.summary { + border-top: none; +} +section.main.resume div.row.full-layout { + position: relative; + padding: 0px; + border-bottom: none; +} +section.main.resume h2.resumeH2 + div.row.full-layout h3 { + margin-top: 0px; + border-top: none; +} +section.main.resume div.row.full-layout h3 { + margin-top: 20px; + padding: 20px 0px; + position: relative; + padding-left: 20px; + background: #fafafb; + font-size: 1.07em; + font-weight: 400; + color: #333; + top: 0px; + left: 0px; + margin-bottom: 20px; + border-bottom: 1px solid #e1e1e1; + border-top: 1px solid #555; +} + +section.main.resume div.row.full-layout h3.question { + padding-left: 47px; +} + +section.main.resume div.row.full-layout h3.question img[src$="iconResumeQuestionMark.png"] { + position: absolute; + left: 20px; +} + +section.main.resume div.row.full-layout h3.question span.answer { + position: absolute; + right: 20px; + color: #195ab8; +} + +section.main.resume div.row > div.content { +} + +h4.resumeH4 ~ dl.resumeList { +} +section.main.resume div.row div.summary dl.resumeList { + margin-top: 0px; +} + +section.main div.row dl.resumeList.pull-left { + float: left; +} + +section.main.resume div.row dl.resumeList.pull-right { + margin-top: 0px; + white-space: nowrap; +} +section.main.resume div.row dl.resumeList.pull-right > dd { +} + +section.main.resume div.row dl.resumeList:after { + clear: both; + content: ""; + display: block; +} + +section.main.resume div.row dl.resumeList.qna { + border-top: 1px solid #eee; + padding: 15px 0px; +} + +section.main.resume div.row dl.resumeList.qna dt { + margin-bottom: 10px; + + word-break: break-all; +} + +section.main.resume div.row dl.resumeList.qna dl.resumeList.qna { + border-bottom: none; + padding-bottom: 0px; +} + +section.main.resume div.row dl.resumeList.qna:first-of-type { + padding-top: 0px; + padding-bottom: 0px; + border-top: none; +} +section.main.resume div.row.full-layout div.content > dl.resumeList.qna:first-of-type { + padding: 15px 0px; +} + +section.main.resume div.row dl.resumeList.qna dl.resumeList.qna:first-of-type { + padding-top: 20px; +} + +section.main.resume div.row.summary dl.resumeList { + margin-top: 10px; +} +section.main.resume div.row.summary dl.resumeList:first-child { + margin-top: 0px; +} +section.main.resume div.row dl.resumeList + dl.resumeList { + margin-top: 5px; +} +section.main.resume div.row dl.resumeList dt, +section.main.resume div.row dl.resumeList dd { + position: relative; +} + +section.main.resume div.row dl.resumeList.horizon dt, +section.main.resume div.row dl.resumeList.horizon dd { + display: inline-block; +} + +section.main.resume div.row div.summary, +section.main.resume div.row time.summary { + position: absolute; + top: 15px; + right: 15px; + white-space: nowrap; +} + +section.main.resume div.row h3.resumeH3 + div.summary { + top: 20px; + right: 20px; +} +section.main.resume div.row time { + color: #618bcf; + font-size: 13px; + letter-spacing: 0.1px; +} + +section.main.resume div.row dl.resumeList.horizon.summary { + display: inline-block; +} + +section.main.resume div.row dl.resumeList.horizon.summary dd + dt.hide + dd:before, +section.main div.row dl.resumeList.horizon.summary dd + dt:before { + content: "/ "; + position: static; + display: inline; + background: none; +} +section.main.resume div.row dl.resumeList.horizon.summary dd + dt { + margin-left: 0px; +} + +section.main.resume div.row dl.resumeList.horizon.summary dd { + margin-left: 0px; +} + +section.main.resume div.row dl.resumeList.horizon.summary dd, +section.main div.row dl.resumeList.horizon.summary dt { + font-size: 0.92em; +} + +section.main.resume div.row dl.resumeList.vertical dt { + min-width: 65px; + display: inline-block; + float: left; + clear: left; + color: #666666; +} + +section.main.resume div.row dl.resumeList.vertical dt.hide { + display: none; +} + +section.main.resume div.row dl.resumeList.vertical dd { +} + +section.main.resume div.row dl.resumeList dt.hide:first-of-type + dd { + margin-left: 0px; +} + +section.main.resume div.row dl.resumeList.horizon dt.heading, +section.main.resume div.row dl.resumeList.horizon dd.heading { + display: block; + font-weight: 500; +} + +section.main.resume div.row dl.resumeList.horizon dt.hide, +section.main div.row dl.resumeList.horizon dd.hide { + visibility: hidden; + text-indent: -999px; + top: -999px; + left: -999px; + position: absolute; +} + +section.main.resume div.row dl.resumeList.horizon dd { + margin-left: 17px; +} +section.main.resume div.row dl.resumeList.horizon dd + dd.foreignExamScore { + margin-left: 5px; +} +section.main.resume div.row dl.resumeList.horizon dd + dd.foreignExamScore:before { + content: "("; +} +section.main.resume div.row dl.resumeList.horizon dd + dd.foreignExamScore:after { + content: ")"; +} +section.main.resume div.row.summary dl.resumeList dt, +section.main.resume div.row.summary dl.resumeList dd { + font-weight: 300; +} + +section.main.resume div.row dl.resumeList.horizon dd + dt { + position: relative; + margin-left: 60px; +} +section.main.resume div.row dl.resumeList.horizon dd + dt.hide + dd:before, +section.main.resume div.row dl.resumeList.horizon dd + dt:before { + content: ""; + display: block; + position: absolute; + left: -30px; + top: 6.5px; + width: 1px; + height: 9px; + margin-left: 2px; + background: #eee; +} +section.main.resume div.row dl.resumeList.horizon dd + dt.hide + dd { + margin-left: 60px; +} +section.main.resume div.row dl.resumeList.horizon.summary dd + dt.hide + dd { + margin-left: 0px; +} + +section.main.resume div.row dl.resumeList.horizon dd + dt.hide:before { + content: none; +} + +section.main.resume div.row dl.resumeList.horizon.summary dt.hide + dd.time { + letter-spacing: 0.1px; +} + +/*dl 이 box일때*/ +section.main.resume div.row.full-layout > div.content div.loopContent.box { + float: left; +} + +section.main.resume div.row.full-layout > div.content div.loopContent.box, +section.main.resume div.row dl.resumeList.box { + border: 1px solid #eee; + border-left: none; + float: left; + box-sizing: border-box; + padding: 15px; + min-height: 50px; + font-size: 13px; +} + +section.main.resume div.row.full-layout > div.content div.loopContent.box.hasScore, +section.main.resume div.row dl.resumeList.box.hasScore { + min-height: 140px; +} + +/*그 줄의 가장 첫번째*/ +section.main.resume div.row.full-layout > div.content div.loopContent.box.box1:nth-of-type(1n + 1), +section.main.resume div.row dl.resumeList.box.box1:nth-of-type(1n + 1) { + border: 1px solid #eee; +} +section.main.resume div.row.full-layout > div.content div.loopContent.box.box2:nth-of-type(2n + 1), +section.main.resume div.row dl.resumeList.box.box2:nth-of-type(2n + 1) { + border: 1px solid #eee; +} +section.main.resume div.row.full-layout > div.content div.loopContent.box.box3:nth-of-type(3n + 1), +section.main.resume div.row dl.resumeList.box.box3:nth-of-type(3n + 1) { + border: 1px solid #eee; +} +section.main.resume div.row.full-layout > div.content div.loopContent.box.box4:nth-of-type(4n + 1), +section.main.resume div.row dl.resumeList.box.box4:nth-of-type(4n + 1) { + border: 1px solid #eee; +} + +/*두번째 줄부터*/ +section.main.resume div.row.full-layout > div.content div.loopContent.box.box1:nth-of-type(n + 2), +section.main.resume div.row dl.resumeList.box.box1:nth-of-type(n + 2) { + border-top: none; +} +section.main.resume div.row.full-layout > div.content div.loopContent.box.box2:nth-of-type(n + 3), +section.main.resume div.row dl.resumeList.box.box2:nth-of-type(n + 3) { + border-top: none; +} +section.main.resume div.row.full-layout > div.content div.loopContent.box.box3:nth-of-type(n + 4), +section.main.resume div.row dl.resumeList.box.box3:nth-of-type(n + 4) { + border-top: none; +} +section.main.resume div.row.full-layout > div.content div.loopContent.box.box4:nth-of-type(n + 5), +section.main.resume div.row dl.resumeList.box.box4:nth-of-type(n + 5) { + border-top: none; +} + +section.main.resume div.row.full-layout > div.content div.loopContent.box.box1, +section.main.resume div.row dl.resumeList.box.box1 { + width: 100%; +} + +section.main.resume div.row.full-layout > div.content div.loopContent.box.box2, +section.main.resume div.row dl.resumeList.box.box2 { + width: calc(100% / 2); +} + +section.main.resume div.row.full-layout > div.content div.loopContent.box.box3, +section.main.resume div.row dl.resumeList.box.box3 { + width: calc(100% / 3); +} + +section.main.resume div.row.full-layout > div.content div.loopContent.box.box4, +section.main.resume div.row dl.resumeList.box.box4 { + width: calc(100% / 4); +} + +section.main.resume div.row.full-layout > div.content div.loopContent.box, +section.main.resume div.row > div.content div.loopContent dl.resumeList.box + dl.resumeList.box { + margin-top: 0px; +} + +section.main.resume div.row dl.resumeList.box.horizon dd + dt:before { + content: none; +} +section.main.resume div.row dl.resumeList.box.horizon dd + dt { + margin-left: 0px; +} + +section.main.resume div.row > div.content div.loopContent { + margin-top: 18px; + padding: 20px 0px 0px; + border-top: 1px solid #eee; +} +section.main.resume div.row > div.content div.loopContent:first-child { + margin-top: 0px; + padding-top: 0px; + border-top: 0px; +} + +section.main.resume div.row > div.content div.loopContent dl.resumeList + dl.resumeList { + margin-top: 3px; +} + +section.main.resume div.row > div.content div.loopContent h4.resumeH4.header + dl.resumeList, +section.main.resume div.row > div.content div.loopContent h4.resumeH4.header + div.summary + dl.resumeList { + margin-top: 15px; + padding-top: 10px; + border-top: 1px dotted #eee; +} + +section.main.resume div.row dl.resumeList.vertical.file dd { + display: inline-block; + width: 81.5%; + line-height: 2.4; +} +section.main.resume div.row dl.resumeList.vertical.file dt { + width: 17.5%; + line-height: 2.4; + box-sizing: border-box; + padding-right: 15px; +} + +section.main.resume div.row dl.resumeList.vertical.file dt.hide + dd { + display: inline-block; + width: 100%; + line-height: 2.4; +} + +section.main.resume div.row dl.resumeList.vertical.file dd a { + line-height: 1.5; +} +section.main.resume div.row dl.resumeList.vertical.file dd + dt + dd a { + border-top: none; +} + +section.main.resume div.row h4.resumeH4 ~ h5.resumeH5 { + margin-top: 18px; +} + +section.main.resume div.row.full-layout > div.content div.loopContent { + padding: 15px; + border-left: 1px solid #eee; + border-right: 1px solid #eee; + border-bottom: 1px solid #eee; + border-top: none; + margin-top: 0px; + position: relative; +} +section.main.resume div.row.full-layout > div.content div.loopContent:first-child { + border-top: 1px solid #eee; +} + +/* 공인외국어시험 3개 이상일 때 */ +section.main.resume div.row > div.content.foreignExam .box.box3 dl.resumeList dd { + float: left; +} +section.main.resume div.row > div.content.foreignExam .box.box3 dl.resumeList dt + dd { + margin-right: 7px; +} + +section.main.resume div.row > div.content img.iconBuFamily { + position: relative; + top: 5px; + margin-right: 4px; +} + +section.main.resume div.row > div.content i.iconLabel { + display: inline-block; + position: relative; + top: -1px; + box-sizing: border-box; + min-width: 25px; + height: 20px; + line-height: 18px; + font-size: 12px; + font-style: normal; + font-weight: 400; + text-align: center; + padding: 0px 7px; + margin-left: 4px; +} + +section.main.resume div.row > div.content i.iconLabel:first-child { + margin-left: 0px; + margin-right: 7px; +} + +section.main.resume div.row > div.content i.iconLabel.ncs { + margin: 7px 7px 0px 4px; +} + +section.main.resume div.row i.iconLabel.togetherY, +section.main.resume div.row i.iconLabel.togetherN { + margin-right: 0px; + margin-left: 7px; +} + +section.main.resume div.row i.iconLabel.togetherY, +section.main.resume div.row i.iconLabel.country, +section.main.resume div.row i.iconLabel.researchPaper, +section.main.resume div.row i.iconLabel.researchPresent, +section.main.resume div.row i.iconLabel.careerCriteria { + background: #e9f3ff; + border: 1px solid #bed9f6; + color: #3172b6; +} + +section.main.resume div.row i.iconLabel.researchIPR { + border: 1px solid #dedaa0; + background-color: #fefedf; + color: #978929; +} + +section.main.resume div.row i.iconLabel.togetherN { + background: #eff1f5; + border: 1px solid #ccc; + color: #656565; +} + +section.main.resume div.row i.iconLabel.major { + background: #ffeff2; + border: 1px solid #f3c7ce; + color: #e4687b; +} +section.main.resume div.row i.iconLabel.minor { + background: #e8fcf5; + border: 1px solid #9bcebc; + color: #4f7f6e; +} +section.main.resume div.row i.iconLabel.ncs { + background: #f8f5ff; + border: 1px solid #dfc1ee; + color: #8f70b1; +} + +section.main.resume div.row i.academicFlag { + display: inline-block; + position: relative; + top: -2px; + box-sizing: border-box; + padding-left: 5px; + padding-right: 11px; + min-width: 26px; + height: 18px; + border: 1px solid #333; + border-right: none; + font-size: 10px; + font-style: normal; + font-weight: 400; +} + +section.main.resume div.row i.academicFlag:before { + content: ""; + display: block; + position: absolute; + top: -1px; + right: -0px; + border-top: 9px solid transparent; + border-bottom: 9px solid transparent; + border-left: 6px solid transparent; + border-right: 6px solid #333; +} +section.main.resume div.row i.academicFlag:after { + content: ""; + display: block; + position: absolute; + top: 0px; + right: -0px; + border-top: 8px solid transparent; + border-bottom: 8px solid transparent; + border-left: 5px solid transparent; + border-right: 5px solid #fafafb; +} +section.main.resume div.row i.academicFlag.highschool { + background: #bff4ff; +} +section.main.resume div.row i.academicFlag.college { + background: #ddfff3; +} +section.main.resume div.row i.academicFlag.graduateSchool { + background: #ffe6f8; +} + +section.main.resume div.row .ellipsis { + vertical-align: bottom; +} + +section.main.resume p { + white-space: pre-wrap; + word-break: break-all; + padding: 0px 0px; + line-height: 1.7; +} + +section.main.resume #resumeNav { + position: absolute; + top: 65px; + right: 0px; + z-index: 2; +} +section.main.resume #resumeNav .btnFoldWrap { + width: 36px; + border-top: 3px solid #0079e0; +} +section.main.resume #resumeNav .btnFold { + position: relative; + width: 100%; + height: 32px; + padding: 0; + margin-right: 0; + background: #fff; + border: 1px solid #dfdfdf; + border-top: 0; +} +section.main.resume #resumeNav .btnFold:active { + top: 0; + left: 0; +} +section.main.resume #resumeNav .btnFold::before { + display: block; + content: ""; + position: absolute; + left: 50%; + width: 0; + height: 0; + margin-left: -4px; + border: 4px solid #0079e0; + border-top-color: transparent; + border-left-color: transparent; + border-right-color: transparent; + transition: all 0.1s ease-out; +} +section.main.resume #resumeNav .btnFold::after { + display: inline-block; + content: "접기"; + font-size: 10px; + color: #0079e0; + vertical-align: top; + transition: all 0.1s ease-out; +} +section.main.resume #resumeNav[data-fold="false"] .btnFold::before { + top: 3px; +} +section.main.resume #resumeNav[data-fold="false"] .btnFold::after { + content: "접기"; + margin-top: 6px; +} +section.main.resume #resumeNav[data-fold="true"] .btnFold::before { + top: 21px; + transform: rotate(180deg); +} +section.main.resume #resumeNav[data-fold="true"] .btnFold::after { + content: "펼치기"; + margin-top: -2px; +} + +section.main.resume #resumeNav ul.resumeAnchorPoint { + border: 1px solid #dfdfdf; + border-top: 0; + z-index: 2; + transition: top 0.5s; + width: 34px; +} + +section.main.resume #resumeNav > li + li { + margin-top: -3px; +} + +section.main.resume #resumeNav ul.resumeAnchorPoint li { + display: block; + height: 35px; + background: #fff; +} +section.main.resume #resumeNav ul.resumeAnchorPoint li a { + color: transparent; + white-space: nowrap; + font-size: 12px; + padding: 8px 11px; + box-sizing: border-box; + transition: max-width 0.2s; + display: block; + height: 35px; + overflow: visible; + z-index: 100; + position: absolute; + text-align: right; + min-width: 34px; + max-width: 34px; + right: 0px; +} +section.main.resume #resumeNav ul.resumeAnchorPoint { + overflow: hidden; +} +section.main.resume #resumeNav ul.resumeAnchorPoint:hover, +section.main.resume #resumeNav ul.resumeAnchorPoint:focus { + overflow: visible; +} + +section.main.resume #resumeNav ul.resumeAnchorPoint li a:hover, +section.main.resume #resumeNav ul.resumeAnchorPoint li a:focus { + max-width: 186px; + color: white; + padding-right: 39px; +} + +section.main.resume #resumeNav ul.resumeAnchorPoint a:before { + content: ""; + display: inline-block; + position: absolute; + top: 7px; + right: 6px; + width: 22px; + height: 22px; + background-image: url(images/iconResumeNavigator.png); + background-position: -26px 0; + background-repeat: no-repeat; +} + +section.main.resume #resumeNav ul.resumeAnchorPoint a[href*="STEP1"]:hover:before, +section.main.resume #resumeNav ul.resumeAnchorPoint a[href*="STEP1"]:focus:before { + background-position: -0px 0; +} +section.main.resume #resumeNav ul.resumeAnchorPoint a[href*="STEP1"]:before { + background-position: -26px 0; +} +section.main.resume #resumeNav ul.resumeAnchorPoint a[href*="STEP2"]:before { + top: 9px; + right: 5px; + width: 24px; + height: 19px; + background-position: -25px -24px; +} +section.main.resume #resumeNav ul.resumeAnchorPoint a[href*="STEP2"]:hover:before, +section.main.resume #resumeNav ul.resumeAnchorPoint a[href*="STEP2"]:focus:before { + background-position: 0px -24px; +} + +section.main.resume #resumeNav ul.resumeAnchorPoint a[href*="STEP3"]:before { + background-position: -26px -46px; + right: 8px; + top: 8px; + width: 18px; + height: 19px; +} + +section.main.resume #resumeNav ul.resumeAnchorPoint a[href*="STEP3"]:hover:before, +section.main.resume #resumeNav ul.resumeAnchorPoint a[href*="STEP3"]:focus:before { + background-position: -0px -46px; +} + +section.main.resume #resumeNav ul.resumeAnchorPoint a[href*="STEP4"]:before { + background-position: -26px -68px; + width: 20px; + height: 19px; + top: 8px; + right: 7px; +} + +section.main.resume #resumeNav ul.resumeAnchorPoint a[href*="STEP4"]:hover:before, +section.main.resume #resumeNav ul.resumeAnchorPoint a[href*="STEP4"]:focus:before { + background-position: -0px -68px; +} + +section.main.resume #resumeNav ul.resumeAnchorPoint a[href*="STEP5"]:before { + background-position: -26px -91px; + right: 7px; + top: 8px; + width: 18px; + height: 19px; +} + +section.main.resume #resumeNav ul.resumeAnchorPoint a[href*="STEP5"]:hover:before, +section.main.resume #resumeNav ul.resumeAnchorPoint a[href*="STEP5"]:focus:before { + background-position: -0px -91px; +} + +section.main.resume #resumeNav ul.resumeAnchorPoint a[href*="STEP1"]:hover, +section.main.resume #resumeNav ul.resumeAnchorPoint a[href*="STEP1"]:focus { + background-color: #289cff; +} +section.main.resume #resumeNav ul.resumeAnchorPoint a[href*="STEP2"]:hover, +section.main.resume #resumeNav ul.resumeAnchorPoint a[href*="STEP2"]:focus { + background-color: #825bd1; +} +section.main.resume #resumeNav ul.resumeAnchorPoint a[href*="STEP3"]:hover, +section.main.resume #resumeNav ul.resumeAnchorPoint a[href*="STEP3"]:focus { + background-color: #f69b0d; +} +section.main.resume #resumeNav ul.resumeAnchorPoint a[href*="STEP4"]:hover, +section.main.resume #resumeNav ul.resumeAnchorPoint a[href*="STEP4"]:focus { + background-color: #ff6f6f; +} +section.main.resume #resumeNav ul.resumeAnchorPoint a[href*="STEP5"]:hover, +section.main.resume #resumeNav ul.resumeAnchorPoint a[href*="STEP5"]:focus { + background-color: #cd7d5d; +} +section.main.resume #resumeNav > ul:nth-of-type(1) { + z-index: 2; +} +section.main.resume #resumeNav > ul:nth-of-type(2) { + z-index: 3; +} +section.main.resume #resumeNav > ul:nth-of-type(3) { + z-index: 4; +} +section.main.resume #resumeNav ul.resumeHelpToolbar { + line-height: 0; +} + +section.main.resume #resumeNav ul.resumeHelpToolbar li { + height: 35px; +} + +section.main.resume #resumeNav li button.btnFontSize { + position: relative; + top: -1px; + width: 36px; + height: 35px; + background: #fff; + border: none; + color: transparent; + white-space: nowrap; + transition: background 0.2s linear; + border: 1px solid #dfdfdf; + z-index: 1; +} + +section.main.resume #resumeNav ul.resumeHelpToolbar li button.btnFontSize:before { + content: ""; + display: block; + margin: 6px 4.5px; + width: 25px; + height: 23px; + background: url(images/iconResumeNavigator.png) no-repeat left top; + direction: ltr; +} + +section.main.resume #resumeNav ul.resumeHelpToolbar li button.btnFontSize.plus:before { + background-position: left -110px; +} +section.main.resume #resumeNav ul.resumeHelpToolbar li button.btnFontSize.minus:before { + background-position: left -132px; +} + +section.main.resume #resumeNav ul.resumeHelpToolbar li button.btnFontSize:hover { + box-sizing: border-box; + width: 36px; + background: #e9f4ff; + border: 1px solid #79a2cc; + z-index: 3; +} +section.main.resume #resumeNav ul.resumeHelpToolbar li { + position: relative; +} +section.main.resume #resumeNav ul.resumeHelpToolbar li + li { + top: -1px; +} + +section.main.resume [data-button="downloadFile"] { + cursor: pointer; + width: 20px; + height: 20px; + box-sizing: border-box; + border: 1px solid #b3e6e9; + display: inline-block; + text-indent: -9999px; + margin-left: 5px; + background: url("images/iconResumeBtnFile.png") no-repeat center center, #eafbfc; +} + +section.main.resume button[data-button="saveAllFiles"], +section.main.resume button[data-button="saveAllSubmissionFiles"] { + font-size: 13px; + box-sizing: border-box; + border: none; + background: none; + margin-left: 3px; +} + +section.main.resume strong { + color: #ea4747; + font-weight: 400; +} + +section.main.resume a.file { + box-sizing: border-box; + border: 1px solid #eee; + color: #028f99; + padding: 6px 30px; + margin: 0px; + max-width: 100%; + width: 100%; + background: url("images/iconResumeLinkFile.png") no-repeat 15px center; + display: inline-block; +} + +section.main.resume span.fileName { + width: 40%; + float: left; + line-height: 30px; + display: block; +} +section.main.resume span.fileName + a.file { + width: 60%; +} + +section.main.resume span.fileName + a.file + span.fileName + a.file { + margin-top: -1px; +} + +section.main.resume table.summary { + text-align: center; + font-size: 12px; + border-bottom: #acacac; +} + +section.main.resume table.summary.freeFontSize { + font-size: inherit; +} + +section.main.resume img[src*="iconResumeFile.png"] { + top: 2px; + position: relative; + margin-right: 5px; +} + +section.main.resume table.summary td, +section.main.resume table.summary th { + padding: 10px 0px; + box-sizing: border-box; +} + +section.main.resume table.summary th { + white-space: pre-wrap; + position: relative; + font-weight: 400; +} +section.main.resume table.summary thead th:before { + content: ""; + display: inline-block; + height: 8px; + width: 1px; + background: #acacac; + position: absolute; + right: -1px; + bottom: 0px; +} +section.main.resume table.summary thead th:last-of-type:before { + content: none; +} + +section.main.resume table.summary thead { + background: #fafafb; + border-top: 1px solid #555555; +} +section.main.resume table.summary thead th { + border-bottom: 1px solid #787878; +} +section.main.resume table.summary tbody th, +section.main.resume table.summary tbody td { + border: 1px solid #ececec; +} +section.main.resume table.summary tbody th:first-of-type { + border-left: none; + min-width: 105px; +} +section.main.resume table.summary tbody td:first-of-type { + border-left: none; +} +section.main.resume table.summary tbody td:last-of-type { + border-right: none; +} + +section.main.resume table.summary tbody { + border-bottom: 1px solid #acacac; +} + +section.main.resume table.summary.depth2 thead { +} +section.main.resume table.summary.depth2 thead th { + border: 1px solid #acacac; +} +section.main.resume table.summary.depth2 thead th:first-of-type { + border-left: none; +} +section.main.resume table.summary.depth2 thead th:last-of-type { + border-right: none; +} + +section.main.resume table.summary.depth2 thead th.depth2 { + border-left: none; + border-right: none; +} +section.main.resume table.summary.depth2 thead th.total { + border-right: 1px solid #acacac; +} + +section.main.resume table.summary.depth2 tbody td.total { + border-right: 1px solid #dbdbdb; +} + +section.main.resume table.summary.depth2 thead:after { + /*border-collapse 무효화*/ + width: 100%; + background: red; + content: ""; + display: block; +} +section.main.resume table.summary.depth2 tbody tr:last-of-type th, +section.main.resume table.summary.depth2 tbody tr:last-of-type td { + border-bottom: 1px solid #777777; +} + +section.main.resume table.summary.depth2 tbody { + border-bottom: 1px solid #7f7f7f; + position: relative; +} + +section.main.resume table.summary.depth2 tbody:after { + position: absolute; + /*border-collapse 무효화*/ + width: 100%; + height: 1px; + background: #dddddd; + content: ""; + display: block; +} + +section.main.resume table.summary.depth2 thead th.depth2 { + border-bottom: 1px solid #666; +} +section.main.resume table.summary.depth2 thead th.depth2 { + border-bottom: 1px solid #666; +} +section.main.resume table.summary.depth2 thead th.depth1 { + border-top: 1px solid #666; +} +section.main.resume table.summary.depth2 thead th.depth0 { + border-top: 1px solid #666; + border-bottom: 1px solid #666; +} + +section.main.resume table.summary.depth2 td.empty { + background-color: #eee; +} +section.main.resume table.summary td.td-left { + white-space: pre-wrap; + word-break: break-all; + padding: 10px 10px; + text-align: left; +} +section.main.resume button[data-button="openSummary"] { + width: 100%; + margin-top: 12px; + border: 1px solid #eeeeee; + text-align: center; + color: #333; + padding: 9px 0px; + background: #fff; +} + +button[data-button="openSummary"]:after { + content: "∨"; + display: inline-block; + transform: rotate(360deg) scaleX(1) scaleY(0.5) translate(6px, 2px); + color: #aaa; +} + +button[data-button="openSummary"].active:after { + transform: rotate(180deg) scaleX(1) scaleY(0.5) translate(-8px, -1px); +} + +section.main.resume .hide { + display: none; +} + +section.main.resume { + font-size: 14px; +} + +section.main.resume header .info { + min-width: 613px; + max-width: 613px; +} + +section.main.resume header img + .info { + margin-left: 30px; +} +section.main.resume header { + box-sizing: border-box; + margin-bottom: 27px; + padding: 30px 0px; + border-top: 2px solid #555555; + border-bottom: 1px solid #eeeeee; +} + +section.main.resume header h1 { + margin-bottom: 6px; + padding-bottom: 10px; + border-bottom: 1px dotted #eaeaea; + font-size: 1.2em; + font-weight: 400; +} + +section.main.resume header dl { + margin-top: 4px; +} + +section.main.infographic header span.divider + span.divider:before, +section.main.resume header span.divider + span.divider:before { + margin: 0px 10px; + content: ""; + display: inline-block; + border-left: 1px solid #d4d4d4; + height: 13px; + width: 1px; +} + +section.main.resume b { + font-weight: 400; + color: #195ab8; +} + +section.main.resume b.registNumber { + font-weight: 300; + color: #618bcf; +} +section.main.resume div.box.box3 b.registNumber { + display: block; + margin-bottom: 4px; +} +section.main.resume img.ybmValidateDone { + width: 82px; + height: 20px; + display: inline-block; + top: 3px; + position: relative; + margin-left: 8px; +} +section.main.resume div.box.box3 img.ybmValidateDone { + position: absolute; + right: 17px; + top: 14px; + margin: 0; +} +section.main.resume h4.resumeH4.header time { + position: absolute; + top: 17px; + right: 15px; +} + +section.main.resume dd.contents { + margin-top: 15px; + text-align: justify; + white-space: pre-wrap; + line-height: 1.8; +} + +section.main.resume i.academicFlag + H4.resumeH4 { + display: block; + white-space: normal; + text-align: justify; + padding-left: 48px; + word-break: break-all; + margin-top: -20px; + min-height: 17px; +} + +section.main.resume div.row i.academicFlag.paper { + background: #d2f1e6; +} + +section.main.resume i.전문학사 + h4.resumeH4 { + padding-left: 62px; +} + +div.resumeTooltip:after { + content: ""; + display: inline-block; + width: 0px; + height: 0px; + border-bottom: 5px solid rgba(255, 251, 209, 1); + border-left: 5px solid transparent; + border-right: 5px solid transparent; + position: absolute; + left: 50%; + transform: translateX(-50%); + top: -8px; +} +div.resumeTooltip:before { + content: ""; + display: inline-block; + width: 0px; + height: 0px; + border-bottom: 6px solid #000; + border-left: 6px solid transparent; + border-right: 6px solid transparent; + position: absolute; + left: 50%; + transform: translateX(-50%); + top: -9px; +} +div.resumeTooltip { + position: absolute; + background: rgb(254, 254, 226); + background-color: rgba(255, 251, 209, 0.6); + opacity: 0; + border: 1px solid #000; + padding: 6px; + font-weight: 400; +} +div.resumeTooltip h5 { + font-size: 13px; + text-align: center; + font-weight: 400; +} + +div.resumeTooltip dl dt { + color: #c9513a; + margin-right: 6px; + float: left; + clear: left; + display: inline-block; +} +div.resumeTooltip dl dd { + display: block; +} +div.resumeTooltip dl dt:before { + content: ""; + display: inline-block; + width: 2px; + height: 2px; + border-radius: 100%; + background: #444; + position: relative; + top: -3px; + margin-right: 7px; + margin-left: 3px; +} + +div.resumeTooltip dl { + margin-top: 3px; +} + +div.projectTooltip { + display: none; + width: 350px; + background: #fff; + border: 1px solid #333; + box-shadow: rgba(0, 0, 0, 0.2) 3px 3px 2px; + padding: 16px 24px; + z-index: 2; + position: relative; +} +div.projectTooltip li { + position: relative; + + padding-left: 9px; +} +div.projectTooltip li:before { + width: 2.5px; + height: 2.5px; + background: #296bca; + content: ""; + display: block; + position: absolute; + top: 9px; + left: 0px; +} + +div.projectTooltip time { + font-size: 12px; + position: absolute; + right: 0px; + top: 1px; +} + +div.projectTooltip span.project { + display: inline-block; + width: 240px; +} + +div.projectTooltip h5 { + font-weight: 500; + font-size: 15px; + margin-bottom: 10px; +} + +div.projectTooltip button[data-button="closeTooltip"] { + text-indent: -999px; + background: none; + border: none; + position: absolute; + right: 17px; + top: 15px; + width: 20px; + height: 20px; +} + +div.projectTooltip button[data-button="closeTooltip"]:before { + transform: rotate(45deg); + content: ""; + display: block; + background: #494949; + width: 1px; + height: 20px; + position: absolute; + top: 0px; + right: 8px; +} + +div.projectTooltip button[data-button="closeTooltip"]:after { + transform: rotate(135deg); + content: ""; + display: block; + background: #494949; + width: 1px; + height: 20px; + position: absolute; + top: 0px; + right: 8px; +} + +/*********************************************** +* 지원자 지원서조회 +************************************************/ +body.applicant button.btn.btn-question { + display: none; +} + +ul.replyList { + position: relative; + width: 100%; +} + +ul.replyList div.reply { + position: relative; +} + +ul.replyList div.reply:after { + content: ""; + display: block; + clear: both; +} + +ul.replyList div.reply span.info, +ul.replyList div.reply div.contents { + float: left; +} +ul.replyList > li > div.reply { + margin-top: 14px; +} +ul.replyList > li > ul > li:first-of-type > div.reply { + margin-top: 14px; +} +ul.replyList > li > div.reply { + background: #eef7fd; + border: 1px solid #a7c6e0; +} +ul.replyList > li > ul > li > div.reply { + border-left: 1px solid #a5cced; + border-right: 1px solid #a5cced; + border-bottom: 1px solid #a5cced; + background: #fff; + margin-left: 26px; +} +ul.replyList > li > ul > li:first-of-type > div.reply { + border-top: 1px solid #a5cced; +} +ul.replyList div.reply { + padding: 8px 17px; +} +ul.replyList > li span.info time { + color: #195ab8; +} +ul.replyList > li > ul > li span.info time { + color: #89a1b7; +} +ul.replyList > li > div.reply { + margin-left: 10px; +} +ul.replyList > li > div.reply:before { + content: ""; + display: block; + width: 0px; + height: 0px; + border-top: 10px solid transparent; + border-left: none; + border-right: 10px solid #9dbfdc; + border-bottom: 10px solid transparent; + position: absolute; + left: -10px; +} +ul.replyList > li span.info { + margin-right: 63px; +} + +ul.replyList > li > div.reply span.info:before { + content: ""; + display: block; + width: 0px; + height: 0px; + border-top: 9px solid transparent; + border-left: none; + border-right: 9px solid #eef7fd; + border-bottom: 9px solid transparent; + position: absolute; + left: -9px; + top: 9px; +} + +ul.replyList div.reply span.info:after { + content: ""; + display: inline-block; + width: 1px; + bottom: 1px; + border-left: 1px dashed #d2dde6; + position: absolute; + right: 592px; + top: 1px; +} + +ul.replyList > li > ul > li > div.reply:before { + content: ""; + display: block; + width: 8px; + height: 10px; + background: url(/resources/mrs2/css/resume/images/iconReplyInfo.png); + position: absolute; + left: -12px; + top: -1px; +} + +ul.replyList > li > ul > li span.info { + margin-right: 43px; +} + +ul.replyList time { + font-size: 0.8rem; + line-height: 1rem; +} + +ul.replyList time:before { + content: ""; + display: inline-block; + margin-left: 15px; + border-left: 1px solid #becedc; + height: 7px; + width: 1px; + margin-right: 13px; +} + +ul.replyList div.contents { + display: block; + float: right; + width: 554px; +} + +ul.replyList div.reply.notPrint, +ul.replyList div.reply.forbidden { + text-align: center; +} + +ul.replyList div.reply.notPrint:after, +ul.replyList div.reply.forbidden:after { + content: none; + display: none; +} + +ul.replyList div.reply.notPrint span.info, +ul.replyList div.reply.forbidden span.info { + margin-right: 0px; + + float: none; +} + +ul.replyList div.reply.notPrint span.info:after, +ul.replyList div.reply.forbidden span.info:after { + content: none; +} + +ul.replyList span.toName { + color: #e33971; +} + +ul.replyList div.reply, +ul.noteList > li { + margin-top: 10px; + border: 1px solid #9dbfdc; +} + +ul.noteList div.info { + background: #eef7fd; + padding-top: 6px; + padding-bottom: 6px; + padding-left: 14px; +} +ul.noteList div.info time { + font-size: 0.7rem; + color: #3468bc; +} + +ul.noteList div.contents { + padding: 14px; +} + +ul.noteList div.contents div.content { + background: #eef7fd; + padding: 6px 14px; + border: 1px solid #9dbfdc; + margin-top: 10px; + padding-left: 28px; + line-height: 1.9rem; + padding-top: 4px; + background: url(/resources/mrs2/css/resume/images/bgTaggedNotices.png) #eef7fd; + position: relative; +} + +ul.noteList div.contents div.content:before { + content: ""; + display: block; + background: url(/resources/mrs2/css/resume/images/iconNoticeHeader.png); + width: 33px; + height: 33px; + position: absolute; + top: -11px; + left: -11px; +} + +ul.noteList div.content { + padding: 4px 27px; + background: url(/resources/mrs2/css/resume/images/bgNotices.png); +} + +ul.replyList { + position: relative; + width: 100%; +} + +ul.replyList div.reply { + position: relative; +} + +ul.replyList div.reply:after { + content: ""; + display: block; + clear: both; +} + +ul.replyList div.reply span.info, +ul.replyList div.reply div.contents { + float: left; +} +ul.replyList > li > div.reply { + margin-top: 14px; +} +ul.replyList > li > ul > li:first-of-type > div.reply { + margin-top: 14px; +} +ul.replyList > li > div.reply { + background: #eef7fd; + border: 1px solid #a7c6e0; +} +ul.replyList > li > ul > li > div.reply { + border-left: 1px solid #a5cced; + border-right: 1px solid #a5cced; + border-bottom: 1px solid #a5cced; + background: #fff; + margin-left: 26px; +} +ul.replyList > li > ul > li:first-of-type > div.reply { + border-top: 1px solid #a5cced; +} +ul.replyList div.reply { + padding: 8px 17px; +} +ul.replyList > li span.info time { + color: #195ab8; +} +ul.replyList > li > ul > li span.info time { + color: #89a1b7; +} +ul.replyList > li > div.reply { + margin-left: 10px; +} +ul.replyList > li > div.reply:before { + content: ""; + display: block; + width: 0px; + height: 0px; + border-top: 10px solid transparent; + border-left: none; + border-right: 10px solid #9dbfdc; + border-bottom: 10px solid transparent; + position: absolute; + left: -10px; +} +ul.replyList > li span.info { + margin-right: 63px; +} + +ul.replyList > li > div.reply span.info:before { + content: ""; + display: block; + width: 0px; + height: 0px; + border-top: 9px solid transparent; + border-left: none; + border-right: 9px solid #eef7fd; + border-bottom: 9px solid transparent; + position: absolute; + left: -9px; + top: 9px; +} + +ul.replyList div.reply span.info:after { + content: ""; + display: inline-block; + width: 1px; + bottom: 1px; + border-left: 1px dashed #d2dde6; + position: absolute; + right: 592px; + top: 1px; +} + +ul.replyList > li > ul > li > div.reply:before { + content: ""; + display: block; + width: 8px; + height: 10px; + background: url(/resources/mrs2/css/resume/images/iconReplyInfo.png); + position: absolute; + left: -12px; + top: -1px; +} + +ul.replyList > li > ul > li span.info { + margin-right: 43px; +} + +ul.replyList time { + font-size: 0.8rem; + line-height: 1rem; +} + +ul.replyList time:before { + content: ""; + display: inline-block; + margin-left: 15px; + border-left: 1px solid #becedc; + height: 7px; + width: 1px; + margin-right: 13px; +} + +ul.replyList div.contents { + display: block; + float: right; + width: 554px; +} + +ul.replyList div.reply.notPrint, +ul.replyList div.reply.forbidden { + text-align: center; +} + +ul.replyList div.reply.notPrint:after, +ul.replyList div.reply.forbidden:after { + content: none; + display: none; +} + +ul.replyList div.reply.notPrint span.info, +ul.replyList div.reply.forbidden span.info { + margin-right: 0px; + + float: none; +} + +ul.replyList div.reply.notPrint span.info:after, +ul.replyList div.reply.forbidden span.info:after { + content: none; +} + +ul.replyList span.toName { + color: #e33971; +} + +ul.replyList div.reply, +ul.noteList > li { + margin-top: 10px; + border: 1px solid #9dbfdc; +} + +ul.noteList div.info { + background: #eef7fd; + padding-top: 6px; + padding-bottom: 6px; + padding-left: 14px; +} +ul.noteList div.info time { + font-size: 0.7rem; + color: #3468bc; +} + +ul.noteList div.contents { + padding: 14px; +} + +ul.noteList div.contents div.content { + background: #eef7fd; + padding: 6px 14px; + border: 1px solid #9dbfdc; + margin-top: 10px; + padding-left: 28px; + line-height: 1.9rem; + padding-top: 4px; + background: url(/resources/mrs2/css/resume/images/bgTaggedNotices.png) #eef7fd; + position: relative; +} + +ul.noteList div.contents div.content:before { + content: ""; + display: block; + background: url(/resources/mrs2/css/resume/images/iconNoticeHeader.png); + width: 33px; + height: 33px; + position: absolute; + top: -11px; + left: -11px; +} + +ul.noteList div.content { + white-space: pre-line; + padding: 4px 27px; + background: url(/resources/mrs2/css/resume/images/bgNotices.png); +} + +section.main.resume table.summary span.evaluationResult { + display: block; + float: right; + font-weight: 400; + color: #fe5a5c; +} + +section.main.resume table.summary span.evaluationResult { +} +section.main.resume table.summary span.evaluationResult.NOT_PASS { + position: relative; +} +section.main.resume table.summary span.evaluationResult.NOT_PASS:before { + content: ""; + display: block; + width: 120%; + height: 1px; + background: #fe5a5c; + opacity: 0.9; + left: calc(-10%); + top: calc(51%); + transform: rotate(-16deg); + position: absolute; +} + +section.resume table.summary img[src$="iconFinalValuer.png"] { + margin-right: 4px; +} + +section.resume table.summary caption.caption { + text-align: left; + padding-bottom: 12px; + font-size: 1.1em; + margin-top: 10px; +} +section.resume div.row.full-layout table.summary:first-of-type caption { + margin-top: 0px; +} + +section.resume table.summary caption.caption span.strong { + text-align: left; + background: #c8e2f8; + padding: 1px 6px; + font-size: 0.8em; + margin-right: 6px; + font-weight: 400; +} + +section.resume table.summary caption.caption span.summary { + float: right; +} + +section.resume table.summary td.noBgColor { + background: #fff; + color: #333; +} + +section.resume table.summary tr.AVERAGE { + background: #f3f7fd; + color: #4883cc; +} + +section.resume table.summary tr.evalFinal { + background: #fff7f9; + color: #da7989; +} + +section.resume table.summary span.evalResult { + padding: 0px 5px; +} + +section.resume table.summary tr.AVERAGE span.evalResult { + background: #82abf6; + color: #fff; +} +section.resume table.summary tr.evalFinal span.evalResult { + background: #f790a2; + color: #fff; +} + +@media print { + section.main #resumeNav, + section.main button[data-button="openSummary"], + section.main h4.resumeH4.summary, + section.main table.summary { + display: none; + } + section.main table.summary.freeFontSize { + display: table; + } + + div.wrapResumeAll { + page-break-after: always; + margin: 0; + } + + section.main table.summary { + } + + ul.noteList div.contents div.content:before { + display: none; + } + + ul.noteList div.contents div.content:before { + display: none; + } + + section.main.resume table.summary span.evaluationResult.NOT_PASS:before { + content: none; + } + section.resume table.summary tr.evalFinal, + section.resume table.summary tr.AVERAGE, + section.resume table.summary tr.AVERAGE span.evalResult, + section.resume table.summary tr.evalFinal span.evalResult { + background: inherit; + color: inherit; + } + section.resume ul.noteList > li { + page-break-inside: avoid; + } + section.resume table.summary tbody tr { + page-break-inside: avoid; + } + + section.resume div.row.full-layout { + } + + section.main.resume table.summary thead { + border: none; + border-top: none; + } + section.main.resume table.summary tbody { + border: none; + } + section.main.resume table.summary thead th { + border: none; + } + section.main.resume table.summary { + border-bottom: none; + } + + section.main.resume table.summary tbody th, + section.main.resume table.summary tbody td { + border: none; + } + + section.main.resume table.summary tbody td { + border: 1px solid #ddd; + } + section.main.resume .avoidBreak { + page-break-inside: avoid; + } +} + +/********************************************** + 지원서 최종제출 타임라인 + **********************************************/ +.infographic.basic .timeline { + box-sizing: content-box; + margin-top: 10px; + margin-bottom: 10px; + /*padding: 0 0 35px;*/ + width: 1080px; + /*width: 790px;*/ + height: initial; +} +.infographic.basic .timeline .graph, +.infographic.basic .timeline .yearList { + margin: 0 auto; +/* //width: 1030px;*/ +} +.infographic.basic .timeline .graph { + /*height: 270px;*/ +} + +.infographic.basic .timeline .guidelabel { + padding: 0 18px; + height: 45px; + line-height: 45px; + border: 1px solid #dedede; + font-size: 13px; +} + +.infographic.basic .timeline .guidelabel span.majorLabel { + display: inline-block; + position: relative; +} +.infographic.basic .timeline .guidelabel span.majorLabel + span.majorLabel { + margin-left: 26px; +} +.infographic.basic .timeline .guidelabel span.majorLabel + span.majorLabel:after { + content: ""; + position: absolute; + top: 18px; + left: -15px; + width: 1px; + height: 9px; + border-left: 1px dotted #dedede; +} +.infographic.basic .timeline .guidelabel span.majorLabel:before { + position: relative; + margin-right: 5px; +} +.infographic.basic .timeline .guidelabel span.majorLabel.military:before { + content: url(images/labelTimelineMilitary.png); + top: 0px; +} +.infographic.basic .timeline .guidelabel span.majorLabel.foreign:before { + content: url(images/labelTimelineForeign.png); + top: 3px; +} +.infographic.basic .timeline .guidelabel span.majorLabel.award:before { + content: url(images/labelTimelineAward.png); + top: 4px; +} +.infographic.basic .timeline .guidelabel span.majorLabel.schoolCareer:before { + content: url(images/labelTimelineSchoolCareer.png); + top: 4px; +} + +.infographic.basic .timeline .guidelabel ul.wrapMinorLabel { + display: inline-block; + position: relative; + margin-left: 16px; +} +.infographic.basic .timeline .guidelabel ul.wrapMinorLabel:before { + content: url(images/buMinorLabel.png); + position: absolute; + top: -2px; + left: -11px; +} +.infographic.basic .timeline .guidelabel ul.wrapMinorLabel > li.minorLabel { + display: inline-block; + position: relative; + top: 16px; + height: 16px; + background: url(../../images/resume/labelTimeline.png); + text-indent: -9999px; +} +.infographic.basic .timeline .guidelabel ul.wrapMinorLabel > li.minorLabel + li.minorLabel { + margin-left: 13px; +} +.infographic.basic .timeline .guidelabel ul.wrapMinorLabel > li.minorLabel.highschool { + width: 58px; +} +.infographic.basic .timeline .guidelabel ul.wrapMinorLabel > li.minorLabel.bachelor { + width: 49px; + background-position: -73px top; +} +.infographic.basic .timeline .guidelabel ul.wrapMinorLabel > li.minorLabel.master { + width: 41px; + background-position: -137px top; +} +.infographic.basic .timeline .guidelabel ul.wrapMinorLabel > li.minorLabel.doctor { + width: 40px; + background-position: -193px top; +} +.infographic.basic .timeline .guidelabel ul.wrapMinorLabel > li.minorLabel.intern { + width: 39px; + background-position: -248px top; +} +.infographic.basic .timeline .guidelabel ul.wrapMinorLabel > li.minorLabel.career { + width: 40px; + background-position: -302px top; +} +.infographic.basic .timeline .guidelabel ul.wrapMinorLabel > li.minorLabel.docter { + width: 40px; + background-position: -193px top; +} Index: arms/js/dashboard/chart/timeline_custom.js =================================================================== diff -u --- arms/js/dashboard/chart/timeline_custom.js (revision 0) +++ arms/js/dashboard/chart/timeline_custom.js (revision 61c7b7d78fe668cc4ec7ed3bde2f7bd6a3afaf16) @@ -0,0 +1,223 @@ +"use strict"; + +var Timeline = (function () { + var fn, target, data, viewData, fontWidth, colors; + fontWidth = 11; + + + + fn = { + init: function init(_target, _data) { + var widgetWidth = $("#version-timeline-bar")[0].offsetWidth; + console.log(widgetWidth); + + // 화면을 그리는데 필요한 기본 데이터 + viewData = { + startYear: null, + endYear: null, + yearLength: 0, + maxWidth: 1080,//widgetWidth,//1080, + width: 0, + lastWidth: 0, + lastStart: { + index: 0, + year: 0 + } + }; + + colors = [ + "#4E79A7", + "#F18E2C", + "#E15759", + "#76B6B2", + "#58A14E", + "#EDC849", + "#AF7AA1", + "#FE9DA6", + "#9C755E", + "#BAAFAB" + ]; + + var t = []; + if (!_target) throw new Error("타임라인을 그릴 타겟을 입력하세요."); + + target = _target; + data = _data; + + if (!data || data.length === 0) return; // 데이터가 전혀 없는 경우 + + data = data.sort(function (a, b) { + return new Date(a.startDate) - new Date(b.startDate) + (new Date(a.endDate) - new Date(b.endDate)); + }); + + // 데이터 정리 + fn.updateViewData(); + fn.updateRealData(); + + // 템플릿 생성 후 바로 삽입 + t.push( + '
'.concat(fn.draw(), "
") + ); + $(target).html(t.join("")); + }, + // viewData를 업데이트한다. + updateViewData: function updateViewData() { + var v, i, d, titleWidth, yearWidth, yearGap; + v = viewData; + for (i = 0; i < data.length; i++) { + d = data[i]; + if (i === 0 || v.startYear > d.startDate) v.startYear = d.startDate; + if (i === 0 || v.endYear < d.endDate) v.endYear = d.endDate; + if (i === 0 || v.lastStart.year < d.startDate) { + v.lastStart.index = i; + v.lastStart.year = d.startDate; + } + } + + /******************************************** + * 출력할 년도를 정리하는 코드 + * *****************************************/ + v.startYear = Number(D.date(v.startYear, "yyyy")); // 데이터상의 시작년도 + v.endYear = Number(D.date(v.endYear, "yyyy")); // 데이터상의 마지막년도 + v.lastStart.year = Number(D.date(v.lastStart.year, "yyyy")); // 마지막 항목이 시작하는 연도 + + v.yearLength = v.endYear - v.startYear + 1; // 해당 년도까지 포함하기 때문에 1을 더함 + + data[v.lastStart.index].title = data[v.lastStart.index].title || ""; //title이 없는 항목이 있을 수 있기 때문에 처리 + + /******************************************** + * 년도별 width를 정리하는 코드 + * *****************************************/ + yearWidth = v.maxWidth / v.yearLength; // 일단 단순하게 나누어서 가로를 구함 + titleWidth = data[v.lastStart.index].title.length * fontWidth; // 마지막 항목 글자 개수만큼 가로를 구함 + yearGap = + Number(D.date(data[v.lastStart.index].endDate, "yyyy")) - + Number(D.date(data[v.lastStart.index].startDate, "yyyy")); + if (titleWidth > yearGap * yearWidth) { + // 마지막 타이틀이 해당년도 길이보다 짧으면 년도를 1년 추가한다 + v.endYear++; + v.yearLength++; + yearWidth = v.maxWidth / v.yearLength; + } + + // 소숫점이 0.5보다 크면 올려서, 작으면 버려서 년도별 가로를 정한다. + if (yearWidth - parseInt(yearWidth) > 0.5) v.width = Math.ceil(yearWidth); + else v.width = Math.floor(yearWidth); + + // 버리거나 올려서 남거나 모자란 픽셀은 마지막 년도에 배정한다. + v.lastWidth = v.maxWidth - v.width * v.yearLength + v.width; + }, + // 실제로 뿌릴 데이터를 정리하는 함수 + updateRealData: function updateRealData() { + var v, i, d, startYear, endYear, startMonth, endMonth, fullYear; + v = viewData; + + for (i = 0; i < data.length; i++) { + d = data[i]; + + startYear = Number(D.date(d.startDate, "yyyy")); + endYear = Number(D.date(d.endDate, "yyyy")); + startMonth = Number(D.date(d.startDate, "MM")); + endMonth = Number(D.date(d.endDate, "MM")); + fullYear = endYear - startYear > 1 ? endYear - startYear - 1 : 0; // 1월부터 12월까지 꽉찬 해가 몇 해인지 산출 + + // 가로 위치를 구한다. + d.left = (function () { + var left = 0; + left += (startYear - v.startYear) * v.width; + left += (startMonth - 1) * (v.width / 12); + return left + 1; // 투명때문에 라벨 막대가 겹치면 선이 있는 것처럼 보여서 1픽셀 옮김 + })(); + + // 실제 길이를 구한다. + d.width = (function () { + var width = 0; + + if (startYear === endYear) { + // 시작과 마감해가 같다면 + width += (endMonth - startMonth + 1) * (v.width / 12); // 시작년도 월계산 + } else { + width += (12 - startMonth + 1) * (v.width / 12); // 시작년도 월계산 + width += fullYear * v.width; // 중간년도 년계산 + width += endMonth * (v.width / 12); // 종료년도 월계산 + } + + return width - 1; // 투명때문에 라벨 막대가 겹치면 선이 있는 것처럼 보여서 1픽셀 옮김 + })(); + + // 색상을 정한다 + d.color = colors[i % colors.length].concat("80"); + + // 높이 레벨을 정한다 + d.height = (function () { + if (i === 0) return 10; + + if (d.startDate <= data[i - 1].endDate) { + return data[i - 1].height + 10; + } + + return 20; + })(); + + // 타임라인 z-index + d.zIndex = (function () { + if (i === 0) return 9999; + + if (d.startDate <= data[i - 1].endDate) { + return data[i - 1].zIndex - 1; + } + + return 9999; + })(); + + // 라벨 높이 레벨을 정한다 + d.labelHeight = d.height * 2 + 10; + //d.labelHeight = d.height * 2 + 20; + } + }, + draw: function draw() { + var t = [], + i, + d, + v, + year; + v = viewData; + t.push('
'); + for (i = 0; i < data.length; i++) { + d = data[i]; + t.push( + '
') + ); + t.push( + '\t') + .concat(d.title, "") + ); + t.push("
"); + } + t.push("
"); + t.push('
'); + for (i = v.startYear; i <= v.endYear; i++) { + year = "'".concat(i.toString().substring(2, 4)); // 앞에 두 자리는 없앤다. + t.push('
')); + t.push(year); + t.push("
"); + } + t.push("
"); + return t.join(""); + } + }; + return { + init: fn.init + }; +})(); +//# sourceMappingURL=timeline.js.map