@charset "utf-8";
/* CSS Document */

html,body { padding:0; margin:0; font-size:16px; line-height:normal;}
p{margin:0; padding:0;}
	
.block{ 
	width:100%;
	height:auto; 
	position:relative;  
	float:left;
	padding-bottom:10%;
	}
	
#home{
	position:relative;
	float:left;
	width:100%;
	margin-top:110px;
	}
	
.slide{
	position:relative;
	float:left;
	left:0px;
	width:100%;
	display:block;
	}
	
#slide_desktop{display:block;}
#slide_mobile{display:none;}

/*----------------------------------------------------------------------------------------------*/

.content{
	position:relative;
	float:left;
	width:60%;
	margin:5% 0 0 20%;
	}

.head_img{
	position:relative;
	width:18%;
	min-width:160px;
	}
	
#content_main{
	margin:5% 0;
	width:100%;	
	color:#FFF;	
	font-family:supermarket;
	font-size:1em;
	}
	
#content_topic{
	position:relative;
	float:left;
	width:100%;
	margin-top:3%;
	font-size:1em;
	line-height:1.2em;
	}
	
#content_detail{
	position:relative;
	float:left;
	width:100%;
	margin:2% 0;
	font-size:.7em;
	line-height:1.4em;
	text-indent:1.5em;
	}
	
	#content_detail a{
		color:#fff;
		text-decoration:none;
		list-style:none;
		}
	
#content_img{
	position:relative;
	float:left;
	width:100%;	
	padding-bottom:3%;
	}
	
.img_content{
	position:relative;
	float:left;
	width:31.33%;	
	padding:1%;	
	}
	
.box_content{
	position:relative;
	float:left;
	width:100%;
	margin-top:1%;
	}
	
.box{
	position:relative;
	float:left;
	width:29.33%;
	margin-top:3%;
	padding:0 2% 0 2%;
	font-family:supermarket;
	font-size:.9em;
	line-height:1.1em;
	color:#FFF;
	}
	
	.box div{
		float:left;
		margin-bottom:1%;
		}
		
.box_img{
	width:100%;
	position:relative;
	float:left;
	padding:0;
	margin:0;
	}	
	
.box_topic_project{
	position:relative;
	float:left;
	width:100%;
	font-size:.9em;
	font-weight:500;	
	line-height:1.2em;
	text-align:center;
	}
	
.box_line{
	position:relative;
	float:left;
	background-color:#FFF;
	width:100%;
	height:2px;
	}

.box_line_project{
	position:relative;
	float:left;
	opacity:.3;
	background-color:#FFF;
	width:100%;
	height:6px;
	}
		
.box_detail_project{	
	margin-top:4%;
	position:relative;
	float:left;
	font-size:.7em;
	line-height:1.4em;
	text-indent:1em;
	}
	
.btn{
	position:relative;
	width:100%;
	text-align:center;
	float:left;
	}
	
/*----------------------------------------------------------------------------------------------*/

#project{
	position:relative;
	background-color:#fbae41;
	float:left;
	width:100%;
	}
	
#btn_project_more{
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0px;
  font-family: sans;
  color: #FFF;
  font-size: .9em;
	line-height: 1.2em;
  background: #8dc540;
  padding: 6px 20px 14px 20px;
  text-decoration: none;
  text-align:center;
  cursor:pointer;
}

	#btn_project_more:hover {
	  background: #FFF;
	  text-decoration: none;
	  color: #fbae41;
	}

/*----------------------------------------------------------------------------------------------*/

#change_page{ position:relative; width:auto; height:auto; float:right; margin-top:5%;}

#prev_page{float:left; color:#FFF; cursor:pointer; padding:0 10px; font-size:.8em; line-height:1.5em;}
#next_page{float:right; color:#FFF; cursor:pointer; padding:0 10px; font-size:.8em; line-height:1.5em;}
#prev_page:hover{color:#666666 ;}
#next_page:hover{color:#666666 ;}

.number{
	float:left; 
	cursor: pointer; 
	margin-left:10px; 
	text-align:center; 
	text-decoration:none; 
	font-family:supermarket; 
	font-size:.8em; 
	line-height:1.5em; 
	color:#666666;}
	
	.number:hover{color:#FFF;}
	
.number_select{
	float:left; 
	cursor: pointer;
	margin-left:10px; 
	text-align:center; 
	text-decoration:none; 
	font-family:supermarket; 
	font-size:.8em; 
	line-height:1.5em;
	color:#FFF;}
	
/*----------------------------------------------------------------------------------------------*/

.popup_btn{ cursor:pointer;}
#close{position:fixed; top:0px; right:0; cursor:pointer; width:auto; margin:1% 1% 0 0; text-align:right; vertical-align:middle;}
#close_txt{font-family:supermarket; font-size:20px;  color:#fff; line-height:1em; vertical-align:middle;}
#close_img{width:30px; margin-left:5px;}
#popup_item{ width:100%; height:100%; position:fixed; z-index:99; }
#popup_box{ width:50%; left:50%; margin-left:-26%; position:fixed;}
#height_popup{ padding:1%; background-color:#FFF; position:absolute; float:left;}

/*----------------------------------------------------------------------------------------------*/

@media screen and (max-width: 1440px) and (min-width: 1367px) {
.btn{font-size:.9em;}
}

@media screen and (max-width: 1366px) and (min-width: 1281px) {
.btn{font-size:.9em;}
}

@media screen and (max-width: 1280px) and (min-width: 1025px) {
.btn{font-size:.9em;}
.content{width:70%; margin-left:15%;}

#popup_box{ width:60%; margin-left:-32%;}
}

@media screen and (max-width: 1024px) and (min-width: 769px) {
.btn{font-size:.9em;}
.content{width:80%; margin-left:10%;}

#popup_box{ width:60%; margin-left:-32%;}
}

@media screen and (max-width: 768px) and (min-width: 641px){	
#home{margin-top:0px;}

.btn{font-size:.95em;}

#slide_desktop{display:none;}
#slide_mobile{display:block;}

.head_img{min-width:180px;}

.content{width:90%; margin-left:5%; font-size:1.3em;}

#popup_box{ width:60%; margin-left:-32%;}
}

@media screen and (max-width: 640px) and (min-width: 481px){
#home{margin-top:0px;}

#slide_desktop{display:none;}
#slide_mobile{display:block;}

.head_img{min-width:180px;}

.content{width:90%; margin-left:5%; font-size:1.4em;}
.box{font-size:1em}

#popup_box{ width:70%; margin-left:-37%;}
}

@media screen and (max-width: 480px) and (min-width: 321px){
#home{margin-top:-10px;}
.block{padding-bottom:15%;}

#slide_desktop{display:none;}
#slide_mobile{display:block;}

.head_img{min-width:160px;}

.content{width:90%; margin-left:5%; font-size:2em;}
#img_show{width:110%; margin-left:-5%;}
#content_img{width:110%; margin-left:-5%;}
.img_content{width:48%;}

.box{width:80%; margin:0 0 0 10%; padding:0; font-size:.9em;}
.box_content{margin-top:5%;}
.box_line{width:50%; margin-left:25%;}
.box_project{padding-bottom:10%;}	
.box_topic_project{width:100%; text-align:center;}

#popup_box{ width:80%; margin-left:-42%;}
}

@media screen and (max-width: 320px) {
#home{margin-top:-20px;}
.block{padding-bottom:15%;}

#slide_desktop{display:none;}
#slide_mobile{display:block;}

.head_img{min-width:130px;}

.content{width:90%; margin-left:5%; font-size:2.2em;}
#img_show{width:110%; margin-left:-5%;}
#content_img{width:110%; margin-left:-5%;}
.img_content{width:48%;}

.box{width:80%; margin:0 0 0 10%; padding:0; font-size:1em;}
.box_content{margin-top:5%;}
.box_line{width:50%; margin-left:25%;}
.box_project{padding-bottom:10%;}	
.box_topic_project{width:100%; text-align:center;}

#popup_box{ width:90%; margin-left:-47%;}
}