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

html	{ scroll-behavior: smooth; }

#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: 260px; background:url("../img/top_bg_img.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: 0.8em; letter-spacing:-0.01em; color: #175282; padding-bottom:0.2em; padding-top:0.3em; }
	.main_m_text_2	{display: block;   margin: 0 0.5rem; font-size: 0.6em; letter-spacing:-0.01em; color: #474747; padding-bottom:0.2em; padding-top:0.3em; }
	.title_bar_1	{display: block; margin: 0.2em auto; background-color:#e0e0e0; display:flex; width:80%; height:1px;}
	.main_m_text_3	{display: block;   margin: 0 0.5rem; font-size: 1.2em; letter-spacing:-0.01em; color: #000000; padding-bottom:0.2em; padding-top:0.3em; }


.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		{display:block; max-width:1550px; margin:auto;}







.product_wrap	{position:relative; top:0px; z-index:1; width:100%; background:url("../img/product_bg.jpg") repeat center; z-index:10; background-size:cover; padding:2em;}
.product_wrap .contents_wrap	{padding-top:2em;}
.product_wrap .contents_wrap .product_list_wrap	{display:flex; flex-wrap:wrap; justify-content:center;  align-content:center; align-items:center;width:100%; }
.product_wrap .contents_wrap	 .top_bar_1	{position:relative; display:block; width:50px; height:3px; background-color:#3a4d81; text-align:center; margin:auto;}
.product_wrap .contents_wrap h2				{position:relative; font-size:2em; margin:0.5em 0 0 0; padding-bottom:1.2em; font-family: "Inter", sans-serif; color:#3a4d81;text-align:center;}
.product_wrap .contents_wrap .product_list_wrap .product_01	{width:260px; text-align:center; margin:2em 2em;}
.product_wrap .contents_wrap .product_list_wrap .product_01 img		{border:0 solid #f4f4f4; border-radius: 1em;}
.product_wrap .contents_wrap .product_list_wrap .product_01 span	{display:block; margin-top:1em; font-size:1.2em; font-weight:800; color:#3a4d81;}


.icon_wrap	{position:relative; top:0px; z-index:1; width:100%; z-index:10; padding:2em; background-color:#dff7ff; }
.icon_wrap .contents_wrap	{padding-top:0em;}
.icon_wrap .contents_wrap .icon_list_wrap	{display:flex; flex-wrap:wrap; justify-content:center;  align-content:center; align-items:center;width:100%; }
.icon_wrap .contents_wrap	 .top_bar_1	{position:relative; display:block; width:50px; height:3px; background-color:#3a4d81; text-align:center; margin:auto;}
.icon_wrap .contents_wrap h2				{position:relative; font-size:2em; margin:0.5em 0 0 0; padding-bottom:1.2em; font-family: "Inter", sans-serif; color:#3a4d81;text-align:center;}
.icon_wrap .contents_wrap .icon_list_wrap .icon_01	{width:250px; text-align:center; margin:2em 2em;}
.icon_wrap .contents_wrap .icon_list_wrap .icon_01 img		{border:0 solid #f4f4f4; border-radius: 1em;}
.icon_wrap .contents_wrap .icon_list_wrap .icon_01 span	{display:block; margin-top:1em; font-size:1.2em; font-weight:600; color:#333333;}

        


.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:0.7em;}
.green_bold	{color:#006869;font-weight: 600; }
.red_bold	{color:#b71f2e;font-weight: 600; }
.bold				{font-weight: 600;}


.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;}


/*.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 */
	
	.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: 400px; }

	.main_m_text_1 { padding-top:2em;  font-size: 1.5em; }
	.main_m_text_2 { padding-top:0.5em;  font-size: 1.2em;}
	.title_bar_1	{margin: 0.2em auto; background-color:#e0e0e0; display:flex; width:90%; height:1px;}


	

	
	
	
	
	

	.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; }

}

/**********************************************************************************************************************/
  /* PC용 CSS */
@media all and (min-width: 1280px) {
/**********************************************************************************************************************/
	  /* 디스플레이 영역 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: 700px; }

	.main_m_text_1 { padding-top:4.5em;  font-size: 2.3em; }
	.main_m_text_2 { padding-top:0.5em;  font-size: 2em;}
	.title_bar_1	{margin: 0.5em auto; background-color:#e0e0e0; display:flex; width:90%; height:1px;}
	.main_m_text_4 { padding-top:0.5em;  font-size: 2em;}




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