@charset utf-8;
/**********************************************************************************************************************/
/* 모바일용 CSS */
/**********************************************************************************************************************/
/* 기본 CSS */

html	{ scroll-behavior: smooth; }
body {font-size: 0.8em;}

#wrap {width:100%; }
.a_name	{position:relative; top:-75px;}

.header	{ position: fixed;  width:100% ;padding: 10px 0%;  height:80px; background: rgba(0, 0, 0, 0); transition:0.3s ease-in-out; z-index:100; }
.header h1			{margin-top:20px; width:140px; height:40px;  transition:0.2s ease-in-out; overflow:hidden;}
.header h1 a img	{position:relative; width:140px;   transition:0.2s ease-in-out; z-index:9;}

.header .logo { float: left;  margin-left:5%; }
.header nav	{ position: absolute; width:100%; height:60px; display:flex; flex-direction:row;  flex-wrap:wrap;  justify-content:flex-end; align-items:center; transition:0.3s ease-in-out;}
.header nav .menu	{display:none;}

.top_sns		{position: absolute; margin:0; padding:0; right:0.5em; bottom:0.5em; z-index:10; }
.top_sns img {width:30px; height:30px;}
.top_sns ul	 li {float:left; width:36px; text-align:center;}
.top_sns ul	 li:last-child	{margin-right:20px;}
_:-ms-input-placeholder, :root #menuicon + ul { margin-top:-23px;}

.top_sns ul	 li a	{opacity: 0.5; transition:0.2s ease-in-out;}
.top_sns ul	 li a:hover {opacity: 0.9;}

	/* 가상클래스(스크롤시) */
	.shrink { height: 80px;	background:rgba(255, 255, 255, 1);  border-bottom:solid 1px #cccccc;}
	.shrink nav	{height:60px; }
	.shrink h1		{margin-top:20px; width:140px;  overflow:hidden;}
	.shrink h1  a img	{ width:140px;}
	.shrink nav .top_sns {display:none;}

	.slider_wrap	{position: relative; top:0px; z-index:1; width:100%; height: 200px; background:url("../img/top_bg_img_sub.jpg") repeat center; z-index:10;background-size:cover; overflow:hidden;}

	.main_m_text { position: absolute; top: 5em; line-height: 1.1; font-family:'Noto Sans KR'; font-weight:900; width:100%;}
	.main_m_text p { text-align: center; margin:auto;}
	.main_m_text_1	{display: block;   margin: 0 0.5rem; font-size: 1.2em; letter-spacing:-0.01em; color: #175282; padding-bottom:0.2em; padding-top:1.2em; }
	.main_m_text_2	{display: block;   margin: 0 0.5rem; font-size: 1em; letter-spacing:-0.01em; color: #474747; padding-bottom:0.2em; padding-top:0.5em; }


.ln_icon		{width:36px; z-index:10; margin-right:40px;}
.main_m_text p {	

	animation-name:ani_txt_1 ;
	animation-duration: 15s;  
	animation-timing-function: ease;
	animation-direction: normal;
	animation-iteration-count:infinite;
	opacity:0;
	}

.main_m_text_1{	animation-delay: 0s;	}
.main_m_text_2{	animation-delay: 0.2s;	}
.main_m_text_3{	animation-delay: 0.4s;	}


@keyframes ani_txt_1	{		
		from	{ margin-top:0;margin-top:-10px; transform:scale(0.5); opacity:0; }		
		/*2%	{ margin-top:0;margin-top:0px; opacity:0.5; transform:scale(0.5); }*/
		3%	{ margin-top:0;margin-top:0px; opacity:1; transform:scale(1); }
		80%	{ margin-top:0;margin-top:0px; opacity:1; transform:scale(1);}
		83%	{ margin-top:0;margin-top:10px; opacity:0; transform:scale(0.5);}
		/*82%	{ margin-top:0em; margin-top:0px; transform:scaleY(1);}*/
		/*83%	{ margin-top:0em; margin-top:0px;transform:scaleY(0.8); }*/
		/*84% { margin-top:0em; margin-top:0px;transform:scaleY(1); }*/
		/*88% { margin-top:0em; margin-top:100px; opacity:0; transform:scaleY(1); }*/
		to		{  margin-top:0em; margin-top:10px; opacity:0; transform:scale(0.5); }
	}


.bar_1	{background-color:#e0e0e0; display:flex; width:100%; height:2px; margin:2.5em 0;}
.bar_dot	{ display:flex; width:100%; margin:1em 0; border-bottom:2px dotted #cccccc; }

.contents_wrap		{}
.content	{}
.sub_wrap	{position:relative; top:0px; z-index:1; width:100%; z-index:10; padding:3em 1em; display:block; max-width:1400px; margin:auto;}
.sub_wrap .top_bar_1	{position:relative; display:block; width:40px; height:4px; background-color:#3a4d81; }
.sub_wrap .sub_title		{position:relative; font-size:1.8em; margin:0.5em 0 0 0; padding-bottom:1em; font-family: "Inter", sans-serif; color:#3a4d81;}
.sub_wrap .sub_title span	{font-size:0.6em; color:#999999;}

.sub_wrap .sub_content	{display:flex; flex-wrap:wrap; justify-content:center;  align-content:center; align-items:flex-end; width:100%; }
.sub_wrap .sub_content > p:first-child		{width:70%;} /* Company Overview */
.sub_wrap .sub_content > p:last-child		{width:30%;}
.sub_wrap .sub_content > p:last-child img		{width:100%; opacity: 1;}
.sub_wrap .sub_content .sub_01_01_text		{font-size:1.2em; line-height:1.8em;}




.sub_menu_1	{width:100%; display:flex; justify-content:center; background-color:#ffffff; z-index:50; position:relative; margin-top:3em;}
.sub_menu_1 ul	{display:flex; flex-flow:row; justify-content:space-around; flex-wrap:wrap; align-items:center; width:1400px; }	
.sub_menu_1 ul li	{display:flex; flex:auto; align-items:center;height:2em; text-align:center; border:2px solid #cccccc; border-radius: 1.5em; margin: 0.5em 0.8em;}
.sub_menu_1 ul li	a	{display:block; font-size:0.88rem; height:100%; display:flex; flex:auto; align-items:center; justify-content:center; color:#000;  transition:0.3s;padding:2px 1.5em 0 1.5em;border-radius: 1.5em;}
.sub_menu_1 ul li	a:hover	{color:#fff; background-color:#3a4d81;border-radius: 1.5em;}
.sub_menu_1 ul li	a span	{ display:none; }




.sub_content_02	{display:flex; flex-direction:column; flex-wrap:wrap; justify-content:center;  align-content:center; align-items:flex-start; width:100%; }
.p_img_center	{display:flex; flex-direction:row;  flex-wrap:wrap;  justify-content:space-around; align-items:center;margin:1em auto;  max-width:1200px;;}
.p_img_center img	{max-width:100%; height:auto; width: auto; }
.p_02_con				{width:100%; padding:0 0.3em;}
.p_02_con_tit			{font-size:1.3em; margin:0.5em 0 0 0; padding:1em 0; color:#3a4d81; font-weight:800; }
.p_02_con_tit span	{position:absolute; font-size:1em; margin:-0.03em 0 0 -1.2em;}

.p_02_con_text		{font-size:1em; margin:0.5em 0 0 0; padding-left:0.5em; line-height:1.3em;}

.p_02_con_list			{font-size:1em; margin:0.5em 0 0 0; padding-left:1.8em; line-height:1.2em;}
.p_02_con_list span	{position:absolute; font-size:1em; margin:0 0 0 -1.4em;}

.p_img_center_1 			{display:flex; flex-direction:row;  flex-wrap:wrap;  justify-content:space-around; align-items:center;margin:1em auto; max-width:1200px;}
.p_img_center_1 img	{max-width:100%; height:auto; width: auto; }

.p_02_con_model			{font-size:1.2em; margin:0.5em 0 0 0; padding-left:1.8em;color:#666666; font-weight:600; padd}
.p_02_con_model span	{position:absolute; font-size:1em; margin:-0.03em 0 0 -1.2em;}


.install_table {}
.install_table ul		{display:flex; flex-flow:row; justify-content:center; flex-wrap:wrap; align-content:center;align-items:center;width:100%; ;padding:0.5em 0 0 0; }
.install_table ul li	{float:left; }
.install_table ul li:first-child	{width:30%;}
.install_table ul li:last-child		{width:70%;}

.sub_content_05		{position:relative; top:0px; z-index:1; width:100%; z-index:10; padding:em;  }
.sub_content_05 ul	{display:flex; flex-flow:row; justify-content:center; flex-wrap:wrap; align-content:center;align-items:flex-start;width:100%; z-index:0;padding:3em 0 0 0; }
.sub_content_05 ul li	{float:left; vertical-align:top; }
.sub_content_05 ul li:first-child	{ width:500px; padding-right:30px; padding-bottom:20px; }
.sub_content_05 ul li:last-child	{  padding-bottom:20px; width:100%}
.sub_content_05 ul li:first-child img	{width:100%; }



/* 구글 지도 반응형으로 삽입하기 */
	.map-responsive{
	overflow:hidden;
	padding-bottom:56.25%;
	position:relative;
	height:0;
	}
	.map-responsive iframe{
	left:0;
	top:0;
	height:100%;
	width:100%;
	position:absolute;
	}


.contact_email	{font-size:1em; font-weight: 400;  display:block; line-height:1.2em; padding:0.7em 0 0.9em 3.2em; background:url('../img/icon_email.png') no-repeat top 0em left 0; background-size: 40px; }
.contact_tel		{font-size:1em; font-weight: 400;  display:block; line-height:1.2em; padding:0.7em 0 0.9em 3.2em; background:url('../img/icon_phone.png') no-repeat top 0em left 0; background-size: 40px; }
.contact_fax		{font-size:1em; font-weight: 400;  display:block; line-height:1.2em; padding:0.7em 0 0.9em 3.2em; background:url('../img/icon_fax.png') no-repeat top 0em left 0; background-size: 40px; }
.contact_add		{font-size:1em; font-weight: 400;  display:block; line-height:1.2em; padding:0.7em 0 0.9em 3.2em; background:url('../img/icon_map.png') no-repeat top 0em left 0; background-size: 40px; }

#name,#email,#phone,	#message	{font-size:1em; font-weight: 400; height:1.2em; width:12em; border:2px solid #00a0e9; border-radius:0.5em; padding:0.5em 1em; margin:0.5em 0 0.2em 0;}
#name_desc, #email_desc, #phone_desc, #message_desc	{ padding-left:0.8em; font-size:0.8em;color:red;}
#message			{height:4em; width:90%; }
#form-messages	{font-size:1em; font-weight: 600; margin:1em 0; color:#e4007f;width:25em;}

.myButton {
	box-shadow:inset 0px 1px 0px 0px #f7c5c0;
	background:linear-gradient(to bottom, #fc8d83 5%, #e4685d 100%);
	background-color:#fc8d83;
	border-radius:12px;
	border:1px solid #d83526;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:17px;
	font-weight:bold;
	padding:13px 33px;
	text-decoration:none;
	text-shadow:0px 1px 0px #b23e35;
	margin-top:0.5em
}
.myButton:hover {
	background:linear-gradient(to bottom, #e4685d 5%, #fc8d83 100%);
	background-color:#e4685d;
}
.myButton:active {
	position:relative;
	top:1px;
}


/* 구글 지도 반응형으로 삽입하기 */
	.map-responsive{
	overflow:hidden;
	padding-bottom:56.25%;
	position:relative;
	height:0;
	}
	.map-responsive iframe{
	left:0;
	top:0;
	height:100%;
	width:100%;
	position:absolute;
	}



.copyright_wrap	{position:relative; top:0px; z-index:1; width:100%; background:url("../img/top_bg_img.jpg") repeat center; z-index:10; background-size:cover; padding:2em; text-align:center;background-color:#666666; }
.copyright_wrap p	{}
.copyright_wrap p:first-child	{margin-bottom:2em;}
.copyright_wrap p:first-child img	{width:120px;}
.copyright_wrap p:last-child	{font-size:0.6em; font-weight: 400; color:#000000; }




.indent_07	{text-indent : -0.7em; padding-left:2.5em !important; } /*들여쓰기*/
.indent_12	{text-indent : -1.2em; padding-left:2.5em !important; } /*들여쓰기*/
.padding_11	{padding-left:1.1em !important;}
.padding_22	{padding-left:2.2em !important;}
.padding_32	{padding-left:3.2em !important;}
.padding_42	{padding-left:4.2em !important;}


.green_bold	{color:#006869;font-weight: 600; }
.red_bold	{color:#b71f2e;font-weight: 600; }
.bold				{font-weight: 600;}
.list_bold		{font-weight: 800; position:relative !important; margin:0 !important;}
.dimensions	{font-weight: 600; font-size:1.2em; margin:1em 0;}

.btn_box_radius	{width:100%; display:flex; justify-content:center;  align-items:center; margin-top:0.2em;}
.btn_box_radius a {display:flex; justify-content:center;  align-items:center; height:40px;border-radius:0.5em; border:solid 2px #666666; color:#666666; font-size:0.6em; font-weight:700;width:15%;}
.btn_box_radius a:hover		{background-color:#666666; color:#fff;}


.btn_box_radius_1	{width:100%;display:flex; justify-content:center;  align-items:center; margin-top:1.2em;}
.btn_box_radius_1 a {display:flex; justify-content:center;  align-items:center; height:40px;border-radius:1em; border:solid 3px #00a5e3; color:#0076b1; font-size:1.2em; font-weight:700;width:90%; padding:0 2em;}
.btn_box_radius_1 a:hover		{background-color:#00a5e3; color:#fff;}


/*.top_bg	{position: relative; top:0px; width:100%; height: 200px; background:url("../img/top_bg_img.jpg") repeat center; z-index:10;background-size:cover; overflow:hidden;}*/


/**********************************************************************************************************************/
/* 태블릿용 CSS */
@media all and (min-width: 768px) {
/**********************************************************************************************************************/
	  /* 기본 CSS */
	body {font-size: 1em;}
	.header	{ height:125px;  background: rgba(0, 0, 0, 0); transition:0.3s ease-in-out;}
	.header h1			{margin-top:34px; width:161px; height:40px; overflow:hidden; }
	.header h1 a img	{width:170px; height:30px; z-index:200; }
	.header nav	{ height:105px;  transition:0.3s ease-in-out;}

	/* 가상클래스(스크롤시) */
	.shrink { height: 80px;	background:rgba(255, 255, 255, 1); border-bottom:solid 1px #cccccc; }
	.shrink nav	{height:60px; }
	.shrink h1		{margin-top:15px; width:150px; height:26px; overflow:hidden;}
	.shrink h1  a img	{ width:150px; height:26px;}
	.shrink .menu li ul {top: 45px;}


	.header nav .menu	{display:flex; padding-left:0; padding-right:0;margin-top:0; margin-right:1em; z-index:10; justify-content:flex-end;}
	.header nav .menu > li	{display:block; width:100%; text-align:center;}
	.header nav .menu  li ul li	{text-align:left;}


    .top_sns	{ position: absolute; margin-top:350px; ;  padding-right:10px; z-index:0;}
	.top_sns ul		{}
	.top_sns ul	 li {float:left; width:44px; text-align:center;}
	.top_sns ul	 li:last-child	{}
	.top_sns ul	 li img {width:36px; height:36px ;}
	.top_sns ul	{}


	/* IE Test */
	_:-ms-input-placeholder, :root .header nav .top_sns	{ right:10px; top:25px; }
	_:-ms-input-placeholder, :root .header nav .menu		{ padding-left:120px; padding-right:100px; width:750px;}

	
	.slider_wrap	{ height: 250px; }

	.main_m_text_1 { padding-top:2em;  font-size: 1.5em; }
	.main_m_text_2 { padding-top:0.5em;  font-size: 1.2em;}

	
	.sub_menu_1 ul 	{flex-wrap:no-wrap;}
	.sub_menu_1 ul li	{height:3rem;margin: 0.5em 1.5em;}
	.sub_menu_1 ul li	a	{font-size:1.13rem; }
	.sub_menu_1 ul li	a span	{ display:block; font-size:1em; padding-bottom:2px; padding-right:2px;}

	.content_s .intro_movie_2 .info_wrap .info h3	{font-size:1em; line-height:1.2em; margin-top:-0.5em;}

	.sub_wrap	{padding:4em 2em;}
	.p_02_con	{width:100%; padding:0 1em;}
	.p_02_con_text		{padding-left:1.3em;}
	.p_02_con_list		{padding-left:2.6em;}
	.p_02_con_model	{padding-left:2.6em;}

	.sub_content_05		{padding:1em;  }
	.map-responsive{	padding-bottom:40%; }
	

	.copyright_wrap p:first-child img	{width:180px;}
	.copyright_wrap p:last-child	{font-size:1em; font-weight: 400; color:#000000; }

	.btn_box_radius a {font-size:1em; }

	.btn_box_radius_1 a {height:60px; width:50%;}

}

/**********************************************************************************************************************/
  /* PC용 CSS */
@media all and (min-width: 1280px) {
/**********************************************************************************************************************/

	body {font-size: 1.1em;}
	  /* 디스플레이 영역 CSS */
	.header h1			{margin-top:24px; width:234px; height:58px; overflow:visible;}
	.header h1 a img	{ z-index:200; width:246px; height:43px; z-index:200; }

		/* 가상클래스(스크롤시) */
	.shrink { height: 80px;	background:rgba(255,255,255, 0.9); border-bottom:solid 1px #cccccc; }
	.shrink nav	{height:60px; }
	.shrink h1		{margin-top:14px; width:200px; height:35px; overflow:hidden;}
	.shrink h1  a img	{ width:200px; height:35px;}

	.header nav .menu	{width:950px;}

	/* 슬라이더 영역 CSS */

		/* IE Test */
	_:-ms-input-placeholder, :root .header nav .top_sns	{ right:0; top:0; }
	_:-ms-input-placeholder, :root .header nav .menu		{ padding-left:10px;}


	.slider_wrap	{ height: 300px; }

	.main_m_text_1 { padding-top:1em;  font-size: 1.8em; }
	.main_m_text_2 { padding-top:0.5em;  font-size: 1.5em;}


	.sub_menu_2 ul li	a span	{ display:block; font-size:0.94em;  padding-right:2px;}

	.map-responsive{	padding-bottom:30%; 	}

}
/**********************************************************************************************************************/
/*
		 background-color:red;
*/