@charset "utf-8";
/* CSS Document */
#wrap{min-width:1280px;}
/* Header */
#header {display:inline-block; vertical-align:middle;}
#header .h_wrap {position:absolute; z-index:99; left:0px; top:0px; bottom:0px; width:250px; background-color:#354052;}
#header .h_logo {display:inline-block; vertical-align:middle; width:100%; height:80px; background-color:#179fda; background-image:url("../images/logo.png"); background-repeat:no-repeat; background-position:center; background-size:auto 60px;}
#header .h_logo a {display:inline-block; vertical-align:middle; width:100%; height:100%;}

/* Nav */
#nav {display:inline-block; vertical-align:middle; position:absolute; left:0px; right:0px; top:80px; bottom:0px;}
#nav .n_btn {display:none;}
#nav .n_wrap {display:inline-block; vertical-align:middle; width:100%; height:100%; overflow:hidden;}
#nav .n_wrap ul {display:inline-block; vertical-align:middle; width:100%; height:100%; overflow:auto;}
#nav .n_wrap li {display:inline-block; vertical-align:middle; width:100%;}
#nav .n_wrap > ul > li:first-child{display:none;}
#nav .n_wrap button {display:inline-block; vertical-align:middle; position:relative; width:100px; height:100px; margin:0; padding:0; border:none; background-color:transparent; text-align:center;}
#nav .n_wrap li.on button {background-color:#2f394;}
#nav .n_wrap li.on button:before {content:""; position:absolute; left:0px; top:0px; width:4px; height:100%; background-color:#179fda;}
#nav .n_wrap button:hover:before {content:""; position:absolute; left:0px; top:0px; width:4px; height:100%; background-color:#626f7f;}
#nav .n_wrap .icon {display:inline-block; vertical-align:middle; width:30px; height:30px; margin-top:5px; background-image:url("../images/i_gnb.png"); background-repeat:no-repeat; background-size:200% auto;}

#nav .n_wrap .icon.setting {background-position:left 0px;}
#nav .n_wrap button:hover .icon.setting, #nav .n_wrap li.on .icon.setting {background-position:right 0px;}
#nav .n_wrap .icon.member {background-position:left -30px;}
#nav .n_wrap button:hover .icon.member, #nav .n_wrap li.on .icon.member {background-position:right -30px;}
#nav .n_wrap .icon.pay {background-position:left -60px;}
#nav .n_wrap button:hover .icon.pay, #nav .n_wrap li.on .icon.pay {background-position:right -60px;}
#nav .n_wrap .icon.post {background-position:left -90px;}
#nav .n_wrap button:hover .icon.post, #nav .n_wrap li.on .icon.post {background-position:right -90px;}
#nav .n_wrap .icon.board {background-position:left -120px;}
#nav .n_wrap button:hover .icon.board, #nav .n_wrap li.on .icon.board {background-position:right -120px;}
#nav .n_wrap .icon.banner {background-position:left -150px;}
#nav .n_wrap button:hover .icon.banner, #nav .n_wrap li.on .icon.banner {background-position:right -150px;}
#nav .n_wrap .icon.schedule {background-position:left -180px;}
#nav .n_wrap button:hover .icon.schedule, #nav .n_wrap li.on .icon.schedule {background-position:right -180px;}
#nav .n_wrap .icon.data {background-position:left -210px;}
#nav .n_wrap button:hover .icon.data, #nav .n_wrap li.on .icon.data {background-position:right -210px;}
#nav .n_wrap .icon.stats {background-position:left -240px;}
#nav .n_wrap button:hover .icon.stats, #nav .n_wrap li.on .icon.stats {background-position:right -240px;}
#nav .n_wrap .icon.gallery {background-position:left -300px;} /* 20191108 메뉴 아이콘 추가 */
#nav .n_wrap button:hover .icon.gallery, #nav .n_wrap li.on .icon.gallery {background-position:right -300px;}
#nav .n_wrap .icon.party {background-position:left -330px;}
#nav .n_wrap button:hover .icon.party, #nav .n_wrap li.on .icon.party {background-position:right -330px;} /* 20191108 메뉴 아이콘 추가 끝 */
#nav .n_wrap .icon.report {background-position:left -360px;}
#nav .n_wrap button:hover .icon.report, #nav .n_wrap li.on .icon.report {background-position:right -360px;} /* 20200309 메뉴 신고 아이콘 추가 */
#nav .n_wrap span {display:inline-block; vertical-align:middle; width:100%; font-size:14px; color:#8c98a6; line-height:25px;}
#nav .n_wrap button:hover span, #nav .n_wrap li.on span {color:#fff;}
#nav .n_wrap .n_sub {display:inline-block; vertical-align:middle; position:absolute; left:100px; right:0px; top:0px; bottom:0px; padding:0 10px; background-color:#2f3949;}
#nav .n_wrap .n_sub .ns_area {display:none; vertical-align:middle; position:relative; z-index:150; height:100%;}
#nav .n_wrap li.on .n_sub .ns_area {display:block;}
#nav .n_wrap .n_sub .ns_area .ns_title {padding:20px 0px; border-bottom:1px solid #354052; font-size:20px; color:#fff; line-height:30px; text-indent:20px;}
#nav .n_wrap .n_sub .ns_area ul {border-top:1px solid #232c3a;}
#nav .n_wrap .n_sub .ns_area li {height:auto; margin:10px 0px;}
#nav .n_wrap .n_sub .ns_area li a {display:block; vertical-align:middle; position:relative; width:auto; padding:5px 22px; border-radius:4px; font-size:14px; color:#fff; line-height:20px; font-weight:500;}
#nav .n_wrap .n_sub .ns_area li a:hover, #nav .n_wrap .n_sub .ns_area li.on a {background-color:#179fda; color:#fff;}
#nav .n_wrap .n_sub .ns_area li a:hover:before ,#nav .n_wrap .n_sub .ns_area li.on a:before {content:""; position:absolute; left:10px; top:13px; width:4px; height:4px; border-radius:4px; background-color:#fff;}

#header .h_top {display:inline-block; vertical-align:middle; position:absolute; left:250px; right:0px; top:0; z-index:9; height:80px; padding:0 40px; background-color:#fff; box-shadow:0 1px 3px rgba(0, 0, 0, 0.1);}
#header .h_top .ht_title {display:inline-block; vertical-align:middle; float:left; font-size:12px; color:#979ea8; line-height:80px;}
#header .h_top .ht_menu {display:inline-block; vertical-align:middle; float:right; margin-top:15px;}
#header .h_top .ht_menu .htm_btn {display:none;}
#header .h_top .ht_menu li {display:inline-block; vertical-align:middle; float:left; margin-left:25px;}
#header .h_top .ht_menu a {display:inline-block; vertical-align:middle; width:50px; height:50px; font-size:12px; color:#979ea8; font-weight:400; line-height:20px; text-align:center;}
#header .h_top .ht_menu a:hover {color:#2f3949;}
#header .h_top .ht_menu .icon {display:inline-block; vertical-align:middle; width:20px; height:20px; background-image:url("../images/i_topmenu.png"); background-repeat:no-repeat; background-size:300% auto;}
#header .h_top .ht_menu .icon.site {background-position:left top;}
#header .h_top .ht_menu a:hover .icon.site {background-position:right top;}
#header .h_top .ht_menu .icon.edit {background-position:left center;}
#header .h_top .ht_menu a:hover .icon.edit {background-position:right center;}
#header .h_top .ht_menu .icon.logout {background-position:left bottom;}
#header .h_top .ht_menu a:hover .icon.logout {background-position:right bottom;}
#header .h_top .ht_menu span {display:inline-block; vertical-align:middle; width:100%;}


/* Contents */
#contents {position:absolute; left:250px; right:0px; top:80px; bottom:0px; z-index:1; background-color:#edf1f5; overflow:auto;}
#contents .c_wrap {display:inline-block; vertical-align:middle; width:100%;}
#contents .c_head {padding:50px 40px; background-color:#fff; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.04);}

#contents .c_title {display:inline-block; vertical-align:middle; float:left; font-weight:400;}
#contents .c_title h3 {font-size:22px; color:#2f3949; line-height:30px;}
#contents .c_title p {font-size:14px; color:#979ea8; line-height:20px;}

#contents .c_navi {display:inline-block; vertical-align:middle; position:relative; float:right;}
#contents .c_navi ul {display:inline-block; vertical-align:middle; width:100%;}
#contents .c_navi li {display:inline; float:left; position:relative; margin-left:24px; height:30px; font-size:0px;}
#contents .c_navi .icon {display:inline-block; vertical-align:middle; float:left; width:28px; height:28px; background-image:url("../images/i_home.png"); background-repeat:no-repeat; background-position:center; background-size:12px auto;}
#contents .c_navi li:before {content:""; position:absolute; left:-13px; top:10px; width:1px; height:6px; background-color:#d6dae1; transform:rotate(-45deg);}
#contents .c_navi li:after {content:""; position:absolute; left:-13px; bottom:10px; width:1px; height:6px; background-color:#d6dae1; transform:rotate(45deg);}
#contents .c_navi li:first-child {margin-left:0;}
#contents .c_navi li:first-child:after {display:none;}
#contents .c_navi li:first-child:before {display:none;}
#contents .c_navi li a {display:inline-block; vertical-align:middle; height:28px; padding:0 20px; border:1px solid #d6dae1; border-radius:15px; font-size:14px; color:#8c98a6; line-height:28px;}
#contents .c_navi li:first-child a {padding:0;}
#contents .c_navi .cn_menu button {display:inline-block; vertical-align:middle; position:relative; height:30px; padding:0 20px; border:none; border-radius:15px; background-color:#354052; font-size:14px; color:#fff; line-height:30px; outline:none;}
#contents .c_navi .cn_menu ul {display:none;}

#contents .c_submenu {display:inline-block; vertical-align:middle; position:relative; width:100%; margin-top:30px; margin-bottom:-50px;}
#contents .c_submenu button {display:none; outline:none;}
#contents .c_submenu ul {display:inline-block; vertical-align:middle; width:100%;}
#contents .c_submenu li {display:inline-block; vertical-align:middle; float:left; position:relative; min-width:100px; margin-right:40px; text-align:center;}
#contents .c_submenu a {display:inline-block; vertical-align:middle; width:100%; height:100%; padding:30px 0; font-size:14px; color:#979ea8; line-height:14px; font-weight:500;}
#contents .c_submenu a:before {content:""; position:absolute; left:0px; right:0px; bottom:-1px; height:4px; background-color:#d2d7de;}
#contents .c_submenu a:hover, #contents .c_submenu .on a {color:#2f3949;}
#contents .c_submenu a:hover:before, #contents .c_submenu .on a:before {background-color:#179fda;}

#contents .c_body {padding:40px;}
#contents .c_body .c_wrap {margin-bottom:20px;}

#contents .c_search {display:inline-block; vertical-align:middle; width:100%;}
#contents .c_search .cs_select {display:inline-block; vertical-align:middle; float:left; width:160px;}
#contents .c_search .cslist_select {display:inline-block; vertical-align:middle; float:left; width:100%; height: 40px;}
#contents .c_search .cs_input {display:inline-block; vertical-align:middle; float:left; width:300px; margin-left:10px;}
#contents .c_search .cs_send {display:inline-block; vertical-align:middle; float:left; margin-left:10px;}
#contents .c_search .cs_email {display:inline-block; vertical-align:middle; float:right;}

/* 20191223 날짜검색 추가 */
#contents .c_search .cs_input.date {width:150px; }
#contents .c_search .input.date {background-image:url(/static/images/common/ico_cal.png); background-position:95% 50%; background-repeat:no-repeat; background-size:22px; }
#contents .c_search .input.date[type=date]::-webkit-inner-spin-button {-webkit-appearance: none; -moz-appearance: none; display: none; }
#contents .c_search .input.date[type=date]::-webkit-calendar-picker-indicator {opacity:0; -webkit-appearance: none; }
#contents .c_search .search_date {display: inline-block; margin-left: 30px;}

.ff_wrap > img {background-color: #eee;}/* 로고이미지 png 미리보기 */
/* Footer */
#footer {display:inline-block; vertical-align:middle; width:100%; margin-top:30px; margin-bottom:50px;}
#footer p {font-size:11px; font-weight:300; color:#979ea8; line-height:14px; letter-spacing:1px;}
#footer p mark {color:#179fda; font-weight:500;}
#footer span {display:inline-block; vertical-align:middle;}
#footer .f_ver {margin-left:20px; font-size:10px; font-weight:300; color:#aab5c2; line-height:14px; letter-spacing:1px;}

.form .f_wrap .ff_wrap img {display: block; max-width: 960px; margin-bottom: 10px; }

.form .f_wrap.appimage img {max-width:809px;}
.form .f_wrap.pcimage img {max-width:980px;}