/* common */
html,body,div,ul,li,l,dl,dt,dd,ol,p,form,input,iframe {margin:0; padding:0;}
body, p {font-family:"굴림",gulim; color:#707070; font-size:12px; line-height:17px;}
ul,li,ol,dl {list-style:none}
img {border:0; vertical-align:top}
a {color:#707070; text-decoration:none;}
.dot {float:left;}
body {background:url(../img/main/bg.gif) repeat-x}
body, table, tr, td, textarea, input, div, select {font-family:"굴림",gulim; font-size: 12px; color: #707070;}
.png24 {tmp:expression(setPng24(this)); }
:focus {outline-style:none}
/* Wrap */
#wrap {margin:0 auto; width:970px; height:100%;}
#top {float:left; width:970px; height:90px;}
#footer {float:left; width:100%; height:61px; margin-top:18px; border-top:solid 1px #eaeaea; text-align:center; vertical-align:top}
/*gnb*/
#tm {float:right; height:27px; margin-right:20px;}
#tm li {float:left; display:inline;}
#gnb {float:left; width:970px; height:63px}
#logo {float:left; width:184px; height:63px; margin-left:20px; background:url(../img/common/logo2.jpg) no-repeat}
#menu {float:right; width:766px; height:63px; text-align:right}
nav{
position: relative;
}
#topnav {float: right;}
#topnav ul{height: 38px; }
#topnav li{
list-style: none;
display: inline-block;
*display:inline; /* IE7 */
_display:inline; /* IE6 */
text-align: center;
padding: 8px 0px 30px 0;
*padding: 8px 0px 30px 0 ; /* IE7 */
_padding: 8px 0px 30px 0 ;/* IE6 */
padding: 8px 0px 30px 0 \0/IE8;/*IE8적용*/
width: 88px;
white-space:nowrap;
}
_:-ms-fullscreen, :root #topnav li{
list-style: none;
display: inline-block;
padding-right: 26px;
padding: 8px 0px 30px 0 ;
}
#topnav ul>li{
list-style: none;
display: inline-block;
}
#topnav .gnb ul>li:first-child ~ li{
margin-left:26px;
display: inline-block;
}
#topnav ul{
width:700px;
}
#topnav li a:link{
color: #f1f1f1;
font-size: 11pt;
font-weight: 400;
font-family: 'GyeonggiTitleM';
}
#topnav li a:visited{
background: #5eb70c;
padding: 8px;
-webkit-border-radius: 1em;
border-radius: 1em;
color: #f1f1f1;
font-size: 11pt;
font-weight: 400;
font-family: 'GyeonggiTitleM';}
#topnav li:hover > a{
background: #5eb70c;
padding: 6px;
-webkit-border-radius: 1em;
border-radius: 1em;
color: #f1f1f1;
font-size: 11pt;
font-weight: 400;
font-family: 'GyeonggiTitleM';}
#topnav .first li:hover > a{
background: none;
padding: 0;
color: #f1f1f1;
font-size: 9pt;
font-weight: 400;
text-decoration: none;
}
#topnav>.sub>li a:hover{
color: #f1f1f1;
background: none;
padding: 0;
font-size: 8pt;
font-weight: 400;
text-decoration: none;
}
#topnav .sub li{
padding: 10px 4px;
padding-top: 11px \0/IE8;/*IE8적용*/
}
_:-ms-fullscreen, :root #topnav .sub li{
padding: 10px 4px;
padding-top: 11px;
}
#topnav .sub li:first-child{
padding-left: 24px;
}
#topnav .sub a:link{
font-size: 9pt;
}
#topnav .sub a:visited{
color: #f1f1f1;
font-size: 9pt;
font-family: 'GyeonggiTitleM';}
#topnav .sub a:active{
color: #f1f1f1;
background:
font-size: 9pt;
}
/* 2.nav>ul 에 형제로 div만들고 + 연산자로 지정하기 */
#topnav ul:hover+div{
display: block;
z-index: -1;
}
/* 3.bar클래스(공간) 기본 셋팅 vw,overflow-y,postion사용*/
.bar-2020{
display: none;
width: 100vw;
overflow-y: hidden;
position: absolute;
/*같은 높이를 줄것. gnb의 바로 아래까지의 높이가 좋음*/
bottom: -60px;
height: 60px;
}
/* 4.bar클래스 안에 실질적인 보여주는 공간 만들기 */
#topnav .bar .barwrap{
background: #ddd;
width: 100%;f
overflow-y: hidden;
/*실질적인 바의 높이. 3.-4.=gnb와 바의 사이*/
height: 45px;
position: absolute;
bottom: 0;
/* float:left; */
}
/* 5. bar에 올려서 bar유지하기*/
#topnav .bar:hover{
display: block;
position:absolute;
z-index:-1;
}
/* 이하 2차메뉴나오게 하기 */
#topnav .sub li{
width: auto;
}
#topnav li ul{
display:none;
width: 766px;
position: absolute;
height: 0px;
}
/*1차메뉴 오버시 2차메뉴 block*/
#topnav li:hover ul{
display:block;
width: 970px;
margin: 0 auto;
}
/*색상으로 범위테스트*/
#topnav li:nth-child(1) ul{
color: white;
height: 32px;
margin-left: -262px;
}
#topnav li:nth-child(2) ul{
color: white;
height: 32px;
margin-left: -265px;
}
#topnav li:nth-child(3) ul{
color: white;
height: 32px;
margin-left: -268px;
}
#topnav li:nth-child(4) ul{
color: white;
height: 32px;
margin-left: -324px;
}
#topnav li:nth-child(5) ul{
color: white;
height: 32px;
margin-left: -354px;
}
#topnav li:nth-child(6) ul{
color: white;
height: 32px;
margin-left: -500px;
}
#topnav li:nth-child(7) ul{
color: white;
height: 32px;
margin-left: -558px;
}
#topnav>li>a:focus+ul{
display:block!important;
color:#fff;
/* background:#fff; */
}
#topnav>li>a:focus+ul>li>a:focus{
display:block!important;
color:#fff;
/* background:#fff; */
}
#topnav>li>a+ul>li>a:focus{
display:block!important;
background:fff;
}
/*유튜브바로가기*/
.bn_youtube {position:absolute; top: 23px; left: -130px;}
.bn_naver {position:absolute; top: 23px; left: -290px;}
.bn_r_1 {position:absolute; top: 14px; right: -514px;}
.bn_r_2 {position:absolute; top: 130px; right: -514px;}
/*main*/
#mainimg {float:left; width:970px; height:216px; background:url(../img/main/main_img-2020.jpg) no-repeat}
#img {margin:0 0 0 20px; width:750px; height:169px;}
#links {float:left; width:680px; height:47px;}
#file_dn {float:right; width:290px; height:47px; vertical-align:bottom}
#event {float:left; width:680px; height:342px;}
#event1 {float:left; width:680px; height:342px; position: relative;}
#event2 {float:left; width:680px; height:342px;}
#event3 {float:left; width:680px; height:342px;}
#news {float:right; width:288px; height:342px; border-left:solid 1px #e2e9ed; border-right:solid 1px #e2e9ed; background:url(../img/main/board_bg.gif) repeat-x}
#main_right {float:left; width:315px;}
#main_banner {float:left; width:970px; height:36px; margin-top:28px; text-align:center; position: relative; left: -28px;}
/*main_event*/
#event_main {float:left; width:252px; height:327px; background:url(../img/main/event_img.gif); margin:15px 0 0 26px}
#event_main img {width:203px; height:284px; margin:15px 15px 28px 34px}
#event_etc {float:right; width:392px; margin:23px 0 0 10px}
#event_etc li {float:left; display:inline; width:119px; height:91px; background:url(../img/main/event_pic.png) no-repeat transparent; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/main/event_pic.png', sizingMethod='crop')}
#event_etc .pic img {width:103px; height:75px; margin:8px}
#event #title {height:123px; margin:0 25px 30px 0;}
#event #title .title {font-size:29px; color:#000; font-weight:bold; line-height:37px; letter-spacing:-4px; margin-bottom:15px}
#event #title .title a {color:#000}
/*main_event*/
#event1_main {float:left; width:252px; height:327px; background:url(../img/main/event_img.gif); margin:15px 0 0 26px}
#event1_main img {width:203px; height:284px; margin:15px 15px 28px 34px}
#event1_etc {float:right; width:392px; margin:23px 0 0 10px}
#event1_etc li {float:left; display:inline; width:119px; height:91px; background:url(../img/main/event_pic.png) no-repeat transparent; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/main/event_pic.png', sizingMethod='crop')}
#event1_etc .pic img {width:103px; height:75px; margin:8px}
#event1 #title {height:123px; margin:0 25px 30px 0;}
#event1 #title .title {font-size:29px; color:#000; font-weight:bold; line-height:37px; letter-spacing:-4px; margin-bottom:15px}
#event1 #title .title a {color:#000}
/*main_event*/
#event2_main {float:left; width:252px; height:327px; background:url(../img/main/event_img.gif); margin:15px 0 0 26px}
#event2_main img {width:203px; height:284px; margin:15px 15px 28px 34px}
#event2_etc {float:right; width:392px; margin:23px 0 0 10px}
#event2_etc li {float:left; display:inline; width:119px; height:91px; background:url(../img/main/event_pic.png) no-repeat transparent; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/main/event_pic.png', sizingMethod='crop')}
#event2_etc .pic img {width:103px; height:75px; margin:8px}
#event2 #title {height:123px; margin:0 25px 30px 0;}
#event2 #title .title {font-size:29px; color:#000; font-weight:bold; line-height:37px; letter-spacing:-4px; margin-bottom:15px}
#event2 #title .title a {color:#000}
/*main_event*/
#event3_main {float:left; width:252px; height:327px; background:url(../img/main/event_img.gif); margin:15px 0 0 26px}
#event3_main img {width:203px; height:284px; margin:15px 15px 28px 34px}
#event_etc {float:right; width:392px; margin:23px 0 0 10px}
#event_etc li {float:left; display:inline; width:119px; height:91px; background:url(../img/main/event_pic.png) no-repeat transparent; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/main/event_pic.png', sizingMethod='crop')}
#event_etc .pic img {width:103px; height:75px; margin:8px}
#event3 #title {height:123px; margin:0 25px 30px 0;}
#event3 #title .title {font-size:29px; color:#000; font-weight:bold; line-height:37px; letter-spacing:-4px; margin-bottom:15px}
#event3 #title .title a {color:#000}
/*main news*/
#news tr {padding:3px 0; background:url(../img/icon/spots01.gif) 0 100% repeat-x}
#news .title {font-family:"돋움",dotum; font-size:11px; padding:3px 0; letter-spacing:-1px; padding-left:9px;}
#news .date {font-family:"돋움",dotum; font-size:11px; padding:3px 0; letter-spacing:-1px; color:#a1a1a1}
/* font */
.spacing-1 {letter-spacing:-1px;}
.ft_b {font-weight:bold}
.ft11 {font-size:11px; font-family:돋움}
.ft12 {font-size:12px; font-family:굴림 gulim}
.ft14 {font-size:14px; font-family:굴림 gulim}
/*form*/
.input01 {border:#afafaf solid 1px; background:#ffffff; height:16px; padding:3px 3px 0 3px;}
.input02 {border:#afafaf solid 1px; background:#ffffff; height:15px; padding:2px 0 0 3px; font-size:11px;}
.input_search {border:#FFFFFF solid 1px; background:#ffffff; height:15px; padding:3px;}
.txt01 {border:#afafaf solid 1px; background:#ffffff; padding:3px}
.sel01 {border:#FFFFFF solid 1px; font-size:11px}