@charset "utf-8"; 
@import url('https://fonts.googleapis.com/css2?family=Jost:wght@800&display=swap');
@import url(//spoqa.github.io/spoqa-han-sans/css/SpoqaHanSansNeo.css);


/* VISUAL    ================================================================================== */
.mContainer						{padding:140px 0 0 0;}

.mVisual						{position:relative; overflow:hidden;}
.mVisual .item					{position:relative; width:100%; height:640px;}	
.mVisual .bg 					{overflow:hidden; position:absolute; width:100%; height:100%; top:0; left:0; animation:imgScale 3s both; filter: brightness(0.85);} 
.mVisual .txt					{position:absolute; width:100%; top:35%; z-index:100; color:#34425c; text-align:center; animation:slide-up 1s linear forwards; animation-delay:0.5s; opacity:0;} 
.mVisual .txt em				{display:inline-block; font-style:normal; font-size:1.1em; font-weight:500; line-height:1.4;letter-spacing:2px; text-transform:uppercase; opacity:0.9; }
.mVisual .txt p					{font-family: 'GmarketSansLight'; font-size:3.25em; letter-spacing:-3px; line-height:1.2; margin-top:20px; }
.mVisual .txt span				{font-family: 'GmarketSansBold';}
.mVisual .txt span:last-child	{background: linear-gradient(to right, #3799d1, #5c78d6); color: transparent; -webkit-background-clip: text; letter-spacing:-2px;}


/* CONTENTS    ================================================================================== */
.mProgram						{position:relative; padding:80px 0;}
.mProgram:after					{content:''; position:absolute; left:0; bottom:0; width:100%; height:65%; background:#f8f9fa; z-index:-1;}
.mtit							{font-family: 'GmarketSansMedium'; position:relative; font-size:1.85em; letter-spacing:-1px; color:#000; text-align:left; margin-bottom:40px;}
.mProgram .mtit:after			{content:''; position:absolute; right:90px; bottom:5px; width:calc(100% - 680px); height:2px; background:#edeef0;}
.mProgram .tab					{display:inline-block; vertical-align:bottom; margin-left:20px;}
.mProgram .tab li				{position:relative; float:left;}
.mProgram .tab li:after			{content:''; position:absolute; top:1px; right:-3px; width:2px; height:17px; background:#d5d5d5; transform:rotate(20deg);}
.mProgram .tab li:last-child:after	{display:none;}
.mProgram .tab li span				{font-family: 'GmarketSansMedium'; position:relative; display:block; padding:0 20px; font-size:20px; color:#9f9f9f;}
.mProgram .tab .on span			{color:#26539c;}
.mProgram .tab .on span:before		{content:''; position:absolute; top:-9px; right:10px; width:17px; height:17px; border-radius:100%; background:#cfd7ee; z-index:-1;}
.mProgram .more					{font-family: 'GmarketSansMedium'; position:absolute; right:0; top:0; font-size:16px; color:#797979;}
.mProgram .tab li span:hover,
.mProgram .more:hover			{color:#26539c;}
.mProgram .item					{display: grid; grid-template-columns: repeat(4, 1fr); gap:20px 20px;}
.mProgram .item dl				{background:#fff; padding:35px; border-radius:20px; box-shadow:0 0 15px 1px rgba(0,0,0,0.1); transition: .5s; overflow:hidden;}
.mProgram .item dt span			{font-family: 'GmarketSansMedium'; position:relative; color:#888; padding-left:18px;}
.mProgram .item dt span:first-child	{color:#0072ce;}
.mProgram .item dt span:first-child:before	{content:''; position:absolute; top:3px; left:0; width:10px; height:10px; border-radius:100%; background:#0072ce;}
.mProgram .item dt span:first-child:after	{content:''; position:absolute; top:1px; right:-10px; width:1px; height:14px; background:#bbb; opacity:0.8;}
.mProgram .item .other dt span				{color:#888;}
.mProgram .item .other dt span:before		{background:#999;}
.mProgram .item dt p			{font-family: 'GmarketSansMedium'; font-size:1.25em; color:#333; height:50px; line-height:1.4; letter-spacing:-0.75px; margin:10px 0 15px 0; overflow:hidden; text-overflow: ellipsis;-o-text-overflow: ellipsis; display:-webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical; word-wrap: break-word;}
.mProgram .item dd				{font-family: 'Spoqa Han Sans Neo', 'sans-serif'; font-weight:400; font-size:0.95em; color:#414141; line-height:1.5; overflow: hidden; text-overflow:ellipsis; -o-text-overflow:ellipsis; white-space:nowrap; }
.mProgram .item dd strong		{font-family: 'GmarketSansMedium'; color:#000; margin-right:10px;}
.mProgram .item dl:hover		{background:linear-gradient(45deg, #3799d1, #5c78d6);}
.mProgram .item dl:hover dt span,
.mProgram .item dl:hover dt p,
.mProgram .item dl:hover dd,
.mProgram .item dl:hover dd strong	{color:#fff;}
.mProgram .item dl:hover dt span:after,
.mProgram .item dl:hover dt span:before	{background:#fff;}

.mBanner						{padding:50px 0 60px 0; text-align:center;}
.mBanner ul						{display: grid; grid-template-columns: repeat(6, 1fr); width:60%; margin:0 auto;}
.mBanner ul li					{background:url('../img/main/acc_bn01.png') no-repeat center 8px; background-size:80px;}
.mBanner ul li:nth-child(2)		{background-image:url('../img/main/acc_bn02.png');}
.mBanner ul li:nth-child(3)		{background-image:url('../img/main/acc_bn06.png');}
.mBanner ul li:nth-child(4)		{background-image:url('../img/main/acc_bn04.png');}
.mBanner ul li:nth-child(5)		{background-image:url('../img/main/acc_bn05.png');}
.mBanner ul li:last-child		{background-image:url('../img/main/acc_bn03.png');}
.mBanner a						{display:block; font-size:1.25em; color:#414141; padding-top:110px;}
.mBanner p						{font-family: 'GmarketSansMedium'; position:relative; display:inline-block; padding:0 5px;}
.mBanner p:after				{position:absolute; left:0; bottom:0; display:block; content:''; background:#ddecff; height:10px; width:0; border-radius:10px; z-index:-1; transform:scale(0); transition:all 0.2s;}
.mBanner ul li:hover			{animation:bounce 1s ease-out;}
.mBanner ul li:hover p:after	{width:100%; transform:scale(1);}

.mNews							{position:relative; padding-bottom:100px;}
.mNews:after					{content:''; display:block; clear:both;}
.mNews .lt						{float:left; width:48%; border:3px solid #e6e5e5; border-radius:10px; overflow:hidden;}
.mNews .rt						{position:relative; float:right; width:50%; margin-right:-15px;}
.mNews .mtit					{line-height:1.5; margin-bottom:20px; text-indent:15px;}



/* FAMSITE    ================================================================================== */
.famsite							{position:relative; padding:30px 0; border-top:1px solid #ddd;}
.famsite ul							{width:calc(100% - 60px); margin:0 auto; text-align:center}
.famsite ul li						{display:inline-block; line-height:60px;}
.famsite .arrow p					{position:absolute; top:25%; width:30px; height:30px; cursor:pointer;}
.famsite .arrow span				{display:inline-block; border:solid #aaa; border-width:0 3px 3px 0;  padding:5px; margin:10px 0 0 10px;}
.famsite .arrow span:hover			{border-color:#555;}
.famsite .prev						{left:-3px; transform: rotate(135deg);}
.famsite .next						{right:-3px; transform: rotate(-45deg);}



@media screen and (max-width:1440px) {
	.mNews .rt						{margin:0;}

	.famsite .prev					{left:10px;}
	.famsite .next					{right:10px;}
}

@media screen and (max-width:1400px) {
	.mContainer						{padding:180px 0 0 0;}

	.mProgram						{padding:80px 20px;}
	.mProgram .mtit:after			{width:calc(100% - 670px);}
	.mProgram .tab					{margin:0;}
	.mProgram .item dl				{padding:30px;}

	.mBanner ul						{width:90%;}

	.mNews							{padding:0 0 100px 20px;}
}


@media screen and (max-width:1200px) {
	.mNews							{padding:0 15px 100px 15px;}
	.mNews .lt						{float:none; width:100%;}
	.mNews .rt						{float:none; width:100%; margin-top:20px;}
	.mNews .mtit					{text-indent:0;}
}

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

	.mVisual .item					{height:420px;}
	.mVisual .txt					{top:22%;}
	.mVisual .txt em				{font-size:0.95em;}
	.mVisual .txt p					{font-size:2.6em;}

	.mProgram						{padding:40px 15px 20px 15px;}
	.mtit							{font-size:1.4em; margin-bottom:20px;}
	.mProgram .mtit:after			{display:none;}
	.mProgram .tab					{float:right;}
	.mProgram .tab li span				{font-size:16px; padding:0 12px;}
	.mProgram .tab li:last-child span	{padding-right:0;}
	.mProgram .tab .on span:before		{right:5px;}
	.mProgram .more					{position:relative; font-size:15px; text-align:center; margin-top:15px;}
	.mProgram .item					{grid-template-columns:repeat(3, 1fr); gap:10px 10px;}
	.mProgram .item dl				{padding:20px;}
	.mProgram .item dl:nth-child(7),
	.mProgram .item dl:nth-child(8)	{display:none;}
	.mProgram .item dt span			{font-size:0.95em; padding-left:15px;}
	.mProgram .item dt span:first-child:before	{top:2px;}
	.mProgram .item dt span:first-child:after	{right:-8px; height:12px;}
	.mProgram .item dt p			{font-size:1.05em; -webkit-line-clamp:1; height:auto; margin:7px 0 10px 0;}

	.mBanner						{padding:20px 0 30px 0;}
	.mBanner ul li					{background-size:50px;}
	.mBanner a						{font-size:1.1em; padding-top:70px;}

	.mNews							{padding:0 15px 40px 15px;}

	.famsite						{padding:15px 0;}
	.famsite img					{width:80%;}
}


@media screen and (max-width:768px) {
	.mVisual .item					{height:320px;}
	.mVisual .txt					{padding:0 20px;}
	.mVisual .txt em				{font-size:0.8em;}
	.mVisual .txt p					{font-size:1.8em; margin-top:10px; letter-spacing:-2px;}
	.mVisual .txt span				{display:block;}
	.mVisual .txt span:last-child	{font-size:24px;}

	.mtit							{text-align:center;}
	.mProgram .tab					{float:none; padding-top:7px;}
	.mProgram .item					{grid-template-columns:repeat(2, 1fr);}

	.mNews .mtit					{text-align:left;}

	.mBanner						{padding:20px 0;}
	.mBanner ul						{grid-template-columns: repeat(3, 1fr); width:100%; gap:10px 0;}
}




@keyframes bounce {
	0%		{background-position: center 8px;}
	20%		{background-position: center top;}
	40%		{background-position: center 16px;}
	60%		{background-position: center 4px;}
	80%		{background-position: center 12px;}
	100%	{background-position: center 8px;}
}