@charset "utf-8"; 
 @import url('https://fonts.googleapis.com/css2?family=Jost:wght@800&display=swap');
 
 /* VISUAL   ===================================================================================== */ 
.mVisual							{position:relative; overflow: hidden; padding:80px 0; background:url('../image/main/vback.jpg')no-repeat center 0; background-size:cover;}
.mVisual .inner:after				{content:''; display:block; clear:both;}
.mVisual .txt						{position:relative; float:left; width:calc(100% - 860px); text-align:left;}
.mVisual .txt em					{position:relative; display:block; font-family: 'NEXON Lv1 Gothic OTF'; font-size:1.25em; color:#023b93; line-height:1; font-style:normal; letter-spacing:2px; font-weight:700; margin:20px 0 30px 0; z-index:1;}
.mVisual .txt em:after				{position:absolute; content:''; right:-40%; top:10px; width:80%; height:2px; background:#023b93;}
.mVisual dl dt						{font-family: 'NEXON Lv1 Gothic OTF'; font-weight:700; font-size:2.2em; letter-spacing:0.5px; color:#111; line-height:1.3;}
.mVisual dl dd						{color:#414141; font-size:1.15em; line-height:1.6; margin-top:20px;}
.mVisual figure						{position:relative; float:right; width:800px; height:480px; box-shadow: 0 5px 30px rgba(0, 0, 0, .3);}
.mVisual .control2					{position:absolute; left:0; bottom:-10px;}
.mVisual .control2 li				{display:inline-block; margin-right:13px; vertical-align:middle;}
.mVisual .control2 .on				{font-family: 'Jost', sans-serif; color:#023b93; font-size:1.4em; opacity:1;}
.mVisual .control2 .stop, .mVisual .control2 .play	{opacity:0.4;}
.mVisual .control2 .stop:hover, .mVisual .control2 .play:hover	{opacity:0.8;}
.mVisual .control2 .stop:before		{content:''; display:inline-block; width:4px; height:13px; background:#555; border-radius:2px;}
.mVisual .control2 .stop:after		{content:''; display:inline-block; width:4px; height:13px; background:#555; border-radius:2px; margin-left:3px;}
.mVisual .control2 .play:after		{content:''; display:inline-block; width:0; height:0; border-style:solid; border-width:8px 0 8px 13px; border-color:transparent transparent transparent #000; border-radius:3px;}
.mVisual .control2 li:not(.stop, .play, .slick-active)	{content:''; width:14px; height:14px; background:rgba(0,0,0,.2); border-radius:100%; cursor:pointer; font-family: 'Jost', sans-serif; color:#ffffff !important;/*#023b93;*/ font-size:1.4em; }
.mVisual .control2 li:not(.stop, .play, .slick-active):hover	{background:#023b93;}
.mVisual .control2 .slick-active	{font-family: 'Jost', sans-serif; color:#023b93;}
.mVisual .control2 button			{font-family: 'Jost', sans-serif; color:#023b93; font-size:1.4em;}
.mVisual .control2 li:not(.slick-active) button	{text-indent:-9999px;width:29px;}
.mVisual .slick-list			{overflow:unset;}
.mVisual .slick-list:after		{content:''; display:block; clear:both;}


/* SECTION 01   ===================================================================================== */ 
.mQuickmenu							{padding:60px 0; height:220px;}
.mQuickmenu ul						{display:grid; grid-template-columns: repeat(7, 1fr); text-align:center;}
.mQuickmenu ul li					{position:relative; background:url('../image/main/icon01.png')no-repeat center 0; background-size:60px;}
.mQuickmenu ul li:after				{content:''; position:absolute; top:0; right:0; bottom:0; width:7px; height:7px; border-radius:100%; margin:auto; background:#d7d9dd;}
.mQuickmenu ul li:nth-child(2)		{background-image:url('../image/main/icon02.png');}
.mQuickmenu ul li:nth-child(3)		{background-image:url('../image/main/icon04.png');}
.mQuickmenu ul li:nth-child(4)		{background-image:url('../image/main/icon03.png');}
.mQuickmenu ul li:nth-child(5)		{background-image:url('../image/main/icon05.png');}
.mQuickmenu ul li:nth-child(6)		{background-image:url('../image/main/icon06.png');}
.mQuickmenu ul li:nth-child(7)		{background-image:url('../image/main/icon08.png');}
.mQuickmenu ul li:nth-child(8)		{background-image:url('../image/main/icon07.png');}
.mQuickmenu ul li:nth-child(7):after	{display:none;}
.mQuickmenu ul li a					{font-family: 'S-CoreDream-5Medium'; padding-top:75px; font-size:1.1em; letter-spacing:0; display:block; color:#333;}


/* SECTION 02   ===================================================================================== */
.mBoard								{position:relative; background:#0d3370; padding:80px 0;}
.mBoard:after						{content:''; display:block; clear:both;}
.mtit								{font-family: 'S-CoreDream-5Medium'; font-size:2.2em; color:#a7e2ff; line-height:1; margin-bottom:30px;}
.mtit .more							{float:right; display:inline-block; line-height:36px; width:36px; text-align:center; background:rgba(0, 0, 0, .3); color:#fff; font-size:20px; border-radius:100%;}
.mtit .more:hover					{background:rgba(0, 0, 0, .7);}
.mSched								{position:relative; width:calc(100% - 500px);}
.mSched .list						{position:relative; display:grid; grid-template-columns:130px auto; gap:0 40px; color:#fff; }
.mSched .month						{text-align:center;}
.mSched .month p					{position:relative; font-size:3.4em; padding:10px 0; line-height:1;}
.mSched .month p span				{content:''; position:absolute; top:42%; border:solid #fff; border-width:2px 0 0 2px; padding:6px; transform:rotate(-45deg); cursor:pointer;}
.mSched .month .up					{left:0;}
.mSched .month .down				{border-width:0 2px 2px 0; right:0;}
.mSched .month strong				{font-family: 'Jost', sans-serif; font-weight:normal;}
.mSched .month em					{font-size:1.3em; opacity:0.5;font-style:normal;}
.mSched .box						{height:220px; overflow-y:scroll;}
.mSched .date						{display:grid; grid-template-columns: repeat(2, 1fr); gap:10px;}
.mSched .date li					{padding:20px 25px; border:1px solid rgba(256, 256, 256, .3); color:rgba(256, 256, 256, .7); line-height:1.4;}
.mSched .date li strong				{font-family: 'S-CoreDream-5Medium'; display:block; font-weight:300; color:#fff; font-size:1.05em; margin-bottom:3px; letter-spacing:0;}

.mDepart							{position:absolute; right:0; top:-100px; width:420px; height:465px; padding:60px 40px; background:url('../image/main/acc_symbol.png')no-repeat 90% 90% #0369d3;}
.mDepart .mtit						{font-size:2em; color:#fff;}
.mDepart ul							{display:grid; gap:12px 0;}
.mDepart ul li						{position:relative; padding-left:15px;}
.mDepart ul li:before				{position:absolute; content:''; display:block; left:0; top:13px; width:6px; height:1px; background:#fff;}
.mDepart ul li a					{font-family: 'S-CoreDream-4Regular'; font-size:1.2em; color:rgba(256, 256, 256, .8); letter-spacing:0;}
.mDepart ul li:hover a				{color:#fff;}


/* FAMSITE BANNER   ===================================================================================== */
.mFootbn							{position:relative; padding:30px 0; overflow:hidden;}             
.mFootbn .arrow p					{position:absolute; top:22%; width:30px; line-height:30px; text-align:center; cursor:pointer;}
.mFootbn .arrow p:after				{content:''; display:inline-block; border:solid #d1d1d1; border-width:0 3px 3px 0; padding:6px;}
.mFootbn .arrow p:hover:after		{border-color:#333;}
.mFootbn .prev						{left:-30px;}
.mFootbn .prev:after				{transform: rotate(135deg);}
.mFootbn .next						{right:-30px;}
.mFootbn .next:after				{transform: rotate(-45deg);}
	

/* BK21사업단 레이어 */
#main_layer							{display:none;position:fixed; width:1000px;overflow:hidden;z-index:999999999;-webkit-overflow-scrolling:touch;margin:0 auto; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important;}
#main_layer .main_layer_close		{position:absolute; right:0px; top:0px; width:50px; height:50px; background:url('../image/common/login_layer_close.png') no-repeat center 0; background-size:50px;cursor:pointer;z-index:9999999999;}
#main_layer .main_area				{margin:50px auto 0;width:1000px;max-height:calc(100vh - 300px); padding:40px 30px; background:#fff; overflow-y:auto;}
#main_layer .main_area .form_table tbody td	{padding:10px;}


@media screen and (max-width:1480px) {
	.mFootbn .prev					{left:0;}
	.mFootbn .next					{right:0;}
}

@media screen and (max-width:1400px) {
	.mVisual						{padding:80px 20px;}
	.mVisual .txt					{width:42%; height:auto;}
	.mVisual .txt em:after			{right:-30%; width:65%;}
	.mVisual dl dd br				{display:none;}
	.mVisual figure					{width:55%; height:auto;}
	.mVisual figure img				{width:100%;}

	.mBoard							{padding:80px 20px;}
}

@media screen and (max-width:1200px) {
	.mVisual .txt em				{font-size:1.1em; margin:0 0 20px 0;}
	.mVisual .txt em:after			{width:60%;}
	.mVisual dl dt					{font-size:2em;}
	.mVisual dl dd					{margin:20px 0;}

	.mBoard							{padding:60px 20px;}
	.mtit							{font-size:2em; margin-bottom:20px;} 
	.mSched							{width:calc(100% - 440px);}			
	.mDepart						{top:-70px; padding:40px; width:400px; height:402px;}
	.mDepart .mtit					{font-size:1.7em; margin-bottom:25px;}
}


@media screen and (max-width:1024px) {
	.mVisual						{padding:40px 20px;}
	.mVisual figure					{float:none; width:100%; }
	.mVisual .txt					{float:none; width:100%; padding:0 10px; min-height:150px;}
	.mVisual .txt em				{font-size:1em; margin:30px 0 15px 0;letter-spacing:1px;}
	.mVisual .txt em:after			{width:5px; height:100px; right:auto; left:10px; top:-110px;}
	.mVisual dl dt					{font-size:1.8em;}
	.mVisual dl dt br				{display:none;}
	.mVisual dl dd					{font-size:0.95em; margin:10px 0 20px 0;}
	.mVisual .control2				{position:relative; text-align:center;}
	.mVisual .control2 li			{margin-right:10px;}	
	.mVisual .control2 button		{font-size:1.2em;}
	.mVisual .control2 .stop:before,	
	.mVisual .control2 .stop:after	{width:3px; height:12px;}
	.mVisual .control2 li:not(.slick-active) button	{width:24px;}
	.mVisual .control2 li:not(.stop, .play, .slick-active)	{width:12px; height:12px;}

	.mQuickmenu						{padding:20px 0; height:auto;}
	.mQuickmenu ul					{grid-template-columns:repeat(4, 1fr);}
	.mQuickmenu ul li				{background-size:40px; margin:10px 0;}
	.mQuickmenu ul li a				{font-size:1em; padding-top:55px;}
	.mQuickmenu ul li:nth-child(4):after	{display:none;}

	.mtit							{font-size:1.6em;}
	.mtit .more						{width:32px; line-height:32px;}

	.mBoard							{background:none; padding:0;}
	.mSched							{width:100%; background:#0d3370; padding:40px 20px;}
	.mSched .list					{grid-template-columns:100px auto; gap:0 30px;}
	.mSched .month p				{font-size:2.4em;}
	.mSched .month em				{font-size:1.1em;}
	.mSched .date li				{padding:15px;}
	.mSched .date li strong			{font-size:1em;}
	.mSched .box					{height:100%; overflow-y:unset;}

	.mDepart						{position:relative; top:0; width:100%; height:100%; padding:40px 20px; background-position:95% 90%;background-size:100px;}
	.mDepart .mtit					{font-size:1.4em; margin-bottom:15px;}
	.mDepart ul						{gap:7px 0;}
	.mDepart ul li a				{font-size:1.1em;}

	.mFootbn						{padding:20px 0;}
	.mFootbn img					{width:85%;}
}


@media screen and (max-width:768px) {
	.mVisual .txt em				{font-size:0.95em; }
	.mVisual dl dt					{font-size:1.55em;}
	.mSched .date					{grid-template-columns:1fr;}
}

@media screen and (max-width:580px) {
	.mVisual dl dt					{font-size:1.4em;}
}