@charset "utf-8";

*{margin:0px; padding:0px; list-style:none}
html,body,div,object,iframe,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video,select,input,textarea,button{margin:0; padding:0; font-size:15px; font-family:'Malgun Gothic','맑은 고딕','Nanum Gothic','나눔고딕',dotum; letter-spacing:-.5px; color:#484848; line-height:170%}
a{color:#484848; text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%}
table{border-spacing:0px}
.w100{width:100px}
.w120{width:120px}
.w15p{width:15%}
.w20p{width:20%}
.left{text-align:left !important; }

.wrapper{margin:auto; width:98%; max-width:1400px}

/*** header ***/
header{}
header .top{position:relative; margin:auto; width:90%; max-width:530px}
header h1{position:absolute; left:-220px; top:3px}
header div.search{position:relative; margin:42px auto 41px; padding-right:240px; width:100%; border:2px solid #333; border-radius:5px; box-sizing:border-box}
header div.search input[type=text]{padding:12px 5%; width:90%; border:0px; font-size:1.07em; color:#666; background:transparent}
header div.search input[type=text]:focus{color:#333; font-weight:bold}
header div.search input[type=submit]{position:absolute; right:0px; top:0px; width:100px; height:100%; background:#333; color:#fff; 
font-size:1.2em; border:0px}
header div.search p.research{position:absolute; bottom:13px; right:125px}
header div.search p.research input[type=checkbox]{width:16px; height:16px; vertical-align:middle}
header nav{background:#333}
header nav h2{position:fixed; top:-5000px; right:-5000px}
header nav ul{overflow:hidden; border-top:3px solid #333}
header nav ul li{position:relative; float:left; text-align:center; width:14.28%}
header nav ul li:after{display:block; content:''; position:absolute; left:0px; top:17px; width:1px; height:16px; background:#444}
header nav ul li:first-child:after{display:none}
header nav ul li a{display:block; padding:12px 5px 17px; font-size:1.2em; color:#eaeaea}
header nav ul li.select a{background:#fff; font-weight:bold; color:#333}
header nav ul li.select:after{display:none}
header nav ul li.select+li:after{display:none}

/*** footer ***/
footer{text-align:center; padding:27px 10px 35px; background:#393939}
footer a{display:inline-block; position:relative; padding:3px 1px; font-size:1.2em; color:#fff; border-bottom:1px solid #fff}
footer a:before{display:inline-block; content:''; margin-right:5px; border-width:10px 6px; border-style:solid; border-color:transparent; border-bottom-color:#fff; }

/*** container ***/
.container{position:relative; overflow:hidden}
.search_word{color:#b00101; font-weight:bold}
.result_num{}
.more{margin-top:40px; text-align:right}
.contents>section ul.menu+p.more{margin-top:-25px}
.contents>section ul.image+p.more{margin-top:10px}
.more a{display:inline-block; position:relative; padding-right:13px; font-weight:bold; font-size:0.93em; color:#0459b8; letter-spacing:-1px}
.more a:before,
.more a:after{display:block; content:''; position:absolute; right:0px; top:7px; width:2px; height:8px; background:#0459b8; transform:rotate(-45deg)}
.more a:after{top:12px; transform:rotate(45deg)}
.depth{color:#666; font-size:0.93em}
.depth span.name{margin-right:5px; font-weight:bold; display:block; text-overflow:ellipsis; overflow:hidden; white-space:nowrap}
/* contents */
.container .contents{float:left; width:71.4%}
.container.noaside .contents{float:none; width:100%}
.contents .total{padding:25px 25px 22px; font-size:0.93em}
.contents>section{padding:4% 5% 4% 2.5%; border-top:1px solid #eee; word-break:keep-all}
.contents>.total+section{border-top-color:#ddd}
.contents>section:last-child{margin-bottom:5%}
.contents>section h3{margin-bottom:30px; font-size:21px; color:#333}
.contents>section h3 span{font-weight:normal; font-size:16px; color:#666}
.contents>section ul.menu.pdR130{padding-right:130px}
.contents>section ul.menu>li{position:relative; margin-top:3px; padding-left:10px}
.contents>section ul.menu>li:after{display:block; content:''; position:absolute; left:2px; top:10px; width:4px; height:4px; background:#aaa}
.contents>section div.form dl{margin-top:40px}
.contents>section div.form dl:first-child{margin-top:0px}
.contents>section div.form dl dt{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.contents>section div.form dl dt a{display:block; color:#0459b8; font-size:1.07em}
.contents>section div.form dl dd{padding-left:1px; font-size:0.93em; line-height:150%}
.contents>section div.form dl dd.txt{margin-top:7px}
.contents>section div.form dl dd.url{margin-top:5px}
.contents>section ul.image{overflow:hidden}
.contents>section ul.image>li{float:left; margin:0% .8% 30px; width:31.7%}
/* .contents>section ul.image>li:nth-child(4){display:none} */
.contents>section ul.image>li p.photo a{display:block; position:relative; height:200px; overflow:hidden}
.contents>section ul.image>li p.photo a:after{display:block; content:''; position:absolute; left:0px; top:0px; width:100%; height:100%; border:1px solid rgba(0,0,0,.1); box-sizing:border-box}
.contents>section ul.image>li img{position:absolute; left:0px; top:50%; transform:translateY(-50%); -webkit-transform:translateY(-50%); -ms-transform:translateY(-50%); -moz-transform:translateY(-50%); -o-transform:translateY(-50%); width:100%; min-height:200px}
.contents>section ul.image>li p.tit{margin-top:10px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.contents>section div.table table{width:100%; text-align:center}
.contents>section div.table table thead th{padding:13px 0px; font-weight:bold; color:#333; border-top:2px solid #333; border-bottom:1px solid #333; background:#f0f0f0}
.contents>section div.table table tbody td{padding:20px 2%; font-size:0.93em; border-bottom:1px solid #ccc; line-height:150%}
.contents>section div.table table tbody td ul li{position:relative; font-size:0.93em; line-height:130%}
.contents>section div.table table tbody td ul li:after{content:'>'; margin-left:5px}
.contents>section div.table table tbody td ul li:last-child:after{content:''}
.contents>section div.noresult p{position:relative; padding-left:28px;  font-size:1.07em; font-weight:bold}
.contents>section div.noresult p:after{display:block; content:'!'; position:absolute; left:0px; top:3px; text-align:center; width:18px; height:18px; border:2px solid #b00101; font:800 18px/18px helvetica; color:#b00101; border-radius:50px}
.contents>section div.noresult ul{margin-top:20px; margin-left:5px}
.contents>section div.noresult ul>li{position:relative; padding-left:8px; font-size:0.93em}
.contents>section div.noresult ul>li:After{display:block; content:''; position:absolute; left:0px; top:11px; width:3px; height:3px; background:#aaa}
/* 페이지 */
.input{margin:1px; padding:0px 5px; height:40px; line-height:40px; border:1px solid #ccc; vertical-align:middle; background:#f5f5f5; box-sizing:border-box}
.btn_input{display:inline-block; text-align:center; padding:0px 10px; min-width:90px; height:40px; line-height:40px; border-width:0px; background:#333; color:#fff; font-size:1.07em; vertical-align:middle}
a.page_btn.btn_first,
a.page_btn.btn_prev,
a.page_btn.btn_next,
a.page_btn.btn_last{display:inline-block; text-indent:-50000px; width:25px; height:30px; background-position:center center; background-repeat:no-repeat; background-size:17px 20px; vertical-align:middle}
a.page_btn.btn_first{background-image:url(/share/images/program/btn_first.gif)}
a.page_btn.btn_prev{margin-right:15px; background-image:url(/share/images/program/btn_prev.gif)}
a.page_btn.btn_next{margin-left:15px; background-image:url(/share/images/program/btn_next.gif)}
a.page_btn.btn_last{background-image:url(/share/images/program/btn_last.gif)}
.paging{text-align:center; margin:20px 0px 8%; font-size:0px; }
.image+.paging{margin-top:0px}
.paging a{display:inline-block; text-align:center; min-width:30px; line-height:30px; font-size:16px; vertical-align:middle}
.paging a.select{background:#333; color:#fff; }
.paging_mb{text-align:center; margin:30px 0px; letter-spacing:-2px}
.paging_mb .input{text-align:center; width:50px}
.paging_mb .btn_input{min-width:60px}
.paging_mb a.page_btn{border:1px solid #ddd; width:25px; height:40px; line-height:40px; letter-spacing:0px; box-sizing:border-box}
.paging_mb a.page_btn.btn_prev{margin-right:0px}
.paging_mb a.page_btn.btn_next{margin-left:0px}
.paging_mb a.page_btn.btn_first,
.paging_mb a.page_btn.btn_last{text-indent:0px; padding:0px 4%; width:20%; min-width:65px; max-width:130px; color:#666}
.paging_mb a.page_btn.btn_first{text-align:left; background-position:right 8px center}
.paging_mb a.page_btn.btn_last{text-align:right; background-position:left 8px center}
/* aside */
.container aside{float:right; width:28.56%}
aside:after{display:block; content:''; position:absolute; right:28.56%; top:0px; width:1px; height:100%; background:#ddd}
aside>div{padding:40px 0px; padding-left:45px}
aside>div h3{color:#333}
aside>div ol{margin-top:20px; margin-bottom:40px; counter-reset:rank}
aside>div ol li{margin-top:5px}
aside>div ol li a{}
aside>div ol li a:before{display:inline-block; text-align:center; margin-right:8px; width:20px; height:20px;  line-height:20px; background:#f0f0f0; border:1px solid #ddd; font-size:0.93em; counter-increment:rank; content:''counter(rank);}



/*******************************************************************************************************************/

@media screen and (max-width:1280px){	
	html,body,div,object,iframe,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video,select,input,textarea,button{font-size:14px; line-height:160%}	
	.more a:before,
	.more a:after{top:6px}
	.more a:after{top:11px}
}

@media screen and (min-width:801px){
	.dp_mb{display:none}
}

@media screen and (max-width:800px){
	.dp_pc{display:none}
	.wrapper{width:100%}
	aside{display:none}	
	header h1{position:static; text-align:center; padding:20px 0px; width:100%}
	header div.search{padding-right:100px; margin-top:0px}
	header div.search p.research{bottom:-30px; right:0px}
	header nav{position:relative}
	header nav:after{display:block; content:''; position:absolute; right:0px; top:2%; width:50px; height:96%;
	background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.4) 100%); 
	background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,.4) 100%); 
	background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,.4) 100%)}
	header nav ul{padding:15px 30px 15px 10px; border:3px solid #333; overflow-x:auto; white-space:nowrap}
	header nav ul::-webkit-scrollbar{height:3px}
	header nav ul::-webkit-scrollbar-thumb{background:#666; border-radius:3px}
	header nav ul li{display:inline-block; float:none; width:auto}
	header nav ul li:after{top:8px}
	header nav ul li a{padding:6px 20px; border-radius:3px; font-size:1.2em }
  .container .contents{float:none; width:100%} 
	.more{text-align:center; margin-top:20px}	
	.contents>section ul.menu+p.more{margin-top:20px}
	.more a{display:block; padding:10px; font-weight:normal; color:#484848; background:#f0f0f0}
	.more a:before,
	.more a:after{display:none}
	.contents>section{padding:30px 20px}
	.contents>section ul.menu.pdR130{padding-right:0px}
	.contents>section div.form dl dt{white-space:normal}
	.contents>section div.form dl dt a{font-size:1.1em}
	.contents>section div.form dl dd.url{display:none}
	.contents>section div.form dl dd.depth{margin-top:5px}
	.contents>section ul.image>li p.photo a{height:150px}
	.contents>section ul.image>li p.tit{font-size:1.1em; line-height:130%}
	.contents>section ul.image>li p.depth .name{display:none}
	.contents>section div.table{position:relative; overflow-x:auto}
	.contents>section div.table p.scroll{position:absolute; top:20%; left:50%; -webkit-transform:translateX(-50%); transform:translateX(-50%); text-align:center; padding-top:40px; width:100px; height:100px; border-radius:100px; color:#fff; font-weight:bold; background:rgba(0,0,0,.7); box-shadow:0px 2px 3px rgba(0,0,0,.3);box-sizing:border-box; letter-spacing:0px}	
	.contents>section div.table p.scroll:before,
	.contents>section div.table p.scroll:after{display:block; content:''; position:absolute;  transform:rotate(-45deg); -webkit-transform:rotate(-45deg); top:47px; width:10px; height:10px; border:3px solid #fff; box-sizing:border-box; transition:all ease .5s}
	.contents>section div.table p.scroll:before{left:10%; border-bottom:0px; border-right:0px}
	.contents>section div.table p.scroll:after{right:10%; border-top:0px; border-left:0px}
	.contents>section div.table table{width:200%}
	.contents>section div.table table th,
	.contents>section div.table table td{width:25%}
	.contents>section div.noresult{min-height:300px}
}

@media screen and (max-width:480px){
		.contents>section ul.image>li{width:48%}
		.contents>section ul.image>li:nth-child(4){display:block}		
}