@font-face {
    font-family: 'NanumSquareNeo-Variable';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_11-01@1.0/NanumSquareNeo-Variable.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'NEXON Lv1 Gothic OTF';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@2.1/NEXON Lv1 Gothic OTF.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
a {
  text-decoration: none;
  color: inherit;
}
#wrap{
	width: 100%;
    margin:0;
}
.topmemberline{
	width:100%;
	height: 30px;
    background-color: #1C1C1C;
	position:relative;
	top:0px;
	z-index:1000;
}
.memberline{
	width: 1280px;
	margin: 0px auto;
	color: rgb(190, 190, 190);
	text-align:right;
	font-size: 14px;
	line-height: 30px;
}
.memberline img{
	padding-bottom: 4px;
}
#header{
    width: 100%;
	height:110px;
	position:fixed;
	top:0px;
	left:0;
	background-color: white;
	border-bottom: 1px solid #eaeaea;
	z-index:999;
}
.main_header{
	width:1280px;
	margin:0px auto;
}
.sub_header{
	width:1280px;
	margin:0px auto;
}
.logo{
    width:250px;
    text-align: center;
	float:left;
	margin-top: 14px;
}
.nsmenu{
	width:780;
	height:50px;
	margin:0px auto;
	float:right;
	margin-top: 20px;
	font-family: 'NEXON Lv1 Gothic OTF';
}
.nsmenu ul{
    margin:0px;
    list-style: none;
}
.mainmenu{
    width:130px;
    height:50px;
    font-size:20px;
    font-weight:500;
    text-align:center;
    line-height: 50px;
    float:left;
    color:#333333;
}
.mainmenu a{
	display: block;
}
.mainmenu:hover{
	font-size:20px;
	color: #13bd62;
}
.submenu{
	width:130px;
    font-size: 16px;
    text-align: left;
    line-height: 50px;
    float:left;
    background-color: white;
    display: none;
}
.submenu li{
	color: white;
    background-color: #4D4D4D;
}
.submenu li:hover{
	background-color: #222222;
}
.submenu a{
	display: block;
	margin-left: 15px;
}
.submenu a:hover{
	color: #13bd62;
}

/* ¸ð¹ÙÀÏ ¸Þ´º¼³Á¤ ½ÃÀÛ */
.mobilemainmenu{
    width:300px;
}
.mobilemainmenu a{
	margin-left: 20px;
}
.mobilesubmenu{
	width:299px;
    background-color: rgba(255,255,255,0.7);
    display: none;
}
.mobilesubmenu:hover{
    background-color: rgba(0,0,0,0.6);
}
.mobilesubmenu a{
	margin-left: 40px;
}
/* ¸ð¹ÙÀÏ ¸Þ´º¼³Á¤ ³¡ */
.telebt{
	width: 50px;
	height:50px;
	float:right;
	position:relative;
	top: -50px;
	right: 15px;
	display:none;
}
.main_slide{
	margin-top: 80px;
}
.A{
    width:100%;
	float: left;
	margin-top: 30px;
}
.B{
    height:400px;
    width:25%;
	float: left;
}
.company{
	width: 98%;
	height: 98%;
	border: 1px solid rgb(210, 210, 210);
	/* border-radius:2%; */
	margin: 0px auto;
	margin-top:3px;
	background-image: url("../img/bild.jpg");
	background-repeat: no-repeat;
	background-position: center;
	background-color:white;
}
.company:hover {
    transform: translateY(30px);
	transition : 0.6s;
    }
.C{
    height:400px;
    width:25%;
	float: left;
}
.product{
	width: 98%;
	height: 98%;
	border: 1px solid rgb(210, 210, 210);
	/* border-radius:2%; */
	margin: 0px auto;
	margin-top:3px;
	background-image: url("../img/bread.jpg");
	background-repeat: no-repeat;
	background-position: center;
	background-color:white;
}
.product:hover {
    transform: translateY(30px);
	transition : 0.6s;
    }
.D{
    height:400px;
    width:25%;
	float: left;
}
.service{
	width: 98%;
	height: 98%;
	border: 1px solid rgb(210, 210, 210);
	/* border-radius:2%; */
	margin: 0px auto;
	margin-top:3px;
	background-image: url("../img/cofup.jpg");
	background-repeat: no-repeat;
	background-position: center;
	background-color:white;
}
.service:hover {
    transform: translateY(30px);
	transition : 0.6s;
    }
.E{
    height:400px;
    width:25%;
	float: left;
}
.biz{
	width: 98%;
	height: 98%;
	border: 1px solid rgb(210, 210, 210);
	/* border-radius:2%; */
	margin: 0px auto;
	margin-top:3px;
	background-image: url("../img/plan.jpg");
	background-repeat: no-repeat;
	background-position: center;
	background-color:white;
}
.biz:hover {
    transform: translateY(30px);
	transition : 0.6s;
    }
.galla{
	width:100%;
	float:left;
}
.youtube_latest{
	width:100%;
	float:left;
	margin-top: 20px;
}
.F{
    height:320px;
    width:50%;
	font-size:16px;
	padding:2px;
	float: left;
}
.G{
    height:320px;
    width:50%;
	font-size:16px;
	padding:2px;
	float: left;
}
.H{
    height:500px;
    width:50%;
	float: left;
}
.I{
    height:500px;
    width:50%;
	float: left;
}
.J{
	width:100%;
    height:100px;
    font-size:32px;
    font-weight:600;
    text-align:center;
    line-height: 100px;
    float:left;
    color:#333333;
	padding-top: 30px;
	font-family: 'NEXON Lv1 Gothic OTF';
}
.M{
	width:100%;
    height:100px;
    font-size:32px;
    font-weight:600;
    text-align:center;
    line-height: 100px;
    float:left;
    color:#333333;
	font-family: 'NEXON Lv1 Gothic OTF';
}
.K{
	width:100%;
    height:100px;
    font-size:32px;
    font-weight:600;
    text-align:center;
    line-height: 100px;
    float:left;
    color:#333333;
	padding-bottom: 30px;
	font-family: 'NEXON Lv1 Gothic OTF';
}
.L{
	width:100%;
    height:100px;
    font-size:32px;
    font-weight:600;
    text-align:center;
    line-height: 100px;
    float:left;
    color:#333333;
	padding-bottom: 30px;
	font-family: 'NEXON Lv1 Gothic OTF';
}
.content{
	margin-top:20px;
	margin-bottom: 20px;
}
.content:after{
    content:"";
    clear:both;
    display:block;
}

/* -------------- footer ½ÃÀÛ ---------------- */
.footer{
	width:100%;
	background-color: #1C1C1C;
	margin:0px auto;
	margin-top: 20px;
}
.footer:after{
	content:"";
	display:block;
	clear:both;
}
.foot_fix{
	width:1280px;
	margin:0px auto;
}
.spot{
	color:white;
	text-align: center;
	line-height: 17px;
	font-size: 15px;
	font-family: 'NEXON Lv1 Gothic OTF';
}
.or{
	display:inline-block;
	width:16px;
	text-align: center;
	color: gray;
	font-size: 14px;
}
.foot_left{
	width:250px;
	font-size: 30px;
	font-weight: bold;
	color: #A1A1A1;
	text-align: center;
	float:left;
}
.foot_center{
	width:calc(100% - 520px);
}
.foot_right{
	width:250px;
	font-size: 16px;
	text-align: center;
	color: #A1A1A1;
	float:left;
}      
.address{
	font-size:16px;
	color: #A1A1A1;
	font-size: 14px;
	padding-left: 100px;     
}
.right{
	font-size:17px;
	color: #03C75A;
	font-weight: 500;
	text-align: center;
	line-height: 50px;
	width: 100%;
	background-color: #1C1C1C;
}
.cus_num{
	font-family: 'NEXON Lv1 Gothic OTF';
	font-size:28px;
	font-weight:600;
}
.bottom > div{
	float: left;
}
.null1{
	height:15px;
	background-color: #1C1C1C;
}
.null_last{
	height:15px;
	background-color: #1C1C1C;
}
.address > span{padding-left:20px;}

/* -------------- footer ³¡ ---------------- */

.float_right {
    position: absolute;
    top: 750px;
    right: 0px;
    width: 50px;
    height: 300px;
}
.float_right2 {
    position: absolute;
    top: 350px;
    right: 0px;
    width: 50px;
    height: 300px;
}
.float_right > img{
	width:50px;
	height:50px;
}
.left_code > div{	
	float: left;
	width: 40px;
	height: 40px;
}
.left_code div img{	
	width: 40px;
	height: 40px;
}
.facebook{
	width:50px;
	height:50px;
	background-color: #1673EA;
}
.twitter{
	width:50px;
	height:50px;
	background-color: #1C9BE8;
}
.instagram{
	width:50px;
	height:50px;
	background-color: #D10173;
}
.kakaotalk{
	width:50px;
	height:50px;
	background-color: #F9E000;
}
.pinterest{
	width:50px;
	height:50px;
	background-color: #C92404;
}
.naverblog{
	width:50px;
	height:50px;
	background-color: #04C73D;
}
.youtube{
	width:50px;
	height:50px;
	background-color: #FF0000;
}
.facebook:hover {
    transform: translateX(0px);
	border-radius: 0 12px 12px 0 ;
	width:80px;
	transition : 1s;
    }
.twitter:hover {
    transform: translateX(0px);
	border-radius: 0 12px 12px 0 ;
	width:80px;
	transition : 1s;
    }
.instagram:hover {
    transform: translateX(0px);
	border-radius: 0 12px 12px 0 ;
	width:80px;
	transition : 1s;
    }
.kakaotalk:hover {
    transform: translateX(0px);
	border-radius: 0 12px 12px 0 ;
	width:80px;
	transition : 1s;
    }
.pinterest:hover {
    transform: translateX(0px);
	border-radius: 0 12px 12px 0 ;
	width:80px;
	transition : 1s;
    }
.naverblog:hover {
    transform: translateX(0px);
	border-radius: 0 12px 12px 0 ;
	width:80px;
	transition : 1s;
    }
.youtube:hover {
    transform: translateX(0px);
	border-radius: 0 12px 12px 0 ;
	width:80px;
	transition : 1s;
    }

/* ŸÀÌƲ¹Ù ½ºÅ¸ÀÏ ½ÃÀÛ */
.title_back{
	text-align: right;
	height: 30px;
	line-height: 30px;
	font-size: 14px;
	color:#333333;
	padding-right:8px;
}
.title_back img{
	padding-right: 3px;
	padding-bottom: 2px;
}
.title_front{
	width: 100%;
	height:50px;
	font-size: 34px;
	font-weight: 600;
	line-height: 50px;
	text-align: center;
	color:#333333;
	margin: 0px auto;
}
.title_1line{
	width: 200px;
	border-bottom: 1px solid #00D96C;
	margin: 0px auto;
}
.title_2line{
	width: 300px;
	border-bottom: 1px solid #C2C2C2;
	margin: 0px auto;
}
/* ŸÀÌƲ¹Ù ½ºÅ¸ÀÏ ³¡ */

/* ¸Þ´º Æ®¸®°Å¹öÅÏ ½ÃÀÛ */
 #naviToggle
 {
 	display:none;
 }
 #menuToggle
 {
   display: block;
   position: relative;
   top: 23px;
   left: 30px;
   width:50px;
   z-index: 1;
   
   -webkit-user-select: none;
   user-select: none;
 }
 
 #menuToggle a
 {
   text-decoration: none;
   color: #232323;
   
   transition: color 0.3s ease;
 }
 
 #menuToggle a:hover
 {
   color: tomato;
 }
 
 
 #menuToggle input
 {
   display: block;
   width: 40px;
   height: 36px;
   position: absolute;
   top: -7px;
   left: -5px;
   
   cursor: pointer;
   
   opacity: 0;
   z-index: 2;
   
   -webkit-touch-callout: none;
 }
 
 #menuToggle span
 {
   display: block;
   width: 40px;
   height: 6px;
   margin-bottom: 5px;
   position: relative;
   
   background: #00D96C;
   border-radius: 3px;
   
   z-index: 1;
   
   transform-origin: 4px 0px;
   
   transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
               background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
               opacity 0.55s ease;
 }
 
 #menuToggle span:first-child
 {
   transform-origin: 0% 0%;
 }
 
 #menuToggle span:nth-last-child(2)
 {
   transform-origin: 0% 100%;
 }
 
 #menuToggle input:checked ~ span
 {
   opacity: 1;
   transform: rotate(45deg) translate(-2px, -1px);
   background: #00D96C;
 }
 
 #menuToggle input:checked ~ span:nth-last-child(3)
 {
   opacity: 0;
   transform: rotate(0deg) scale(0.2, 0.2);
 }

 #menuToggle input:checked ~ span:nth-last-child(2)
 {
   transform: rotate(-45deg) translate(0, -1px);
 }

 #menu
 {
   position: absolute;
   width: 300px;
   height: 2000px;
   margin: -100px 0 0 -30px;
   padding: 0px;
   padding-top: 125px;
   font-family: 'NEXON Lv1 Gothic OTF';
   background: rgba(255,255,255,0.8);
   list-style-type: none;
   -webkit-font-smoothing: antialiased;
   
   transform-origin: 0% 0%;
   transform: translate(-100%, 0);
   
   transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
   border-right: 1px solid #909090;
 }
 #menu li a{ 
   display: block;
 }
#menu .mobilemainmenu li a:hover{ 
	color: #FFFFFF;
 }
 #menu li
 {
   height:50px;
   font-size:18px;
   line-height: 50px;
   border-bottom: 1px solid #909090;
 }
 
 #menuToggle input:checked ~ ul
 {
   transform: none;
 }
/* ¸Þ´º Æ®¸®°Å¹öÅÏ ³¡ */

/* ¸ÞÀÎ ¹Ù·Î°¡±â ¾ÆÀÌÄÜ hoverÈ¿°ú ½ÃÀÛ */
.resq {
    letter-spacing: -1px;
    width: 97px;
	height: 30px;
	line-height: 29px;
    background: #3165dd;
	border: 1px solid #3165dd;
    text-align: center;
	font-size: 18px;
    color: #ffffff;
    display: block;
}
.resq > a {
    padding: 2% 14%;
    position: relative;
    z-index: 1;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -ms-transition: all 0.4s;
    -o-transition: all 0.4s;
    transition: all 0.4s;
}
.resq > a:after {
    content: "";
    width: 0%;
    height: 100%;
    top: 0;
    position: absolute;
    left: 0;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -ms-transition: all 0.4s;
    -o-transition: all 0.4s;
    transition: all 0.4s;
    background: #ffffff;
}
.resq > a:hover {
    color: #333;
}
.resq > a:hover:after {
    width: 100%;
    z-index: -1;
}
/* ¸ÞÀÎ ¹Ù·Î°¡±â ¾ÆÀÌÄÜ hoverÈ¿°ú ³¡ */

	@media screen and (max-width:768px) {
		.F, .G, .H, .I {
			width: 100%;
		}
	}
	@media screen and (max-width:1023px) {
		.nsmenu{
			display:none;
		}
		#naviToggle
		{
			display:block;
		}
		.logo{
			width:100%;
		}
		.telebt{
		display:block;
		}
		.A{
			width:100%;
		}
		.B, .C, .D, .E{
			width:50%;
		}
		.foot_left{
			width:100%;
		}
		.foot_fix{
			width:100%;
		}
		.sangdam{
			display:none;
		}
		.address{
			padding-top: 0px;
			padding-left: 0px;
		}
	}
	@media screen and (max-width:768px) {
		.B, .C, .D, .E {
			width: 100%;
		}
	}
	@media screen and (max-width:1390px) {
		#floatR{
			display:none;
		}
		#floatL{
			display:none;
		}	
	}
	@media screen and (max-width:1279px) {
		#header{
			width:100%;
		}
		.main_header{
			width:100%;
		}
		.memberline{
			width:100%;	
		}
		.sub_header{
			width:100%;
		}
		.foot_fix{
			width:100%;
		}
        .foot_left{
			width:250px;
			text-align: left;
			padding-left: 40px;
		}
		.foot_center{
			width: calc(100% - 550px);
		}
		.address{
			padding-left: 40px;
		}
	}
	@media screen and (max-width:970px) {
		.foot_left{
			width: calc(100% - 40px);
			padding-left:40px;
			text-align: left;
		}
		.foot_center{
			width: calc(100% - 270px);
		}
	}
	@media screen and (max-width:680px) {
		.foot_left{ width: 100%; text-align:center; padding-left: 0px; }
		.foot_center{
			width: 100%
		}
		.foot_right{
			display:none;
		}        
		.address{ width:100%; padding-left: 20px; }
	}
	@media screen and (max-width:1425px) {
		.float_right{
		display:none;
		}
		.float_right2{
		display:none;
		}
	}
@media (max-width: 1023px) {
#hd_pop { background: #fff; }
.hd_pops { left: 20px !important; right: 20px !important;  background: #fff; }
.hd_pops_con { width: 100% !important; height: auto !important; background: #fff; }
.hd_pops_con img { width: 100% !important; height: auto !important; }

iframe{
	width: 99.99%;
	height: 300px;
}
}