@charset "utf-8";

:root {
  --color-white-100: hsl(0, 0%, 100%);
  --color-white-200: hsl(0, 0%, 95%);
  --color-white-300: hsl(0, 0%, 85%);
  --color-white-400: hsl(0, 0%, 75%);
  --color-white-500: hsl(0, 0%, 65%);
  --color-white-600: hsl(0, 0%, 55%);

  --color-black-100: hsl(210, 17%, 12%);
  --color-black-200: hsl(210, 17%, 10%);
  --color-black-300: hsl(210, 16%, 8%);
  --color-black-400: hsl(210, 16%, 6%);
  --color-black-500: hsl(210, 15%, 4%);
  --color-black-600: hsl(210, 15%, 2%);

 --color-blue: hsl(209, 98%, 37%);
  --color-blue-100: hsl(212, 96%, 60%);
  --color-blue-200: hsl(213, 94%, 55%);
  --color-blue-300: hsl(217, 91%, 50%);
  --color-blue-400: hsl(221, 83%, 45%);
  --color-blue-500: hsl(224, 76%, 40%);
  --color-blue-600: hsl(219, 69%, 17%);

 

  --color-purple-100: hsl(233, 67%, 43%);
  --color-purple-200: hsl(233, 67%, 35%);
  --color-purple-300: hsl(233, 67%, 29%);
  --color-purple-400: hsl(233, 67%, 25%);



  --color-orange-100: hsl(31, 81%, 70%);
  --color-orange-200: hsl(25, 100%, 69%);
  --color-orange-300: hsl(24, 87%, 63%);
  --color-orange-400: hsl(23, 51%, 60%);
  --color-orange-500: hsl(23, 41%, 50%);
  --color-orange-600: hsl(23, 31%, 40%);


  --color-dahong-100: hsl(359, 49%, 69%);
  --color-dahong-200: hsl(359, 67%, 56%);
  --color-dahong-300: hsl(359, 81%, 52%);
  --color-dahong-400: hsl(359, 98%, 36%);
  --color-dahong-500: hsl(359, 91%, 100%);

  --text-tiny: clamp(0.84rem, calc(0.12vw + 0.8rem), 0.89rem);
  --text-small: clamp(0.93rem, calc(0.13vw + 0.91rem), 1rem);
  --text-base: clamp(1.05rem, calc(0.15vw + 1.01rem), 1.12rem);
  --text-medium: clamp(1.18rem, calc(0.17vw + 1.14rem), 1.26rem);
  --text-large: clamp(1.32rem, calc(0.19vw + 1.28rem), 1.41rem);

--shadow-normal: 0px 5px 15px rgba(0,0,0,0.1);

  --shadow-small: 0 3px 4px 0 rgba(0, 0, 0, 0.2),
    0 2px 3px 0 rgba(0, 0, 0, 0.06);
  --shadow-medium: 0 4px 6px -1px rgba(0, 0, 0, 0.4),
    0 2px 4px -1px rgba(0, 0, 0, 0.1);
  --shadow-large: 0 10px 15px -3px rgba(0, 0, 0, 0.8),
    0 4px 6px -2px rgba(0, 0, 0, 0.8);
 
--t_majorcolor:#2b6158;

 

}
  
.major_color{
	color: var(--t_majorcolor);
}

.major_colorB{
	color: var(--color-black-300);
	font-size:110%;
}
 .mobile{display:none;}
 .pcmenu{display:block;}

#wrap{
		position: absolute;
		width:100%;
		height:100%;
		margin:0;
		padding:0;	
		 
		

}
.bgOn .sub:after{z-index:100;top:0;left:0;content:'';position:fixed;display:block;width:100%;height:100%;background:rgba(0,0,0,.3);}
.wrap{
	margin:0 auto;
	padding:0;	 
	position:relative;
	width:95%;
	max-width:1500px;
	
}

.wide_wrap{
	margin:0 auto;
	padding:0; 
	position:relative;
	width:100%;
}	

/*topmenu*/
#Header {
	position:fixed;
	z-index:200;
	width:100%;
	background:rgba(255,255,255,0.0);   
	
	transition: background-color 0.3s ease-out;
	
	
}
.sub #Header,
#Header.scroll,
#Header.active{
	background:rgba(255,255,255,1);   
}

 #Header:after{
	content:'';
	display:block;
	background:rgba(255,255,255,0.2);   
	width:100%;
	height:0px;
} 
 
 /**/

 
#Header .header_inner {
	position:relative;
	height:80px;
	padding-top:10px;
 	transition:margin 0.6s, opacity 0.6s; 
	z-index:20;
	
	 
} 

 


.header_inner h1.logo {
	position:absolute;
	left:40px;
	top:50%;
	width:84px; 
	height:68px;
	margin-top:-34px;
	z-index:999;
	 
}

.header_inner h1 > a {
	display:block;
	overflow:hidden;
	width:100%;
	height:100%;
	text-indent:-99900px;
	background:url(../image/logo.png) center 0 no-repeat;
	background-size:100%;
	}

 
.sub #Header .header_inner h1 > a,
#Header.scroll .header_inner h1 > a,
#Header.active .header_inner h1 > a,
.m_open .header_inner h1 > a{
	background:url(../image/logo_on.png) center 0 no-repeat;
	background-size:100%;
}
 
 

 

/* gnb */
 #gnb {
  width: 100%;
   
}
  
#gnb,
#gnb ul,
#gnb ul li ul li,
#gnb ul li a,
#gnb .m_button {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  line-height: 1;
  display: block;
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
#gnb:after,
#gnb > ul:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

 



#gnb .pcmenu > ul{margin:0 auto; text-align:right;padding:0px;padding-right:90px;width: 100%;  }
#gnb .pcmenu > ul:after{content:"";display:block;clear:both;}
 
 
#gnb .pcmenu > ul > li {
  display:inline-block;
  margin:0 10px;
  
}
#gnb .pcmenu > ul > li > a {
 display:block;
 color:#fff;
 width:100%;
 font-size:17px;
  letter-spacing:0px;
 font-weight:500;
 padding:10px;
 padding-top:20px;
  -webkit-transition: color .2s ease;
  -moz-transition: color .2s ease;
  -ms-transition: color .2s ease;
  -o-transition: color .2s ease;
  transition: color .2s ease;
  z-index:3;
  font-family: 'Poppins', sans-serif;
   font-weight:normal;
}
.sub #Header #gnb .pcmenu > ul > li > a,
#Header.scroll #gnb .pcmenu > ul > li > a,
#Header.active #gnb .pcmenu > ul > li > a{
	color:#333;
	opacity:.8;
}

#gnb .pcmenu > ul > li.topOn > a,
.sub #Header #gnb .pcmenu > ul > li.topOn > a,
#Header.active #gnb .pcmenu > ul > li > a:hover, 
#Header.scroll #gnb .pcmenu > ul > li > a:hover  {
  color: #000;
  opacity:1;

 
   transition: background-color 0.3s ease-out;

}
#gnb .pcmenu > ul > li.topOn > a,
.sub #Header #gnb .pcmenu > ul > li.topOn > a{
	font-weight:500;
}

#gnb .pcmenu > ul > li:hover  > a:after{
	content:'';
	display:block;
	position:relative;
	margin:0px auto 0 auto;
	width:100%;
 	height:0px;
	background: rgba(255,255,255,0);
 
}







#gnb .pcmenu > ul > li > div{
	display:none; 
	
}

 
/*gnbback*/




.Mgnb_back{
	display:none;
}
 
 

 
 /*lang*/
.header_utilarea {
	 
	position:absolute;  
	right:20px;
	z-index:2; 
 	top:28px;
}
 
 

.langarea
 {
	right:0px;
 	position:absolute;
	top:0px;
	padding:0px 0 0px 0px;
	 
	
}
.langarea i{
	 
}

.sub  .langarea,
.m_fixed  .langarea,
.topmenuOn .langarea{
	 
	 
}
	 
/* Responsive gnb */
.btn_nav {
  display: none;
}
 
@media (max-width: 1300px ){
	.header_inner h1.logo {
		 
		left:10px;
		
	}
	 
	 
 
	

}
@media (max-width: 1000px ){
	 .mobile{display:block;}
 .pcmenu{display:none;}
	 
	#Header {

		padding-top:0px;
	 
	}
	.allMenu{display:none;}
	
 .langarea{
		right:40px;
	}



	.m_open .header_inner h1.logo{
		
		display:block;
		
	}

 
.header_inner h1.logo {
 
 	width:70px; 
	height:57px;
	margin-top:-29px;
 
	 
}


	.gnb-wrap{
			max-width:100%;
		}

 	 
 
  #gnb .mobile{
    width: 100%;
	z-index:998;
	padding-top:40px;
 	 
  }
 
  #gnb .mobile > ul:before{position:relative;content:'';display:block;background:#fff;height:95px;}
 

 
 

  #gnb .mobile ul li {
    width: 100%;
	position: relative;
    border-top: 1px solid rgba(120, 120, 120, 0.2);
	z-index:2
  }
  #gnb .mobile > ul > li {padding:0 0;}
  #gnb .mobile > ul > li > a {
	color:#333;
	padding: 15px 10px 15px 10px; 
	text-align:center;
	font-size:140%;
  }
 #gnb .mobile > ul > li:hover > a,
#gnb .mobile > ul > li > a:hover  {
  color: #000;
   background:none;

}
  #gnb .mobile ul li a.has_sub:after {
    content: "";
    width: 6px;
    height: 6px;
    border-bottom: 0px solid #757575;
    border-right: 0px solid #757575;
    float: right;
    position: relative;
    top: 12px;
    right: 25px;
    transform: rotate(45deg);
    transform-origin: center;
}

 
  #gnb .mobile ul li a.has_sub.active:after {
    transform: rotate(-135deg);
    border-color: #ff0000;
}


  #gnb .mobile ul li a {
    padding-left: 12.5px;
  }
 #gnb .mobile ul li div ul.open{
	padding-top:10px;
	padding-bottom:10px;
 }
    #gnb .mobile ul li ul li {
     
    border-top: 0px solid rgba(120, 120, 120, 0.2);
 
  }
    #gnb .mobile ul li ul li a{
		text-align:center;
		padding: 5px 0;
		opacity:.8;
	}
	#gnb .mobile ul li ul li a:hover{
	 
		opacity:1;
	}

 


 
  	#gnb .m_button{display:block;width:40px;height:40px;border:0px solid #fff; border-radius:50% 50%;background:rgba(255,255,255,.0);;position:absolute;right:15px;top:10px;cursor:pointer; z-index:9999999 }
 	#gnb .m_button:after{position:absolute;top:19px;right:10px;display:block;height:8px;width:20px;border-top:2px solid #fff;border-bottom:2px solid #fff;content:''}
	#gnb .m_button:before{-webkit-transition:all .3s ease;-ms-transition:all .3s ease;transition:all .3s ease;position:absolute;top:13px;right:10px;display:block;height:2px;width:20px;background:#fff;content:''}

	
	#gnb .m_button.menu-opened:after{-webkit-transition:all .3s ease;-ms-transition:all .3s ease;transition:all .3s ease;top:20px;border:0;height:2px;width:19px;background:#333;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg)}
	#gnb .m_button.menu-opened:before{top:20px;background:#333;width:19px;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg)}

	#Header.active #gnb .m_button.menu-opened:after,
	#Header.scroll #gnb .m_button.menu-opened:after{
		 border-bottom:0px solid #333;
	}

	.sub #gnb .m_button:after,
	#Header.active #gnb .m_button:after,
	#Header.scroll #gnb .m_button:after{
		border-top:2px solid #333;border-bottom:2px solid #333;
	}

   .sub #gnb .m_button:before,
	#Header.active #gnb .m_button:before,
	#Header.scroll #gnb .m_button:before{background:#333;}





		.m_open .Mgnb_back{
			display:block;
			position:fixed;
			top:0px;
			width:100%;
			height:100%;
			background:rgba(255,255,255,1);   
			z-index:1;
	}

}
 
 

/*footer*/
.snsbox{
	position:fixed;
	bottom:20px;
	right:20px;
	text-align:right;
	z-index:9999;

}
.snsbox span{
	display:flex; 
	flex-wrap: wrap;
	 justify-content: flex-start;
	 align-items:center;
	 align-content: stretch;

	width:50px;
	height:50px;
	border-radius: 50% 50%;
	background:#fff;
	box-shadow: var(--shadow-normal);
}
.snsbox span a{
	display:block;
	width:100%;
	 align-self: center;
	  text-align:center;
}

.galleryarea #footer{padding-top:3000px;}
/**/
#footer{
	border-top:1px solid rgba(0,0,0,.08);
	background:#fff;
	 position:relative;

}
#footer:after{
	clear:both;
	content:'';
	display:block;
	position:relative;
} 

 

#footer .bottomlink {
 
	float:right;
	 
	 
}

 .btn_up_layer {
	display:none;
	position:fixed;
	bottom:140px;
	right:25px;
	z-index:33;
	width:60px;
	height:60px;
	background:#fff;
	border-radius:10px  ;
	color:#000;
	-webkit-box-shadow: 0 0px 20px 0 rgba(0,0,0,0.21);
    -moz-box-shadow: 0 0px 20px 0 rgba(0,0,0,0.21);
	box-shadow: 0 0px 20px 0 rgba(0,0,0,0.21);
	}


 .btn_up_layer span{
	display:block;
 	padding:0px 0  0 0;
	margin:0 auto;
	 
	top:0;
	 



  }
   .btn_up_layer span:after{
	display:block;
	font-family: FontAwesome;
	content: "\f106";
 	position:absolute;
	top:0;
	left:0;
	margin:5px 0 0 0;
	padding:0;
	text-align:center;
	width:100%;
	font-size:180%; 
	line-height:1;
	color:#2c3a63;
   }
     .btn_up_layer span:before{
	display:block;
 	content: "";
 	position:absolute;
	top:28%;
	left:50%; 
	width:3px;
	margin-left:-1px;
	height:50%;
	 background:#2c3a63;
   }
#footer .bottomlink ul{
	display:block;
	text-align:right;
	margin:0;
    padding:30px 80px 10px 10px;
 
}
#footer .bottomlink ul li{
	display:block;
 	margin-right:0px;
 	padding:3px;  
 	position:relative;
 	 
	
}

#footer .bottomlink ul li.first{
	
 	background:none;
	

}
/*#footer  .bottomlink ul li a:after{
	display: block;
 	content:' ';
 	width:1px;
 	height:10px;
 	background:rgba(255,255,255,.2);
 	position:absolute;
 	top:18px;
	

}*/

#footer  .bottomlink ul li.first a:after{
	 
	width:0px;
 	background:none;
 	 

}
#footer  .bottomlink ul li a {
 	padding-left:0px;
	letter-spacing:0px;
	font-size:90%;
	 
	
}
#footer  .bottomlink ul li.first a {
	 
	padding-left:0px;
	
}

#footer  .bottomlink ul li a,
#footer  .bottomlink ul li a:hover{
	 
	text-decoration:none;	 
 	 
} 


#footer .bottomlink ul li.pesornal a{
 	
}



/**/

#footer .companyinfo{
	float:left;
	padding:30px 0;
	width: calc(100% - 250px);

	 
}
#footer .companyinfo .bottom_logo{
	display:inline-block;
	margin-bottom:10px;
	vertical-align:top;
	width:120px;

	 
	
 }
  #footer .companyinfo .bottom_logo  img{	vertical-align:middle;}
  
 
#footer  .companyinfo .companyinfo_in{
	position:relative;
	padding-top:0px;
	display:inline-block;
	width: calc(100% - 140px);
	padding-left:0px;
	max-width:800px;
	opacity:.8;
	
}
#footer .companyinfo .companyinfo_in span{
 	font-size:80%;
	 font-weight:400; 
 	display:inline-block;
	position:relative;
	padding-left:20px;
	letter-spacing:0px;


}
#footer .companyinfo .companyinfo_in span.addre{
 }
#footer .companyinfo .companyinfo_in span a{
	 
}
 
#footer .companyinfo .companyinfo_in span strong{
 
	font-size:100%;
	padding-right:5px;
	letter-spacing:0px;
	position:relative;
	top:0;
	left:0;
	 
	 
}
 
#footer .companyinfo p.cpyright{
	 
 	font-size:12px;
 	 letter-spacing:0px;
	 padding-top:10px;
	 padding-bottom:10px;
	 padding-left:20px;

}
 

  

/*allmenu*/
 
 
.sitebox{
	padding:20px;
	position:relative;
	width:23%;
	margin:0 1%;
	float:left;
	opacity:0;filter:Alpha(opacity=0);
	-webkit-transition: all 0.5s 0s;
    transition: all 0.5s 0s;
	height:100%; 
	-webkit-transform:translateX(-5%);
	transform:translateX(-50%);
	background:#f7f7f7;
	min-height:500px;
	 
	 

}
.sitebox:after{
	position:absolute;  
	content:"";
	display:block; 	
	top:0;
	width:100%; 
 	height:0px; 
	left:0; 
	background: #ccc;
	-webkit-transition: all 1s 0s;
    transition: all 1s 0s;

}

.modal.in .sitebox{
	/*background: #fff; */
	opacity:1;
	-webkit-transition: all 0.8s 0s;
    transition: all 0.8s 0s;
	 
	-webkit-transform:translateX(0);
	transform:translateX(0);
}


.sitebox .titA{
	position:relative;
	font-size:180%;
	padding-bottom:30px;
	 font-weight:500;
	letter-spacing:-1px;
	 
}
.sitebox .titA:after{
position:absolute;  
	content:"";
	display:block; 	
	bottom:0;
	width:100%; 
 	height:2px; 
	left:0; 
	background: #ccc;
	-webkit-transition: all 1s 0s;
    transition: all 1s 0s;
}

.sitebox .titA a{


}
.sitebox .sitelist{
	position:relative;
	padding-left:10px;
	padding-top:30px;

}
.sitebox .sitelist ul > li{
	width:100%;
	float:left;

}
.sitebox .sitelist ul > li.hassub{
	
	min-height:100%;

}
.sitebox .sitelist ul > li.largemenu{
	min-height:280px;
}
.sitebox .sitelist ul > li a{
	font-size:18px;
	font-weight:500;
	padding:10px 0;
	display:block;
  }
.sitebox .sitelist ul > li.hassub ul li{
	float:none;
	background: url(../image/site_line.png) no-repeat 0 10px;
	padding-left:10px;
	width:100%;
 }
.sitebox .sitelist ul >  li.hassub ul li a{
	font-size:15px;
	font-weight:300;
	padding:2px 0;

}





@media (max-width: 1000px ){
	
	 .btn_up_layer {
		width:40px;
	height:40px;
	 }

	 .btn_up_layer span:after{
	 
	margin:0px 0 0 0;

	}
 
	#footer .bottomlink {float:none;border-top: 1px solid rgba(0,0,0,.1);}
	#footer .bottomlink ul{text-align:center;padding-right:0;padding-left:0;padding-top:10px;}
	#footer .bottomlink ul li{display:inline-block;}
	#footer .companyinfo .bottom_logo{text-align:center;}

	#footer .companyinfo{
		float:none;
		width:100%;
		padding:10px 0;
	}
	#footer .companyinfo .bottom_logo{
		width:100%;
	}
	#footer  .companyinfo .companyinfo_in{
		width:100%;
		max-width:100%;
	}
	#footer .companyinfo .companyinfo_in span{
		padding-left:0px;
		padding-right:20px;
	}
	#footer .companyinfo .companyinfo_in span.addre{
	 
	 
}

	#footer .companyinfo .companyinfo_in span.addre strong{
			 
			left:0px;

		}
		#footer .companyinfo p.cpyright{
			 padding-left:0px;
		}

}