/* CSS for desktop 
/*****Basic Layout*****/
body{
	margin: 0px;
	padding: 0px;
}
div#container {
	width: 100%;
}
a{
	cursor: pointer;
}

/*****intro 시작*****/
#top_area{
	display: block;
	width: 100%;
	/*background:url("/img/bg_main.jpg");*/
	background-color:#efefef;
	text-align: center;
	border-bottom: 1px solid #cdcdcd;
	/*background:url("../img/menu_bg.jpg")repeat-y;*/
}

#list_area{
	text-align: left;	
}
#project_con{
	width: 100%;
	float:left;
	margin-top: 10px;
	margin-bottom: 10px;
	text-align: left;	
}
#con{
	clear: both;
	width: 100%;
	text-align: left;
	margin-left: auto;
	margin-right: auto;
}
#logo_area{
	width: 100%;
	text-align: center;
	background-color:#efefef;
}
#logo_area_con{
	margin-left: auto;
	margin-right: auto;
	width: 600px;
	text-align: center;
}
#service_intro{
	width: 100%;
	height: 60px;
	text-align: center;
	background: #efefef;	
	overflow-y : hidden;
}
#si_main{
	width: 600px;
	padding-top: 10px;
	padding-bottom: 10px;
	margin-bottom: 20px;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
	background:url("/img/introduce/top_right_bg.png") no-repeat right top;
}
#si_bt{
	width: 100%;
	text-align: center;
	background: #ffffff;
	display: none;
	padding-top: 10px;
	padding-bottom: 10px;
	margin-bottom: 10px;
	border-bottom: 1px solid #cdcdcd;
	cursor: pointer;
}
#con_area{
	width: 100%;
	text-align: center;
}
#bt_area{
	margin-top: 10px;
	margin-bottom: 30px;
	width: 100%;
	text-align: right;
}
#con_main{
	width: 800px;
	max-width: 100%;
	padding-top: 10px;
	padding-bottom: 10px;
	margin-bottom: 20px;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
	background: #ffffff;

	/*background:url("/img/bg_top_con.png")no-repeat;*/
}
.saved_txt{
	cursor: pointer; 
	padding: 10px; 
	border: 1px solid #cdcdcd;
	clear: both;
	float: left;
	width: 100%;
}
#make_step{
	/*background-color: #cdcdcd;*/
	border-bottom: 1px solid #cdcdcd;
	text-align: center;
}
#team_mate_state, #team_state{
	float: left;
	width: 100%;
	margin-bottom: 10px;
}
#linked_url_now{
	float: left;
	width: 100%;
	margin-bottom: 10px;
}

#cate_div, #sdgs_area, #project_img{
	width: 800px;
	float: left;
}
#sdgs_area{
	margin-bottom: 15px;
}
.sdgs_img{
	padding: 5px;
	float: left;
}
#sdgs_area img{
	width: 150px;
}
#add_other_info{
	width: 780px;
	float: left;
	background: #efefef;
	padding: 10px;
}
#intro_con{
	font-size:11px;
	padding-top:10px;
	margin-top:10px;
	border-top: 1px solid #cdcdcd;
}
#intro_con h1{
	color: #34495e;
	margin-bottom: 20px;
}
#intro_con table{
	margin-top: 10px;
}
#intro_con td{
	padding-bottom: 30px;
}
.intro_num_td{
	background: url(/img/input_area_bg.jpg) repeat-y;
	width: 40px;
}
.num_img {
	width: 30px;
	margin-right: 10px;
	margin-top:1px;
}
/*code area 관련*/
#css_con{
	visibility: hidden;
	height: 0px;
}
#edit_code_con_mobile{
	display: none;
}
#code_area{
	visibility: visible;
	height: 400px;
}
#edit_code_con{
	display: block;
}
#code_top_area, #module_con{
	padding-left: 10px;
	padding-top: 10px;
	margin-top: 10px;
	border-top: 1px solid #cdcdcd;
}
#module_top_area{
	padding-left: 10px;
	padding-top: 10px;
	margin-top: 10px;
	border-top: 0px;
}
#editor_mode{
	height: 27px;
}
#code_state{
	font-weight: normal;
	display: block;
	padding-left: 10px;
	margin-bottom: 10px;
	text-align: left;
}
#code_state_m{
	font-weight: normal;
	display: none;
	margin-bottom: 10px;
	text-align: left;
}
/*배경 이미지 쉽게 변경하는 기능 관련*/
#bgc_con_area{
	padding-top: 10px;
}
.bg_controller_area{
	width: 100%;
	padding-top: 100px;
	padding-bottom: 100px;
	border-top: 1px solid #cdcdcd;
	background: url("/img/right_top_shape_w.png") no-repeat top center;
	background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    font-family: 'Nanum Gothic';
}
#bgc_bottom, #bgc_bottom2{
	display: none;
}
.bgc_state{
	width: 100%;
	padding-top:10px;
	padding-bottom:10px;
    font-family: 'Nanum Gothic';
}
.con_area_div{
	width: 100%;
	padding-top: 20px;
	padding-bottom: 10px;
}

.cate_div{
	float: left; 
	margin-right: 5px; 
	margin-bottom: 5px; 
	padding: 10px; 
	border: 1px solid #cdcdcd;
	cursor: pointer;
	text-align: center;
}
.img_div{
	float: left; 
	margin-right: 5px; 
	margin-bottom: 5px; 
	padding: 5px; 
	border: 1px solid #cdcdcd;
	cursor: pointer;
	text-align: center;
}
#right_top_shape{
	position:absolute ;
	right:0px;
	top: 0px; 
	z-index: 20;
}
.top_logo{
	padding-top: 15px;
	padding-bottom: 10px;
	width: 150px;
}
.logo_shape{
	filter:alpha(opacity=50);
	width: 32px;
}
#login_area{
	float:left;
	width: 90%;
	text-align: center;
	background-color: #505050; 
	padding-left: 5%;
	padding-right: 5%;
}
#login_txt{
	width: 100%;
	padding-top: 10px;
	padding-bottom: 10px;
	text-align: left;
	/*background:url("/img/bg_top_con.png")no-repeat;*/
}
#login_txt a{
	color: #fff;
	line-height: 18px;
	/*background:url("/img/bg_top_con.png")no-repeat;*/
}
#login_div{
	float: left;
	display: none;
	background-color: #ffffff;
	padding: 10px;
	color: #555555;
}
/*****intro 끝*****/
/****sub page 시작 ***/
#con_sub{
	clear: both;
	margin-top: 80px;
	width: 700px;
	text-align: left;
	margin-left: auto;
	margin-right: auto;
}
#geo_state{
	clear: both;
}
/*ajax 쿼리 결과 출력 창*/
.ajax_result{
	float: left;
	width: 98%;
	display: none;
	margin-bottom: 10px;
	border: 1px solid #efefef;
	background: #fff;
	padding: 1%;
}
/****sub page 끝 ***/
#top{
	clear: both;
	width: 800px;
	height: 80px;
	margin: 50px;
}
#search_result_team_mate{
	width: 100%;
	float: left;
}
/*콘텐츠 영역*/
.contents{
	/*overflow: hidden;*/
	float: left;
	position: absolute;
	min-width:300px;
	width: 100%;
	color: #555555; 
	font-size: 15px;
	line-height:20px;
	z-index: 5;
	height: 100%;
	/*background: #fff;*/
}
.contents a{
  color: #555555; 
  font-size: 15px;
  line-height:15px;
}
#content{
	float: left;
	margin-top: 30px;
}
#content_area{
	float: left;
	width: 100%;
	padding-top: 80px;
	padding-bottom: 10px;
	background: #ffffff;
}
#con_div{
	padding-left: 20px;
	padding-right: 20px;
	min-width: 150px;
	height: 100%;
}
#wgw_bt_left{
	float: left;
	width: 50%;
	margin-top: 10px;
	text-align: left;
}
#wgw_bt_right{
	float: left;
	width: 50%;
	margin-top: 10px;
	text-align: right;
}
/*popup Contents*/
#popup_area{
	display: block;
	width: 100%;
	text-align: center;
	/*border-bottom: 1px solid #cdcdcd;*/
	padding-top: 10px;
}
#popup_con{
	width: 600px;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
	text-align: center;
	color: #ffffff;
	font-size: 12px;
	margin-top: 20px;
	margin-bottom: 15px;
	padding-top: 15px;
	padding-bottom: 15px;
}
#popup_read{
	width: 600px;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
	text-align: center;
	font-size: 12px;
	margin-bottom: 15px;
	padding-top: 15px;
	padding-bottom: 15px;
}
#popup_txt{
	width: 100%;
	text-align: left;
	text-align: center;
	color: #cdcdcd;
	background-color:#34495e;
	margin-top: 10px;
	padding-top: 15px;
	padding-bottom: 15px;
	cursor: pointer;
}
#popup_bt_area{
	width: 100%;
	color: #555555;
	text-align: left;
	padding-top: 15px;
	padding-bottom: 15px;
	border-top: 1px solid #cdcdcd;
}
#popup_date{
	width: 100%;
	color: #555555;
	padding-top: 10px;
}
#popup_list{
	width: 600px;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
	text-align: center;
	color: #ffffff;
	font-size: 12px;
	margin-bottom: 15px;
	padding-top: 15px;
	padding-bottom: 15px;
}


/*
Step progress bar start
*/
.* {box-sizing:border-box}
.navi_ul {
	list-style:none;
}
.navi_ul a{
	text-decoration: underline;
	color: #555;
}
/* 단계별 상태 스타일 */
.step-box {
	padding:0 10px 10px 10px;
	border:1px solid #ddd;
	background:#fff
}
.step-state {
	padding:10px 0 15px;
	margin-top:15px;
	background:#f7f7f7
}
.step-state ul:after {
	content:'';
	display:block;
	clear:both
}
.step-state ul li {
	float:left;
	position:relative;
	width:33%; /* 5개 진행바를 5등분 */
	padding-top:50px; /* 진행바 영역 확보 */
	font-size:15px;
	font-weight:bold;
	text-align:center;
	line-height:12px;
	color:#666
}
.step-state ul li:first-child {
	font-size:13px
}
/* 도전중, 달성 텍스트 영역 */
.step-state ul li p:after {
	position:absolute; /* absolute 기준은 li 영역 */
	width:41px;
	height:24px;
	margin-right:-20px;
	background:url(http://cfile5.uf.tistory.com/image/241D463E58AFAEAB1642F3) no-repeat 0 0;
	background-size:auto 24px;
	background-position:-58px 0;
	top:0;
	right:0;
	color:#fff;
	font-size:11px;
	line-height:16px;
	letter-spacing:-.5px;
}
.step-state ul li:first-child p {
	padding-top:6px
}
.step-state ul li span {
	display:block;
	margin-top:2px;
	font-weight:normal;
	color:#898989;
	font-size:12px
}
/* 회색 진행바 생성 */
.step-state ul li:before {
	position:absolute;
	top:35px;
	left:0;
	right:0;
	height:3px;
	background:#ddd;
	content:''
}
/* 첫 번째 진행바 반만 생성*/
.step-state ul li:nth-child(1):before {
	left:50%
}
/* 마지막 진행바 반만 생성*/
.step-state ul li:nth-child(3):before {
	right:50%
}
/* 화살표 상태 아이콘 */
.step-state ul li:after {
	position:absolute;
	top:27px;
	left:50%;
	width:20px;
	height:20px;
	margin-left:-10px;
	background:url(/img/ico_pangpays.png) no-repeat 0 0;
	background-size:auto 24px;
	background-position:0 0;
	content:''
}

/* 활성화 진행바 및 활성화 화살표 아이콘 표시 */
/* 활성화 상태바 */
.step-state.step1 ul li:nth-child(1):before,
.step-state.step2 ul li:nth-child(-n+2):before,
.step-state.step2-ing ul li:nth-child(-n+2):before,
.step-state.step3 ul li:nth-child(-n+3):before,
.step-state.step3-ing ul li:nth-child(-n+3):before {
	background:#37bc9b;
}
/* 활성화 아이콘 표시 */
.step-state.step1 ul li:nth-child(1):after,
.step-state.step2 ul li:nth-child(-n+2):after,
.step-state.step2-ing ul li:nth-child(-n+2):after,
.step-state.step3 ul li:nth-child(-n+3):after,
.step-state.step3-ing ul li:nth-child(-n+3):after {
	background-position:-20px 0
}
/* 도전 중일 경우의 1/2 영역 비활성화 상태바 영역 */
.step-state ul li p:before {
	position:absolute;
	top:35px;
	left:50%;
	right:0;
	height:3px;
	content:'';
}
.step-state.step2 ul li:nth-child(2) p:before,
.step-state.step3 ul li:nth-child(3) p:before,
.step-state.step4 ul li:nth-child(4) p:before {
	background:#ddd
}

/*
Step progress bar end
*/

/*
report 
*/
#report_area{
	width: 100%;
	padding-top: 30px;
}
#report_con_area{
	margin-left: auto;
	margin-right: auto;
	max-width: 860px;
	width: 80%;
	text-align: center;
	border: 1px solid #cdcdcd;
	padding: 30px;
	background: #fff;
}
#report_con{
	width: 100%;
	clear: both;

}
.report_guide{
	background: #555;
	color: #fff;
	padding: 10px;
	margin-bottom: 30px;
}
#report_con_detail{
	width: 90%;
	padding-left: 5%;
	padding-right: 5%;
	display: inline-block;
	text-align: left;
}
#report_con_detail hr{
	float: left;
	width: 100%;
	margin-top: 20px;
	margin-bottom: 20px;
}
#report_con_detail h4{
	margin-bottom: 10px;
}