@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}*/

.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_A #sect_2 #linkInSiteWrap			{width:calc(100% - 300px)}
#wrap.main.type_A #sect_3					{height:auto}
#wrap.main.type_A #photoListWrap				{height:auto}
#wrap.main.type_A #photoListWrap .li_photo .photoPreview	{height:150px}

#wrap.main.type_B #sect_1 #haksaSchedule			{width:calc(100% - 315px)}
#wrap.main.type_B #sect_1 #haksaSchedule .contArea		{width:calc(100% - 130px)}
#wrap.main.type_B #photoListWrap .li_photo			{display:none}
#wrap.main.type_B #photoListWrap .li_photo:nth-of-type(1)	{display:block; width:100%}

#wrap.main.type_C #sect_1 #noticeWrap				{float:none; width:100%; margin-right:0}
#wrap.main.type_C #sect_1 #haksaSchedule			{float:none; width:100%; margin-top:10px}
#wrap.main.type_C #sect_1 #haksaSchedule .schedule dl dt	{width:130px}
#wrap.main.type_C #sect_1 #haksaSchedule .schedule dl dd	{width:calc(100% - 130px)}
#wrap.main.type_C #sect_3					{height:auto}

#wrap.main.type_D #sect_licSch .innerWrap					{padding: 0}
#wrap.main.type_D #sect_licSch .myLic .linkWrap a			{display: inline-block; font-size: 0.8em; border: #000 1px solid; border-radius: 10px}
#wrap.main.type_D #sect_licSch .recLic						{padding: 20px}
#wrap.main.type_D #sect_licSch .recLic .linkWrap a			{font-size: 0.8em; border: #fff 1px solid; border-radius: 10px}

#wrap.type_F #sect_1 .innerWrap			{height: auto; grid-template-columns: 1fr; grid-template-rows: 260px;}
#wrap.main.type_F #noticeWrap .listSet		{padding: 20px}
#wrap.main.type_F #noticeWrap .title		{overflow: hidden;}
#wrap.main.type_F #noticeWrap .listSet .title a {width: 100%}

#wrap.main.type_F #haksaSchedule .contArea	{padding: 20px}

#wrap.main.type_F #sect_2 .a_link .link_text	{z-index: 1}
/*	========== [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.type_D #Contents #SNB					{width: 220px; margin-right: 10px}
#wrap.subPage.type_D #Contents #SNB .titleSNB		{font-size: 1.4rem}
#wrap.subPage.type_D #Contents #SNB .a_title		{padding-right: 15px}
#wrap.subPage.type_D #Contents #SNB .a_title.dep_2	{line-height: 40px; font-size: 1rem}
#wrap.subPage.type_D #Contents #SNB .a_title.dep_3	{line-height: 30px; font-size: 1rem}
#wrap.subPage.type_D #Contents #contWrap			{width:calc(100% - 230px)}


#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}

#wrap.type_F .stepBoxWrap				{display: block}
#wrap.type_F .stepBoxWrap li				{height: auto}
#wrap.type_F .stepBoxWrap li:after			{border-top: 20px solid #0e1c37; border-left: 20px solid transparent; border-right: 20px solid transparent; border-bottom: unset; bottom: -25px; left: 50%; top: unset; right: unset; transform: translate(-50%, 0);}
/*	========== [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 .nav_sitemap .li_menuSet.lev_1		{float: left; width: calc(33% - 10px); margin-right: 15px}
#wrap.sitemap .nav_sitemap .li_menuSet.lev_1:nth-of-type(4n)		{margin-right: 15px}
#wrap.sitemap .nav_sitemap .li_menuSet.lev_1:nth-of-type(4n+5)	{clear: none; float: left}
#wrap.sitemap .nav_sitemap .li_menuSet.lev_1:nth-of-type(3n)		{margin-right: 0}
#wrap.sitemap .nav_sitemap .li_menuSet.lev_1:nth-of-type(3n+4)	{clear: both; float: left}
/* ============================== [05] SiteMap .End   ============================== */
