﻿@charset "utf-8";
/* ----------
css
---------- */

@import url("font2.css");	/*  웹폰트 사용시 */
@import url('http://fonts.googleapis.com/earlyaccess/notosanskr.css');
 
/* layout */
body, table, th, td,
textarea, button, input[type="button"] {
	font-family:'Noto Sans KR',"나눔고딕", NanumGothic, "Nanum Gothic","돋움", Dotum, Arial, sans-serif;
	font-size:16px;
	color:#666;
}
/* ===================================
	공통클래스
 =================================== */
body { background-color:#fff; }
button{cursor:pointer; padding:0; margin:0px;}
input[type="button"]{cursor:pointer;}
#wrap { width:100%; min-width:1200px; overflow-x:hidden;}
.wrap_box { width:1200px; margin:0 auto; position:relative;}

.view_pc{display:block;}
.view_mobile {display:none;}
.map_area_pc {display:block;}
.map_area_mobile {display:none;}

@media all and (max-width:768px) {
.view_pc{display:none;}
.view_mobile {display:block;}
.map_area_pc {display:none;}
.map_area_mobile {display:block;}

}

.bu1 {background:#f8f8f8; padding:15px 20px;margin:30px 0 0 0;}
.bu1 .list_type{margin:0;}
.bu2{background:url(../img/icon_ball2.gif) no-repeat left 6px;padding:0 0 4px 15px;color:#555;font-size:14px;margin-left:8px; line-height:22px;}
.bu3{background:url(../img/icon_ball3.gif) no-repeat left 9px !important;padding:0 0 4px 12px !important;color:#737373 !important;text-indent:0 !important;}

.tit1{font-size:16px;margin:30px 0 10px 0;font-weight:normal;color:#202020;line-height:129%; background: url(../img/bu_h2.gif) 0 4px no-repeat; font-weight: bold; padding-left: 19px; }



/* tab */
.tabgroup{margin:0 0 30px 0; }
.tabgroup li {white-space:nowrap;}
.tabnavi {overflow:hidden; width:100%; }
.tabnavi ul {margin:0; }
.tabnavi {clear:both;margin:0; display:inline-block; position:relative;overflow:hidden; /*margin-top:-15px;*/}
.tabnavi li {float:left; }
.tabnavi li:first-child{margin-left:0; margin-right:0;}
/* .tabnavi li a{display:block;text-align:center;color:#fff;padding:10px 0; padding:10px 09\;font-weight:bold; min-width:196px9\;}*/
.tabnavi li a {display:block;background:#f7f7f7;color:#888;text-align:center;padding:10px 0;border:1px solid #e3e3e3;border-width:1px 1px 1px 1px;text-align:center;padding:12px 20px 12px 20px9\;}
.tabnavi li.on a,
.tabnavi li a:hover{background:#fff;color:#565e60;border:1px solid #565e60; font-weight:bold; text-decoration:none; }
.tabnavi.tabtype{border-bottom:0}
 
 
 

.tab_2dept {margin-top:30px;}
.tab_2dept h1 {font-size: 32px; font-weight: 100; text-align: center; text-transform: uppercase; color:#333; font-family:'Noto Sans KR',"나눔고딕", NanumGothic, "Nanum Gothic","돋움", Dotum, Arial, sans-serif;}
.tab_2dept span.line {  color:#ddd;   padding:0 10px;}
.tab_2dept h1 a.on {color:#1268b4; border-bottom:solid 2px #1268b4;}
@media all and (max-width:768px) {
.tab_2dept h1  {font-size:14px; letter-spacing:-3px;}
}

/*
.tab_2dept {text-align:center; margin-top:30px;}
.tab_2dept span {display:none;}
.tab_2dept h1 {display:inline;}
.tab_2dept h1 a {display:inline-block; background:#fff; min-width:200px; margin-left:-1px; font-family:'Noto Sans KR',"나눔고딕", NanumGothic, "Nanum Gothic","돋움", Dotum, Arial, sans-serif;  padding:15px 5px; text-align:center; font-size:1.2em; border:solid 1px #2a66be; font-weight:normal; letter-spacing:-1px;}
.tab_2dept h1 a.on {background:#2a66be; color:#fff; font-weight:500;}

@media all and (max-width:768px) {
	.tab_2dept h1 a {min-width:90%; font-size:1em; margin-bottom:-1px;}
	}
*/

/*#wrap {overflow:hidden; width:100%; } /* min-width 홈페이지 컨텐츠 가로값에 맞게 변경 */
/*.area{ width:950px; float:right;} width 홈페이지 컨텐츠 가로값에 맞게 변경 */
.area{ width:100%; float:right;} 
.clearfix{*zoom:1; display:block;}
.clearfix:after{clear:both; display:block; content:"";}
.blind{overflow:hidden;position:absolute;top:0;left:0;width:1px;height:1px;font-size:0;line-height:0}
.trans200{-webkit-transition:all 0.2s;-moz-transition:all 0.2s;-o-transition:all 0.2s;-ms-transition:all 0.2s;transition:all 0.2s}
.trans300{-webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;-ms-transition:all 0.3s;transition:all 0.3s}
.trans400{-webkit-transition:all 0.4s;-moz-transition:all 0.4s;-o-transition:all 0.4s;-ms-transition:all 0.4s;transition:all 0.4s}
.trans500{-webkit-transition:all 0.5s;-moz-transition:all 0.5s;-o-transition:all 0.5s;-ms-transition:all 0.5s;transition:all 0.5s}
.font-nanum{font-family:"나눔고딕", NanumGothic, "Nanum Gothic","돋움", Dotum, Arial, sans-serif;}
.font-nanumbarun{font-family:NanumBarunGothic,"Nanum Barun Gothic","나눔고딕", NanumGothic, "Nanum Gothic","돋움", Dotum, Arial, sans-serif;}
table {width:100%;table-layout:fixed;}
.material-icons{vertical-align:middle;}


#spot {width:100%;height:260px;position:relative;}
#spot h2 { position:absolute; top:50%; left:200px; width:100%; text-align:center; color:#fff; font-size:40px; font-family:"Noto Sans KR", "Malgun Gothic", dotum, gulim, verdana, sans-serif;
font-weight:600; text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5);}
#spot p { position:absolute; top:70%; left:200px; width:100%; text-align:center; color:#fff; font-size:20px; font-family:"Noto Sans KR", "Malgun Gothic", dotum, gulim, verdana, sans-serif;
 font-weight:400; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);}
.spot122#spot p {top:75%;}


.spot1 { background:url(../img/sub_visual1.jpg) no-repeat 35% top; background-size:cover;} 
.spot2 { background:url(../img/sub_visual2.jpg) no-repeat 35% top; background-size:cover;} 
.spot3 { background:url(../img/sub_visual3.jpg) no-repeat 35% top; background-size:cover;} 
.spot4 { background:url(../img/sub_visual4.jpg) no-repeat 35% top; background-size:cover;} 
.spot5 { background:url(../img/sub_visual5.jpg) no-repeat 35% top; background-size:cover;} 

@media all and (max-width:1024px) {
 
.spot1 { background:url(../img/sub_visual1.jpg) no-repeat 35% top; background-size:cover;} 
.spot2 { background:url(../img/sub_visual2.jpg) no-repeat 35% top; background-size:cover;} 
.spot3 { background:url(../img/sub_visual3.jpg) no-repeat 35% top; background-size:cover;} 
.spot4 { background:url(../img/sub_visual4.jpg) no-repeat 35% top; background-size:cover;} 
.spot5 { background:url(../img/sub_visual5.jpg) no-repeat 35% top; background-size:cover;} 
}
.location { position:relative; height:50px; background:url(../img/bg_location.png) repeat-y center top; margin-top:-50px; font-size:13px; display:none;}
.location > div > ul { margin-left:250px; }
.location > div > ul > li { position:relative; float:left; }
.location > div > ul > li > a { border-right:1px solid rgba(255,255,255,0.1); line-height:50px; display:block; color:#fff; min-width:150px; padding:0 30px 0 20px; background:url(../img/bg_stle_arrow.png) no-repeat 90% center;}
.location > div > ul > li.home > a { background:rgba(255,255,255,1) url(../img/bg_home.png) no-repeat center; border-right:none; min-width:50px; padding:0; text-indent:-9999px;}
.location > div > ul > li > ul { position:absolute; top:50px; left:0;}
.location > div > ul > li > ul > li > a { min-width:150px; display:block; color:#fff; padding:8px 30px 8px 20px; line-height:1.2em; font-size:0.95em; border-top:1px solid rgba(255,255,255,0.1);background:rgba(31,57,101,0.95);}
.location > div > ul > li > ul > li > a:hover { background:#920b11;}
.stle_ul > li > ul { display:none; z-index:10000; }


/*#snb { float:left; width:249px; padding-right:40px; box-sizing:border-box;}*/
#snb {display:none;}
#snb h2 { width:95%; font-size:30px; letter-spacing:-1px; font-weight:400; text-align:center; padding:40px 0; border-bottom:1px solid #e1e1e1; color:#333;}
.snb_group > li > a { display:block; width:95%; color:#444; font-size:16px; padding:13px 30px; box-sizing:border-box; border-bottom:1px solid #e1e1e1; }
.snb_group > li > a:hover, .snb_group > li > a.over { width:100%; color:#cd020b; padding:13px 30px 12px 30px; border-bottom:2px solid #cd020b;}
.snb_group > li > ul { border-bottom:1px solid #e1e1e1; padding:10px 0;}
.snb_group > li > ul > li > a { display:block; padding:5px 20px 5px 33px; font-weight:400; font-size:14px; color:#666; background:url(/project/design/com/bg_snb_2d.gif) no-repeat 24px 17px; transition: all .3s ease-in-out;}
.snb_group > li > ul > li > a:before { content:"- "; transition: all .3s ease-in-out;}
.snb_group > li > ul > li > a:hover, .snb_group > li > ul > li > a.over { color:#dd2424; transition: all .3s ease-in-out;}

/*#contents { float:left; width:951px; min-height:600px; padding:40px 0 40px 40px; color:#666; border-left:1px solid #e5e5e5; box-sizing:border-box; font-size:16px;}*/
#contents { float:left; width:10%%; min-height:600px; padding:40px 0; color:#666;box-sizing:border-box; font-size:16px;}
#contents .stle { font-size:26px; line-height:26px; color:#333; letter-spacing:-1px; font-weight:400; padding-bottom:30px;}

 #aside h2 { width:95%; font-size:30px; letter-spacing:-1px; font-weight:400; text-align:center; padding:30px 0; border-bottom:1px solid #e1e1e1;}
.snb_group > li > a { display:block; width:95%; color:#444; font-size:16px; padding:13px 30px; box-sizing:border-box; border-bottom:1px solid #e1e1e1; }
.snb_group > li > a:hover, .snb_group > li > a.over { width:100%; color:#cd020b; padding:13px 30px 12px 30px; border-bottom:2px solid #cd020b;}
.snb_group > li > ul { border-bottom:1px solid #e1e1e1; padding:10px 0;}
 .snb_group > li > ul > li > a { display:block; padding:5px 20px 5px 33px; font-weight:400; font-size:14px; color:#666; background:url(/project/design/com/bg_snb_2d.gif) no-repeat 24px 17px; transition: all .3s ease-in-out;}
.snb_group > li > ul > li > a:before { content:"- "; transition: all .3s ease-in-out;}
.snb_group > li > ul > li > a:hover, .snb_group > li > ul > li > a.over { color:#dd2424; transition: all .3s ease-in-out;}
				
				
/* ========
		헤더
 ======== */
#header{position:fixed; top:0px; left:0px; width:100%; border-bottom:2px solid #3861ab; background-color:#fff;/* background-color:rgba(0,0,0,0.7);*/ /*background-color:rgba(28,84,157,0.7);*/ z-index:999; height:100px;}
#headerInner{position:relative; width:100%; max-width:1200px; width:100%; margin:0px auto;}
#headerInner .logo{position:absolute; top:0; left:0; z-index:1; }
#headerInner .logo a{display:block; margin-top:15px; width:265px; height:73px; background:url(../img/logo.png) no-repeat; font-size:0; }

/* 헤더 :: GNB */
#gnb{height:106px; }
#gnb > ul{text-align:center; margin-left:330px;}
#gnb > ul > li{position:relative; display:inline-block; width:130px; margin-left:-4px; }



#gnb > ul > li:first-child{margin-left:0;}
#gnb > ul > li > a{display:block; height:106px; padding:0 15px;	-webkit-transition:all 400ms;-moz-transition:all 400ms;-o-transition:all 400ms;-ms-transition:all 400ms;transition:all 400ms}
#gnb > ul > li > a:hover,#gnb > ul > li.on > a{background-color:#4b5f83;}
#gnb > ul > li > a > span{display:block; height:104px; line-height:104px; letter-spacing:-0.75px; font-size:20px; border-bottom:2px solid transparent; color:#000;}
#gnb > ul > li > a:hover > span,#gnb > ul > li.on > a > span{border-bottom-color:#fff; color:#fff !important;}
#gnb > ul > li .gnb-2dep{display:none; position:absolute; top:106px; left:0px; width:100%; padding:11px 0 40px;text-align:left; background-color:#4b5f83;}
#gnb > ul > li .gnb-2dep li a{display:block; padding:11px 26px; color:#fff; font-size:14px; font-weight:300; letter-spacing:-0.25px;}
 
  

/* 헤더 :: Util 메뉴 */
#utilMenu{position:absolute; top:0; right:0; padding-top:44px; text-align:right;}
#utilMenu a{color:#666; }
#utilMenu > div{display:inline-block;}
.user-menu-list a{/*opacity:0.7;filter:Alpha(opacity=70);*/ font-size:13px; font-weight:300; margin-right:10px;}
.user-menu-list a:first-child{margin-right:10px;}
.user-menu-list a.last {margin:0;}
.user-menu-list a:hover{opacity:1.0;filter:Alpha(opacity=100);}
.user-lang-select a{display:inline-block; font-size:18px; font-weight:400; padding-bottom:9px; border-bottom:2px solid transparent; margin-left:20px;}
.user-lang-select a:hover,.user-lang-select a.on{border-bottom-color:#fff; transform:}
/*  헤더 :: GNB MOBILE */ 
.gnb-open-btn{position:absolute; top:50%; right:2%; visibility:hidden; opacity:0;filter:Alpha(opacity=0); transform:translateX(100%); -moz-transform:translateX(100%);}
#gnbM{/* width:86%; */ width:300px; height:100%; position:fixed; top:0px; right:-100%; max-width:550px; background-color:#0060a1; z-index:99999; overflow-y:auto;
	-webkit-transition:all 0.5s;-moz-transition:all 0.5s;-o-transition:all 0.5s;-ms-transition:all 0.5s;transition:all 0.5s
}
#gnbM.open{right:0px;}

.logo-box {cursor:pointer; display:inline-block; position:relative; top:15px; height:20px; margin-left:15px;}
.logo-box a{background-image:url(../img/logo_w.png); width:265px; height:73px; display:block;background-size:60%; background-repeat:no-repeat;}
.close-box {cursor:pointer; display:block;/* height:114px; line-height:114px;*/ height:50px; padding:0 5%; border-bottom:1px solid #5494c0; text-align:right;}
#gnbNavigation > ul{width:100%; overflow:hidden;}
#gnbNavigation > ul > li{position:relative; width:100%; border-bottom:1px solid #5494c0; }
#gnbM.open  #gnbNavigation> ul > li{animation: inFromRight 0.6s both cubic-bezier(0.7, 0, 0.3, 1);}
#gnbNavigation > ul > li > a{position:relative; display:block;  height:48px; line-height:48px; padding:0 7%; color:#fff; font-size:17px; font-weight:400; letter-spacing:-0.25px;}
#gnbNavigation > ul > li .gnb-2dep{display:none; padding:13px 0; background-color:#1d242a}
#gnbNavigation > ul > li .gnb-2dep li{}
#gnbNavigation > ul > li .gnb-2dep li a{display:block; color:#fff; font-size:14px; padding:12px 7%;}
#gnbNavigation > ul > li .gnb-2dep li a:hover{color:#5494c0}
#gnbMenuBg{display:none; position:fixed; top:0px; left:0px; width:100%; height:100%; cursor:pointer; background-color:#000; background-color:rgba(0,0,0,0.83); z-index:99998}
/* FIXED STYLE */
#header.fixed{background-color:#fff; border-bottom:2px solid #3861ab;}
#header.fixed #headerInner .logo a{background-image:url(../img/logo.png)}
#header.fixed #gnb > ul > li > a > span{color:#2c2c2c}
#header.fixed #utilMenu a{color:#2c2c2c;}
#header.fixed .user-lang-select a:hover,#header.fixed .user-lang-select a.on{border-bottom-color:#3d8600;}

/* -------- 170927 헤더 변경 -------- */
#utilMenu{padding-top:14px;}
#utilMenu .user-menu-list{display:none; margin-bottom:15px;}
.header-family-site-con{position:relative; border:1px solid rgba(255,255,255,0.5)}
.header-family-site-con a{display:block; padding:0 10px;}
.header-family-site-con .family-list{ bottom: auto; top: 24px;left: -1px; width: 110px; border-bottom:1px solid #b0b0b0; z-index:999}
.header-family-site-con .family-list a{padding:6px 10px}
#header.fixed .header-family-site-con{border-color:#555;}
#header.fixed #utilMenu .header-family-site-con .family-list li a{color:#fff;}


/* ========
		푸터
 ========  */
#footer{position:relative; /*padding:50px 0;border-top:1px solid #868686; */ padding:30px 0; }
.index #footer{border-top-color:transparent;}
#footerInner  {width:1200px; margin:0 auto; text-align:center;}
#footerInner .foot-logo{float:left;/* margin-right:5%;*/}
#footerInner .foot-logo img {width:80%; display:none;}
#footerInner .footer-address,#footerInner .footer-address dl{line-height:24px; font-weight:300; font-size:12px; color:#707070;}
#footerInner .footer-address dt,#footerInner .footer-address dd{display:inline-block;}
#footerInner .footer-address dd{margin-right:10px;}
#footerInner address{clear:both; text-align:left; line-height:18px;}
.familysite-box{position:relative; float:right; width:150px; text-align:left; /*right:50px;*/ display:none;}
.familysite-box > a{display:block; height:30px; line-height:30px; text-indent:20px; border:1px solid #b0b0b0; background-color:#444546; color:#fff; font-size:12px; }
.familysite-box > a i{position:absolute; right:15px; top:7px;}

.familysite-box2{position:relative; float:right; width:150px; text-align:left;  /*right:50px; */margin-right:10px; display:none;}
.familysite-box2 > a{display:block; height:30px; line-height:30px; text-indent:20px; border:1px solid #b0b0b0; background-color:#444546; color:#fff; font-size:12px; }
.familysite-box2 > a i{position:absolute; right:15px; top:7px;}


.family-list{position:absolute; bottom:30px; left:0px; width:148px;  padding:10px 0; background-color:#444; border:1px solid #b0b0b0; border-bottom:0;  z-index:11; display:none; }
.family-list a{display:block; padding:10px 20px; color:#fff; font-size:12px;}
.family-list a:hover{color:#fff;}
.bottom-to-top-btn{position:absolute; right:6%; top:-60px; display:block; width:60px; height:40px; text-align:center; padding-top:20px;background-color:rgba(0,0,0,0.7); z-index:999;}
.index .bottom-to-top-btn{display:none;}

 @media all and (max-width:1024px) {
	 .familysite-box, .familysite-box2 {display:none;}
 }


/* 하단 레이아웃 */
#fotter_wrap{width:100%;min-width:320px; float:left;/* background:#333; border-top:solid 1px #e5e5e5;*/ background:#232323;} /*   margin-top:20px; background:#303436;*/ 
#fotter h1 {position:absolute;font-size:0;line-height:0;overflow:hidden}
#fotter p {margin:0;padding:10px 0;line-height:1.8em}
#fotter_catch {position:relative;margin:0 auto;padding:20px 0 0;width:970px;text-align:center}
#fotter_company {text-align:center}
/*#fotter_copy {background:#414141}*/
/*#fotter_copy div {position:relative;margin:0 auto;padding:10px 0;width:970px;color:#fff}*/
#fotter_copy div{float:left; padding-right:15px;}
#fotter_copy a {display:inline-block;margin:0 10px 0 0;color:inherit}
#fotter_copy #fotter_totop {position:absolute;top:10px;right:0}

#fotter{width:100%;text-align:center;padding:0 0 20px 0;}
#fotter #fotter_in{width:100%;max-width:980px;margin:0 auto;position:relative; height:50px;_width:980px;}
#fotter #fotter_logo {float:left; display:block; padding-left:15px;}
#fotter #fotter_copy {float:left; text-align:left;font-family:verdana;font-size:9px;color:#52555d;font-weight:bold;padding:0 20px 20px 20px;line-height:1.4em;}
#fotter #fotter_copy a:link,
#fotter #fotter_copy a:visited{color:#81848c;}
#fotter #fotter_copy a:active,
#fotter #fotter_copy a:focus,
#fotter #fotter_copy a:hover{color:#fff;}
#fotter #fotter_copy address{text-align:left;font-size:12px; font-family:'Noto Sans KR',"나눔고딕", NanumGothic, "Nanum Gothic","돋움", Dotum, Arial, sans-serif; font-weight:normal;font-style:normal; padding-bottom:5px;}
#fotter #fotter_copy b,
#fotter #fotter_copy span{display:inline-block;color:#81848c;}
#fotter_sns {float:right; display:block;  position:relative; top:10px;  right:0px;}
@media all and (max-width:640px){
	#fotter_sns {display:none;}
}
/*#fotter_sns {float:right;}*/
#fotter_sns a {float:left; width:40px; margin-left:10px;}
#fotter_sns a img {width:100%;}

#header_sns {float:right; display:block;  position:relative; top:17px;  right:0px;}
#header_sns a {float:left; width:40px; margin-left:10px;}
#header_sns a img {width:100%;}

#fotter_link{width:100%;text-align:left;_width:980px;}
#fotter_link div{width:100%;max-width:980px;margin:0 auto; position:relative;}
#fotter_link div a{display:inline-block;font-weight:bold;font-size:11px; line-height:46px;}
#fotter_link div a:link,
#fotter_link div a:visited{color:#909090;}
#fotter_link div a:hover{color:#333;text-decoration:none;}
#fotter_link div dl{margin:0px;padding:0px;position:absolute;right:0px;top:-1px;}
#fotter_link div dl dt{margin:0px;padding:0px;color:#828892;width:100px;cursor:pointer;height:46px;line-height:46px;font-family:verdana;font-size:9px;font-weight:bold;background:URL(../img/ico_family.gif) no-repeat right center;}
#fotter_link div dl:hover dt{color:#fff;}
#fotter_link div dl dd{margin:0px;padding:0px;display:none;}
#fotter_link div dl:hover dd{display:block;width:130px;position:absolute;right:0px;bottom:45px;background:#fff;border:1px solid #000;border-bottom:0px !important;padding:10px 0; z-index:9999;}
#fotter_link div dl:hover dd a{display:block;text-align:right;font-family:verdana;font-size:9px;font-weight:bold;height:30px;line-height:30px;}
#fotter_link div dl:hover dd a:hover{color:#000;}

.fotter_link_menu {}
#fotter_link div.mobilev a {padding:0;}
#fotter_link div.address_quick {display:none;} 
#fotter_link div.address_quick a {padding:0 10px;}


.mobilev{display:none !important;}
.mobilev a img {width:50%;}
.mobilev_side {margin:0 auto; text-align:center; color:#fff; font-family:"Nanum Gothic","나눔 고딕", "맑은 고딕", "dotum";}
/*.mobilev_side a img {width:15%; padding:0 5px;}*/

/* //하단 레이아웃 */

/* ========
	사이트맵
 ======== */
#sitemapCon{ position:relative; width:96%; padding:15px 0; max-width:1200px; margin:0px auto; z-index:99999; }
#sitemapInner{overflow:hidden; }
#sideTitCon{position:absolute; top:0px; left:0px; height:100%; background-color:#3d8600; width:175px; background:url(../img/site_map_tit.png) no-repeat; font-size:0; line-height:100%; overflow:hidden;}
#sitemapList{width:99%; height:571px;background-color:#fff; box-shadow:5px 5px 5px rgba(0, 0, 0, .1);}
#sitemapList > ul{overflow:hidden; margin:0 40px 0 175px; padding-top:120px;}
#sitemapList > ul > li{float:left; width:20%; text-align:center;}
#sitemapList > ul > li > a{display:inline-block; color:#191919; padding:0 15% 30px 15%;font-size:30px; border-bottom:1px solid #404040; color:#191919; font-size:20px; letter-spacing:-1.0px; margin-bottom:40px;}
#sitemapList > ul > li > a:hover{color:#3d8600}
#sitemapList > ul > li .sitemap-2dep {text-align:left; padding-left:30%;}
#sitemapList > ul > li .sitemap-2dep a{display:block; padding:13px 0; color:#3d3d3d; font-size:15px; font-weight:300;}
#sitemapList > ul > li .sitemap-2dep a:hover{color:#3d8600; text-decoration:underline;}
/* -------- MODAL LAYER -------- */
.modal-pop-bg{position:fixed; width:100%; height:100%; top:0px; left:0px;  background:#000; background:rgba(0,0,0,0.8); display:none; ; z-index:9999}
.modal-fixed-pop-wrapper{position:fixed; display:none; top:0px; left:0px; width:100%; height:100%; z-index:9999;}
.modal-fixed-pop-inner{position:absolute; display:table; width:100%; height:100%; text-align:center;}
.modal-inner-box{ position:relative; display:table-cell; vertical-align:middle;}
.modal-close-box{width:100%; max-width:1200px; margin:0px auto; text-align:right; }
.modal-close-btn{display:none; margin:0 0 14px 0;}
.modal-loading{position:absolute; top:50%; left:50%; margin:-25px 0 0 -25px; z-index:10000;}
.modal-inner-content{text-align:left;}
.loading {
  display: inline-block;
  width: 50px;
  height: 50px;
  border: 8px solid rgba(255,255,255,.5);
  border-radius: 50%;
  border-top-color: #3d8600;
  animation: spin 1s ease-in-out infinite;
  -webkit-animation: spin 1s ease-in-out infinite;
  
}
@keyframes spin {
  to { -webkit-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
  to { -webkit-transform: rotate(360deg); }
}
/* ========
	서브레이아웃
 ======== */
#visual{overflow:hidden; position:relative; display:table; width:100%;/* height:385px;*/}
#visual > div{/* position:relative; */ display:table-cell; vertical-align:middle; text-align:center; color:#fff;}
#visual > div .visual-tit{display:inline-block; font-size:40px; letter-spacing:-0.75px; font-weight:400; padding:55px 0 26px; position:relative; z-index:1;}
#visual > div .visual-txt{font-size:13px; opacity:0.73;filter:Alpha(opacity=73); font-weight:300; position:relative; z-index:1;}
#visual > div .visual-btns{position:absolute; top:50%; left:50%;width:630px; height:14px; margin-left:-315px;  }
#visual > div .visual-btns a{display:block; position:absolute; top:0px;}
#visual > div .visual-btns .prev-page-btn{left:0px;}
#visual > div .visual-btns .next-page-btn{right:0px;}
#visualBottomCon{position:absolute; bottom:0px; left:0px; width:100%; background-color:rgba(0,0,0,0.3); border-top:1px solid rgba(255,255,255,0.3)}
#visualBottomCon .left-controls{float:left; margin-left:6%; }
#visualBottomCon .right-controls{float:right; margin-right:6%; height:100%;}
#visualBottomCon a{display:inline-block; width:160px; text-align:center; line-height:42px; color:#fff; height:42px; margin-right:2px; background-color:#6b5d54; font-size:16px; letter-spacing:-0.25px;}
#visualBottomCon a.sub-visual-btn2{background-color:#969696;}
#visualBottomCon a.sub-visual-btn3{background-color:#3d8600;}
#visualBottomCon a.sub-visual-btn4{background-color:#00a19e;}
/* Sub Layout :: Location */
#contentLocation{position:relative; width:100%; height:50px; border-top:1px solid #cfcfcf; border-bottom:1px solid #cfcfcf; background-color:#dadada;}
.location-inner{position:absolute;/* left:50%;*/ left:30%; height:100%; width:100%; background-color:#f0f0f0;margin-left:-273px;}
.location-inner > ul{ height:100%;}
.location-inner > ul > li{position:relative; float:left; width:150px; height:100%; letter-spacing:-0.25px; color:#373737; line-height:50px; background:url(../img/location_bg2.jpg) no-repeat 100% 0; padding-right:20px;}
.location-inner > ul > li.home{width:auto; font-size:13px; font-weight:300; background:#dadada url(../img/location_bg1.jpg) no-repeat 100% 0; padding-right:40px; }
.location-inner > ul > li.home img{margin-right:15px;}
.location-inner > ul > li > a{display:block; padding-left:23px; font-size:15.5px; /*background:url(../img/location_arrow.jpg) no-repeat 95% 50%*/}
.location-inner > ul > li .location-2dep{display:none; position:absolute; top:50px; left:-18px;width:228px; border:1px solid #cfcfcf; border-bottom-color:#000000; background-color:#fff; z-index:11}
.location-inner > ul > li.location1 .location-2dep{width:229px;}
.location-inner > ul > li.location2 {background:none;}
.location-inner > ul > li .location-2dep li{height:44px; line-height:44px; border-top:1px solid #cfcfcf;}
.location-inner > ul > li .location-2dep li:first-child{border-top:0;}
.location-inner > ul > li .location-2dep li a{display:block; padding-left:40px; color:#414141; font-size:15px; font-weight:300; letter-spacing:-0.75px;}
.location-inner > ul > li .location-2dep li a:hover{background:#f0f0f0 url(../img/location_arrow2.jpg) no-repeat 95% 50%}
#middleArea{padding:50px 0;}
#contentInfo{position:relative; border-bottom:1px solid #d6d6d6; text-align:center;}
#contentInfo h3{display:inline-block; position:relative; top:1px; height:31px; padding:0 35px 42px 35px; border-bottom:2px solid #3d8600; color:#151515; font-size:32px; font-weight:400; letter-spacing:-0.75px;}
#contentInfo a{display:inline-block; position:absolute; top:0px; padding:15px 0px 42px 0; border-bottom:1px solid #151515; }
#contentInfo .sub-prev-btn{ padding-right:5px;  left:0px;}
#contentInfo .sub-next-btn{ padding-left:5px; right:0px;}
#content{padding-top:60px; min-height:500px;}
#content img{max-width:100%;}

@media all and (min-width:1101px){
	.gnb-call-btn {display:none;}
	.gnb-kakao-btn {display:none;}
	.gnb-map-btn {display:none;}
	.kakao-btn{padding-left:48px;}
	
	
}

@media all and (max-width:1100px){
	
	#footerInner  {width:100%;}
 
	.wrap_box {width:100%; margin:0 auto;}
	#contents {width:100%; padding:30px 0; border:none;}
	
	
	.location .wrap_box { background:none;}
	.location > div > ul { margin-left:0; background:rgba(12,30,55,0.9);}
	#snb { display:none;}

	
	#spot { height:180px;}
	#spot h2 { top:42%; font-size:30px;}
	#spot p { display:none;}
	.location { height:40px; margin-top:-40px;}
	.location > div > ul > li > a { line-height:40px; min-width:40px; padding:0 30px 0 10px; background-size:10px;}
	.location > div > ul > li.home > a { min-width:40px; background-size:15px;}
	.location > div > ul > li > ul { top:40px;}
	.location > div > ul > li > ul > li > a { min-width:100px; }
	

	/* -------- 헤더 -------- */
	 #headerInner .logo a{width:265px; background-size:100%; margin-top:15px;}
	
	#utilMenu > div{display:block;}
	/* #utilMenu > div.user-menu-list{position:absolute; top:5px; right:0px; width:150px;} */
	#utilMenu > div.user-menu-list a{font-size:11px;}

	/* -------- 170927 헤더 변경 -------- */
	#utilMenu{padding-top:16px;}
	#utilMenu > div{display:inline-block}
	.user-lang-select a{font-size:15px; margin-left:13px;}

}
@media all and (max-width:1120px){
	
	#spot { height:300px;}
	#spot h2 { top:60%; font-size:30px;}
	
	.area{width:100%;}
	#headerInner aside{display:none;}
	#header { top:-40px;}

	#fotter_link {padding-top:0;}
	/* -------- 헤더 -------- */
	#headerInner{padding:60px 0 0 0;}
	#headerInner .logo{position:static; margin-left:2%;}
	#headerInner .logo a{margin:0;}
	#utilMenu{top:0px; right:auto; /* overflow:hidden; */ width:96%; height:30px; left:0px; background-color:#000; padding:10px 2%;}
	#utilMenu > div.user-menu-list{float:left; position:static; width:auto;}
	#utilMenu > div.user-menu-list a{font-size:18px; line-height:30px; }
	#utilMenu > div.user-menu-list a:first-child{display:none;}
	#utilMenu > div.user-lang-select{float:right;}
	#gnb{display:none;}
	.gnb-open-btn{visibility:visible; opacity:1;filter:Alpha(opacity=100); margin-top:2px; transform:translateX(0); -moz-transform:translateX(0);} 
	.gnb-kakao-btn {position:absolute; top:50%; right:23%;}	
	.gnb-call-btn {position:absolute; top:53%; right:13%;}	
	.gnb-map-btn {position:absolute; top:56%; right:22%;}	

	.gnb-open-btn i{font-size:38px; color:#333;}
	.gnb-call-btn i{font-size:30px; color:#333;}
	.gnb-map-btn i{font-size:30px; color:#333;}
	/* FIXED STYLE */
	#header.fixed{top:-50px;}
	#header.fixed .gnb-open-btn i{color:#2c2c2c;}
	#header.fixed .gnb-call-btn i{color:#2c2c2c;}
	/* -------- 푸터 -------- */
	.familysite-box{float:none; margin:0px auto;}
	#footerInner .foot-logo{display:none;}

	#footerInner .footer-address,#footerInner .footer-address dl{float:none; /*width:99%;*/ margin:0 auto; text-align:center; font-size:11px; line-height:16px;}
	#footerInner .footer-address{margin:0 0 20px 0; float:left;}
	#footerInner .footer-address dd{margin-right:0;}
	#footerInner address{line-height:14px; padding:15px;}
	/*#fotter_sns {width:100%;}*/
	#fotter_sns dl {width:150px; margin:0 auto;}
	#fotter_sns a {float:left; width:40px; margin-left:10px;}
	#fotter_sns a img {width:100%;}
	.bottom-to-top-btn{position:static; margin:0px auto;}
	.index .bottom-to-top-btn{display:block;}
	/*------------ 하단 ---------------------*/
	.tnb{overflow:hidden;text-align:center;padding-bottom:15px !important;}
	.tnb li{display:inline;text-align:center;}
	.tnb li a{display:inline-block;border:1px solid #5494c0;padding:8px 15px; font-size:11px;font-weight:normal;color:#70addd;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px}
	.tnb li.btn_adm{width:100%;}
	.telnmail{padding:0 10px 5px 10px;}
	.telnmail a{display:block;padding:10px;border:1px solid #5494c0; text-align:center;margin-bottom:5px font-weight:normal;color:#70addd;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px}


	
	/*#fotter_sns {display:none;}*/
	/* -------- 사이트맵 -------- */
	/* MODAL LAYER */
	.modal-close-box{width:96%; }
	.modal-close-btn{margin:0; margin-top:2%;}
	.modal-close-btn img{width:32px;}
	.modal-inner-content{padding:2% 0;}
	/* -------- SUB 레이아웃 -------- */
	#visualBottomCon{bottom:-60px; opacity:0;filter:Alpha(opacity=0);}
	#contentInfo{width:96%; margin:0px auto;}
}

@media all and (max-width:768px){
	
	
	 
	
	/* -------- 사이트맵 -------- */
	#sideTitCon{
		position:static; width:90%; height:auto; padding:10px 5%; background:none; background-color:#3d8600; font-size:24px; line-height:20px;
	}
	.side-tit-con strong{display:block; font-size:20px; font-weight:600; letter-spacing:-0.8px; color:#fff; opacity:0.6;filter:Alpha(opacity=60);}
	.side-tit-con span{color:#fff; font-size:12px; letter-spacing:-0.5px; font-weight:300;}
	#sitemapList{width:100%; height:auto ; box-shadow:none;}
	#sitemapList > ul{margin:0; padding:20px 5%;}
	#sitemapList > ul > li{width:33.33%;}
	#sitemapList > ul > li > a{font-size:20px; margin-bottom:20px;}
	#sitemapList > ul > li .sitemap-2dep {height:150px; padding-left:5%;}
	#sitemapList > ul > li .sitemap-2dep a{padding:5px 2%; font-size:12px; }

	/* -------- SUB 레이아웃 -------- */
	/*#visual{height:325px}*/
	#visual > div .visual-tit{padding-top:95px; font-size:32px}
	#visual > div .visual-btns{left:2%; top:55%; margin-left:0; width:96%;}
	#middleArea{padding:30px 0; width:98%;}
	#contentInfo{width:96%; margin:0px auto;}
	#contentInfo h3{font-size:24px; padding:0 3% 20px 3%;}
	#contentInfo a{padding-bottom:20px;}
}
	
@media all and (max-width:640px){
	
	
	#spot { height:150px;}
	#spot ul li{ height:230px;}
	#spot h2 { top:50%; font-size:22px; left:15%;}
	.spot122#spot h2 {top:40%;}
	/* -------- 헤더 -------- */
	#headerInner{padding:52px 0 10px 0}
	#headerInner .logo a{width:28%; height:40px; /*background-size:145%;*/}
	#utilMenu{height:22px;}
	#utilMenu > div a{font-size:12px !important;}
	#utilMenu > div.user-menu-list a{line-height:22px}
	.user-lang-select a{border-bottom-width:1px}
	.gnb-open-btn i{font-size:38px}
	/* FIXED STYLE */
	#header.fixed{top:-42px;}

	/* -------- 170927 헤더 변경 -------- */
	.header-family-site-con{margin-top:-2px;}
	.header-family-site-con .family-list{width:105px;}
	.header-family-site-con .family-list a{padding: 4px 10px}
	/* -------- SUB 레이아웃 -------- */
	/*#visual{height:260px}*/
	#visual > div .visual-tit{padding-top:108px}
	#visual > div .visual-txt{display:none}
	#visual > div .visual-btns{top:60%;}
	#visual > div .visual-btns img{height:8px;}
	/* Sub Layout :: Location */
	#contentLocation{height:34px;}
	.location-inner{position:static; margin-left:0; float:left; }
	.location-inner > ul{position:relative;}
	.location-inner > ul > li{position:static;width:36%; float:left; padding:0 2% !important; line-height:34px; background-size:contain !important;}
	.location-inner > ul > li.home{width:16%; font-size:0; text-align:center;}
	.location-inner > ul > li > a{font-size:13px;}
	.location-inner > ul > li .location-2dep{top:34px; left:0px; width:100% !important;}
	.location-inner > ul > li .location-2dep li{height:34px; line-height:34px;}
	.location-inner > ul > li .location-2dep li a{font-size:13px; padding:0 5%;}
	
	.bottom-to-top-btn {display:none;}
	
}







/* ===================================
	애니메이션효과
 =================================== */
@-webkit-keyframes inFromRight {
	from {
		opacity: 0;
		-webkit-transform: translate3d(100%, 0, 0);
		transform: translate3d(100%, 0, 0);
	}
	to {
		opacity: 1;
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
}
@-webkit-keyframes inFromLeft {
	from {
		opacity: 1;
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
	to {
		opacity: 0;
		-webkit-transform: translate3d(100%, 0, 0);
		transform: translate3d(100%, 0, 0);
	}
}


