@charset "utf-8";

@import url(//cdn.jsdelivr.net/npm/xeicon@2.3.3/xeicon.min.css);

@font-face {
    font-family: 'Pretendard-Regular';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
    font-style: normal;
}

.listskin *, .viewskin *, .writeskin * {margin:0;padding:0;list-style-type:none;box-sizing:border-box;border:0;font-family: 'Pretendard-Regular';}

.khskip {display:none !important}
.nocontent {padding:10% 0; font-size:14px; text-align:center}
.khwrap {position:relative; display:flex; justify-content:space-between;}


.button{}
.button .bt{display:inline-block;padding:0 15px;height:38px;line-height:38px;font-size:14px;font-weight:300;border:1px solid transparent;text-align:center;vertical-align: bottom}
.button .bt_adm{color:#555; border:1px solid #ccc; background:#fff}; 
.button .bt_adm:hover{color:#000; border:1px solid #aaa; background:#fff;}
.button .bt_set{color:#fff; border:1px solid #f00; background-color:#f00;}
.button .bt_set:hover{color:#fff; border:1px solid #f00; background-color:#f00;}
.button .bt_b01{color:#555; border:1px solid #aaa; background:#fff;}
.button .bt_b01:hover{color:#000; border:1px solid #555; background:#fff;}
.button .bt_b02{color:#fff; border:1px solid #05a447;background:#05a447;}
.button .bt_b02:hover{color:#fff; border:1px solid #05a447; background:#05a447;}
.button .bt_b03{color:#555; border:1px solid #ccc; background:#fff;}
.button .bt_b03:hover{color:#000; border:1px solid #aaa; background:#fff;}
.button .bt_list{color:#fff; border:1px solid #333; background:#555;}
.button .bt_list:hover{color:#fff; border:1px solid #333; background:#555;}

@media (max-width: 969px){
	.button .bt{font-size: 12px;padding: 0 10px; margin: 5px 0;}
}


.writeskin .image{}
.writeskin .standard{}

/**/
.bo_pro_list.clearfix {
    display: flex;
    flex-wrap: wrap;
	gap:40px
}

.listskin{clear:both; width:100%;}
.listskin *{transition:all 0.3s}
.listskin ul{display:flex; flex-wrap:wrap; justify-content: center; gap:30px; width:100%;}
/*.listskin li{width:calc(33.333% - 20px);}*/
.listskin li{width:calc(25% - 23px); background:#fff}
.listskin li.nocontent{width:100%;min-height:350px;line-height:350px;font-size:15px;font-weight:400;color:#999;text-align:center}
.listskin a{display:block}
.listskin .item{position:relative; border:1px solid #eee; border-radius: 10px;}
.listskin .item:hover{border:1px solid #aaa}
.listskin .chk{position:absolute;z-index:10;top:0;left:0;background-color:#fff; width:30px; height:30px; line-height:34px; text-align:center; border-radius: 10px;}
.listskin .img{position:relative; text-align: center;}
.listskin .img img{display:block;margin:0 auto;width:auto;max-width:100%;height:auto;    border-radius: 10px 10px 0 0;}
.listskin .move{border-top:1px solid #e9e9e9;overflow:hidden}
.listskin .move a{float:left;width:33.33%;display:block;padding:10px 0;border-right:1px solid #e9e9e9;text-align:center}
.listskin .move a i{line-height:1;font-size:20px;color:#999}
.listskin .move a span{display:block;line-height:1;font-size:12px;font-weight:400;color:#999}
.listskin .move a:last-child{border-right:0}
.listskin .move a:hover i,
.listskin .move a:hover span{color:#222}
.listskin .inner{padding:20px 20px 18px;}
.listskin .tit{}
.listskin .tit a{display:block;font-size:22px;font-weight:600;color:#333;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;margin-top:6px;}

.listskin .txt1 {
    padding-bottom: 15px;   
    margin-bottom: 15px;
	border-bottom: 1px solid #ddd;
}
.listskin .txt1 span{font-size:16px; color:#05a447;}
.listskin .txt2 {}
.listskin .txt2 span{font-size:16px; color:#555}
.listskin .field{display:block;font-size:12px;font-weight:400;color:#333}
.listskin .detail{display:none;margin-top:20px;padding:10px 25px;font-size:14px;font-weight:500;color:#fff;background:#f15924;border-radius:3px}
.pg_wrap{position:relative;height:100px;text-align:center}
.pg_wrap a{display:inline-block;padding:0 5px;width:20px;font-size:16px;font-weight:400}
.pg_wrap strong{display:inline-block;padding:0 5px;width:20px;font-size:16px;font-weight:600}
/*
.pg_wrap strong:after{content:'';position:relative;top:0px;left:0;display:block;width:100%;height:4px;background:#05a447}
*/

/**/
.viewskin .standard{width:58%;}
.viewskin .image{width:35%; position:relative;}
.viewskin .image img{display:block;width:100%;height:auto; max-width: 600px;}
.viewskin .opt{padding:30px 0;font-size:15px;font-weight:300;color:#333;border-top:1px solid #e9e9e9;border-bottom:1px solid #e9e9e9}
.viewskin .tit {font-size:15px;font-weight:400;color:#777; margin-bottom:20px;}
.viewskin .tit span {font-size:18px; color:#05a447; font-weight:600;}
.viewskin .tit h3{font-size:36px; font-weight:600; color:#2b2b2b; padding-top:8px;}
.viewskin .url{padding:10px 0}
.viewskin .url a{display:block;padding:16px 0;font-size:15px;font-weight:700;color:rgba(255,255,255,0.8);background:#22222b;text-align:center;transition:all 0.1s}
.viewskin .url a i{position:relative;top:2px;font-size:20px}
.viewskin .url a:hover{color:#fff}


/**/
.writeskin{max-width:1000px;}
.writeskin .full_input{width:100%}
.writeskin .frm_input,
.writeskin .frm_file{padding:12px;height:auto;color:#333;font-size:14px;vertical-align:middle;border:1px solid #ccc;background:#fff}
.writeskin .tit{position:relative;padding:20px 20px 18px 25px;line-height:24px;border:1px solid #dadcdd;border-radius:3px 3px 0 0;background:#fbfbfb;overflow:hidden}
.writeskin .tit strong{float:left;font-size:18px;color:#2c2e32;font-weight:600;letter-spacing:normal}
.writeskin .tit p{float:left;margin:0 0 0 15px;padding:0;font-size:12px;color:#999;font-weight:normal}
.writeskin .inner{margin:0 0 30px 0;padding:25px 25px;border:1px solid #dadcdd;border-top:0;border-radius:0 0 3px 3px;overflow:hidden}
.writeskin .inner dl {margin-bottom:14px;}
.writeskin .inner dl:last-child {margin-bottom:0;}
.writeskin .inner dt {margin-bottom:5px;}
.writeskin .inner dd {}
.writeskin .item{margin:0 0 8px 0;width:100%;padding:0 !important}
.writeskin .item .box{padding:10px;border:1px solid #eee;background:#fbfbfb;overflow:hidden}
.writeskin .item .box label{float:left;min-width:150px;line-height:28px;font-size:14px;cursor:pointer}
.writeskin .item .box label i{position:relative;top:2px;font-size:18px}
.writeskin .item .box input{float:left;width:calc(100% - 150px);padding:0 10px;line-height:28px;font-size:13px;color:#777;border:1px solid #eee}
.writeskin .item .box input[type="file"]{border:0;cursor:pointer}
.writeskin .item .del{padding:0 10px;border:1px solid #eee;border-top:0;overflow:hidden}
.writeskin .item .del input[class="del"]{display:none}
.writeskin .item .del label[id="del"]{float:left;position:relative;padding-left:25px;line-height:28px;font-size:14px;cursor:pointer}
.writeskin .item .del label[id="del"]:hover{text-decoration:underline}
.writeskin .item .del input[class="del"] + label i{position:absolute;top:5px;left:0;font-size:18px;color:#aaa;cursor:pointer}
.writeskin .item .del input[class="del"]:checked + label i{color:#eb6101}
.writeskin .item .del label #text{padding:3px 5px;border:1px solid #e9e9e9}

/**/
.khtable{display:table;width:100%}
.nocontent{font-size:14px;letter-spacing:-1px;text-align:center}

.bo_cate{padding:0 0 40px 0;zoom:1; width:calc(20% - 20px)}
.bo_cate:before,
.bo_cate:after{clear:both;display:table;content:"";line-height:0}
.bo_cate ul{text-align:center;font-size:0}
.bo_cate li{/*display:inline-block;*/margin:0 5px;text-align:left}
.bo_cate li a {
    position: relative;
    display: block;
    padding: 0 8px;
    line-height: 44px;
    font-size: 18px;
    font-weight: 400;
    color: #999;
    text-align: left;
}
.bo_cate li a:before{content:'';position:absolute;z-index:0;bottom:0;left:auto;right:0;width:0;height:3px;background:#05a447;transition:all 0.5s}
.bo_cate li a:hover:before{width:100%;right:auto;left:0}
.bo_cate li a:hover,
.bo_cate li a#bo_cate_on{color:#05a447}
.bo_cate li a:hover:before,
.bo_cate li a#bo_cate_on:before{width:100%}
.bo_cate li a.sel{position:relative;z-index:5;color:#313131;background:#fcfcfc}
.bo_cate li a.sel:hover{color:#05a447}

.control{margin:40px 0 0 !important;overflow:hidden}
.total{float:left;display:inline-block;line-height:45px}
.total span{font-size:16px;font-weight:300}
.total span strong{color:#023f9c}
.search{display:inline-block;height:45px;line-height:45px}
.scboard{display:inline-block;background:#fff}
.scboard *:focus{border-color:#aaa}
.scboard select{float:left;padding:10px;height:45px;font-size:15px;font-weight:300;border:1px solid #ccc;vertical-align: bottom;}
.scboard input{float:left;margin-left:10px;padding:0 10px;height:45px;font-size:15px;font-weight:300;border:1px solid #ccc;border-right:0}
.scboard button{float:left;padding:0 20px;height:45px;font-size:15px;font-weight:300;color:#fff;background:#333}
.scboard button i{font-size:18px}

.beafter{position:relative;display:table;width:100%;padding:30px 0;margin:0 auto;border-top:1px solid #dadcdd; min-height: 130px;}
.beafter .khbprev,
.beafter .khbnext{display:table-cell;width:50%;height:100%;vertical-align:middle;text-align:center}
.beafter .khblist{position:absolute;z-index:1;top:50%;left:50%;padding:0;width:72px;height:72px;line-height:74px;margin-top:-36px;margin-left:-36px;font-size:24px;border:1px solid #ddd;border-radius:3px;text-align:center;transition:none;box-sizing:border-box}
.beafter .khblist:hover{color:#fff;border-color:#05a447;background:#05a447;transition:none}
.beafter a{display:block;padding:0 15px;font-size:16px;font-weight:500;color:#222}
.beafter a p{padding:10px 0 0 0;font-weight:400;color:#666}
.beafter a:hover{color:#05a447}
.beafter a:hover p{color:#666}


.bo_v_cont {display:flex; justify-content:space-between;}

#bigImage {}
#bigImage .big {}
#smallImage {display:flex; gap:16px; margin-top:24px;}
#smallImage .small_box {width:20%; opacity:0.5; transition:all 0.25s; cursor:pointer;}
#smallImage .small_box:hover {opacity:1;}
#smallImage .small_box .small {}

.info {margin-top:30px;}
.info h4.left_tit::after {content:''; display:inline-block; width:4px; height:24px; background-color:#05a447; position:absolute; top:2px; left:0;}
.info h4.left_tit {font-size:22px; color:#222; margin-bottom:16px; position:relative; padding-left:16px;}
.info .bo_info {display:flex; flex-wrap:wrap; gap:0 20px;}
.info .bo_info li {width:calc(50% - 10px); display:flex; align-items:center; font-size:18px; border-bottom:solid 1px #ccc;}
.info .bo_info li:nth-child(3), .info .bo_info li:nth-child(4) {border-bottom:0;}
.info .bo_info li h5.th {width:120px; padding:22px 8px;}
.info .bo_info li p {width:calc(100% - 120px); padding:12px 16px;}
.info .notice {padding-top:60px;}
.info .notice .bo_info {}
.info .notice .bo_info li {width:100%;}
.info .notice .bo_info li:first-child {border-bottom:solid 1px #ccc;}
.info .detail {padding-top:60px;}
.info .detail p.text {background-color:#f5f5f5; padding:14px 18px; font-size:18px; color:#666; line-height:1.8; word-break: keep-all;}




@media (max-width: 969px){
	.listskin ul{gap: 20px}
	.listskin li {width: calc(50% - 10px);}
	.listskin .inner {padding: 15px 15px 13px;}
	.listskin .tit span {font-size:12px;}
	.listskin .tit a{font-size: 18px;}
	.bo_cate li a{font-size:14px;}	
}
@media (max-width: 830px){
	.bo_pro_list.clearfix { display: block;}
	.listskin{width:100%;}
	.bo_cate{width:100%;}
	
	/*.khwrap{display: block;}*/
	.beafter .khblist{width: 50px;height: 50px; line-height: 50px; margin-top: -22px; margin-left: -29px;}
	.beafter .khbprev, .beafter .khbnext{width: 40%;}
	.beafter a{font-size: 12px;}
	
	.bo_cate li {display: inline-block; text-align:center;}
	.bo_cate li a{text-align:center;}
}

@media (max-width: 689px){
	.listskin li {width: 100%;}

	
	/*뷰페이지*/
	.bo_v_cont{display: block;}
	.viewskin .image{width:100%;}
	.viewskin .image img{margin: 0 auto;}
	.viewskin .standard{width:100%; margin-top: 60px;}
	.viewskin .tit h3{font-size: 1.5em;}
	.viewskin .tit span{font-size: 1em;}	
	
	.info{margin-top:0}
	.info .notice{padding-top: 50px;}
	.info .detail{padding-top: 50px;}
	.info h4.left_tit {font-size: 1.3em;}
	.info h4.left_tit::after{height: 18px;}
	.info .bo_info{display: block;}
	.info .bo_info li { width: 100%; font-size: 1.1em;}
	.info .bo_info li:nth-child(1), .info .bo_info li:nth-child(2){border-top: solid 1px #ccc;}
	.info .bo_info li h5.th{width: 95px; padding: 17px 8px;}
	.info .bo_info li p{width: calc(100% - 95px);}
	.info .detail p.text{font-size: 1.1em; line-height: 1.3;}

}