@charset "utf-8"; 
 
/* VISUAL  ================================================================================== */
.main_container					{padding:140px 0 0 0; overflow:hidden;}
.mVisual .bxslider				{visibility:hidden;}
.mVisual .mvideo_box			{position:relative; width:100%; aspect-ratio:16/9; padding:0; margin:0; }

.mVisual						{position:relative;}  
.mVisual .item 					{position:relative; height:560px; overflow:hidden;}
.mVisual .bg 					{overflow:hidden; position:absolute; width:100%; height:100%; top:0; left:0; animation:imgScale 3s both; /*filter: brightness(0.8);*/} 
.mVisual .text					{position:absolute; width:100%; top:18%; transform:translateY(-50%); color:#222; z-index:100; animation:slide-up 2s cubic-bezier(.5,.2,0,1) forwards; } 
.mVisual .text em				{font-family: 'paybooc-Bold'; display:block; letter-spacing:3px; color:var(--color2);}
.mVisual .Btit					{font-family: 'S-Core Dream'; font-size:1.8em; line-height:1.4; font-weight:200; margin:20px 0 25px 0; }
.mVisual .Btit strong			{display:block; font-weight:700; font-size:40px;}
.mVisual .Stit					{font-family: 'S-Core Dream'; font-size:1.2em; line-height:1.6; opacity:0.7; word-break:keep-all; width:calc(100% - 500px);}
.mVisual .default				{background:#e7f2ff; overflow:unset;}
.mVisual .default::after			{content:''; position:absolute; right:0; left:0; bottom:-50px; width:1600px; height:100%; margin:0 auto; background:url('../img/main/acc_visual.png') no-repeat right bottom;}


/* CONTENTS  ================================================================================== */
.mBoard							{padding:120px 0 80px 0;}
.mBoard .quickmenu				{position:relative; display:flex; gap:15px; width:100%; text-align:center;}
.mBoard .quickmenu a 			{flex:1; display:block; border:5px solid #f3f3f3; border-radius:20px; background:#f3f3f3; transition:.4s;}
.mBoard .quickmenu li			    {font-family: 'S-Core Dream'; line-height:1.2; color:#333; font-weight:500; padding:130px 0 35px 0; background-repeat:no-repeat; background-position:center 30px; background-size:90px; }
.mBoard .quickmenu .icon01{background-image:url('../img/main/acc_bn01.png'); }
.mBoard .quickmenu .icon02{background-image:url('../img/main/acc_bn02.png') ; }
.mBoard .quickmenu .icon03{background-image:url('../img/main/acc_bn03.png'); }
.mBoard .quickmenu .icon04{background-image:url('../img/main/acc_bn04.png') ; }
.mBoard .quickmenu .icon05{background-image:url('../img/main/acc_bn05.png') ; }
.mBoard .quickmenu .icon06{background-image:url('../img/main/acc_bn07.png') ; }
.mBoard .quickmenu a:hover		{background:#fff;}
.mBoard .quickmenu a:hover li 	{animation:bounce 1s ease-out;}

.main_container h2				{font-family: 'S-Core Dream'; text-align:center; color:#2a2a2a; font-weight:500; font-size:2.2em; line-height:1; margin-bottom:50px;}
.main_container h2 strong		{font-weight:700;}



.mPhoto							{padding:0 0 120px 0;}
.mArrow							{position:absolute; top:37%; transform:translateY(-50%); width:100%; z-index:1;}
.mArrow p						{position:absolute; cursor:pointer; width:70px; height:70px; line-height:67px; text-indent:-10px;background:#fff; border-radius:100%; text-align:center;  box-shadow:0 0 15px 1px rgba(0,0,0,0.07);} 
.mArrow p:after					{content:''; display:inline-block; border:solid #333; border-width:3px 0 0 3px; padding:4px; border-radius:2px;}
.mArrow p:before				{content:''; display:inline-block; height:2px; width:20px; position:absolute; top:0; bottom:0; margin:auto; background:#333;}
.mArrow .prev					{left:-40px;}
.mArrow .prev:after				{transform:rotate(315deg);}
.mArrow .prev:before			{right:25px;}
.mArrow .next					{right:-40px; text-indent:10px;}
.mArrow .next:after				{transform:rotate(135deg);}
.mArrow .next:before			{left:25px;}
.mArrow p:hover					{background:var(--color1);}
.mArrow p:hover:after			{border-color:#fff;}
.mArrow p:hover:before			{background:#fff;}


/* News 관련 CSS 임시추가 */
.photo_wrap .photo_slickslider 	{margin:-15px -10px; height:330px; overflow:hidden;}
.photo_list li					                {margin:15px 10px; border:1px solid #ddd; border-radius:20px; overflow:hidden;transition:all 0.4s ease;}
.photo_list figure				            {width:100%; aspect-ratio:6 / 4; overflow:hidden;}
.photo_list figure img			        {width:100%; height:100%; object-fit:cover; transition:all 0.4s ease;}
.photo_list li:hover			            {box-shadow:0 0 15px 1px rgba(0,0,0,0.07);}
.photo_list li:hover figure img	    {transform: scale(1.1);}
.photo_list .wrap				            {padding:1.3em  ;  }
.photo_list .wrap>p				        {font-family: 'S-Core Dream'; font-size:1em; color:#333; font-weight:500;   line-height:1.4; overflow:hidden; text-overflow:ellipsis;-o-text-overflow:ellipsis; display:-webkit-box;-webkit-line-clamp: 2;-webkit-box-orient:vertical; word-wrap:break-word;}
.photo_list .wrap>div			        { font-size:0.95em; color:#777; line-height:1.5; margin:10px 0 15px 0; height:50px; overflow:hidden; text-overflow:ellipsis;-o-text-overflow:ellipsis; display:-webkit-box;-webkit-line-clamp: 2;-webkit-box-orient:vertical; word-wrap:break-word; display:none;  }
.photo_list .wrap>em			        {position:relative; display:block; color:#a2a2a2; font-size:0.9em; margin-top:10px; }
.photo_list .wrap>em::after         {position:absolute; content:''; right:0; top:4px; width:20px;height:20px; background:url('../img/common/top_blank01.png') no-repeat right 0;  filter: grayscale(100%); opacity:0.5; }
.photo_list li:hover .wrap>em::after         {filter: grayscale(0%); opacity:1; }
.photo_list  .nolist			                {width:100%; text-align:center; padding:100px 0; color:#777;}

.photo_wrap .dots				            {margin-top:20px; text-align:center;}
.photo_wrap .dots li			            {display:inline-block; margin:0 5px; border:0;}
.photo_wrap .dots li span		        {display:inline-block; content:''; width:12px; height:12px; border-radius:50%;  background:#000; opacity:0.25; cursor:pointer;}
.photo_wrap .dots li:hover span, .photo_wrap .dots .slick-active span 	{opacity:1; background:var(--color1);}

@media screen and (max-width:1600px) {   
    .mArrow .prev					{left:-10px;}
    .mArrow .next					{right:-10px;}
}
@media screen and (max-width:1520px) {   
    .mArrow .prev					{left:0;}
    .mArrow .next					{right:0;}
}
@media screen and (max-width:1480px) {   
    .mPhoto                             {padding:0 40px 120px 40px;}
    .mArrow .prev					{left:-20px;}
    .mArrow .next					{right:60px;}
}
@media screen and (max-width:1024px) { 
	.mPhoto							{padding:0 0 50px 0;} 
	.mArrow p						{width:50px; height:50px; line-height:45px; text-indent:-8px;}
	.mArrow p:after					{padding:3px;}
	.mArrow p:before				{width:15px;}
	.mArrow .prev					{left:10px;}
	.mArrow .prev:before			{right:20px;}
	.mArrow .next					{right:10px; text-indent:8px;}
	.mArrow .next:before			{left:20px;}

	.photo_wrap .photo_slickslider 	{margin:0 5px; height:auto;}
	.photo_list li					{margin:0 10px;}
	.photo_list .wrap				{padding:1.2em; min-height:auto;} 
	.photo_list .wrap>div			{height:45px; margin:7px 0 10px 0;}

	.photo_wrap .dots li			{margin:0 3px;}
	.photo_wrap .dots li span		{width:10px; height:10px;}
}

@media screen and (max-width:768px) { 
	.photo_wrap .photo_slickslider 	{margin:0;}
}



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


@media screen and (max-width:1600px) {   
	.mVisual .default:after		{width:100%; background-position:98% bottom;}
	.mVisual .text				{width:calc(100% - 560px);}
    .mVisual .Stit              {width:100%;}
}

@media screen and (max-width:1480px) {   
	.mVisual .text				{padding:0 40px;}
	.mBoard                 	{padding:120px 40px 80px 40px;}
}

@media screen and (max-width:1280px) {   
    .mVisual .text              {top:12%; width:65%;}
    .mVisual .Btit              {font-size:1.5em;}
    .mVisual .Btit strong       {font-size:36px;}
    .mVisual .Stit              {font-size:1em;}
	.mVisual .default:after		{height:80%; background-size:contain;}

	.main_container h2			{font-size:1.8em; margin-bottom:40px;}
    .mBoard .quickmenu          {gap:10px;}
	.mBoard .quickmenu li		{height:180px; background-size:80px; padding-top:120px;}
}

@media screen and (max-width:1024px) {   
	.main_container					{padding:60px 0 0 0;}

	.mVisual .item					{aspect-ratio:6 / 3; height:auto;}
	.mVisual .text					{width:100%;}
	.mVisual .text em				{font-size:0.75em;}
	.mVisual .Btit					{margin:5px 0 12px 0; line-height:1.4;}
	.mVisual .Btit strong			{font-size:32px;}
	.mVisual .Stit					{margin-top:10px; width:60%;}
	.mVisual .default:after			{bottom:-30px; height:70%;}

	.mBoard							{padding:40px 15px;}
	.mBoard .quickmenu				{font-size:0.95em; gap:7px; flex-wrap:wrap;}
    .mBoard .quickmenu a            {flex:1 1 40%;}
	.mBoard .quickmenu li			{padding:70px 10px 15px 10px; height:auto; background-size:50px; background-position:center 10px;}
	.mBoard .quickmenu a:hover li 	{animation:unset;}

	.main_container h2				{font-size:1.4em; margin-bottom:20px;}
	

	.mFamsite						{padding:15px 0;}
	.mFamsite .arrow				{top:calc(50% - 15px);}
	.mFamsite ul					{width:calc(100% - 40px);}
	.mFamsite .arrow p:after		{padding:4px;}
	.mFamsite .prev					{left:0;}
	.mFamsite .next					{right:10px;}
	.mFamsite img					{width:70%;}
}

@media screen and (max-width:768px) { 
	.mVisual .item					{min-height:200px;aspect-ratio:6 / 2.8;  }
	.mVisual .text					{top:22%; padding:0 40% 0 30px;  }
    .mVisual .text em				 { letter-spacing:2px; }
	.mVisual .Btit					{font-size:1.2em;}
	.mVisual .Btit strong			{font-size:1.15em;}
	.mVisual .Stit					{font-size:0.95em; width:100%; display:none;}
	.mVisual .Stit br				{display:none;}
	.mVisual .default::after			{bottom:initial; top:20px; height:82% ; background-position:right 0; } 

	.mBoard .quickmenu				{font-size:0.9em; grid-template-columns:repeat(2, 1fr);}
}
@media screen and (max-width:580px) { 
	.mVisual .text					{top:18%;line-height:1.3;  }
    .mVisual .text em				 { letter-spacing:0.5px; }
	.mVisual .Btit					{font-size:1.1em;} 
}
@media screen and (max-width:480px) { 
	.mVisual .Btit					{font-size:1.05em;} 
}