#header{position:fixed; top:0; left:0;width:100%; height:100px; z-index:999;-webkit-transition:0.2s ease-in;-moz-transition: 0.2s ease-in;-o-transition:0.2s ease-in;transition:0.2s ease-in;}
#header .inner{display: flex;justify-content: space-between;align-items: center;max-width: 90%;margin: 0 auto;}
#header .logo{font-size:32px; line-height:40px; font-weight:700;color: #cb3121;}
#header .gnb, #header .lng{display: flex;justify-content: space-between;align-items: center;}
#header .logo a{ color: #42ce88;}
#header.main_hd .gnb a, #header.main_hd .lng a{color:#fff;}
#header .gnb {max-width: 900px;width: 100%; margin:0 40px;}
#header .lng {padding: 0 30px;}
#header.on .lng {border-left: 1px solid #eee;}
#header .lng .earth{display:none;}
#header .gnb li, #header .lng li {display:inline-block; vertical-align:middle;}
#header .gnb li{ padding: 40px 0px;}
#header .gnb a, #header .lng a{font-size:18px; line-height:20px; font-weight:500;}
#header .lng li{ padding: 40px 10px;}
#header .lng a.on, #header.on .lng a.on, #header.main_hd .lng a.on{ border-bottom:2px solid #42ce88; color:#42ce88;}
#header .bars, #header .close{display:none;}
#header.on{background:#fff; height:auto;}
#header.on .logo a, #header.on .gnb a, #header.on .lng a{color:#000;}
#header .gnb a:hover{color:#42ce88;}
#header.on #menu{opacity:1; visibility:visible; height:auto;-webkit-transition:0.2s ease-in;-moz-transition: 0.2s ease-in;-o-transition:0.2s ease-in;transition:0.2s ease-in;}
#menu{position:absolute; top:100px;left:0; width:100%; border-top:1px solid #eee;background:#fff; opacity:0; visibility:hidden; height:0; padding:30px 0;-webkit-box-shadow: 0 0.125rem 0.25rem 0 rgb(0 0 0 / 8%);  box-shadow: 0 0.125rem 0.25rem 0 rgb(0 0 0 / 8%); border-radius:0 0 20px 20px;}
.menuWrap {display: flex;justify-content: space-between;align-items: flex-start;width: 55%;margin: 0 auto;  height:100%;}
.menuWrap > div{padding:0 20px;}
.menuWrap > div:first-child{border-left:0; padding-left:0; }
.menuWrap h5{font-size:18px; font-weight:500; color:#000; cursor:pointer;}
.menuWrap h5:hover{ color: #42ce88;}
.menuWrap h5 i{display:none;}
.menuWrap li a{font-size:16px; color:#666;}
.menuWrap li a:hover{color:#42ce88;}

#Wrap, #subWrap{width:100%; }
#Wrap:after{content:""; display:block; clear:both;}
#content{width:80%; max-width:1300px; margin:0 auto; padding:100px 0;}
#subWrap #header{background: #fff;border: 20px;margin: 0 auto;left: 0;top: 0; border-bottom:1px solid #ededed;}
#subWrap #header.on{border-radius: 20px 20px 0 0;}
#subWrap #header .lng {border-left: 1px solid #eee;}
#container h3{text-transform: uppercase;font-size: 54px;line-height: 70px;font-weight: 500;margin: 30px 0;}

#container {padding:180px 0 80px;}
#container:after{content:""; display:block; clear:both;}
#container .cont_tit{position: relative; width: 80%;MARGIN: 0 AUTO; max-width: 1300px;}
#container .cont_tit:after{content:""; display:block; clear:both;}
#container .cont_tit h1{ font-size: 85px;line-height: 90px;padding-bottom: 50px;color: #42ce88;text-transform: uppercase;}
#container .cont_tit h1 span{ color:#42ce88;}
#content .txt{padding: 35px 0;color:#333;}
#container .cont_tit img{width:100%; margin-top:40px;}


.nav{MARGIN-BOTTOM: 30PX;}
.nav ul{font-size:0; line-height:0; letter-spacing:0;}
.nav li{display:inline-block; vertical-align:middle;font-size:16px; line-height:25px;  color:#999;}
.nav li:after{content:"";display:inline-block; vertical-align:middle; width:3px; height:3px; background:#999; border-radius:50%; margin:0 15px}
.nav li:last-child:after{display:none;}
.nav li.on{color:#111; font-weight:700;}
.nav li i{ BACKGROUND: #42ce88;PADDING: 15PX;color: #fff;BORDER-RADIUS: 50PX;}
.sub_menu{background:#f5f5f5; border-radius:20px; padding:0 20px ;}
.sub_menu div{ text-align:left;}
.sub_menu div ul{font-size:0; line-height:0; letter-spacing:0;}
.sub_menu div li{display:inline-block; vertical-align:middle;}
.sub_menu div li a.on{color: #42ce88;font-weight: 600;}
.sub_menu div a{font-size:18px; line-height:25px;display:inline-block; vertical-align:middle; color: #888;padding: 30px;}
.sub_menu div li:after{content:""; display:inline-block; vertical-align:middle; width:1px; height:12px; background:#ccc; }
.sub_menu div li:last-child:after{display:none;}


#footer{background:#201c1a}
#footer .ftInner{width: 90%;margin: 0 auto;font-size: 14px;line-height: 25px;color: #999;padding: 40px 0;}
#footer .ftInner:after{content:""; display:block; clear:both;}
#footer .ftInner h2, #footer .ftInner .info{display:inline-block; vertical-align:top; }
#footer .ftInner h2{font-size:32px; margin-right:5%;}
#footer .ftInner li.copy{color: #555;margin-top: 10px;}


.family{float:right;}
.family span{display: block; border: 1px solid #666; padding: 10px 20px; cursor:pointer;}
.family ul{background: #111;width: 100%;padding: 0 10px; opacity:0; visibility:hidden; -webkit-transition:0.2s ease-in;-moz-transition: 0.2s ease-in;-o-transition:0.2s ease-in;transition:0.2s ease-in;}
.family.open ul{opacity:1; visibility:visible; height:auto}
.family ul li{border-bottom: 1px solid #666;padding: 10px 0; cursor:pointer;}
.family ul li:last-child{border:0;}
.family ul li:hover{color:#fff;}

.pager{font-size:0; line-height:0; letter-spacing:0;text-align: center; padding: 40px 0;}
.pager li{display: inline-block;vertical-align: middle;margin: 0 4px;}
.pager li a{font-size: 18px;font-weight: 400;line-height: 35px;display: block;background: #f6f6f6;color:#888;border-radius: 10px;width: 40px;height: 40px;line-height: 40px;text-align: center;}
.pager li a.on{color: #fff; background: #42ce88;}
.pager li a:hover{color: #fff; background: #42ce88;}




@media screen and (max-width: 1600px) {
	.menuWrap{width:80%;}
	#header .inner{max-width: 90%;}
	#header .gnb{max-width:700px;}
	
}
@media screen and (max-width: 1400px) {
	#content .txt{padding:15px 0;}
	#container .cont_tit{width:90%;}
	#content{padding:50px 0;width:90%;}
	.menuWrap{width:70%;}
	#header .logo{font-size:28px;}
	#header .gnb{max-width:600px;}
	.sub_menu div a{padding:25px;}
}
@media screen and (max-width: 1200px) {
	body{font-size:18px;line-height:30px}
	#container{padding:100px 0;}
	#container .cont_tit h1{font-size: 65px; line-height: 70px;padding-bottom: 30px;}
	#header .inner{display:block;max-width:100%;}
	#header{height:60px;}
	#header .logo {font-size: 24px; padding-left:15px}
	#header .logo a{line-height:60px;}
	#header .gnb{display:none;}
	#header .lng {display:block;  position: absolute; top:0; right: 64px;padding:0;}
	#header .lng:after{content:""; display:block; clear:both;}
	#header .lng .earth{display:block; padding: 17px 5px; font-size:26px; color:#fff;}
	#header .lng ul{background: #fff;border-radius: 10px;padding: 10px;position: absolute;top: 48px;left:calc(50% - 34px); width: 68px; opacity:0; visibility:hidden; border:1px solid #ededed;}
	#header .lng ul.open{opacity:1; visibility:visible;}
	#header .lng li{display:block; padding:5px;}
	#header .lng li a, #header.main_hd .lng a{display:block; text-align:center; color:#000; font-size:14px;}
	#header .lng .on{border-bottom:2px solid #000;}
	#subWrap #header .lng .earth{color:#000;}
	#subWrap #header .lng{border-left:0;}
	#header .bars, #header .close{position: absolute;top: 0;right: 0;padding: 14px;}
	#header .bars{display: block;}
	#header.on .bars{display:none;}
	#header.on .close{display: block;}
	#header .bars i{font-size:32px;cursor:pointer;}
	#header .close i{font-size:30px; color:#000;}
	#header.on #menu{height:100vh; padding-top:0;}
	#header.on .lng{border-left:0;}
	#menu{top:59px;}
	.main_hd .xi-bars{color:#fff;}
	.menuWrap{display:block; width:100%}
	.menuWrap h5{font-size:18px; padding: 15px 20px; position:relative; font-weight:400;}
	.menuWrap h5:after{content:""; display:block; clear:both;}
	.menuWrap h5 i{display: block;font-size: 18px;position: absolute;top: 0px;right: 0; padding: 21px;}
	.menuWrap ul{opacity:0; visibility:hidden; height:0; }
	.menuWrap ul.open{opacity:1; visibility:visible; height:auto; padding:15px 25px; background: #fafafa;}
	.menuWrap > div{padding-left:0; border-left:0; height:auto; border-bottom: 1px solid #f1f1f1;}
	.menuWrap ul li a{padding:5px 0; display:block; }

	.main section .textAera h5{font-size:14px;}
	.main section .textAera h1 {font-size: 48px;line-height: 65px;margin: 20px 0;	}
	.main section .textAera p {font-size: 18px;line-height: 30px;	font-weight: 300;}
	.main section .textAera .btn{min-width: 120px; margin-top:50px;}
	.main section .textAera .btn a{font-size:14px; padding:10px 15px;}

	#footer .ftInner{width:calc(100% - 30px); }
}


@media screen and (max-width: 1024px) {
	#container .cont_tit h1 {font-size: 55px;line-height: 60px;padding-bottom: 30px;}
	#content h5 {font-size: 31px;line-height: 50px;font-weight: 500;}
	.sub_menu{padding: 10px;}
	.sub_menu div a {padding: 15px 22px; font-size:16px;}
	#fp-nav.right{right:10px;}
	#footer .ftInner h2, #footer .ftInner ul{display:block;}
	#footer .ftInner .info{margin:15px 0;}
	#footer .ftInner h2{font-size:25px;}
	.family{float: inherit; width:150px; position: relative; margin-bottom:30px;}
	.family:after{content:""; display:block; clear:both;}
	.family span {display: block;text-align: center;}
	.family ul{height:0; position:absolute; bottom:100%; left:0;}
	.family:hover ul{height:auto;}
}

@media screen and (max-width: 1000px) {
	body{font-size:16px;line-height:25px}
	#content {padding: 40px 0; width:95%;}
	#container .cont_tit{width:95%;}
	#container .cont_tit h1 {font-size: 45px;line-height: 50px;}
	#content .txt{padding-top:10px;}
	.nav{margin-bottom:20px;}
	.nav li{font-size:14px;}
	.nav li i{padding:10px;}
	.sub_menu {border-radius: 10px;}
	.sub_menu div li:after{display:none;}
	.sub_menu div a {padding: 10px 22px;}
	.pager li{margin:0 2px;}
	.pager li a {font-size: 14px;border-radius: 4px;width: 30px;height: 30px;line-height: 30px;}
}

@media screen and (max-width: 700px) {
	#container .cont_tit h1{ font-size: 35px; line-height: 35px; padding-bottom: 20px;}
	.nav {margin-bottom: 20px;}
	#content h5 {font-size: 25px;line-height: 33px;font-weight: 500;}
	.sub_menu {padding: 10px 0;}
	.sub_menu div ul{text-align:center;}
	.main section .textAera h1 {font-size: 41px;line-height: 54px;}
	.main section .textAera .btn{opacity:1;}
	#footer .ftInner h2{font-size:21px;}
	#footer .ftInner .info{margin:10px 0; font-size: 13px;}
	.family{margin-bottom:15px;}
	.boardList li p{width:95%;}
	.boardList li .date{display:none;}
}

@media screen and (max-width: 600px) {
	.sub_menu div a {padding: 5px 12px;}
	.main section .textAera {width: 80%;margin: 0 auto;}
	.main section .textAera h1 {font-size: 34px;line-height: 48px;}
	.main section .textAera p{font-size:15px; line-height: 24px;}
	.main section .down span {position: absolute;top: 0;left: calc(50% - 40px);font-size: 12px;}
	#fp-nav{display:none;}
}

@media screen and (max-width: 400px) {
	.main section .textAera h1 {font-size: 25px;line-height: 38px;margin: 15px 0;}
	.main section .textAera p br{display:none;}

}