@charset "utf-8"; 

.main_container					{padding:100px 0 0 0; overflow:hidden;}
.mainVisual						{position:relative; background:rgba(236,237,242,0.85);}
.mainVisual .item				{display:grid; grid-template-columns:auto 40%;}
.mainVisual .img				{position:relative; width:100%; aspect-ratio:6 / 3.3; overflow:hidden;}
.mainVisual .img img			{width:100%; height:100%; object-fit:cover; animation:imgScale 5s both;} 
.mainVisual .wrap				{position:relative; padding:10% 18% 0 10%;}
.mainVisual .cate				{display:flex; gap:25px; font-size:1.2em;}
.mainVisual .cate span			{display:block; letter-spacing:-1px; color:var(--color1); font-weight:700;}
.mainVisual .cate span:nth-child(2)			{position:relative; text-decoration:none; font-weight:500;}
.mainVisual .cate span:nth-child(2):before	{position:absolute; content:''; display:block; top:12px; left:-12px; width:4px; height:4px; border-radius:10px; background:var(--color1); font-weight:400;}
.mainVisual h2					{position:relative; color:#111; letter-spacing:-3px; font-size:2.3em; line-height:1.3; font-weight:700; margin:15px 0 40px 0;}
.mainVisual .txt				{font-size:1.25em; letter-spacing:-1.5px; line-height:1.5; color:#666; text-align:justify; overflow:hidden; text-overflow: ellipsis;-o-text-overflow: ellipsis; display:-webkit-box;-webkit-line-clamp: 5;-webkit-box-orient: vertical; word-wrap: break-word;}
.mainVisual .page				{position:absolute; right:0; bottom:60px; width:40%; z-index:111;}
.mainVisual .page ul			{padding-left:10%; display:flex; gap:20px;}
.mainVisual .page ul li			{font-family: 'Paperlogy'; color:#000; font-weight:700; font-size:1.2em; opacity:0.3; cursor:pointer;}
.mainVisual .page ul li:hover	{opacity:1;}
.mainVisual .page ul .on		{position:relative; opacity:1; padding-right:50px;}
.mainVisual .page ul .on:after	{position:absolute; right:0; bottom:5px; content:''; display:block; height:1px; width:30px; background:#000;}
.mainVisual .page .play i, .mainVisual .page .pause i	{font-size:0.8em;}
.mainVisual .item:hover  h2		{text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:5px;}

.mainTitle						{text-align:center; color:#797979; margin-bottom:60px;}
.mainTitle h2					{font-size:2.2em; color:#111; margin-bottom:20px; font-weight:300; letter-spacing:-3px; line-height:1;}
.mainTitle h2 strong			{font-weight:700;}
.mainTitle p					{font-size:1.1em; line-height:1.4; letter-spacing:-1px;}

.mainMonthly					{padding:120px 0;}
.mainMonthly .item				{position:relative; overflow:hidden; margin-top:-20px;}
.mainMonthly .item article		{float:left; margin:20px 20px 0 20px; width:calc(31.5% - 15px);}
.mainMonthly .img				{border-radius:20px; width:100%; aspect-ratio:6 / 4; overflow:hidden; box-shadow:0 0 20px 1px rgba(0,0,0,0.1);}
.mainMonthly .img img			{width:100%; height:100%; object-fit:Cover; transition:all .5s ease;}
.mainMonthly .tit				{margin-top:30px;}
.mainMonthly .cate				{display:flex; gap:10px;}
.mainMonthly .cate span			{font-size:1.05em; color:#333; letter-spacing:-1px; }
.mainMonthly .cate span:first-child	{padding:0 5px; box-shadow: inset 0 -10px 0 #f9d2e0; color:#222; font-weight:500;}
.mainMonthly h3					{margin:10px 0 20px 0; font-size:1.3em; color:#333; font-weight:600; letter-spacing:-1.5px; height:65px; 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;}
.mainMonthly .tag				{display:flex; flex-wrap:wrap; gap:5px 15px;}
.mainMonthly .tag span			{color:#e84a84; letter-spacing:-1px;}
.mainMonthly .tag span:hover	{text-decoration:underline;}
.mainMonthly .mainArrow			{top:25%;}
.mainMonthly .item article:hover .img img	{transform: scale(1.1); }
.mainMonthly .page				{display:none;}

.mainBoard						{position:relative; padding:120px 0; background:#f6f6f6;}
.mainBoard .web_size			{display:grid; grid-template-columns:auto 330px; gap:80px;}
.mainBoard .news				{position:relative; width:100%;}
.mainBoard .webzine				{position:relative; aspect-ratio:3 / 4; overflow:hidden; border-radius:20px; box-shadow:0 0 20px 1px rgba(0,0,0,0.1);}
.mainBoard .webzine .txt		{position:absolute; top:0; display:grid; padding:40px; font-size:1.1em; font-weight:500; width:100%; height:100%; align-content:flex-end; color:#fff; background:linear-gradient(180deg, rgba(256,256,256,0) 0%, rgba(0,0,0,0.5) 70%, rgba(0,0,0,7) 100%); z-index:1;}
.mainBoard .webzine .vol		{position:absolute; top:20px; right:20px; width:90px; height:90px; color:#fff; background:rgba(1,119,192,.9); padding-top:17px; line-height:1.4; z-index:2; border-radius:100%; text-align:center;}
.mainBoard .webzine .vol strong	{display:block; font-weight:700;}
.mainBoard .webzine img			{width:100%; height:100%; object-fit:cover; transition:all .5s ease;}
.mainBoard .webzine:hover img	{transform: scale(1.1);}
.mainBoard .webzine_slickslider div	{position:relative; } /* slickslider를 추가하면서 vol를 출력하기위해 추가 */
.mainBoard .arrow				{position:absolute; top:42%; width:100%; z-index:99;}
.mainBoard .arrow p				{position:absolute; width:56px; line-height:56px; background:rgba(0,0,0,0.45); cursor:pointer; text-align:center; transition: .5s;} 
.mainBoard .arrow p:after		{content:''; display:inline-block; border:solid #fff; padding:4px; border-width:4px 4px 0 0; border-radius:2px; transform:rotate(45deg);}
.mainBoard .arrow .prev			{left:0; text-indent:5px;}
.mainBoard .arrow .prev:after	{transform:rotate(225deg);}
.mainBoard .arrow .next			{right:0;}
.mainBoard .arrow .next:after	{margin-right:5px;}
.mainBoard .arrow p:hover		{background:#fff;}
.mainBoard .arrow p:hover:after	{border-color:#555;}

.mainCulture				{padding:120px 0;}

.mainArrow					{position:absolute; top:35%; transform:translateY(-50%); width:100%;}
.mainArrow p				{position:absolute; text-align:center; width:70px; line-height:70px; background:rgba(0,0,0,.2); cursor:pointer; border-radius:50%;} 
.mainArrow span				{position:relative; display:inline-block; border:solid #fff; border-width:2px 0 0 2px; padding:6px;}
.mainArrow p:after			{position:absolute; top:0; right:0; bottom:0; margin:auto; content:''; width:55%; height:2px; background:#fff;}
.mainArrow .prev			{left:-120px;}
.mainArrow .prev span		{transform:rotate(315deg); margin-left:5px;}
.mainArrow .next			{right:-120px;}
.mainArrow .next span		{transform:rotate(135deg); margin-right:5px;}
.mainArrow .next:after		{right:auto; left:0;}
.mainArrow p:hover			{background:var(--color1);} 




@media screen and (max-width:1680px) {
	.mainVisual .img			{aspect-ratio:6 / 4;}
	.mainArrow .prev			{left:-30px;}
	.mainArrow .next			{right:-30px;}
}

@media screen and (max-width:1400px) {
	.mainVisual .page				{bottom:40px;}
	.mainVisual .page ul			{gap:15px;}
	.mainVisual .page ul li			{font-size:1em;}
	.mainVisual .page ul li.on		{padding-right:30px;}
	.mainVisual .page ul li.on:after	{width:20px;}

	.mainMonthly, .mainBoard, .mainCulture	{padding:100px 40px;}
}

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

	.mainVisual .item				{display:block;}
	.mainVisual .wrap				{padding:3%;}
	.mainVisual .cate				{font-size:1.1em;}
	.mainVisual h2					{font-size:2em; margin:15px 0 30px 0;}
	.mainVisual .txt				{font-size:1.1em; -webkit-line-clamp:3;}
	.mainVisual .page				{position:relative; bottom:0; width:100%;}
	.mainVisual .page ul			{padding:40px; justify-content:center; }

	.mainTitle						{margin-bottom:40px;}
	.mainTitle h2					{font-size:1.8em; margin-bottom:12px;}
	.mainTitle p					{font-size:1em;}

	.mainMonthly .item article		{margin:20px 15px 0 15px;}
	.mainMonthly .mainArrow			{top:22%;}
	.mainBoard .web_size			{grid-template-columns:auto 300px; gap:40px;}
	.mainArrow						{top:30%;}
}

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

	.mainVisual .wrap				{padding:25px 15px 10px 15px;}
	.mainVisual .cate				{font-size:1em; gap:20px;}
	.mainVisual .cate span			{font-weight:600;}
	.mainVisual .cate span:nth-child(2)	{font-weight:400;}
	.mainVisual .cate span:nth-child(2):before	{top:10px; left:-10px; width:3px; height:3px; }
	.mainVisual h2					{font-size:1.6em; margin:10px 0 20px 0; letter-spacing:-2px;}
	.mainVisual .txt				{font-size:1em;}
	.mainVisual .page ul			{padding:20px; gap:7px;}
	.mainVisual .page ul li.on		{padding-right:20px;}
	.mainVisual .page ul li.on:after	{width:15px;}

	.mainArrow p					{width:50px; line-height:50px;}
	.mainArrow .prev				{left:-15px;}
	.mainArrow .next				{right:-15px;}
	.mainTitle						{font-size:0.95em; margin-bottom:25px;}
	.mainTitle h2					{font-size:26px; margin-bottom:10px;}

	.mainMonthly, .mainBoard, .mainCulture	{padding:40px 15px;}
	.mainMonthly .item article		{margin:20px 10px 0 10px;}
	.mainMonthly .cate span			{font-size:0.95em;}
	.mainMonthly .tit				{margin-top:20px;}
	.mainMonthly h3					{font-size:1.2em; margin:7px 0 15px 0; height:auto; -webkit-line-clamp:1;}
	.mainMonthly .item .tag			{font-size:0.95em; gap:0 10px;}
	.mainMonthly .mainArrow			{top:35%;}

	.mainBoard .web_size			{display:block;}
	.mainBoard .webzine				{margin-top:20px;}
	.mainBoard .webzine .vol		{width:80px; height:80px;}
	.mainBoard .webzine .txt		{padding:30px 25px;}

	.mainArrow						{top:40%;}
}

@media screen and (max-width:768px) {
	.main_news_list				{grid-template-columns:1fr;}
	.main_news_list>a:nth-child(3), .main_news_list>a:nth-child(4)	{display:none;}
	.main_news_list .nolist			{grid-column:unset;}
}