﻿@charset "utf-8"; 
@import url("style.css");
@import url("nanumgothic.css");

/* focus navigator */
#skipToContent { z-index:10; top:0; left:50%; margin-left:-500px; width:1000px; position:absolute; background-color:#fff; }
#skipToContent a { display:block; padding:0 10px; height:1px; margin-top:-1px; overflow:hidden; color:#fff; }
#skipToContent a:focus, #skipToContent a:active { height:auto; padding:10px; margin-bottom:0; color:#333; font-weight:bold; }
.hText { position:absolute; width:0; height:0; z-index:-1; overflow:hidden; }


/* alert */
.oldBrowserAlert { position:fixed; top:-50px; left:0; z-index:11; width:100%; height:30px; line-height:30px; text-align:center; background:url('../images/bg_gnb.png') repeat-x 0 0; }
.oldBrowserAlert p * { font-size:14px; color:#fff; }
.oldBrowserAlert p * { display:inline-block; *display:inline; *zoom:1; }
.oldBrowserAlert p strong { margin-right:30px; }
.oldBrowserAlert p a { margin:0 10px; }
.oldBrowserAlert p a:hover { text-decoration:underline; }
.oldBrowserAlert .btClose { margin-left:10px; vertical-align:middle; position:relative; top:-2px; height:20px; line-height:1; font-size:11px; border:1px solid #fff; padding:2px 8px; background-color:#000; cursor:pointer; }
.oldBrowserAlert .btClose:hover { text-decoration:none; }


/* form */
.navy { color:#717ebd; }
.center { text-align:center !important; }
.left { text-align:left !important; }
.right { text-align:right !important; }
.comText { padding:4px 10px; height:20px; line-height:20px; border:1px solid #ccc; color:#666; }
.comFile { padding:5px 10px; height:30px; }
.comText:focus { border-color:#717ebd; }
.wFull { width:100%; height:30px; box-sizing:border-box; }
.w210 { width:188px; }
.w120 { width:98px; }
/* select */
.selectbox { display:inline-block; position:relative; vertical-align:middle; }
.selectbox .txt { position:relative; display:block; text-decoration:none; max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding-left:10px; padding-right:24px; height:28px; line-height:28px; border:1px solid #ccc; color:#666; background:url('../images/sel_bg.png') no-repeat 100% 50%; }
.selectbox .txt.focus { border-color:#717ebd; -webkit-box-shadow: 0px 0px 4px 0px rgba(94,134,220,0.7); }
.selectbox select { position:absolute; z-index:1; left:0; bottom:0; height:100%; *height:auto; padding:0; border:0; width:100%; opacity:0; filter:alpha(opacity=0); -webkit-appearance:none; color:#666; background-color:#fff; }



/* login page */
.loginPage { font-size:14px; background-color:#efefef; min-width:600px; min-height:500px; }
.login { position:fixed; top:50%; left:50%; margin:-217px 0 0 -278px; width:554px; height:432px; border:1px solid #ddd; background-color:#fff; }
.login .section { padding-top:104px; text-align:center; position:relative; background:url('../images/logo_01.png') no-repeat 445px 31px; }
.login .section .tit { padding-bottom:28px; color:#666; }
.login .section .tit h1 { color:#333; font-size:30px; font-weight:800; padding-bottom:6px; }
.login .fields { width:275px; margin:0 auto; }
.login .fields ul { padding-bottom:23px; }
.login .fields li { padding-top:10px; }
.login .fields li:first-child { padding-top:0; }
.login .fields .comText { width:253px; padding:10px; border:1px solid #bbb; }
.login .btLogin { border:0; border-radius:0; width:100%; height:42px; line-height:42px; color:#fff; font-weight:bold; font-size:20px; background-color:#3f67b6; cursor:pointer; }


/* common */
html, body, .wrap { height:100%; }
h1, h2, h3, h4, h5, h6 { color:#333; }
.comBg { background-image:url('../images/icons.png'); background-repeat:no-repeat; }
.wrap { min-width:1200px; }
.content { width:1200px; margin:0 auto; position:relative; }
.container { min-height:100%; margin:-104px 0 -100px; }
.container .content { padding-top:104px; padding-bottom:100px; }
.container .section { margin-top:-4px; position:relative; padding-bottom:50px; }
.container .section:after { content:""; display:block; clear:both; }
.container .article { width:940px; float:right; color:#666; }


/* header */
.header { position:relative; z-index:1; height:104px; background:url('../images/top_bg.png') repeat-x 0 0; }
.header .content { width:940px; padding-left:260px; padding-top:62px; }
.header .content h1.comBg { position:absolute; top:36px; left:0; width:152px; height:30px; overflow:hidden; background-position:0 0; }
.header .content h1.comBg a { display:block; overflow:hidden; text-indent:-999px; width:100%; height:100%; }
.header .spot { position:absolute; top:13px; right:0; }
.header .spot .desc { color:#666; font-family:'돋움', Dotum; padding-right:6px; }
.header .spot .btLogin { color:#fff; display:inline-block; padding:0 15px; line-height:24px; background-color:#666; vertical-align:middle; position:relative; top:-2px; }
.header .gnb { height:38px; }
.header .gnb:after { content:""; display:block; clear:both; }
.header .gnb .nav { height:100%; }
.header .gnb .nav > li { float:left; padding-left:54px; }
.header .gnb .nav > li:first-child { padding-left:0; }  
.header .gnb .nav > li a { display:block; height:38px; position:relative; font-weight:bold; color:#333; font-size:18px; transition:color 0.4s; }  
.header .gnb .nav > li a:after { content:""; position:absolute; bottom:0; height:4px; left:50%; width:0; margin-left:0; background-color:#3f67b6; }
.header .gnb .nav > li a.on, .header .gnb .nav > li a:hover { color:#3f67b6; }
.header .gnb .nav > li a.on:after, .header .gnb .nav > li a:hover:after { width:50px; margin-left:-25px; transition:width .1s, margin-left .1s; }
/* table style */
.header .gnb .nav { display:table; table-layout:auto; width:100%; }
.header .gnb .nav > li { float:none; display:table-cell; padding-left:0; text-align:center}
.header .gnb .nav > li a { display:inline-block; }

/* footer */
.footer { background-color:#5f6166; height:100px; position:relative; z-index:1; }
.footer .content { padding:44px 600px 0 156px; width:444px; }
.footer .content .comBg { position:absolute; left:37px; top:29px; width:76px; height:42px; overflow:hidden; text-indent:-999px; background-position:-200px 0; }
.footer .content address { font-family:tahoma; color:#9b9fa7; }
.footer .content .footLink { position:absolute; right:40px; top:34px; }
.footer .content .footLink li { float:left; padding-left:15px; }
.footer .content .footLink li:first-child { padding-left:0; }
.footer .content .footLink .selectbox { min-width:177px; }
.footer .content .footLink .selectbox .txt { padding-left:10px; padding-right:30px; height:28px; line-height:28px; border:1px solid #9b9fa7; background:url('../images/sel_bg2.png') no-repeat 100% 50%; }
.footer .content .footLink .selectbox .txt, .footer .content .footLink .selectbox select { background-color:#5f6166; color:#9b9fa7; }


/* lnb */
.container .aside { width:210px; padding-top:50px; float:left; }
.container .aside h2 { padding:0 10px 18px; font-size:17px; font-weight:800; }
.container .aside .lnb { font-size:15px; border-top:2px solid #4d4d4d; }
.container .aside .lnb li { border-bottom:1px solid #cfcfcf; }
.container .aside .lnb li a { line-height:18px; padding:11px 30px 11px 10px; color:#333; display:block; position:relative; transition:color 0.4s; }
.container .aside .lnb li a:after { content:""; position:absolute; width:8px; height:14px; margin-top:-7px; top:50%; right:12px; background:url('../images/icons.png') no-repeat -200px -50px; visibility:hidden; transition:opacity 0.3s; opacity:0; }
.container .aside .lnb li a:hover, .container .aside .lnb li a.on { color:#3f67b6; }  
.container .aside .lnb li a:hover:after, .container .aside .lnb li a.on:after { visibility:visible; opacity:1; }

/* content */
.subTitle { height:88px; }
.subTitle h2 { padding-top:39px; font-size:22px; font-weight:800; }
.subTitle .path { position:absolute; top:43px; right:0; font-family:'돋움', Dotum; }
.subTitle .path > li { display:inline-block; *display:inline; *zoom:1; }
.subTitle .path > li:before { content:">"; display:inline-block; margin-right:4px; }
.subTitle .path > li:first-child:before { display:none; }
.subTitle .path > li a:hover { text-decoration:underline; }

/* */
.listSearch { position:relative; line-height:30px; padding-bottom:15px; }
.listSearch:after { content:""; display:block; clear:both; }
.listSearch .total { float:left; margin-top:2px; color:#000; font-family:'돋움', Dotum; }
.listSearch .forms { float:right; }
.listSearch .comText { margin:0 3px; }
.listSearch .btSearch { width:40px; height:30px; background:transparent; border:0; background:url('../images/icons.png') no-repeat 0 -100px; }
.listSearch .selectbox .txt { min-width:100px; text-align:left; }


/* */
.tblBtns { padding-top:20px; }
.tblBtns:after { content:""; display:block; clear:both; }
.tblBtns > div { position:relative; z-index:1; }
.tblBtns .btnLeft { float:left; }
.tblBtns .btnRight { float:right; }
.tblBtns a, .sbtn { display:inline-block; margin:0 2px; text-align:center; border-radius:3px; font-size:13px; font-weight:bold; border:1px solid #777; background-color:#777; color:#fff; vertical-align:middle; }
.tblBtns a { line-height:32px; padding:0 9px; min-width:90px; }
.sbtn { padding:0 4px; min-width:48px; line-height:28px; }
.tblBtns .btNavy, .sbtn.btNavy { background-color:#3f67b6; border-color:#3f67b6; }
.tblBtns .btGray, .sbtn.btGray { background-color:#ccc; border-color:#ccc; color:#333; }
.tblBtns .btWhite, .sbtn.btWhite { background-color:#fff; border-color:#ccc; color:#333; }
.tblBtns .btGreen, .sbtn.btGreen { background-color:#98bf44; border-color:#98bf44; color:#fff; }
.tblBtns .btYellow, .sbtn.btYellow { background-color:#ffcc22; border-color:#ffcc22; color:#333; }
.tblBtns .btPrimrose, .sbtn.btPrimrose { background-color:#fff096; border-color:#fff096; color:#333; }


/* */
.pageIndex { text-align:center; padding-top:30px; }
.pageIndex > * { display:inline-block; vertical-align:top; margin:0 2px; min-width:18px; padding:0 4px; height:26px; line-height:26px; background-color:#fff; border:1px solid #ccc; }
.pageIndex > a.on, .pageIndex > a:hover { padding:0 3px; height:24px; line-height:24px; border-width:2px; border-color:#717ebd; font-weight:bold; }
.pageIndex > * > em { display:block; width:9px; height:9px; margin:9px auto 0; overflow:hidden; text-indent:-999px; background-image:url('../images/icons.png'); background-repeat:no-repeat; }
.pageIndex > a.on > em, .pageIndex > a:hover > em { margin-top:8px; }
.pageIndex .first { background-position:-40px -50px; }
.pageIndex .last { background-position:-80px -50px; }
.pageIndex .prev { background-position:-120px -50px; }
.pageIndex .next { background-position:-160px -50px; }

/* */
.comtbl { width:100%; table-layout:fixed; border-spacing:0; border-collapse:collapse; border-top:2px solid #5e5e5e; border-bottom:1px solid #5e5e5e; }
.comtbl th, .comtbl td { padding:9px 10px; text-align:center; }
.comtbl thead th, .comtbl thead td { padding-top:13px; padding-bottom:13px; color:#333; font-size:13px; font-weight:bold; background-color:#f4f5fa; border-bottom:1px solid #a0a0a0; }
.comtbl tbody th, .comtbl tbody td { border-top:1px solid #d8d8d8; }
.comtbl tbody tr:first-child th, .comtbl tbody tr:first-child td { border-top:0; }
.comtbl a:hover { text-decoration:underline; }

/* */
.bl2Top { border-top:2px solid #4d4d4d; }
.comtblView { width:100%; table-layout:fixed; border-spacing:0; border-bottom:1px solid #5e5e5e; }
.comtblView th, .comtblView td { padding:12px 10px 13px; border-top:1px solid #d8d8d8; }
.comtblView th { text-align:left; color:#333; font-size:13px; }
.comtblView tbody tr:first-child th, .comtblView tbody tr:first-child td { border-top:0; }
div.longText { padding:35px 13px; min-height:60px; border-top:1px solid #a0a0a0; border-bottom:1px solid #5e5e5e; line-height:1.6; }
.comtblView .longText { border-top:1px solid #a0a0a0; }
.comtblView .longText .texts { padding:22px 0; min-height:60px; line-height:1.6; }

/* */
.comtblEdit { width:100%; table-layout:fixed; border-spacing:0; border-bottom:1px solid #5e5e5e; }
.comtblEdit > tbody > tr > th, .comtblEdit > tbody > tr > td { height:30px; padding:5px 10px 6px; border-top:1px solid #d8d8d8; }
.comtblEdit > tbody > tr > th { text-align:left; color:#333; font-size:13px; }
.comtblEdit > tbody > tr > td { padding-right:20px; }
.comtblEdit > tbody > tr:first-child > th, .comtblEdit > tbody > tr:first-child > td { border-top:0; }
.comtblEdit > tbody > tr.editorForm th, .comtblEdit > tbody > tr.editorForm td { border-top:1px solid #a0a0a0; }
.comtblEdit > tbody > tr.editorForm td { padding-top:10px; padding-bottom:10px; height:auto; }
.comtblEdit .wFull { width:98%; }
.comtblEdit .comText.wFull { height:20px; box-sizing:content-box; }
.datepicker { text-align:center; width:98px; }
.btCals { position:relative; vertical-align:middle; margin:0 3px; display:inline-block; width:34px; height:30px; background:url('../images/icons.png') no-repeat -50px -100px; cursor:pointer; }
.btCals em { position:absolute; width:0; height:0; overflow:hidden; z-index:-1; }
.editorForm .textEditor { position:relative; border:1px solid #ccc; }

/* 권한관리 */
.authList {  }
.authList > * { padding:8px 0; border-bottom:1px solid #ddd; text-indent:-20px; padding-left:20px;}
.authList input[type='checkbox'] { margin-right:6px; }
.authList > dt { font-weight:bold; }
.authList > dd { margin-left:20px; }
.maxImg { position:relative; display:table; table-layout:fixed; width:100%; background-color:#eee; min-height:30px; }
.maxImg > div { display:table-cell; vertical-align:middle; text-align:center;  }
.maxImg img { max-width:100%; max-height:100%; }


/* 순서 변경 가능 목록 */
.orderList li{ display: flex; align-items: center; gap: 0 8px; width: max-content; border: 1px solid #ccc; border-radius: 8px; padding: 4px 0; margin-bottom: 5px; }
.orderList li:last-child{ margin-bottom: 0; }
.orderList li .img{ box-sizing: border-box; min-width: 50px; height: 50px; text-align: center; background-color: #f7f7f7; margin: 0; }
.orderList li .img img{ display: inline-block; height: 100%; }
.orderList li .image-delete-btn{ width: 20px; line-height: 20px; text-align: center; }
.orderList li .btns{ width: 20px; }
.orderList li .image-arrow-btn{ display: block; width: 20px; height: 20px; cursor: pointer;  border: none; margin: 5px 0; transform: rotate(90deg); }
.orderList li .image-arrow-up-btn{ background: url("../images/icon_arrow_left.gif") center no-repeat; }
.orderList li .image-arrow-down-btn{ background: url("../images/icon_arrow_right.gif") center no-repeat; }
