@charset "utf-8";

/* reset */
*{ padding: 0; margin: 0; -webkit-text-size-adjust: none; }
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,p,blockquote,th,td{ margin: 0; padding: 0; }
article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{ display: block; }

fieldset,img{ border: 0 none; vertical-align: middle; }
dl,ul,ol,menu,li{ list-style: none; list-style-type: none; }
ul:after, ol:after{ display: block; height: 0; content:""; float: none; clear: both; }
blockquote,q{ quotes: none; }
blockquote:before,blockquote:after,q:before,q:after{ content: ''; content: none; }
address,caption,cite,code,dfn,em,var{ font-style: normal; }
a{ color: inherit; text-decoration: none; background: transparent; }
a:focus,a:active,a:hover{ text-decoration: none; }
table{ border-collapse: collapse; border-spacing: 0; width: 100%; }
th,td{ padding: 0; word-break: break-all; }
img{ border: 0 none; vertical-align: middle; max-width: 100%; }
legend,.blind{ overflow: hidden; position: absolute; top: 0; left: 0; width: 1px; height: 1px; font-size: 0; line-height: 100px; white-space: nowrap; }
caption{ overflow: hidden; width: 0; height: 0; font-size: 0; line-height: 0; }
.clear:after{ content: ''; display: block; clear: both; }
.hide{ overflow: hidden; position: absolute; left: -9999px; width: 0 !important; height: 0 !important; font-size: 0 !important; line-height: 0 !important; margin: 0 !important; padding: 0 !important; }
.skip,.blind{position:absolute;width:1px;height:1px;margin:0;padding:0;background:none; font-size:3px; color:transparent; line-height: 0; }


/* form */
textarea::-webkit-input-placeholder,
input::-webkit-input-placeholder,
textarea::-moz-placeholder,
input::-moz-placeholder,
textarea:-ms-input-placeholder,
input:-ms-input-placeholder{ color: #888; }
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button{ height: auto; }


input[type=button],
input[type=submit]{ -webkit-appearance: none; -moz-appearance: none; appearance: none; -webkit-border-radius: 0; border-radius: none; cursor: pointer; }
input[type=file]{ line-height: 1; padding: 6px 10px 7px; border: 1px solid #e5e5e5; background: #fff; color: #4d4d4d; cursor: pointer; font-size: 12px; }
input[type=text]:read-only,
input[type=password]:read-only,
input[type=tel]:read-only,
input[type=number]:read-only,
input[type=email]:read-only,
input[type=url]:read-only,
input[type=file]:read-only{ border: 1px solid #e1e2e2; color: #4d4d4d; text-indent: 10px !important; }
input[readonly],input[disabled]{ border: 1px solid #e1e2e2; color: #4d4d4d; text-indent: 10px !important; }
input[type=checkbox]{ vertical-align: middle; }


textarea{ width: 100%; padding: 5px 7px; font-size: 13px; -webkit-appearance: none; -moz-appearance: none; appearance: none; -webkit-border-radius: 0; border-radius: none; border: 1px solid #e1e2e2; }
button{ cursor: pointer; border: 0; }

.black_shadow{left: 0px;top: 0px;width: 100%;height: 100%;display: none;position: fixed;z-index: 0;opacity: 0.8;background-color: rgb(0, 0, 0);}

/* mtree */
ul.mtree{ margin-left: 0; }
ul.mtree ul{ margin-left: 1em; }
ul.mtree > li{ list-style: none; border-bottom: 1px solid #e7e7e7; font-size: 16px; background: #fff; }
ul.mtree a{ display: block; }
ul.mtree > li > a{ line-height: 40px; font-size: 15px; box-sizing: border-box; color: rgba(0,0,0,1); }
ul.mtree a{ -webkit-transition: all 300ms ease-out; -moz-transition: all 300ms ease-out; -ms-transition: all 300ms ease-out; -o-transition: all 300ms ease-out; transition: all 300ms ease-out; }
ul.mtree.bubba ul{ margin-left: 0; }
ul.mtree.bubba ul li{ font-size: .9em; }
ul.mtree.bubba li.mtree-node > a:after{ content: '›'; margin-left: .5em; font-weight: normal; }
ul.mtree.bubba li.mtree-node > a{ font-weight: bold; text-transform: upperCase; }
ul.mtree.bubba > li{ border-bottom: 1px solid #DDD; }
ul.mtree.bubba > li:last-child{ border-bottom: none; }
ul.mtree.bubba li:last-child > a{ border: none; }
ul.mtree.bubba > li.mtree-open > a{ background: #DDD; }
ul.mtree.bubba li > a:hover{ background: #DDD; }
ul.mtree.bubba li.mtree-active > a{ background: #FFC000; color: #FFF; }
ul.mtree.bubba a{ padding: 7px 0px 7px 1em; }
ul.mtree.bubba li li > a{ padding-left: 2em; }
ul.mtree.bubba li li li > a{ padding-left: 3em; }
ul.mtree.bubba li li li li > a{ padding-left: 4em; }
ul.mtree.bubba li li li li li > a{ padding-left: 5em; }
ul.mtree.skinny li{ font-size: .9em; }
ul.mtree.skinny a{ padding: 0px 18px; color: #555; }
ul.mtree.skinny a:hover{ text-decoration: underline; }
ul.mtree.skinny li.mtree-node:before{ float: left; margin-left: .5em; zoom: .8; margin-top: .1em; color: #777; }
ul.mtree.skinny li.mtree-open:before{ content: '-'; }
ul.mtree.skinny li.mtree-closed:before{ content: '+'; }
ul.mtree.skinny ul > li:first-child{ margin-top: .1em; }
ul.mtree.skinny ul > li:last-child{ margin-bottom: .3em; }
ul.mtree.skinny ul a{ color: #666; }
ul.mtree.transit{ background: #fff; }
ul.mtree.transit ul{ margin-left: 0; }
ul.mtree.transit ul > li{ font-size: 15px; line-height: 40px; }
ul.mtree.transit li.mtree-node{ position: relative; }
ul.mtree.transit li.mtree-node > a:before{ color: #fff; font-weight: normal; position: absolute; right: 20px; font-size: 16px; }
ul.mtree.transit li.mtree-open > a:before{ content: '-'; font-size: 16px; }
ul.mtree.transit li.mtree-closed > a:before{ content: '+'; }
ul.mtree.transit ul > li:first-child{ margin-top: 1px; }
ul.mtree.transit li.mtree-open > a{ background: #fff; color: rgb(255,255,255); }
ul.mtree.transit li > a:hover/*, ul.mtree.transit li.mtree-active > a*/{ background: #3997e1; color: #FFF; }
ul.mtree.transit li li.mtree-active > a{ background: #3997e1; color: #FFF; }
ul.mtree.transit li li li.mtree-active > a{ background: #3997e1; color: #000; }
ul.mtree.transit li.mtree-node > ul > li a:hover{ background: #3997e1; color: #FFF; }
ul.mtree.transit li.mtree-node > ul > li:last-child{ /*  margin-bottom: .5em; padding-bottom: .5em;*/ border-bottom: none; }
ul.mtree.transit li.mtree-node:last-child > ul > li:last-child{ margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
ul.mtree.transit a{ padding: 5px 0px 5px 25px; font-size: 16px; }
ul.mtree.transit li li span  a::before{ content:'- ' }
ul.mtree.transit li.mtree-node li a:before{ color: #000; }
ul.mtree.transit li.mtree-node li.mtree-active a:before{ color : #fff; }
ul.mtree.transit li li > a{ padding-left: 15px; border-bottom: 1px solid #e6e6e6; line-height: 40px; height: 40px; background: #fff; color: #000; font-size: 15px; text-indent: 15px; }
ul.mtree.transit li.mtree-open li.mtree-open a{ background: #3997e1; }
ul.mtree.transit li.mtree-open li.mtree-open li a{ background: #f7f7f7; }
ul.mtree.transit li.mtree-open li.mtree-open li a:hover{ background: #3997e1; }
ul.mtree.transit li ul li:last-child > a{ border-bottom: none; }
ul.mtree.transit li li:last-child > a{ border-bottom: none; }
ul.mtree.transit li li li > a{ padding: 0 3px; font-size: 13px; height: 40px; line-height: 40px; border-bottom: 1px solid #e4e4e4; background: #f7f7f7; color: #000; text-indent: 30px; box-sizing: border-box; }
ul.mtree.transit li.mtree-node ul{ background: #fff; border-bottom: 1px solid #b9b9b9; }
ul.mtree.transit li li li li > a{ padding-left: 3.2em; }
ul.mtree.transit li li li li li > a{ padding-left: 4em; }
ul.mtree.jet li{ margin-bottom: 1px; }
ul.mtree.jet li:last-child{ margin-bottom: 0px; }
ul.mtree.jet li:first-child{ margin-top: 1px; }
ul.mtree.jet li.mtree-active a{ background: #E3E3E3; }
ul.mtree.jet li.mtree-active li:last-child > a{ border-radius: 0px 0px 3px 3px; }
ul.mtree.jet li.mtree-active > a{ background: #008cba; color: #FFF; border-radius: 3px 3px 0px 0px; }
ul.mtree.jet li > a:hover{ background: #FFC000; color: #FFF; }
ul.mtree.jet a{ padding: 5px 0px 5px 1em; }
ul.mtree.jet li li > a{ padding-left: 2em; }
ul.mtree.jet li li li > a{ padding-left: 3em; }
ul.mtree.jet li li li li > a{ padding-left: 4em; }
ul.mtree.jet li li li li li > a{ padding-left: 5em; }
ul.mtree.nix{ background: none; }
ul.mtree.nix a{ display: inline; }
ul.mtree.nix ul{ margin-left: 1em; }
ul.mtree.nix ul > li{ list-style-position: inside; }
ul.mtree.nix li{ list-style: disc; }
ul.mtree.transit li li li > a:hover{ background: #d2d2ea; color: rgb(0,0,0); }

/* common */
body{ position: relative; height: 100%; color: #282828; letter-spacing: -1px; font-family:'Pretendard-Regular'; background: #f4f4f4; display: flex; justify-content: space-between;}
section{ clear: both; }
.bold{ font-weight: 700 !important; }
.mobile-menu{display: none;}

/* header */
header{background: #b99171; width: 320px;padding: 40px 3rem;box-sizing: border-box;color: #fefefe;}
.logot{text-align: center; width: 220px; margin: 0 auto 70px}
.logot .logo a{display:inline-block; margin-left:-14px;}
.logost{font-family: 'Nanum Myeongjo'; font-size: 16px; font-weight: 600; margin-bottom: 30px; margin-top: 10px}
.sotit{background: #a77f5f;border-radius: 20px;font-size: 16px;font-weight: 500;padding: 10px 20px 10px 35px;position: relative;text-align: left;}
.sotit .icon-line {transition-duration: 0.2s;  position: absolute;  height: 2px;  width: 22px;  top:21px;  background-color: rgb(255 255 255 / 50%);  right: 23px;}
.sotit  .icon-line:before {  transition-duration: 0.2s;  position: absolute;  width: 22px;
  height: 2px;  background-color: rgb(255 255 255 / 50%);  content: "";  top: -6px;  right: 0;}
.sotit  .icon-line:after {  transition-duration: 0.2s;  position: absolute;  width: 22px;  height: 2px;  background-color: rgb(255 255 255 / 50%);  content: "";  top: 6px;  right: 0;}
.gnb ul li a{font-size:clamp(1rem, 2vw, 1.15rem); display: block; border-bottom: 1px solid rgb(255 255 255 / 40%); padding: 20px 0}
.gnb ul li a:hover, .gnb ul li a.active{color: #F5F1BB; }
.ebook{/*height: 360px;*/background: url("../img/ebook.png") no-repeat; width: 100%; aspect-ratio:225/300; background-size: cover!important;margin-top: 60px;border: 1px solid #7e4822; box-sizing: border-box;padding-top: 130px;margin-bottom: 150px;}
.ebook > div{width: 175px;height: 47px;border-radius: 29px;color: #fff;text-align: center;font-size: 18px;display: flex;align-items: center;justify-content: center;/* gap: 20px; */margin: 10px auto;}
.eb{background: #ffbb00 }
.pd{background: #ff9c00 }
.footc{margin-bottom: 20px}
.footc p{ margin-bottom: 7px;   display: flex;  gap: 13px;}
.footcm{font-size: 11px}
.gnb li.gnb1{background:url(../img/admin_write_btn2.png) no-repeat center right; color:#ffde7b;}

/*상단 소식지 호수 선택*/
.select_btn{cursor: pointer;}
.select_list {max-height:330px; box-sizing: border-box; color:#b8b8b8; overflow-y:scroll; display: none;  list-style: none;  width: 100%;  border: 1px solid #ddd;  border-bottom: none;  border-radius: 10px; padding:15px; position: absolute; top:45px;  left:50%; transform: translateX(-50%);  background: #fff;}
.select_list li:hover{color:#222;}
.icon-line.active {background: transparent;}
.icon-line.active::before {transform: rotate(45deg) translate(5px, 5px);}
.icon-line.active::after { transform: rotate(-45deg) translate(4px, -4px);}

.content{width: calc(100% -  320px);display: flex;justify-content: space-between;}
.subcon{width: calc(100% -  290px);padding: 85px 80px 55px ;box-sizing: border-box; max-width:1250px ; width:98%; margin:0 auto;}
.main .subcon{padding: 25px 50px 55px }
.main .subcon .search{text-align: center;width: 400px;margin: 0 auto 100px;}
.main .subcon .search_input input[type=text]{height: 60px;border-radius: 46px;     font-size: 18px;    padding-left: 20px;   padding-right: 60px;}
.main .subcon .search_input button{bottom: 18px;right: 20px;}
.con-list{ display: grid; grid-template-columns: repeat(3, 32.5%); column-gap: 1%; margin-bottom: 40px}
.bx-list{ border: 1px solid #ccc; display: block; margin-bottom:40px; position:relative;}
.bx-list:hover{ border: 1px solid #b99171; }
.bx-img{position: relative; overflow: hidden; width:100%; aspect-ratio: 1/1; align-content: center;}
.bx-simg{width:100%; height:100%;}
.bx-img img{width: 100%; height:100%;  object-fit:cover;      transform:scale(1.0);  transition: transform .5s; }
.bx-list:hover .bx-img  img{   transform:scale(1.1);   transition: transform .5s;}

.bx-cate{ position: absolute; padding: 10px 20px; background: rgba(0,0,0,0.5); color: #fff; font-size: 14px; right: 0; bottom: 0 }
.bx-txt{text-align: center;background: #f4f4f4;padding: 15px; }
.bx-day{font-size: 14px;color: #b99171; font-weight:700;  /*padding-bottom: 7px;*/}
.bx-tit{font-size: clamp(1rem, 2vw, 1.15rem);color: #0e0e0e;font-weight: bold;margin-bottom: 10px;  white-space: nowrap;     overflow: hidden;     text-overflow: ellipsis; }
.bx-tag{ font-size: 13px; color: #0e0e0e; opacity: 0.6; display: flex; column-gap: 10px; justify-content: center;}


.contit{text-align: center; border-bottom: 1px solid #b99171; font-family: 'Nanum Myeongjo'; }
.contit .st{font-size: 18px; color: #7f4620; padding-bottom: 10px}
.contit .tit{font-size:clamp(2.5rem, 3vw, 3.125rem); word-break: keep-all; color: #9d3000; font-weight: 600; padding-bottom: 35px}
.sns {display: flex; padding: 35px 0 40px; gap:20px; justify-content: center;}
.cnt{line-height: 1.6}
.cnt > div{padding-bottom: 20px; text-align: justify;}
.cnt > div img{width: 100%}
.cate-section{margin-bottom: 55px}
.cate-tit{ color: #9d3000; font-size: 24px; font-family: 'Nanum Myeongjo';font-weight: 600;  border-bottom: 1px solid #9d3000; padding-bottom: 15px}
.cate-list a{color: #9d3000; border-bottom: 1px solid #9d3000; padding: 10px 0; display: flex; justify-content: space-between;}
.cate-list .ctm{ display: flex; gap: 10px;}

.letterzone{background: #000;color: #fff;padding: 30px;display: flex;gap: 25px;}
.lettit{font-size: 15px}
.lettc .ck .ck-lb{display: flex;}
.lettc .ck label{ font-size: 14px; letter-spacing: 0}
.lettc > div:not(.ck){display:grid; grid-template-columns: 39% 39% 20%; column-gap:1%}
.lettc > div input:not(#id-save){width:100%;}
.lettc input{ height: 40px; padding: 10px; box-sizing: border-box; border:none}
.lebtn {width:100%; height: 40px;background: #d8d8d8;font-family: 'Pretendard-Regular';font-weight: 600;font-size: 15px;padding: 0 20px;}


.aside{width: 240px;padding-top: 200px;margin-right:40px;}
.search_input {    position: relative; margin-bottom: 20px}
.search_input input[type=text] { height: 38px;  width: 100%; 	 padding: 0 30px 0 0; 	 background: none; 	 font-size: 15px;	 padding-left: 10px; 	 box-sizing: border-box;	 border: 2px solid #c98924;	 border-radius: 20px; }
.search_input button {   position: absolute;    right: 10px;    bottom: 8px;    width: 26px;    height: 25px;    background: url("../img/search.png") bottom left no-repeat;    background-size: 23px;    }
.aside-wrap{margin-bottom: 40px;  border-bottom: 1px solid #a77f5f; padding-bottom: 10px  }
/*.aside-wrap ul{padding-bottom: 20px}*/
.aside-wrap ul li{margin-top:10px; white-space: nowrap;     overflow: hidden;     text-overflow: ellipsis;}
.asidetit{font-size: 18px; border-top: 1px solid #a77f5f;  border-bottom: 3px solid #a77f5f; padding: 15px 0 ; text-align: center; color: #9d3000; font-family: 'Nanum Myeongjo'; font-weight: 600}
.aside-tag ul {display: flex; flex-wrap: wrap; }
.aside-tag ul li a{display: inline-block; border: 1px solid #cccac8; border-radius: 20px; font-size: 15px;  padding: 5px 15px; margin: 5px 2px }
.aside-tag  .asidetit{border-top: none; border-bottom: 1px solid #ccc; margin-bottom: 10px}
/*main_aside*/
.main .aside{padding-top: 185px;}
.main .aside .search{display: none;}
@media (max-width:1400px){
	.main .aside{display: none;}
}


.lnb{position: absolute; background: #000; color: #fff; right: 0; top: 0; ; height: 100%; padding: 85px 80px 60px  80px;   flex-direction: row-reverse; box-sizing: border-box; display: none} 
.indtlist{ line-height: 1.6 ;}
.indtw{font-family: 'Nanum Myeongjo';margin-left: 30px;/* position: relative; */}
.modal-close{position: absolute;right: 30px;top: 30px;cursor: pointer;}
 
.index-lnb{position: absolute; border: 5px solid #333333; width: 50px; height: 50px; box-sizing: border-box; top: 20px; right: 20px;     display: flex;
    justify-content: center;   align-items: center; cursor: pointer}
.indtc{ color: #db9f37; font-size: 28px;  font-weight: 600; margin-bottom: 15px}
.indtcm{ color: #fff; font-size: 100px; font-weight: 600; letter-spacing: -1px; margin-bottom: 10px}
.incont{ font-size: 36px; }
.indtcms .lan{font-size: 36px;font-family: 'Nanum Myeongjo'; margin-right: 10px;}
.indtcms .lanc{font-size: 18px}
.indbox{ margin-bottom: 15px;}
.indt{ color: #7b91a9; font-weight: 600; font-family: 'Nanum Myeongjo'; }
.indst { white-space: nowrap;     overflow: hidden;     text-overflow: ellipsis;}
.foot{display: none}

/* go to top*/
.topBtn{display:none;position:fixed;bottom:5%;right:30px;z-index:10;background:#b99171;border-radius:50%;}
.topBtn a{display:block;width:60px;height:60px;text-align:center;align-content:center;}


@media (max-width:1650px){
	.con-list{grid-template-columns: repeat(2, 49%);}
}

@media (max-width:1600px){
	.letterzone{flex-flow:column;}
}

@media only all and (max-width: 1024px){
	body{display: block}
	.mobile-menu{display: block;background: #b99070;width: 100%;position: fixed;z-index: 1; top: 0;}
	header{display: none}	
	.logo a img{height: 60px;}
	.main .search{display: none}
	.foot{display: block; background: #b99070; color: #fff; padding: 20px; box-sizing: border-box; font-size: 14px;}	
	.content{width: 100%; display: block}
	.con-list{display: block}
	.lettc > div{display: block}	
	.subcon{width: 100%; padding: 120px 20px 50px;}
	.contit .tit{font-size:28px}
	.letterzone{display: block}
	.aside{display: block; width: 100%; margin-right: 0; padding-top: 0; padding: 0 20px 50px;  box-sizing: border-box;  }
	.aside .search {display: none}
	.mmain-top{display: flex;align-items: center;justify-content: space-between;/* gap: 3px; */height: 80px; width:95%;margin:0 auto;}			
	.mmain-top .logot{width: 119px;margin: 10px;}
	.mmain-top .logost{ color: #fff; font-size: 10px; font-weight: 500; margin: 0}
	.mmain-top .sotit{color: #fff;font-size: 16px;padding:10px 18px;width:60%;margin-right:10px;}
	.mmain-top .mmain-r{display: flex;gap: 5px;margin-right: 10px;justify-content: center;align-items: center;}
	.mmain-top  .m-search img{width: 28px;}
	.mmain-top  nav img{width: 33px;}
	.mmain-top .sotit .icon-line{right: 18px}	
	.index-lnb{display: none}
	#hamburger{right: 0px;top: 80px;width: 100%;height: 100%;position: fixed;z-index: 1;display: none;overflow-y: auto;}
	#hamburger .hamburger_inner{ background: rgba(0,0,0,1); }
	#hamburger .mlogin{padding-left:10px;padding-top:10px;padding-bottom:10px;height:30px;background:rgba(255, 255, 255, 1);position:relative;text-align:right;}
	#hamburger .mlogin a{margin-right:10px;background:#fff;display:inline-block;padding:4px 7px;color:#000000;border:1px solid #474e61;font-size:14px;font-weight:500;font-family:'Noto Sans KR';}
	#hamburger button{ float: right; margin-right: 10px; background: #ffffff; display: inline-block; padding: 4px 7px; color: #000000; border: 1px solid #474e61; font-size: 14px; font-weight: 500; font-family: 'Noto Sans KR'; }
	#hamburger .mlogin{ padding-left: 10px; padding-top: 10px; padding-bottom: 10px; height: 30px; background: rgba(255,255,255,1); position: relative; }
	.hamburger_inner .close{top: 0px;right: 8px;position: absolute;display: block;/* width: 40px; *//* height: 40px; */}
	.hamburger_inner .close img{/* width: 50%; */width: 40px;height: 40px;}		
	.main .subcon{ padding: 20px; margin-top: 100px;}
	.bx-list{min-width: auto;         margin-bottom: 40px;        width: 48%;     float: left;        margin-right: 2%;        box-sizing: border-box;} 
}


@media only all and (max-width: 720px){
	.mmain-top .logost{display: none;}
	.con-list{display: flex; flex-direction: column;}
	.bx-list {     min-width: auto;    margin-bottom: 40px;	width: 100%;    }
	.cate-list a{display: block}
	.lettc > div > div input{width: 100%; margin-bottom: 10px}
	.lettit {margin-bottom: 10px}
	.lemail input{max-width: 100%}
	.lebtn{min-width: 100%; width: 100%}
	.footc p{display:block;}
}