@charset "utf-8";

/* =========================================================================================
 * ========================= Media Style - Width 1024px ~ 0 .Start =========================
 * ========================================================================================= */


/* ============================== [01] Common .Start ============================== */
.innerWrap					{width:100%; margin:0 auto; box-sizing:border-box}


/* Table Auto Scroll */
.scrollable					{position:relative; overflow-x:auto; z-index:50}
.scrollable.has-scroll				{position:relative; overflow:hidden;}
.scrollable.has-scroll:after			{position:absolute; top:0; left:100%; width:50px; height:100%; border-radius:10px 0 0 10px / 50% 0 0 50%; box-shadow:-5px 0 10px rgba(0, 0, 0, 0.25); content:'';}
.scrollable.has-scroll .inWrap			{overflow-x:auto;}
.scrollable .inWrap::-webkit-scrollbar		{height:12px;}
.scrollable .inWrap::-webkit-scrollbar-track	{box-shadow:0 0 2px rgba(0,0,0,0.15) inset; background:#f0f0f0;}
.scrollable .inWrap::-webkit-scrollbar-thumb	{border-radius:6px; background:#ccc;}
/*.scrollable table.tb_basic			{table-layout:initial; width:960px; z-index:45}*/
.scrollable table.tb_basic			{table-layout:initial; width:max-content; max-width:960px; z-index:45}
.scrollable .BG_autoScroll			{position:absolute; width:100%; height:100%; left:0; top:0; bottom:0; background:#000000; z-index:50; opacity:0.8}
/*.scrollable.has-scroll .inWrap:after		{position:absolute; content:""; display:block; width:100%; height:100%; left:0; top:0; bottom:0; background:#000000; z-index:50; opacity:0.5}*/

#wrap.type_F .scrollable .inWrap table.tb_basic {min-width: unset}

.mb_w100per					{position:relative !important; float:none !important; display:block !important; width:100% !important; height:auto !important; top:auto !important; right:auto !important; bottom:auto !important; left:auto !important;}

img						{max-width:100%}
/* ============================== [01] Common .End   ============================== */


/* ============================== [02] Header .Start ============================== */
#GNB						{padding:0 10px; box-sizing:border-box}
#LNB .innerWrap .dep01_ul			{width:100%}
#LNB .innerWrap .dep01_a			{font-size:16px}
#LNB.state_show .dep01_li.selectOn .dep02_ul	{width:100%}
/* ============================== [02] Header .End   ============================== */


/* ============================== [03] Contents .Start ============================== */
/*	========== [03] - [00] Common .Start ============================== */
#Contents					{padding:0 5px; box-sizing:border-box}
/*	========== [03] - [00] Common .End   ============================== */

/*	========== [03] - [01] Main Page .Start ============================== */
#wrap.main.type_D #menuLists dd li			{width: calc(33% - 20px); line-height: 35px; font-size: 16px; margin-right: 30px; margin-bottom: 5px}
#wrap.main.type_D #menuLists dd li:nth-of-type(4n){margin-right: 30px}
#wrap.main.type_D #menuLists dd li:nth-of-type(3n){margin-right: 0}
#wrap.main.type_D #menuLists dd li:nth-of-type(4n+5){clear: none; float: left}
#wrap.main.type_D #menuLists dd li:nth-of-type(3n+4){clear: both; float: left}

#wrap.main.type_D #sect_Notice #noticeWrap		{width:100%}


#wrap.type_F .innerWrap				{width: 100%}
#wrap.type_F #sect_1 .innerWrap			{grid-gap: 20px;}

/*	========== [03] - [01] Main Page .End   ============================== */

/*	========== [03] - [02] Sub Pages .Start ============================== */
#wrap.subPage #Contents						{width:100%; overflow:hidden}
#wrap.subPage #Contents .innerWrap				{width:100%}
#wrap.subPage #Contents #SNB					{width:200px; margin-right:30px}
#wrap.subPage #Contents #SNB .titleSNB				{font-size:22px}
#wrap.subPage #Contents #SNB .li_dep02				{height:50px; line-height:50px; font-size:16px}
#wrap.subPage #Contents #contWrap				{width:calc(100% - 230px); overflow-x:hidden}


#wrap.subPage #Contents #propWrap .tb_basic th			{width:20%}
#wrap.subPage #Contents #propWrap .tb_basic td			{width:80%}

#wrap.subPage #Contents #majorWrap .majorVideo			{background:none}
#wrap.subPage #Contents #majorWrap .majorVideo #ytplayer	{width:100%; height:auto}
/*	========== [03] - [02] Sub Pages .End   ============================== */


#wrap.subPage #Contents .mobileScrollX					{width:1000px}
#wrap.subPage #Contents .scrollable .mobile_mxW300			{max-width:300px; margin:0 auto}
#wrap.subPage #Contents .scrollable .mobile_mxW350			{max-width:350px; margin:0 auto}
#wrap.subPage #Contents .scrollable .mobile_mxW500			{max-width:500px; margin:0 auto}
#wrap.subPage #Contents .scrollable .mobile_mxW600			{max-width:600px; margin:0 auto}


/* Table Auto Scroll */
.scrollable								{position:relative; overflow-x:auto; z-index:50}
.scrollable.has-scroll							{position:relative; overflow:hidden;}
.scrollable.has-scroll:after						{position:absolute; top:0; left:100%; width:50px; height:100%; border-radius:10px 0 0 10px / 50% 0 0 50%; box-shadow:-5px 0 10px rgba(0, 0, 0, 0.25); content:'';}
.scrollable.has-scroll .inWrap						{overflow-x:auto;}
.scrollable .alertWrap							{position:relative; display:block; width:100%; line-height:20px; font-size:14px; color:#DD3606; text-align:left}
.scrollable .alertWrap br						{display:none}
.scrollable .inWrap::-webkit-scrollbar					{height:12px;}
.scrollable .inWrap::-webkit-scrollbar-track				{box-shadow:0 0 2px rgba(0,0,0,0.15) inset; background:#f0f0f0;}
.scrollable .inWrap::-webkit-scrollbar-thumb				{border-radius:6px; background:#ccc;}
.scrollable .inWrap table.tb_basic					{margin-top:0}
.scrollable table.tb_basic						{table-layout:initial; width:960px; width:100%; min-width:max-content; z-index:45}
.scrollable .BG_autoScroll						{position:absolute; width:100%; height:100%; left:0; top:0; bottom:0; background:#000000; z-index:50; opacity:0.8}

.aniHasHScroll						{position: relative; display: inline-block; width: 30px; height: 20px}
.aniHasHScroll:before				{position: absolute; display: block; width: 30px; height: 20px; font-family:"Font Awesome 5 Free"; content: "\f337"; font-size: 26px; color:#384079; font-weight: 600; top: 0; left: 0}
.aniHasHScroll:after				{position: absolute; display: block; width: 30px; height: 20px; font-family:"Font Awesome 5 Free"; content: "\f0a6"; font-size: 18px; color:#fff; font-weight: 600; top: 6px; left: 0; filter:drop-shadow(0px 0px 5px #000); animation-name: hScroll_ani; animation-duration: 1s; animation-direction: leaner; animation-iteration-count: infinite; animation-direction: alternate; animation-fill-mode: forwards; animation-timing-function: ease-in-out}
@keyframes hScroll_ani		{
	0%		{left: 0}
	100%	{left: 15px}
}

#BoardInc #BoardRead table						{max-width: unset !important; table-layout: fixed !important}

/* ============================== [03] Contents .End   ============================== */


/* ============================== [04] Footer .Start ============================== */
#footer								{height:auto; padding:10px; box-sizing:border-box}
#footer:after							{clear:both; float:none; height:0; content:""; display:block}
#footer .logo							{width:calc(100% - 650px)}
#footer #siteInfo						{width:650px}
#footer #siteLink						{position:relative; clear:both; float:left; width:300px;   text-align:left;  top:auto; right:auto; bottom:auto; left:auto; margin-top:10px}
#footer #siteCert						{position:relative; float:left;  width:100px; text-align:right; top:auto; right:auto; bottom:auto; left:auto; margin-top:10px}
#footer #siteCert img						{height:100%}
#footer #sitePolicy						{position:relative; float:right; width:calc(100% - 400px); text-align:right; top:auto; right:auto; bottom:auto; left:auto; margin-top:10px}
#footer #sitePolicy li						{float:none; display:inline}
/* ============================== [04] Footer .End   ============================== */



/* ============================== [05] SiteMap .Start ============================== */
#wrap.sitemap #siteMap .dep02_li			{border-bottom:#000 1px dotted}
#wrap.sitemap #siteMap .dep02_li:nth-last-of-type(1)	{border-bottom:none}
/* ============================== [05] SiteMap .End   ============================== */