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

/* VISUAL ===================================================================================== */  
.mVisual				{position:relative; margin:0 auto; background:#f4f6fa;} 
.mVisual li				{height:780px; animation:imgScale 5s both; filter: brightness(0.9);}
.mVisual .acc			{position:absolute; width:100%; top:40%; transform:translateY(-50%); color:#fff; text-align:center; z-index:100; animation: slide-up 3s cubic-bezier(.5,.2,0,1) forwards; text-shadow:0 0 5px rgba(0,0,0,0.2);}
.mVisual dl dt			{font-family: 'S-CoreDream-7ExtraBold'; font-size:3.8em; letter-spacing:-3px; line-height:1.3; }
.mVisual dl dd			{font-family: 'S-CoreDream-4Regular'; font-size:1.8em; line-height:1.6; letter-spacing:-1.5px; margin-top:20px;}

.mVisual .control		{position:absolute; width:100%; display:flex; justify-content:center; align-items:center; gap:0 5px; bottom:40px; z-index:999;}
.mVisual .control>div	{display:flex; gap:0 5px; background:rgba(0,0,0,0.3); border-radius:20px; line-height:40px; padding:0 18px; color:#fff; font-size:0.8em;}
.mVisual .control>div em	{font-family: 'NEXON Lv1 Gothic OTF'; font-style:normal; letter-spacing:0; font-size:15px; opacity:0.9;}
.mVisual .control>div .on	{font-weight:700; opacity:1;}
.mVisual .control>div p		{position:relative; cursor:pointer; font-size:20px; opacity:0.9;}
.mVisual .control>div p:hover	{opacity:1;}
.mVisual .control>div .play		{margin-left:5px;}
.mVisual .control>div .pause	{margin-left:5px;}
.mVisual .control>div:last-child	{gap:0 20px; padding:0 20px;}
.mVisual .control>div:last-child p	{font-size:15px;}
.mVisual .control>div:last-child p:last-child:before	{content:''; position:absolute; top:18px; left:-12px; width:5px; height:5px; border-radius:100%; background:#fff; opacity:0.5;}


/* CONTENTS    ================================================================================== */
.mTitle						{font-family: 'S-CoreDream-5Medium'; text-align:Center; font-size:2.4em; color:#2a2a2a; margin-bottom:50px; letter-spacing:-3px; line-height:1;}
.mTitle	span				{font-family: 'NEXON Lv1 Gothic OTF'; display:block; color:#f3991d; font-size:16px; text-transform:uppercase; margin-bottom:25px; letter-spacing:0.75px; font-weight:700;}

.jjbookWrap					{position:relative; padding:100px 0;}
.jjbookWrap:After			{position:absolute; left:0; bottom:0; content:''; display:block; width:100%; height:35%; background:#f2f3f6; z-index:-1;}
.jjbookWrap ul				{display:grid; grid-template-columns:repeat(4, 1fr); gap:0 40px;}
.jjbookWrap figure			{position:relative; height:420px; box-shadow:5px 5px 10px rgba(0,0,0,0.1); transition: all 0.3s ease;}
.jjbookWrap figure img		{width:100%; height:100%; object-fit:cover;}
.jjbookWrap figure:before		{content:''; position:absolute; left:0; width:5px; height:100%; background:rgba(0,0,0,0.1); }
.jjbookWrap figure:after		{content:''; position:absolute; left:12px; width:1px; height:100%; background:rgba(0,0,0,0.1);}
.jjbookWrap figure>span			{font-family: 'S-CoreDream-5Medium'; display:flex; align-items:center; justify-content:center; position:absolute; top:-10px; left:20px; width:66px; height:65px; padding:5px 10px 0 10px; line-height:1.2; text-align:center; background:#53b0de; color:#fff; z-index:1; font-size:0.95em;}
.jjbookWrap figure>span:after		{position:absolute; top:35px; content: ''; display: block; border:33px solid #53b0de; z-index:-1; border-bottom:15px solid transparent;}
.jjbookWrap figure>span:before		{position:absolute; top:0; right:-10px; content: ''; display: block; border-bottom:10px solid #3e81a3; border-right:10px solid transparent;}
.jjbookWrap ul li:hover figure 	{transform: scale(1.02);}
.jjbookWrap dl				{text-align:center; margin-top:30px;}
.jjbookWrap dl dt			{font-family: 'S-CoreDream-5Medium'; font-size:1.3em; color:#222; }
.jjbookWrap dl dd			{color:#7f7f7f; margin-top:8px;}
.jjbookWrap .nolist {text-align:center; border-bottom:1px solid #ddd; border-top:1px solid #ddd; line-height:320px;width:100%; color:#797979; padding:0; display:block;}


.boardWrap					{position:relative; padding:100px 0; display:grid; grid-template-columns: 1fr 1fr; gap:0 60px;}
.boardWrap .lt				{position:relative;}
.news_tab					{display:flex; gap:0 40px; height:65px;} 
.news_tab p					{position:relative;}
.news_tab p:first-child:After	{content:''; position:absolute; top:15px;; right:-25px; width:6px; height:6px; border-radius:100%; background:#c7c7c7;}
.news_tab a					{font-family: 'S-CoreDream-4Regular'; color:#a5a5a5; font-size:2em; letter-spacing:-2.75px; line-height:1;}
.news_tab .on				{font-family: 'S-CoreDream-5Medium'; color:#2a2a2a;}
.news_tab .more a			{display:block; position:absolute; top:0; right:0; width:42px; height:42px; line-height:38px; border:2px solid #ddd; cursor:pointer; border-radius:100%; text-align:center; font-size:15px; color:#555; transition:all 0.2s;}
.news_tab .more:hover a		{border-color:#f3991d; background:#f3991d; color:#fff; transform:rotate(180deg);}
.news_item .top 			{display:grid; grid-template-columns:120px auto; gap:0 15px;}
.news_item .date			{height:120px; text-align:center; background:#f3991d; color:#fff; border-radius:5px;}
.news_item .date p			{font-family: 'Jost', sans-serif; line-height:100%; font-size:2.8em;letter-spacing:-1.5px; margin:25px 0 0 0;}
.news_item .date em			{font-family: 'Jost', sans-serif; font-style:normal; opacity:0.9; font-size:0.95em; }
.news_item dl				{background:#f5f5f5; border-radius:10px; padding:20px 25px; overflow:hidden; letter-spacing:-1px;}
.news_item dl dt			{font-family: 'S-CoreDream-5Medium'; font-size:1.2em; color:#000; margin:12px 0 5px 0; overflow:hidden; text-overflow:ellipsis; -o-text-overflow:ellipsis; white-space:nowrap; }
.news_item dl dd			{color:#7f7f7f; overflow:hidden; text-overflow:ellipsis; -o-text-overflow:ellipsis; white-space:nowrap;}
.news_item ul				{padding-top:20px;}
.news_item ul li			{width:100%; position:relative; overflow:hidden; padding:4px 0 4px 13px; display:grid; grid-template-columns:auto 90px;} 
.news_item ul li:after		{position:absolute; content:''; display:block; top:15px; left:0; width:4px; height:4px; border-radius:100%; background:#7f8d99;}
.news_item ul li p			{overflow:hidden; text-overflow:ellipsis; -o-text-overflow:ellipsis; white-space:nowrap;}
.news_item ul li p a		{position:relative; font-size:1.05em; display:block; flex:2; color:#666; letter-spacing:-0.75px; overflow: hidden; text-overflow:ellipsis; -o-text-overflow:ellipsis; white-space:nowrap;}
.news_item ul li em			{display:block; text-align:right; font-style:normal; color:#bbb; font-size:0.9em; letter-spacing:0;}
.news_item ul li:hover p,
.news_item dl:hover dt		{text-decoration:underline;}
.news_item .nolist			{text-align:center; border-bottom:1px solid #ddd; border-top:1px solid #ddd; line-height:320px;width:100%; color:#797979; padding:0; display:block;}
.news_item .nolist:after	{display:none;}

.boardWrap .mTitle			{font-size:2em; text-align:left; margin:0; height:65px;}
.boardWrap .video			{position:relative; width:100%; height:360px; padding-top: 50%; border-radius:30px; box-shadow:0 0 20px 1px rgba(0,0,0,0.2); overflow:hidden;}
.boardWrap .video iframe	{position:absolute; top:0; left 0; width:100%; height:100%; z-index: 1;}

.snsWrap					{padding-bottom:100px; display:grid; grid-template-columns:25% auto; gap:0 20px;}
.snsWrap .mTitle			{text-align:left; font-size:2.2em;}
.snsWrap ul					{display:grid; grid-template-columns:repeat(4, 1fr); gap:0 30px;}
.snsWrap ul li				{border-radius:30px; aspect-ratio:1 / 1; background:url("../image/main/bn01.jpg") no-repeat center 0; background-size:cover; box-shadow:0 0 15px 1px rgba(0,0,0,0.1); transition:all 0.5s; overflow:hidden;}
.snsWrap ul li:nth-child(2)	{background-image:url("../image/main/bn02.jpg"); margin-top:40px;}
.snsWrap ul li:nth-child(3)	{background-image:url("../image/main/bn03.jpg");}
.snsWrap ul li:last-child	{background-image:url("../image/main/bn04.jpg"); margin-top:40px;}
.snsWrap ul li a			{display:grid; width:100%; height:100%; align-items:center; background:rgba(0,0,0,0.2);}
.snsWrap ul li p			{font-family: 'S-CoreDream-5Medium'; font-size:1.3em; color:#fff; letter-spacing:-1px; text-align:center;}
.snsWrap ul li img			{display:block; width:52px; margin:0 auto 15px auto;}
.snsWrap ul li:hover		{transform:translateY(-10px);}
.snsWrap ul li:hover a		{background:rgba(241,105,58,0.85); border:0;}
.snsWrap ul li:nth-child(2):hover a	{background:rgba(246,111,118,0.85);}
.snsWrap ul li:nth-child(3):hover a	{background:rgba(37,115,187,0.85);}
.snsWrap ul li:last-child:hover a	{background:rgba(55,172,189,0.85);}

.bnWrap						{border-top:1px solid #ddd;}
.bnWrap	.web_size			{display:flex; justify-content:center; gap:0 30px; height:100px;}
.bnWrap strong				{font-family: 'S-CoreDream-5Medium'; color:#333;}
.bnWrap .bn_box				{width:calc(100% - 80px);}
.bnWrap .part				{display:flex; align-items:center; justify-content:space-between; gap:0 15px;}
.bnWrap .part:first-child	{gap:0;}



@media screen and (max-width:1400px) {
	.jjbookWrap, .boardWrap		{padding:100px 20px;}
	.snsWrap					{padding:0 20px 100px 20px;}
	.bnWrap						{padding:0 20px;}
	.bnWrap	.web_size			{gap:0 10px;}
}


@media screen and (max-width:1200px) {
	.mVisual .acc					{padding:0 20px;}
	.jjbookWrap ul					{gap:0 20px;}
	.boardWrap						{gap:0 40px;}
	.snsWrap ul						{gap:0 20px;}
}


@media screen and (max-width:1024px) {
	.mVisual li						{height:420px;}
	.mVisual .acc					{top:20%;}
	.mVisual dl dt					{font-size:2.6em;}
	.mVisual dl dd					{font-size:1.1em; margin-top:15px;}
	.mVisual .control				{bottom:20px; letter-spacing:-0.75px;}
	.mVisual .control>div			{line-height:36px; padding:0 10px;}
	.mVisual .control>div:last-child p,	.mVisual .control>div em	{font-size:13px;}
	.mVisual .control>div p			{font-size:18px;}
	.mVisual .control>div:last-child	{padding:0 15px;}
	.mVisual .control>div .pause	{margin:0;}

	.mTitle							{font-size:1.8em; margin-bottom:30px;}
	.mTitle span					{font-size:14px; margin-bottom:12px;}

	.jjbookWrap						{padding:40px 20px;}
	.jjbookWrap figure				{height:auto;}
	.jjbookWrap figure>span			{left:10px;width:56px; height:55px; padding:5px 0 0 0;}
	.jjbookWrap figure>span:after	{border-width:28px; border-bottom:10px solid transparent; top:30px;}
	.jjbookWrap dl dt				{font-size:1.1em;}
	.jjbookWrap dl dd				{font-size:0.95em; margin-top:5px;}

	.boardWrap						{padding:40px 20px; grid-template-columns:1fr; gap:20px 0;}
	.boardWrap .lt					{height:320px;}
	.news_tab						{gap:0 25px; height:40px;}
	.news_tab p:first-child:After	{top:10px; right:-18px; width:5px; height:5px;}
	.news_tab a						{font-size:1.6em; letter-spacing:-1px;}
	.news_tab .more a				{top:-5px; width:36px; height:36px; line-height:32px; font-size:15px;}
	.news_item .top 				{grid-template-columns:90px auto;}
	.news_item .date				{height:90px;}
	.news_item .date p				{font-size:2em; margin:18px 0 0 0;}
	.news_item .date em				{font-size:0.85em;}
	.news_item dl					{padding:20px;}
	.news_item dl dt				{font-size:1.05em;margin:0 0 5px 0;}
	.news_item ul					{padding-top:15px;}
	.news_item ul li				{padding:2px 0 2px 10px;}
	.news_item ul li p a			{font-size:1em;}
	.news_item .nolist				{line-height:260px;}

	.boardWrap .mTitle				{font-size:1.8em; height:50px;}
	.boardWrap .video				{height:auto;}

	.snsWrap						{padding-bottom:40px; grid-template-columns:1fr; gap:0;}
	.snsWrap .mTitle				{text-align:center; font-size:1.8em;}
	.snsWrap ul						{gap:10px;}
	.snsWrap ul li p				{font-size:1.1em;}
	.snsWrap ul li:nth-child(even)	{margin-top:20px;}
	.snsWrap ul li img				{width:45px; margin-bottom:10px;}

	.bnWrap							{padding:10px 20px;}
	.bnWrap .web_size				{display:grid; gap:5px 10px; height:auto;}
	.bnWrap .part					{justify-content:center; gap:0 5px;}
	.bnWrap img						{height:25px;}
	.bnWrap strong					{font-size:0.85em;}
}


@media screen and (max-width:768px) {
	.mVisual li						{height:360px;}
	.mVisual dl dt					{font-size:2.2em; letter-spacing:-2px; line-height:1.3;}

	.jjbookWrap ul					{grid-template-columns:repeat(2, 1fr); gap:20px;}
	.jjbookWrap dl					{margin-top:15px; }
	.jjbookWrap dl dd				{line-height:1.4;}

	.snsWrap ul						{grid-template-columns:repeat(2, 1fr);}
	.snsWrap ul li:nth-child(even)	{margin:0;}
}