@charset "utf-8";

@import url(base.css);
@import url(index.css);
@import url(sub.css);

.iropke{font-family: 'IropkeBatang', serif;};
.gmarket{font-family: 'gmarket', 'NotoSansKR', sans-serif; font-weight: 400;}

.clearfix::after {content: ""; clear: both; display: table;}

.ir{position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px);}
#skip>a{width: 1px; height: 1px; position: absolute; left: -10000px; top: auto; overflow: hidden; display:block;}
#skip>a:hover,
#skip>a:focus, 
#skip>a:active{position:fixed; top:0; left:0; padding:20px; display:block; width:100%; height:auto; font-size: 16px; text-align: center; color:#ffffff; background:#555555; z-index: 9999;}
#skip>a:focus-visible{outline: 2px dashed #ffffff; outline-offset: -5px;} 

.text_line_ellipsis{overflow:hidden; text-overflow: ellipsis; white-space:nowrap; } /*1줄*/
.text_dline_ellipsis{ overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; /* 라인수 */ -webkit-box-orient: vertical;   word-wrap:break-word; line-height: 1.75em; height: 3.5em; /* line-height 가 1.2em 이고 3라인을 자르기 때문에 height는 1.2em * 3 = 3.6em */ }
.text_ellipsis { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; /* 라인수 */ -webkit-box-orient: vertical;   word-wrap:break-word; line-height: 1.5em; height: 3em; /* line-height 가 1.2em 이고 3라인을 자르기 때문에 height는 1.2em * 3 = 3.6em */ }/*2줄*/
/* main{position: relative;} */

.jump_space{ display: inline-block; width: 12px;}
.jump_space2-4{ display: inline-block; width: 1.875em;}
.jump_space3-4{ display: inline-block; width: 0.4375em;}
.btn{display:inline-block; padding:16px 32px; border-radius: 44px; font-size:16px; transition:background-color .3s;  outline:none;}
.section_title{font-size:50px; font-weight:bold; line-height: 1;}
.section_title + p{margin-top: 16px;}
figure{font-size:0; line-height: 1em;}
figure img{width:100%; display:block;}
i img{width: 100%;}



body{margin:0; padding:0; width:100%;}
body.active_burger {position: absolute; top: 0; left: 0; right: 0;  bottom: 0; width: 100%; height: 100%; overflow: hidden;}
header{position: fixed;  width:100%; background: #ffffff; box-sizing: border-box; overflow: hidden; z-index:999;}
/* header.on {border-bottom:1px solid #dddddd;} */
/* header.on .header_top{padding-top:16px;} */

header .header_top{display: flex; justify-content: flex-end; padding:16px 80px 0; transition:padding-top 0.3s; }
header .header_top ul{display: flex; align-items: center; gap:0 10px;}
header .header_top ul li a{display:flex; align-items: center;}
header .header_top ul li.tnav_home .t_icon{margin-right:4px; display:block; width:24px; height:24px; background:url("../images/common/t_home_icon.svg") no-repeat left center; }
header .header_top ul li.tnav_question .t_icon{margin-right:4px; display:block; width:24px; height:24px; background:url("../images/common/t_inquiry_icon.svg") no-repeat left center; }
header .header_top ul li.tnav_location .t_icon{margin-right:4px; display:block; width:24px; height:24px; background:url("../images/common/t_location_icon.svg") no-repeat left center; }

header .header_top ul li a{color:#555555;}
header .header_top ul li:last-child a{height:24px; line-height: 24px;}
header .header_inner{display:flex; justify-content: space-between; align-items: flex-start; padding: 0 80px; border-bottom:1px solid #eeeeee;}
header h1 a {display:block; width:215px; height:auto;}
header .navOpen {display:none;}
header .menu_container{ display: flex; justify-content: flex-end;}
header .menu_container .gnb{ display: flex; margin-right:-60px;}
header .menu_container .gnb a{text-align: center; display:block;}
header .menu_container .gnb>li{position: relative;}
header .menu_container .gnb>li>a{position: relative; padding: 24px 60px 12px; font-size:18px; }
header .menu_container .gnb>li>a:before{content: ""; display:block; position: absolute; top:4px; left:50%; transform:translateX(-50%); width: 0; height: 0; border-top:8px solid transparent; border-bottom:8px solid #0A8822; border-right: 6px solid transparent; border-left: 6px solid  transparent; opacity: 0; transition: opacity 0.3s; }
header .menu_container .gnb>li.active a::before{opacity: 1;}
header .menu_container .gnb .dep_2 {position: absolute; top: 100%; display:none; left:50%; transform:translateX(-50%); padding-top:10px; width:100%; height:0; transition:height 0.2s;} 
header .menu_container .gnb .dep_2 li a{padding:8px 12px; color:#bbbbbb;}
header .menu_container .gnb .dep_2 li a:hover,
header .menu_container .gnb .dep_2 li a:focus{color:#4ccf64;}

header.navOn .menu_container .gnb .dep_2{display:block; height:280px;}
header .m_menu_container{display:none;}
header .navBg {display:block;  z-index:998; width:100%; height:0;  background:#222222; 
		-webkit-transition:height 0.3s ease;
		-moz-transition:height 0.3s ease;
		-o-transition:height 0.3s ease;
		transition:height 0.3s ease;
		background-image: url("../images/common/nav_bg.png");
		background-repeat: no-repeat;
		background-position: 80px 120px;
	}
header.navOn .navBg {height:340px; border-bottom:1px solid #dddddd;}

header .hamburger_wrap{display: none;}

.content_top{padding-top:110px;}
main{padding-bottom: 160px; display:block; outline: none;}


.search_warp{width:100%;}
.search_warp fieldset{display:flex; justify-content: center; align-items: center;}
.search_warp fieldset input{padding:4px 20px; width:400px; height:48px; border:1px solid #0A8822; border-radius: 48px; box-sizing: border-box;}
.search_warp fieldset button{margin-left: 10px; display: block; width:48px; height:48px; background:#0A8822 url("../images/common/search_icon.png")no-repeat center center / 48%; border-radius: 50%; transition: background-color .3s;}
.search_warp fieldset button:hover,
.search_warp fieldset button:focus{background-color: #222222;}

.board{width: 100%; margin-top: 40px;}
.board ul li{border-bottom: 1px solid #dddddd;}
.board ul li a{display: flex; align-items: center; padding:36px 0;  color:#666666; box-sizing: border-box; font-size: 14px; }
.board ul li a .list_num{display:block; width:40px; flex-shrink: 0; text-align: center; }
.board ul li a .list_title{ padding:0 40px; display:block; width:100%; font-size:20px; color:#222222; box-sizing: border-box; }
.board ul li a .list_date{display:block; width:120px; flex-shrink: 0; text-align: center;}
.board .board_header{border-top: 1px solid #dddddd;}
.board .board_header li{padding:20px 0; display: flex; text-align: center; color:#0A6722;}
.board .board_header li .list_num{display:block; width:40px; flex-shrink: 0; }
.board .board_header li .list_title{ padding:0 40px; display:block; width:100%;  }
.board .board_header li .list_date{display:block; width:120px; flex-shrink: 0; }
.board ul li a:hover, .board ul li a:hover .list_title,
.board ul li a:focus, .board ul li a:focus .list_title{color:#0A8822;}
.board .pagenation{margin-top:80px;}




/*pagenation*/
 .pagenation{margin-top:40px; display:flex; justify-content: center;}
 .pagenation .paging_inner_wrap{display:flex; align-items: center;}
 .pagenation .paging_inner_wrap .page_num{position: relative; margin:0 8px; padding:0;  display:inline-block; width:32px; height:32px; text-align: center; vertical-align: top; line-height: 30px; color:#555555;}
 .pagenation .paging_inner_wrap .page_num.active{color:#222222;}
 .pagenation .paging_inner_wrap .page_num.active::before{content:""; position: absolute; bottom:0;
left:50%; transform:translateX(-50%); display:block; width:70%; height:2px; background:#0A8822;}
 .pagenation .paging_inner_wrap .prev_box>a,
 .pagenation .paging_inner_wrap .next_box>a{margin:0 2px; border:1px solid #dddddd;}
 .pagenation .paging_inner_wrap a{position: relative;}
 .pagenation .paging_inner_wrap .first_page:after{content:""; position: absolute; top:0; left:0; display:block; width:100%; height:100%;  background: url("../images/common/paging_first_btn.png") no-repeat center center;}
 .pagenation .paging_inner_wrap .prev_page:after{content:""; position: absolute; top:0; left:0; display:block; width:100%; height:100%;background: url("../images/common/paging_prev_btn.png") no-repeat center center;}
 .pagenation .paging_inner_wrap .next_page:after{content:""; position: absolute; top:0; left:0; display:block; width:100%; height:100%;background: url("../images/common/paging_next_btn.png") no-repeat center center;}
 .pagenation .paging_inner_wrap .last_page:after{content:""; position: absolute; top:0; left:0; display:block; width:100%; height:100%;background: url("../images/common/paging_last_btn.png") no-repeat center center;}
 .pagenation .paging_inner_wrap a:hover,
 .pagenation .paging_inner_wrap a:focus{background:#eeeeee;}
/**/




/*--------------------------*/
/* foooter */
/*--------------------------*/
.scroll_top_btn{position: fixed; right:60px; bottom:60px;  display:block; width:64px; height:64px; background:#0A8822; border-radius: 50%; z-index: 99; box-shadow: 0 2px 10px rgba(34, 34, 34, 0.2); }
.scroll_top_btn::before{content:"TOP"; color:#ffffff;}

#footer {padding: 36px 0 85px;  width:100%; background:#222222; box-sizing: border-box;}
#footer .footer_top{display:flex; align-items: center; padding-bottom:40px; border-bottom:1px solid #333333;}
#footer .footer_top .foot_nav{margin-left: 38px; display: flex;}
#footer .footer_top .foot_nav li a{ padding:12px 38px; display:block; color:#bbbbbb; transition:color .3s;}
#footer .footer_top .foot_nav li a:hover{color:#ffffff;}
#footer .footer_bottom{margin-top:60px;}
#footer .footer_bottom .cs_number{display:flex; align-items: center; color:#bbbbbb}
#footer .footer_bottom .cs_number span{font-weight: normal;}
#footer .footer_bottom .cs_number .call_number{margin-left: 18px; display:block; font-size:30px; font-weight:bold; color:#ffffff; }
#footer .footer_bottom address{display:flex; margin-top:20px; }
#footer .footer_bottom address p,
#footer .footer_bottom address a,
#footer .footer_bottom address span{color:#bbbbbb; font-weight:200;}
#footer .footer_bottom address>p{display:inline-block; margin-right: 28px;}
#footer .footer_bottom .copyright{margin-top:7px; display:block; color:#bbbbbb;}

/* 접근성 마크 */
.wa_wrap{margin-top:20px; }
.wa_wrap a{display: block; width: 140px;}
.wa_wrap .img_wrap img{width: 100%;}

.webmail_btn{margin-top:40px; padding: 4px 12px; display:inline-block; font-size:14px; color:#aaaaaa!important; border:1px solid #aaaaaa;}
.webmail_btn:focus-visible{outline-color: red;}

.gallery_view .detail_content .img_wrap{display: flex; justify-content: center;}
.gallery_view .detail_content .img_wrap img{width: auto; max-width: 100%;}

@media(max-width:1240px) {
	header .header_top { padding: 16px 60px 0;}
	header .header_top ul li{font-size:14px; background-position: left top!important; }
	header .header_inner {padding: 0 60px;}
	header .navBg { background-size: 36%;}
	header .menu_container .gnb {margin-right: -32px;}
	header .menu_container .gnb>li>a { padding: 20px 32px 12px; font-size: 16px;}
	

	.section_title { font-size: 40px;}
	.content_top {padding-top: 101px;}
	.btn { padding: 12px 28px; font-size: 15px;}	

	

	#footer .footer_top .foot_nav li a {padding: 12px 20px; }
}


@media(max-width:1024px) {
	header h1 a { width: 180px;}
	header .header_top {display:none;}
	header .navBg {display:none;}
	header {overflow: hidden;}
	header .header_inner { padding: 20px 5%;}

	header .menu_container{position: relative;}
	header .menu_container .gnb{display:none;}
	header .menu_container .mgnb{position: absolute; }
	header .m_menu_container{position: fixed; top:0; right:0; padding:90px 32px;  display:none; width:320px; height:100vh; background-color: #ffffff; box-sizing: border-box; z-index: 9998; background-image: url("../images/common/nav_bg.png"); background-position: center bottom 60px; background-repeat: no-repeat; background-size: 80%; }
	header .m_menu_container .mgnb .dep_1{position: relative;}
	header .m_menu_container .mgnb .dep_1>a{ display:block; padding:10px 0; font-size:18px;}
	header .m_menu_container .mgnb .dep_1 a.on{position: relative; color:#0A8822; }
	header .m_menu_container .mgnb .dep_1 a.on::before{content:""; position: absolute; top:50%; left:-20px; transform:translateY(-50%); display:block;  
	border-top:4px solid transparent; border-bottom:4px solid transparent; border-right: 6px solid #0A8822; border-left: 6px solid  transparent; } 

	header .m_menu_container .mgnb .dep_2{position: absolute; left:0; padding:0 10px; width:100%; height:100vh; background:#ffffff;}
	header .hamburger_wrap{display:flex; flex-direction: column; justify-content: space-between;  padding:10px 8px; width:48px; height:48px; box-sizing: border-box; cursor: pointer; }
	header .m_menu_container .mgnb .dep_2 li a{padding:8px 0; display:block; color:#555555;}
	header .m_menu_container .mgnb .dep_2 li a:hover,
	header .m_menu_container .mgnb .dep_2 li a:focus{color:#0A8822;}

	header .hamburger_wrap .ham_line{display:block; width:100%; height:4px; background: #222222;}	
	header .m_menu_container .close_btn { position: absolute; top:15px;  left: -40px; display: flex; flex-direction: column; justify-content: center; width: 40px; height: 40px; padding:4px 8px; box-sizing: border-box; cursor: pointer; background: #222222;  }	
	header .m_menu_container .close_btn .close_line{position: relative; display:block; width:100%; height:2px; background: #ffffff;}
	header .m_menu_container .close_btn .close_line.line_1{top:1px; transform: rotate(-45deg);}
	header .m_menu_container .close_btn .close_line.line_2{top:-1px; transform: rotate(45deg);}
	.mnav_Bg{position:fixed; display:none; width:100%; height:100vh; background: rgba(0, 0, 0, 0.8); z-index: 9996;}

	header .m_menu_container .m_header_top{position: absolute; top: 20px; right:20px;}
	header .m_menu_container .m_header_top ul{display:flex;}
	header .m_menu_container .m_header_top ul li a{display: block; width:32px; height:32px; padding:0 10px; }
	header .m_menu_container .m_header_top ul li:nth-child(1) a{background: url("../images/common/t_home_icon.svg") no-repeat center;}
	header .m_menu_container .m_header_top ul li:nth-child(2) a{background: url("../images/common/t_inquiry_icon.svg") no-repeat center;}
	header .m_menu_container .m_header_top ul li:nth-child(3) a{background: url("../images/common/t_location_icon.svg") no-repeat center;}

	.content_top {padding-top: 89px;}
	#footer .footer_top {flex-direction: column;}
	#footer .footer_top .foot_nav {margin-top:20px; margin-left: 0;}
	#footer .footer_bottom {margin-top: 28px;}
	#footer .footer_bottom address { flex-direction: column; text-align: center;}
	#footer .footer_bottom address>p {margin-right: 0;} 
	#footer .footer_bottom .cs_number {justify-content: center;}
	#footer .footer_bottom .copyright {  margin-top: 7px; text-align: center;}

    /* 접근성 마크 */
    .wa_wrap{display: flex; justify-content: center; }
    .wa_wrap a{width: 120px;}
}

@media(max-width:768px) {
	.section_title {font-size: 36px;}
	.btn {padding: 12px 24px; border-radius: 32px; font-size: 14;}
	.scroll_top_btn { right: 20px; bottom: 10px; width:56px; height:56px;}
	#footer .footer_top .foot_nav li a {padding: 12px 8px; font-size:14px;}
	#footer figure{width:150px;}
	#footer .footer_top {padding-bottom: 24px;}
	#footer .footer_bottom address {margin-top:10px; font-size: 14px;}
	#footer .footer_bottom .copylight {font-size:14px;}
	#footer .footer_bottom .cs_number span {font-size:14px;}
	#footer .footer_bottom .cs_number .call_number{font-size:24px;}

	.board ul li a .list_num {display: none;}
	.board ul li a {padding: 28px 0;}
	.board ul li a .list_title {padding: 0 16px 0 8px; font-size: 16px;}
	.board ul li a .list_date { width: 80px;}
	.board .board_header li .list_num{display: none;}
	.board .board_header li .list_date { width: 80px;}	
}

@media(max-width:540px) {	
	body, input, select, textarea, button {font-size:15px;  }
	header .hamburger_wrap {width: 40px; height: 40px;}
	header .header_inner {padding: 16px 3%;}
	header h1 a {width: 150px;}
	
	.content_top {padding-top: 73px;}
	.section_title {font-size: 32px;}
	.btn {padding: 10px 20px; font-size: 12;}

	main {padding-bottom: 100px;}

	header .m_menu_container{width:100%; }
	header .m_menu_container .close_btn {left: 0;}	

	.board ul li a {padding: 20px 0; flex-direction: column; align-items: flex-end;}
	.board .board_header li {display: none;}
	.board ul li a .list_date {margin-top:4px;}	
	.pagenation .paging_inner_wrap .page_num {margin: 0 4px;}


}