@charset "UTF-8";


#container.main	{ clear: both; }
#container.main #section	{ clear: both; }
#container.main #section #contents	{ clear: both; width: 100%; height: 100%; }



#container.main .section_1	{ position: relative; }
#container.main .section_1 .align_1	{}


#container.main .main_visule	{ clear: both; }
#container.main .main_visule h2	{ position: absolute; width: 0; height: 0; font-size: 0; overflow: hidden; }
#container.main .main_visule .list	{ position: relative; height: 600px; }
#container.main .main_visule .list div,
#container.main .main_visule .list a	{ display: block !important; position: relative; width: 100%; height: 100%; padding: 0; margin: 0; border: 0 none; background: #eaeaea no-repeat center center; background-size: cover; text-align: left; text-indent: -99999px; overflow: hidden; }
#container.main .main_visule .list .empty	{ background: #e1e7f3 url(../image/main_visual.jpg) no-repeat center center; background-size: cover; }

#container.main .main_visule .list .slick-prev	{ position: absolute; left: 50%; top: 0; z-index: 5; width: 30px; height: 100%; padding: 0; margin: 0 0 0 -640px; border: 0 none; background: url(../image/main_visual_arrow_left1.png) no-repeat center center; font-family: serif; text-align: left; text-indent: -99999px; overflow: hidden; }
#container.main .main_visule .list .slick-prev:focus, #container.main .main_visule .list .slick-prev:hover, #container.main .main_visule .list .slick-prev:active	{ background-color: rgba(0, 0, 0, 0.5); background-image: url(../image/main_visual_arrow_left2.png); box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); }
#container.main .main_visule .list .slick-next	{ position: absolute; right: 50%; top: 0; z-index: 5; width: 30px; height: 100%; padding: 0; margin: 0 -640px 0 0; border: 0 none; background: url(../image/main_visual_arrow_right1.png) no-repeat center center; font-family: serif; text-align: left; text-indent: -99999px; overflow: hidden; }
#container.main .main_visule .list .slick-next:focus, #container.main .main_visule .list .slick-next:hover, #container.main .main_visule .list .slick-next:active	{ background-color: rgba(0, 0, 0, 0.5); background-image: url(../image/main_visual_arrow_right2.png); box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); }

#container.main .main_visule .list .slick-dots	{ position: absolute; left: 50%; top: 50%; z-index: 5; padding: 0; margin: 53px 0 0 -540px; list-style: none; }
#container.main .main_visule .list .slick-dots:after	{ display: block; clear: both; content: ""; }
#container.main .main_visule .list .slick-dots li	{ float: left; padding: 0; margin: 0 12px 0 0; list-style: none; }
#container.main .main_visule .list .slick-dots li button	{ width: 10px; height: 10px; padding: 0; margin: 0; border: 0 none; border-radius: 100%; background: #fff; text-align: left; text-indent: -9999px; overflow: hidden; box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); vertical-align: middle; }
#container.main .main_visule .list .slick-dots li.slick-active button	{ background-color: #5a77ad; }
#container.main .main_visule .list .slick-dots li.play_stop_button button	{ width: 1em; height: 1em; padding: 0; margin: 0; border-radius: 0; background: transparent; text-align: center; text-indent: 0; font-size: 20px; color: #fff; font-size: 13px; text-shadow: 0 0 5px rgba(0, 0, 0, 0.5); box-shadow: none; }


#container.main .sitelink	{ position: absolute; z-index: 5; left: 50%; bottom: 40px; min-width: 435px; margin-left: -550px; border-radius: 15px; background-color: #fff; overflow: hidden; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); }
#container.main .sitelink h2	{ line-height: 46px; margin: 0; background-color: #2b66d2; text-align: center; font-size: 18px; font-weight: normal; color: #fff; }
#container.main .sitelink ul	{ display: flex; padding: 0; margin: 0; list-style: none; }
#container.main .sitelink ul li	{ flex: 1; padding: 0; margin: 0; list-style: none; }
#container.main .sitelink ul li a	{ display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 10px; height: 110px; line-height: 1.1; font-size: 16px; }
#container.main .sitelink ul li a:before	{ display: block; width: 40px; height: 40px; background: no-repeat center center; background-size: contain; content: ""; }
#container.main .sitelink ul li:nth-child(1) a:before	{ background-image: url(../image/main_sitelink_1.png); }
#container.main .sitelink ul li:nth-child(2) a:before	{ background-image: url(../image/main_sitelink_2.png); }
#container.main .sitelink ul li:nth-child(3) a:before	{ background-image: url(../image/main_sitelink_3.png); }
#container.main .sitelink ul li a span	{ display: block; text-align: center; }
#container.main .sitelink ul li a:focus, #container.main .sitelink ul li a:hover, #container.main .sitelink ul li a:active	{ background-color: #f0f0f0; color: #000; }


#container.main .section_2	{ margin: 45px 0; }
#container.main .section_2 .align_2	{ max-width: 1280px; margin: 0 auto; }
#container.main .section_2 .align_2:after	{ display: block; clear: both; content: ""; }


#container.main .board	{ position: relative; float: left; width: calc(50% - 20px); min-height: 320px; border-radius: 15px; background-color: #273594; overflow: hidden; }
#container.main .board h2	{ float: left; width: 22%; padding: 16px 0 0 0; margin: 0; font-weight: normal; }
#container.main .board h2:first-child	{ padding-left: 23px; }
#container.main .board h2 a	{ display: block; height: 48px; line-height: 48px; text-align: center; font-size: 18px; color: #fff; }
#container.main .board h2 a:focus, #container.main .board h2 a:hover, #container.main .board h2 a:active	{ border-radius: 15px 15px 0 0; background-color: rgba(255, 255, 255, 0.5); color: #000; }
#container.main .board h2 a.active	{ border-radius: 15px 15px 0 0; background-color: #fff; color: #273594; }
#container.main .board .list	{ display: none; line-height: 38px; }
#container.main .board .list.active	{ display: block; position: absolute; left: 0; top: 64px; width: 100%; height: calc(100% - 64px); border-width: 0 2px 2px 2px; border-style: solid; border-color: #e5e5e5; border-radius: 0 0 15px 15px; box-sizing: border-box; background-color: #fff; }
#container.main .board .list ul	{ padding: 37px 35px 0 30px; margin: 0; list-style: none; }
#container.main .board .list ul li	{ padding: 0; margin: 0; list-style: none; }
#container.main .board .list ul li a	{ position: relative; display: block; padding: 0 8em 0 20px; font-size: 17px; }
#container.main .board .list ul li a:before	{ position: absolute; left: 0; top: 50%; width: 2px; height: 2px; margin-top: -1px; background-color: #5a65ad; content: ""; }
#container.main .board .list ul li a .title	{ display: block; font-weight: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#container.main .board .list ul li a .date	{ position: absolute; right: 0; top: 0; }
#container.main .board .list ul li a br	{ display: none; }
#container.main .board .list .more	{ position: absolute; right: -2px; top: -64px; width: 64px; height: 64px; line-height: 64px; text-align: left; color: #fff; text-indent: -9999px; overflow: hidden; }
#container.main .board .list .more:before	{ position: absolute; left: 0; top: 0; width: 100%; text-align: center; text-indent: 0; font-weight: normal; font-family: serif; font-size: 30px; content: "+"; }
#container.main .board .list .more:focus, #container.main .board .list .more:hover, #container.main .board .list .more:active	{ background-color: rgba(255, 255, 255, 0.5); color: #000; }


#container.main .popupzone2	{ position: relative; float: right; width: calc(50% - 20px); min-height: 320px; border-radius: 15px; background-color: #fff; overflow: hidden; }
#container.main .popupzone2 h2	{ height: 63px; line-height: 61px; padding: 0 0 0 28px; margin: 0; border-width: 2px 2px 0 2px; border-style: solid; border-color: #e5e5e5; border-radius: 15px 15px 0 0; box-sizing: border-box; font-size: 24px; color: #333; font-weight: 600; }
#container.main .popupzone2 .list	{ position: absolute; width: 100%; height: calc(100% - 63px); border-radius: 0 0 15px 15px; background-color: #fff; }
#container.main .popupzone2 .list .slick-prev	{ position: absolute; right: 80px; top: -46px; width: 30px; height: 30px; padding: 0; margin: 0; border: 0 none; background-color: #fff; color: #333; text-align: left; text-indent: -9999px; overflow: hidden; }
#container.main .popupzone2 .list .slick-prev:after	{ position: absolute; left: 0; top: 0; width: 100%; line-height: 30px; text-align: center; text-indent: 0; font-family: serif; fotn-size: 20px; content: "<"; }
#container.main .popupzone2 .list .slick-prev:focus, #container.main .popupzone2 .list .slick-prev:hover, #container.main .popupzone2 .list .slick-prev:active	{ background-color: rgba(0, 0, 0, 0.5); color: #fff; }
#container.main .popupzone2 .list .slick-next	{ position: absolute; right: 50px; top: -46px; width: 30px; height: 30px; padding: 0; margin: 0; border: 0 none; background-color: #fff; color: #333; text-align: left; text-indent: -9999px; overflow: hidden; }
#container.main .popupzone2 .list .slick-next:after	{ position: absolute; left: 0; top: 0; width: 100%; line-height: 30px; text-align: center; text-indent: 0; font-family: serif; fotn-size: 20px; content: ">"; }
#container.main .popupzone2 .list .slick-next:focus, #container.main .popupzone2 .list .slick-next:hover, #container.main .popupzone2 .list .slick-next:active	{ background-color: rgba(0, 0, 0, 0.5); color: #fff; }
#container.main .popupzone2 .list .play_stop	{ position: absolute; right: 20px; top: -46px; width: 30px; height: 30px; padding: 0; margin: 0; border: 0 none; background-color: #fff; color: #333; text-align: center; font-family: serif; fotn-size: 20px; }
#container.main .popupzone2 .list .play_stop:focus, #container.main .popupzone2 .list .play_stop:hover, #container.main .popupzone2 .list .play_stop:active	{ background-color: rgba(0, 0, 0, 0.5); color: #fff; }
#container.main .popupzone2 .list .slick-dots	{ position: absolute; right: 130px; top: -46px; line-height: 30px; padding: 0; margin: 0; list-style: none; }
#container.main .popupzone2 .list .slick-dots li	{ display: none; padding: 0; margin: 0; list-style: none; }
#container.main .popupzone2 .list .slick-dots li.slick-active	{ display: block; }
#container.main .popupzone2 .list .slick-dots li button	{ cursor: default; height: 30px; padding: 0; margin: 0; border: 0 none; background-color: transparent; color: #888; font-size: 16px; font-weight: normal; vertical-align: top; }
#container.main .popupzone2 .list .slick-dots li button span	{ color: #333; }
#container.main .popupzone2 .list div,
#container.main .popupzone2 .list a	{ display: block !important; position: relative; width: 100%; height: 100%; text-align: left; text-indent: -99999px; overflow: hidden; background: #e5e5e5 no-repeat center center; background-size: contain; }
#container.main .popupzone2 .empty	{ line-height: 10em !important; text-align: center !important; text-indent: 0 !important; }


#container.main .section_3	{ margin: 45px 0; }
#container.main .section_3 .align_3	{ max-width: 1280px; margin: 0 auto; }


#container.main .link1	{}
#container.main .link1 h2	{ position: absolute; width: 0; height: 0; font-size: 0; overflow: hidden; }
#container.main .link1 ul	{ position: relative; padding: 0 82px; margin: 0; list-style: none; }
#container.main .link1 ul:after	{ display: block; clear: both; content: ""; }
#container.main .link1 ul li	{ padding: 0; margin: 0; list-style: none; }
#container.main .link1 ul li a	{ position: relative; display: block; width: 100%; height: 0; padding-top: 127.9569%; color: #080808; }
#container.main .link1 ul li a:before	{ position: absolute; left: 0; top: 0; width: 100%; height: 83.193%; background: url(../image/main_link1_0.png) no-repeat center center; content: ""; }
#container.main .link1 ul li a:before	{ left: 50%; width: 75%; background-size: contain; -webkit-transform: translate(-50%, 0%); -ms-transform: translate(-50%, 0%); transform: translate(-50%, 0%); }
#container.main .link1 ul li a span	{ position: absolute; left: 0; bottom: 10.5%; display: block; width: 100%; line-height: 1.55em; text-align: center; font-size: 18px; }
#container.main .link1 ul li a:focus, #container.main .link1 ul li a:hover, #container.main .link1 ul li a:active	{ background-color: #f0f0f0; }
#container.main .link1 ul li a.icon1:before	{ background-image: url(../image/main_link1_1.png); }
#container.main .link1 ul li a.icon2:before	{ background-image: url(../image/main_link1_2.png); }
#container.main .link1 ul li a.icon3:before	{ background-image: url(../image/main_link1_3.png); }
#container.main .link1 ul li a.icon4:before	{ background-image: url(../image/main_link1_4.png); }
#container.main .link1 ul li a.icon5:before	{ background-image: url(../image/main_link1_5.png); }
#container.main .link1 ul li a.icon6:before	{ background-image: url(../image/main_link1_6.png); }
#container.main .link1 ul .slick-prev	{ position: absolute; left: 0; top: 50%; width: 60px; height: 60px; padding: 0; margin: -30px 0 0 0; border: 0 none; border-radius: 100%; background-color: #f4f4f4; color: #0c0c0c; text-align: left; text-indent: -9999px; overflow: hidden; }
#container.main .link1 ul .slick-prev:after	{ position: absolute; left: 0; top: 0; width: 100%; line-height: 60px; text-align: center; text-indent: -17px; font-family: serif; font-size: 30px; font-weight: bold; content: "〈"; }
#container.main .link1 ul .slick-prev:focus, #container.main .link1 ul .slick-prev:hover, #container.main .link1 ul .slick-prev:active	{ background-color: #666; color: #fff; }
#container.main .link1 ul .slick-next	{ position: absolute; right: 0; top: 50%; width: 60px; height: 60px; padding: 0; margin: -30px 0 0 0; border: 0 none; border-radius: 100%; background-color: #f4f4f4; color: #0c0c0c; text-align: left; text-indent: -9999px; overflow: hidden; }
#container.main .link1 ul .slick-next:after	{ position: absolute; left: 0; top: 0; width: 100%; line-height: 60px; text-align: center; text-indent: 15px; font-family: serif; font-size: 30px; font-weight: bold; content: "〉"; }
#container.main .link1 ul .slick-next:focus, #container.main .link1 ul .slick-next:hover, #container.main .link1 ul .slick-next:active	{ background-color: #666; color: #fff; }


#container.main .section_4	{ padding: 50px 0 108px 0; background-color: #e4f1ef; }
#container.main .section_4 .align_4	{ max-width: 1280px; margin: 0 auto; }


#container.main .link2	{}
#container.main .link2 h2	{ position: absolute; width: 0; height: 0; font-size: 0; overflow: hidden; }
#container.main .link2 ul	{ position: relative; padding: 0; margin: 0 -11px; list-style: none; }
#container.main .link2 ul:after	{ display: block; clear: both; content: ""; }
#container.main .link2 ul li	{ float: left; width: 25%; padding: 0 11px; margin: 0; list-style: none; box-sizing: border-box; }
#container.main .link2 ul li a	{ position: relative; display: block; height: 165px; padding: 19px 0 0 130px; border-radius: 15px; box-sizing: border-box; background-color: #666; color: #fff; }
#container.main .link2 ul li a:before	{ position: absolute; left: 0; top: 0; width: 130px; height: 100%; background: no-repeat center center; content: ""; }
#container.main .link2 ul li a:after	{ display: inline-block; line-height: 26px; padding: 0 25px; margin: 15px 0 0 -5px; border-radius: 26px; background-color: #111111; color: #fff; font-size: 13px; content: "바로가기"; }
#container.main .link2 ul li a strong	{ display: block; line-height: 45px; font-size: 21px; font-weight: 500; letter-spacing: -1px; }
#container.main .link2 ul li a > span	{ display: block; line-height: 17px; font-size: 16px; color: #000; }
#container.main .link2 ul li a > span span	{ display: block; }
#container.main .link2 ul li:nth-child(1) a	{ background-color: #2a5ac3; }
#container.main .link2 ul li:nth-child(2) a	{ background-color: #3997d0; }
#container.main .link2 ul li:nth-child(3) a	{ background-color: #0da39a; }
#container.main .link2 ul li:nth-child(4) a	{ background-color: #7260e6; }
#container.main .link2 ul li:nth-child(1) a:before	{ background-image: url(../image/main_link2_1.png); }
#container.main .link2 ul li:nth-child(2) a:before	{ background-image: url(../image/main_link2_2.png); }
#container.main .link2 ul li:nth-child(3) a:before	{ background-image: url(../image/main_link2_3.png); }
#container.main .link2 ul li:nth-child(4) a:before	{ background-image: url(../image/main_link2_4.png); }
#container.main .link2 ul li a:focus, #container.main .link2 ul li a:hover, #container.main .link2 ul li a:active	{ background-color: #666; color: #fff; }


body.menu_design_main #footer	{ margin-top: 0; }



@media all and ( max-width: 1280px )
{
	#container.main .main_visule	{ position: relative; height: 0; padding-top: 46.875%; }
	#container.main .main_visule .list	{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
	
	#container.main .sitelink	{ left: 7.03125%; bottom: 6.666%; margin-left: 0; }
}

@media all and ( max-width: 768px )
{
	#container.main .sitelink	{ position: static; min-width: 0; margin: 10px; }
	
	#container.main .section_2	{ margin: 10px; }
	
	#container.main .board	{ float: none; width: auto; margin-bottom: 10px; }
	#container.main .popupzone2	{ float: none; width: auto; max-width: 620px; margin: 0 auto; }
	
	#container.main .section_3	{ margin: 10px 0; }
	
	#container.main .section_4	{ padding: 10px; }
	
	#container.main .link2 ul	{ margin: -5px; }
	#container.main .link2 ul li	{ width: 50%; padding: 5px; }
}

@media all and ( max-width: 620px )
{
	#container.main .link2 ul li	{ width: 100%; }
}

@media all and ( max-width: 425px )
{
	#container.main .sitelink ul li a	{ font-size: 14px }
	#container.main .sitelink ul li a:before	{ width: 50px; height50px; margin-right: 5px; }
	
	#container.main .board h2	{ width: 25%; }
	#container.main .board h2:first-child	{ padding-left: 5px; }
	#container.main .board h2 a	{ font-size: 16px; }
	#container.main .board .list ul	{ padding: 30px 10px 0 10px; }
	#container.main .board .list ul li a	{ padding: 0 6em 0 10px; }
	
	#container.main .link1 ul li a span	{ bottom: 0; }
}