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

/* Local Element Style */
html{  }
body{ padding:60px 0 0 0; margin:0; font-family:Dotum }
body.main{ padding:0 }
a{ color:inherit; text-decoration:none }
img{ border:0 }

/* Form Field Default Style */
input[type=text],input[type=number],input[type=email],input[type=phone],input[type=search],input[type=date],
input[type=password]{ padding:4px 6px; margin:0; border:solid 1px #B9B9B9; font-size:12px; box-sizing:border-box }
input[type=checkobx],
input[type=radio]{ padding:0; margin:0 }
input[readonly]{ background:#E9E9E9; color:#666 }
label{ display:inline-block }
select{ margin:0; border:solid 1px #B9B9B9; font-size:12px; box-sizing:border-box }
button{ background:#FFF; border:solid 1px #999; border-radius:3px; color:#666; font-size:12px; cursor:pointer }
button[disabled]{ background-color:#E9E9E9; color:#999; border-color:#BBB }
textarea{ font-size:12px; box-sizing:border-box; resize:none }

/* HTML5 Cross Browsing */
article, aside, footer, header, hgroup, main, nav, section{ display:block }

/* HEADER */
header{ position:fixed; left:0; top:0; right:0; height:30px; padding:15px 30px; background:#FFF; border-bottom:solid 1px #EB9; z-index:9999 }
header .mobileicon{ display:none }
header > h1{ float:left; height:40px; padding:0; margin:-5px 0 0 0 }
header > h1 > a.mainlogo{ display:block; width:100px; height:100%; background:url(/subPicture/mainlogo2_l.png) no-repeat; background-size:contain; font-size:0 }
header > .MINFO{ display:none; position:absolute; right:200px; top:0; height:40px; padding:10px 0; text-align:right }
header > .MINFO > p{ padding:0; margin:0; height:20px; font:normal 12px/20px Dotum; color:#06C }
header > .MINFO > p a{ text-decoration:underline }
header > .MINFO > p i{ font-style:normal; margin:0 4px; }
header > .TOPPER{ position:absolute; right:0; top:0; height:60px; padding:0; margin:0; background-color:#E50; font-size:0 }
header > .TOPPER > li{ position:relative; display:inline-block; padding:0 25px; color:#FDE; font:500 12px/60px Gulim }
header > .TOPPER > li > a{ display:block; height:100%; color:#FDE; cursor:pointer }
header > .TOPPER > li > a > #logedname{ font-weight:bold }
header > .TOPPER > li > ul{ display:none; position:absolute; left:0; right:0; top:60px; padding:0; margin:0; background:#E72; white-space:nowrap; box-shadow:3px 3px 5px rgba(0,0,0,.5) }
header > .TOPPER > li > ul > li{ padding:10px; border-bottom:solid 1px #E96; color:#FED; font:normal 12px/normal Dotum; list-style:none; text-align:center }
header > .TOPPER > li > ul > li:last-child{ border-bottom:0 }
header > .TOPPER > li > ul > li > a{  }
header > .TOPPER > li > ul > li > a:hover{ color:#FFF }
header > .TOPPER > li:hover > ul{ display:block }
header > .TOPPER > li:hover > a{ color:#FFF }

/* NAVIGATOR */
nav{ float:left; height:30px; z-index:9999 }
nav > ul{ float:left; padding:0 10px; margin:0 15px; overflow:hidden }
nav > ul > li{ display:inline-block; height:30px; list-style:none }
nav > ul > li > a{ display:inline-block; height:30px; padding:0 8px; margin:0 16px; color:#333; font:500 16px/30px 'NanumBarunGothic'; cursor:pointer }
nav > ul > li > a:hover{ height:25px; border-bottom:solid 5px #EC7D3B }
nav > ul > li > span.NEW{ display:inline-block; padding:2px 5px; margin:-4px -20px 0 8px ; border-radius:6px; font:normal 10px/normal Dotum; color:#FFF; background-color:#E11; vertical-align:middle }
nav > ul > li:after{ display:inline-block; content:'|'; height:30px; color:#999 }
nav > ul > li:last-child:after{ display:none }

/* HEADER + NAVIGATOR : INVERT */
body.main > header{ background-color:rgba(0,0,0,.66); border:0 }
body.main > header > h1 > a.mainlogo{ background-image:url(/subPicture/mainlogo_single_white.png) }
body.main > header > nav > ul > li > a{ color:#CCC }
body.main > header > nav > ul > li:after{ display:none }
body.main > header > .TOPPER > li{ color:#BBB }
body.main > header > .TOPPER > li:hover > a{ color:#FFF }

.LINKSITE{ padding:10px 0; text-align:center }
.LINKSITE > a{ font-size:0; margin:0 6px; }
.LINKSITE > a > img{ height:42px }

/* FOOTER */
footer{ padding:18px 0; background:#E9E9E9; color:#666; font:normal 11px/normal Dotum }
footer .footmenu{ font-size:0 }
footer .footmenu > a{ font-size:12px }
footer .footmenu > a:after{ content:'|'; margin:0 8px; color:#CCC }
footer .footmenu > a:last-child:after{ display:none }
footer address{ margin:8px 0; font-style:normal; font-size:0 }
footer address > span{ font-size:11px; margin-right:12px }

/* WRAPPER */
.WRAPPER{ width:1000px; margin:24px auto }
.WRAPPER.EXPAND{ width:100%; margin:0 }

/* CUSTOM STYLE : iconset */
.iconset{ display:inline-block; border:0; border-radius:0; font-size:0 }
.iconset.s64{ width:64px; height:64px; background:url(/subPicture/iconset64.png) no-repeat; background-size:cover }

/* CUSTOM STYLE : Board */
.boardlist{ padding:0; margin:24px auto; border-top:solid 3px #333; background:#FFF }
.boardlist > li{ padding:12px; border-bottom:solid 1px #999; list-style:none; overflow:hidden }
.boardlist > li > .subject{ float:left; color:#333; font:normal 12px/normal Dotum; cursor:pointer }
.boardlist > li > .subject > .noanswer{ color:#666 }
.boardlist > li > .subject > .answered{ color:#F30; font-weight:bold }
.boardlist > li > .writer{ float:right; color:#444; font-weight:bold; margin-right:12px; }
.boardlist > li > .savedate{ float:right; color:#666; font:normal 12px/normal Dotum }
.boardlist > li:hover{ background-color:#F5F5F5 }
.boardlist > li.norecord{ padding:40px 0; text-align:center; color:#999; font:normal 12px/normal Dotum }

.buttons{ margin:12px 0; text-align:center }
.buttons > button{ padding:8px 12px; background:#FF6700; border:0; color:#FFF; font:500 16px/normal 'NanumBarunGothic' }

/* Board View Frame */
.boardViewFrame{ padding:15px; border:solid 3px #D0D0D0; font-family:Dotum; font-size:.75rem }
.boardViewFrame .viewSubject{ padding-bottom:5px; border-bottom:solid 1px #D0D0D0; font-weight:bold }
.boardViewFrame .viewSubinfo{ padding-top:5px }
.boardViewFrame .viewSubinfo .recordInfo{ color:#606060; float:right }
.boardViewFrame .viewSubinfo .recordInfo .viewCount{ font-weight:bold }
.boardViewFrame .viewSubinfo .recordInfo .addfile{ cursor:pointer }
.boardViewFrame .viewSubinfo .recordInfo .addfile:hover{ color:#06C }
.boardViewFrame .viewSubinfo .recordInfo > span:after{ content:'|'; padding:0 8px; color:#AAA }
.boardViewFrame .viewSubinfo .recordInfo > span:last-child:after{ display:none }
.boardViewFrame .viewSubinfo .userInfo{ color:#606060; font-weight:bold }
.boardViewFrame .viewContent{ padding:20px 0; line-height:24px }
.boardViewFrame .viewContent img{ max-width:100% !important; height:auto !important }
.boardViewFrame .viewContent a.AUTOLINK{ color:#06C; text-decoration:underline }
.boardViewFrame .boardAnswerFrame{ display:none; border:solid 3px #75B8FF; padding:12px; margin:12px 0; }
.boardViewFrame .boardAnswerFrame img{ max-width:100% }
.boardViewFrame .reply{  }
.boardViewFrame .reply > .replytoggle{ color:#F30; font-weight:bold; text-decoration:underline }
.boardViewFrame .reply > ul{ padding:0 18px; margin:4px 0 0 0; background:#E9E9E9 }
.boardViewFrame .reply > ul > li{ padding:18px 0; border-top:dotted 1px #CCC; list-style:none; color:#444 }
.boardViewFrame .reply > ul > li:first-child{ border-top:0 }
.boardViewFrame .reply > ul > li > .userinfo{ float:left; font-weight:bold }
.boardViewFrame .reply > ul > li > .savedate{ float:left; margin-left:12px; color:#999 }
.boardViewFrame .reply > ul > li > .delete{ float:right; color:#E00; cursor:pointer }
.boardViewFrame .reply > ul > li > .content{ padding-top:12px; clear:both }
.boardViewFrame .reply > form{ padding:18px; margin:0; background:#E9E9E9; border-top:dotted 1px #CCC; font-size:0 }
.boardViewFrame .reply > form > textarea{ width:842px; height:63px; vertical-align:middle; resize:none }
.boardViewFrame .reply > form > button{ width:74px; height:63px; margin-left:6px; font-weight:bold; vertical-align:middle }

/* 페이지 네비게이터 */
.pageNavigator{
	padding:12px 0; font-size:0; text-align:center;
	-ms-user-select:none; -webkit-user-select:none }
.pageNavigator > a{
	display:inline-block; min-width:20px; height:20px; padding:3px 2px 1px 2px; margin:2px; background-color:#FFF; border:solid 1px #CCC;
	color:#999; text-align:center; vertical-align:middle; font:500 16px/normal 'NanumBarunGothic'; cursor:pointer }
.pageNavigator > a:hover{ border-color:#06C; color:#06C }
.pageNavigator > a.selected{ background:#06C; border-color:#06C; color:#FFF; cursor:default }
.pageNavigator > a.GOTO{ font-size:0; background:#FFF url(/subPicture/iconset_pagenavigator.png) no-repeat }
.pageNavigator > a.GOTO.F{ background-position:0 0 }
.pageNavigator > a.GOTO.P{ background-position:-24px 0 }
.pageNavigator > a.GOTO.N{ background-position:-48px 0 }
.pageNavigator > a.GOTO.L{ background-position:-72px 0 }
.pageNavigator > a.GOTO.F:hover{ background-position:-96px 0 }
.pageNavigator > a.GOTO.P:hover{ background-position:-120px 0 }
.pageNavigator > a.GOTO.N:hover{ background-position:-144px 0 }
.pageNavigator > a.GOTO.L:hover{ background-position:-168px 0 }

/* DS 다이얼로그 프리셋 */
.dsdialog_frame{ position:fixed; top:0; right:0; bottom:0; left:0; background:rgba(0,0,0,.5); overflow:hidden; z-index:19999 }
.dsdialog_frame > .dsdialog_dialog{ position:absolute; left:50%; top:150px; width:auto; background:#FFF; border:0; border-radius:4px; box-shadow:3px 3px 5px rgba(0,0,0,.5); overflow:hidden }
.dsdialog_frame > .dsdialog_dialog > .dsdialog_title{ padding:6px; background:#335; color:#FFF; font-weight:bold }
.dsdialog_frame > .dsdialog_dialog > .dsdialog_content{ min-width:256px; padding:12px 12px 0 12px; text-align:center; font:normal 12px/normal Gulim }
.dsdialog_frame > .dsdialog_dialog > .dsdialog_buttons{ padding:12px; text-align:center; }
.dsdialog_frame > .dsdialog_dialog > .dsdialog_buttons > button{ padding:6px 10px; margin:0 2px; border:0; background:#333; outline:0; color:#FFF; font-weight:bold; font-family:Dotum }
.dsdialog_frame > .dsdialog_dialog > .dsdialog_buttons > button[name=cancel]{ background:#888 }

/* LAYERS : 로그인폼 */
.loginform{ display:none; position:fixed; left:0; right:0; top:0; bottom:0; background-color:rgba(0,0,0,.75); z-index:10000 }
.loginform > a.exit{ position:absolute; left:50%; top:32px; display:block; width:32px; height:32px; margin:0 0 0 200px; background:url(/subPicture/iconset64.png) no-repeat -352px 0; background-size:cover; color:#FFF; font-size:0; cursor:pointer }
.loginform > form{ width:320px; padding:30px 40px; margin:64px auto; background-color:#FFF; border-top:solid 12px #F60 }
.loginform > form > .title{ padding:0 0 12px 0; font:500 24px/normal 'NanumBarunGothic'; text-align:center }
.loginform > form > fieldset{ padding:4px 0; border:0; font:normal 12px/normal Gulim }
.loginform > form > fieldset > input[type=text], /* IE9+ */
.loginform > form > fieldset > input[type=email],
.loginform > form > fieldset > input[type=password]{ width:100%; height:32px }
.loginform > form > fieldset > button[type=submit]{ width:100%; height:44px; background:#F60; border:0; border-radius:5px; color:#FFF; font:500 16px/normal 'NanumBarunGothic' }
.loginform > form > fieldset > input[type=checkbox]{ vertical-align:middle }
.loginform > form > fieldset > input[type=checkbox] + label{ color:#666; font:normal 11px/normal Gulim; vertical-align:middle }
.loginform > form > fieldset > button#l_findidpw{ width:100%; height:36px; margin-top:12px; background:#F90; border:0; border-radius:5px; color:#FFF; font:500 14px/normal 'NanumBarunGothic' }

/* LAYERS : 아이디,비밀번호 찾기 */
.findform{ display:none; position:fixed; left:0; right:0; top:0; bottom:0; background-color:rgba(0,0,0,.75); z-index:10000 }
.findform > a.exit{ position:absolute; left:50%; top:32px; display:block; width:32px; height:32px; margin:0 0 0 200px; background:url(/subPicture/iconset64.png) no-repeat -352px 0; background-size:cover; color:#FFF; font-size:0; cursor:pointer }
.findform > form{ width:320px; padding:30px 40px; margin:64px auto; background-color:#FFF; border-top:solid 12px #F60 }
.findform > form > .title{ padding:0 0 12px 0; font:500 24px/normal 'NanumBarunGothic'; text-align:center }
.findform > form > fieldset{ padding:4px 0; border:0; font:normal 12px/normal Gulim }
.findform > form > fieldset > input[type=text], /* IE9+ */
.findform > form > fieldset > input[type=email],
.findform > form > fieldset > input[type=password]{ width:100%; height:32px }
.findform > form > fieldset > button[type=submit]{ width:100%; height:44px; background:#F60; border:0; border-radius:5px; color:#FFF; font:500 16px/normal 'NanumBarunGothic' }
.findform > form > fieldset > input[type=checkbox]{ vertical-align:middle }
.findform > form > fieldset > input[type=checkbox] + label{ color:#666; font:normal 11px/normal Gulim; vertical-align:middle }
.findform > form > fieldset > button.S2{ width:100%; height:36px; margin-top:12px; background:#F90; border:0; border-radius:5px; color:#FFF; font:500 14px/normal 'NanumBarunGothic' }

/* dsbuttons */
.dsbutton{ display:inline-block; padding:6px 10px; background:#555; border:solid 1px #333; border-radius:4px; color:#FFF !important; font:normal 12px/normal Gulim }
.dsbutton.S1{}
.dsbutton.S2{ background-color:#AD0F12; border-color:#7A1113 }

/* LAYERS : 아이피 입력*/
.IP_FORM{ display:none; position:fixed; left:0; top:0; right:0; bottom:0; background-color:rgba(0,0,0,.5); z-index:10001 }
.IP_FORM > form{ position:absolute; left:50%; top:106px; width:300px; height:auto; padding:20px; margin-left:-170px; background-color:#FFF; border-top:solid 10px #F60  }
.IP_FORM > form > p{ padding:0; margin:0; font-size:12px; line-height:18px }
.IP_FORM > form > div{ margin-top:12px; font-size:0 }
.IP_FORM > form > div > *{ vertical-align:middle }
.IP_FORM > form > div > input{ width:72px; height:24px; padding:4px 7px; border:solid 1px #CCC; text-align:center }
.IP_FORM > form > div > span{ display:inline-block; width:4px; font-size:12px }
.IP_FORM > form > div > button{ width:100%; height:32px; background-color:#F60; color:#FFF; border:0 }


@media (max-width:1260px){
	body{ padding:100px 0 0 0 }
	
	/* HEADER */
	header{ height:30px; padding:15px 30px; background:#FFF; border-bottom:solid 1px #EB9; z-index:9999 }
	header .mobileicon{ display:none }
	header > h1{ float:left; height:40px; padding:0; margin:-5px 0 0 0 }
	header > h1 > a.mainlogo{ display:block; width:100px; height:100%; background:url(/subPicture/mainlogo2_l.png) no-repeat; background-size:contain; font-size:0 }
	header > .TOPPER{ float:right; padding:0; margin:0; font-size:0 }
	header > .TOPPER > li{ position:relative; display:inline-block; padding:0 17px 0 12px; font:500 12px/60px Gulim; z-index:9999 }
	header > .TOPPER > li > a{ cursor:pointer }
	header > .TOPPER > li > a > #logedname{ font-weight:bold }
	
	/* NAVIGATOR */
	nav{ float:none; position:fixed; left:0; right:0; top:60px; height:40px; background-color:#F60; z-index:9997 }
	nav > ul{ float:none; padding:0; margin:0; text-align:center }
	nav > ul > li{ height:40px; list-style:none }
	nav > ul > li > a{ display:inline-block; height:40px; padding:0 4px; margin:0 8px; color:#FFF !important; font:500 14px/40px 'NanumBarunGothic'; cursor:pointer }
	nav > ul > li > a:hover{ height:35px; border-bottom:solid 5px #FFF }
	nav > ul > li > span.NEW{ margin:-2px -6px 0 8px }
	nav > ul > li:after{ display:inline-block; content:'|'; height:30px; color:#F90 }
	nav > ul > li:last-child:after{ display:none }
	
	/* WRAPPER */
	.WRAPPER{ width:100%; margin:24px 0 }
}

@media (max-width:640px){
	/* HEADER */
	header{ height:3rem; padding:.5rem; background:#F60; border:0 }
	header > h1{ float:none; height:3rem; padding:0; margin:0 }
	header > h1 > a.mainlogo{ display:block; width:7rem; height:3rem; margin:0 auto; background:url(/subPicture/mainlogo2_l.png) no-repeat center; background-size:contain }
	header > .TOPPER{ display:none; padding:0; margin:0; font-size:0 }
	header > .TOPPER > li{ position:relative; display:inline-block; padding:0 17px 0 12px; font:500 12px/30px Gulim }
	header > .TOPPER > li > a{ cursor:pointer }
	header > .TOPPER > li > a > #logedname{ font-weight:bold }
	header > .TOPPER > li > ul{ display:none; position:absolute; left:50%; top:30px; width:120px; padding:12px; margin:0 0 0 -71px; background:#FFF; border:solid 1px #999; border-radius:5px; white-space:nowrap }
	header > .TOPPER > li > ul > li{ padding:4px 0; border-bottom:dashed 1px #999; color:#666; font:normal 12px/normal Dotum; list-style:none; text-align:center }
	header > .TOPPER > li > ul > li:last-child{ border-bottom:0 }
	header > .TOPPER > li > ul > li > a{  }
	header > .TOPPER > li > ul > li > a:hover{ color:#333 }
	header > .TOPPER > li:hover > ul{ display:block }
	header > .TOPPER > li:hover > a{ color:#03C }
	
	/* NAVIGATOR */
	nav{ height:auto }
	nav > .mobileicon{ position:absolute; left:.5rem; top:.5rem; display:block; width:3rem; height:3rem; background:url(/subPicture/iconset64.png) no-repeat -51rem 0; background-size:cover; font-size:0 }
	nav > ul{ display:none; position:absolute; right:0; top:4rem; float:none; padding:0; margin:0; background:#F90 }
	nav > ul > li{ width:32%; height:3rem; padding:0; margin:0 }
	nav > ul > li > a{ display:block; height:2rem; padding:.5rem; margin:0; color:#FFF !important; text-align:center; font:500 1rem/2rem Dotum }
	nav > ul > li > a:hover{ height:auto; border:0 }
	nav > ul > li:after{ display:none }
	nav > .mobileicon:hover + ul{ display:block }
}