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

/* VISUAL    ================================================================================== */
.mainContainer						{position:relative; display:grid; grid-template-columns:auto 680px; padding:110px 0 0 0; overflow:hidden;}

.mainVisual							{position:relative; overflow:hidden;}
.mainVisual .item 					{width:100%; height:1170px; content:''; animation:imgScale 3s both;}
.mainVisual .acc					{position:absolute; width:100%; top:20%; transform:translateX(-50%); color:#fff; padding:0 80px; text-shadow:0 0 10px rgba(0,0,0,0.2); animation:slide-up 2s cubic-bezier(.5,.2,0,1) forwards; z-index:999;}
.mainVisual .acc dt					{font-family: 'GmarketSansBold'; font-size:4.7em; line-height:1.2; }
.mainVisual .acc dd					{font-family: 'GmarketSansMedium'; font-size:1.4em; line-height:1.5; letter-spacing:-1px; margin-top:20px;}
.mainVisual .acc:after				{position:absolute; top:-120px; left:500px; content:''; display:block; width:310px; height:310px; background:url('../img/common/acc_symbol.png') no-repeat center; background-size:cover;}


/* CONTENTS    ================================================================================== */
.mainContainer .rt					{padding:80px 0;}

.mainProgram						{padding:0 65px;}
.mainProgram .title					{display:flex; justify-content:space-between; margin:0 0 15px 0;}
.mainProgram .title	dt				{font-family: 'GmarketSansMedium'; color:#333; font-size:1.8em; line-height:1;}
.mainProgram .title	dt strong		{font-family: 'GmarketSansMedium'; color:var(--sub);}
.mainProgram .control				{display:flex; gap:10px;}
.mainProgram .control p				{position:relative; cursor:pointer;}
.mainProgram .control .cnt			{cursor:auto; color:#a9a9a9; margin-right:5px;}
.mainProgram .control .cnt span		{color:var(--sub); font-weight:500;}
.mainProgram .control i				{font-size:1.3em; color:#a9a9a9;}
.mainProgram .control i:hover		{color:#000;}
.mainProgram .control .pause		{margin:0 5px;}
.mainProgram .control .pause:after	{content:''; display:inline-block; width:2px; height:15px; background:#999; margin-left:5px;}
.mainProgram .control .pause:before	{content:''; display:inline-block; width:2px; height:15px; background:#999;}
.mainProgram .control .pause:hover:after, .mainProgram .control .pause:hover:before	{background:#000;}
.mainProgram .control .play			{line-height:22px; width:19px; text-align:Center;}
.mainProgram .control .play	i		{font-size:15px;}
.mainProgram .item					{margin:0 -15px;}
.mainProgram .item dl				{position:relative; padding:30px 35px; background:#fff; box-shadow:0 0 15px 1px rgba(0,0,0,.1); border-radius:20px; overflow:hidden; letter-spacing:-0.75px; transition: .5s; margin:15px;}
.mainProgram .item dt span			{font-family: 'GmarketSansMedium'; font-size:0.95em; position:absolute; top:0; left:0; background:var(--sub); color:#fff; height:42px; line-height:46px; width:120px; text-align:center; border-radius:0 0 15px 0;}
.mainProgram .item dt p				{font-family: 'GmarketSansMedium'; font-size:1.25em; color:#333; overflow:hidden; padding-top:30px; text-overflow:ellipsis;-o-text-overflow:ellipsis; display:-webkit-box;-webkit-line-clamp: 2;-webkit-box-orient:vertical; word-wrap:break-word;}
.mainProgram .item dd:nth-child(2)	{font-size:0.95em; letter-spacing:-0.5px; margin:10px 0 15px 0; line-height:1.4; height:48px; overflow:hidden; text-overflow:ellipsis;-o-text-overflow:ellipsis; display:-webkit-box;-webkit-line-clamp: 2;-webkit-box-orient:vertical; word-wrap:break-word;}
.mainProgram .item dd:nth-child(3) 	{padding-top:15px; border-top:1px dashed #e0e5e8;}
.mainProgram .item .info			{display:grid; grid-template-columns:80px auto; overflow:hidden; text-overflow:ellipsis; -o-text-overflow:ellipsis; white-space:nowrap;}
.mainProgram .item dd				{color:#797979;}
.mainProgram .item dd strong		{font-family: 'GmarketSansMedium'; font-size:16px; color:#003494; padding-top:3px;}
.mainProgram .item dl:hover			{background:var(--gra);}
.mainProgram .item dl:hover dt span	{background:#fff; color:var(--sub);}
.mainProgram .item dl:hover dt p, .mainProgram .item dl:hover dd, .mainProgram .item dl:hover dd strong	{color:#fff;}
.mainProgram .item dl:hover dd		{opacity:0.8;}
.mainProgram .item dl:hover .info	{opacity:1;}
.mainProgram .item .other dt span	{background:#999;}

.mainBanner							{margin:40px 0; padding:30px 60px; background:#f5f5f6;}
.mainBanner ul						{display:flex; justify-content:space-around; text-align:center;}
.mainBanner ul li 					{font-family: 'GmarketSansMedium'; font-size:1.1em; color:#333;}
.mainBanner ul li span				{content:''; display:block; width:85px; height:85px; margin:0 auto 15px auto; box-shadow:0 0 20px 1px rgba(128,128,128,0.1); background:url('../img/main/acc_bn01.png') no-repeat center #fff; background-size:40px; border-radius:100%; }
.mainBanner ul a:nth-child(2) li span	{background-image:url('../img/main/acc_bn02.png');}
.mainBanner ul a:nth-child(3) li span	{background-image:url('../img/main/acc_bn03.png');}
.mainBanner ul a:last-child li span		{background-image:url('../img/main/acc_bn04.png');}
.mainBanner ul li:hover span			{animation:bounce 1s ease-out; -webkit-animation:bounce 1s ease-out;}

.mainNotice							{padding:0 65px;}
.mFamsite							{display:none;}


@media screen and (max-width:1600px) { 
	.mainContainer					{grid-template-columns:auto 40%;}

	.mainVisual .item				{height:1160px;}
	.mainVisual .acc				{padding:0 60px;}

	.mainContainer .rt				{padding:60px 0;}
	.mainProgram .title dt			{font-size:1.7em;}
	.mainBanner						{margin:30px 0;}	
}

@media screen and (max-width:1300px) {
	.mainContainer					{display:block;} 
	.mainVisual .item				{height:auto; aspect-ratio:6 / 3; background-position:center 50% !important;}
	.mainVisual .acc				{top:25%; padding:0 40px;}	
	.mainVisual .acc dt				{font-size:4.2em;}
	.mainVisual .acc:after			{top:-80px; left:420px; width:230px; height:230px;}

	.mainProgram, .mainNotice		{padding:0 40px;}	
	.mainBanner ul li				{display:flex; align-items:center;}
	.mainBanner ul li span			{display:inline-block; margin:0 15px 0 0;}
}

@media screen and (max-width:1024px) {
	.mainContainer					{padding:60px 0 0 0;}
	.mainVisual .acc dt				{font-size:3.2em;}
	.mainVisual .acc dd				{font-size:1.2em;}
	.mainVisual .acc:after			{top:-60px; left:330px; width:160px; height:160px;}

	.mainContainer .rt				{padding:40px 0;}
	.mainProgram, .mainNotice		{padding:0 20px;}
	.mainProgram .title				{margin:0 0 5px 0;}
	.mainProgram .title dt			{font-size:1.5em;}
	.mainProgram .item dl			{padding:20px 25px;}
	.mainProgram .item dt span		{width:85px; height:36px; line-height:38px;}
	.mainProgram .item dt p			{font-size:1.1em;}
	.mainProgram .item dd:nth-child(2)	{margin:5px 0 10px 0;}
	.mainProgram .item dd:nth-child(3)	{padding-top:10px;}
	.mainProgram .item dd strong	{font-size:15px;}
	.mainProgram .item .info		{font-size:0.95em; grid-template-columns:70px auto;}

	.mainBanner						{margin:20px 0; padding:20px 10px;}
	.mainBanner ul li span			{width:70px; height:70px; background-size:32px;}
}


@media screen and (max-width:768px) {
	.mainVisual .item				{height:360px;}
	.mainVisual .item:after			{background:linear-gradient(270deg, rgba(256,256,256,0) 0%, rgba(0,149,110,1) 65%, rgba(0,149,110,1) 100%);}
	.mainVisual .acc				{top:23%; padding:0 25px;}	
	.mainVisual .acc dt				{font-size:2.4em;}
	.mainVisual .acc dd				{font-size:1.1em;}
	.mainVisual .acc dd br			{display:none;}
	.mainVisual .acc:after			{left:auto; right:20px;}
	.mainProgram .control			{gap:5px;}
	.mainBanner ul li				{font-size:1em; flex:1; display:block; width:100%; min-width:0;}
	.mainBanner ul li span			{display:block; margin:0 auto 10px auto;}
}