@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');
@font-face {
    font-family: 'RIDIBatang';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_twelve@1.0/RIDIBatang.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/*기본태그 정의*/
* { font-family:'Noto Sans KR', sans-serif; font-weight:400; }

div, pre, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, address, dl, dt, dd, ol, ul, li, fieldset, form, legend, table, caption, tbody, tfoot, thead, tr, th, td, input, select, textarea, span, strong { margin:0; padding:0; }
a { text-decoration:none; color:#666; padding:0; margin:0; border:none;  }
img { padding:0; margin:0; border:0;}
ul, ol, li { list-style:none; }

.visual_box { width:900px; height:250px; background-color:#023c2f; }
.visual_box:after {content:""; display:block; visibility:hidden; clear:both; height:0; }
.visual_box ul { float:left; width:180px; height:250px; padding:10px 9px 0  11px; background:url(img/img_ul.jpg) left top no-repeat; box-sizing:border-box; }
.visual_box ul li { margin:9px 0 0 0; }
.visual_box ul li:first-child { margin:0; }
.visual_box ul li a { position:relative; display:block; height:68px; border:1px solid rgba(255,255,255,0.3); border-radius:4px; transition:all .3s ease-in-out; }
.visual_box ul li a span { color:#839f9a; padding:8px 0 0 10px; display:block; font-size:13px; font-weight:300; line-height:20px; letter-spacing:-0.04em; }
.visual_box ul li a:hover { border:1px solid #fff; background:#fff; }
.visual_box ul li a:hover span { color:#003c2d; font-weight:500; }
.visual_box ul li a:before { content:""; display:block; position:absolute; top:50%; transform:translateY(-50.04%); transition:all .3s ease-in-out; }
.visual_box ul li:nth-child(1) a:before { width:46px; height:48px; right:6px; background:url(img/icon_m1.png) left top no-repeat; }
.visual_box ul li:nth-child(2) a:before { width:38px; height:48px; right:12px; background:url(img/icon_m2.png) left top no-repeat; }
.visual_box ul li:nth-child(3) a:before { width:54px; height:46px; right:12px; background:url(img/icon_m3.png) left top no-repeat; }
.visual_box ul li:nth-child(1) a:hover:before { background:url(img/icon_m1_on.png) left top no-repeat; }
.visual_box ul li:nth-child(2) a:hover:before { background:url(img/icon_m2_on.png) left top no-repeat; }
.visual_box ul li:nth-child(3) a:hover:before { background:url(img/icon_m3_on.png) left top no-repeat; }
.visual_box .box { float:left; display:table; width:720px; height:250px; background:url(img/img_visual.jpg) left top no-repeat; }
.visual_box .box .txtbox { display:table-cell; width:100%; height:250px; text-align:center; vertical-align:middle; }
.visual_box .box .txtbox .tit { opacity:0; animation:aniTxt 0.5s 0.1s; animation-fill-mode:forwards; }
.visual_box .box .txtbox .txt_1 { opacity:0; margin:15px 0 0 0; font-family: 'RIDIBatang'; font-size:14px; color:#fff; animation:aniTxt 0.5s 0.4s; animation-fill-mode:forwards; }
.visual_box .box .txtbox .txt_2 { opacity:0; margin:5px 0 0 0; font-family:'Noto Sans KR', sans-serif; font-size:28px; color:#fff; animation:aniTxt 0.5s 0.7s; animation-fill-mode:forwards;}

.menubox { height:60px !important; width:900px; background:url(img/bg_menu.jpg) left top no-repeat; }
.menubox .logo { display:inline-block; padding:15px 0 0 27px; vertical-align:top; }
.menubox .logo img { display:block; }
.menubox ul { display:inline-block; vertical-align:top; margin:23px 0 0 60px; }
.menubox ul:after {content:""; display:block; visibility:hidden; clear:both; height:0; }
.menubox li { position:relative; float:left; margin:0 20px; padding:0; }
.menubox li:first-child { margin-left:0; }
.menubox li:last-child { margin-right:0; }
.menubox li:before { content:""; display:block; width:1px; height:12px; margin-top:-6px; background-color:rgba(255,255,255,0.2); position:absolute; top:50%; left:-20px; }
.menubox li:first-child:before { display:none; }
.menubox li a { font-family: 'RIDIBatang'; color:rgba(255,255,255,0.5); font-size:14px; line-height:12px; padding:0; margin:0; display:block; transition:all .3s ease-in-out; }
.menubox li a:hover,
.menubox li.on a { color:#fff; }

@keyframes aniTxt {
	0% { -webkit-transform:translateY(50px); -ms-transform:translateY(50px); transform:translateY(50px); opacity:0; }
	100% { -webkit-transform:translateY(0); -ms-transform:translateY(0); transform:translateY(0); opacity: 1;}
}

.leftMneu { padding:0 0 0 0; }
.leftMneu ul { padding:2px 0 0 11px; }
.leftMneu li { position:relative; color:#444; font-weight:400; font-size:11px; line-height:10px; font-family:'Noto Sans KR', sans-serif; border-bottom:1px solid #f2f2f2; }
.leftMneu li a { padding:8px 9px; color:#444; font-family:'Noto Sans KR', sans-serif; display:block; }
.leftMneu li:before { content:""; display:block; position:absolute; top:50%; left:0; width:3px; height:5px; transform:translateY(-50.04%); background:url(img/icon_arr.png) left top no-repeat;}