@charset "utf-8";
/*root*/
  :root{
    --bg:#0a0f24;          
    --bg-2:#F1F3F8;
    --bg-3:#F6F9FF;        
    --lightblue:#7EBEFF; 
    --skyblue:#E6F2FF; 
    --blue:#369AFF;
    --purple:#838DFF;
    --mint:#33C1B7;
    --gray:#8B8B8B;
    --yellow: #F8D57E;
    --darkgray:#54607B;
    --darkblue:#113788;
    --red:#ff2b2b;
    --gradient:linear-gradient(91deg, #6AB5FC 0%, #718CFF 100%);
    --title:#1a1a1a;
    --text:#666;
    --muted:#BFBFBF;
    --line:1px solid #ddd;
    --boxshadow: 0 8px 10px rgba(231,235,249,1);
    --boxshadow_dark: 0 8px 10px rgb(0, 0, 0, 0.3);
    --radius: 15px;
    --radius-lg: 20px;
    --container: 1640px;
  }
/*base*/
.container{max-width:var(--container);margin:0 auto;position: relative;}
/* input[type="checkbox"]{width:15px;height:15px;} */
input[type="radio"]{width:15px;height:15px;}
input[type="text"]{min-width: 180px;height: 42px;line-height: 42px;border: var(--line);font-size: 1.5rem;text-indent: 12px;font-family:inherit;border-radius: 8px;}
input[type="text"]:read-only {background:#e7e7e7;}
input[type="file"]{height:42x;line-height:42px;border: var(--line);background:#fff; font-size:1.5rem;text-indent:5px; margin-right: 5px;}
input[type="password"]{height:42px;line-height:42px;border: var(--line); text-indent:12px; font-family:inherit;border-radius: 8px;}
input[type="date"] {width:200px;height: 42px;line-height: 42px;border: var(--line);font-family:inherit;font-size: 1.5rem;padding: 5px;box-sizing: border-box;text-indent:5px;background: #fff url('../images/cal_icon.png')no-repeat top 10px right 10px;border-radius: 8px;margin: 0 5px;}
input[type="date"]:disabled {width:200px;height: 42px;line-height: 42px;border: var(--line);font-family:inherit;font-size: 1.5rem;padding: 5px;box-sizing: border-box;text-indent:5px;background: var(--bg-2) url('../images/cal_icon.png')no-repeat top 10px right 10px;border-radius: 8px;margin: 0 5px;}
input[type="date"]::-webkit-inner-spin-button,
input[type="date"]::-webkit-calendar-picker-indicator {opacity:0; cursor:pointer;}
textarea{font-family:'Pretendard', sans-serif; font-size:1.6rem;width:100%;max-width:100%;min-height: 166px;border: var(--line);padding:10px;box-sizing:border-box;border-radius: 8px;}
select{width:180px;height: 42px;border: var(--line);font-size:1.4rem;padding:3px;border-radius: 8px;color: #666;}
select {
  background: url('../images/select_arrow.png') no-repeat top 16px right 11px #fff;
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  text-indent: 7px;
}
select::-ms-expand { display: none; }
caption {font-size: 0;position: absolute;left: -99999px;}
label {margin:0 10px 0 3px;}
.sticky {position: -webkit-sticky; position: sticky; top: 0;}
.sticky--desktop {display: none;}
.sticky:before, .sticky:after {content: ''; display: table;}
.clearfix { zoom: 1;}
.clearfix:before, .clearfix:after { content: ""; display: table;}
.clearfix:after { clear: both;}
img {max-width:100%;}
.weight-light {font-weight:300;}
.weight-bold {font-weight:700;}
.req {color:var(--red);}

/*margin*/
.mg-b10 {margin-bottom:10px;}
.mg-b20 {margin-bottom:20px;}
.mg-b30 {margin-bottom:30px;}
.mg-b60 {margin-bottom:60px;}
.mg-b90 {margin-bottom:90px;}
.container .mg-b60:last-child, 
.container .mg-b90:last-child {margin-bottom:0;} 

/*width size*/
.wd-20 {width: 20%;}
.wd-30 {width:30%;}
.wd-40 {width:40%;}
.wd-50 {width:50%;}
.wd-60 {width:60%;}
.wd-70 {width:70%;}
.wd-80 {width: 80%;}
.wd-85 {width: 85%;}
.wd-100 {width:100%;}

/*tabmenu style*/
.tab-menu {display:flex;margin-bottom: 45px;justify-content: center;}
.tab-menu li {font-size:2.3rem;color:#787878;position: relative;padding-left: 43px;cursor: pointer;}
.tab-menu li:before {content: ''; display:block; width:1px; height:19px; background:#d4d4d4; position: absolute; top:7px; left:20px;}
.tab-menu li:hover {color:var(--title);}
.tab-menu li:first-child { padding-left:0;}
.tab-menu li:first-child:before {display:none;}  
.tab-menu li.on {font-weight:600;color:var(--blue);display: flex;}
.tab-menu li.on:after {content:'';width: 22px;height: 22px;background:url(../images/link_arrow.png);display: block;margin-top: 2px;margin-left: 3px;}
#admin .tab-menu li {font-size:1.7rem; padding-left:25px;}
#admin .tab-menu li:before {height:12px; left:12px;}

/*첨부파일*/
.filebox .upload-name {
  display: inline-block;
  height: 35px;
  padding: 0 10px;
  vertical-align: middle;
  border: 1px solid #d7d7d7;
  width: 250px;
  color: #999999;
  border-radius: 7px;
}
.filebox label {
  display: inline-block;
  padding: 0px 18px 0 37px;
  color: #fff;
  vertical-align: middle;
  background: url(../images/search_icon.png) no-repeat center left 15px #797E95;
  cursor: pointer;
  line-height: 35px;
  margin: 0 6px;
  border-radius: 10px;
}
.filebox input[type="file"] {
  position: absolute;
  width: 0;
  height: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
}
.filebox button {margin-right: 3px;}

/* header*/
.sec-header {position: fixed;z-index:99;top:0;left:0;width:100%;border-bottom: 1px solid rgba(255,255,255,0.3);}
.sec-header.active {background:#fff; box-shadow:0 0 8px 0 rgba(0,0,0,0.2);}
.sec-header.active .default {display:none;}
.sec-header.active .change {display:block;}
.sec-header.active #header .nav-bar .depth1 > li > a {color:var(--title);}
.sec-header.active #header .utill-menu button > svg {fill:var(--gray);}
.sec-header.active #header .utill-menu button > span > svg {fill:var(--gray);}
#header {
    width: 100%;
    max-width: var(--container);
    height: 80px;
    margin: 0 auto;
    display: flex;
    align-items: center;
}
#header .logo {display:block;float:left;margin-right: 2%; width:15%;}
#header .logo > img {vertical-align:bottom;}
.sec-header .change {display:none;}
#header .nav-bar {width:75%;}
#header .utill-menu {width: 12%; display: flex; justify-content: flex-end; }
#header .utill-menu > button {background:none;margin: 0 15px;}
#header .utill-menu button > svg {fill:#fff;}
#header .utill-menu button > span > svg {fill:#fff;}
.push-btn {position:relative;padding-left: 13px;}
.push-btn > span {
  background: var(--blue);
  border-radius: 50%;
  font-size: 1.2rem;
  color: #fff;
  text-align: center;
  display: block;
  width: 19px;
  line-height: 19px;
  position:absolute;
  bottom: 6px;
  left:0;
  z-index:2;
}
.header-bg {background: var(--bg-2);transition:.3s ease;box-shadow: 0px 8px 10px 0 rgba(0, 0, 0, 0.3);}
#header .allmenu-btn {display:none;}
.mobile-header {display:none;}
.msg-box {
  display: none;
  width: 90%;
  max-width: 355px;
  height: 204px;
  background: var(--bg-2);
  border-radius: 10px;
  padding: 20px;
  position: absolute;
  top: 70px;
  box-shadow: 0px 10px 9px 0 rgba(0, 0, 0, 0.1);
}
.msg-box.on {display:block; z-index: 2;}
.msg-box:before {
  content:'';
  display:block;
  width:0;
  height:0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom:10px solid #f1f3f8;
  margin-top: -30px;
  float: right;
  clear: both;
}
.mode-bar { display: flex; gap: 10px; margin-bottom: 20px;}

.mode-btn {
  padding: 8px 14px;
  width: 80px;
  border: 1px solid #cfd3e1;
  border-radius: 6px;
  background: #fff;
  color: #2f45d5;
  font-weight: 600;
  letter-spacing: 0.2px;
  transition: all .15s ease;
}
/* .mode-btn:hover {box-shadow: 0 1px 4px rgba(0,0,0,.06);}
.mode-btn.active {background: #2f45d5; color: #fff; border-color: #2f45d5;}
.mode-btn[aria-pressed="true"] {background: #2f45d5; color: #fff; border-color: #2f45d5;} */
.msg-box#member {max-width:250px; height:auto;}
.msg-box#member:before {margin-right:0;} 
.msg-box .member {display:flex; align-items: center; justify-content: center; margin-bottom:15px;}
.msg-box#member:before {margin-right: 26px;} 
.msg-box#member .title {margin-bottom:0;}
.msg-box .member > strong {color:var(--title); font-weight:500; margin-right:6px;}
.msg-box #logout-btn {margin:0 auto 10px;}
.msg-box .title {display:block;margin-bottom:15px;position:relative; overflow:hidden;}
.msg-box .title > h3 {color:var(--title); float:left;}
.msg-box .title > button { float: right;}
.msg-box .list {height: 156px;overflow-y: auto;}
.msg-box .list > li {padding-bottom:8px; margin-bottom:8px; border-bottom:var(--line);}
.msg-box .list > li:last-child {padding-bottom:0; margin-bottom:0; border:0;}
#header .nav-bar .depth1:after {clear: both;}
#header .nav-bar .depth1  {display: flex;justify-content: end;}
#header .nav-bar .depth1 > li { position: relative; display:inline-block;}
#header .nav-bar .depth1 > li.on > a:before { opacity: 1; }
#header .nav-bar .depth1 > li.on .depth2:before {opacity: 1;}
#header .nav-bar .depth1 > li > a {
    font-size: 2rem;
    line-height: 81px;
    letter-spacing:0;
    color: #fff;
    margin: 0 30px;
    position: relative;
    font-weight: 500;
    display: block;
}
.nav-bar li ul li {padding:0 10px;}
.nav-bar li ul li a {
  padding: 11px;
  display: block;
  position: relative;
  line-height: normal;
  color: var(--title);
  font-size: 1.6rem;
  text-align: center;
}
.nav-bar li ul li a:hover {color:var(--blue); font-weight:600;}
.nav-bar .depth1 > li > a:after {
  content: '';
  width: 0;
  bottom: 0px;
  left: 50%;
  height: 4px;
  background: var(--blue);
  position: absolute;
  transition: all ease .3s;
  border-radius: 10px;
  transform: translateX(-50%);
}
.nav-bar li:hover > a:after { width:100%;}
.nav-bar ul li ul {
  position: absolute;
  top: 81px;
  z-index: 1;
  width: 100%;
  min-width: 204px;
  height:0px;
  left: 50%;
  overflow: hidden;
  transform: translateX(-50%);
  padding: 10px 0;
}
.nav-bar ul li ul.on { height:auto; padding: 10px 0;}
.nav-bar ul li ul.last { border-right:var(--line);}
.header-bg {
  width: 100%;
  height: 0;
  background:var(--bg-3);
  position: fixed;
  left: 0;
  top: 81px;
  transition: all ease .2s;
  box-shadow: 0px 5px 10px rgb(0,0,0,0.15);
  transition: height 250ms ease; 
}
.header-bg.on{border-top:var(--line);}

/*checkbox style*/
.chk-box {margin-right:8px; position:relative;}
.chk-box input[type="checkbox"] {
    position: absolute;
    top:0; left:0;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.chk-box input[type="checkbox"] + label {
	display: inline-block;
	position: relative;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	color: #666;
	font-size: 1.6rem;
	margin: 0;
}

.chk-box input[type="checkbox"] + label:before {
	content: ' ';
	display: inline-block;
	width: 16px;
	height: 16px;
	text-align: center;
	vertical-align: middle;
	background: #fff;
	border: 1px solid #a1a1a1;
	margin: 0 4px 2px 0;
	border-radius:3px;
}
.chk-box input[type="checkbox"] + label:before {border-radius:50%;}
.chk-box input[type="checkbox"] + label:active:before,
.chk-box input[type="checkbox"]:checked + label:active:before { box-shadow: 0px 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);}
.chk-box input[type="checkbox"]:checked + label:before {
	content: '';
	color: #ffffff;
	text-shadow: 1px 1px white;
	background: url('../images/chk_icon.png')no-repeat center var(--blue);
	border: 1px solid var(--blue);
}
.chk-box input[type="checkbox"]:disabled + label:before,
.chk-box input[type="checkbox"]:disabled + label:active:before, 
.chk-box input[type="checkbox"]:disabled:checked + label:active:before {background:#e1e1e1!important;}

/*radio button style*/
.radio-btn {margin-right:8px;}
.radio-btn input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.radio-btn input[type="radio"] + label {
	display: inline-block;
	position: relative;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	color: #666;
	margin: 0;
}

.radio-btn input[type="radio"] + label:before {
	content: ' ';
	display: inline-block;
	width: 16px;
	height: 16px;
	text-align: center;
	vertical-align: middle;
	background: #fff;
	border: 1px solid #a1a1a1;
	margin: 0 4px 3px 0;
	border-radius:50%;
}
.radio-btn input[type="radio"] + label:active:before,
.radio-btn input[type="radio"]:checked + label:active:before { box-shadow: 0px 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);}
.radio-btn input[type="radio"]:checked + label:before {
	content: '';
	color: #fff;
	text-shadow: 1px 1px white;
	background:var(--blue);
	border: 1px solid var(--blue);
}
.radio-btn input[type="radio"] + label:after {
	content: ' ';
	display: none;
	width: 16px;
	height: 16px;
	border-radius:50%;
	position:absolute;
	top: 2.5px;
	left: 0;
  background:#fff;
  box-shadow:inset 0 0 0 4px var(--blue);
  border: 1px solid var(--blue);
}
.radio-btn input[type="radio"]:checked + label:after {background:#fff;display: block;}
.radio-btn input[type="radio"]:checked + label {color:var(--blue);}
.radio-btn input[type="radio"]:disabled + label:before,
.radio-btn input[type="radio"]:disabled + label:active:before, 
.radio-btn input[type="radio"]:disabled:checked + label:active:before {background:#e1e1e1!important;}

/*login*/
.login-box {width:40%;max-width: 384px;height: 474px;border-radius: var(--radius-lg);background:#313B51;box-sizing: border-box;padding:10px 40px 10px 40px;text-align: center;}
.login-box .img-sec {margin: 10px auto 20px;text-align: center;}
.login-box h2 {color:#fff;font-size: 1.9rem;font-weight:400;margin-bottom: 25px;} 
.login-form > input {width:100%; height:43px; border:0; border-radius:8px; box-sizing: border-box; margin-bottom:15px;}
.login-form > input::placeholder {font-size:1.4rem; color:#929292;}
.input-id {background:url('../images/id_icon.png')no-repeat center left 18px #fff; padding-left:36px;}
.input-pw {background:url('../images/pw_icon.png')no-repeat center left 15px #fff; padding-left:43px;}
.login-box .btn-area {flex-wrap: wrap; margin-top:0;}
.login-box .btn-area ul {display:block; width:100%; text-align:center; margin:10px 0 20px 0;}
.login-box .btn-area ul > li {display:inline-block;}
.login-box .btn-area ul > li > a {color:#fff; margin:0 5px;}
.login-box .btn-area .login-btn {display:block; width:100%; line-height:43px; border-radius:8px; background:var(--blue); color:#fff; font-size:1.7rem; font-weight:500; padding: 0px;}

/******************************************** MAIN ********************************************/
#main > section {padding:110px 0;}
#main .section-1 {padding: 165px 0 68px 0; position:relative; overflow:hidden;}
#main .section-1:before {content:''; display:block; width:100%; height:100%; background: url('../images/main_visual.jpg')no-repeat top right; background-attachment: fixed; position:absolute; top:0; left:0;}

@media all and (min-width:1400px) {
#main .section-1:before {animation: bg-ani01 6s;}
@keyframes bg-ani01 {
    0%{transform:scale(1.4);}
    100% {transform:scale(1);}
  }

}
#main .section-1 .container {display:flex;}
#main .section-1 .left {width:40%;}
#main .section-1 .right {display:flex; width:60%;}
#main .section-1 .visual-txt {margin-bottom:50px;}
#main .section-1 .visual-txt h1 {font-size:4.5rem; color:#fff; margin-bottom:15px;}
#main .section-1 .visual-txt p {font-size:2.3rem; color:#fff; opacity:0.9;}
.search-bar {display: flex;width:100%;max-width:507px;height:60px;background:#fff;border-radius: 15px;box-shadow:var(--boxshadow_dark);box-sizing: border-box;padding: 8px;position: relative;}
.search-bar > input[type="text"] {border:0;width: 75%;height: 100%;font-size: 1.8rem;margin-right: 44px;}
.search-bar > select {width:25%; border:0; font-size:1.6rem;}
.search-bar > .search-btn {width:44px;height:44px;border-radius: 13px;background: var(--blue);font-size: 0;position: absolute;transition: .4s ease;right: 8px;}
.search-bar > .search-btn:before {content:''; display:block; width:20px; height:20px; background:url('../images/search_icon.svg')no-repeat; position: absolute; top:50%; left:50%; transform: translate(-50%, -50%);}
.search-bar > .search-btn:hover {background:var(--darkblue);}
.statistics {width: 60%;max-width:580px;margin-right: 20px;}
.statistics li {
  float: left;
  display: block;
  width: calc(50% - 10px);
  height: 227px;
  margin-right:20px;
  margin-bottom: 20px;
  border-radius: var(--radius);
  box-sizing: border-box;
  padding: 26px;
  background: rgba(255, 255, 255, 0.2);
  -webkit-backdrop-filter: blur(1.3rem) brightness(1.3);
  backdrop-filter: blur(1.3rem) brightness(1.3);
  color:#fff;
  position: relative;
}
.statistics li:nth-child(2n) {margin-right:0;}
.statistics li > p {font-size:1.9rem;}
.statistics li .cont {display:flex;margin-top: 95px;align-items: flex-end;}
.statistics li .cont .num {font-size:3.5rem;margin-right:auto;line-height: normal;}
.statistics li .cont .num > span {font-size:1.8rem;margin-left: 4px;vertical-align: middle;}
.statistics li .cont .img-sec {
    position: absolute;
    bottom: 30px;
    right: 30px;
}
#main .section-3 {background:var(--bg-2);}
.main-title {display:block;text-align: center;font-size:3.8rem;font-weight:400;color:var(--title); margin-bottom: 40px;}
.new-contents .img-sec {border-radius: var(--radius-lg);overflow: hidden;width:100%;padding-bottom: 47%;position: relative;}
.new-contents .img-sec > img {position: absolute;top: 0; left: 0; transition:1s ease; }
.new-contents .cont {padding:30px;display: flex;flex-direction: column;}
.new-contents .cont .ci {position:relative;border-radius:50%;background:#fff;display:block;width:55px;height:55px;margin-top: -57px;margin-bottom: 5px;margin-left: auto;} 
.new-contents .cont .ci > img {position:absolute; top:50%; left:50%; transform: translate(-50%, -50%); width:90%;}
.keyword {margin-bottom: 16px;}
.keyword li {display:inline-block;margin-right: 3px;border-radius: var(--radius-lg);padding: 1px 13px;background:var(--purple);color:#fff;font-size: 1.4rem;}
.keyword li:nth-child(2) {background:var(--blue);}
.keyword li:nth-child(3) {background:var(--mint);}
.new-contents .swiper-slide > a {
  background:#fff;
  border: var(--line);
  border-radius: var(--radius-lg);
  box-sizing: border-box;
  overflow: hidden;
  display: block;
  transition:.3s ease;
  position:relative;
}
.new-contents .swiper-slide > a:before {
  content:'';
  display:block;
  width:100%;
  height:100%;
  box-shadow: inset 0 0 0 0  var(--blue);
  border-radius:var(--radius-lg);
  opacity:0;
  position:absolute;
  top:0;
  left:0;
  transition:.4s ease;
  pointer-events:none;
  z-index: 2;
}
.new-contents .swiper-slide > a:hover .board-subject {color:var(--darkblue);}
.new-contents .swiper-slide > a:hover:before {opacity:1;  box-shadow: inset 0 0 0 3px  var(--blue);}
.new-contents .swiper-slide > a:hover {border:1px solid #fff;}
.new-contents .swiper-slide > a:hover .img-sec > img {transform: scale(1.2);}
.new-contents .swiper-slide > a .img-sec > img {width: 100%;}
.board-subject {
  display:block; 
  font-size:2rem; 
  color:var(--title); 
  overflow: hidden; 
  text-overflow: ellipsis; 
  white-space:nowrap;
  width:100%;
  margin-bottom:10px;
}

.gall-board-cont {
  max-height: 46px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  line-height: 1.5;
  word-wrap: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.gall-board.style02 > li > a > .img-sec > img {height:40px; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);}
.gall-board.style02 > li > a:hover .img-sec > img {transform:translate(-50%, -50%);}
.gall-board.style02 > li > a > .img-sec {background:#f7f7f7;}
.gall-board.style02 .gall-board-cont {margin-bottom:35px;}

.borad-info {margin-top:40px; overflow:hidden; display:block; font-size:1.4rem;}
.borad-info .writer {float:left;color:var(--title);padding-right: 21px;position: relative;}
.borad-info .writer:after {content:'';display:block;width:1px;height: 13px;background:#ccc;position:absolute;top: 4px;right: 9px;}
.borad-info .date {float:left; color:var(--muted);}
.borad-info .hit {float:right;padding-left: 25px;background: url('../images/hit_icon.jpg')no-repeat top 3px left;}
.slide-button {position:relative;display: flex;justify-content: center;align-items: center;margin-top: 25px;}
#service {padding:0 0 13px 0;}
#service .slide-button {display:none;}
#service .swiper-slide > a {
  box-sizing: border-box; 
  background:#fff; 
  border-radius: var(--radius); 
  box-shadow: var(--boxshadow);
  height:303px; 
  padding:40px 30px; 
  display:flex; 
  justify-content: center; 
  align-items: center;
  flex-direction: column;
  text-align: center;
  transition:.4s ease;
} 
.cont > .board-cont { height: 72px;}
#service .swiper-slide > a:hover {background:var(--darkblue);}
#service .swiper-slide > a:hover h3 {color:#fff;}
#service .swiper-slide > a:hover p {color:#fff; opacity:0.6;}
#service .img-sec {margin-bottom:25px;}
#service h3 {font-size:2.5rem;color:var(--blue);margin-bottom: 10px;}
#service p {font-size:1.7rem;}
.news-board {display:flex;}
.news-board .first {width: 35%;margin-right: 3%;}
.borad-list {width:72%; border-top:1px solid #000;}
.borad-list > li > a {display:flex;border-bottom:var(--line);padding: 29px;transition: .3s ease;align-items: center;}
.borad-list > li > a > .date {display:block;width: 53px;height:55px;margin-right:3%;color:#BFBFBF;text-align: center;}
.borad-list > li > a > .date > span {font-size:1.2rem;letter-spacing: 0.5px;margin-bottom: 3px;display: block;}
.borad-list > li > a > .date > strong {font-size:4rem;}
.borad-list > li > a > .board-cont {width: calc(100% - 131px);}
.borad-list > li > a > .board-cont h3 {font-size:2.2rem; color:var(--title);margin-bottom: 5px;overflow:hidden;text-overflow: ellipsis;white-space: nowrap;width: 89%;}
.borad-list > li > a > .board-cont p {font-size:1.8rem; overflow:hidden; text-overflow: ellipsis; white-space: nowrap; width: 89%;}
.borad-list > li > a .more-icon {border:1px solid #C1C1C1; background:url('../images/more-arrow.png')no-repeat center;}
.borad-list > li > a:hover {background:var(--bg-3);}
.borad-list > li > a:hover .more-icon {background:url('../images/more-arrow-w.png')no-repeat center #000; border:1px solid #000;}
.news-board .first a {display:block; position:relative;}
.news-board .first .more-icon {position: absolute; top: 0; right: 0;}
.news-board .first a:hover .more-icon {background:url('../images/more-arrow-w.png')no-repeat center var(--blue); border:1px solid var(--blue);}
.news-board .first .title {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.17) 51%, rgba(255, 255, 255, 0) 100%);
  z-index: 2;
  display: flex;
  align-items: flex-end;
  padding: 22px;
  box-sizing: border-box;
}
.news-board .first a .title > h3 {
  color: #fff;
  font-weight: 500;
  font-size: 2.2rem;
  display: block;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.news-board .first .img-sec {
    width: 100%;
    -webkit-mask-image: url("../images/thum_mask.svg");
    mask-image: url("../images/thum_mask.svg");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: cover;
    mask-size: cover;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    overflow: hidden;
    position: relative
}
.news-board .first .img-sec:before {content: "";display: block;padding-bottom: 72.2%;}
.news-board .first .img-sec > img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -webkit-transition: -webkit-transform .4s;
    transition: -webkit-transform .4s;
    transition: transform .4s;
    transition: transform .4s, -webkit-transform .4s
}


/******************************************** SUB ********************************************/
#sub > .container {padding:90px 0;}
#admin > .container {padding:90px 0;}
#sub .search-bar {box-shadow:inset 0 0 0 3px var(--blue); margin-bottom:40px;}
#admin .search-bar {box-shadow:inset 0 0 0 3px var(--blue); margin-bottom:40px;}
.sub-title {display:flex;margin-bottom: 20px;}
.sub-title h2 {font-size: 3rem;color: var(--title);margin-right:auto;}
.sub-title.center {justify-content: center; text-align: center;}
.sub-title.center h2 {margin:0;}
.sub-title.sub h2 {font-size: 2.2rem; color: var(--darkblue);}
.sub-title .option-select {width:35%;}
.sub-title .option-select select {width:47%; margin-left:2%;}
.sub-title2 {display:flex;margin-bottom: 15px;}
.sub-title2 h3 {font-size: 2.2rem; color: var(--darkblue); margin-right:auto;}
.sub-title2.center {justify-content: center;}
.sub-title2.center h3 {margin-right:0;}
.sub-title .sub-tabmenu {margin-left:auto;}
.sub-tabmenu {display:flex; padding-left: 10px; flex-direction: row;}
.sub-tabmenu > li {width:100%;margin-right: 10px;}
.sub-tabmenu > li:last-child {margin-right:0;}
.sub-tabmenu > li > a {display:block;line-height: 38px;min-width: 90px;text-align: center;border: 1px solid var(--blue);border-radius: var(--radius-lg);font-weight: 500;color: var(--blue);padding: 0 20px;}
.sub-tabmenu > li > a.on {background:var(--blue); color:#fff;}
.sub-tabmenu > li > button {display:block;line-height: 38px;min-width: 90px;text-align: center;border: 1px solid var(--blue);border-radius: var(--radius-lg);font-weight: 500;color: var(--blue);padding: 0 20px;}
.sub-tabmenu > li > button.active {background:var(--blue); color:#fff;}
.sub-title .date-select {margin-left:auto;display:flex;align-items: center;}
.sub-title .date-select select {width:50%; margin-left:7px;}
.sub-title .btn {height:40px; margin-left:8px;}
.sub-title3 {display:block; margin-bottom:10px;}
.sub-title3 h3 {color:var(--title);padding-left: 9px;position:relative;margin-bottom: 3px;}
.sub-title3 h3:before {content:'';display:block;width:4px;height:4px;background:var(--blue);position:absolute;top: 10px;left:0;}
.info-box {display:block;width: 100%;border-radius:var(--radius);box-sizing: border-box;padding: 20px;background:var(--skyblue);}
.info-box dl dt {font-size:2.2rem; font-weight:600; color:#2437B2; margin-bottom:10px;}
.info-box dl dd {display:block; position: relative; padding-left:10px; color:#1a1a1a; margin-bottom:8px;}
.info-box dl dd:before {content:''; display:block; width:3px; height:3px; background:#6273E1; position:absolute; top:9px; left:0;}
.info-box dl dd:last-child {margin-bottom:0;}
.info-box p {color:var(--title);}
.info-box .txt {display:flex; align-items: center;}
.info-box .txt p {font-size:1.8rem;color:var(--title);margin-right:auto;width: 78%;}
.info-box .txt .btn {margin-left:auto;}
.sub-head {display:flex;margin-bottom: 40px;align-items: center;}
.sub-head .sub-tabmenu {margin-right:auto;}
.sub-head .right {margin-left:auto;width:50%;display:flex;align-items: center;justify-content: end;}
.sub-head .right .btn {width:18%;max-width: 107px;margin-right:2%;}
#sub .sub-head .right .search-bar {width:80%;margin-bottom:0;margin-right: 0;}


/*sub-visual*/
#sub-visual {background-attachment: fixed;}
#sub-visual.bg01 {background-image: url('../images/sub_visual1.jpg');}
#sub-visual.bg02 {background-image: url('../images/sub_visual2.jpg');}
#sub-visual.bg03 {background-image: url('../images/sub_visual3.jpg');}
#sub-visual.bg04 {background-image: url('../images/sub_visual4.jpg');}
#sub-visual.bg05 {background-image: url('../images/sub_visual5.jpg');}
#sub-visual.bg06 {background-image: url('../images/sub_visual6.jpg');}
#sub-visual .visual-txt {padding:200px 0 130px 0; text-align: center; color:#fff;}
#sub-visual .visual-txt h1 {font-size:4.5rem;}
#sub-visual .visual-txt p {font-size:2.4rem; opacity:0.9;}
#admin #sub-visual {background-image: url('../images/sub_visual6.jpg');}
#admin #sub-visual .visual-txt h1 {font-size:3.6rem;}

/*관리자페이지*/
#admin #sub-visual.bg01 {background-image: url('../images/sub_visual7.jpg');}
#admin .container {display:flex; padding:70px 0; justify-content: center;}
#admin .container .lnb {
  width: 17%; 
  z-index: 2; 
  height: min-content;
  box-sizing: border-box;
  overflow: hidden;
  margin-right:3%;
  position: sticky;
  top: calc((var(--header-h, 0px)) + 106px);
}
#admin .container .contents {width:100%;}
#admin .lnb .member {border-radius:var(--radius);background:var(--bg-2);padding:20px;display:flex;margin-bottom:30px;align-items: center; }
#admin .lnb .member > strong {color:var(--title); font-weight:600; margin-right:8px;}
#admin .lnb > .depth1 {background:#fff; box-sizing: border-box;overflow: hidden; border-top: var(--line);}
#admin .lnb > .depth1 > li > h3 {display:flex; align-items: center; cursor: pointer;padding: 10px 0;font-size:1.7rem;color:var(--title);position: relative;border-bottom: var(--line);}
#admin .lnb > .depth1 > li > h3 > svg {margin-right:8px; fill:#767676;}
#admin .lnb > .depth1 > li > h3:after {
  content: '';
  display: block;
  width: 10px;
  height: 10px;
  border-right: 2px solid #8B8B8B;
  border-top: 2px solid #8B8B8B;
  position: absolute;
  top: 13px;
  right: 18px;
  transform: rotate(135deg);
}
#admin .lnb > .depth1 > li.on > h3 {color:var(--blue);background:#fff;border-bottom: 2px solid var(--blue);}
#admin .lnb > .depth1 > li.on > h3 > svg {fill:var(--blue);}
#admin .lnb > .depth1 > li.on > h3:after { top:19px; transform: rotate(318deg); border-color:var(--blue);}
#admin .lnb .depth2 { overflow: hidden; transition: max-height 300ms ease; max-height: 0;}
#admin .lnb .depth2.on {display:block;max-height: 168px;overflow-y:auto;padding: 15px  0;border-bottom:var(--line);opacity:1;}
#admin .lnb .depth2 li a {display:block;padding: 5px 14px;}
#admin .lnb .depth2 li:last-child a {border-bottom:0;}
#admin .lnb .depth2 li a:hover, #admin .lnb .depth2 li a.on {color:var(--darkblue);border-radius: 6px;background: #e9f2ff;}
.talk-set {display:flex;}
.talk-set .talk-box {width:27%;min-height:560px; height: 100%; margin-right:3%;background:#DAE3F3;border-radius:10px;box-sizing: border-box;padding:15px;}
.talk-set .talk-box .title {color: var(--title); margin-bottom:8px;}
.talk-set .talk-box .btn {min-width: 100%;margin: 0 0 15px 0;box-sizing: border-box;padding: 0;background: #fff;}
.talk-set .talk-box .btn li {width:100%;line-height: 33px;position:relative;color: var(--title);}
.talk-set .talk-box .btn li:before {content:''; display:block; width:1px; height:16px; background:#ddd; position: absolute; top:8px; right:0;}
.talk-set .talk-box .btn li:last-child:before {display:none;}
.talk-set .talk-box .cont .img {border-radius:50%;background:#fff;display:block;width:4.5rem;height:4.5rem;position: relative;margin-right:10px;overflow:hidden;float: left;}
.talk-set .talk-box .cont .img > img {position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);}
.talk-set .talk-box .cont dl > dt {color:var(--title); margin-bottom:8px;}
.talk-set .talk-box .cont dl > dd {border-radius:7px;background:#fff;width: 195px;height: 64px;overflow: hidden;}
.talk-set .talk-box .cont dl > dd > p {background:#F8CF63;padding: 5px 10px;font-weight: 600;color: var(--title);}
.talk-set .set-box {width:70%;}
.set-box {border:var(--line); border-radius: var(--radius); box-sizing: border-box; padding:30px;}
.set-box dl {display:flex; margin-bottom:10px;}
.set-box dl > dt {width:15%; font-weight:500; padding-top:10px;}
.set-box dl > dd {width:85%; display:flex; align-items: center;}
.set-box dl > dd > .btn {line-height:34px; margin-right:10px;}
.set-box dl > dd > input {margin:0 8px; width:15%; min-width:auto;}
.set-box dl > dd > input:first-child {margin-left:0; width:auto;}
.msg-list {display:flex;}
.msg-list li {width:100%; margin-right:30px;}
.msg-list li h3 {color:var(--darkblue); margin-bottom:10px;}
.msg-list li:last-child {margin-right:0;}
.msg-list .table-wrap {border-bottom:var(--line); min-height:246px;}
.msg-list li table {width:100%;}
.sub-head .date-select {margin-left:auto; width:auto; display:flex; align-items: center;}
.date-select .period-select {display:flex; gap:8px; margin:0 10px;}
.evaluation { border-radius: var(--radius); background:var(--darkblue); padding:16px; color:#fff; text-align: center;}
.evaluation p {display:block; font-size:1.8rem;}
.evaluation .img-sec {display:inline-block;}
.evaluation .cont {display:inline-block;}
.evaluation .cont .num {font-size:3rem;}
.evaluation .cont .num > span {font-size:2.2rem;}

/*콘텐츠 찾기 리스트*/
/* .result-wrap {position: relative;display: flex;}
.result-wrap .left-navi {width: 17%;z-index: 2;background:#fff;} */
.result-wrap .board-list {width: -webkit-fill-available;padding-left: 2%;}
.result-wrap { display:flex; align-items:flex-start; } /* 이미 있으니 유지 */
.result-wrap .left-navi { flex: 0 0 17%; z-index:1; background:#fff; }
.result-wrap .board-list { flex: 1 1 auto; min-width:0; padding-left:2%; }
.result-wrap .board-list.on {padding-left: 17%;}
.filter {display:block; width:100%; overflow: hidden; margin-bottom:30px;}
.filter > strong {float:left; color:var(--title); background:url('../images/filter_icon.png')no-repeat top 2px left; padding-left:25px;}
.filter > p {float:left; margin-left:6px;}
/*left-navi*/
/* .left-navi {height:min-content; border:var(--line); border-radius:var(--radius); box-sizing: border-box; overflow:hidden;} */
.left-navi {height:min-content; border:var(--line); border-radius:var(--radius); box-sizing: border-box; overflow:visible;}
.left-navi .depth1 > li > h3 {background:#f7f7f7;cursor: pointer;padding: 10px 18px;font-size:1.7rem;color:var(--title);position: relative;border-bottom: var(--line);}
.left-navi .depth1 > li > h3:after {
  content: '';
  display: block;
  width: 10px;
  height: 10px;
  border-right: 2px solid #8B8B8B;
  border-top: 2px solid #8B8B8B;
  position: absolute;
  top: 13px;
  right: 18px;
  transform: rotate(135deg);
}
.left-navi .depth1 > li.on > h3:after { top:19px; transform: rotate(318deg);}
/*.left-navi .depth2 {height:0; transition:.3s ease; opacity:0;}*/
.left-navi .depth2 { overflow: hidden; transition: max-height 300ms ease; max-height: 0;}
.left-navi .depth2.on {display:block;max-height: 139px;overflow-y:auto;padding:15px;border-bottom:var(--line);opacity:1;}
.left-navi .depth2 > li {border-bottom:1px solid #efefef; padding-bottom:8px; margin-bottom:8px;}
.left-navi .depth2 > li:last-child {border-bottom:0; margin-bottom:0; padding-bottom:0;}
.left-navi.fixed {position: fixed; top: 118px; z-index: 2;}
.left-navi .btn-area {margin:15px;}
.left-navi .btn-area > button {width:100%;}
.result-wrap .left-navi {position: sticky; top: calc( (var(--header-h, 0px)) + 106px );}

/*table-style*/
.table-style01 {border: var(--line);}
.table-style01 th {padding:8px; background:linear-gradient(#fff, #f5f5f5); border-bottom:var(--line); border-right:var(--line); font-weight:500; color:var(--title);}
.table-style01 th:last-child, .table-style01 td:last-child {border-right:0;}
.table-style01 td {text-align:center; border-bottom:var(--line);  border-right:var(--line); padding:8px;}
.table-style02 {border-top:1px solid #000;}
.table-style02 th {padding:8px; background:var(--bg-2); border-bottom:var(--line); font-weight:500; color:var(--title);}
.table-style02 th:last-child, .table-style02 td:last-child {border-right:0;}
.table-style02 td {text-align:center; border-bottom:var(--line); padding:8px;}

/*board-list basic*/
.board-list.basic table {width:100%; border-top:1px solid #000;}
.board-list.basic table#notice tr:hover {background:#eaf5ff;}
.board-list.basic table tr a {display: block;white-space: revert;width: 100%;height: 26px;text-overflow: ellipsis;overflow: hidden;}
.board-list.basic table tr a:hover {color:var(--darkblue); font-weight:500;}
.board-list.basic table th {padding:10px; background:#f7f7f7; border-bottom:1px solid #d7d7d7; font-weight:600; color:#1a1a1a;}
.board-list.basic table td {padding:10px; border-bottom:1px solid #d7d7d7; text-align:center; align-items: center;}
.board-list.basic table td button {display:inline-flex; align-items:center; justify-content:center; margin:0 auto; height:25px; padding:0; font-size: 1.6rem}
.board-list.basic table.border th, .board-list.basic table.border td {border-right:1px solid#d7d7d7;}
.board-list.basic table.border th:last-child, .board-list.basic table.border td:last-child {border-right:0;}
.board-list.basic table td.align-left {text-align:left;}
.board-list.basic table td.align-right {text-align:right;}
.board-list-top {display:block; margin-bottom:15px;}
.board-list-top p > span {font-weight:600; color:var(--blue);}
.table-btn {display:flex; justify-content: center;}
.table-btn a, .table-btn button {margin-left:10px;}
.status { border-radius: 30px; font-size: 1.4rem; font-weight: 600; padding: 3px 10px;}
.status.case-1 {border: 1px solid #ff3636;color: #ff3636;}
.status.case-2 {border: 1px solid #369aff;color: #369aff;}

/*gall-board*/
.gall-board {display:flex; flex-wrap:wrap; width:100%;}
.gall-board > li {width: calc(25% - 22.499px);margin-right:30px; margin-bottom:30px;}
.gall-board > li:nth-child(4n) {margin-right:0;}
.gall-board > li > a {
  height: 100%;
  background: #fff;
  border: var(--line);
  border-radius: var(--radius-lg);
  box-sizing: border-box;
  overflow: hidden;
  display: block;
  transition: .3s ease;
  position: relative;
}

.gall-board > li > a:before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  box-shadow: inset 0 0 0 0 var(--blue);
  border-radius: var(--radius-lg);
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  transition: .4s ease;
  pointer-events: none;
  z-index: 2;
}

.gall-board > li > a > .img-sec {
  border-radius: var(--radius-lg);
  overflow: hidden;
  width: 100%;
  height: 143px;
  position: relative;
}

.gall-board > li > a > .img-sec > img {
  width: 100%;
}

.gall-board > li > a > .img-sec > img {
  position: absolute;
  top: 0;
  left: 0;
  transition: 1s ease;
}
.gall-board > li > a:hover .board-subject {color:var(--darkblue);}
.gall-board > li > a:hover:before {opacity:1;  box-shadow: inset 0 0 0 3px  var(--blue);}
.gall-board > li > a:hover {border:1px solid #fff;}
.gall-board > li > a:hover .img-sec > img {transform: scale(1.2);}
.gall-board > li > a > .cont { padding: 25px; display: flex; flex-direction: column;}
.gall-board > li > a > .cont .ci {
  position: relative;
  border-radius: 50%;
  background: #fff;
  display: block;
  width: 55px;
  height: 55px;
  margin-top: -57px;
  margin-bottom: 5px;
  margin-left: auto;
}

.gall-board > li > a > .cont .ci > img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
}

/*board-view*/
.board-view .board-head {
    border-bottom: var(--line);
    border-top: 1px solid #000;
    padding: 20px 0;
}
.board-view .board-head h2 {color:var(--title);}
.board-info {
    padding: 15px;
    border-bottom: var(--line);
    display: flex;
    align-items: center;
}
.board-info li {margin-right:2%;}
.board-info .office {
    display: flex;
    align-items: center;
    margin-right: 2%;
}
.board-info .ci {
    display: block;
    width: 40px;
    height: 40px;
    background: #fff;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
    margin-right: 10px;
}
.board-info .ci > img {
    width: 90%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.board-info .hit {margin-right: 2%; background:url('../images/hit_icon_s.png')no-repeat top 5px left; padding-left:23px;}
.board-view .date {background: url('../images/date_icon.png')no-repeat top 2px left;padding-left: 21px;}
.board-view-cont {display: flex;  padding: 40px 20px 70px 20px;}
.board-view-cont .img-sec {margin-right: 3%;}
.board-view-cont .img-sec > img {border-radius: var(--radius-lg); overflow: hidden; }
.board-view-bottom {display:flex;border-top:var(--line);border-bottom:var(--line);padding:20px;align-items: center;}
.board-view-bottom .prev {margin-right:auto; text-align:left; display:flex;}
.board-view-bottom .next {margin-left:auto;text-align:right;display:flex;align-items: center;}
.board-view-bottom .page-arrow {font-size:0; display: block;width: 30px;position: relative;}
.board-view-bottom .page-arrow:before {content:'';display:block;width: 12px;height: 12px;position: absolute;top: 4px;left: 0;border-top: 2px solid #8b8b8b;border-left: 2px solid #8b8b8b;transform: rotate(
315deg);}
.board-view-bottom .page-arrow:after {content:'';display:block;width: 23px;height:2px;background:#8b8b8b;position: absolute;bottom: 42%;transform: translateY(-50%);}
.board-view-bottom .next .page-arrow:before {left:auto; right:7px; transform: rotate(135deg);}
.board-view-bottom .prev .page-arrow {margin-right:20px;}
.board-view-bottom .next .page-arrow {margin-left:20px;}
.board-view-bottom a:hover .page-arrow:before {border-color:var(--blue);}
.board-view-bottom a:hover .page-arrow:after {background:var(--blue);}
.board-view-bottom a:hover > p {color:var(--title);}
.view-cont-txt {width: 60%;}
.board-view .survey {display: flex;justify-content: center;}
.board-view .survey > button {
    border-radius: 30px;
    margin-right: 15px;
    width: 100%;
    max-width: 264px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.board-view .survey > button:hover {box-shadow: var(--boxshadow);}
.board-view .survey > button.on {background: var(--blue);}
.board-view .survey > button.on > p, .board-view .survey > button.on > strong {color:#fff;}
.board-view .survey > button p {margin: 0 7px 0 10px; font-size: 1.8rem; font-weight: 500; color: var(--title);}
.board-view .survey > button strong {font-size: 2.4rem;color: var(--blue);}
.comment-box { margin-top: 80px;}
.comment-box .total {margin-bottom: 15px;}
.comment-box .total p > b {color:var(--title); margin:0 4px;}
.comment-box .info {display:flex;align-items: center;margin-bottom: 10px;}
.user-profile {width:30px; height:30px; background:#B4BFD6; border-radius: 50%; overflow:hidden; position: relative; margin-right:10px;}
.user-profile > img {position: absolute; top:50%; left:50%; transform:translate(-50%, -50%);}
.comment-box .info > p {margin-right: 25px; font-weight:500; color:var(--title);}
.comment-box .info > .date {font-weight:400;color:#666;font-size: 1.5rem;}
.comment-box .reply .info .user-profile {background:#F1F3F8;}
.comment-box .reply .info .user-profile > img {width: 17px;}
.comment-box .comment-list {border-top:var(--line);}
.comment-box .comment-list > li {padding: 20px 0; border-bottom: var(--line); display: block; overflow: hidden;}
.comment-box .comment-list .comment-view { width: calc(100% - 133px); padding: 0 20px; display: inline-block;}
.comment-box .comment-list > li > a {float: right;}
.comment-box .comment-list .reply {
  display: block;
  width: 100%;
  clear: both;
  overflow: hidden;
  border-top: var(--line);
  padding: 20px 20px 0 20px;
  margin-top: 20px;
  position: relative;
}
.comment-box .comment-list .reply .comment-view {background:url('../images/reply_icon.png')no-repeat top left;padding-left: 26px;}
.comment-form {background:var(--bg-3);border-radius:var(--radius);padding:25px;box-sizing: border-box;margin-top: 30px;}
.comment-form textarea {border:0;background:none;min-height:90px;}
.comment-form .text-size {font-size: 1.4rem;}
.cont-list {display:block; margin:100px 0 60px 0;}
.cont-list:last-child {margin:0;}
#sub .new-contents .slide-button {justify-content: flex-end;}
#sub .new-contents .slide-button .swiper-button-prev,
#sub .new-contents .slide-button .swiper-button-next {margin-top: -94px;border:1px solid #d7d7d7;border-radius:50%;width: 38px;height: 38px;margin-right:0;}

/*board-write*/
.board-write {border-top:1px solid #000;}
.board-write dl {display:flex;align-items: center;border-bottom: var(--line);background: var(--bg-2);}
.board-write dl dt {width:15%;padding:10px;text-align: center;font-weight:500;color:var(--title);}
.board-write dl dd {width:85%;padding:10px;display:flex;background: #fff;}
.board-write .file {flex-direction: column;}
.board-write .file .info-box {background:#fff; border:2px dashed var(--lightblue); text-align: center; padding:15px; margin-bottom:15px;}
.board-write .file .info-box p {color:var(--blue);}
.board-write .li { display: flex; border-bottom: 1px solid #E1E1E1; padding-top: 10px; padding-bottom: 10px;}
.board-write div.tit { min-width: 100px;}
.board-write div.cont { width: 100%;}
.board-write div.cont > input { width: 100%;}
.board-write div.cont > div.radio-wrap > label.radio > input {margin-right: 10px;}

/*tabmenu*/
.tabmenu {width:100%; display:block; border-bottom:1px solid #d7d7d7; margin-bottom:30px; overflow:hidden;}
.tabmenu li {display:block;min-width: 112px;text-align: center;float:left;line-height:40px;padding:0 30px;border-radius:8px 8px 0 0;cursor: pointer;background: #f7f7f7;border: 1px solid #d7d7d7;border-bottom: 0;color: var(--darkgray);font-weight: 500;}
.tabmenu li.on {background:var(--darkgray);border: 1px solid var(--darkblue);color:#fff;}
.tab-cont {display:none;}
.tab-cont.on {display:block;}

/*paging*/
.paging{width: 100%;display:block;text-align:center; margin-top:25px; margin-bottom: 10px;}
.paging a{display:inline-block;width:32px;height:32px;line-height:32px;text-align: center;vertical-align: top;background: #fff;border: 1px solid #d7d7d7;border-radius: 6px;margin: 0 2px;overflow: hidden;}
.paging a.on {display:inline-block;width:32px;height:32px;line-height:32px;color: var(--blue);font-weight:bold;position:relative;}
.paging a.on:after {content:'';display:block;width:100%;height:2px;background:var(--blue);position:absolute;bottom: 0px;left:0;}
.paging a.on:hover {color: var(--blue);}
.paging a:hover {background:#f7f7f7; color:#000;}
.paging .page-arr {position:relative; width:32px; height:32px;}
.paging .page-arr img {position:absolute;top: 10px;left: 9px;}
.paging .page-arr.next img {transform: rotate(180deg);top: 9px;left: 12px;}
.paging .page-arr.end img {transform: rotate(180deg);top: 9px;left: 10px;}
.view-paging {display:flex; justify-content: center; align-items: center; margin-top:20px;}
.view-paging span {margin:0 10px;}
.page-btn {
    width: 32px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    vertical-align: top;
    background: #fff;
    border: 1px solid #d7d7d7;
    border-radius: 6px;
    margin: 0 2px;
    overflow: hidden;
}
.page-btn.next > img {transform:rotate(180deg);}

/*기관/키워드*/
.company-info {display:flex;width: 100%;border-top:1px solid #000;border-bottom: var(--line);padding: 30px;align-items: center; box-sizing: border-box;}
.company-info .ci-img {width: 15%;margin-right: 3%;}
.company-info dl {width: 48%;margin-right: 2%;}
.company-info dl dt {font-size: 2.8rem; font-weight: 600; color: var(--title);}
.company-info .btn-area {margin-top: 0;width: 28%;margin-left: auto;}
.company-info .btn-area a {width:50%;max-width: 184px;}
.category-detail {display:flex;width: 100%;}
.category-detail li {width:20%; margin-right:2%; border-radius:var(--radius); background:var(--bg-2); text-align: center; box-sizing: border-box; padding:30px;}
.category-detail li:last-child {margin-right:0;}
.category-detail li .img {margin-bottom:18px; height:73px;}
.category-detail li .cont {margin-bottom:20px;}
.category-detail li .cont > strong {font-size:2.3rem; color:var(--title); margin-bottom:10px;}
.category-detail li > button {line-height: 38px;background:var(--darkgray);color:#fff;margin: 0 auto 10px;}
.category-detail li > .bookmark-toggle.on {background:var(--darkblue);}
.contents-list {display:flex;border-top: 1px solid #000;}
.contents-list dl {width:100%;border-right:var(--line);}
.contents-list dl:last-child {border-right:0;}
.contents-list dl > dt {background:#f7f7f7; text-align:center; color:var(--title); font-weight: 600; padding: 10px; border-bottom:var(--line);}
.contents-list dl > dd {text-align:center;padding: 10px;min-height: 42px;line-height: 42px;border-bottom:var(--line);}
.contents-list dl > dd > select {width:100%;}
.keyword-select {width:100%; border:var(--line); border-radius: var(--radius); padding:25px; box-sizing: border-box;}
.keyword-select ul {overflow-y:auto; height:170px;}
.keyword-select ul li {display:flex;float: left;cursor:pointer;width: calc(14.4% - 11px);border: 1px solid #d7d7d7;border-radius: 8px;margin-right: 15px;margin-bottom:10px;background:#f7f7f7;padding: 11px;align-items: center;}
.keyword-select ul li p {font-weight:500; color:var(--title);}
.keyword-select ul li p::before {content:'#';}
.keyword-select .chkBox {display:block;margin-left:auto;font-size:0;width: 20px;height: 20px;background:#a1a3ac;border-radius:4px;position:relative;}
.keyword-select .chkBox:before {content:'';display:block;width: 9px;height: 4px;border-top:2px solid #fff;border-right:2px solid #fff;position:absolute;top: 5px;left: 5px;transform: rotate(134deg);}
.keyword-select ul li.check .chkBox {background:var(--blue);}
.join-icon {margin-top:auto; margin-bottom:auto; margin-right:1.5%;}



/*통계 보고서*/
.sub-statistics {display:flex;}
.sub-statistics li {display:flex;flex-wrap:wrap;width:100%;min-height: 226px;margin-right:2%;background:var(--bg-2);box-sizing: border-box;border-radius: var(--radius);padding:30px;}
.sub-statistics li:nth-child(4n) {margin-right:0;}
.sub-statistics.cols-6 li {padding:25px;}
.sub-statistics.cols-6 li:nth-child(4n) {margin-right:2%;}
.sub-statistics.cols-6 li:last-child {margin-right:0;}
.sub-statistics.cols-6 li > p {font-size:2rem;}
.sub-statistics li > p {font-size:2.4rem; color:#575757;}
.sub-statistics .img-sec { margin-left:auto;}
.sub-statistics .cont {display:flex;width:100%;border-top:1px solid #d7d7d7;padding-top:30px;margin-top: 30px;align-items: end;}
.sub-statistics .cont .num {margin-right:auto; color:var(--title);}
.sub-statistics .cont .num > strong {font-size:4.3rem;}
.sub-statistics .cont .num > span {font-size:2.4rem; margin-left:5px;}
.sub-statistics .cont > i {margin-left:auto; display:block; line-height:24px; background:#fff; border-radius:var(--radius-lg); padding:0 15px; font-weight:500;}
.sub-statistics .cont > i > .down {color:#FF5050;}
.sub-statistics .cont > i > .up {color:#0CA740;}
.sub-statistics .cont > i > .up:before {content:'▲'; font-size:1.3rem; margin-right:6px;}
.sub-statistics .cont > i > .down:before {content:'▼'; font-size:1.3rem; margin-right:6px;}

.sub-statistics.admin li {padding:25px; text-align: center;}
.sub-statistics.admin li:nth-child(4n) {margin-right:2%;}
.sub-statistics.admin li:nth-child(5) {margin-right:0;}
.sub-statistics.admin li.best {background:#fff; background:var(--darkblue); box-shadow: var(--boxshadow_dark);}
.sub-statistics.admin li.best p,
.sub-statistics.admin li.best strong,
.sub-statistics.admin li.best .num > span {color:#fff;}
.sub-statistics.admin li > p {width:100%; font-size:1.8rem; font-weight:500; margin-bottom:10px;}
.sub-statistics.admin .img-sec {margin:0 auto;}
.sub-statistics.admin .cont {border-top:0;margin: 0;padding:0;flex-direction: column; align-items: center;}
.sub-statistics.admin .cont .num {margin: 10px auto 0;}
.sub-statistics.admin .cont .num > strong {font-size:3.4rem;}
.sub-statistics.admin .cont > p {margin-top:8px;}

.rank-board-list {border-top:var(--line);}
.rank-board-list > li {display:block;}
.rank-board-list > li > a {display:flex;padding:30px;border-bottom: var(--line);}
.rank-board-list > li > a:hover {background:var(--bg-3);}
.rank-board-list > li > a:hover .img-sec > img { transform: scale(1.2);}
.rank-board-list > li .board-info {border:0; padding:0;}
.rank-board-list > li .list-cont {width: 77%; margin-right: 3%;}
.rank-board-list > li .list-cont h3 {display:block; font-size:2.4rem; font-weight:600; color:var(--title); margin-bottom:10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width:100%}
.rank-board-list > li > a:hover .list-cont h3 {color:var(--darkblue);}
.list-cont-txt {
  max-height: 46px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  line-height: 1.5;
  word-wrap: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin-bottom:30px;
}
.rank-board-list > li .img-sec {border-radius: var(--radius-lg);overflow: hidden;width: 20%;position: relative;}
.rank-board-list > li .img-sec > img {position: absolute;top: 0;left: 0;transition:1s ease;height: -webkit-fill-available;}
.rank-board-list > li .rank-img {margin:-30px 0 15px 0;}
.graph-box {border:var(--line); border-radius:var(--radius); box-sizing: border-box; padding:30px;}
.graph-box.flex {display:flex;}
.stats-box {display:flex; width:100%;}
.stats-box li {width:100%; margin-left:2%;}
.stats-box li .cols {background:#f7f7f7;border-radius: var(--radius);padding:20px;box-sizing: border-box;margin-bottom: 20px;}
.stats-box li .cols .title {background:#fff; border-radius:10px; padding:10px 15px; display:block; overflow: hidden;}
.stats-box li .cols .title p {float:left;font-size:2rem;font-weight:500;color:var(--title);position: relative;padding-left: 23px;}
.stats-box li .cols .title p > i {display:block;width:14px;height:14px;border-radius:50%;position: absolute;top: 8px;left: 0;}
.stats-box li .cols .title strong {float:right; font-size:2.7rem; color:var(--title);}
.stats-box li .cols .title strong > span {font-size:2rem;}
.stats-box li .list {margin-top:20px;}
.stats-box li .list dl {display:block; border-bottom:var(--line); overflow:hidden; padding:10px 0; color:var(--title);}
.stats-box li .list dl:last-child {border-bottom:0; padding-bottom:0;}
.stats-box li .list dl > dt {float:left;}
.stats-box li .list dl > dd {float:right; font-weight:600;}
.flex-cols-2 {display:flex; align-items: center}
.flex-cols-2 > div {margin-right:3%;}
.flex-cols-2 > div:last-child {margin-right:0;margin-bottom: 0;}
.solid-box {border: 2px solid #E1E1E1; border-radius:10px; padding:25px; height:300px; overflow-y:auto; text-align: center; min-height: 300px;}
.gradient-box {background:linear-gradient(#6AB5FC, #718CFF); padding:25px; height:300px; border-radius:var(--radius); }
.keyword-list li {display:inline-block; margin:0 4px 10px 0; padding:2px 15px; font-weight:500; color:var(--blue); background:var(--skyblue); border-radius:var(--radius); }
.keyword-list li:before {content:'#'; display:inline-block;}
.keyword-list2 li {display: flex;width:68px;height:68px;text-align:center;background:#fff;border-radius:50%;align-items: center;justify-content: center;font-size: 1.4rem;}
.keyword-list2 li > span {color:var(--blue); font-weight:500;}
.keyword-list2 li > span:before {content:'#'; display:inline-block;}
.keyword-list2 li:nth-child(2n) {transform:scale(1.5);}
.keyword-list2 li:nth-child(3n) {transform:scale(1.2);}
.contents-top5 {margin-top: 28px;}
.contents-top5 > li {display:block; margin-bottom:15px;}
.contents-top5 > li > a {display:flex;background: var(--bg-2);border-radius: var(--radius);padding: 15px 30px;align-items: center; min-height: 51px;}
.contents-top5 > li:first-child > a {background:#fff;border: 2px solid var(--blue);box-shadow: var(--boxshadow);}
.contents-top5 .medal {margin-right: 3%;width: 33px;text-align: center;}
.contents-top5 .top .medal{margin-top: -24px;}
.contents-top5 .medal strong {padding-top: 14px;font-size: 3rem;font-weight: 600;color: #b7b7b7;}
.contents-top5 .title {width: 70%;margin-right: 4%;}
.contents-top5 .title strong {font-size: 2rem;font-weight: 550;color: var(--title);width: 99%;display: block;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;}
.contents-top5 .top .hit, .contents-top5 .top .rank {text-align:center;margin-left: 3%;}
.contents-top5 .top .hit p {display:block;}
.contents-top5 .top .hit strong {font-size:2.2rem; font-weight:700;}
.contents-top5 .top .rank p {display:block;margin-left: 0;}
.contents-top5 .top .rank strong {font-size:2.2rem; font-weight:700; color:var(--blue);}
.contents-top5 .hit p {display: inline-block; margin-right: 2px;}
.contents-top5 .hit strong { color: var(--title); font-weight:500;}
.contents-top5 .rank p {display: inline-block; margin-left: 10px;}
.contents-top5 .rank strong {color: var(--title); font-weight:500;}
.evaluate p {display:block; margin-bottom:20px; font-size:1.7rem;}
.evaluate p > strong {font-size:2rem; color:var(--blue);}
.evaluate ul {display:flex;}
.evaluate ul > li {width:50%; display:flex; align-items: center;}
.evaluate ul > li i {width: 80px;text-align: center;}
.evaluate ul > li strong {font-size:2rem; color:var(--title);}
.evaluate ul > li.like strong {margin: 0 3% 0 0;}
.evaluate ul > li.dislike strong {margin: 0 0 0 3%;}
.evaluate ul > li .bar {display:block;width:100%;height: 14px;border-radius: 30px;background:#ddd;position:relative;overflow:hidden;}
.evaluate ul > li .bar >  span {animation: bareffect 1.5s; transition:1s ease;}
@keyframes bareffect { 0% {width:0;} 50% {width:0%};}
.evaluate ul > li.like .bar > span {display:block;height:100%;background:var(--blue);position:absolute;top:0;right:0;border-radius: 30px;}
.evaluate ul > li.dislike .bar > span {display:block;height:100%;background:#ff6767;position:absolute;top:0;left:0;border-radius: 30px;}
.bar-graph {margin-left:10px; margin-right: 10px;}
.bar-graph li {display:block; margin-bottom:20px;}
.bar-graph li:last-child {margin-bottom:0;}
.bar-graph li a {display:flex;align-items: center;}
.bar-graph li a .tit {max-width: 22%; min-width: 22%; display: flex; color: var(--title);}
.bar-graph li a .tit span { font-weight: 700; margin-right: 10px;}
.bar-graph li a .tit p {font-weight:500;display:block;white-space:nowrap;width:100%;overflow: hidden;text-overflow: ellipsis; text-align: left;}
.bar-graph li .bar {display:block; max-width: 70%; min-width: 70%;height: 14px;border-radius: 30px;background:#ddd;position:relative;overflow:hidden;margin-right: 2%;}
.bar-graph li .bar > span {display:block;height:100%;background:var(--gradient); position:absolute;top:0;left:0;border-radius: 30px;}
.bar-graph li strong {color:var(--blue);margin-left: auto;}
.bar-graph.small {padding:20px; border:var(--line); border-radius:var(--radius);}
.bar-graph.small li a .tit {width:15%;}
.bar-graph.small li .bar {width:75%;}
.bar-graph.small li .bar > span {background:linear-gradient(91deg,#33C1B7 0%, #009ca1 100%);}
.bar-graph.small li strong {color:var(--mint);}
.cal-head {display:block;margin: 0 auto 6px;font-size:2.2rem;text-align:center;color: var(--title);}
.calendar {text-align: center; max-width:303px; margin:0 auto; }
.calendar li {display:inline-block;width: 13%;margin-right: 2%;max-width: 30px;height: 30px;background: var(--bg-2);vertical-align: top;margin-top: 10px;border-radius: 50%;cursor: pointer;}
.calendar li:nth-child(7n) {margin-right:0;}
.calendar li.head {color: var(--text);font-weight:600;height: auto;background: none;}
.calendar li .tooltip {display:none;background:var(--darkblue); color:#fff; border-radius: 9px;padding: 0 10px;width: 57px;position: absolute;margin-left: -20px;box-shadow: 3px 3px 4px 0 rgba(0, 0, 0, 0.2);}
.calendar li .tooltip.on {display:block;}
.calendar li p {font-size:1.4rem; font-weight:500; margin-top:5px;}
.calendar li.day-w {background:var(--red); color:#fff;}
.calendar li.day-h {background:var(--mint); color:#fff;}
.calendar li.day-y {background:var(--yellow); color:#fff;}

/*회원가입*/
.regist {background:var(--bg-2);}
.regist .container {padding:80px 0;}
.regist-box {max-width: 600px; background:#fff; border-radius:var(--radius); margin:0 auto; padding:50px 30px; box-shadow: 0 5px 0 0px #d2d7e3;}
.regist-box.bg-none {background:none; box-shadow:none; padding:0;}
.join_select {display:flex;justify-content: center;margin-bottom:35px;gap: 20px;}
.join_select li {width:100%; text-align:center;}
.join_select li > a {display: flex;width: 100%;max-width: 135px;height: 135px;justify-content: center;flex-direction: column;background: #fff; border-radius: var(--radius-lg); box-shadow: 0 3px 0 0px #d2d7e3;}
.join_select li > a .img {margin-bottom:15px;}
.join_select li > a > p {font-weight:500; color:var(--title);}
.join_select li > button {display: flex;width: 100%;max-width: 135px;height: 135px;justify-content: center;flex-direction: column;background: #fff; border-radius: var(--radius-lg); box-shadow: 0 3px 0 0px #d2d7e3;}
.join_select li > button .img {margin-bottom:15px;}
.join_select li > button > p {font-weight:500; color:var(--title);}
.regist-box .info-txt {text-align: center;}
.regist-box .info-txt p {margin-bottom:20px; font-size:1.9rem; font-weight:600; color:var(--title);}
.regist-box .info-txt .btn {max-width:180px; margin:0 auto;}
.member_sel {display:flex; justify-content: center; gap:30px; max-width:850px; margin:0 auto;}
.member_sel li {width:100%;padding: 50px 30px;background: #fff;border:3px solid #fff;border-radius: var(--radius-lg);box-sizing:border-box;text-align:center;transition:.5s ease;box-shadow: 0 3px 0 0px #d2d7e3;}
.member_sel li:hover {border:3px solid var(--blue);}
.member_sel li .img {margin-bottom: 25px;}
.member_sel li strong {font-size: 2.5rem;font-weight: 600;color: var(--title);}
.member_sel li strong:after {content:''; display:block; margin:10px auto 10px; width:25px; height:1px; background:#ccc;}
.member_sel li p {font-size: 1.7rem;}
.member_sel li p > span {font-size:1.7rem; color:var(--blue);}
.member_sel li .btn {width:100%;max-width: 220px;display: block;line-height: 50px;text-align: center;margin: 30px auto 0;font-size: 1.9rem;font-weight: 500;color: #fff;background: var(--blue);border-radius: 8px;}
.member_sel dl {display:flex; justify-content: center; margin-bottom:8px;}
.member_sel dl dt {font-weight:500; color:var(--darkblue); padding-right:10px; position:relative;}
.terms-cont {border:var(--line); background:#fff; border-radius:var(--radius); overflow:hidden;  padding:20px;}
.terms-cont .title {display:block; margin-bottom:20px; font-size:2rem; font-weight:600; color:var(--darkblue); border-bottom:var(--line); padding-bottom:10px; margin-bottom:20px; position:relative;}
.terms-cont .title:before {content:''; display:block; width:70px; height:1px; background:var(--darkblue); position:absolute; bottom:-1px; left:0;}
.terms-cont .cont-txt {height:auto;}
.agree {margin-top:15px;}
.agree .chk-box input[type="checkbox"] + label {color:var(--title);}
.join-form .btn {line-height:41px;}
.join-form dl {display:block; margin-bottom:15px;}
.join-form dl dt {display:block; font-size:1.8rem; font-weight:500; color:var(--title); margin-bottom:8px;}
.join-form dl dd {display:flex; flex-wrap:wrap; gap:10px; align-items: center;}
.phone-num {display:flex;  width:100%; align-items: center; gap:7px;}
.phone-num input[type="text"] {width:22%; min-width:auto;}
.phone-num a {width:16%;}
.phone-chk {display:flex;  width:100%; align-items: center; gap:7px;}
.phone-chk input[type="text"] {width:70%;}
.phone-chk a {width:17%;}
.email-form {display:flex;  width:100%; align-items: center; gap:7px;}
.email-form input[type="text"] {width:33%; min-width:auto;}
.email-form a {width:16%; min-width: 100px; white-space: nowrap;}
.email-chk {display:flex;  width:100%; align-items: center; gap:7px;}
.email-chk input[type="text"] {width:70%;}
.email-chk a {width:17%; min-width: 100px; white-space: nowrap;}
.form-area dl.cols-3 {display:flex;}
.form-area dl {display:flex; align-items: center; margin-bottom:15px;}
.form-area dl > dt {font-size:1.7rem; font-weight:500; color:var(--title); margin-right:15px; width:10%;}
.form-area dl > dd {width:90%;}
.form-area dl.cols-3 > dd {width:auto; margin-right:2%;}
.form-area dl.cols-3 > dd:last-child {margin-right:0;}

/*mapage*/
.mypage {max-width: 600px;background:var(--bg-2);margin:0 auto;padding:35px 3%;border-radius: var(--radius);box-shadow: 0 5px 0 0px #d2d7e3;}
.mypage .sub-title h2 {text-align: center; margin:0 auto;}
.mypage-form {display:flex; flex-wrap:wrap; }
.mypage-form dl {display:flex;align-items: center;width: 100%; margin-bottom: 20px;background:#fff;border: 1px solid #e2e6f1;border-radius:8px;padding: 5px 15px;}
.mypage-form dl:nth-child(2n) {margin-right:0;}
.mypage-form dl:last-child {margin-bottom:0; min-height: 50px; height: 100%;}
.mypage-form dl > dt {width: 23%;margin-right: 13px;border-right: 1px solid #ddd;}
.mypage-form dl > dt > i {margin-right:4px;}
.mypage-form dl > dd {width: calc(100% - 26%);}
.mypage-form dl > dd > div {display:flex}
/* .mypage-form dl > dd > div.phone-group > input[type="text"] {max-width: calc(100% - 80%); min-width: 100px;} */

/*button style*/
button {border:0; font-family:inherit;}
.btn {font-size: 1.7rem;display:flex;min-width: 83px;line-height: 45px;border-radius:10px;border:none;font-weight:500;text-align:center;padding:0 20px;transition:.2s ease;align-items: center;justify-content: center;} 
.btn > i {display:inline-block;}
.btn > i > img {margin-left: 10px;display: block;}
.btn > svg {margin-right:6px;}
.btn-xs {display:block;width: 34px;width: min-content!important;height: 34px!important;line-height: 34px;transition:.4s ease;font-size: 1.5rem;border-radius:5px;}
.btn-s {min-width: min-content;line-height: 34px; font-size: 1.5rem; }
.outline-btn {background:#fff; border:1px solid #54607B; border-radius:8px; color: #54607B;}
.outline-btn  > svg {fill:#54607B;}
.outline-btn:hover {background:#54607B; color:#fff;}
.outline-btn:hover > svg {fill:#fff;}
.outline-btn.blue {border:1px solid var(--blue); color:var(--blue);}
.outline-btn.blue > svg {fill:var(--blue);height: 20px;}
.outline-btn.blue:hover {background:var(--blue); color:#fff;}
.outline-btn.blue:hover > svg {fill:#fff;}
.outline-btn.red {border:1px solid var(--red); color:var(--red);}
.outline-btn.red > svg {fill:var(--red);height: 20px;}
.outline-btn.red:hover {background:var(--red); color:#fff;}
.outline-btn.red:hover > svg {fill:#fff;}
.gray-btn {background:#54607B;  color:#fff;}
.gray-btn:hover {background:#003b72; color:#fff!important;}
.blue-btn {background:var(--blue); color:#fff;}
.blue-btn:hover {background:#1148ad;}
.d-blue-btn {background:var(--darkblue); color:#fff;}
.d-blue-btn:hover {background:var(--blue);}
.blue-btn > svg, .gray-btn > svg, .d-blue-btn > svg {fill:#fff;}
.more-icon {position:relative; display:block; border-radius:50%; background:url('../images/more-arrow-w.png')no-repeat center #000; border:1px solid #000;; width:42px; height:42px; transition:.3s ease;  font-size:0;}
.more-icon:hover {background:url('../images/more-arrow-w.png')no-repeat center var(--blue); border:1px solid var(--blue);}
.btn-area {display:flex; margin-top:30px;}
.btn-area a, .btn-area button {margin-right:10px;}
.btn-area a:last-child, .btn-area button:last-child {margin-right:0;}
.btn-area.center {justify-content: center;}
.btn-area .right {margin-left:auto;}
.close-icon {display:block;width: 25px;height: 25px;position: relative;font-size: 0;}
.close-icon:before {content:'';display:block;width:100%;height:2px;background: #9799a7;transform:rotate(45deg);position: absolute;top: 10px;right: 0;}
.close-icon:after {content:'';display:block;width:100%;height:2px;background: #9799a7;transform: rotate(
320deg);position: absolute;top: 10px;right: 0;}

/*layerPopup*/
.layerPopup {
    /* display: none; */
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.6);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99;
}
.layerPopup .popup-title {display:flex;margin-bottom: 19px; justify-content: space-between;}
.layerPopup .popup-title h2 {margin-right:auto;color:#1a1a1a;font-size: 2.8rem;}
.layerPopup .popup-box .popup-title .close-btn  {position:relative;margin-left:auto;font-size:0;display:block;width: 30px;height: 30px;background:none;}
.layerPopup .popup-box .popup-title .close-btn:before {content:'';width: 2px;height:100%;position: absolute;top: 3px;right: 9px;transform: rotate(45deg);background: #a1a1a1;}
.layerPopup .popup-box .popup-title .close-btn:after {content:'';width: 2px;height:100%;position: absolute;top: 3px;right: 9px;transform: rotate(315deg);background: #a1a1a1;}
.layerPopup .popup-box {
    width:90%;
    max-width: 800px;
    height: 650px;
    background: #fff;
    border-radius: 10px;
    padding: 25px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-sizing: border-box;
}
.layerPopup .popup-box.xs {max-width:400px;height: 333px;}
.layerPopup .popup-cont {height: 459px;overflow-y:auto;
   /* display: flex; justify-content: center; align-items: center; */
  } 
.layerPopup .popup-box.xs .popup-cont {height: 157px;}
.layerPopup .popup-box.xs textarea {min-height: 97px;}
.layerPopup .btn-area {margin-top:20px;}

/*footer*/
#footer {width:100%; background:#fff; position: relative;}
#footer .footer-menu {background:#4E515E; padding:15px 0;}
#footer .footer-menu ul {max-width: var(--container); margin:0 auto;}
#footer .footer-menu ul > li {display:inline-block;}
#footer .footer-menu ul > li > a {color:#fff; padding-right:25px; position:relative;}
#footer .footer-menu ul > li > a.point {color:var(--lightblue);}
#footer .footer-menu ul > li > a:after {content:'';display:block;width:1px;height: 12px;background:#9E9E9E;position:absolute;top: 4px;right: 9px;}
#footer .footer-menu ul > li:last-child > a:after {display:none;}
#footer .container {padding:45px 0; display:flex;}
#footer h1 {margin-right:2%; width:15%; max-width:164px;}
#footer .footer-cont {width:83%}
#footer .footer-cont li {display:inline-block; padding-right:20px; position: relative; margin-bottom:6px;}
#footer .footer-cont li:after {content:''; display:block; width:1px; height:11px; background:#d7d7d7; position:absolute; top:6px; right:7px;}
#footer .footer-cont li:nth-child(3):after, #footer .footer-cont li:last-child:after {display:none;}
#footer .footer-cont li.copyright {display:block;}

/*checkbox style*/
.chk-box {margin-right:8px;}
.chk-box input[type="checkbox"] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.chk-box input[type="checkbox"] + label {
	display: inline-block;
	position: relative;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	color: #666;
	font-size: 1.6rem;
	margin: 0;
}

.chk-box input[type="checkbox"] + label:before {
	content: ' ';
	display: inline-block;
	width: 16px;
	height: 16px;
	text-align: center;
	vertical-align: middle;
	background: #fff;
	border: 1px solid #a1a1a1;
	margin: 0 4px 2px 0;
	border-radius:3px;
}
.chk-box input[type="checkbox"] + label:active:before,
.chk-box input[type="checkbox"]:checked + label:active:before { box-shadow: 0px 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);}
.chk-box input[type="checkbox"]:checked + label:before {
	content: '';
	color: #ffffff;
	text-shadow: 1px 1px white;
	background: url('../images/chk_icon.png')no-repeat center var(--blue);
	border: 1px solid var(--blue);
}
.chk-box input[type="checkbox"]:checked + label {color:var(--blue);}
.chk-box input[type="checkbox"]:disabled + label:before,
.chk-box input[type="checkbox"]:disabled + label:active:before, 
.chk-box input[type="checkbox"]:disabled:checked + label:active:before {background:#e1e1e1!important;}

/*radio button style*/
.radio-btn {margin-right:8px;}
.radio-btn input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.radio-btn input[type="radio"] + label {
	display: inline-block;
	position: relative;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	color: #666;
	margin: 0;
}

.radio-btn input[type="radio"] + label:before {
	content: ' ';
	display: inline-block;
	width: 16px;
	height: 16px;
	text-align: center;
	vertical-align: middle;
	background: #fff;
	border: 1px solid #a1a1a1;
	margin: 0 4px 3px 0;
	border-radius:50%;
}
.radio-btn input[type="radio"] + label:active:before,
.radio-btn input[type="radio"]:checked + label:active:before { box-shadow: 0px 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);}
.radio-btn input[type="radio"]:checked + label:before {
	content: '';
	color: #fff;
	text-shadow: 1px 1px white;
	background:var(--blue);
	border: 1px solid var(--blue);
}
.radio-btn input[type="radio"] + label:after {
	content: ' ';
	display: none;
	width: 16px;
	height: 16px;
	border-radius:50%;
	position:absolute;
	top: 2.5px;
	left: 0;
  background:#fff;
  box-shadow:inset 0 0 0 4px var(--blue);
  border: 1px solid var(--blue);
}
.radio-btn input[type="radio"]:checked + label:after {background:#fff;display: block;}
.radio-btn input[type="radio"]:checked + label {color:var(--blue)}
.radio-btn input[type="radio"]:disabled + label:before,
.radio-btn input[type="radio"]:disabled + label:active:before, 
.radio-btn input[type="radio"]:disabled:checked + label:active:before {background:#e1e1e1!important;}

/*servie*/
.servie-step {display:flex; position:relative; overflow: hidden;} 
.servie-step:before {content:'';display:block;width:100%;height: 9px;background:#ddd;border-radius:var(--radius-lg);position:absolute;top:0;left:0;overflow: hidden;}
.servie-step li {width:100%; position: relative;}
.servie-step li > span {display:block;height: 9px;background:var(--gradient);position:absolute;border-radius: var(--radius-lg);}
.servie-step li > a {width: 50%; margin: 32px auto;}
.servie-step li.none > a {color:var(--gray); border:var(--line);}
.servie-step li.none > a > svg, .servie-step li.none > a:hover > svg {fill:var(--gray);}
.servie-step li.none > a:hover {background:none; color:var(--gray);}

/*data-grid*/
table#data-grid > thead > tr> th {background: #F9FAFB; color: #111827; font-weight: 600; padding: 12px 16px; border-bottom: 1px solid #E5E7EB;}  
table#data-grid > tbody > tr> td {padding: 12px 16px; border-bottom: 1px solid #F1F5F9; cursor: text;}  

/********************************************  RESPONSIVE ********************************************/
@media all and (max-width:1600px) {
  /** MAIN **/
  #main > section {padding:110px 3%;}
  #main .section-1 {padding: 140px 3% 70px 3%;}
  #main .section-1 .left {width: 30%;margin-right: 3%;}
  #main .section-1 .right {width: 70%;}
  #main .section-1 .visual-txt .pc-only {display:none;}
  #service .img-sec {width:40%;}
  #service  .pc-only {display:block;}
  .login-box {padding:20px;}

  /*header*/
  #header .logo, #header .utill-menu {padding-left:3%;}

  /*footer*/
  #footer .footer-menu {padding:15px 3%;}
  #footer .container {padding:40px 3%;}

  /** SUB **/
  #sub > .container {padding:90px 3%;}
  #admin .container {padding:70px 3%;} 

  /*관리자페이지*/
  #admin .sub-head {flex-wrap:wrap; margin-bottom:20px; flex-direction: row;}
  .sub-head .date-select {width:100%; margin-left:0; margin-top:15px; }
  .sub-head .date-select input[type="date"] {width:auto;}

}

.subscribe-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-left: 5px;
  background: transparent;
  border: none;
  cursor: pointer;
}

.subscribe-btn svg {
  width: 30px;
  height: 30px;
  fill: #666;
  transition: fill 0.2s ease;
}

.subscribe-btn:hover svg {
  fill: #000;
}

.sub-head .date-select input[type="date"] {
        width: auto;
}
  
@media all and (max-width:1366px) {
  .pc-only {display:none;}
  /* header */
  .sec-header {display:none;}
  .mobile-header {display:block;height: 7rem;position: fixed;width: 100%;z-index: 2;background: #fff;border-bottom: var(--line);}
  .mobile-header .logo {top:50%;left: 3%;position:absolute;transform:translateY(-50%);width: 65%;max-width: 200px;}
  .mobile-header .login-menu {
      display: flex;
      width: 110px;
      height: 40px;
      background: #5c6065;
      margin: 20px;
      border-radius: 8px;
      justify-content: center;
      align-items: center;
      gap: 6px;
  }
  .mobile-header .login-menu > img {width:20px;}
  .mobile-header .login-menu > p {color:#fff;}
  .mobile-header .mb-gnb.on {opacity: 1; visibility: visible; z-index: 3; right: 0;}
  .mb_menu {position:relative;width: 3.2rem;height: 2.5rem;float:right;cursor:pointer;margin-top: 2.2rem;margin-right: 3%;}
  .mb_menu span {position:absolute;top:0px;left:0px;display:block;width: 100%;height:2px;background: #676767;transition:.4s ease;}
  .mb_menu span:nth-child(2) {top: 47%;}
  .mb_menu span:nth-child(3) {bottom: 0;top: auto;}
  .mb_menu.on {height: 2.2rem;margin-top: 1.5rem;}
  .mb_menu.on span {left: 0;top:15px;transform: rotate(45deg);}
  .mb_menu.on span:nth-child(2) {display:none;}
  .mb_menu.on span:nth-child(3) {transform: rotate(137deg);}
  .mobile-header .mb-gnb {
    position: fixed;
    top: 7.2rem;
    right: -100%;
    width:90%;
    max-width: 400px;
    height: 100vh;
    background: #f7f7f7;
    border-left: var(--line);
    overflow-y: auto;
    z-index: 3;
    visibility: hidden;
    opacity: 0;
    transition: all 0.2s ease;
  }
  .mobile-header .push-btn {background: none; position: absolute;top: 57%;right: 93px; transform: translateY(-50%);}
  .mobile-header .push-btn > svg {fill:#676767;}
  .mb-gnb > .nav {border-top:1px solid #ddd;height: 100%;overflow-y: auto;}
  .mb-gnb > .nav > li > a {display:block;padding: 10px 4%;font-size: 2rem;font-weight: 600;border-bottom: 1px solid #ddd;color: var(--title);position:relative;}
  .mb-gnb > .nav > li > a:before {
    content: '';
    display: block;
    width: 9px;
    height: 9px;
    border-right: 2px solid #7d7d7d;
    border-top: 2px solid #7d7d7d;
    position: absolute;
    top: 11px;
    right: 6%;
    transform: rotate(135deg);
  }
  .mb-gnb > .nav > li > a.on:before { transform: rotate(315deg); top:17px; border-right: 2px solid #fff; border-top: 2px solid #fff;}
  .mb-gnb > .nav > li > a.on {color:#fff; font-weight:500; background:var(--blue);}
  .mb-gnb > .nav > li > .depth2 {display: none;padding:10px 5%;background: #fff;border-bottom: var(--line);}
  .mb-gnb > .nav > li > .depth2 > li > a {font-size: 1.8rem;display: block;margin: 8px 0;}
  .mobile-header .utill-menu {padding:20px 5%;}
  .mobile-header .utill-menu > .member {gap:8px}
  .mobile-header .member { display:flex; align-items: center; font-size:1.8rem; margin-bottom:15px;}
  .mobile-header .member > strong {color:var(--title); margin-right:6px;}
  
  
  /** MAIN **/
  #main > section {padding:60px 20px;}
  #main .section-1:before {background-size:cover;background-attachment: inherit;}
  #main .section-1 .container {flex-direction: column;}
  #main .section-1 .left {width:100%; margin-bottom:50px;}
  #main .section-1 .right {width:100%;}
  #main .section-1 .visual-txt {text-align:center;}
  .login-box {width: 50%;max-width: 100%;padding:40px;margin:0 auto;}
  .search-bar {margin:0 auto;}
  #service .slide-button {display:flex;}
  .news-board .first {width:40%;}
  .borad-list {width:58%;}


  /** SUB **/
  /*sub-visual*/
  #sub-visual {background-attachment:unset; background-position: top center;}
  #sub-visual .visual-txt {padding: 116px 4% 69px 4%;}
  #sub-visual .visual-txt h1 {font-size:4rem;}

  /*left-navi*/
  .left-navi .depth2::-webkit-scrollbar {-webkit-appearance: none;}
  .left-navi .depth2::-webkit-scrollbar:vertical {width: 10px;}
  .left-navi .depth2::-webkit-scrollbar:horizontal {height: 10px;}
  .left-navi .depth2::-webkit-scrollbar-thumb {background-color: rgba(0, 0, 0, .5); border-radius: 10px; border: 2px solid #ddd;}
  .left-navi .depth2::-webkit-scrollbar-track {border-radius: 10px; background-color: #ddd;}
  .left-navi .depth2.on {max-height:127px;}
  .result-wrap .left-navi {width: 32%;}

  /*gall-board*/
  .gall-board > li {width:calc(50% - 15px);}
  .gall-board > li:nth-child(2n) {margin-right:0;}

  /*기관/키워드*/
  .company-info dl {width: 40%;}
  .company-info .btn-area {width: 35%;}

  /*통계 보고서*/
  .sub-statistics {flex-wrap: wrap;}
  .sub-statistics li {width:calc(50% - 10px); margin-bottom:20px; margin-right:20px;}
  .sub-statistics li:nth-child(2n) {margin-right: 0!important;}
  .rank-board-list > li .list-cont {width:55%; margin-right:auto;}
  .rank-board-list > li .img-sec {width:35%;}
  .flex-cols-2 .wd-80 {width: 71%;}
  .flex-cols-2 .wd-20 {width: 26%;}
  
  /*service*/
  .servie-step li > a {width:70%;}
}

@media all and (max-width:1024px) {
  /*header*/
  .mobile-header .push-btn {right:80px;}

  /** MAIN **/
  .more-icon {width:32px; height:32px;}

  /** SUB **/
  .sub-title {flex-wrap:wrap;}
  .sub-title h2 {width:100%;}
  .sub-title .date-select {margin-left:0; margin-top:10px;}
  .sub-title .option-select {width:55%;}
  .sub-title .btn {margin-top:10px;}

  /*기관/키워드*/
  .company-info {flex-direction: column; text-align: center;}
  .company-info .btn-area {width:90%; margin-left:0; margin-top:20px;}
  .company-info .ci-img {width:200px; margin-bottom:20px;}
  .company-info dl {width:100%; margin-right:0;}
  .company-info .btn-area.center {flex-wrap:nowrap; width:100%;}
  .category-detail {flex-wrap: wrap;}
  .category-detail li {width: 31.3%;margin-right: 3%;margin-bottom: 30px;}
  .category-detail li:nth-child(3n) {margin-right:0;}
  .keyword-select ul li {width:calc(22% - 15px);}

  /*통계 보고서*/
  .graph-box {padding:40px;}
  .graph-box.flex {flex-direction: column;}
  .graph-box.flex .wd-30 {width:100%; text-align: center; margin-bottom:40px;}
  .graph-box.flex .wd-70 {width:100%;}
  .stats-box {flex-wrap: wrap;}
  .stats-box li {width: calc(50% - 1.5%);margin-right: 3%; margin-left:0;}
  .stats-box li:nth-child(2n) {margin-right:0;}
  .contents-top5 .title {width:61%;}
  .flex-cols-2 .wd-80 {width: 62%;}
  .flex-cols-2 .wd-20 {width: 35%;}
  .cal-head {margin-bottom:0;}

  /*관리자페이지*/
  #admin .container .lnb {width:25%;}
  .form-area dl.cols-3 {flex-wrap: wrap;}
  .form-area dl > dt {width:20%;}
  .form-area dl > dd {width:75%; margin-right:0;}
  .form-area dl.cols-3 > dd {width:75%; margin-right:0; margin-bottom:15px;}
  .form-area dl.cols-3 > dd:last-child {margin-bottom:0;}
  .form-area dl.cols-3 > dd > input {width:100%;}
  .set-box dl.r-msg > dd {flex-wrap: wrap;}
  .set-box dl.r-msg .chk-box {margin-top:10px;}
  .msg-list {display:block;}
  .msg-list .table-wrap {height:auto; border-bottom:0;}
  .talk-set .talk-box {width:35%;}
  .talk-set .set-box {width:59%;}
}

@media all and (max-width:900px) {
  /** MAIN **/
  #main .section-1 .right {flex-direction: column;}
  .statistics {width:100%; max-width:100%; margin-right:0;}
  .statistics li {height:185px;}
  .statistics li .cont {margin-top:54px;}
  .news-board {flex-direction: column;}
  .news-board .first {width:60%; margin:0 auto 40px;}
  .news-board .borad-list {width:100%;}
  .borad-list > li > a {padding:20px; flex-direction: column;}
  .borad-list > li > a > .board-cont,
  .borad-list > li > a > .board-cont h3, .borad-list > li > a > .board-cont p  {width:100%; text-align:center;}
  .borad-list .more-icon {margin-top:10px;}
  .result-wrap .left-navi {width:40%;}
  .result-wrap .board-list {padding-left:4%; width:56%;}

  /*footer*/
  #footer .footer-menu {text-align: center;}
  #footer .container {flex-direction: column; text-align: center;}
  #footer h1 {width:auto; margin:0 auto 20px;}
  #footer .footer-cont {width:100%;}

  /** SUB **/
  .sub-title {display:block;}
  .sub-title .sub-tabmenu {margin:15px 0 10px 0;}
  .sub-tabmenu {flex-direction: column; padding-left: 10px;}
  .sub-tabmenu > li {width: 100%; margin-right: 0; margin-bottom: 10px;}
  .sub-tabmenu > li:last-child {margin-bottom: 0;}
  .sub-title .option-select {width:100%; margin-top:15px;}
  .sub-title .option-select select {margin:0 2% 0 0;width: 48%;}
  .sub-title .option-select select:nth-child(2n) {margin-right:0;}
  .sub-title .date-select {width:100%; margin-top:15px;}
  .sub-title .date-select input[type="date"] {margin: 0 2% 10px 2%;width: 48%;}
  .sub-title .date-select select {margin: 0 0 10px 0;width:100%;}
  .sub-title .btn {width:22%; margin:0 8px 0 0;}
  .sub-head {flex-direction: column;}
  .sub-head .sub-tabmenu {width:100%; margin-right:0; margin-bottom:20px;}
  .sub-head .right {width:100%; margin-left:0;}

  /*sub-visual*/
  #sub-visual .visual-txt p {font-size:2rem;}

  /**/
  #sub .search-bar {max-width:100%;}
  .filter > strong {display:block; margin-bottom:10px; float:none;}
  .filter > p > span {display:block;}

  /*board-list basic*/
  .mobile-table {width:100%;overflow-x: auto;}
  .mobile-table::-webkit-scrollbar {-webkit-appearance: none;}
  .mobile-table::-webkit-scrollbar:vertical {width: 10px;}
  .mobile-table::-webkit-scrollbar:horizontal {height: 10px;}
  .mobile-table::-webkit-scrollbar-thumb {background-color: rgba(0, 0, 0, .5); border-radius: 10px; border: 2px solid #ddd;}
  .mobile-table::-webkit-scrollbar-track {border-radius: 10px; background-color: #ddd;}
  .mobile-table table {width: 1000px;}
   .mb-grid table colgroup {display:none;}
  .mb-grid table tr {display:grid; grid-template-columns: 35% 65%; background:#f7f7f7; align-items: center; border-bottom:var(--line);}
  .board-list.basic table th {border:0;}
  .board-list.basic table td {background:#fff; border:0; border-bottom: 1px solid #d7d7d7;}

  /*board-list basic*/
  .board-list.basic table tr a {height:19px;}

  /*gall-board*/
  .gall-board > li {width:100%; margin-right:0!important;}

  /*board-view*/
  .board-view-cont {flex-direction: column;}
  .board-view-cont .img-sec {margin:0 0 30px 0;}
  .view-cont-txt {width:100%;}

  /*기관/키워드*/
  .category-detail li {width:48%; margin-right:4%;}
  .category-detail li:nth-child(2n) {margin-right:0;}  
  .category-detail li:nth-child(3n) {margin-right:4%;}
  .keyword-select ul li {width: calc(29% - 15px);}
  .flex-cols-2 > div.join-icon {margin: 20px 0!important; text-align: center;}
  .join-icon > img {transform:rotate(90deg);}
  
  /*통계 보고서*/
  .rank-board-list > li > a {display:block;padding:15px 15px 25px; }
  .rank-board-list > li .list-cont {width:100%;}
  .rank-board-list > li .rank-img {margin-top: -16px;width: 25px;}
  .rank-board-list > li .list-cont h3 {font-size:2rem; margin-bottom:6px;}
  .rank-board-list > li .board-info, .board-info .office {justify-content: flex-start!important;}
  .rank-board-list > li .img-sec {width:100%; margin-top:20px;}
  .rank-board-list > li .img-sec > img {position:relative;}
  .flex-cols-2 {flex-direction: column;}
  .flex-cols-2 > div {width:100%; margin-right:0; margin-bottom:30px;}
  .flex-cols-2 .wd-80, .flex-cols-2 .wd-20 {width:-webkit-fill-available;}

  /*회원가입*/
  .member_sel {max-width:90%;}

  /*service*/
  .servie-step {flex-wrap:wrap;}
  .servie-step:before {display:none;}
  .servie-step li {width:50%;}
  .servie-step li.none > span {background:#cfcfcf; width:100%!important;}

  /*관리자페이지*/
  #admin #sub-visual .visual-txt {padding:100px 4% 40px 4%;}
  #admin .container {flex-direction: column;}
  #admin .container .lnb {width:100%; margin-right:0; margin-bottom:40px; z-index: inherit; position: relative; top: auto;}
  #admin .container .contents {width:100%;}
}

@media all and (max-width:640px) {
  /*margin*/
  .mg-b60 {margin-bottom:30px;}
  .mg-b90 {margin-bottom:40px;}

  /* header */
  .mobile-header {height:6rem;}
  .mobile-header .logo {width:37%;}
  .mobile-header .push-btn {right:14%;}
  .mobile-header .push-btn > svg {width:25px; height:25px;}
  .mb_menu {margin-top:1.6rem;}
  .mobile-header .mb-gnb.on {top: 6.1rem;}

  /** MAIN **/
  #main .section-1 {padding:140px 20px 70px 20px;}
  #main .section-1 .visual-txt {margin-bottom:30px;}
  #main .section-1 .visual-txt h1 {font-size:3.8rem;}
  #main .section-1 .visual-txt p {font-size:1.8rem;}
  #main .section-1 .left {margin-bottom:40px;}
  .statistics li {width:100%; height:150px; padding:20px;}
  .statistics li .cont {margin-top: 40px;}
  .login-box {width: 100%;max-width:100%;height: auto;padding: 30px 25px;}
  .login-box .img-sec {width:30%;margin: 0 auto 17px;}
  .main-title {font-size:3rem;}
  .new-contents .cont {padding:20px;}
  .keyword {margin-bottom:10px;}
  .news-board .first {width:100%;}
  .news-board .first a .title > h3 {font-size:1.8rem;}
  .news-board .first .more-icon {display:none;}

  /*footer*/
  #footer .container {padding:20px 4%!important;}
  #footer .footer-menu {padding: 0;}
  #footer .footer-menu ul > li {width: 50%;border-right: 1px solid #363945;border-bottom: 1px solid #363945;margin-left: -3px;}
  #footer .footer-menu ul > li:nth-child(2n) {border-right:0;}
  #footer .footer-menu ul > li > a:after {display:none;}
  #footer .footer-menu ul > li > a {padding:7px 5%;display: block;}
  #footer .footer-cont li {padding-right:0; margin-bottom:0;}
  #footer .footer-cont li:after {display:none;}

  /*button style*/
  .btn-area.center {flex-wrap:wrap; justify-content: flex-start;}
  .btn-area a, .btn-area button {margin-bottom:10px; width: -webkit-fill-available; margin-right:0;}
  .btn-area a:nth-child(2n), .btn-area button:nth-child(2n) {margin-right:0;}

  /** SUB **/
  #sub > .container, .container {padding:50px 4%!important;}
  #sub-visual .visual-txt h1 {font-size:3.6rem;}
  .sub-title h2 {font-size:2.5rem;}
  .sub-title2 {flex-wrap:wrap;}
  .sub-title2 h3 {width:100%;}
  .sub-title2 .btn {margin-top:10px; width:100%;}
  .result-wrap {flex-direction: column;}
  .result-wrap .left-navi {width:100%;margin-bottom:30px;position: relative;top: auto;left: auto;}
  .result-wrap .board-list {width:100%;}
  .sub-tabmenu > li {width:calc(50% - 5px);} 
  .sub-tabmenu > li:nth-child(2n) {margin-right:0;}
  .sub-tabmenu > li:nth-child(3n) {margin-right:10px;}
  .sub-tabmenu > li > a {line-height: 34px;}

  /* 480px 이하에서 세로 정렬 */
  @media all and (max-width:480px) {
    .sub-tabmenu {flex-direction: column; padding-left: 10px;}
    .sub-tabmenu > li {width: 100%; margin-right: 0; margin-bottom: 10px;}
    .sub-tabmenu > li:last-child {margin-bottom: 0;}
  }
  .left-navi.fixed {position:relative;top:auto;max-width:100%;}
  .result-wrap .board-list {width:100%!important; padding-left:0!important;}
  .sub-title .date-select {flex-wrap: wrap;}
  .sub-title .date-select input[type="date"] {width: 47.5%;margin: 0 0 10px;}
  .sub-title .btn {width:-webkit-fill-available; margin:0 0 8px 0;}
  .info-box .txt {flex-direction: column;}
  .info-box .txt p {width:100%;}
  .info-box .txt .btn { margin:20px auto 0;}
  .tabmenu li {min-width:auto;}
  .sub-head .right {flex-direction: column;}
  .sub-head .right .btn {width:100%; max-width:-webkit-fill-available; margin-right:0; margin-bottom:15px;}
  #sub .sub-head .right .search-bar {width:100%;}

  /*board-view*/
  .board-view .board-head {text-align: center;}
  .board-info {flex-wrap:wrap;justify-content: center;}
  .board-info .office {width:100%;margin-bottom:10px;justify-content: center;}
  .board-info .hit {margin-right:5%;}
  .board-view-cont {padding:30px 4%;}
  .board-view-cont .img-sec > img {border-radius: var(--radius);}
  .view-cont-txt {text-align: center;}
  .board-view .survey {flex-direction: column;}
  .board-view .survey > button {margin-bottom:15px; max-width:100%; height:50px;}
  .board-view .survey > button > i {width:35px;}
  .comment-box {margin-top:30px;}
  .comment-box .comment-list .comment-view {width: 97%;padding:0 2%;}
  .comment-box .comment-list > li > a {margin: 15px 0;}
  .comment-box .comment-list .reply {padding:20px 2% 0;}
  .comment-box .comment-list .reply .comment-view {width:89%;}
  .comment-box .info {flex-wrap: wrap; align-items: flex-start;}
  .comment-box .info > p {margin:5px 0 0 0;}
  .comment-box .info > .date {width:100%; margin-top:15px; margin-right:0;}
  .comment-form {padding:20px;}
  .board-view .btn-area a {width:100%; margin:0 0 15px 0;} 
  .board-view .btn-area a:last-child {margin-bottom:0;}
  .cont-list {margin:50px 0 30px 0;}
  #sub .new-contents .slide-button {margin-top:0;}
  #sub .new-contents .slide-button .swiper-button-prev, 
  #sub .new-contents .slide-button .swiper-button-next {border:0; width:auto; height:auto; margin-top:-72px; margin-right:2%;}
  .board-view-bottom {padding:10px;}
  .board-view-bottom a > p {display:none;}

  /*board-write*/
  .board-write dl {flex-direction: column;}
  .board-write dl dt, .board-write dl dd {width:100%; justify-content: center;}

  /*paging*/
  .paging .page-arr, .paging a, .paging a.on {width: 24px;height: 24px;line-height: 26px;border: 0;}
  .paging .page-arr img {top: 8px !important; height:10px;}
  
  /*기관/키워드*/
  .category-detail li {width:100%; margin-right:0;}
  .contents-list {flex-wrap:wrap;}
  .contents-list dl {border-right:0;}
  .keyword-select {padding:16px;}
  .keyword-select ul li {width:calc(43% - 10px); padding:7px; margin-right:10px;}
  .keyword-select ul li p {font-size:1.4rem;}
  .flex-cols-2 > div.join-icon {margin:0 0 30px 0!important;}
  .company-info .btn-area.center {flex-wrap:wrap;}
  .company-info .btn-area.center a {width:100%;}
  
  /*통계 보고서*/
  .sub-statistics {flex-wrap: wrap;}
  .sub-statistics li {width:100%; min-height: 210px; margin-right:0;}
  .sub-statistics .cont {padding-top:20px; margin-top:20px;}
  .graph-box {padding:20px;}
  .stats-box li {width:100%; margin-right:0;}
  .stats-box li .cols:last-child {margin-bottom:0;}
  .solid-box { padding:16px; height:auto; min-height:200px;}
  .evaluate ul {flex-direction: column;}
  .evaluate ul > li {width:100%;}
  .evaluate ul > li i {width:53px;}
  .bar-graph li a {flex-wrap:wrap;}
  .bar-graph li a .tit {width:100%; margin-bottom:10px;}
  .bar-graph li .bar {width:85%;}

  /*회원가입*/
  .regist-box {padding:20px;}
  .regist-box.bg-none {padding: 0 2%;}
  .join_select {flex-wrap: wrap;}
  .join_select li {width:46%;}
  .join_select li:nth-child(1) > a, .join_select li:nth-child(3) > a {float:right;}
  .member_sel {flex-direction: column; max-width:100%;}
  .member_sel li {padding:20px;}
  .member_sel li .btn {max-width:-webkit-fill-available; line-height:43px;}
  .join-form dl dd, .phone-num, .phone-chk {flex-wrap:wrap;}
  .join-form dl dd input[type="text"] {width:100%;}
  .join-form dl dd a {width:100%;}
  .join-form dl dd select {width:100%;}
  .phone-num input[type="text"] {width:26%!important;}
  .phone-chk {gap:10px;}
  .email-form, .email-chk {flex-wrap:wrap;}
  .email-form input[type="text"] {width:44%!important;}

  /*mypage*/
  .mypage {padding:30px 3%;}
  .mypage.bg-none {padding: 0 2%;}
  .mypage-form dl dd, .phone-num, .phone-chk {flex-wrap:wrap;}
  .mypage-form dl dd input[type="text"] {width:100%;}
  .mypage-form dl dd a {width:100%;}
  .mypage-form dl dd select {width:100%;}

  
  /*layerPopup*/
  .layerPopup .popup-box {width: 90%;height: 450px;padding: 17px 0 17px 17px;}
  .layerPopup .popup-cont {height: 282px;overflow-y:auto;padding-right: 17px;}
  .layerPopup .popup-cont::-webkit-scrollbar {-webkit-appearance: none;}
  .layerPopup .popup-cont::-webkit-scrollbar:vertical {width: 10px;}
  .layerPopup .popup-cont::-webkit-scrollbar:horizontal {height: 10px;}
  .layerPopup .popup-cont::-webkit-scrollbar-thumb {background-color: rgba(0, 0, 0, .5); border-radius: 10px; border: 2px solid #ddd;}
  .layerPopup .popup-cont::-webkit-scrollbar-track {border-radius: 10px; background-color: #ddd;}
  .layerPopup .btn-area {width:95%; margin-top:20px; justify-content: center;}
  .layerPopup .popup-box .popup-title .close-btn {margin-right: 15px;}
  .layerPopup .popup-box.xs {height: 368px;}
  .layerPopup .popup-box.xs .popup-cont {height: 155px;}
  
  /*service*/
  .servie-step li {width:100%;}
  .servie-step li > a {margin:22px auto;}

  /*관리자페이지*/
  .talk-set {flex-direction: column;}
  .talk-set .talk-box {width:100%; margin-bottom:20px;}
  .talk-set .set-box {width:100%; padding:20px;}
  .set-box dl {flex-direction: column;}
  .set-box dl > dt {width:100%; margin-bottom:8px;}
  .set-box dl > dd {width:100%;}
  .set-box dl > dd > input:first-child {width:100%; margin-right:0;}
  .set-box dl > dd > input {width:87%; margin:0 8px 8px 0;}
  .msg-list li {margin-right:0; margin-bottom:20px;}
  .sub-head .date-select {flex-wrap:wrap;}
  .sub-head .date-select .btn {width:100%;}
  .date-select .period-select {margin:15px 0;}
}
 

/* ================================
   FAQ (자주 묻는 질문)
   ================================ */

/* FAQ 전체 리스트 영역 */
.faq-list {
  border-top: 2px solid var(--blue);
  border-bottom: 1px solid #E5E5E5;
  margin-top: 20px;
  background: #fff;
}

/* FAQ가 하나도 없을 때 */
.faq-empty {
  padding: 40px 20px;
  text-align: center;
  color: #999;
  font-size: 14px;
  border-bottom: 1px solid #E5E5E5;
}

/* 각 질문/답변 아이템 */
.faq-item {
  border-bottom: 1px solid #F0F0F0;
}

/* 질문 버튼 기본 리셋 */
.faq-item .faq-q {
  width: 100%;
  border: 0;
  outline: 0;
  background: #FCFCFC;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

/* hover 시 */
.faq-item .faq-q:hover {
  background: #F6F2FF;
}

/* 열려 있을 때(React에서 .on 붙임) */
.faq-item.on .faq-q {
  background: #F3EDFF;
  border-bottom: 1px dashed #DDD;
}

/* "Q" 아이콘 */
.faq-q-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-right: 10px;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  flex-shrink: 0;
}

/* 질문 제목 */
.faq-q-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;  /* 두 줄까지만 보여주고 말줄임 */
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 14px;
  color: #333;
  line-height: 1.5;
}

/* 답변 전체 영역 */
.faq-a {
  background: #FAFAFA;
}

/* 답변 내부 레이아웃 */
.faq-a-inner {
  display: flex;
  padding: 16px 18px 18px;
}

/* A 아이콘(왼쪽) */
.faq-a-icon {
  width: 32px;
  height: 32px;
  margin-right: 10px;
  border-radius: 50%;
  background: var(--mint);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* 답변 텍스트+첨부+관리자버튼 묶음 */
.faq-a-contents {
  flex: 1;
  min-width: 0;
}

/* 답변 텍스트 */
.faq-a-text {
  font-size: 13px;
  color: #444;
  line-height: 1.7;
  white-space: pre-wrap; /* 줄바꿈 유지 */
}

/* 첨부파일 영역 */
.faq-attach {
  margin-top: 12px;
  font-size: 12px;
}

/* 첨부파일이 있을 때 라인 */
.faq-attach-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
}

/* "첨부파일" 라벨 */
.faq-attach-label {
  font-weight: 700;
  color: #2F45D5;
  margin-right: 4px;
}

/* 각 파일 링크 */
.faq-attach-file {
  cursor: pointer;
  color: #2F45D5;
  text-decoration: none;
}

.faq-attach-file:hover {
  text-decoration: underline;
}

/* 첨부파일이 없을 때 */
.faq-attach-empty {
  color: #999999;
}

.faq-admin-btns {
  margin-top: 10px;
  display: flex;
}

.faq-admin-btns .btn {
  margin-left: 4px;
}

@media (max-width: 768px) {
  .faq-item .faq-q {
    padding: 12px 12px;
  }

  .faq-q-title {
    font-size: 13px;
  }

  .faq-a-inner {
    padding: 12px 12px 14px;
  }

  .faq-a-text {
    font-size: 12px;
  }
}

.member-guide {
  margin-top: 30px;
  padding: 20px 24px;
  background: #efefef;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.6;
  color: #555;
}

.member-guide p + p {
  margin-top: 6px;
}


.qna-status, .alarm-status {
  padding: 8px 14px;
  width: 80px;
  border: 1px solid #cfd3e1;
  border-radius: 6px;
  background: #fff;
  font-weight: 600;
  letter-spacing: 0.2px;
  transition: all .15s ease;
  text-align: center;
  font-size: 1.6rem;
}

span.wait {
  color: #ff2b2b;
  border-color: #ff2b2b;
}

span.done {
  color: #2F45D5;
  border-color: #2F45D5;
}

.answer-head {
  display: flex;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  margin-left: 16px;
  padding-top: 8px;
  padding-bottom: 8px;
}
.answer-date > span {
  padding-right: 16px;
  font-weight: 600;
}
.answer-body {
    border: 1px solid #EAEAEA;
    background: #FAFAFA;
    padding: 16px;
}
.answer-notice {
    margin-top: 16px;
    margin-bottom: 16px;
    font-family: "Roboto", "Helvetica", "Arial", sans-serif;
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.5;
    letter-spacing: 0.00938em;
    color: #0072CE;
    font-size: 13px;
    margin-bottom: 8px;
}

.phone-group {
  display: flex;
  align-items: center;
  gap: 6px; /* input 사이 간격 */
}

/* 휴대폰 번호 input 공통 */
.phone-group .phone-input {
  min-width: 0;          /* 전역 min-width 무력화 */
  width: 80px;           /* 원하는 폭 (예: 70~90px 정도) */
  padding: 0 8px;        /* 좌우 패딩만 */
  box-sizing: border-box;
}

/* 필요하면 앞/중간/뒤 별도 조정 가능 */
.phone-input-prefix {
  width: 70px;
}

.phone-input-middle,
.phone-input-suffix {
  width: 90px;
}

/* 가운데 '-' 표시 */
.phone-group .dash {
  display: inline-block;
  padding: 0 2px;
  font-size: 1.6rem;
  line-height: 42px;
}

/* 비밀번호 변경 페이지 래핑 */
.change-pw-page .change-pw-wrap {
  max-width: 500px;
  margin: 40px auto 80px;
}

.change-pw-page .sub-title.center {
  text-align: center;
}

.change-pw-page .change-pw-desc {
  text-align: center;
  margin-top: 20px;
  line-height: 1.6;
  font-size: 1.4rem;
}

/* 폼 레이아웃 */
.change-pw-form {
  margin-top: 30px;
}

.change-pw-form .form-row {
  margin-bottom: 20px;
}

.change-pw-form .form-label {
  display: block;
  font-weight: 600;
  margin-bottom: 8px;
}

.change-pw-form .form-label .essential {
  color: #ff4d4f;
  margin-left: 4px;
}

.change-pw-form .input-wrap {
  max-width: 100%;
}

/* 비밀번호 인풋 (다른 input과 느낌 맞추고 싶을 때) */
.change-pw-page .pw-input {
  width: 100%;
  height: 42px;
  line-height: 42px;
  border-radius: 8px;
  border: var(--line);
  font-size: 1.5rem;
  text-indent: 12px;
  font-family: inherit;
  background-color: #f8f8f8;
  box-sizing: border-box;
}

.change-pw-page .pw-input-error {
  border-color: #ff4d4f;
}

/* 헬퍼 텍스트 */
.change-pw-page .pw-helper-text {
  margin-top: 6px;
  font-size: 1.2rem;
  color: #666;
}

.change-pw-page .pw-helper-text.error {
  color: #ff4d4f;
}

/* 버튼 영역 */
.change-pw-page .change-pw-btn-row {
  margin-top: 30px;
}

.change-pw-page .change-pw-btn-row .btn {
  min-width: 150px;
  height: 46px;
  border-radius: 8px;
  font-size: 1.4rem;
}

.findpw-page .findpw-wrap {
  max-width: 500px;
  margin: 40px auto 80px;
}

.findpw-form .form-row {
  margin-bottom: 16px;
}

.findpw-form .form-label {
  display: block;
  font-weight: 600;
  margin-bottom: 6px;
}

.findpw-form .text-input,
.findpw-form .pw-input,
.findpw-form .phone-input {
  width: 100%;
  height: 42px;
  line-height: 42px;
  border-radius: 8px;
  border: var(--line);
  font-size: 1.5rem;
  text-indent: 12px;
  font-family: inherit;
  box-sizing: border-box;
}

/* 휴대폰 번호 줄 */
.phone-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.phone-input-group {
  display: flex;
  align-items: center;
  gap: 4px;
}

.phone-input {
  width: 70px;
}

/* 인증번호 줄 */
.auth-row {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

.auth-input-wrap {
  flex: 1;
  position: relative;
}

/* 에러 */
.pw-input-error {
  border-color: #ff4d4f;
}

.pw-helper-text {
  margin-top: 4px;
  font-size: 1.2rem;
  color: #666;
}

.pw-helper-text.error {
  color: #ff4d4f;
}

/* 버튼 */
.btn-area {
  margin-top: 24px;
}

.btn.full {
  width: 100%;
  height: 46px;
}


.board-search-row {
  display: flex;
  justify-content: center;
}

.board-search-row > .form-item {
  display: flex;

  align-items: center;
}
.btn-group {
  display: flex;
  align-items: center;
}

table#addSubscribe > tbody > tr > td > a {
  display: "inline-block";
  max-width: "500px";
  overflow:"hidden";
  text-overflow: "ellipsis";
  white-space: "nowrap";
  vertical-align: "middle";
  color: "#0066cc"
}

.layer-popup {
  max-width: var(--container);
  margin: 0 auto;
}

.gall-board-cont > p {
  height: 48px
}

.login-box > .btn-area > ul.link-area {
  margin: 0px 0px 10px 0px;
}

.login-box > .btn-area > ul.sns-area {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    margin: 10px 0px 0px 0px;
}