@charset "utf-8";
/* napmkmk */
 @font-face {font-family: "notokr-regular";
    src: url('/font/notokr-regular.eot');
    src: url('/font/notokr-regular.eot?#iefix') format('embedded-opentype'),
         url('/font/notokr-regular.woff2') format('woff2'),
         url('/font/notokr-regular.woff') format('woff'),
         url('/font/notokr-regular.ttf') format('truetype'),
         url('/font/notokr-regular.svg#notokr-regular') format('svg');
    	 font-weight: normal;
   		 font-style: normal;}

@font-face{
	font-family: "NotoSansCJKkr-Regular";
	src: url('/font/NotoSansKR-Regular-Hestia.eot');
	src: url('/font/NotoSansKR-Regular-Hestia.eot#iefix') format('embedded-opentype');
	src: url('/font/NotoSansKR-Regular-Hestia.woff') format('woff');
	font-style: normal;
	font-weight: normal;
}
@font-face{
	font-family: "NotoSansCJKkr-Thin";
	src: url('/font/NotoSansKR-Thin-Hestia.eot');
	src: url('/font/NotoSansKR-Thin-Hestia.eot#iefix') format('embedded-opentype');
	src: url('/font/NotoSansKR-Thin-Hestia.woff') format('woff');
	font-style: normal;
	font-weight: normal;
}
@font-face{
	font-family: "NotoSansCJKkr-Light";
	src: url('/font/NotoSansKR-Light-Hestia.eot');
	src: url('/font/NotoSansKR-Light-Hestia.eot#iefix') format('embedded-opentype');
	src: url('/font/NotoSansKR-Light-Hestia.woff') format('woff');
	font-style: normal;
	font-weight: normal;
}

@font-face{
	font-family: "NotoSansCJKkr-DemiLight";
	src: url('/font/NotoSansKR-DemiLight-Hestia.eot');
	src: url('/font/NotoSansKR-DemiLight-Hestia.eot#iefix') format('embedded-opentype');
	src: url('/font/NotoSansKR-DemiLight-Hestia.woff') format('woff');
	font-style: normal;
	font-weight: normal;
}



 @keyframes twinkle {from {color: #fff;}

        to {color: #000;}
		}
		
		
.animated {-webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.animated.infinite {-webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

@-webkit-keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

.pulse {
  -webkit-animation-name: pulse;
  animation-name: pulse;
}


@-webkit-keyframes bounce {
  70% {-webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -15px, 0);
  }

  90% {-webkit-transform: translate3d(0, -4px, 0);
    transform: translate3d(0, -4px, 0);
  }
}

@keyframes bounce {
  70% {-webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -15px, 0);
  }

  90% {-webkit-transform: translate3d(0, -4px, 0);
    transform: translate3d(0, -4px, 0);
  }
}

.bounce {-webkit-animation-name: bounce;
  animation-name: bounce;
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
}


/* 팝업 */
/* The Modal (background) */

.modal {

  display: none; /* Hidden by default */

  position: fixed; /* Stay in place */

  z-index: 1; /* Sit on top */

  left: 0;

  top: 0;

  width: 100%; /* Full width */

  height: 100%; /* Full height */

  overflow: auto; /* Enable scroll if needed */

  background-color: rgb(0,0,0); /* Fallback color */

  background-color: rgba(0,0,0,0.6); /* Black w/ opacity */

  -webkit-animation-name: fadeIn; /* Fade in the background */

  -webkit-animation-duration: 0.4s;

  animation-name: fadeIn;

  animation-duration: 0.4s

}

/* Modal Content */

.modal-content {

  position: fixed;

  bottom: 0;

  background-color: #fefefe;

  width: 100%;

  -webkit-animation-name: slideIn;

  -webkit-animation-duration: 0.4s;

  animation-name: slideIn;

  animation-duration: 0.4s

}

/* The Close Button */

.close {font-weight: bold;   font-size: 40px;font-weight: bold;position: absolute;top: 0;right: 20px}

.close:hover,

.close:focus {

  color: #000;

  text-decoration: none;

  cursor: pointer;

}




/* Add Animation */

@-webkit-keyframes slideIn {

  from {bottom: -300px; opacity: 0} 

  to {bottom: 0; opacity: 1}

}

@keyframes slideIn {

  to {bottom: 0; opacity: 1}

}

@-webkit-keyframes fadeIn {

  from {opacity: 0} 

  to {opacity: 1}

}

@keyframes fadeIn {

  from {opacity: 0} 

  to {opacity: 1}

}






.wid4 li{ width: calc(100%/4);
text-align: center;color: #333333;display: block;float: left;text-align: center;}
body, div, ul, li, dl, dt, dd, ol, p, h1, h2, h3, h4, h5, h6, form{margin:0;padding:0}
body{background-color:#ffffff; overflow-x:hidden; *overflow-x:none; background:#e9e9e9; font-family:notokr-regular, verdana }

ul, ol, dl, li{list-style:none}
img{vertical-align:top}
em{font-style:normal}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section{display:block;}
img{max-width:100%;height:auto;border:0}
html, body{min-height:100%;height:100%}
input{vertical-align:middle; height:28px;}
select{height:28px;}
img{vertical-align:middle;}
a{cursor:pointer;text-decoration:none; color:#000}
a, img{border: none;border:0;outline:none}
strong{font-weight: bold}
select { -webkit-appearance: none; /* 네이티브 외형 감추기 */ -moz-appearance: none; appearance: none;  /* 화살표 모양의 이미지 */border-radius: 0px; /* iOS 둥근모서리 제거 */ } /* IE 10, 11의 네이티브 화살표 숨기기 */ select::-ms-expand { display: none; }
.sido{background: url(/cf/image/arrow.png) #fff no-repeat 90% 50%; border:1px solid #a9a9a9}
.btn_form{   background: #000;color: #fff;border: 0;width: 100%;height: 80px;font-size: 14px;padding: 8px 50px;border-radius: 2px;line-height: 35px;}
#wrapper{ margin:0 auto; width:100%}
#st01{ background:url(../image/nld2_bg.jpg) #fbfbfa no-repeat center top ;color:#fff; height:860px; position:relative}
#cam8{ background:url(../image/cam8.jpg) #ffcf46 no-repeat center top ;color:#fff; height:860px; position:relative}
#linkdb{ background:url(../image/linkdb.jpg) #e5f5ff no-repeat center top ;color:#fff; height:700px; position:relative}
.happy{background:url(../image/nld2_bg_happy.jpg) #fbfbfa no-repeat center top!important ;}
#st01 .blueBar{ background:#008aea; color:#fff; position:absolute; bottom:0; width:100%; padding-top:30px; padding-bottom:30px; font-size:25px}
#linkdb .blueBar{ background:#0099ff; color:#fff; position:absolute; bottom:0; width:100%; padding-top:30px; padding-bottom:30px; font-size:20px}
#cam8 .blueBar{ background:#666; color:#fff; position:absolute; bottom:0; width:100%; padding-top:30px; padding-bottom:30px; font-size:25px}
#st01 .blueBar p{width: 1020px;margin: 0 auto;}
#st01 .blueBar p span{ margin-right:10px}
#st01_m{ display:none}

#cam8 .blueBar p{width: 1020px;margin: 0 auto;}
#cam8 .blueBar p span{ margin-right:10px}
#cam8_m{ display:none}
#linkdb > .blueBar{display: inline-block!important}
#linkdb > .blueBar p{width: 1020px;margin: 0 auto;}
#linkdb  > .blueBar p span{ margin-right:10px}
#linkdb_m{ display:none}

#st02{ background:#f5f5f5}
#st02 .stbox2{width:640px ; margin:0 auto}
#st02 .stbox2 .title{ padding:20px 0 30px 0}
#st02 .stbox2 .num_wrap li{ padding-bottom:10px}
#st02 .stbox2 .num_wrap .num_img{width: 100px;display: inline-block;}
#st02 .stbox2 .num_wrap .num_txt{display: inline-block;text-align: left; font-size:20px; font-weight:bold}



#dbform{ width:640px; margin:0 auto}

#dbform	.address_Wrap{ padding-top:20px}

#dbform	.address_Wrap .ip_name li{ min-height: 50px; padding-bottom:5px}	
#dbform	.address_Wrap .ip_name li label{  width:80px; display:inline-block; font-size:18px}
#dbform	.address_Wrap .ip_name li .sido{ width:27%; padding-left:10px}
#dbform	.address_Wrap .ip_name li .ipstyle{ width:82%}
#dbform	.address_Wrap .ip_name li .detail_address{margin-left: 104px;width: 82%;}
#dbform	.address_Wrap .ip_name li .info{ margin-top:3px}
#dbform .personal_box{ text-align:center}
.sltBmove{ background:#fff}	
.btn_ok{background: #0085e2;color: #fff;border: 0;width: 100%;height: 80px; font-size:28px; margin-bottom:30px}	
.btn_agree{ color:#fff}

#st03{ background:#fff; text-align:center; padding:40px} 
#st04{ background:#f9f9f9;margin: 0 auto;
    overflow: hidden;
    text-align: center;
    padding: 50px}	
	#st04 p{}
#st04 ul { padding-top:20px; overflow:hidden; text-align:center}	
#st04 ul li{ display:inline-block; margin-right:20px}
#st04 ul li span{ display:block; text-align:center; font-size:26px; color:#666}
#st05{ background:#1a65c7; padding:40px 0  40px 0; text-align: center}
#st06{background:url(../image/nld2_img6bg.jpg) no-repeat center top ; background-size: cover; text-align:center}
#st06 p{ padding:80px 0 20px 0}
#st06 ul li{ padding-bottom:20px}
#st07{ background:#e4e4e4;margin: 0 auto;
    overflow: hidden;
    text-align: center;
    padding: 50px}	
	#st07 p img{ width:50%}
#st07 ul { padding-top:20px; overflow:hidden; text-align:center}	
#st07 ul li{ display:inline-block; margin-right:20px}


footer{ background:#666; color:#fff; padding:50px 0 50px 0; clear:both;}
footer div { width:1024px; margin:0 auto}	

#agree p{position: fixed;left: 50%;top: 6%;z-index: 2;transform: translateX(-50%);}

.agreement  {padding: 30px;margin: 0 0 20px 0;border: 1px solid #C2C2C2;border-radius: 5px;text-align: left;background-color: #fff;top: 50%;position: absolute;left: 30%}

/* The Modal (background) */

.modal {display: none; /* Hidden by default */position: fixed; /* Stay in place */z-index: 1; /* Sit on top */left: 0;top: 0;width: 100%; /* Full width */height: 100%; /* Full height */overflow: auto; /* Enable scroll if needed */background-color: rgb(0,0,0); /* Fallback color */background-color: rgba(0,0,0,0.6); /* Black w/ opacity */-webkit-animation-name: fadeIn; /* Fade in the background */-webkit-animation-duration: 0.4s;animation-name: fadeIn;animation-duration: 0.4s}/* Modal Content */

.modal-content {position: fixed;bottom: 0;background-color: #fefefe;width: 100%;-webkit-animation-name: slideIn;-webkit-animation-duration: 0.4s;animation-name: slideIn;animation-duration: 0.4s}

/* The Close Button */

.close {font-weight: bold;   font-size: 40px;font-weight: bold;position: absolute;top: 0;right: 20px}
.close:hover,.close:focus {color: #000;text-decoration: none;cursor: pointer;}


/*new*/
.center_new{width:1200px; margin:0 auto; text-align:center}
#type01{ background:#f4f4f4; padding:100px 0 100px 0; overflow:hidden}
#type01 h2{ font-size:26px; padding:35px 0 7px 0; color:#000}
#type01 .ty_txt{ margin-bottom:40px; font-weight:100; letter-spacing:-1px; font-size:16px; color:#5a5a5a}

#type01 .ty_overtitle{ font-size:26px; padding-top:10px; padding-bottom:25px}
#type01 .ty_overtxt{ font-size:16px; font-weight:100; letter-spacing:-1px}

#type01 ul li{ display: inline-block; background:#fff; text-align:center ; margin-right: 5px;width: 292px;}
#type01 ul li:after{margin-right:0} 
#type01 button{ border:1px solid #f46760; background:#fff; padding:10px 70px; color:#f46760; cursor:pointer}


#type01 button{ border:1px solid #f46760; background:#fff; padding:10px 70px; color:#f46760; cursor:pointer; margin-bottom:25px}



#type01 .icon01{border-radius: 110px; width: 110px;height: 110px; background: #969696 url(../../image/main/type1_icon_01.png) no-repeat center; margin:40px auto 0}
#type01 .icon02{border-radius: 110px; width: 110px;height: 110px; background: #fba078 url(../../image/main/type1_icon_02.png) no-repeat center; margin:40px auto 0}
#type01 .icon03{border-radius: 110px; width: 110px;height: 110px; background: #f76767 url(../../image/main/type1_icon_03.png) no-repeat center; margin:40px auto 0}
#type01 .icon04{border-radius: 110px; width: 110px;height: 110px; background: #77a4bc url(../../image/main/type1_icon_04.png) no-repeat center; margin:40px auto 0}


/* type1 È¿°ú*/

figure.snip1384 {position: relative;overflow: hidden;margin: 0px;color: #ffffff; cursor:pointer;}
figure.snip1384 * {-webkit-box-sizing: border-box;box-sizing: border-box;-webkit-transition: all 0.35s ease;transition: all 0.35s ease;}
figure.snip1384 img {max-width: 100%;backface-visibility: hidden;vertical-align: top;}
figure.snip1384:after,figure.snip1384 figcaption {position: absolute;top: 0;bottom: 0;left: 0;right: 0;}
figure.snip1384:after {content: '';-webkit-transition: all 0.35s ease;transition: all 0.35s ease;opacity: 0;}figure.overgray:after {background-color: rgba(150, 150, 150, 0.98)!important;}
figure.overorange:after {background-color: rgba(251, 160, 120, 0.98)!important;}
figure.overred:after {background-color: rgba(247, 103, 103, 0.98)!important;}
figure.overblue:after {background-color: rgba(101, 173, 212, 0.98)!important;}
  
figure.snip1384 figcaption {z-index: 1;padding: 40px}
figure.snip1384 h3,
figure.snip1384 .links {width: 100%;margin: 0;padding: 0;}
figure.snip1384 h3 {line-height: 1.1em;font-weight: 200;font-size: 1.4em;text-transform: uppercase;opacity: 0;}
figure.snip1384 .ty_overtxt {font-size: 0.8em;font-weight: 300;letter-spacing: 1px;opacity: 0;top: 50%;-webkit-transform: translateY(40px);transform: translateY(40px);}
figure.snip1384 i {position: absolute;bottom: 10px;right: 10px;padding: 20px 25px;font-size: 34px;opacity: 0;-webkit-transform: translateX(-10px);transform: translateX(-10px);}
figure.snip1384 a {position: absolute;top: 0;bottom: 0;left: 0;right: 0;z-index: 1;}
figure.snip1384:hover img,
figure.snip1384.hover img {zoom: 1;filter: alpha(opacity=50);-webkit-opacity: 0.5;opacity: 0.5;}
figure.snip1384:hover:after,figure.snip1384.hover:after {opacity: 1;position: absolute;top: 10px;bottom: 10px;left: 10px;right: 10px;}
figure.snip1384:hover h3,figure.snip1384.hover h3,figure.snip1384:hover p,figure.snip1384.hover p,figure.snip1384:hover i,figure.snip1384.hover i {-webkit-transform: translate(0px, 0px);transform: translate(0px, 0px);opacity: 1;}





@media screen and (max-width: 640px){

.btn_form{padding: 8px 5px;}
#st01{ display:none}

#st01_m{ display:block}
#st01_m p{ width:100%; height:100%}
#st01 .blueBar{ margin-top:60% ; }
    
#cam8{ display:none}
#cam8_m{ display:block}
#cam8_m p{ width:100%; height:100%}
#cam8 .blueBar{ margin-top:60% ; }
#cam8 .blueBar { display:none}
    
#linkdb{ display:none}
#linkdb_m{ display:block}
#linkdb_m p{ width:100%; height:100%}
#linkdb > .blueBar{  display: block!important}
#linkdb .blueBar p{width: 100%} 
    
#st02 .stbox2{width:90% ;}
#st04 ul li { width:40%}
#st07{ padding:30px}
#st07 ul li{ width:45%; padding-bottom:5px; margin-right:0px}
	#st07 p img{ width:100%}
#st01 .blueBar { display:none}
#st06 p { width:70%; margin:0 auto; padding:20px 0 20px 0}


#dbview .num_wrap { display:none; margin-top:10px}
#dbview .num_wrap .num_txt{ font-size:18px; width:90% ; text-align:center}
#myModal0 p ,#myModal1 p,#myModal2 p,#myModal3 p,#myModal4 p, #myModal5 p{ width:95%}
   .pd30{ padding:20px}
#dbview h2{padding-top:40px; line-height:40px}

#dbform{ width:100%;}
#dbform	.address_Wrap .ip_name li .sido{ width:100%}
#dbform	.address_Wrap .ip_name li .detail_address{margin-left:0px;width: 100%;}
#dbform	.address_Wrap .ip_name li{ height:auto}	
#dbform	.address_Wrap .ip_name tel .ipstylenum{ width:30%}
#dbform	.address_Wrap .ip_name li .ipstyle{ width:100%}
footer{padding:20px; font-size:14px}
#dbform	.address_Wrap .ip_name li label{ display:block}
select{ width:100%}
#dbform	.address_Wrap .ip_name .tel span .ipstylenum{ width:28%}
#st02 .stbox2 .num_wrap .num_img {
    width: 20%;}
#st02 .stbox2 .num_wrap .num_txt {display: inline;font-size: 15px;}
#st04 ul li span{font-size:20px; }
.agreement { left:0}
footer div { width:90%;}	

/*new*/
.center_new{width:90%; margin:0 auto; text-align:center}
#type01 {padding: 20px 0 20px 0;}
	
#type01 h2{ font-size:20px;}
#type01 ul li{width:46%}
#type01 .icon01{border-radius: 60px; width: 60px;height: 60px; background-size: 90%;}
#type01 .icon02{border-radius: 60px; width: 60px;height: 60px;background-size: 90%; }
#type01 .icon03{border-radius: 60px; width: 60px;height: 60px;background-size: 90%;}
#type01 .icon04{border-radius: 60px; width: 60px;height: 60px;background-size: 90%; }
#type01 button{ padding:10px 40px;}
#type01 .ty_overtitle{ font-size:20px;}
#type01 .ty_overtxt{ font-size:14px;}

figure.snip1384 figcaption {padding: 30px 20px;}


}