@charset "utf-8";
@import url('https://webfontworld.github.io/gmarket/GmarketSans.css'); 

@font-face {
    font-family: 'GmarketSansMedium';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
/*

700 woff2
@import url('./fonts/GmarketSans.css'); 
*/





html,
#root,
.container {
  width:100%;max-width:1200px;
  height: 100%;
  margin:0px auto;
  padding:30px 0;
 /* 
  display: flex;
  justify-content: center;
  flex-direction: column;
 */ 
  text-align:center;
  transition: 0.3s;
}
.container div.text1 {font-size:0.85em;letter-spacing:-0.01em;color:#888;line-height:2;}
.container div.text1 span { padding:0 5px;}
.container div.text1 span i {vertical-align:middle;font-size:20px;}

body {
  min-height: 100%;
  display: flex;
  justify-content: center;
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  /* background-color: #eff3f7; */
  align-items: center;
}

ul,ol{list-style:none;}
a {text-decoration:none;}

/*h1 {display:block;font-family:'GmarketSans';font-size:10em;font-weight:700;letter-spacing:-0.05em;line-height:1.2;margin:0px;}*/
h1 {display:block;font-family:'GmarketSansMedium';font-size:10em;font-weight:700;letter-spacing:-0.05em;line-height:1.2;margin:0px;}
#effect1 {
    background-image: linear-gradient(to right, #bbe8ff, #b9d8ff, #0088cf,#006da6,#b9d8ff, #bbe8ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: qatar-animation 200s linear infinite;
}
@keyframes qatar-animation {
    to {
        background-position: 4500vh;
    }
}

.service_p .service_p1						{list-style:none;margin:30px -10px 0 -10px;padding:0px;text-align:center;zoom:1}
.service_p .service_p1 						{*zoom:1;} /* IE5.5~7 브라우저 대응 Hack */
.service_p .service_p1:after				{content:"";display: block;height: 0;clear: both;visibility: hidden;}	
.service_p .service_p1 > li					{float:left;padding:0 10px;margin:0px;box-sizing:border-box;} 
.service_p .service_p1 > li					{width:calc(100%/4);} 
.service_p .service_p1 > li					{}
.service_p .service_p1 > li .data1			{display:block;transition: 0.3s;padding:30px 20px 20px 20px ;margin:0px;background-color:#eee;border-radius:10px;box-shadow: 0px 0px 50px rgb(0 0 0 / 5%);} 
.service_p .service_p1 > li .data1			{letter-spacing:-0.05em;color:#888;font-size:0.85em;font-weight:400;line-height:1.1;} 
.service_p .service_p1 > li em				{display:block;font-family:'GmarketSansMedium';font-style:normal;font-size:3.4em;margin:0px;font-weight:700;letter-spacing: -0.05em;transition: 0.3s;color:#333;}

.service_p .service_p1 > li .data2			{display:block;transition: 0.3s;padding:20px 10px ;} 


.service_p .service_p1 > li:hover				{color:#afe3fe;} 
.service_p .service_p1 > li:hover .data1		{background-color:#0088cf;color:#fff;border-radius:10px;box-shadow: 5px 20px 50px rgb(0 136 207 / 20%);} 
.service_p .service_p1 > li:hover .data1 em	{color:#fff;} 



ul.nal1			{list-style:none;margin:0px;padding:0px;}
ul.nal1 		{*zoom:1;} /* IE5.5~7 브라우저 대응 Hack */
ul.nal1:after	{content:"";display: block;height: 0;clear: both;visibility: hidden;}	
ul.nal1 li		{margin:0px;padding:0px;text-align:left;border-bottom:1px solid #eee;} 
ul.nal1 li:last-child	{border-bottom:none;} 
ul.nal1 li	a	{
	display:block;font-style:normal;font-size:0.95em;font-weight:400;letter-spacing:-0.05em;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	transition: 0.3s;
	color:#666;
	line-height:1.4;
	padding:7px 0px 8px 0;
}

ul.nal1 li	a span	{ font-size:0.9em;color:#aaa;letter-spacing:-0.025em;}
ul.nal1 li	a span i{ font-size:0.95em;color:#aaa;vertical-align:middle;padding:0 2px 0 6px;}


ul.nal1 li	a:hover  {color:#0088cf;}


@media screen and (max-width:1200px){
	.container {width:100%;margin:0px 30px;} 
	.service_p .service_p1 > li em				{font-size:3em;}

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

	.container {width:100%;margin:0px 20px;} 
	.service_p .service_p1 > li em				{font-size:2em;}


}
@media screen and (max-width:960px){
	 
	.service_p .service_p1 > li					{width:calc(100%/2);} 

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

	h1 {font-size:8em;}



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

	h1 {font-size:3em;}
	html,
	#root {
	  width:auto;
	  height: auto;
	  margin:0px;
	  padding:0px;
	  display: block;
	  text-align:center;
	  transition: 0.3s;
	}	
	body {
	  display: block;
	}
	
	.container {
	  width:auto;max-width:100%;
	  height: auto;
	  margin:0px 20px !important;
	  padding:30px 0;
	  display: block;
	  text-align:center;
	  transition: 0.3s;
	}
	.service_p .service_p1						{margin:20px -10px 0 -10px;}
	.service_p .service_p1 > li					{width:calc(100%/1);} 
	.service_p .service_p1 > li em				{font-size:1.5em;}
	.service_p .service_p1 > li .data1			{padding:20px ;} 
	
	ul.nal1 li	a	{
		font-size:1em;
	}

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

}