@charset "utf-8"; 

/* VISUAL  ================================================================================== */
.main_container						{padding:110px 0 0 0; overflow:hidden;}

.mainVisual							{position:relative; overflow:hidden; background:#e5f1ff;}  
.mainVisual .item 					{position:relative; height:600px; overflow:hidden;}
.mainVisual .item img				{width:100%; height:100%; object-fit:cover;animation:imgScale 3s both;}
.mainVisual .acc					{position:absolute; width:100%; top:20%; transform:translateX(-50%); text-align:left; z-index:100; color:#fff; text-shadow:2px 2px 10px rgba(0,0,0,0.3); animation:slide-up 3s cubic-bezier(.5,.2,0,1) forwards;}
.mainVisual .acc dt					{font-family: 'S-CoreDream-7ExtraBold'; font-size:2.8em; letter-spacing:-3px; margin-bottom:25px; line-height:1.25;}
.mainVisual .acc dt strong			{font-family: 'S-CoreDream-7ExtraBold';}
.mainVisual .acc dd					{font-family: 'S-CoreDream-4Regular'; font-size:1.2em; line-height:1.5; letter-spacing:0;}	
.mainVisual .default .acc			{color:#222; text-shadow:none;}
.mainVisual .default .acc dt strong	{color:var(--color1);}
.mainVisual .default:after			{content:''; display:block; width:100%; height:600px; position:absolute; top:0; right:15%; background:url('../img/main/visualacc.png') no-repeat right top; animation:slide-down 3s cubic-bezier(.5,.2,0,1) forwards;} 
.mainVisual .mvideo_box				{position: relative; width:100%; aspect-ratio:16/9; padding:0; margin:0;}

.mainNews							{position:relative; margin-top:-100px; z-index:100;}

.mainTit dt							{font-family: 'S-CoreDream-3Light'; font-size:2.2em; color:#111; letter-spacing:-2px; line-height:1.2;}
.mainTit dt strong					{font-family: 'S-CoreDream-6Bold';}
.mainTit dd							{font-family: 'S-CoreDream-4Regular'; color:#555; font-size:1.1em; margin:20px 0 40px 0; line-height:1.6;}

.mainCurrent						{padding:100px 0;}
.mainCurrent .web_size				{display:grid; grid-template-columns:auto 620px; gap:40px;}
.mainCurrent .tab ul				{display:grid; grid-template-columns:repeat(5, 1fr); gap:5px;}
.mainCurrent .tab ul li				{font-family: 'S-CoreDream-4Regular'; display:flex; justify-content:center; align-items:center; height:62px; color:#777; border:1px solid #d8d8d8; cursor:pointer;}
.mainCurrent .tab ul li:hover		{font-family: 'S-CoreDream-5Medium'; border:2px solid var(--color1); color:var(--color1);}
/*.mainCurrent .tab ul li:first-child, .mainCurrent .tab ul li:hover		{font-family: 'S-CoreDream-5Medium'; border:2px solid var(--color1); color:var(--color1);}*/
.mainCurrent .circle				{display:flex; align-items:flex-end; justify-content:flex-end;}
.mainCurrent .circle li				{position:relative; color:#333; display:flex; justify-content:center; align-items:center; width:220px; height:220px; border-radius:100%; border:7px solid var(--color1); margin:0 -10px;}
.mainCurrent .circle li:nth-child(2)	{border-color:#ddd; z-index:-1;}
.mainCurrent .circle li:last-child	{border-color:#a9d2fd; z-index:-2;}
.mainCurrent .circle li:before		{position:absolute; top:-55px; content:''; display:block; width:80px; height:80px; background:url('../img/main/acc_bn01.png') no-repeat center; background-size:cover;}
.mainCurrent .circle li:nth-child(2):before	{background-image:url('../img/main/acc_bn02.png');}
.mainCurrent .circle li:last-child:before	{background-image:url('../img/main/acc_bn03.png');}
.mainCurrent .circle li>div			{font-family: 'S-CoreDream-4Regular'; font-size:1.2em; text-align:center;}
.mainCurrent .circle p				{display:block; margin-top:12px; line-height:1; font-size:18px;}
.mainCurrent .circle em				{font-family: 'GmarketSansBold'; font-size:38px; margin-right:5px;}

.mainBoard							{padding:100px 0; background:#f2f3f3;}
.mainBoard .wrap					{position:relative;}
.mainBoard .item li					{margin:15px; box-shadow:0 0 15px 1px rgba(0,0,0,.1); overflow:hidden; padding:10px 0; background:#fff;}
.mainBoard .item li:hover img		{transform: scale(1.1); transition:all 1s ease;}
.mainBoard .arrow					{position:absolute; top:calc(50% - 30px); width:100%;}
.mainBoard .arrow p					{position:absolute; text-align:center; width:70px; line-height:70px; background:#666; cursor:pointer; opacity:0.5; border-radius:50%;} 
.mainBoard .arrow span				{position:relative; display:inline-block; border:solid #fff; border-width:2px 0 0 2px; padding:6px;}
.mainBoard .arrow p:after			{position:absolute; top:0; right:0; bottom:0; margin:auto; content:''; width:55%; height:2px; background:#fff;}
.mainBoard .arrow .prev				{left:-100px;}
.mainBoard .arrow .prev span		{transform:rotate(315deg); margin-left:5px;}
.mainBoard .arrow .next				{right:-100px;}
.mainBoard .arrow .next span		{transform:rotate(135deg); margin-right:5px;}
.mainBoard .arrow .next:after		{right:auto; left:0;}
.mainBoard .arrow p:hover			{opacity:1; background:var(--color1);} 

.mainMap							{display:grid; grid-template-columns:repeat(2, 1fr); border-top:1px solid rgba(0,0,0,.1); border-bottom:1px solid rgba(0,0,0,.1);}
.mainMap .wrap						{position:relative;}
.mainMap .wrap>p					{position:absolute; right:0; bottom:0; background:rgba(0,0,0,0.5); color:white; padding: 3px 7px; font-size:0.8em; z-index:10;}
.mainMap #map_canvas				{position:relative; width:100%; height:600px; }
.mapoverlay							{position:relative; margin-left:10px; bottom:45px; border-radius:3px;padding:2px 10px; box-shadow:0 0 10px 1px rgba(0,0,0,0.1); background:#fff;}
.mapoverlay .title					{display:none; color:#000; font-size:13px;letter-spacing:-0.5px; }
.mapoverlay .add					{font-family: 'S-CoreDream-4Regular'; color:#111; font-size:14px; letter-spacing:-0.5px; word-wrap:break-word;}
.mainMap .mainTit dt				{color:#fff;}
.mainMap .mainTit dd				{color:#fff; opacity:0.9; margin-bottom:30px;}
.mainMap .rt						{display:flex; align-items:center; background:url('../img/main/back_map.jpg') no-repeat center; background-size:cover;}
.mainMap .rt>div					{width:700px; padding:0 0 0 100px;}
.mainMap .info						{display:grid; gap:7px; color:#fff;}
.mainMap .info li					{font-family: 'S-CoreDream-4Regular'; display:grid; grid-template-columns:90px auto; gap:0 25px; font-size:1.1em; padding-top:5px; line-height:1.6;}
.mainMap .info strong				{margin-top:-5px; font-family: 'S-CoreDream-5Medium'; text-align:center; height:36px; line-height:36px; background:#fff; color:var(--color1); font-size:17px;}
.mainMap .btns						{margin-top:40px; display:flex; gap:10px;}
.mainMap .btns li a					{width:220px; height:60px; border:2px solid #fff; font-family: 'S-CoreDream-5Medium'; display:flex; justify-content:space-between; align-items:center; padding:0 20px; color:#fff; letter-spacing:-1px; font-size:0.95em;}
.mainMap .btns li:hover a			{border-color:var(--color2);}
.mainMap .btns li:hover i			{transform:translateX(5px); transition:all .3s; color:var(--color2);}

.mFamsite							{position:relative; padding:30px 0;}
.mFamsite .bottom_slickslider		{overflow:hidden;height:60px;}
.mFamsite ul						{width:calc(100% - 40px); margin:0 auto;}
.mFamsite .arrow p					{position:absolute; top:20%; transform:translateX(-50%); width:30px; height:30px; cursor:pointer;}
.mFamsite .arrow span				{display:inline-block; border:solid #d1d1d1; border-width:0 3px 3px 0; padding:7px; margin:10px 0 0 10px;}
.mFamsite .arrow span:hover			{border-color:#333;}
.mFamsite .prev						{left:20px;}
.mFamsite .prev span				{transform: rotate(135deg);}
.mFamsite .next						{right:0;}
.mFamsite .next	span				{transform: rotate(-45deg);}
.mFamsite .slick-list				{padding:0;}


@media screen and (max-width:1600px) {
	.mainVisual .default:after		{right:5%;}

	.mainBoard .arrow .prev			{left:-20px;}
	.mainBoard .arrow .next			{right:-20px;}
}

@media screen and (max-width:1400px) {
	.mainVisual .acc				{padding:0 20px;}

	.mainCurrent					{padding:100px 20px;}
	.mainBoard						{padding:100px 20px;}
	.mainMap .rt>div				{padding:0 60px; width:100%;}
}

@media screen and (max-width:1200px) {
	.mainVisual .default .acc		{top:30%;}
	.mainVisual .item				{aspect-ratio:6 / 3; height:100%;}
	.mainVisual .default:after		{height:80%; right:0; background-size:contain;}

	.mainNews						{margin:0;}

	.mainCurrent .web_size			{display:block;}
	.mainTit						{text-align:center;}
	.mainCurrent .tab ul			{width:80%; margin:0 auto;}
	.mainCurrent .circle			{justify-content:center; margin-top:80px;}

	.mainMap						{display:block; }
	.mainMap #map_canvas			{aspect-ratio:6 / 3; height:100%;}
	.mainMap .rt>div				{padding:60px;}
	.mainMap .btns					{justify-content:center;}
	.mainTit dd br					{display:none;}
}

@media screen and (max-width:1024px) {
	.main_container					{padding:60px 0 0 0;}
	.mainVisual .acc dt				{font-size:2.2em; margin-bottom:15px;}
	.mainVisual .acc dd				{font-size:1.1em;}

	.mainTit dt						{font-size:1.5em;}
	.mainTit dd						{font-size:0.9em; margin:5px 0 20px 0;}
	.mainCurrent					{padding:40px 15px;}
	.mainCurrent .tab ul li			{height:42px; font-size:0.95em;}
	.mainCurrent .circle			{margin-top:50px;}
	.mainCurrent .circle li			{width:130px; height:130px; border-width:4px; margin:0 -7px;}
	.mainCurrent .circle li>div		{font-size:1em;}
	.mainCurrent .circle p			{font-size:15px; margin-top:7px;}
	.mainCurrent .circle em			{font-size:23px; margin-right:3px;}
	.mainCurrent .circle li:before	{top:-35px; width:55px;height:55px;}

	.mainBoard						{padding:40px 30px;}
	.mainBoard .item li				{margin:10px;}
	.mainBoard .arrow p				{width:50px; line-height:50px;}
	.mainBoard .arrow .prev			{left:-20px;}
	.mainBoard .arrow .next			{right:-20px;}

	.mainMap .rt>div				{padding:40px 20px;}
	.mainMap .info					{gap:5px;}
	.mainMap .info li				{font-size:1em; grid-template-columns:70px auto; gap:0 20px; padding-top:3px;}
	.mainMap .info li br			{display:none;}
	.mainMap .info strong			{height:28px; line-height:28px; font-size:15px; margin-top:-3px;}
	.mainMap .btns					{margin-top:30px;}
	.mainMap .btns li a				{width:160px; height:52px; border-width:1px; padding:0 15px;}
	.mainMap .btns i				{font-size:12px;}

	.mFamsite						{padding:15px 10px;}
	.mFamsite .arrow p				{top:12%;}
	.mFamsite .arrow span			{padding:4px;}
	.mFamsite .prev					{left:10px;}
	.mFamsite .next					{right:-15px;}
	.mFamsite img					{width:70%;}
}

@media screen and (max-width:768px) { 
	.mainVisual .item				{aspect-ratio:unset; height:320px;}
	.mainVisual .acc dt				{font-size:1.7em;}
	.mainVisual .acc dd				{font-size:1em;}
	.mainVisual .default:after		{height:55%;}

	.mainCurrent .tab ul			{width:90%; grid-template-columns:repeat(3, 1fr);}
}