@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Karla');
/* karla-regular - latin */
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/karla-v6-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Karla'), local('Karla-Regular'),
       url('../fonts/karla-v6-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/karla-v6-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/karla-v6-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/karla-v6-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/karla-v6-latin-regular.svg#Karla') format('svg'); /* Legacy iOS */
}
/* karla-700 - latin */
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/karla-v6-latin-700.eot'); /* IE9 Compat Modes */
  src: local('Karla Bold'), local('Karla-Bold'),
       url('../fonts/karla-v6-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/karla-v6-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/karla-v6-latin-700.woff') format('woff'), /* Modern Browsers */
       url('../fonts/karla-v6-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/karla-v6-latin-700.svg#Karla') format('svg'); /* Legacy iOS */
}

.h {position:absolute; top:-99999px; opacity:0; text-indent:-99999px;}
.fadeinbottom { opacity:0; top:20px; position: relative;}



/*메인페이지--------------------------------------------------------------------*/
/*header*/
.headerWrap {width: 100%; }
header {width: 940px; position: relative; margin: 0 auto; text-align: center;}
header h1 {position: absolute; top:-670px; left: 0px; width: 150px; z-index: 9999;}
header h1 img {width: 100%; }
header h2 {display: none;}

header .menu {position: relative; top:-50px;   }
header .menu li {float: left; }
header .menu a{font: bold 18px/50px "Karla"; color:#000; margin-right: 3px; background: #fff; display: block; width: 150px; height: 50px; transition: all 0.5s;}
header .menu li:nth-of-type(1) a {width: 50px; font-size: 23px;}
header .menu li:nth-last-of-type(1) {text-align: left;  }
header .menu li:nth-last-of-type(1) a {width: 250px; padding-left: 30px; background: #2d4e3e; color:#fff;}
header .menu li a:hover {background: #9fceb7; color: #000;}


/*모바일메뉴*/
#moButton i {font-size:20px; color:#fff;}
#moButton {display: none;}

#menuMo {width:200px; height:100%; background: rgba(0, 0, 0,0.8); position: fixed; top:0; left:-270px; transition: all 0.5s; padding: 20px; }
#menuMo.on {left:0px;}
#menuMo h3 {margin-bottom: 20px; height: 60px;}
#menuMo h3 img {height: 100%;}

.menuMo a{font: bold 25px/2 "Karla"; color:#fff; display: block;3}
.menuMo li:nth-last-child(1) a{margin-bottom: 20px;}
.utilMo a{font: 13px/2 'Nanum Gothic', sans-serif; color:#fff; display: block; margin-bottom: 9px;}


/*top 버튼*/
body>a {height: 40px; width: 40px; box-shadow: 0 2px 10px 1px rgba(0,0,0,0.12); border-radius: 50%; color: #94979c; text-align: center; padding-top: 13px; position: fixed; background:#fff; right: 2%; z-index: 9; display: none; transition: all 0.5s; font-size: 12px;}

#Move_Top{bottom: 20px;}
#Move_Top:hover{color:#fff; background:#2d4e3e;}


/*visual*/
.visual {width:100%; margin-top: 30px;}

/*모바일 비쥬얼*/
.visualMo {display: none;}

/*슬라이더 프레임*/
#slider1 { width:100%; height:700px; box-sizing:border-box; position:relative; overflow:hidden;}

/*슬라이더 패널*/
.panel {width:100%; height:100%; top:0px; left:0px;}
.panel>li {width:100%; height:100%; position:absolute; top:0px; left:100%;}
.panel>li.on {left:0%;}
.panel>li.panel1 {background: url('../img/slider_bg_1.png')no-repeat center; background-size : cover;}
.panel>li.panel2 {background: url('../img/slider_bg_2.png')no-repeat center; background-size : cover;}
.panel>li.panel3 {background: url('../img/slider_bg_3.png')no-repeat center; background-size : cover;}

#slider1 .slide_txt{ line-height:18px; color:#fff; position:relative; top:240px; left:20%; }
#slider1 .slide_txt h2::before {content:""; display: block; position:relative; top:-30px; left:0; width:70px; height:4px; background:#2d4e3e;  }
#slider1 .slide_txt h2{font-family: Times, serif; line-height:18px; color:#2d4e3e; position:relative; top:27px; left:0; font-weight:bold; letter-spacing:-2px; font-size:46px;}
#slider1 .slide_txt p{font-size:18px; line-height:28px; color:#f1f1f1; position:relative; top:64px; left:0; font-family: 'Nanum Gothic', sans-serif;font-weight:500; text-shadow:1px 1px #111; }
#slider1 .slide_txt a{position:relative; top:90px; left:0; display:inline-block; border:1px solid #fff; padding:7px 20px; border-radius:30px; font:16px/1.7 'Nanum Gothic', sans-serif; color:#fff; text-shadow:1px 1px #111;}


/*네비 버튼*/
.navi {position:absolute; bottom:20px; left:50%; margin-left:-60px;}
.navi>li {float:left; margin-right:10px;}
.navi>li>a {display:block; width:20px; height:20px; border-radius:10px; background:#fff;}
.navi>li>a.on {background:#000;}


/*이전,다음 버튼*/
.btnSet {position:absolute; top:50%; right:5px; transform: rotate(-90deg); }
.btnSet a {font: 16px/2 "Karla"; color:#fff;}
.prev::after {content: ""; display: inline-block; height: 1px; width: 20px; background: #fff; margin: 3px 3px 3px 5px; }



/*2번째 슬라이드*/
/*슬라이더 프레임*/
#slider2 { height:544px; width:1057px; box-sizing:border-box; margin:100px auto; position:relative;}

/*슬라이더 패널*/
.bxslider li{position:relative; overflow:hidden; height:544px; width:1057px;}
.bxslider li .slide_txt{position:absolute; top:50%; margin-top:-150px; left:50%; margin-right:-410px;  width:430px; height:350px;  text-align: right;}
.bxslider li .slide_txt h6{position:relative; top:0; left:0; color:#2d2d2d; font-family: Times; font-size:18px; font-weight:100;}
.bxslider li .slide_txt h4{position:relative; top:25px; left:3px; color:#000; font-family: Times; font-size:36px;}
.bxslider li .slide_txt h4::after {content:""; display: block; position:absolute; top:65px; right:0px;  width:50px; height:7px; background:#2D2D2D;}
.bxslider li .slide_txt p{position:relative; top:80px; left:0; color:#666; font-size:14px;}
.bxslider li .slide_txt a{position:absolute; display:block; top:205px; right: 0;  width: 100px; border: solid 1px #666; text-align: center; padding: 7px; color:#666; transition: all 0.5s;}
.bxslider li .slide_txt a:hover {background: #2d4e3e; color:#fff;}





/*content*/
.content {width:940px; margin: 0 auto; overflow: hidden;}

/*con1*/
.con1 {width: 100%; overflow: hidden;   margin-top: 90px;}
.con1>div {width:465px; height:270px; margin-right: 10px; float: left; background: #e5e5e5; position: relative; overflow: hidden;}
.con1>div>div {width: 100%; height: 100%; background: rgba(0, 0, 0, 0.3); padding: 20px; transition: all 0.5s;}

.con1>div:hover>div {width: 24%; position: absolute; right: 0;}
.con1>div:hover a {bottom: 20px;}
.con1>div:hover h3 {opacity: 0;}
.con1>div:hover p {opacity: 0;}

.con1>.con11 {background: url("../img/con11_bg.png") no-repeat right; background-size : cover;}
.con1>.con12 {margin-right: 0px; background: url("../img/con12_bg.png") no-repeat right; background-size : cover;}

.con1>div>div>h3 {font:bold 20px "Karla"; color:#fff; margin-bottom: 2px; text-align: right; transition: all 0.1s;}
.con1>div>div>p {font:13px/1.7 'Nanum Gothic', sans-serif; color:#fff; text-align: right; transition: all 0.1s;}
.con1>div>div>a {font:11px/1.7 'Nanum Gothic', sans-serif; color:#fff; text-align: center; display: block; width: 70px; padding: 2px; border: solid 1px #fff; position: absolute; right: 20px; bottom: 160px; transition: all 0.5s;}
.con1>div>div>a:hover {background: #eee; color:#000;}

.con1>div>video {	position:absolute; height:100%; width:auto;	opacity:0;}

/*con2*/
.con2 {width: 100%; overflow: hidden;  margin-top: 40px;}
.con2>div {width:306px; height:100px; margin-right: 10px; background: #555; float: left; margin-top: 20px; position: relative; text-align: center;}
.con2>div:hover {background: #2d4e3e;}

.con2>div>a>div {width: 260px; height:80px; margin: -20px auto; transition: all 0.5s;}
.con2>div>a>div>div {width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); transition: all 0.5s;}
.con2>div:nth-of-type(1)>a>div {background: url("../img/con21_bg.png") right;}
.con2>div:nth-of-type(2)>a>div {background: url("../img/con22_bg.png") right;}
.con2>div:nth-of-type(3)>a>div {background: url("../img/con23_bg.png") right;}
.con2>div>a {display: block; width: 100%; height: 100%; text-align: center; font:15px/5.5 "Karla"; color:#ddd;}

.con2>div:nth-last-of-type(1)  {margin-right: 0px;}

.con2>div>a:hover {color: #fff;}
.con2>div>a:hover>div {background-position: left;}
.con2>div>a:hover>div>div {opacity: 0;}

/*con3*/
.con3 {width: 100%; height: 400px; background: url("../img/con5_bg.jpg") no-repeat center center; background-size:cover ; margin-top: 130px;}
.con3>div {width: 400px; height: 250px; margin:0 auto; background: #fff; padding: 30px; text-align: center; position: relative; top:80px;}

.con3>div h3{position:relative; top:15px; left:3px; color:#000; font-family: Times; font-size:20px;}
.con3>div h3::after {content:""; display: block; width:50px; height:4px; position: relative; top:10px; left:50%; margin-left: -25px; background:#2D2D2D;}
.con3>div p{position:relative; top:40px; left:0; color:#666; font-size:14px;}
.con3>div a{position:absolute; display:block; top:180px; right: 50%; margin-right: -60px;  width: 120px; background: #333; text-align: center; padding: 7px; color:#fff;  font-size:12px; transition: all 0.3s;}
.con3>div a:hover {background: #fff; border: solid 1px #333; color:#333;}

.parallax-window {background: transparent;}

/*con4*/
.con4 {width: 100%; background:#eee; padding: 30px; text-align: center;}
.con4>ul {display: inline-block;}
.con4>ul>li {display: inline-block;  width: 180px;  background: #fff;margin-right: 30px; text-align: center; padding: 20px; border-radius: 50%; transition: all 0.3s;}
.con4>ul>li>a {width: 100%; height: 150px; display: block;}
.con4>ul>li:nth-last-child(1) {margin-right: 0px;}
.con4>ul>li>a>img {width: 70px; transition: all 0.3s;}
.con4>ul>li>a>h3 {font: bold 14px/1 'Nanum Gothic', sans-serif; color:#666;}
.con4>ul>li>a>p {font: 11px/1.3 'Nanum Gothic', sans-serif; color:#666; margin-top: 10px;}
.con4>ul>li:hover {background: #fff; box-shadow: 0px 3px 3px #888;}
.con4>ul>li:hover>a>img {transform: scale(1.1);}

/*con5*/
.con5 {width:100%; overflow: hidden; margin-top: 100px;}
.con5>div {width:460px;  margin-right: 20px; float: left;  }
.con5>div:nth-last-of-type(1) {margin-right: 0px;}

.con5 h2 {text-align: center; font: bold 16px/2 "Karla";}
.con5 a {font:bold 12px/1.6 'Nanum Gothic', sans-serif; color:#666;}

.con5>div>div {width:100%; margin-bottom: 2%; padding: 20px 10px; overflow: hidden;  border-top:solid 0.5px #ddd;}
.con5>div>div:nth-last-of-type(1) {margin-bottom: 0%;}

.con5>.con51>div>div:nth-of-type(1) {width:40%; float: left; margin-right: 10px; overflow: hidden;}

.con5>.con51>div>div:nth-of-type(2) span {font: 10px/1 'Nanum Gothic', sans-serif; color: #888;}

.con5 img {width: 100%;}

.con5>.con52>div:nth-of-type(1) {overflow: hidden;}
.con5>.con52>div:nth-of-type(1)>div {float: left;  width:60%;}
.con5>.con52>div:nth-of-type(1)>div span {font: 10px/1 'Nanum Gothic', sans-serif; color: #888;}
.con5>.con52>div:nth-of-type(1)>div:nth-of-type(2) {width:40%; float: right;}

.con5>.con52>div:nth-of-type(2)>ul>li {font:bold 11px/1.7 'Nanum Gothic', sans-serif; overflow: hidden;}
.con5>.con52>div:nth-of-type(2)>ul>li>span {float: right; font: 10px/1 'Nanum Gothic', sans-serif; color: #888;}


/*footer*/
.footerWrap {width: 100%; background: #414143; margin-top: 100px;}

footer {width:940px; margin: 0 auto;}

.fcon1 {overflow: hidden; padding: 20px 0px;}
.fcon1 .map {overflow: hidden; width: 70%; float: left;}
.fcon1 .map ul {width: 130px; float: left;}
.fcon1 .map ul li h3 {font: bold 13px/1.8 "Karla"; color:#C0C0C0;}
.fcon1 .map ul li a {font:12px/1.8 "Karla"; color:#C0C0C0;}
.fcon1 .map ul li a:hover {font-weight: bold;}

.fcon1 footerMenu {float: right;}
.fcon1 .footerMenu>ul {overflow: hidden;}
.fcon1 .footerMenu>ul>li>a{float: right; padding: 1px 6px; font:11px/1.8 'Nanum Gothic', sans-serif;  color:#C0C0C0;}
.fcon1 .footerMenu>ul>li>a:hover{color:#C0C0C0;}

.fcon2 {overflow: hidden; border-top: solid 1px #C0C0C0; padding: 10px 0px 50px;}
.fcon2>h2>img {float: left; width: 100px; margin-right: 10px;}
.fcon2>p {float: left; margin-top: 24px; color:#C0C0C0;}
.familySite {float: right; width: 150px; border: solid 1px #C0C0C0; font: 11px/1 'Nanum Gothic', sans-serif; color:#C0C0C0;  padding: 7px 10px;  margin-top: 24px;}
.familySite span {float: right;}



/*서브페이지--------------------------------------------------------------------*/
/*sub header*/
.headerWrapSub {width: 100%; margin-bottom: 50px;}
.headerWrapSub.storyPage { background: url("../img/sub_top_visual.png") center center; background-size: cover;}
.headerWrapSub.communityPage { background: url("../img/sub_top_visual_community.png") center center; background-size: cover;}
.headerWrapSub.loginPage { background: url("../img/sub_top_visual_login.png") center center; background-size: cover;}
.headerWrapSub.joinPage { background: url("../img/sub_top_visual_login.png") center center; background-size: cover;}
header.sub {width: 940px; height: 300px; position: relative; margin: 0 auto; text-align: center;}
header.sub h1 {width: 120px; z-index: 9999; position: absolute; top:20px;}
header.sub h1 img {width: 100%; }
header.sub h2 {display: none;}

.menuSub {position: absolute; bottom:10px; right: 0px;  background: rgba(0, 0, 0,0.6); padding: 10px; }
.menuSub li {float: left; }
.menuSub a{font: bold 18px/30px "Karla"; color:#fff; margin: 0px 10px; display: block; transition: all 0.5s;}
.menuSub a.on {border-bottom: 1px solid #fff;}

.utilSub {position: absolute; top:30px; right: 0px;}
.utilSub li {float: left; }
.utilSub a{font: bold 12px/1 'Nanum Gothic', sans-serif; color:#ddd; display: block; margin-left: 15px; }

/*lnb*/
.lnb {width: 200px; float: left; }
.lnb h2 {font: bold 30px/1.3 "Karla"; color:#000; margin-bottom: 30px; letter-spacing: -1px;}
.lnb a {font:13px/1.7 'Nanum Gothic', sans-serif; color: #666;}

.lnb li {width: 100%; height: 50px; border-bottom: solid 1px #ddd; overflow: hidden; padding: 0px 15px;}
.lnb li a {font:  15px/50px 'Nanum Gothic'; }
.lnb li a::after {content: "-"; font: 40px/50px 'Nanum Gothic'; float: right; color:#ddd;}
.lnb li:nth-of-type(1) {height: 80px; background: #2d4e3e; text-align: center; font: bold 18px/80px 'Nanum Gothic'; color:#fff;}

.lnb li.on {border-bottom: solid 2px #2d4e3e;}
.lnb li.on a {font-weight: bold;}
.lnb li.on a::after {content: "+"; font: bold 20px/50px 'Nanum Gothic'; float: right; color:#2d4e3e;}

/*sub_content*/
.sub_content {width: 740px; float: left; padding-left: 50px; }
.sub_title p {font: 12px/1.5 'Karla'; color:#000;}
.sub_title h2 {font: bold 30px/1.3 "Karla"; color:#000; margin-bottom: 20px;}
.sub_title h2::after {content:""; display: block; width: 50px; height: 2px; background: #2d4e3e; margin-top: 10px;}
.sub_content>p {font: 12px/2 'Nanum Gothic', sans-serif; color:#666;}

/*story*/
.storyImg { width: 400px; margin: 30px 0px 20px}

/*로그인*/
.loginArea {width: 100%; height: 200px; overflow: hidden; text-align: center; padding-top: 20px; border-bottom: solid 1px #ddd;}
.loginArea h3 {font: bold 30px/1 "Karla"; color:#000;}
.loginArea h4 {font: 12px/2 'Nanum Gothic', sans-serif; color:#666; margin-bottom: 20px;}
.loginArea fieldset {width: 300px; margin-left: 220px; }
.idPw {float: left; }
.idPw input{display: block; height: 30px; width: 200px; margin: 5px;}
.loginArea input[type="submit"] {display: block; width: 70px; height: 65px; margin: 5px; background: #2d4e3e; font:  15px/1.3 "Karla"; color:#fff; cursor:pointer; border:none;}

.subArea {width: 100%; border-bottom: solid 1px #ddd;}
.subArea div {width: 100%; height: 50px; padding: 20px 40px;}
.subArea p {float: left;}
.subArea a {float: right; display: inline-block; border: 1px solid #ddd; padding: 4px; margin-top: -5px; border-radius: 2px; color:#666;}

/*자유게시판 테이블*/
.typeA { width:700px; border-bottom:1px solid #888;}
.typeA th {height:40px; font:bold 12px/1 "orbitron"; color:#666; border-top:2px solid #888; border-bottom:1px solid #888; letter-spacing:2px; }
.typeA td {border-bottom:1px dashed #ccc; height:38px; font:12px/1.3 'Nanum Gothic', sans-serif; color:#888; text-align:center;}


/*회원가입 테이블*/
.sub_content h3 {font: bold 30px/1 "Karla"; color:#000; text-align: center;}
.sub_content h4 {font: 12px/2 'Nanum Gothic', sans-serif; color:#666; margin-bottom: 20px; text-align: center;}

.join {width:600px; margin: 0 auto;}
.join th {border-bottom:1px solid #ccc; height:50px; font: bold 14px/1 'Nanum Gothic', sans-serif; color:#666; text-align:left; padding-left:20px; background: #f8f8f8;}
.join td {border-bottom:1px solid #ccc; padding-left:20px;}
.join td input {padding:4px 8px; font:12px/1 'Nanum Gothic', sans-serif,"arial"; color:#aaa; background:#fff; border:1px solid #bbb;}
.join td select {padding:3px 8px; font:11px/1 'Nanum Gothic', sans-serif; color:#bbb; background:#fff;border:1px solid #ccc;}
.join td label {font:12px/1 'Nanum Gothic', sans-serif; color:#888; margin-right:5px;}
.join td input[type="radio"] {position:relative; top:4px; margin-right:20px;}
.join td input[type="checkbox"] {position:relative; top:4px; margin-right:20px;}
.join td textarea {width:370px; height:150px; border:1px solid #bbb; background:#fff; padding:10px; box-sizing:border-box; resize:none; margin:10px 0px;}
.join td input[type="file"] {border:1px solid #bbb;}
.join th:last-child {border-right:none;}

.joinButton {width: 600px; margin: 0 auto; text-align: right;}
.joinButton input {display: inline-block; width: 70px; height: 30px; margin: 5px; background: #2d4e3e; font:  15px/1.3 "Karla"; color:#fff; cursor:pointer; border:none; margin: 20px 0px 10px 5px;}

.ess::before {content:"* "; font: bold 14px/1 'Nanum Gothic', sans-serif; color:#2d4e3e; margin-left: -12px;}




/*타블렛---------------------------------------*/
@media screen and (min-width:640px) and (max-width:939px) {

    
/*메인페이지--------------------------------------------------------------------*/
/*header*/
.headerWrap {width: 100%;}
header {width: 90%; }
header h1 {position: absolute; top:-370px; left: 0px;}

#slider1 {height: 400px;}
#slider1 .slide_txt {display: none;}

.util {position: absolute; top:-370px; right: 0px;}
.util li {float: left; }
.util a{font: bold 15px/1 'Nanum Gothic', sans-serif; color:#ddd; display: block; margin-left: 15px; }

/*모바일 비쥬얼*/
.visualMo {display: none;}
/*2번째 슬라이드*/
    
#slider2 {display: none;}

/*content*/
.content {width:90%;}

/*con1*/
.con1 {margin-top: 50px;}
.con1>div {width:49%;margin-right: 2%;}

.con1>div>div {background: rgba(0, 0, 0, 0); }
.con1>div:hover>div {width: 100%; position: absolute; right: 0;} /*타블렛 -hover효과 제거*/
.con1>div:hover a {bottom: 160px;}
.con1>div:hover h3 {opacity: 1;}
.con1>div:hover p {opacity: 1;}

.con1>div>video {display: none;}
    
    
/*con2*/
.con2 {margin-top: 30px;}
.con2>div {width:32.6%; height:100px; margin-right: 1%; margin-top: 20px; }

.con2>div>a>div {width: 80%; height:80px; margin: -20px auto; transition: all 0.5s;}
.con2>div>a>div>div {background: rgba(0, 0, 0, 0);}

.con2>div>a:hover>div {background-position: right;}
.con2>div>a:hover>div>div {opacity: 0;}

/*con3*/
.con3 {width: 100%; height: 300px; margin-top: 80px;}
.con3>div {width: 320px; height: 200px; padding: 10px; top:50px;}

.con3>div a{top:150px;}

/*con4*/
.con4 {width: 100%; background:#eee; padding: 30px 20px; text-align: center;}
.con4>ul{min-width: 700px;}
.con4>ul>li {width: 20%;  min-width: 160px; margin-right: 2%; padding: 10px 10px 20px 10px; border-radius: 0%;}
.con4>ul>li>a {width: 100%; height: 100%;}
.con4>ul>li>a>img {width: 50%;}
.con4>ul>li>a>p {display: none;}
.con4>ul>li:hover {box-shadow: 0px 0px 0px #888;}

/*con5*/
.con5 {margin-top: 50px;}
.con5>div {width:49%;  margin-right: 2%;}

/*footer*/
.footerWrap {margin-top: 50px;}

footer {width:90%;}

.fcon1>.map {width: 70%;}
.fcon1>.map>ul {width: 25%;}


.fcon2>h2>img {float: left; width: 100px; margin-right: 10px;}
.fcon2>p {margin-top: 24px;}
.fcon2>a {width: 150px;}


/*서브페이지--------------------------------------------------------------------*/
/*sub header*/
header.sub {width: 90%; height: 200px;}

/*lnb*/
.lnb {width: 22%;}

/*sub_content*/
.sub_content {width: 78%; padding-left: 30px; }

/*로그인*/
.loginArea fieldset {width: 300px; margin: 0 auto;}


/*자유게시판 테이블*/
.typeA { width:100%;}

/*회원가입 테이블*/

.join {width:100%;}
.join th {padding-left:3%;}
.join td {padding-left:3%;}
.join td textarea {width:90%; }

.joinButton {width: 100%; }

}



/*모바일---------------------------------------*/
@media screen and (min-width:0px) and (max-width:639px) {
    
/*header*/
header {width:100%;  margin: 0px auto 0px; background: #2d4e3e; height: 60px; overflow: hidden;}
header h1 {display: none;}

header h2 {display: block; height: 60px; float: left; font:bold 20px "Karla"; color:#fff;}
header h2 img {height: 60%; margin-top:13px; margin-left: 30px;}
    
header .gnb{display: none;}
    
/*모바일메뉴*/
#moButton i {font-size:25px; color:#fff; margin: 18px 35px 0px 0px;}
#moButton {display: block; float: right;}

/*모바일 비쥬얼*/
.visual {margin: 0px;}
.visualMo {display: block; position: relative;}
.visualMo img {width: 100%;}
.visualMoTxt {position: absolute; top:0px; width: 100%; text-align: center;}
.visualMoTxt h6{color:#fff; font-family: Times; font-size:15px; font-weight:100; margin-top: 15%; margin-bottom: 2%;}
.visualMoTxt h4{color:#fff; font-family: Times; font-size:25px; margin-bottom: 4%;}
.visualMoTxt h4::after {content:""; display: block; width:30px; height:3px; background:#fff; margin: 4% -15px 0px; position: relative; left: 50%;}
.visualMoTxt p{color:#fff; font-size:13px; margin-bottom: 7%;}
.visualMoTxt a{ width: 100px; border: solid 1px #fff; text-align: center; padding: 7px; color:#fff; transition: all 0.5s;}
.visualMoTxt a:hover{ color:#666; background: #fff;}
    
    
/*1번째 슬라이드*/
#slider1 {display: none;}
/*2번째 슬라이드*/
#slider2 {display: none;}


/*content*/
.content {width:90%;}

/*con1*/
.con1 {margin-top: 50px;}
.con1>div {width:100%; height: 170px; margin-right: 0%; margin-bottom: 4%;}
.con1>div>div>a {bottom: 70px;  color: #fff; border: solid 1px #fff; }


.con1>div>div {background: rgba(0, 0, 0, 0); }
.con1>div:hover>div {width: 100%; position: absolute; right: 0;} /*타블렛 -hover효과 제거*/
.con1>div:hover a {bottom: 70px; }
.con1>div:hover h3 {opacity: 1;}
.con1>div:hover p {opacity: 1;}

.con1>div>video {display: none;}
    
    
/*con2*/
.con2 {margin-top: 0px;}
.con2>div {width:100%; height: 50px; margin-right: 1%; margin-top: 10px; }
    .con2>div>a {line-height: 3.3;}
.con2>div>a>div {display: none;}
.con2>div>a>div>div {background: rgba(0, 0, 0, 0);}

.con2>div>a:hover>div {background-position: right;}
.con2>div>a:hover>div>div {opacity: 0;}

/*con3*/
.con3 {width: 100%; height: 250px; margin-top: 40px;}
.con3>div {width: 320px; height: 200px; padding: 10px; top:25px;}

.con3>div a{top:150px;}

/*con4*/
.con4 {width: 100%; background:#eee; padding: 20px; text-align: center;}
.con4>ul{min-width: 300px;}
.con4>ul>li {width: 33%; min-width: 150px; margin-right: 2%; margin-bottom: 2%; padding: 10px 10px 20px 10px; border-radius: 0%;}
.con4>ul>li:nth-of-type(2) {margin-right: 0%;}
.con4>ul>li:nth-of-type(3) {margin-bottom: 0%;}
.con4>ul>li:nth-of-type(4) {margin-bottom: 0%;}
.con4>ul>li>a {width: 100%; height: 100%;}
.con4>ul>li>a>img {width: 50%;}
.con4>ul>li>a>p {display: none;}
.con4>ul>li:hover {box-shadow: 0px 0px 0px #888;}
.con4>ul>li>a>h3 {font: bold 13px/1 'Nanum Gothic', sans-serif;}


/*con5*/
.con5 {margin-top: 40px;}
.con5>div {width:100%;  margin-right: 0%;}

/*footer*/
.footerWrap {margin-top: 50px;}

footer {width:90%;}

.fcon1>.map {width: 100%;}
.fcon1>.map>ul {width: 25%;}

.fcon1>.footerMenu {float: left; margin: 20px 0px 0px 0px;}
.fcon1>.footerMenu>ul>li{float: left; padding: 1px 12px 1px 0px; font:11px/1.8 'Nanum Gothic', sans-serif;  color:#888;}

.fcon2>h2>img {float: left; width: 100px; margin-right: 10px;}
.fcon2>p {margin-top: 5px;}
.fcon2>a {width: 150px;}   
    
/*서브페이지--------------------------------------------------------------------*/
/*sub header*/
.headerWrapSub {margin-bottom: 20px;}
header.sub {width:100%;  margin: 0px auto 0px; background: #2d4e3e; height: 60px; overflow: hidden;  }
header.sub h1 {display: none;}

header.sub h2 {display: block; height: 60px; float: left; font:bold 20px "Karla"; color:#fff;}
header.sub h2 img {height: 60%; margin-top:13px; margin-left: 30px;}
    
header.sub .gnb{display: none;}
    

/*lnb*/
.lnb {width: 100%; float: none; margin-bottom: 40px;}

/*sub_content*/
.sub_title p {text-align: center;}
.sub_title h2 {text-align: center; font-size: 22px;}
.sub_title h2::after {margin: 10px auto;}
    
/*sub_content*/
.sub_content {width: 100%; padding-left: 0px; }

    
/*story*/
.storyImg { width: 80%; margin: 30px auto 20px; display: block;}
    
/*로그인*/
.loginArea fieldset {width: 300px; margin: 0 auto;}

.subArea {width: 100%; border-bottom: solid 1px #ddd;}
.subArea div {width: 100%;  height:60px; text-align: center; padding: 10px 0px;}
.subArea p {float: none; margin-bottom: 10px;}
.subArea a {float: none; padding: 4px; margin-top: -5px; margin-bottom: 10px;}

/*자유게시판 테이블*/
.typeA { width:100%;}

/*회원가입 테이블*/

.join {width:100%;}
.join th {padding-left:3%;}
.join td {padding-left:3%;}
.join td textarea {width:90%; }

.joinButton {width: 90%; } 
}