@charset "utf-8";

 /* ==============================
 * content
 * ============================== */


 /* index */
.index{background:url(../images/bg.jpg) 0 0 no-repeat;background-size:cover;;padding: 1em;box-sizing:border-box}
.login_wrap{position:relative;width:100%;max-width:800px;margin:0 auto;padding:2em 0;top: 50%;transform: translateY(-50%);}
.login_wrap h1{font-size:1.5em;font-weight:bold;color:#fff;margin-bottom:1em;}
.login_wrap .box{padding:5em 0;background:#fafafa;}
.login_wrap ul{position:relative;width: 300px; margin: 0 auto;}
.login_wrap li.inp{position:relative;border:1px solid #d9d9d9;border-radius:3px 3px 0 0;background:#fff;margin-right:100px;}
.login_wrap li.alert{background:#f7ddde;}
.login_wrap li.inp + .inp{border-top:0 none;border-radius:0 0 3px 3px;}
.login_wrap li .input{border:0 none;width:100%;height:41px;line-height:41px;font-size:14px;padding:0 13px;color:#222222;background:none;padding-right:38px;}
.login_wrap input[type=text]::-ms-clear {display:none;}
.login_wrap li.btn{position:absolute;right:0;top:0;}
.login_wrap li.btn .button{width:85px;line-height:83px;;padding:0;height:85px;font-size:16px;border-radius:3px;}
.login_wrap > p {font-size: 12px;padding: 10px;text-align: center;background: #fafafa;border-top: 1px solid #ddd;}

/* start up main 및 현황체크 */
.chart_area ul li {float:left; width: 50%; padding: 10px;box-sizing:border-box;}
.chart_area ul li div {background: #fff;border: 1px solid #ccc;;width: 100%;padding: 10px;box-sizing:border-box;font-weight: bold;height:300px;}
.chart_area ul li.chart_01 {width: 100%;}
.chart_area ul li.chart_01 div {height:500px;}
.chart_area ul li.level {width: 100%;}
.chart_area .level div {text-align: center;;font-size: 120px;position:relative;}
.chart_area .level p { width: 200px; height:200px;border-radius:50%;border:5px solid;position:relative;top:50%;;transform:translateY(-50%);text-align: center;margin: 0 auto;line-height: 196px;}
.chart_area .level .a {color: #1375a4;}
.chart_area .level .b {color: #007a4f;text-indent: 6px;}
.chart_area .level .c {color: #ffda30;text-indent: -18px;}
.chart_area .level .d {color: #db6f27;text-indent: 15px;line-height: 200px;}
.chart_area .level .danger {color: #f00;font-size: 90px;}
.chart_area .level .danger_en {color: #f00;font-size: 55px;}
.check_list {display: none;}
.more_open .check_list {display: block;}
.check_list red {color:red;}
/* .btnMore:before {content:"▼"}
.more_open .btnMore:before {content:"▲"} */

.survey_wrap>ul + ul {margin-top: 20px;}
.survey_wrap>ul>li {padding: 10px 300px 10px 10px ;position:relative;border-bottom:1px dashed #ddd;line-height: 1.6;}
.survey_wrap>ul>li.first_line_score {height:12px;font-weight: bold;color: #4b8ec3;}
.survey_wrap>ul>li .radio_area {width: 300px; position:absolute;top:50%;right:0;transform:translateY(-50%)}
.survey_wrap>ul>li .radio_area li {float:left;text-align: center;;}
.survey_wrap>ul>li .radio_area li {box-sizing:border-box;border-right: 1px solid #ccc;}
.survey_wrap>ul>li .radio_area li:first-child {border-left:1px solid #ccc ;}
/*.survey_wrap>ul>li .radio_area.col3 li{width: 33.333%;}*/
/*.survey_wrap>ul>li .radio_area.col4 li {width: 25%;}*/
/*.survey_wrap>ul>li .radio_area.col5 li {width: 20%;}*/
/*.survey_wrap>ul>li .radio_area.col6 li {width: 16.666%;}*/
/*.survey_wrap>ul>li .radio_area li:first-child:nth-last-child(n), li:first-child:nth-last-child(n) ~ li {width: 1/n *100%}*/
.date {margin-top: 5px;font-weight: bold;padding-left: 10px;}
.info_wrap h3 {margin-bottom: 10px;position:relative;display: inline-block;}
.info_wrap h3:before {content:'';display: block;position:absolute;width: 100%;height:8px; background: rgba(0,0,0,0.2);bottom:3px; left:0;}
.info_wrap ul li {position:relative; padding-left: 100px;padding-bottom: 10px;min-height:30px}
.info_wrap ul li:last-child {padding-bottom: 0;}
.info_wrap ul li strong {display: block; width:100px; position: absolute;top:7px;left:0;}
.info_wrap ul li strong.required:after {content:"*";display: inline-block;color: #F00;vertical-align: top;}
.info_wrap ul li p.level_txt {height: 30px;line-height: 28px;color: #000;font-weight: 800;} 
.info_wrap section {padding: 25px 0;}
.info_wrap section+section {border-top: 3px double #ccc;}
.info_wrap .category {padding-bottom: 25px; border-bottom: 3px double #ccc;}
.info_wrap .category_items {padding-top: 25px; padding-bottom: 40px; border-bottom: 1px solid #ddd;}
.info_wrap.pw_change ul li{padding-left: 120px;}
.info_wrap.pw_change ul li strong {width: 110px;}
.info_wrap.pw_change .input {width: 50%;}
.info_wrap .select {width: 30%;}

.datepicker_wrap{display:inline-block;padding-right:5px;border:1px solid #d9d9d9;vertical-align:middle;}
.datepicker_wrap .input{width:85px;height:28px;border:0 none;outline:none;text-align:center;vertical-align:middle; cursor: pointer;}
.datepicker_wrap .ui-datepicker-trigger{display:inline-block;padding:5px;font-size:0;text-indent:-999em;vertical-align:middle;text-align:center;}
.datepicker_wrap .ui-datepicker-trigger:before{content:'';display:inline-block;width:13px;height:12px;background:url(../images/spr.png) no-repeat -105px 0px;}

.timepicker {width: 130px; text-align:left; background-image:url(../images/clock.png); background-size:16px; background-repeat:no-repeat; background-position: 105px; cursor: pointer;}
.ui-corner-all {text-align: left; !important;}

.table_startup>ul>li {padding: 15px 100px 15px 20px;position:relative;text-align: center;border-bottom: 1px solid #ccc;}
.table_startup>ul>li span {position:absolute;top:50%;left:10px;transform:translateY(-50%);}
.table_startup>ul>li .btn_view {left:auto;right:10px;}
.table_startup>ul>li .btn_view .button{width: 80px;}
.table_startup>ul>li>ul>li{float:left;width: 16.666%;padding: 0 5px; box-sizing:border-box;}
.table_startup  .th_line {font-weight: bold; color: #000;font-size: 16px;}

#map {width: 100%;height:400px;background: #f1f1f1;}

.table_admin>ul>li {padding: 15px 20px 15px 20px;position: relative;text-align: center;border-bottom: 1px solid #ccc;}
.table_admin>ul>li span {position:absolute;top:50%;left:10px;transform:translateY(-50%);}
.table_startup>ul>li .btn_view {left:auto;right:10px;}
.table_startup>ul>li .btn_view .button{width: 80px;}
.table_admin>ul>li>ul>li {float: left;padding: 0 5px; box-sizing:border-box;}
.table_admin  .th_line {font-weight: bold; color: #000;font-size: 16px;}
/* ==============================
 * paging
 * ============================== */
.pagination {display: flex;list-style: none;padding: 0;justify-content: center;align-items: center;}
.pagination li {margin: 0;padding: 0;}
.pagination li a {display: block;text-decoration: none;padding: 5px 10px;margin: 10px -1px;border: 1px solid #ccc;border-radius: 4px;color: #333;}
.pagination li.active a {background-color: #000000;color: #fff;}
.pagination li a:hover {background-color: #f2f2f2;}
/* ==============================
 * upload
 * ============================== */
.filebox .upload-name {display: inline-block;height: 32px;padding: 0 10px;vertical-align: middle;border: 1px solid #dddddd;width: 41.25%;color: #999999;}
.filebox label {display: inline-block;padding: 10px 20px;color: #fff;vertical-align: middle;background-color: #999999;cursor: pointer;height: 13px;margin-left: 4px;}
.filebox input[type="file"] {position: absolute;width: 0;height: 0;padding: 0;overflow: hidden;border: 0;}

.table_mentoring>ul>li {padding: 15px 100px 15px 20px;position:relative;text-align: center;border-bottom: 1px solid #ccc;}
.table_mentoring>ul>li span {position:absolute;top:50%;left:10px;transform:translateY(-50%);}
.table_mentoring>ul>li .btn_view {left:auto;right:10px;}
.table_mentoring>ul>li .btn_view .button{width: 80px;}
.table_mentoring>ul>li>ul>li{float:left;width: 16.666%;padding: 0 5px; box-sizing:border-box;}
.table_mentoring  .th_line {font-weight: bold; color: #000;font-size: 16px;}

.table_report>ul>li {padding: 15px 20px 15px 20px;position:relative;text-align: center;border-bottom: 1px solid #ccc;}
.table_report>ul>li span {position:absolute;top:50%;left:10px;transform:translateY(-50%);}
.table_report>ul>li .btn_view {left:auto;right:10px;}
.table_report>ul>li .btn_view .button{width: 80px;}
/* ▼ 모양 화살표 만들기
.table_report>ul>li .btn_view .arrow_btn{width: 0; height: 0; border-bottom: 8px solid transparent; border-top: 8px solid transparent; border-left: 12px solid #dddddd; transform: rotate(90deg);}*/
.table_report>ul>li>ul>li{float:left;width: 20%;padding: 0 5px; box-sizing:border-box;}
.table_report  .th_line {font-weight: bold; color: #000;font-size: 16px;}

.mentoring_list {display: none;}
.arrow_btn_closed:before {content:"▼"}
.arrow_btn_open:before {content:"▲"}
/*.arrow_btn:before {content:"▼"}*/
/*.more_open .arrow_btn:before {content:"▲"}*/

.download:hover {text-decoration: underline;cursor: pointer;}
/*.report:nth-child(1) {border-top: 1px dashed #ddd;}*/
.close-icon:hover {text-decoration: underline;cursor: pointer;}
.close-icon {display: inline-block;padding-left: 10px;}

@media only screen and (max-width: 950px){
#contents {padding: 15px;}
.chart_area .level div {font-size: 40px;}
.survey_wrap ul + ul {margin-top: 10px;}
.survey_wrap>ul>li  {padding:5px 150px 5px 5px;font-size: 11px;line-height: 1.8;}
.survey_wrap>ul>li.first_line_score {height:15px} 
.survey_wrap>ul>li .radio_area {width: 140px;}
.only_pc {display: none;}
.table_startup>ul>li {padding-right: 70px;}
.table_startup>ul>li>ul>li {width: 33.33%;}
.table_startup>ul>li .btn_view .button{width: 60px;}
.table_startup>ul>li span {left:5px}
.table_startup>ul>li .btn_view {right:5px}
.chart_area ul li {float:none;width: 100%;}
.chart_area ul li div {height:180px;}
.chart_area ul li.chart_01 div {height:180px;}
.chart_area .level div {font-size: 70px;}
.chart_area .level p {width: 100px;height:100px; line-height: 98px;}
.chart_area .level .a {line-height: 95px;}
.chart_area .level .c {text-indent: -8px;}
.chart_area .level .d {text-indent: 8px;line-height: 98px;}
.chart_area .level .danger {font-size: 40px;}
.chart_area .level .danger_en {font-size: 27px;}
.info_wrap.pw_change .input {width:100%;}
.info_wrap .select {width: 100%;} 
#map {height:250px;}

.table_mentoring>ul>li {padding-right: 70px;}
.table_mentoring>ul>li>ul>li {width: 42%;}
.table_mentoring>ul>li .btn_view .button{width: 60px;}
.table_mentoring>ul>li span {left:5px}
.table_mentoring>ul>li .btn_view {right:5px}
}