/* mobile-menu */
.mobile-header{width:100%; height:63px; background:#fff; position:relative; top:0; left:0; display:none; box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;}
.mobile-header .fowiLogo{position:absolute; height:38px; top:50%; left:15px; transform:translateY(-50%);}
.mobile-header .number {position:absolute; top:50%; right:140px; transform:translateY(-50%); width:140px;}
.mobile-eng {position:absolute; top:50%; right:80px; transform:translateY(-50%); font-size:16px; color:#777; font-weight:500;}
.mobile-eng::after {content:''; display:block; width:1px; height:15px; background:#ddd; position:absolute; top:50%; right:-15px; transform:translateY(-50%);}
.mobile-menu{position:absolute; top:50%; right:15px; transform:translateY(-50%); overflow:hidden; padding:5px; cursor:pointer;}
.mobile-menu.active::before{animation:slideLeft 0.2s 0.05s ease-out forwards;}
.mobile-menu.active::after{animation:slideRight 0.2s 0.05s ease-out forwards;}
.mobile-menu.active .bar{animation:rotate45 0.2s ease-out forwards;}
.mobile-menu.active .bar:last-child{animation:rotate135 0.2s 0.2s ease-out forwards;}
.mobile-menu.back::before{transform:translateX(-120%); animation:slideBack 0.2s 0.05s ease-out forwards;}
.mobile-menu.back::after{transform:translateX(-120%); animation:slideBack 0.2s 0.05s ease-out forwards;}
.mobile-menu.back .bar{transform:rotate(-45deg); animation:rotateBack 0.2s ease-out forwards;}
.mobile-menu.back .bar:last-child{transform: rotate(-135deg); animation:rotateBack 0.2s 0.2s ease-out forwards;}
.hidden{height:100%; overflow:hidden;}

.mobile-menu::before{content:''; display:block ; width:30px; height:4px; background:#000;}
.mobile-menu::after{content:''; display:block; width:30px; height:4px; background:#000;}
.mobile-menu .bar{display: block; width:30px; height:4px; background:#000; margin:5px 0;}
.mobile-menu .bar:last-child{opacity:0; transform:rotate(-45deg); position:absolute; top:10px;}
	
@keyframes rotate135{
	from{opacity:1; transform:rotate(-45deg);}
	to{opacity: 1;transform: rotate(-135deg);}
}

@keyframes rotate45 {to {transform: rotate(-45deg)}}
@keyframes rotateBack {to {transform: rotate(0)}}
@keyframes slideRight {to {transform: translateX(150%)}}
@keyframes slideLeft {to {transform: translateX(-150%)}}
@keyframes slideBack {to {transform: translateX(0)}}

/* moblie-gnb */
.mobile-gnb{width:600px; height:calc(100% - 63px); background:#fff; position:fixed; z-index:9999; top:63px; right:0; font-size:1.3rem; overflow-y:auto; overflow-x:hidden; display:none;}
.mobile-gnb>ul>li>a{display:inline-block; width:100%; border-bottom:1px solid #ebebeb; padding:10px; padding-left:30px;}
.mobile-gnb>ul>li>a>span{display:inline-block; width:10px; height:10px; background:url(../images/down-arrow.png); float:right; margin-top:10px; margin-right:20px;}
.mobile-gnb>ul>li>a.active{color:#0d9242; font-weight:bold;}
.mobile-gnb>ul>li>a.active>span{background:url(../images/up-arrow.png);}
.mobile-gnb>ul>li:first-child a{border-top:1px solid #ebebeb;}
.mobile-gnb .sub-gnb{display:none; background:#eaeaea;}
.mobile-gnb .sub-gnb>li{border-bottom:1px solid #fff; font-size:1.1rem; color:#666;}
.mobile-gnb .sub-gnb>li.has-sub>a {background:url(../images/plus-square-regular.png) no-repeat right 30px center;}
.mobile-gnb .sub-gnb>li.has-sub>a.active {color:#0d9242; background:url(../images/minus-square-regular.png) no-repeat right 30px center; font-weight:500;}
.mobile-gnb .sub-gnb>li.has-sub>ul {display:none;}
.mobile-gnb .sub-gnb>li.has-sub>ul>li>a {font-size:0.9rem; padding:7px; padding-left:50px;}
.mobile-gnb .sub-gnb li a{display:inline-block; width:100%; padding:10px; padding-left:40px;}

.mobile-gnb-bg{width:100%; height:100%; position:fixed; z-index:9998; background:rgba(0,0,0,.5); display:none;}

/* 테이블 */
.table-scroll {width:100%; overflow-x:auto; font-size:13px;}
.table-scroll table {min-width:900px; -webkit-text-size-adjust:none; -moz-text-size-adjust:none; -ms-text-size-adjust:none; -o-text-size-adjust: none;}

/* 게시판 */
.BoardView .detail iframe {max-width:100%;}
.BoardView .detail video {max-width:100%;}
.BoardView02 .BoardContents img {max-width:100%;}

/* 풋터 */
.mobile-copyrightArea{display:none; text-align:center;}

@media(max-width:1200px){
	.onepage-pagination{display:none;}
	.headerWrap{position:fixed; top:0; left:0; z-index:12; width:100%; background:#fff; min-width:0;}
	.headerTop{display:none;}
	.headergnb{display:none;}
	.mobile-header{display:block;}
	.subGnbNew{display:none;}
	
	#container {margin-top:63px;}
	#container #container-area {padding-top:0;}
	
	.subarea {width:100%; box-sizing:border-box;}
	#container #container-area .Contents {width:calc(100% - 200px);}
	
	.heal01_01 {width:100%; box-sizing:border-box; padding-right:0; word-break:keep-all;}
	.heal01_01 dd {padding-bottom:10px;}
	.heal01_02 {width:100%; box-sizing:border-box; padding-right:0; word-break:keep-all;}
	.heal01_02 dd {padding-bottom:10px;}
	.heal02_01 {width:100%; box-sizing:border-box; padding-right:0; word-break:keep-all;}
	.heal02_01 dd {padding-bottom:10px;}
	.heal02_02 {width:100%; box-sizing:border-box; padding-right:0; word-break:keep-all;}
	.heal02_02 dd {padding-bottom:10px;}
	.heal03_01 {width:100%; box-sizing:border-box; padding-right:0; word-break:keep-all;}
	.heal03_01 dd {padding-bottom:10px;}
	.heal03_02 {width:100%; box-sizing:border-box; padding-right:0; word-break:keep-all;}
	.heal03_02 dd {padding-bottom:10px;}
	.heal04_01 {width:100%; box-sizing:border-box; padding-right:0; word-break:keep-all;}
	.heal04_01 dd {padding-bottom:10px;}
	 
	.personBox ul {padding:15px 10px 15px 5%;}
	.personBox ul li {margin-right:15px;}
	 
	.wrapFooter{width:100%; min-width:0;}
	.footerInfoDetail{width:100%; min-width:0; height:30px;}
	.footerCopy{width:100%; min-width:0;}
	.footerQuickInfo{position:absolute; top:15px; left:50%; transform:translateX(-50%);}
	.copyrightArea{float:none; text-align:center;}
	.relation01{text-align:center;}
	.waContents{display:none;}
	.goodContents{display:none;}
	.relation01{display:none;}
	.snsArea{float:none; width:120px; margin:10px auto;}
	
}

@media(max-width:1100px){
	.subarea {border-right:0;} 
	#container #container-area .Lnb {display:none;}
	#container #container-area .Contents {width:100%; box-sizing:border-box; padding:0 20px; border-right:0;}
	#container #container-area .Contents .ContentZone {padding-right:0;}
}

@media(max-width:1024px){
	.BoardView02 .Info {width:100%; margin-left:0; margin-top:20px;}
	
	.h160 {float:none; width:100%;}
	h4.heal05T01, h4.heal05T02, h4.heal05T03, h4.heal05T04, h4.heal05T05, h4.heal05T06 {margin:10px 0;}
	.heal05.mT30 {margin-top:10px;}
	.heal05 div {padding:10px 0 10px 100px;}
	.heal05 div img.mL45 {margin-left:0;}
	.healfT01, .healfT02, .healfT03 {width:100%;}
	.healfT01, .healfT02 {margin-bottom:20px;}
	.healfT0401, .healfT0402, .healfT0403 {width:100%;}
	.healfT01, .healfT02 {margin-bottom:20px;}
	.healfT0401, .healfT0402 {margin-bottom:20px;}
	
	.expLine {overflow:hidden; height:auto;}
	#container #container-area .Contents .ContentZone .expBox .expLine h3.subject.floatL {float:none;}
}


@media(max-width:768px){
	#container #container-area .Contents .navigation {padding-bottom:25px;}
	#container #container-area .Contents .navigation h1.title {float:none; line-height:normal; padding-top:20px;}
	#container #container-area .Contents .navigation .navigationInfo {float:none; margin-right:0; line-height:normal; margin-top:5px;}
	#container #container-area .Contents .ContentZone .subject05 {clear:both; padding-top:1px;}
	#container #container-area .Contents .ContentZone .subject05 li {margin-left:0;}
	#container #container-area .Contents .ContentZone .subject05 li:first-child {margin-top:10px;}

	.BoardBody li {width:30%;}
		
	.personBox ul {height:auto;}
	.personBox ul li {float:none;}
	.personBox ul li:last-child {padding-bottom:0;}
	.helpdesk .helpdeskInner img {width:80px; display:block;}
	.helpdesk .helpdeskInner .helpLink {margin-top:5px; margin-left:10px;}

	h4.healfT.floatL {float:none;}
	.healfTL02 {padding:0; margin-top:5px;}
	.healing-forest div:nth-child(1) {width:350px;}
	.healing-forest div:nth-child(2) {width:100%; padding-left:0; margin-top:0;}
	.edu02_01, .edu02_02, .edu02_03 {background-size:100px; background-position:left center; padding-left:115px; padding-top:0;}
	.edu02_02, .edu02_03 {margin-top:20px;}
	.infoFowi_tit {font-size:24px;}
	.infoFowi_bg {padding-bottom:60px;}
	.infoFowi_bg div:nth-child(1) {float:none; padding-top:0; padding-right:0; width:200px; margin:0 auto;}
	.infoFowi_bg div:nth-child(2) {float:none; width:100%; padding-right:0; padding-top:20px;}
	.infoFowi_tit02 {font-size:22px;}
	
	.dislimLi01 {width:100%; margin-right:0; margin-bottom:20px;}
	.dislimLi02 {width:100%;}
	
	.footerInfoDetail{display:none;}
	.copyrightArea{margin-top:30px;}
}

@media(max-width:700px){
	.BoardBody li {width:46.5%;}
	.BoardSearch {height:auto; padding-bottom:5px;}
	.BoardSearch .board_total {width:100%;}
	.BoardSearch > div:nth-child(2) {float:left; margin-top:8px;}
	.BoardSearch > div:nth-child(2) select, .BoardSearch div:nth-child(2) input {margin-bottom:5px;} 
	
	.forest-care div {width:100%; margin-bottom:15px;}
	.forest-care div:nth-child(2n) {margin-left:0;}
	
	.gv3Down li {width:90%;}
	.h160 {height:auto;}
	.h160 .picture {float:none; margin-left:10px;}
	.h160 .pictureLeft {margin-left:0; margin-top:5px;}
	#container #container-area .Contents .ContentZone .h160 .pictureLeft h3.subject {margin-left:10px;}
	.h160 .pictureLeft .indent2T {margin-left:15px;}
	
	.copyrightArea{display:none;}
	.mobile-copyrightArea{display:block; margin-top:20px;}
}

@media(max-width:600px){
	.mobile-gnb {width:100%;}
}

@media(max-width:500px){
	.mobile-header .number {display:none;}
}

@media(max-width:450px){
	.BoardView02 .picture {width:100%; height:auto;}
	
	.charter_num li > span:first-child {width:130px;}
	.charter_num span[class^="colornum_"] {width:60px; height:60px; font-size:18px; line-height:60px;}
	.charter_num .str {font-size:16px;}
	.charter_num li p {width:calc(100% - 145px); font-size:16px; padding-top:10px; padding-right:5px;}
}

@media(max-width:425px){
	.BoardBody li {width:96%;}
	.Board_list_gallery02 li .Picture {float:none; margin:0 auto;}
	.Board_list_gallery02 li .Board_Content {width:100%; margin-top:10px;}
	.Board_list_gallery02 li .Board_Link {left:50%; transform:translateX(-50%);}
	.BoardView02 .picture {width:100%; height:auto;}
	.BoardView02 .Info .InfoTable th {min-width:60px;}
	.BoardView02 .Info .InfoTable td {padding:3px 3px 2px 3px;}
	
	.BasicTable_09 tr td:first-child div {font-size:24px; width:30px; height:30px; line-height:30px;}
	.BasicTable_09 tr td:nth-child(2) {font-size:16px;}
	.BasicTable_09 tr td:last-child {font-size:13px;}
	
	.personBox ul {padding-left:30px;}
	.h160 .picture img {height:auto;}
	.indent3Sub {float:none;}
	.indent3SubT {margin-left:36px;}
	.heal05 div {padding:0 0 10px 0;}
	h4.heal05T01, h4.heal05T02, h4.heal05T03, h4.heal05T04, h4.heal05T05, h4.heal05T06 {float:none; margin:10px auto;}
	.healfT01, .healfT02, .healfT03 {background-size:80px; background-position:left center; padding:14px 0 0 90px;}
	.healfT0401, .healfT0402, .healfT0403 {background-size:80px; background-position:left center; padding:30px 0 0 90px;}
	.healing-forest div:nth-child(1) {width:100%;}
	.edu02_01, .edu02_02, .edu02_03 {background-position:top center; padding-left:0; padding-top:110px;}
	.edu02_01 dt, .edu02_02 dt, .edu02_03 dt {text-align:center;}
	
	.expBox h2 {font-size:22px;}
	.expLineT {font-size:16px;}
	
	.fowiY dd {width:100%; padding-top:10px; padding-bottom:20px;}
	
	.dislim03 {width:100%; margin-right:0; margin-bottom:25px;}
	.cell {width:100%;}
	
	.btn_p01 img {width:100px; height:100px;}
}

@media(max-width:400px){
	.btn_wel {padding:10px 25px;}
	a.btn_ci01:link, a.btn_ci01:visited, a.btn_ci01:active {font-size:14px;}
	.btn_green {padding:10px 25px; font-size:14px;}
	.btn_blue {padding:10px 25px; font-size:14px;}
	
	.healdiv dl dt {float:none;}
	.healdiv dl dd {margin-left:0; margin-bottom:10px;}
	
	.mobile-copyrightArea{font-size:12px;}
	.footerQuickInfo{width:300px;}
	.footerQuickInfo li:first-child{display:none;}
	.footerQuickInfo li:nth-child(2){background:none;}
	.footerQuickInfo li a{font-size:12px;}
}

@media(max-width:375px){
	.mobile-header .fowiLogo {height:30px;}
	.fowiLogo a {width:150px; height:30px; background-size:contain;}
}