@charset "UTF-8";

/* Reset */
 * {outline:0;}
html,body,h1,h2,h3,h4,h5,h6,div,p,blockquote,pre,code,address,ul,ol,li,menu,nav,section,article,aside,
dl,dt,dd,table,thead,tbody,tfoot,label,caption,th,td,form,fieldset,legend,hr,input,button,textarea,object,figure,figcaption {margin:0;padding:0;}
html, body{width:100%;}
html{-webkit-touch-callout:none; -webkit-user-select:none; -webkit-tap-highlight-color:rgba(0, 0, 0, 0);}
body{width:100%; background:#fff; min-width:320px; -webkit-text-size-adjust:none;word-wrap:break-word;word-break:break-all;}
body,input,select,textarea,button {border:none;font-size:14px; font-family:'Noto Sans KR', sans-serif;color:#000;}
ul,ol,li{list-style:none;}
table{width:100%;border-spacing:0;border-collapse:collapse;}
img,fieldset{border:0;}
address,cite,code,em{font-style:normal;font-weight:normal;}
label,img,input,select,textarea,button{vertical-align:middle;}
.hide,caption,legend{line-height:0;font-size:1px;overflow:hidden;}
hr{display:none;}
main,header,section,nav,footer,aside,article,figure{display:block;}
a{color:#000;text-decoration:none;}

.clear {clear:both;}
.clear:after {content:""; display:block; clear:both;}
.ir_pm {display:block; overflow:hidden; font-size:0; line-height:0; text-indent:-9999px;}

/* 레이아웃 */
#nam_wrap * {-moz-box-sizing:content-box;box-sizing:content-box}
#nam_wrap .container {width: 1000px; margin: 0 auto; padding-left:0; padding-right:0}

/* sec_top */
#nam_wrap .sec_top {padding-top: 196px;}
#nam_wrap .sec_top h1 {
	height: 225px;
	padding-bottom: 60px;
	background: url('../img/nam/h1_txt.png') no-repeat center top;
}
#nam_wrap .sec_top .video_cover {
	position: relative;
	width: 640px;
	height: 336px;
	margin: 0 auto 102px;
}
#nam_wrap .sec_top .video {
	position: absolute;
	left: 0; top: 0;
	width: 100%; height: 100%;
	border: none;
}
#nam_wrap .sec_top .txt {
	height: 250px;
	padding-bottom: 76px;
	background: url('../img/nam/sec_top_txt.png') no-repeat center top;
}

/* sec_01 */
#nam_wrap .sec_01 .txt1 {
	height: 146px;
	padding-bottom: 132px;
	background: url('../img/nam/sec01_txt_1.png') no-repeat center top;
}
#nam_wrap .sec_01 .txt2 {
	height: 215px;
	padding-bottom: 134px;
	background: url('../img/nam/sec01_txt_2.png') no-repeat center top;
}

/* sec_02 */
#nam_wrap .sec_02 .txt1 {
	height: 524px;
	padding-bottom: 128px;
	background: url('../img/nam/sec02_txt_1.png') no-repeat center top;
}
#nam_wrap .sec_02 .txt2 {
	height: 748px;
	padding-bottom: 182px;
	background: url('../img/nam/sec02_txt_2.png') no-repeat center top;
}

/* sec_03 */
#nam_wrap .sec_03 .txt1 {
	height: 430px;
	padding-bottom: 192px;
	background: url('../img/nam/sec03_txt_1.png') no-repeat center top;
}
#nam_wrap .sec_03 .txt2 {
	height: 169px;
	padding-bottom: 86px;
	background: url('../img/nam/sec03_txt_2.png') no-repeat center top;
}
#nam_wrap .sec_03 .txt3 {
	height: 415px;
	padding-bottom: 162px;
	background: url('../img/nam/sec03_txt_3.png') no-repeat center top;
}
#nam_wrap .sec_03 .txt4 {
	height: 47px;
	padding-bottom: 140px;
	background: url('../img/nam/sec03_txt_4.png') no-repeat center top;
}
#nam_wrap .sec_03 .txt5 {
	height: 225px;
	padding-bottom: 72px;
	background: url('../img/nam/sec03_txt_5.png') no-repeat center top;
}
#nam_wrap .sec_03 .txt6 {
	position: relative;
	height: 1578px;
	background: url('../img/nam/sec03_txt_6.png') no-repeat center top;
}
#nam_wrap .sec_03 .txt6:after {
	content: '';
	position: absolute;
	left: 0; top: 786px;
	width: 100%;
	height: 597px;
	background: url('../img/nam/sec03_txt_7.png') no-repeat center top;
}

/* sec_04 */
#nam_wrap .sec_04 {background: url('../img/nam/sec04_bg.jpg') no-repeat center bottom;}
#nam_wrap .sec_04 h2 {
	height: 69px;
	padding-bottom: 25px;
	background: url('../img/nam/sec04_h2.png') no-repeat center top;
}
#nam_wrap .sec_04 .txt1 {
	height: 130px;
	padding-bottom: 114px;
	background: url('../img/nam/sec04_txt_1.png') no-repeat center top;
}
#nam_wrap .sec_04 .txt2 {
	height: 337px;
	padding-bottom: 152px;
	background: url('../img/nam/sec04_txt_2.png') no-repeat center top;
}
#nam_wrap .sec_04 .txt3 {
	position: relative;
	height: 769px;
	background: url('../img/nam/sec04_txt_3_end.png') no-repeat 0 94px;
}
#nam_wrap .sec_04 .txt3 .btn_area > a {
	position: absolute;
	left:50%;
	bottom: 121px;
	margin-left:-20px;
	width: 333px;
	height: 103px;
}
#nam_wrap .sec_04 .txt3 .btn_area > a:first-child {
	background: url('../img/nam/sec04_btn_utoro.png') no-repeat 0 0;
}
#nam_wrap .sec_04 .txt3 .btn_area > a + a {
	left: 353px;
	background: url('../img/nam/sec04_btn_2.png') no-repeat 0 0;
}

/* sec_05 */
#nam_wrap .sec_05 {background-color: #ffefc9;}
#nam_wrap .sec_05 .container {
	padding: 137px 0 130px;
	background: url('../img/nam/sec05_bg.png') no-repeat right 110px;
}
#nam_wrap .sec_05 h2 {
	height: 47px;
	padding-bottom: 26px;
	background: url('../img/nam/sec05_h2.png') no-repeat 0 0;
}
#nam_wrap .sec_05 .txt {
	height: 29px;
	padding-bottom: 114px;
	background: url('../img/nam/sec05_txt_1.png') no-repeat 0 0;
}

/* 게시판 부분 */
#nam_wrap .sec_05 .bbs ul > li {float: left; width: 227px;height: 290px;}
#nam_wrap .sec_05 .bbs ul > li + li {margin-left: 29px;}
#nam_wrap .sec_05 .bbs ul > li:nth-child(5n) {margin-left: 0}
#nam_wrap .sec_05 .bbs ul > li em {
	display: block;
	text-align: center;
	line-height: 30px;
	font-size: 15px;
	background-color: #ffbd1e;
	color: #000;
}
#nam_wrap .sec_05 .bbs ul > li em.type2 {background-color: #ff981e}
#nam_wrap .sec_05 .bbs ul > li em.type3 {background-color: #b4e53d}
#nam_wrap .sec_05 .bbs ul > li em.type4 {background-color: #52e7bb}
#nam_wrap .sec_05 .bbs ul > li img {width: 100%;}
#nam_wrap .sec_05 .bbs ul > li span {
	display: block;
	padding-top: 16px;
	font-size: 17px;
	line-height: 1.5;
	text-align: center;
	font-weight:bold;
}
#nam_wrap .sec_05 .bbs .paging {padding-top: 12px; text-align: center; vertical-align: middle;}
#nam_wrap .sec_05 .bbs .paging > span {display: inline-block; padding-right: 19px; color: #736c5b;}
#nam_wrap .sec_05 .bbs .paging > ol {display: inline-block; font-size: 0;}
#nam_wrap .sec_05 .bbs .paging > ol > li {display: inline-block; margin: 0 1px;}
#nam_wrap .sec_05 .bbs .paging > ol > li a {
	display: inline-block;
	width: 25px;
	line-height: 24px;
	font-size: 14px;
	border: 1px solid #aaa;
}
#nam_wrap .sec_05 .bbs .paging > ol > li.on a {
	background-color: #ff5200; color: #fff; border-color: #ff5200;
}

#nam_wrap .pagination span, #nam_wrap .pagination a {color:#000;border-color:#777}

/* link */
#nam_wrap .aside > a {
	position: absolute; top: 92px; right: 0;
	width: 163px; height: 141px;
	background: url('../img/nam/btn_top_link.png') no-repeat 0 0;
}

#nam_wrap .sec_06 {background-color:#ffde8e;}
#nam_wrap .sec_06 .container {
    padding: 137px 0 130px;
}
#nam_wrap .sec_06 h2 {
	height: 97px;
	padding-bottom: 26px;
	background: url('../img/nam/sec06_h2.png') no-repeat 50% 0;
}
#nam_wrap .sec_06 .txt {
	height: 67px;
	padding-bottom: 26px;
	background: url('../img/nam/sec06_txt_1.png') no-repeat 50% 0;
}
#nam_wrap .sec_06 .img_reward {
	height: 568px;
	padding-bottom: 26px;
	background: url('../img/nam/sec06_img_1.jpg') no-repeat 50% 0;
}
#nam_wrap .sec_06 .btn_area {
	text-align: center;
}
#nam_wrap .sec_06 .btn_area > a {
	display: inline-block;
	width: 333px;
	height: 103px;
	margin: 0 auto;
}
#nam_wrap .sec_06 .btn_area > a:first-child {
	background: url('../img/nam/sec04_btn_utoro.png') no-repeat 0 0;
}
#nam_wrap .sec_06 .btn_area > a + a {
	background: url('../img/nam/sec04_btn_2.png') no-repeat 0 0;
}

@media screen and (max-width: 999px) {
	#nam_wrap .btn-pageup {padding: 20px 0 50px;border: 0;}
	
	/* 레이아웃 */
	#nam_wrap .container {width: 100%;}
	#nam_wrap .sec_top {padding: 79px 15px 0;}
	#nam_wrap .sec_01, #nam_wrap .sec_02, #nam_wrap .sec_03,
	#nam_wrap .sec_04, #nam_wrap .sec_05 {padding: 0 15px;}

	/* sec_top */
	#nam_wrap .sec_top h1 {
		width: 289px;
		height: 89px;
		padding-bottom: 24px;
		margin: 0 auto;
		background: url('../img/nam/mobile/h1_txt.png') no-repeat 0 0;
		background-size: contain;
	}
	#nam_wrap .sec_top .video_cover {
		width: 100%;
		height: auto;
		padding-top: 52.5%;
		margin-bottom: 36px;
	}
	#nam_wrap .sec_top .txt {
		width: 317px;
		height: 125px;
		padding-bottom: 45px;
		margin: 0 auto;
		background: url('../img/nam/mobile/sec_top_txt.png') no-repeat 0 0;
		background-size: contain;
	}

	/* sec_01 */
	#nam_wrap .sec_01 .txt1 {
		width: 291px;
		height: 271px;
		padding-bottom: 50px;
		background: url('../img/nam/mobile/sec01_txt_1.png') no-repeat 0 0;
	}
	#nam_wrap .sec_01 .txt2 {
		width: 320px;
		height: 317px;
		padding-bottom: 50px;
		background: url('../img/nam/mobile/sec01_txt_2.png') no-repeat 0 0;
	}
	#nam_wrap .sec_01 .txt1, #nam_wrap .sec_01 .txt2 {
		margin: 0 auto; background-size: contain;
	}

	/* sec_02 */
	#nam_wrap .sec_02 .txt1 {
		position: relative;
		width: 322px;
		height: 480px;
		padding-bottom: 0;
		background: url('../img/nam/mobile/sec02_txt_1_1.png') no-repeat 0 0;
	}
	#nam_wrap .sec_02 .txt1:after {
		content: '';
		position: absolute;
		left: 0; top: 204px;
		width: 320px;
		height: 241px;
		background: url('../img/nam/mobile/sec02_txt_1_2.png') no-repeat 0 0;
	}
	#nam_wrap .sec_02 .txt2 {
		width: 326px;
		height: 560px;
		padding-bottom: 90px;
		background: url('../img/nam/mobile/sec02_txt_2.png') no-repeat 0 0;
	}
	#nam_wrap .sec_02 .txt1, #nam_wrap .sec_02 .txt1:after, #nam_wrap .sec_02 .txt2 {
		margin: 0 auto; background-size: contain;
	}

	/* sec_03 */
	#nam_wrap .sec_03 .txt1 {
		width: 320px;
		height: 197px;
		padding-bottom: 86px;
		background: url('../img/nam/mobile/sec03_txt_1.png') no-repeat 0 0;
	}
	#nam_wrap .sec_03 .txt2 {
		width: 311px;
		height: 148px;
		padding-bottom: 21px;
		background: url('../img/nam/mobile/sec03_txt_2.png') no-repeat 0 0;
	}
	#nam_wrap .sec_03 .txt3 {
		width: 307px;
		height: 366px;
		padding-bottom: 62px;
		background: url('../img/nam/mobile/sec03_txt_3.png') no-repeat 0 0;
	}
	#nam_wrap .sec_03 .txt4 {
		width: 118px;
		height: 29px;
		padding-bottom: 44px;
		background: url('../img/nam/mobile/sec03_txt_4.png') no-repeat 0 0;
	}
	#nam_wrap .sec_03 .txt5 {
		width: 320px;
		height: 123px;
		padding-bottom: 7px;
		background: url('../img/nam/mobile/sec03_txt_5.png') no-repeat 0 0;
	}
	#nam_wrap .sec_03 .txt6 {
		position: relative;
		width: 320px;
		height: 829px;
		background: url('../img/nam/mobile/sec03_txt_6.png') no-repeat 0 0;
	}
	#nam_wrap .sec_03 .txt6:after {
		top: 460px;
		height: 290px;
		background: url('../img/nam/mobile/sec03_txt_7.png') no-repeat 0 0;
	}
	#nam_wrap .sec_03 .txt1, #nam_wrap .sec_03 .txt2, #nam_wrap .sec_03 .txt3,
	#nam_wrap .sec_03 .txt4, #nam_wrap .sec_03 .txt5, #nam_wrap .sec_03 .txt6,
	#nam_wrap .sec_03 .txt6:after {margin: 0 auto; background-size: contain;}

	/* sec_04 */
	#nam_wrap .sec_04 {
		background: url('../img/nam/sec04_bg.jpg') no-repeat 71% 590px;
		background-size: auto;
	}
	#nam_wrap .sec_04 h2 {
		width: 212px;
		height: 35px;
		background: url('../img/nam/mobile/sec04_h2.png') no-repeat 0 0;
	}
	#nam_wrap .sec_04 .txt1 {
		width: 310px;
		height: 109px;
		padding-bottom: 25px;
		background: url('../img/nam/mobile/sec04_txt_1.png') no-repeat 0 0;
	}
	#nam_wrap .sec_04 .txt2 {
		width: 311px;
		height: 309px;
		padding-bottom: 80px;
		background: url('../img/nam/mobile/sec04_txt_2.png') no-repeat 0 0;
	}
	#nam_wrap .sec_04 .txt3 {
		width: 289px;
		height: 740px;
		background: url('../img/nam/mobile/sec04_txt_3_end.png') no-repeat 0 66px;
	}
	#nam_wrap .sec_04 .txt3 .btn_area > a {
		left: 50%;
		margin-left: -98.75px;
		width: 197.5px;
		height: 61px;
	}
	#nam_wrap .sec_04 .txt3 .btn_area > a:first-child {
		bottom: 50px;
		background: url('../img/nam/mobile/sec04_btn_utoro.png') no-repeat 0 0;
		background-size: contain;
	}
	#nam_wrap .sec_04 .txt3 .btn_area > a + a {
		left: 50%; bottom: 61px;
		background: url('../img/nam/mobile/sec04_btn_2.png') no-repeat 0 0;
		background-size: contain;
	}
	#nam_wrap .sec_04 h2, #nam_wrap .sec_04 .txt1, #nam_wrap .sec_04 .txt2,
	#nam_wrap .sec_04 .txt3, #nam_wrap .sec_04 .txt4, #nam_wrap .sec_06 h2, #nam_wrap .sec_06 .txt, #nam_wrap .sec_06 .img_reward {margin: 0 auto; background-size: contain;}

	/* sec_05 */
	#nam_wrap .sec_05 .container {
		width: 320px;
		padding: 70px 0 76px;
		background: url('../img/nam/mobile/sec05_bg.png') no-repeat right 42px;
		background-size: 102px auto;
	}
	#nam_wrap .sec_05 h2 {
		width: 206px;
		height: 47px;
		padding-bottom: 19px;
		background: url('../img/nam/mobile/sec05_h2.png') no-repeat 0 0;
	}
	#nam_wrap .sec_05 .txt {
		width: 284px;
		height: 16px;
		padding-bottom: 40px;
		background: url('../img/nam/mobile/sec05_txt_1.png') no-repeat 0 0;
	}
	#nam_wrap .sec_05 h2,	#nam_wrap .sec_05 .txt {background-size: contain;}

	/* 게시판 부분 */
	#nam_wrap .sec_05 .bbs ul > li {width: 49.5%;height:220px}
	#nam_wrap .sec_05 .bbs ul > li + li {margin-left: 1%;}
	#nam_wrap .sec_05 .bbs ul > li:nth-child(2n + 1) {margin-left: 0}
	#nam_wrap .sec_05 .bbs ul > li em {line-height: 25px;	font-size: 13px;}
	#nam_wrap .sec_05 .bbs ul > li span {padding-top: 8px; font-size: 13px;}
	#nam_wrap .sec_05 .bbs .paging > span {font-size: 13px;}
	#nam_wrap .sec_05 .bbs .paging > ol > li a {width: 16px; line-height: 16px; font-size: 13px;}
	
	/* sec_06 reward */
	#nam_wrap .sec_06 .container {padding: 70px 0 76px;}
	#nam_wrap .sec_06 h2 {
		width: 315px;
		height: 74px;
		padding-bottom: 19px;
		background: url('../img/nam/mobile/sec06_h2.png') no-repeat 50% 0;
	}
	#nam_wrap .sec_06 .txt {
		width: 307px;
		height: 88px;
		padding-bottom: 40px;
		background: url('../img/nam/mobile/sec06_txt_1.png') no-repeat 50% 0;
	}
	#nam_wrap .sec_06 .img_reward {
		width: 310px;
		height: 137px;
		padding-bottom: 40px;
		background: url('../img/nam/mobile/sec06_img_1.png') no-repeat 50% 0;
	}
	#nam_wrap .sec_06 h2, #nam_wrap .sec_06 .txt, #nam_wrap .sec_06 .img_reward {background-size: contain;}
	#nam_wrap .sec_06 .btn_area > a {
		display: block;
		width: 197.5px;
		height: 61px;
	}
	#nam_wrap .sec_06 .btn_area > a:first-child {
		background: url('../img/nam/mobile/sec04_btn_utoro.png') no-repeat 0 0;
		background-size: contain;
	}
	#nam_wrap .sec_06 .btn_area > a + a {
		margin-top: 15px;
		background: url('../img/nam/mobile/sec04_btn_2.png') no-repeat 0 0;
		background-size: contain;
	}

	/* link */
	#nam_wrap .aside {
		position: fixed; bottom: 5px;
		width: 94%; height: 40px;
		left: 1%;
		padding: 2%;
		background-color: #fff;
	}

	#nam_wrap .aside > a {
		top: auto; right: 2%;
		width: 96%;
		height: 40px;
		background: #67503c url('../img/nam/mobile/btn_top_link.png') no-repeat center;
		background-size: auto 18px;
	}
} /* End - media (max-width: 999px) */

@media screen and (max-width: 320px) {
	#nam_wrap .sec_top {padding-left: 10px; padding-right: 10px;}
	#nam_wrap .sec_01, #nam_wrap .sec_02, #nam_wrap .sec_03,
	#nam_wrap .sec_04, #nam_wrap .sec_05 {padding: 0 10px;}

	#nam_wrap .sec_top .txt,
	#nam_wrap .sec_01 .txt1, #nam_wrap .sec_01 .txt2,
	#nam_wrap .sec_02 .txt1, #nam_wrap .sec_02 .txt1:after, #nam_wrap .sec_02 .txt2,
	#nam_wrap .sec_03 .txt1, #nam_wrap .sec_03 .txt2, #nam_wrap .sec_03 .txt3,
	#nam_wrap .sec_03 .txt5, #nam_wrap .sec_03 .txt6, #nam_wrap .sec_03 .txt6:after,
	#nam_wrap .sec_04 .txt1, #nam_wrap .sec_04 .txt2,
	#nam_wrap .sec_05 .container {width: 100%;}
	#nam_wrap .sec_02 .txt2 {height: 520px;}

} /* End - media (max-width: 320px) */

/* s: 남간사 프로젝트 리스트 */
.nam_list{
    float: left;
    position: relative;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
    margin-bottom: 15px;
    }
.nam_list > ul {
    padding-left: 15px;
    padding-right: 15px;

    list-style:none;
    padding-left:0px;
}
.nam_list > ul > li {
    list-style:none;
    padding-left:0px;
}
.nam_box {height: 300px;}
.nam_image {
    border: #ddd 1px solid;
    width: 200px;
    height: 200px;
    overflow: hidden;
}
/* e: 남간사 프로젝트 리스트 */