@charset "utf-8"; 

h4							{position:relative; font-weight:700; font-size:1.6em; color:var(--color1); line-height:1.2; padding:0 0 30px 0;}
h5							{position:relative; font-weight:500; font-size:1.2em; color:#000; padding:0 0 15px 32px;} 
h5:after					{position:absolute; top:3px; left:0; content:''; width:21px; height:21px; border-radius:3px; background:var(--gra);}
h5:before					{position:absolute; top:11px; left:6px; content:''; display:inline-block; border: solid #fff; border-width:0 2px 2px 0; padding:2px; transform:rotate(-45deg); z-index:1;}
.sub_txtline				{font-weight:500; box-shadow:inset 0 -10px 0 #caeffb; padding:0 3px; color:#000;}

.sub_cont01					{text-align:justify;} 
.sub_cont02					{padding-left:10px; text-align:justify;}  
.sub_list01					{position:relative; list-style:none; padding:3px 0 3px 12px; line-height:150%;}
.sub_list01:after			{position:absolute; content:''; display:block; left:0; top:14px; width:4px; height:4px; background:var(--color1); border-radius:100%;}
.sub_list02					{position:relative; list-style:none; padding:1px 0 1px 12px;}
.sub_list02:after			{position:absolute; content:''; display:block; left:0; top:14px; width:5px; height:1px; background:#222;}
.sub_cont01>li:first-child, .sub_cont02>li:first-child	{padding-top:0;}


@media screen and (max-width:1024px) { 
	h4						{font-size:1.2em; padding:0 0 15px 0;}
	h5						{font-size:1em; padding:0 0 10px 25px;}
	h5:before				{top:9px; left:4px;}	
	h5:after				{width:17px; height:17px;}

	.sub_list01				{padding:2px 0 2px 10px;}
	.sub_list01:after		{top:12px;}
}	


/* 서브 디자인  ================================================================================== */
.intVideo>div				{position:relative; width:80%; aspect-ratio:6/3; padding-top:50%; box-shadow:0 0 20px 1px rgba(0,0,0,0.2); overflow:hidden; margin:auto;}
.intVideo iframe			{position:absolute; top:0; left: 0; width:100%; height:100%; z-index: 1;}

.proWrap					{text-align:center; display:grid; gap:60px;}
.proWrap .head .tit			{font-size:1.6em; font-weight:500; color:#333; line-height:1.4; margin-bottom:30px; display:inline-block;}
.proWrap .head .tit	em		{font-family: 'OKGUNG'; display:inline-block; vertical-align:middle; color:var(--color1); font-size:90px; line-height:10px; margin-right:10px;}
.proWrap .head .txt			{line-height:1.8;}
.proWrap .list ul			{display:flex; flex-wrap:wrap; gap:30px; text-align:left;}
.proWrap .list ul li		{flex:1 1 40%; box-shadow:0 0 20px 1px rgba(0,0,0,0.055); height:230px; display:grid; grid-template-columns:auto 140px; align-items:center; gap:40px;}
.proWrap .list2 ul li		{height:auto; padding:50px 0;}
.proWrap .list dl			{padding-left:50px;}
.proWrap .list dl dt		{font-weight:700; color:#333; margin-bottom:10px;}
.proWrap .list dl dd		{color:#777; display:block; line-height:1.5; word-break:keep-all;}
.proWrap .list .circle		{position:relative; padding:0; width:100px; line-height:100px; text-align:center; vertical-align:middle; border-radius:100%; box-shadow:0 0 15px 1px rgba(127,191,200.05); background:#fff;}
.proWrap .list .circle:after	{position:absolute; top:0; left:-15px; right:0; bottom:0; content:''; width:calc(100% + 30px); height:calc(100% + 30px); border-radius:100%; margin:auto; background:var(--color1); opacity:0.2; z-index:-1;}
.proWrap .list .circle img	{width:70px; vertical-align:middle; margin-bottom:5px;}

.introMap						{display:grid; gap:5%; grid-template-columns:auto 30%;}
.introMap #map_canvas			{position:relative; width:100%; aspect-ratio:6 / 3; border:1px solid #e1e1e1; }
.introMap h4					{padding:20px 0 30px 0;}
.introMap .info p				{font-weight:500; font-size:1.1em; color:#333; display:grid; grid-template-columns:35px auto; line-height:1.6; margin-bottom:40px; word-break:keep-all;}
.introMap .info p i				{font-size:25px; margin:5px 10px 0 0; color:var(--color1);}
.introMap .info ul				{display:grid; gap:15px;}
.introMap .info ul li			{position:relative; color:#777; padding-left:60px;}
.introMap .info ul li strong	{display:block; font-size:15px; color:#111;}
.introMap .info ul li i			{position:absolute; top:5px; left:0; background:#f0f0f0; color:#000; width:45px; line-height:45px; border-radius:100%; text-align:center;}
.mapoverlay						{position:relative; bottom:55px; padding:10px 15px; border:1px solid #333; background:#fff;}
.mapoverlay::after				{position:absolute;content:''; left:50%; bottom:-16px; width:16px; height:16px; background:url('../img/common/map_localimg.png') no-repeat;}
.mapoverlay .title				{color:#000; font-size:16px; font-weight:bold;}
.mapoverlay .title span			{font-weight:700; color:#000;}
.mapoverlay .add				{display:none; color:#666; font-size:14px; word-wrap:break-word; }


@media screen and (max-width:1200px) {
	.proWrap .head .txt				{word-wrap:break-word;}
	.proWrap .head .txt br			{display:none;}
	.proWrap .list ul				{display:grid; gap:20px;}
	.introMap						{display:block;}
}	

@media screen and (max-width:1024px) {
	.proWrap						{gap:40px;}
	.proWrap .head .tit				{font-size:1.4em; margin-bottom:20px;}
	.proWrap .head .tit br			{display:none;}
	.proWrap .head .tit em			{font-size:60px;}
	.proWrap .h20p					{height:10px !important;}
	.proWrap .list ul li			{height:auto; padding:30px 0; grid-template-columns:auto 100px; gap:20px;}
	.proWrap .list dl				{padding-left:25px;}
	.proWrap .list .circle			{width:80px; line-height:80px;}
	.proWrap .list .circle img		{width:60%;}
	.proWrap .list .circle:after	{left:-10px; width:calc(100% + 20px); height:calc(100% + 20px);}

	.intVideo>div					{width:100%;}

	.introMap h4					{padding:0 0 10px 0;}
	.introMap .info					{padding:320px 10px; border-bottom:1px solid #ddd;}
	.introMap .info p				{font-size:1em; grid-template-columns:25px auto; margin-bottom:20px;}
	.introMap .info p i				{margin:0; font-size:20px;}
	.introMap .info ul				{display:flex; flex-wrap:wrap; gap:3px 20px;}
	.introMap .info ul li			{padding:0;}
	.introMap .info ul li i			{position:relative; top:0; width:32px; line-height:32px; margin-right:7px; font-size:13px;}
	.introMap .info ul li strong	{display:inline-block; font-size:15px; margin:0; margin-right:10px;}
	.mapoverlay						{padding:7px 12px;}
	.mapoverlay .title				{font-size:15px;}
}