@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Nanum+Gothic&display=swap');
@font-face { 
    font-family: 'InkLipquid'; 
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_one@1.0/InkLipquid.woff') format('woff'); 
    font-weight: normal; 
    font-style: normal; 
}

@font-face {
    font-family: 'Binggrae-Bold';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_one@1.0/Binggrae-Bold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}


* {margin: 0; padding: 0; box-sizing: border-box;}

body,html {font-family: 'Nanum Gothic', sans-serif;font-size: 16px; overflow-x: hidden;}
ul,li {list-style: none;}
a {text-decoration: none; color: inherit;cursor:pointer;}
img{max-width:100%;}
.text_left {text-align:left !important;}

#wrap1200 {width: 1200px; margin: 0 auto;}
#modal {width: 100%; height: 100%; background: rgba(0,0,0,0.8); position:fixed; top:0; left:0; z-index:1;}


/* 헤더영역 */
#headerArea {width: 100%; height: 80px; padding-top: 10px; background: rgba(255, 255, 255, 0); border-bottom: 1px solid rgba(255,255,255,1); position: absolute; top: 0; left: 0; z-index: 2;}
/*
#headerArea:hover {background: rgba(255, 255, 255, 0.9); border-bottom: 1px solid #aeaeae; transition: all .3s ease-in-out;}
#headerArea:hover .logoSet img {bottom:0px;}
#headerArea:hover .menu_Main a {color: #333;}
*/

#headerArea.overHa {background: rgba(255, 255, 255, 1); border-bottom: 1px solid #aeaeae;}
#headerArea.overHa .logoSet img {bottom:0px;}
#headerArea.overHa .menu_Main a {color: #333;}
#headerArea.overHa .menu_Main a:hover {color: #446c90;}

.logoSet {width: 200px; height: 56px; float: left; margin-left: 30px;  overflow: hidden;position: relative;}
.logoSet img {position: absolute;}

.menuSet {width: 900px; text-align: center; float: right;}
/*.menuSet .menu_Main a {width: 260px; height: 70px; line-height: 40px; display: block; margin-left: 20px; padding-top: 10px; float: left; font-size: 20px; font-weight: 800; color: #fff;}*/
.menuSet .menu_Main a {width: 270px;height: 70px;line-height: 40px;display: block;margin-left: 20px;padding-top: 10px;float: left;letter-spacing: -0.5px;font-size: 20px;font-weight: 800;color:#fff;}

.padding10 {padding:10px !important;}
.padding20 {padding:10px 30px !important;}
.padding30 {padding:30px !important;}
.bg_fff {background-color:#fff;}



/* 서브헤더영역 */
#sub_headerArea {width: 100%; height: 80px; padding-top: 10px; background: rgba(255, 255, 255, 1); border-bottom: 1px solid rgba(255,255,255,0.9); position: absolute; top: 0; left: 0; z-index: 2;}

#sub_headerArea.overHa {background: rgba(255, 255, 255, 1); border-bottom: 1px solid #aeaeae;}
#sub_headerArea.overHa .menu_Main a:hover {color: #446c90;}

#sub_headerArea .logoSet {width: 200px; height: 56px; float: left; margin-left: 30px;  overflow: hidden;position: relative;}
#sub_headerArea .logoSet img {position: absolute; bottom:0px;}

#sub_headerArea .menuSet {width: 900px; text-align: center; float: right;}
/*#sub_headerArea .menuSet .menu_Main a {width: 270px; height: 70px; line-height: 40px; display: block; margin-left: 20px; padding-top: 10px; float: left; font-size: 20px; font-weight: 800; color:#333;}*/
#sub_headerArea .menuSet .menu_Main a {width: 270px;height: 70px;line-height: 40px;display: block;margin-left: 20px;padding-top: 10px;float: left;letter-spacing: -0.5px;font-size: 20px;font-weight: 800;color:#333;}




/*다운박스영역*/
#downbox{display:none; width: 100%; padding: 20px 0;  background-color: rgba(255,255,255,1); border-bottom: 5px solid #96c539; position: absolute; top: 80px; left: 0; z-index: 2;}
#downbox:after {display:block;content:"";clear:both}

.bookSet{width: 250px; height: 365px; padding: 15px 30px; float: left; border-right: 1px solid #aeaeae;}
.bookSet .img{width: 150px; height: 210px; margin-bottom: 20px;}
.bookSet .ebookArea {width: 150px; height: 40px; line-height: 40px; background: #96c539; color: #fff; font-size: 18px; font-weight: bold;text-align: center;}

/*.menuSet .menu_Sub li {width: 270px; margin-top: 10px; margin-left: 20px; float: left;}*/
.menuSet .menu_Sub li {width: 270px; margin-top: 10px; margin-left: 20px; float: left;letter-spacing:-0.5px;}
.menuSet .menu_Sub a {width: 100%; height: 35px; display: block; margin-bottom: 10px; float: left; font-size: 18px; font-weight:bold; color: #333;line-height:35px;}
.menuSet .menu_Sub a:hover {color: #7dba3d; transition: all .2s ease-in-out;}




/* 모바일메뉴영역*/
.M_ha_area {display: none; width: 100%;}
.menu_button .button {width: 60px; height: 60px; float: right; margin-right: 10px; background: url(../images/common/menu_button.png) top center no-repeat; background-size:cover; z-index: 4;}

.M_ha_area.open .button {cursor: pointer; background: url(../images/common/menu_button.png) center center no-repeat; background-size:cover;}
.M_ha_area.open .logoSet img {bottom:0px;}
.M_ha_area.open #headerArea {background: rgba(255, 255, 255, 1); border-bottom: 1px solid #aeaeae;}

.menu_M {display:none; width: 100%; padding: 20px 10px; background-color: rgba(255,255,255,1); border-bottom: 5px solid #96c539; position: absolute; top: 80px; left: 0; z-index: 3;}
.menu_M:after {display:block;content:"";clear:both;}

.menu_M li {width: 33%; display: inline-block; float: left; margin-bottom: 10px; padding: 20px 4% 0px; border-left: 1px solid #ddd;}
.menu_M li:first-child {border-left: 0;}
.menu_M p {font-size: 20px; font-weight: 800; color: #7dba3d; margin-bottom: 5px;}
.menu_M a {font-size: 17px; font-weight: 800; color: #333; padding: 10px 0 10px; display: block;}




/* 풋터 영역 */
#footerArea {width: 100%; height: auto; background: #ddd; padding: 30px 0;}
#footerArea:after {display:block;content:"";clear:both}

.ft_logo {width: 25%; height: 100%; float:left;}
.ft_logo a {width: 250px; height: 50px; display: block; margin: 0 auto; background: url(../images/ft_logo.png) center center no-repeat;background-size:cover;}

.ft_right {width: 70%; float:right;}
.ft_right:after {display:block;content:"";clear:both}

.ft_text {float:left;}
.ft_text ul li {display: block; height: auto; line-height: 22px; font-size: 15px;font-weight: bold;letter-spacing: 2px; color: #444;}
.ft_text ul li span {padding: 0 10px; display:inline-block;}
.ft_text ul li.copy {height: auto;line-height: 20px; font-size: 14px;letter-spacing: 1px;margin-top: 5px;color: #555;}

.ft_sns {float:right;}
.ft_sns:after {display:block;content:"";clear:both}
.ft_sns a {width: 55px; height: 55px; border-radius: 55px; margin-left: 15px; display: block; float: left;overflow: hidden;}
.ft_sns a:first-child {margin-left: 0;}

.ft_sns a.blog {background: #96c539 url(../images/sns/icon_blog.png) top center no-repeat;background-size:cover;}
.ft_sns a.facebook {background: #3a5795 url(../images/sns/icon_facebook.png) top center no-repeat;background-size:cover;}
.ft_sns a.instagram {background: #fc2958 url(../images/sns/icon_instagram.png) top center no-repeat;background-size:cover;}
.ft_sns a.youtube {background: #ff0000 url(../images/sns/icon_youtube.png) top center no-repeat;background-size:cover;}
.ft_sns a.post {background: #999 url(../images/sns/icon_post.png) top center no-repeat;background-size:cover;}




/* 퀵배너 영역 */
#quickArea {width: 60px; height: auto; display:block; position: fixed; bottom:50px; right: 2%;}

.quickTop {display: none; width: 100%; height: 220px; border-radius: 7px; overflow: hidden; margin-bottom: 10px; background: #fff; border: 1px solid #bbb;}
.quickTop a {width: 60px; height: 60px; display: block; margin: 10px 0 5px;}
.quickTop .quick1 {background: url(../images/quick/quick1.png) top center no-repeat;}
.quickTop .quick2 {background: url(../images/quick/quick2.png) top center no-repeat;}
.quickTop .quick3 {background: url(../images/quick/quick3.png) top center no-repeat;}
.quickTop .quick1:hover {background: url(../images/quick/quick1.png) bottom center no-repeat;}
.quickTop .quick2:hover {background: url(../images/quick/quick2.png) bottom center no-repeat;}
.quickTop .quick3:hover {background: url(../images/quick/quick3.png) bottom center no-repeat;}

.quickBottom {width: 100%; height: 50px; border-radius: 7px; overflow: hidden;}
.quickBottom a {width: 60px; height: 50px; display: block; background: url(../images/quick/scrollTop.png) top center no-repeat;}





@media only screen and (max-width: 1200px) {
	#wrap1200 {width:100%; padding: 0 5%;}
	.main_ha_area {display: none;}
	.sub_ha_area {display: none;}
	.M_ha_area {display: block;}
	
	.logoSet {margin-left: 10px;}
	
	#footerArea #wrap1200>div {width:auto; float: none; margin-left: 0px; margin: 0 auto 20px;}
	.ft_logo a {margin:0;}
	.ft_right {margin:0;}

	#quickArea {right: -999px;}
}
@media only screen and (max-width: 1024px) {
	.menu_M li {width: 25%;}
}
@media only screen and (max-width: 1000px) {
/*	.menu_M li {padding: 20px 5% 0; }*/
}

@media only screen and (max-width: 900px) {
	.menu_M li {width: 50%; text-align:center;}

	.ft_logo a {margin:0 auto;}
	.ft_right>div {float: none; display: block; margin: 20px auto 0; text-align: center;}
	.ft_text ul li {letter-spacing: -1.5px;}
	.ft_sns {width: 335px; margin: 0 auto;}


}

@media only screen and (max-width: 600px) {
	#headerArea {height: 65px; padding-top: 10px;}

	.logoSet {width: 140px; height: 45px;}
	.logoSet img {width: 100%;}

	.menu_button .button {width: 45px; height: 45px;}

	.menu_M {top: 65px;}
	.menu_M li {width: 100%; border-left: 0; border-top: 1px solid #ddd;}
	.menu_M li:nth-child(1) {padding: 0 5%; border: 0;}

	.ft_logo a {width: 220px; height: 44px;}
	.ft_sns {width:216px;margin-top:30px;}
	.ft_sns a {width: 45px; height: 45px; margin-left: 10px;}

}