@charset "utf-8";

/* background fixed 사용시 버그 대응용 * 한 번 스크롤로 페이지 전체 넘김을 할 때는 html스타일에서 height속성 제거하기 */
/* html {overflow: hidden; height: 100%;} */
/* body {overflow: auto; height: 100%;} */

/* ************************ 셋팅 ************************ */
:root {
	--red:#f00;
	--primary:#C88B66;
	--secondary:#F5F5F5;
	--base1:#C88B66;
	--base2:#73A950;
	--darkGray:#283A54;
	--sky:#40B4E5;
	--gray:#666;
	--gray1:#F8F8FA;
	--gray2:#a9a9a9;
	--bgcGray1:#e5e5e5;
	--bgcGray2:rgba(0, 0, 0, 0.10);
	--bgcGray3:rgba(0, 0, 0, 0.15);
	--bgcGray4:rgba(0, 0, 0, 0.03);
	--bgcGray5:rgba(255, 255, 255, 0.20);
	--bgcGray6:rgba(0, 0, 0, 0.20);
	--bgcGray7:rgba(0, 0, 0, 0.3);
	--bgcGray8:rgba(255, 255, 255, 0.30);
	--f_Pretendard:'Pretendard';
	--textRotate:rotate(0.03deg);
	
	

	
	
	--fontSize13:1.3rem;
	--fontSize14:1.4rem;
	--fontSize15:1.5rem;
	--fontSize16:1.6rem;
	--fontSize18:1.8rem;
	--fontSize20:2rem;
	--fontSize21:2.1rem;
	--fontSize22:2.2rem;
	--fontSize24:2.4rem;
	--fontSize28:2.8rem;
	--fontSize32:3.2rem;
	--fontSize35:3.5rem;
	--fontSize40:4rem;
	
	
	
	--ani:all .3s;
}
@media (max-width: 1024px) {
	:root {

		--fontSize14:1.3rem;
		--fontSize16:1.5rem;
		--fontSize18:1.7rem;
		--fontSize22:2.1rem;
		--fontSize40:3.6rem;
			
		
	}
}

@media (max-width: 767px) {
	:root {
		
		--fontSize14:1.3rem;
		--fontSize16:1.4rem;
		--fontSize18:1.5rem;
		--fontSize20:1.6rem;
		--fontSize22:1.7rem;
		--fontSize24:1.8rem;
		--fontSize40:2.7rem;
	}
}

html {font-size:0.625rem;}
html body {font-family:var(--f_Pretendard), sans-serif; font-size:var(--fontSize18); font-weight:400; line-height:1.6; color:#3d3d3d; word-break:keep-all; overflow-x:hidden;}

.c_red {color:var(--red) !important;}
.c_primary {color:var(--primary) !important;}
.c_secondary {color:var(--secondary) !important;}
.c_darkGray {color:var(--darkGray) !important;}
.c_sky {color:var(--sky) !important;}
.c_gray {color:var(--gray) !important;}

.bgc_red {background-color:var(--red) !important;}
.bgc_primary {background-color:var(--primary) !important;}
.bgc_secondary {background-color:var(--secondary) !important;}
.bgc_darkGray {background-color:var(--darkGray) !important;}
.bgc_sky {background-color:var(--sky) !important;}
.bgc_gray {background-color:var(--gray) !important;}

.f_Pretendard {font-family:var(--f_Pretendard) !important;}

a {text-decoration:none !important; outline:none !important; selector-dummy:expression(this.hideFocus=true) !important; transition:var(--ani);color:inherit;}
a:link, a:visited, a:hover, a:active {text-decoration:none; color:inherit;}

body pre {
	font-family:var(--f_Pretendard), sans-serif;font-size:var(--fontSize18); line-height:2; color:#666;
	margin: 0; padding: 0;
	word-break: keep-all;
	overflow: hidden;
	word-wrap: break-word;
	white-space: pre-wrap; /* CSS3*/
	white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
	white-space: -pre-wrap; /* Opera 4-6 */
	white-space: -o-pre-wrap; /* Opera 7 */
	word-wrap: break-all; /* Internet Explorer 5.5+ */ 
}
body pre strong {padding:0 0 10px; color:#000; font-size:var(--fontSize16);}

/* 폼 */
form {}
form legend {margin:0 0 20px; padding:0 0 10px; font-size:var(--fontSize21); border-bottom:1px solid var(--border2); line-height:1; font-weight:700;}

button {cursor:pointer; background:none; padding:0; transition:var(--ani);}
label {color:#333; font-size:var(--fontSize14);}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
/* Firefox */
body input[type=number] {-moz-appearance: textfield;}

/* autofill 스타일 */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
	-webkit-text-fill-color: #000;
    -webkit-box-shadow: 0 0 0px 1000px #fff inset;
    box-shadow: 0 0 0px 1000px #fff inset;
    transition: background-color 5000s ease-in-out 0s;
}

input:autofill,
input:autofill:hover,
input:autofill:focus,
input:autofill:active {
	-webkit-text-fill-color: #000;
    -webkit-box-shadow: 0 0 0px 1000px #fff inset;
    box-shadow: 0 0 0px 1000px #fff inset;
    transition: background-color 5000s ease-in-out 0s;
}

body input[type="checkbox"] {}
body input[type="checkbox" i] {}
body input[type="checkbox"]:focus {outline:0;}

body input[type="radio"] {
	vertical-align: middle;
	line-height:40px;
}
body input[type="radio" i] {margin:0 5px 0 0; outline:0;}
body input[type="radio"]:focus {outline:0;}

body select::-ms-expand { display: none; } /* IE 10, 11의 네이티브 화살표 숨기기 */
body select option {color:inherit;}
body select [selected] {color:inherit;}
body select :selected {color:inherit;}
body select ::selected {color:inherit;}
body select {
	-webkit-appearance:none; /* 크롬 화살표 없애기 */
    -moz-appearance:none; /* 파이어폭스 화살표 없애기 */
    appearance:none; /* 화살표 없애기 */
	min-height:30px; height:40px; border-radius:7px; color:#000; font-size:var(--fontSize14);
	padding:0 38px 0 7px; border:1px solid var(--bgcGray3); cursor:pointer;
	background:#fff calc(100% - 15px) 50% /auto no-repeat;
	background-image:url(../images/icon/selectArrow.svg);

}
body textarea {padding:10px; font-size:var(--fontSize14); line-height:1.4; min-height:120px; border:1px solid var(--bgcGray3);resize:none !important; width:100%; border-radius:7px;}
body label {vertical-align:middle; margin:0;}
body input[type="text"],
body input[type="password"],
body input[type=number] {color:#000; max-width:100%; min-width:40px; padding:0 20px; min-height:40px; line-height:38px; font-size:var(--fontSize14); border-radius:7px; border:1px solid var(--bgcGray3);}
body input[readonly] {background-color:var(--lightGray) !important;}
body input[readonly].no_access {background-color:#f9f9f9; border:1px solid var(--bgcGray3); color:#555; cursor:not-allowed;}
body input[readonly]:focus {outline:none; border:1px solid var(--bgcGray3);}
body button {cursor:pointer; background:transparent; padding:0;}

body input[type="file"] {width:100%; font-size:14px;}

body input[type='date']{
	position: relative; font-size:var(--fontSize14); min-width:85px;
	padding:0 30px 0 10px; border:1px solid var(--bgcGray3); min-height:40px; line-height:36px;  border-radius:7px;
	background:#fff calc(100% - 10px) center /17px no-repeat ;
	background-image:url(../images/icon/cal.svg);
}
body input[type='date']::-webkit-calendar-picker-indicator {
	position: absolute; left: 0; top: 0; width: 100%; height: 100%;
	background: transparent; color: transparent; cursor: pointer;
}
body input[type='date']::before {
  content: attr(placeholder);
  width: 100%;
  height: 100%;
}
body input[type='date']:valid::before {
  display: none;
}


/* 파일박스 */
.filebox.type1 {display:flex; gap:0 !important;}
.filebox.type1 input[type="file"] {position: absolute;width: 0;height: 0;padding: 0;overflow: hidden;border: 0; visibility:hidden;}
.filebox.type1 label {font-size:var(--fontSize14); display: inline-block;border-radius:5px;color: #fff; text-align:center;vertical-align: middle;background-color:var(--indigo); white-space:nowrap;cursor: pointer; width:70px;height: 40px; line-height:40px;margin-left: 5px;}
.filebox.type1 .upload-name {display: inline-block;height: 40px; border-radius:5px;padding: 0 10px;vertical-align: middle;border: 1px solid var(--border1);width:calc(100% - 75px);color: #000;}
.filebox.type1 .currFile {padding:10px 0 0;}

/* 버튼 */
.btn {border:2px solid transparent; padding:0; font-size:var(--fontSize16);}


/* 폰트 특성상 넣는 속성 */
/* text {transform:var(--textRotate); display:inline-block;} */
/* h3,h4,h5,h6,h7,h8,p,span,b,button,a,li,label {transform:var(--textRotate);} */

.mobile {display:none;}

/* ***** 페이징 ***** */
.page_box {text-align:center; position:relative;}
.pagination {
	margin:50px 0 0; justify-content:center;
	--bs-pagination-font-size:var(--fontSize16);
}
.pagination span {}
.pagination>li>a, .pagination>li>span {
	padding:0;display:flex; align-items:center; justify-content:center;
	color:#666; width:40px; height:40px; border:1px solid var(--border1);
}
.pagination>li>a:focus, .pagination>li>a:hover, .pagination>li>span:focus, .pagination>li>span:hover {
	color:#666;
}
.pagination>.active>a, .pagination>.active>a:focus, .pagination>.active>a:hover, .pagination>.active>span, .pagination>.active>span:focus, .pagination>.active>span:hover {
	color:#fff; background-color:var(--blue);border-color:var(--blue);
}

.lnb .cover {background:rgba(0,0,0,.5); position:absolute; left:0; top:0; right:0; bottom:0;}
.lnb.intro {background-image:url(../images/common/bg-intro.webp);}
.lnb.dev {background-image:url(../images/common/bg-dev.WEBP);}
.lnb.people {background-image:url(../images/common/bg-people.WEBP);}
.lnb.medicheck {background-image:url(../images/common/bg-medicheck.WEBP);}
.lnb.hdl {background-image:url(../images/common/bg-hdl.WEBP);}
.lnb.contact {background-image:url(../images/common/bg-contact.WEBP);}


.ellipsis {overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.ellipsis2 {
	display:-webkit-box;
	-webkit-box-orient:vertical;
	-webkit-line-clamp:2;
	overflow:hidden;
	text-overflow:ellipsis;
}
.ellipsis3 {
	display:-webkit-box;
	-webkit-box-orient:vertical;
	-webkit-line-clamp:3;
	overflow:hidden;
	text-overflow:ellipsis;
}


.box:before,
.box:after {content:''; display:block; clear:both;}



/* ************************ 데스크탑 (1200~) ************************ */
@media screen and (min-width: 1025px), print {

	/* 공통 */
	.mobile {display:none !important;}
	.w_90per {width:90%; margin:0 auto!important; max-width:100%;}
	body .w1400 {width:1400px; margin:0 auto!important; max-width:100%;}
	body .w1600 {width:1600px; margin:0 auto!important; max-width:100%;}

	/* 헤더 */
	header {z-index:999; position:absolute; width:100%;}
	header .head {position: relative; top: 0; z-index: 9;}
	header .head h1 {position:absolute; left:0; top:0;}
	header .head h1 a {height:110px; display:flex; align-items:center;}
	header .head h1 img {height:55px;}
	header.on .head h1 img {display:none;}
	header .head h1 img.hover {display:none;}
	header.on .head h1 img.hover {display:block;}
	
	header .head aside {position:absolute; right:0; top:48px;}
	header .head aside ul {display:flex; gap:15px;}
	header .head aside ul li a {color:#fff; font-size:var(--fontSize15);}
	header.on .head aside ul li a {color:#000;}
	
	.headerH {height:120px;}
	
	

	/* gnb */
	nav.pc {margin:0 auto; overflow:hidden; color:#fff; position:relative;}
	nav.pc.on {background:#fff; color:#000; border-bottom:1px solid #e5e5e5;}
	nav.pc .gnb {position:relative; top:0;}
	nav.pc .gnb>ul {height:160px; display:flex; justify-content:space-between; align-items:flex-end;}
	nav.pc .gnb>ul>li {position:relative;}
	nav.pc .gnb>ul>li>a {display:block; padding:0 0 15px 0; font-weight:600; font-size:var(--fontSize22); position:relative;}
	nav.pc .gnb>ul>li>a:hover {color:var(--primary);}
	nav.pc .gnb>ul>li>ul {padding:34px 0 50px 0; position:absolute; gap:10px; display:flex; flex-direction:column;}
	nav.pc .gnb>ul>li>ul>li {}
	nav.pc .gnb>ul>li>ul>li a {display:inline-block; color:#3D3D3D; white-space:nowrap; border-bottom:1px solid transparent;}
	nav.pc .gnb>ul>li>ul>li.on>a,
	nav.pc .gnb>ul>li>ul>li>a:hover {color:var(--primary); border-bottom:1px solid var(--primary); transition:var(--ani)}
	nav.pc .gnb>ul>li>ul>li>ul {padding-top:3px;}
	nav.pc .gnb>ul>li>ul>ol>li>a {position:relative; font-size:var(--fontSize15); color:#8f8f8f; padding-left:15px; transition:var(--ani)}
	nav.pc .gnb>ul>li>ul>ol>li>a:after {position: absolute; content: ""; display: block; width: 5px; height: 5px; border-radius: 50%; background: #ddd; left: 0; top: 6px; transition:var(--ani)}
	nav.pc .gnb>ul>li>ul>ol>li>a:hover {color:var(--primary);}
	nav.pc .gnb>ul>li>ul>ol>li>a:hover:after {background:var(--primary);}

	
	nav.pc .navbg {width:100%; position:absolute; left:0; top:1px;}
	nav.pc .navbg .dep1 {position:absolute; width:100%; height:160px; border-bottom:1px solid rgba(255, 255, 255, .15);}
	nav.pc.on .navbg .dep1 {border-bottom:1px solid #e5e5e5;}
	nav.pc .navbg .dep2 {}
	
	
	
	
	/*서브메뉴*/
	.sub-visual {position:relative; height:450px; background:#333;}
	.sub-visual:before {position:absolute; top:0; left:0; z-index:1; content:""; width:100%; height:100%; background:rgba(0,0,0,.1);}
	.sub-visual-wrap {width:100%; max-width:1400px; margin:0 auto; padding-top:250px;}
	.sub-visual-text {position:relative; z-index:2; color:#fff;}
	.sub-visual-text h2 {font-size:var(--fontSize40); margin-bottom:25px; font-weight:800; text-align:center;}
	.sub-visual-text p {line-height:1.3;}
	
	.sub-visual.intro {background:url(../images/common/bg-intro.webp) no-repeat; background-size: cover; background-repeat: no-repeat; background-position: center;}
	.sub-visual.wildanimals {background:url(../images/common/bg-wildanimals.webp) no-repeat; background-size: cover; background-repeat: no-repeat; background-position: center;}
	.sub-visual.archive {background:url(../images/common/bg-archive.webp) no-repeat; background-size: cover; background-repeat: no-repeat; background-position: center;}
	.sub-visual.education {background:url(../images/common/bg-education.webp) no-repeat; background-size: cover; background-repeat: no-repeat; background-position: center;}
	.sub-visual.news {background:url(../images/common/bg-news.webp) no-repeat; background-size: cover; background-repeat: no-repeat; background-position: center;}
	.sub-visual.special {background:url(../images/common/bg-special.webp) no-repeat; background-size: cover; background-repeat: no-repeat; background-position: center;}
	
	
	.lnb {position:absolute; z-index:998; top:390px; left:0; width:100%; height:60px; border-top:1px solid rgba(255,255,255,0.2); background:var(--bgcGray2); backdrop-filter: blur(10px);}
	.lnb .lnb-wrap {position:relative; height:100%; max-width:1400px; margin:0 auto; font-weight:600;}
	.lnb .lnb-wrap>* {float:left;}
	.lnb>ul {}
	.lnb>ul>li {float:left; border-left:1px solid rgba(255,255,255,0.2);}
	.lnb>ul>li.dep-2 {border-right:1px solid rgba(255,255,255,0.2);}
	.lnb>ul>li.dep-3 {border-left:0; border-right:1px solid rgba(255,255,255,0.2);}
	.lnb>ul>li>a {}

	.lnb>ul>li.menu {position:relative; width:260px}
	.lnb>ul>li.menu>a {padding:0 40px 0 20px; display:block; line-height:60px; background:url(../images/common/lnb-more.png)right 20px center no-repeat; color:#fff; font-size:var(--fontSize16);}

	.lnb>ul>li.home {width: 80px;}
	.lnb>ul>li.home>a {display: block; height: 60px; font-size:var(--fontSize14); border-top: 0; border-bottom: 0; background:none;}
	

	.lnb>ul>li.menu ul {display:none; width:100%; position:absolute; left:0; top:60px; background:#fff; box-shadow:0 5px 10px rgba(0,0,0,.2);}
	.lnb>ul>li.menu ul li {}
	.lnb>ul>li.menu ul li+li {border-top:1px solid #e5e5e5;}
	.lnb>ul>li.menu ul li a {display:block; padding:0 20px; line-height:44px; font-size:var(--fontSize15);}
	.lnb>ul>li.menu ul li a:hover {background:#f9f9f9; color:var(--base);}
	.lnb>ul>li.menu ul li.on a {color:var(--base);}
	.lnb>ul>li.menu:hover ul {display:block;}
	
	
	.loca_ul {float:right !important; display:flex; color:#1d1d1d; font-size:var(--fontSize15); line-height:60px; color:#fff;}
	.loca_ul li {position:relative; margin-left:30px; }
	.loca_ul li:before {content:""; width:6px; height:10px; position:absolute; left:-17px; top:24px; background:url(../images/common/loca-arrow.png) no-repeat left center;}
	.loca_ul li:first-child:before {content:none;}
	.loca_ul img {margin-bottom:4px;}
	.loca_ul li a {display:block; width:60px; height:60px; background:url(../images/common/lnb-gotop.png) right no-repeat;}

	.lnb.fixOn {position:fixed !important; width:100%; z-index:1000 !important; top:0 !important; background:rgba(0,0,0,.4);}
	

	.sub-content ul {display:flex; justify-content: space-between; align-items: center; padding:100px 0;}
	.sub-content ul li h3 {font-size:var(--fontSize40); color:#000; font-weight:800;}
	.sub-content ul li h4 {font-size:var(--fontSize40); color:#000; font-weight:800;}
	.sub-content ul li span {position:relative; font-size:var(--fontSize14); color:#888;}
	.sub-content ul li span+span {padding-left:15px;}
	.sub-content ul li span+span:before {content:""; position:absolute; left:0; top:50%; transform:translateY(-50%) rotate(-45deg); width:10px; height:1px; background:#ccc;}
	
	
	
	/*컨텐츠*/
	body .contents {display:block !important;}
	body .contents-wrap {padding-bottom:150px;}

	
	/* 하단 */
	footer.d-page {padding:50px 0; background:var(--secondary); color:var(--gray); font-weight:400;}
	footer.d-page .footerWrap {display: flex; justify-content: space-between; align-items: center;}
	footer.d-page .footerWrap>div {display: flex; gap:20px; align-items: center;}
	footer.d-page h3 {font-weight:800; color:#000 !important; padding: 13px 0 9px 0;}
	footer.d-page .footerLogo {}
	footer.d-page .footerLogo img {}
	footer.d-page .footerInfo {display:flex;} 
	footer.d-page .footerInfo p {line-height:1.3;}
	footer.d-page .footerInfo .add {}
	footer.d-page .footerInfo .add span {}
	footer.d-page .footerFamily {position:absolute; right:0; top:0;}
	footer.d-page .footerFamily>a {font-size:var(--fontSize14); font-weight:500; width: 245px; height: 50px; line-height:48px; padding: 0px 15px; background:url(../images/icon/familyArrow.svg) calc(100% - 15px) center no-repeat; display:block;border-radius: 5px;border: 1px solid rgba(255, 255, 255, 0.15);}
	footer.d-page .footerFamily ul {display:none; margin:-1px 0 0; border-radius:5px; overflow:hidden;}
	footer.d-page .footerFamily ul li {}
	footer.d-page .footerFamily ul li a {font-size:var(--fontSize14); font-weight:500; padding:10px 15px; display:block; border: 1px solid rgba(255, 255, 255, 0.15);}
	footer.d-page .footerFamily ul li a:hover {background-color:#333;}
	

	footer .footerWrap .right .f-site {position:relative; width:242px;}
	footer .footerWrap .right .f-site > a {display:block; position:relative; color:#000; font-size:16px; font-weight:500; background-color:#fff; border:1px solid #ddd; height:50px; line-height:50px; padding:0 20px; white-space:nowrap; border-radius:10px;}
	footer .footerWrap .right .f-site ul {z-index:99; position:absolute; bottom:100%; width:100%; border:1px solid #e5e5e5; font-size:14px; overflow:hidden; border-radius:10px; margin-bottom:10px;}
	footer .footerWrap .right .f-site ul li a {display:block; background:#fff; padding:12px 20px;}
	footer .footerWrap .right .f-site ul li a:hover {background:var(--base1); color:#fff;}
	footer .footerWrap .right .f-site ul li+li a {border-top:1px solid #e5e5e5;}
	footer .footerWrap .right .f-site > a .arrow-updown {position:absolute; right:20px; top:42%; transition:all 0.3s; width:14px; height:9px; background:url(../images/common/f-site-arrow.png) no-repeat center/cover;}
	footer .footerWrap .right .f-site > a .arrow-updown.on {transform:rotate(180deg);}
	footer .footerWrap .right .f-site a:last-child {margin-right:0;}
	footer .footerWrap .right .f-site a:last-child:after {display:none;}
	footer .footerWrap .right span {font-weight:600; color:#000;}

	
	
}

/* ************************ 테블릿 (~1199) ************************ */
@media screen and (max-width: 1024px) {
	
	/*공통*/
	.pc {display:none !important;}
	.mobile {display:block;}
	
	
	/*헤더*/
	.headerH {height:60px;}
	header {z-index:999; width:100%; left:0; top:0;height:60px; position:absolute;}
	header .head {z-index:100; position:absolute; left:0; top:0; width:100%; height:60px; overflow:hidden; line-height:1; box-shadow:0 3px 3px 3px rgba(0,0,0,.1); background:#fff;}
	header .head .gnbView {display:block; position:absolute; display:table; right:0; top:0; width:60px; height:60px; text-align:center; background:url(../images/common/i-menu.png) no-repeat 50%; background-size:35%;}
	header .head h1 {padding-left:20px; height:100%; display:flex; align-items:center;}
	/* header .head h1 a {height:100%; display:flex; align-items:center;} */
	header .head h1 a img {height:40px;}

	
	/*gnb*/
	header nav.mobile {z-index:9999; position:fixed; visibility:hidden; top:0; width:80%; overflow:hidden; background-color:#fff; overflow-y: auto;}
	header nav.mobile[data-arrow='left'] {left:0;}
	header nav.mobile[data-arrow='right'] {left:100%;}
	header nav.mobile .closeWrap {z-index:1; position:relative; height:60px; background-color:#fff; color:#000; box-shadow:0 3px 5px rgba(0,0,0,.1);}
	header nav.mobile .closeWrap .gnbClose {display:block; float:right; width:60px; height:100%; background:url(../images/common/icon_x2.png) 50% 50% no-repeat; background-size:30%; border-left:1px solid #e0e0e0;}
	header nav.mobile .closeWrap aside {display:flex; float:right; height:100%; align-items:center; gap:15px;}
	header nav.mobile .closeWrap aside a {position:relative;}
	header nav.mobile .closeWrap aside a.on:after {content:""; display:block; width:100%; height:2px; background:var(--primary); position:absolute; bottom:-2px;}
	header nav.mobile .closeWrap aside a.on {color:var(--primary); font-weight:700;}	
	header nav.mobile .closeWrap a.home {width:60px; height:60px; display:inline-block; /*border-right:1px solid #e0e0e0;*/ background-size: 22px !important; line-height:60px; text-align:center; font-size:var(--fontSize13); color:#000; /*background: url(../images/common/i_home.png) no-repeat 50%;  font-size: 0;*/ margin-left:10px;}
	.gnbCover {z-index:9998; position:fixed; left:0; top:0; display:none; width:100%; height:100%; background:rgba(0,0,0,.5);}

	header nav.mobile .gnb {}
	header nav.mobile .gnb>ul>li>a {display:block; padding:15px 20px; border-bottom:1px solid #ddd; background:#fff; letter-spacing:-.5px; font-weight:500; transition:var(--ani);}
	header nav.mobile .gnb>ul>li>a:hover {background:#f7f7f7;}
	header nav.mobile .gnb>ul>li.on>a {background:var(--primary); color:#fff;}
	header nav.mobile .gnb>ul>li ul{border-bottom:5px solid #eee}
	header nav.mobile .gnb>ul>li ul>li {}
	header nav.mobile .gnb>ul>li ul>li>a {display:block; padding:13px 20px; font-size:var(--fontSize15); color:#555; letter-spacing:-.5px; border-top:1px dotted #ddd; font-weight:400;}
	header nav.mobile .gnb>ul>li ul>li>ul>li.on a {color:var(--primary);}
	header nav.mobile .gnb>ul>li ul>li>a:hover {background-color:#f5f5f5;}
	header nav.mobile .gnb>ul>li ul>li.on>a {color:var(--primary);}
	
	header nav.mobile .gnb>ul>li.on ol>li>a {position:relative; width:100%; display:inline-block; background:#eee; padding:8px 20px; padding-left:30px; font-size: 14px; color:#858585;}
	header nav.mobile .gnb>ul>li.on ol>li>a:before {position: absolute; content: ""; left: 20px; top: 16px; width: 3px; height: 3px; border-radius: 100px; background: #c2c2c2;}
	header nav.mobile .gnb>ul>li.on ol>li>a:hover {color:#555;}
	
	
	/*서브메뉴*/	
	.lnb {background:center /cover no-repeat;  position:relative; border-bottom: 1px solid var(--border1);}
	.lnb .lnbWrap {}
	.lnb .lnbTit {padding:85px 0 60px;font-size:var(--fontSize40);font-weight: 800; color:var(--primary); position:relative; text-align:center;}
	.lnb .lnbMenu {width:100%; border-top: 1px solid rgba(255, 255, 255, 0.15);background: rgba(0, 0, 0, 0.10);backdrop-filter: blur(10px);}
	.lnb .lnbMenuWrap {padding:20px 0; display:flex; justify-content:center; }
	.lnb .lnbNavi {display:flex; align-items:center;}
	.lnb .lnbNavi span {color:#fff; line-height:1; font-size:var(--fontSize14); font-weight:500; }
	.lnb .lnbNavi span.home {padding:0 0 0 24px ; background:url(../images/icon/home.svg)0 center no-repeat;}
	.lnb .lnbNavi span+span {margin-left:10px; padding-left:16px; background:url(../images/icon/naviArrow.svg)0 center no-repeat;}
	.lnb .lnbNavi span:last-child {color:var(--primary);}
	
	.sub-content ul {display:flex; justify-content: space-between; align-items: center; padding:20px 30px;}
	.sub-content ul li h3 {font-size:var(--fontSize40); color:#000; font-weight:800;}

	.sub-content ul li h4 {font-size:var(--fontSize40); color:#000; font-weight:800;}
	.sub-content ul li span {position:relative; font-size:var(--fontSize14); color:#888;}
	.sub-content ul li span+span {padding-left:15px;}
	.sub-content ul li span+span:before {content:""; position:absolute; left:0; top:50%; transform:translateY(-50%) rotate(-45deg); width:10px; height:1px; background:#ccc;}
	
	.sub-visual {height:200px; color: #fff; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center;}
	.sub-visual h2 {font-size:var(--fontSize35); font-weight:700;}
	
	.sub-visual.intro {background:url(../images/common/bg-intro.webp) no-repeat; background-size: cover; background-repeat: no-repeat; background-position: center;}
	.sub-visual.wildanimals {background:url(../images/common/bg-wildanimals.webp) no-repeat; background-size: cover; background-repeat: no-repeat; background-position: center;}
	.sub-visual.archive {background:url(../images/common/bg-archive.webp) no-repeat; background-size: cover; background-repeat: no-repeat; background-position: center;}
	.sub-visual.education {background:url(../images/common/bg-education.webp) no-repeat; background-size: cover; background-repeat: no-repeat; background-position: center;}
	.sub-visual.news {background:url(../images/common/bg-news.webp) no-repeat; background-size: cover; background-repeat: no-repeat; background-position: center;}
	.sub-visual.special {background:url(../images/common/bg-special.webp) no-repeat; background-size: cover; background-repeat: no-repeat; background-position: center;}
	
	
	
	/*컨텐츠*/
	body .contents {padding:0; display:block !important;}
	
	
	/* 하단 */
	footer {padding:30px; background:var(--secondary); color:var(--gray); font-weight:400; position:relative; text-align:center;}
	footer .footerWrap {}
	footer .footerLogo {padding:0 0 20px; display: flex; justify-content: center;}
	footer .footerLogo img {height:50px;}
	footer .footerInfo {}
	footer .footerInfo p {padding:0 !important;}
	footer .footerInfo .add {font-size:16px;}
	footer .footerInfo .add span {}
	footer .footerInfo p.copy {padding:16px 0 0;}
	footer .footerFamily {position:absolute; right:0; top:0; width:100%;}
	footer .footerFamily>a {width:100%; height: 50px; line-height:48px; font-size:var(--fontSize14); font-weight:500; padding: 0px 15px; background:url(../images/icon/familyArrow.svg) calc(100% - 15px) center no-repeat; display:block; border-bottom: 1px solid rgba(255, 255, 255, 0.15);}
	footer .footerFamily ul {display:none;}
	footer .footerFamily ul li {}
	footer .footerFamily ul li a {font-size:var(--fontSize14); font-weight:500; padding:10px 15px; display:block; border: 1px solid rgba(255, 255, 255, 0.15);background:var(--secondary);}
	
	
	footer.d-page h3 {font-weight: 800; color: #000 !important; padding-bottom: 10px;}
	
	footer .footerWrap .right {padding-top:20px;}
	footer .footerWrap .right .f-site {position:relative; width:100%; padding-top: 10px;}
	footer .footerWrap .right .f-site > a {display:block; position:relative; color:#000; font-size:16px; font-weight:500; background-color:#fff; border:1px solid #ddd; height:50px; line-height:50px; padding:0 20px; white-space:nowrap; border-radius:10px;}
	footer .footerWrap .right .f-site ul {z-index:99; position:absolute; bottom:100%; width:100%; border:1px solid #e5e5e5; font-size:14px; overflow:hidden; border-radius:10px;}
	footer .footerWrap .right .f-site ul li a {display:block; background:#fff; padding:12px 20px;}
	footer .footerWrap .right .f-site ul li a:hover {background:var(--base1); color:#fff;}
	footer .footerWrap .right .f-site ul li+li a {border-top:1px solid #e5e5e5;}
	footer .footerWrap .right .f-site > a .arrow-updown {position:absolute; right:20px; top:42%; transition:all 0.3s; width:14px; height:9px; background:url(../images/common/f-site-arrow.png) no-repeat center/cover;}
	footer .footerWrap .right .f-site > a .arrow-updown.on {transform:rotate(180deg);}
	footer .footerWrap .right .f-site a:last-child {margin-right:0;}
	footer .footerWrap .right .f-site a:last-child:after {display:none;}
	footer .footerWrap .right span {font-weight:600; color:#aaa; font-size:15px;}
	
}


/* ************************ 모바일 (0~767) ************************ */
@media screen and (max-width: 767px) {
	
	body {font-size:var(--fontSize15); line-height:1.4;}
	
	.mobileNone {display:none !important;}
	
	/* 폼 */
	select {height:44px; line-height:42px;}
	textarea {height:44px; line-height:42px;}
	input[type=text],input[type=password],input[type=number] {height:44px; line-height:42px;}
	
	header .head h1 a img {height:30px;}
	
	
	/*서브메뉴*/	
	.lnb {}
	.lnb .lnbTit {padding:55px 0 40px;}
	.lnb .lnbMenuWrap {padding:16px 0;}
	.lnb .lnbNavi span {font-size:var(--fontSize13);}
	.lnb .lnbNavi span.home {padding:0 0 0 18px;background-size:13px;}
	
	.sub-content ul {align-items: flex-start; flex-direction: column;}
	.sub-visual h2 {font-size:var(--fontSize40);}
	
	
	/* 하단 */
	footer {font-size:var(--fontSize14); padding:70px 20px 35px;}
	footer .footerLogo {padding:0 0 20px;}
	footer .footerLogo img {height:55px;}
	footer .footerInfo p.copy {padding:14px 0 0;}
	
	

}