@charset "utf-8";
@import url('sub.css');

#container			{ position: relative; }

.ui-main-visual		{ position: absolute; top: 44px; left: 0; right: 0; height: 555px; background: url('/resources/images/home/main/img_visual.png') no-repeat 50% 50% #f6f6f6; }
.ui-main-visual i	{ display:block; max-width: 1100px; margin: 0 auto; text-align: left; padding-top: 40px; }

#main_popup_box,
#latest_board,
#cal_banner,
#main_quick_banner		{ position: relative; width: 33.3%; float: left; height: 555px; }


#popup_slide,
#latest_board .tab-board,
#cal_banner > div			{ position: absolute; left: 50%; margin-left: -170px; bottom: 35px; width: 340px; height: 376px; overflow: hidden; }
#cal_banner > div			{ height: 235px; bottom: 170px; }
#cal_banner > div#main_quick_banner		{ height: 120px; bottom: 34px; }

@media all and (max-width: 1060px) {
	#main_popup_box		{ width: 36%; }
	#latest_board,
	#cal_banner,
	#main_quick_banner	{ width: 32%; }

	#latest_board .tab-board,
	#cal_banner > div			{ left: 5px; right: 5px; width: auto; margin-left: 0; }
}


#popup_slide			{ text-align: center; }
#popup_slide:after		{ content: ""; display: block; position: absolute; lefT: 0; right: 0; bottom: 0; height: 55px; background: rgba(0, 0, 0, 0.5); }

.po-direction-nav		{ display: none; }
.po-control-paging		{ display: inline-block; position: relative; margin-top: -22%; overflow: hidden; z-index: 10;  vertical-align: middle; height: 18px; }
.po-control-paging li	{ display: inline-block; padding: 0px 5px; }
.po-control-paging li a	{ display: block; width: 18px; height: 18px; overflow: hidden; text-indent: -999px; background: url('/resources/images/home/main/btn_main_popup_splite.png') no-repeat -24px 50%; }
.po-control-paging li a.po-active	{ background-position: 0 50%; }

.po-pauseplay			{ display: inline-block; position: relative; vertical-align: middle;margin-top: -22%; z-index: 10; }
.po-pauseplay a			{ display: block; overflow:hidden; text-indent: -999px; width: 18px; }
.po-pause				{ background: url('/resources/images/home/main/btn_main_popup_splite.png') no-repeat -144px 50%; }
.po-play				{ background: url('/resources/images/home/main/btn_main_popup_splite.png') no-repeat -124px 50%; }


#latest_board .tab-board					{ background: #ffffff; }
#latest_board .tab-board dt					{ position: absolute; top: 0; width: 28%; height: 45px; background: #ebebeb; line-height: 45px; text-align: center; }
#latest_board .tab-board dt:before			{ content: ""; display: block; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: #ebebeb; }
#latest_board .tab-board dt:after			{ content: ""; display: block; position: absolute; top: 0; right: 0; bottom: 0; width: 1px; background: #fff; }
#latest_board .tab-board dt a				{ display: block; font-weight: 800; }
#latest_board .tab-board dl.on dt			{ background: #fff; }
#latest_board .tab-board dl.on dt:before	{ background: #266fb9; }
#latest_board .tab-board dl + dl dt			{ left: 28%; }
#latest_board .tab-board dl + dl + dl dt	{ left: 56%; }

#latest_board .tab-board dl dd		{ display: none; margin-top: 45px; width: 100%; }
#latest_board .tab-board dl.on dd	{ display: block; }

#latest_board .tab-board .btn-more		{ display: Block; position: absolute; width: 16%; height: 45px; right: 0; top: 0; text-indent: -999px; background: url('/resources/images/home/main/btn-more.png') no-repeat 50% 50% #ebebeb; }

#latest_board .tab-board li					{ position: relative; height: 55px; }
#latest_board .tab-board li:nth-child(even)	{ background: #f0f0f0; }

#latest_board .tab-board li a	{ display: block; font-family: 'Dotum'; coloR: #727272; font-weight: bold; padding: 15px 30px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.2em; }
#latest_board .tab-board li a span	{ display: block; color: #9e9e9e; font-weight: normal; }
#latest_board .tab-board li > span	{ display: block; font-family: 'Dotum'; color: #9e9e9e; padding: 0px 30px; line-height: 1.2em; }

#cal_banner	> div	{ background: url('/resources/images/home/main/bak_main_cal.png') no-repeat 0 0; }
#cal_banner .style-pannel	{ position: relative; width: 50%; float: right; height: 100%; background: rgba(70, 102, 166, 0.9); color: #fff; padding: 15px; box-sizing: border-box; }
#cal_banner .style-pannel:before	{ content: ""; display: Block; position: absolute; top: 50%; left: -34px; margin-top: -17px; border: 17px solid transparent; border-right-color: rgba(70, 102, 166, 0.9); }
#cal_banner .style-pannel i,
#cal_banner .style-pannel em		{ font-style: normal; }
#cal_banner .style-pannel .date		{ color: #bbc7de; }
#cal_banner .style-pannel .date strong	{ color: #fff; }
#cal_banner .style-pannel em		{ display: block; position: relative; padding: 15px 0; text-align: center; line-height: 1.0em; color: #fff; font-size: 55px; border-bottom: 1px solid #7a91bf; }
#cal_banner .style-pannel ul		{ display: block; padding: 10px 0; }
#cal_banner .style-pannel ul a		{ color: #fff; font-weight: normal; font-family: 'Dotum'; font-size: 12px; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

#cal_banner	> div#main_quick_banner		{ padding: 20px 30px; background: url('/resources/images/home/main/bak_main_banner.png') no-repeat 0 0; box-sizing: border-box; }
#cal_banner	> div#main_quick_banner p	{ color: #6fe3fc; line-height: 1.4em; }
#cal_banner	> div#main_quick_banner p.big	{ color: #fefefe; font-size: 25px; letter-spacing: -1px; margin-bottom: 0px; }
#cal_banner	> div#main_quick_banner a		{ display: inline-block; position: relative; background: rgba(0, 0, 0, 0.5); color: #fff; padding: 5px 25px 5px 10px; font-weight: normal; }
#cal_banner	> div#main_quick_banner a:after	{ content: ">"; position: absolute; right: 10px; top: 50%; margin-top: -11px; color: #5291be; }


#quick_link		{ clear: both; overflow: hidden; padding: 35px 0; }
#quick_link > a	{ display: block; position: relative; float: left; width: 9.09%; height: 95px; text-align: center; }
#quick_link > a:before	{ content: ""; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border: 1px solid #cccccc; border-left-width: 0px; }
#quick_link > a:first-child:before	{ border-left-width: 1px; }
#quick_link > a:after	{ content: ""; display: block; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: #779e2c; }
#quick_link > a span	{ display: block; position: absolute; bottom: 15px; left: 0; right: 0; text-align: center; color: #5b5b5b; font-weight: bold; }
#quick_link > a:hover span	{ color: #597c13; }
#quick_link > a i		{ display: block; position: absolute; width: 40px; height: 40px; top: 20px; left: 50%; margin-left: -20px; background: url('/resources/images/home/main/ico_main_quick_off.png') no-repeat 0 50%; }
#quick_link > a:hover i	{ background-image: url('/resources/images/home/main/ico_main_quick_on.png'); }

#quick_link > a#quick_link_01 i	{ background-position: 6px 50%; }
#quick_link > a#quick_link_02 i	{ background-position: -91px 50%; }
#quick_link > a#quick_link_03 i	{ background-position: -193px 50%; }
#quick_link > a#quick_link_04 i	{ background-position: -293px 50%; }
#quick_link > a#quick_link_05 i	{ background-position: -393px 50%; }
#quick_link > a#quick_link_06 i	{ background-position: -495px 50%; }
#quick_link > a#quick_link_07 i	{ background-position: -593px 50%; }
#quick_link > a#quick_link_08 i	{ background-position: -694px 50%; }
#quick_link > a#quick_link_09 i	{ background-position: -794px 50%; }
#quick_link > a#quick_link_10 i	{ background-position: -893px 50%; }
#quick_link > a#quick_link_11 i	{ background-position: -994px 50%; }
#quick_link > a#quick_link_12 i	{ background-position: -1065px 50%; }
#quick_link > a#quick_link_12	{ display: none; }

#side_link		{ clear: both; overflow: hidden; padding: 35px 0; }
#side_link > a	{ display: block; position: relative; float: left; width: 11.11%; height: 95px; text-align: center; background: #858585; margin-bottom: 1px; }
#side_link > a:hover	{ background: #2d9a84; }
#side_link > a:before	{ content: ""; display: block; position: absolute; top: 0; bottom: 0; left: 0; width: 1px; background: #fff; }
#side_link > a span	{ display: block; position: absolute; bottom: 15px; left: 0; right: 0; text-align: center; color: #fff; font-weight: bold; }
#side_link > a i		{ display: block; position: absolute; width: 50px; height: 40px; top: 15px; left: 50%; margin-left: -25px; background: url('/resources/images/home/main/ico_main_sidelink.png') no-repeat 0 50%; }

#side_link > a#side_link_01 i	{ background-position: 1px 50%; }
#side_link > a#side_link_02 i	{ background-position: -122px 50%; }
#side_link > a#side_link_03 i	{ background-position: -246px 50%; }
#side_link > a#side_link_04 i	{ background-position: -367px 50%; }
#side_link > a#side_link_05 i	{ background-position: -488px 50%; }
#side_link > a#side_link_06 i	{ background-position: -612px 50%; }
#side_link > a#side_link_07 i	{ background-position: -735px 50%; }
#side_link > a#side_link_08 i	{ background-position: -857px 50%; }
#side_link > a#side_link_09 i	{ background-position: -977px 50%; }
#side_link > a#side_link_10 i	{ background-position: -1057px 50%; }
#side_link > a#side_link_10		{ display: none; }


#board_webzine_list					{ margin: 0 -10px; }
#board_webzine_list li				{ position: relative; width: 20%; float: left; }
#board_webzine_list li a			{ display: block; padding: 10px; font-family: 'Dotum'; }
#board_webzine_list li a:before		{ content: ""; display: block; position: absolute; top: 10px; left: 10px; right: 10px; bottom: 10px; border: 1px solid #c5c5c5; }
#board_webzine_list li a:after		{ content: ""; display: block; position: absolute; top: 10px;; left: 10px;; right: 10px; height: 4px; }

#board_webzine_list li .ui-thumb						{ position: absolute; top: 10px; left: 10px; right: 10px; height: 158px; border: 1px solid #c5c5c5; z-index: 1; overflow: hidden; }
#board_webzine_list li .ui-thumb img					{ display: block; min-height: 100%; max-width: 400%; min-width: 100%; }

#board_webzine_list li i		{ display: block; position: absolute; top: 40px; left: 50%; margin-left: -27px; width: 55px; height: 55px; border-radius: 9.0em; background: url('/resources/images/home/main/ico-main-content.png') no-repeat 50% 50%; z-index: 2; }

#board_webzine_list li .contents						{ margin-top: 106px; height: 211px; margin-left: 15px; margin-right: 15px; margin-bottom: 15px; overflow: hidden; }
#board_webzine_list li .contents p.title				{ font-weight: bold; color: #444444; line-height: 1.2em; margin-bottom: 15px; }
#board_webzine_list li .ui-thumb + i					{ top: 141px; }
#board_webzine_list li .ui-thumb + i + .contents		{ margin-top: 192px; height: 115px; }

#board_webzine_list li:first-child a:after,	
#board_webzine_list li:first-child i { background-color: #2b52b1; }
#board_webzine_list li:first-child + li a:after,	
#board_webzine_list li:first-child + li i { background-color: #3c9102; }
#board_webzine_list li:first-child + li + li a:after,	
#board_webzine_list li:first-child + li + li i { background-color: #0a947b; }
#board_webzine_list li:first-child + li + li + li a:after,	
#board_webzine_list li:first-child + li + li + li i { background-color: #6c37a7; }
#board_webzine_list li:first-child + li + li + li + li a:after,	
#board_webzine_list li:first-child + li + li + li + li i { background-color: #098ab2; }





@media all and (max-width: 1000px) {
	/* Tablete Size */
	.ui-main-visual i		{ max-width: 768px; padding-top: 50px; }
	#popup_slide, #latest_board .tab-board, #cal_banner > div	{ bottom: 0; }
	.ui-main-visual	{ top: 0; }
	.fix-layout		{ max-width: 768px; }
	#main_popup_box, #latest_board { width: 50%; }
	
	#popup_slide	{ left: 0; margin-left: 0; width: 370px;  }
	#popup_slide img	{ width: 100%; }
	.po-control-paging,.po-pauseplay	{ margin-top: -38%; }

	#latest_board .tab-board { max-width: 370px; right: 0; left: auto; width: 100%; }
	#cal_banner	{ clear: both; width: 100%; height: 130px; padding: 20px 0 0; float: none; overflow: hidden; }
	#cal_banner > div, 
	#cal_banner > div#main_quick_banner { position: absolute; width: 370px; height: 100%; top: auto; left: auto; bottom: auto; right: auto; background-size: cover; }
	#cal_banner > div#main_quick_banner	{ left: auto; right: 0; }

	#cal_banner .style-pannel			{ float: none; width: 100%; padding-left: 50%; }
	#cal_banner .style-pannel:before	{ display: none; }
	#cal_banner .style-pannel .date,
	#cal_banner .style-pannel em	{ position: absolute; top: 20px; left: 20px; right: 50%; border-bottom: 0; }
	#cal_banner .style-pannel em	{ top: 30px; }
	#cal_banner .style-pannel ul {  }

	#quick_link > a	{ width: 16.6%; }
	#quick_link > a#quick_link_12	{ display: block; }
	#quick_link > a:first-child:before	{ border-left-width: 0px; }
	#quick_link		{ border-left: 1px solid #cccccc; padding: 0; margin: 35px 0; }

	#side_link > a	{ width: 20%; }
	#side_link > a#side_link_10		{ display: block; }

	#board_webzine_list li	{ width: 33.3%; }
}

@media all and (max-width: 780px) {
	.ui-main-visual			{ height: 125px; }
	.ui-main-visual i		{ max-width: 340px; padding-top: 0; line-height: 125px; }
	.fix-layout		{ max-width: 340px; padding: 0 10px; }

	#main_popup_box, #latest_board	{ width: 100%; float: none; height: auto; }
	#popup_slide, #latest_board .tab-board, #cal_banner > div	{ position: relative; height: auto; }

	#main_popup_box	{ padding-top: 145px; }
	#popup_slide	{ width: auto; max-height: 375px; }
	.po-control-paging, .po-pauseplay	{ position: absolute; bottom: 17px; left: 10px; margin-top: 0; }
	.po-pauseplay	{ left: auto; right: 10px; }

	#latest_board	{ margin-top: 20px; }
	#cal_banner	{ height: auto; }
	#cal_banner > div, #cal_banner > div#main_quick_banner	{ position: relative; width: 100%; margin-top: 20px; float: none; }

	#quick_link > a	{ width: 33.3%; }

	#side_link > a	{ width: 33.3%; }
	#side_link > a#side_link_10		{ display: none; }

	#board_webzine_list li	{ width: 50%; }
	#board_webzine_list li .ui-thumb	{ display: none; }
	#board_webzine_list li p	{ display: none; }
	#board_webzine_list li p.title	{ display: block; }
	#board_webzine_list li .ui-thumb + i				{ top: 40px; }
	#board_webzine_list li .contents,
	#board_webzine_list li .ui-thumb + i + .contents	{ margin-top: 106px; height: 65px; }

}