@charset "UTF-8"; @import url(//fonts.googleapis.com/earlyaccess/notosanskr.css); body { width: 100%; height: 100%; padding: 0; margin: 0; font-size: 18px; font-family: 'Noto Sans KR', NanumGothic,"Malgun Gothic","맑은 고딕","돋움",Dotum,"굴림",Gulim,Helvetica,AppleGothic,Sans-serif; } *, .modules_board .proc_read .read_content * { font-family: 'Noto Sans KR', NanumGothic,"Malgun Gothic","맑은 고딕","돋움",Dotum,"굴림",Gulim,Helvetica,AppleGothic,Sans-serif !important; } body.popup_box { position: relative; width: auto; height: auto; margin: 0; padding: 20px; background-color: #f2f3f7; } body.popup_box:before { position: absolute; left: 0; top: 0; z-index: 0; width: 100%; height: 100px; background-color: #084d98; content: ""; } body.popup_box .contents_content { position: relative; z-index: 1; padding: 20px; margin-top: 65px; background-color: #fff; } body.popup_box .contents_content h3:first-child { position: absolute; left: 0; top: -65px; width: 100%; line-height: 60px; padding: 0; margin: 0 !important; background: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #000; text-indent: 20px; } body.popup_box .contents_content *:nth-child(2) { margin-top: 0 !important; } .skip_area { position: absolute; left: 0; top: 0; z-index: 99999; width: 100%; height: 0px; overflow: hidden; } .skip_area a { display: block; line-height: 30px; padding: 0 0 0 20px; color: #000; text-decoration: none; font-weight: bold; font-size: 13px; border: 1px solid #ddd; background-color: #fafafa; } hr.linebreak { display: none; } #jump_menu { width: 100%; z-index: 9999999; } #jump_menu h1 { display: block; width: 0; height: 0; padding: 0; margin: 0; overflow: hidden; font-size: 0; position: absolute; } #jump_menu ul, #jump_menu li { position: relative; padding: 0; margin: 0; list-style: none; } #jump_menu a { position: absolute; z-index: -1; left: 0; top: -1000px; display: block; width: 100%; line-height: 45px; text-align: center; font-weight: bold; font-size: 20px; color: #fff; background-color: #3e6dbf; } #jump_menu a:focus { top: 0; z-index: 99999; } #body {} /** HEADER **/ #header { height: 135px; } #header header { position: fixed; left: 0; top: 0; z-index: 91; width: 100%; background-color: #fff; } #header header.scrolled { box-shadow: 0 5px 5px rgba(0, 0, 0, 0.5); } #header.over header.scrolled { box-shadow: none; } #header header h1 { position: relative; max-width: 1200px; margin: 0 auto; } #header header h1 a { position: absolute; left: 0; top: 45px; z-index: 92; width: 250px; height: 90px; background: url(../image/header_logo.png) no-repeat center center; text-align: left; text-indent: -999px; overflow: hidden; } #header header p.slogan { position: absolute; width: 0; height: 0; font-size: 0; overflow: hidden; } #GNB {} #GNB .top { line-height: 44px; border-bottom: 1px solid #ececec; background-color: #f9f9f9; color: #000; } #GNB .top .align_box { position: relative; max-width: 1200px; margin: 0 auto; } #GNB .top .align_box:after { display: block; clear: both; content: ""; } #GNB .top nav { float: right; } #GNB .top nav ul { float: left; padding: 0; margin: 0; list-style: none; } #GNB .top nav ul li { position: relative; float: left; padding: 0; margin: 0; list-style: none; } #GNB .top nav ul li:nth-child(1), #GNB .top nav ul li:nth-child(2) { position: static; } #GNB .top nav ul li:after { position: absolute; right: 0; top: 50%; width: 1px; height: 16px; margin-top: -8px; background-color: #1b1b1b; content: ""; } #GNB .top nav ul li:nth-child(1):after, #GNB .top nav ul li:nth-child(2):after, /* #GNB .top nav ul li:nth-child(3):after, */ #GNB .top nav ul li:last-child:after { content: none; } #GNB .top nav ul li a { display: block; padding: 0 18px; font-size: 16px; } #GNB .top nav ul li a:focus, #GNB .top nav ul li a:hover, #GNB .top nav ul li a:active { font-weight: 500; text-decoration: underline; } #GNB .top nav ul li a.welfaremap { height: 28px; line-height: 26px; padding: 0 12px; margin-top: 7px; border: 1px solid #a77b80; background-color: #ffc12c; color: #111; vertical-align: middle; } #GNB .top nav ul li a.welfaremap:before { display: inline-block; width: 25px; height: 16px; background: url(../image/welmap.png) no-repeat 0 center; vertical-align: middle; content: ""; } #GNB .top nav ul li a.welfaremap:focus, #GNB .top nav ul li a.welfaremap:hover, #GNB .top nav ul li a.welfaremap:active { background-color: #ffff66; text-decoration: none; } #GNB .top nav ul li a.donation { position: absolute; right: 0; top: 70px; z-index: 92; height: 40px; line-height: 38px; width: 143px; border-radius: 40px; box-sizing: border-box; background-color: #0e5eb4; text-align: center; font-size: 18px; color: #fff; font-weight: 500; } #GNB .top nav ul li a.donation:before { display: inline-block; width: 30px; height: 24px; background: url(../image/header_donation.png) no-repeat 0 center; vertical-align: middle; content: ""; } #GNB .top nav ul li a.donation:focus, #GNB .top nav ul li a.donation:hover, #GNB .top nav ul li a.donation:active { background-color: #333; color: #fff; text-decoration: none; } #GNB .top nav ul li a.donation_check { height: 28px; line-height: 26px; padding: 0 12px; margin-top: 7px; margin-left: 6px; border: 1px solid #a77b80; background-color: #eb6877; color: #fff; vertical-align: middle; } #GNB .top nav ul li a.donation_check:before { display: inline-block; width: 25px; height: 16px; background: url(../image/header_donation_check.png) no-repeat 0 center; vertical-align: middle; content: ""; } #GNB .top nav ul li a.donation_check:focus, #GNB .top nav ul li a.donation_check:hover, #GNB .top nav ul li a.donation_check:active { background-color: #a77b80; text-decoration: none; } #GNB .top nav ul li a.donation_with { height: 28px; line-height: 26px; padding: 0 15px; margin-top: 7px; margin-left: 6px; border: 1px solid #24552f; background-color: #6eb77f; color: #fff; vertical-align: middle; } #GNB .top nav ul li a.donation_with:before { display: inline-block; width: 30px; height: 16px; background: url(../image/header_donation_with4.png) no-repeat 0 center; vertical-align: middle; content: ""; } #GNB .top nav ul li a.donation_with:focus, #GNB .top nav ul li a.donation_with:hover, #GNB .top nav ul li a.donation_with:active { background-color: #24552f; text-decoration: none; } #GNB #topmenu { /*border-bottom: 1px solid #0f5ea3;*/ } #topmenu nav { position: relative; z-index: 91; max-width: 1200px; margin: 0 auto; } #topmenu nav .show_all_menu { display: none; } #topmenu ul, #topmenu li { padding: 0; margin: 0; list-style: none; } /* #topmenu .ld1 { padding: 0 165px 0 300px; } */ #topmenu .ld1 { padding: 0 0 0 300px; } #topmenu .ld1:after { display: block; clear: both; content: ""; } #topmenu .cd1 { float: left; width: 20%; } #topmenu .cd1c1, #topmenu .cd1c7, #topmenu .cd1c8, #topmenu .cd1c9, #topmenu .cd1c10, #topmenu .cd1c11, #topmenu .cd1c12 { display: none; } #topmenu .l1 { position: relative; display: block; line-height: 90px; text-align: center; font-size: 23px; font-weight: 600; color: #1b1b1b; } #topmenu .lb1 { position: absolute; top: 90px; height: 0; overflow: hidden; } #header.over #topmenu .lb1 { width: 21.75%; height: auto; padding: 20px 3% 0; box-sizing: border-box; overflow: visible; } #header.over #topmenu .cd1c2 .lb1 { left: 1%; } #header.over #topmenu .cd1c3 .lb1 { left: 20%; } #header.over #topmenu .cd1c4 .lb1 { left: 40%; } #header.over #topmenu .cd1c5 .lb1 { left: 60%; } #header.over #topmenu .cd1c6 .lb1 { left: 80%; } #header.over #topmenu .cd1.over .lb1 {} #header.over #topmenu .lb1:before { display: block; line-height: 50px; background-color: #005eb7; text-align: center; color: #fff; font-size: 20px; font-weight: 600; content: attr(data-menuname); } #topmenu .ld2 { padding: 10px 0 20px 0; } #topmenu .cd2 {} #topmenu .l2 { position: relative; line-height: 20px; padding: 7px 0 7px 25px; font-size: 18px; } #topmenu .l2:focus, #topmenu .l2:hover, #topmenu .l2:active { color: #00479d; font-weight: 600; } #topmenu .l2:before { position: absolute; left: 6px; top: 15px; width: 12px; height: 12px; line-height: 11px; border-radius: 100%; background: #0015b0 url(../image/header_gnb_depth2.png) no-repeat center center; content: ""; } #topmenu .lb2 { padding-left: 15px; } #topmenu .cd2.child_tabmenu .lb2 { display: none; } #topmenu .ld3 {} #topmenu .cd3 {} #header.over #topmenu .cd1c3 .ld3 { display: none; } /* #topmenu .l3 { position: relative; line-height: 18px; padding: 5px 0 5px 10px; font-size: 0.9em; } #topmenu .l3:before { position: absolute; left: 0; top: 16px; width: 4px; height: 1px; background-color: #333; content: ""; } */ #topmenu .l3 { position: relative; line-height: 18px; padding: 5px 0 5px 10px; font-size: 0.9em; } #topmenu .l3:before { position: absolute; left: 0; top: 15px; width: 3px; height: 3px; background-color: #333; content: ""; } #topmenu .lb3 { display: none; } .gnb_cover { position: fixed; left: 0; top: 135px; z-index: 90; width: 100%; border-top: 1px solid #0f5ea3; background-color: #f8f8f8; box-shadow: 0 5px 5px rgba(0, 0, 0, 0.5); } @media all and (max-width: 1450px) { #GNB .top nav ul li:nth-child(2) { top: auto; bottom: 0; } #GNB .top nav ul li a.donation { left: auto; right: 0; top: auto; bottom: 50px; width: 63px; height: 114px; background-size: contain; } } @media all and (max-width: 1024px) { #GNB .top nav ul li a.donation { position: static; width: auto; height: 30px; line-height: 28px; padding: 0 12px; margin: 7px 0 0 10px; font-size: 16px; font-weight: normal; } #topmenu .ld1 { padding: 0 0 0 250px; } } @media all and (max-width: 768px) { #header { height: 60px; } #header header h1 { } #header header h1 a { display: block; position: static; left: auto; top: auto; width: 210px; height: 60px; margin: 0 auto; background-size: auto 48px; } #GNB .top { display: none; } #GNB #topmenu { margin-top: 0; } #topmenu nav .show_all_menu { display: block; position: absolute; right: 0; top: -50px; z-index: 99999; width: 50px; height: 50px; padding: 0; margin: 0; border: 0 none; background: url(../image/header_showmenu.png) no-repeat center center; text-align: left; text-indent: -999px; overflow: hidden; } #topmenu .ld1 { display: none; } #header.over { position: relative; height: 50px; } #header.over header { position: fixed; left: 0; top: 0; z-index: 99990; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.8); } #header.over #topmenu nav .show_all_menu { top: -100px; background-image: url(../image/header_showmenu_close.png); } #header.over #GNB .top { display: block; } #header.over #GNB .top nav { float: none; text-align: center; } #header.over #GNB #GNB .top nav ul { display: inline-block; float: none; } #header.over #GNB .top nav ul li { float: none; display: inline-block; } #header.over #GNB .top nav ul li:nth-child(1), #header.over #GNB .top nav ul li:nth-child(2), #header.over #GNB .top nav ul li:nth-child(3) { display: none; } #header.over #GNB { position: relative; height: calc(100% - 50px); } #header.over #topmenu { position: relative; height: calc(100% - 36px); background-color: transparent; } #header.over #topmenu nav { position: relative; height: 100%; } #header.over #topmenu .ld1 { display: block; position: relative; height: 100%; padding: 0; overflow: auto; } #header.over #topmenu .cd1 { display: block !important; float: none; width: auto; border-bottom: 1px solid #fff; } #header.over #topmenu .cd1:last-child { border-bottom: 0 none; } #header.over #topmenu .cd1c1 { display: none !important; } #header.over #topmenu .l1 { line-height: 50px; padding: 0 0 0 20px; text-align: left; font-weight: 500; background-color: #00549d; color: #fff; font-size: 20px; font-weight: normal; } #header.over #topmenu .l1.show { background-color: #fff; color: #005d9d; } #header.over #topmenu .l1.hasChild { padding-right: 50px; } #header.over #topmenu .l1.hasChild:after { position: absolute; right: 10px; top: 0; width: 40px; height: 100%; background: url(../image/header_menu_depth1_arrow_down.png) no-repeat center center; content: ""; } #header.over #topmenu .l1.show.hasChild:after { background-image: url(../image/header_menu_depth1_arrow_up.png); } #header.over #topmenu .cd1.over .l1:before { content: none; } #header.over #topmenu .lb1 { position: static; left: auto !important; top: auto !important; width: auto !important; height: 0; padding: 0 !important; overflow: hidden; } #header.over #topmenu .lb1:before { content: none !important; } #header.over #topmenu .lb1.show { height: auto; overflow: visible; background-color: #fafafa; } #header.over #topmenu .ld2 { padding: 0; border-top: 1px solid #d7d7d7; } #header.over #topmenu .cd2 { border-bottom: 1px solid #d7d7d7; } #header.over #topmenu .l2 { display: block; line-height: 40px; padding: 0 0 0 30px; font-size: 18px; font-weight: 500; } #header.over #topmenu .l2:before { content: none; } #header.over #topmenu .l2.hasChild { padding-right: 50px; } #header.over #topmenu .l2.hasChild:after { position: absolute; right: 10px; top: 0; width: 40px; height: 100%; text-align: center; font-family: serif; font-size: 30px; font-weight: lighter; content: "+"; } #header.over #topmenu .l2.hasChild.show:after { content: "-"; } #header.over #topmenu .l2.show { color: #005d9d; } #header.over #topmenu .lb2 { display: block; height: 0; overflow: hidden; } #header.over #topmenu .lb2.show { height: auto; overflow: visible; padding-left: 30px; padding-bottom: 20px; } #header.over #topmenu .l3 { display: block; line-height: 20px; } } /** FOOTER **/ #footer { padding: 0 0 30px 0; background-color: #393939; color: #d5d5d5; } #footer aside {} #footer aside .section_1 { border-top: 1px solid #d7d7d7; background-color: #fff; color: #000; } #footer aside .banner { max-width: 1200px; line-height: 74px; margin: 0 auto; } #footer aside .banner:after { display: block; clear: both; content: ""; } #footer aside .banner h2 { float: left; width: 110px; padding: 0 0 0 8px; margin: 0; box-sizing: border-box; font-size: 18px; color: #000; font-weight: 500; text-indent: -999px; overflow: hidden; } #footer aside .banner .list { position: relative; float: left; width: calc(100% - 110px); } #footer aside .banner .list a { position: relative; display: block; padding: 0 30px; font-size: 16px; font-weight: 400; } #footer aside .banner .list a:after { position: absolute; right: 0; top: 50%; width: 1px; height: 16px; margin-top: -8px; background-color: #333; content: ""; } #footer aside .banner .list .slick-prev { position: absolute; left: -100px; top: 50%; width: 30px; height: 30px; line-height: 28px; padding: 0; margin: -15px 0 0 0; border: 0 none; background-color: #fff; text-align: left; text-indent: -999px; overflow: hidden; font-family: serif !important; font-size: 30px; font-weight: normal; color: #333; } #footer aside .banner .list .slick-prev:after { position: absolute; left: 0; top: 0; width: 100%; height: 100%; text-align: center; text-indent: 0; content: "<"; } #footer aside .banner .list .slick-prev:focus, #footer aside .banner .list .slick-prev:hover, #footer aside .banner .list .slick-prev:active { background-color: #333; color: #fff; } #footer aside .banner .list .slick-next { position: absolute; left: -40px; top: 50%; width: 30px; height: 30px; line-height: 28px; padding: 0; margin: -15px 0 0 0; border: 0 none; background-color: #fff; text-align: left; text-indent: -999px; overflow: hidden; font-family: serif !important; font-size: 30px; font-weight: normal; color: #333; } #footer aside .banner .list .slick-next:after { position: absolute; left: 0; top: 0; width: 100%; height: 100%; text-align: center; text-indent: 0; content: ">"; } #footer aside .banner .list .slick-next:focus, #footer aside .banner .list .slick-next:hover, #footer aside .banner .list .slick-next:active { background-color: #333; color: #fff; } #footer aside .banner .list .play_stop { position: absolute; left: -70px; top: 50%; width: 30px; height: 30px; line-height: 28px; padding: 0; margin: -15px 0 0 0; border: 0 none; background-color: #fff; text-align: center; font-family: serif !important; font-size: 20px; font-weight: normal; color: #333; } #footer aside .banner .list .play_stop:focus, #footer aside .banner .list .play_stop:hover, #footer aside .banner .list .play_stop:active { background-color: #333; color: #fff; } #footer aside .alignbox { position: relative; max-width: 1200px; padding: 30px 0 0 345px; margin: 0 auto; box-sizing: border-box; } #footer aside .alignbox:after { display: block; clear: both; content: ""; } #footer aside .link { float: left; padding: 0; margin: 0; list-style: none; } #footer aside .link li { position: relative; float: left; padding: 0 0 0 1px; margin: 0; list-style: none; } #footer aside .link li:before { position: absolute; left: 0; top: 50%; width: 1px; height: 16px; margin-top: -8px; background-color: #666; content: ""; } #footer aside .link li:first-child:before { content: none; } #footer aside .link li a { display: block; line-height: 30px; padding: 0 20px; color: #aaa; font-size: 16px; } #footer aside .link li:first-child a { padding-left: 0; } #footer aside .link li a strong { font-weight: 600; } #footer aside .link li a:focus, #footer aside .link li a:hover, #footer aside .link li a:active { color: #fff; } #footer .footer_logo { position: relative; max-width: 1200px; margin: 0 auto; } #footer .footer_logo h3 { position: absolute; left: 8px; top: -20px; width: 268px; height: 58px; margin: 0; background: url(../image/footer_logo.png) no-repeat center center; text-align: left; text-indent: -999px; overflow: hidden; } #footer address { display: block; max-width: 1200px; line-height: 23px; padding: 10px 0 0 345px; margin: 0 auto; box-sizing: border-box; font-style: normal; color: #d5d5d5; font-size: 15px; } #footer address .br1, #footer address .br2, #footer address .br3 { display: none; } #footer address .split { display: inline-block; padding: 0 1em; } @media all and (max-width: 1024px) { #footer aside .alignbox { padding: 0 10px; } #footer .footer_logo { display: none; } #footer address { padding: 0 10px; } } @media all and (max-width: 768px) { #footer aside { background-color: transparent; } #footer aside .link { float: none; text-align: center; } #footer aside .link li { float: none; display: inline-block; } } @media all and (max-width: 768px) { #footer aside .link li a { padding: 0 10px; font-size: 13px; } } @media all and (max-width: 425px) { #footer aside .link:after { display: block; clear: both; content: ""; } #footer aside .link li { float: left; width: 33.333%; box-sizing: border-box; } #footer aside .link li a { display: flex; justify-content: center; align-items: center; width: 100%; height: 50px; line-height: 20px; box-sizing: border-box; text-align: center; word-break: keep-all; } #footer address { font-size: 13px; } #footer address span { display: block; } #footer address .split { display: none; } #footer address br { display: none; } #footer address .br2 + span { margin-bottom: 10px; } } /** MAIN **/ #container.main {} #container.main #section {} #container.main #section #contents { position: relative; width: 100%; height: 100%; } #container.main .section_1 { clear: both; } #container.main .popupzone1 {} #container.main .popupzone1 h2 { position: absolute; width: 0; height: 0; font-size: 0; overflow: hidden; } #container.main .popupzone1 .list { position: relative; width: 100%; height: 500px; line-height: 20px; box-sizing: border-box; text-align: center; } #container.main .popupzone1 .list div, #container.main .popupzone1 .list a { display: block !important; position: relative; width: 100%; height: 100%; background: #fff no-repeat center center; background-size: contain; text-align: left; text-indent: -99999px; overflow: hidden; } #container.main .popupzone1 .list .item { width: 1200px; } #container.main .popupzone1 .list .item > * { background-color: #eee; } #container.main .popupzone1 .list .slick-list { position: absolute; left: 0; top: 0; z-index: 1; width: 100%; height: 100%; box-sizing: border-box; } #container.main .popupzone1 .list .slick-list .slick-track .slick-slide { box-sizing: border-box; transition: all 300ms ease; transform: scale(0.8); } #container.main .popupzone1 .list .slick-list .slick-track .slick-slide.slick-center { transform: scale(1); } #container.main .popupzone1 .list .slick-prev { position: absolute; left: calc((100% - 1200px) / 2); top: 50%; z-index: 2; width: 58px; height: 60px; line-height: 56px; padding: 0; margin: -30px 0 0 0; border: 1px solid #fff; background-color: rgba(0, 0, 0, 0.3); text-align: left; text-indent: -999px; overflow: hidden; font-family: serif; font-size: 40px; color: #fff; font-weight: normal; } #container.main .popupzone1 .list .slick-prev:after { position: absolute; left: 0; top: 0; width: 100%; height: 100%; text-align: center; text-indent: 0; font-family: serif; content: "<"; } #container.main .popupzone1 .list .slick-prev:focus, #container.main .popupzone1 .list .slick-prev:hover, #container.main .popupzone1 .list .slick-prev:active { background-color: rgba(0, 0, 0, 0.8); } #container.main .popupzone1 .list .slick-next { position: absolute; right: calc((100% - 1200px) / 2); top: 50%; z-index: 2; width: 58px; height: 60px; line-height: 56px; padding: 0; margin: -30px 0 0 0; border: 1px solid #fff; background-color: rgba(0, 0, 0, 0.3); text-align: left; text-indent: -999px; overflow: hidden; font-family: serif; font-size: 40px; color: #fff; font-weight: normal; } #container.main .popupzone1 .list .slick-next:after { position: absolute; left: 0; top: 0; width: 100%; height: 100%; text-align: center; text-indent: 0; font-family: serif; content: ">"; } #container.main .popupzone1 .list .slick-next:focus, #container.main .popupzone1 .list .slick-next:hover, #container.main .popupzone1 .list .slick-next:active { background-color: rgba(0, 0, 0, 0.8); } #container.main .popupzone1 .list .slick-dots { position: relative; top: 90%; z-index: 2; display: inline-block; } #container.main .popupzone1 .list .slick-dots { display: inline-block !important; padding: 0; margin: 0; list-style: none; } #container.main .popupzone1 .list .slick-dots li { display: inline-block; padding: 0; margin: 0 10px; list-style: none; } #container.main .popupzone1 .list .slick-dots li button { width: 13px; height: 13px; padding: 0; margin: 0; border: 1px solid #fff; border-radius: 100%; box-sizing: border-box; background-color: #fff; text-align: left; text-indent: -9999px; overflow: hidden; box-shadow: 0 0 3px #063f70; } #container.main .popupzone1 .list .slick-dots li button:focus, #container.main .popupzone1 .list .slick-dots li button:hover, #container.main .popupzone1 .list .slick-dots li button:active { background-color: #000; box-shadow: 0 0 3px #000; } #container.main .popupzone1 .list .slick-dots li.slick-active button { background-color: #001834; box-shadow: 0 0 3px #063f70; } #container.main .popupzone1 .list .play_stop { position: relative; top: 90%; z-index: 2; display: inline-block; width: 20px; height: 20px; padding: 0; margin: 0 10px; border: 1px solid #fff; border-radius: 5px; background-color: #fff; color: #333; font-family: serif; font-size: 12px; } #container.main .popupzone1 .list .empty { display: flex !important; justify-content: center; align-items: center; background-color: #f0f0f0; text-align: center; text-indent: 0; } #container.main .section_2 { clear: both; } #container.main .align_2 { max-width: 1200px; padding: 60px 0; margin: 0 auto; } #container.main .align_2:after { display: block; clear: both; content: ""; } #container.main .board {} #container.main .board:after { display: block; clear: both; content: ""; } #container.main .board h2 { position: relative; height: 106px; line-height: 100px; margin: 0 0 41px 0; text-align: center; font-size: 46px; color: #111; font-weight: normal; } #container.main .board h2 span { font-weight: 600; } #container.main .board h2:after { position: absolute; left: 50%; bottom: 0; width: 62px; height: 4px; margin-left: -31px; background-color: #7d7d7d; content: ""; } #container.main .board .in_board { padding: 16px 30px 0 30px; border: 1px solid #e8e8e8; box-sizing: border-box; } #container.main .board .in_board h3 { line-height: 57px; padding: 0 0 0 7px; margin: 0; font-size: 25px; color: #000; } #container.main .board .in_board .list { line-height: 30px; } #container.main .board .in_board .list ul { padding: 0; margin: 0; list-style: none; } #container.main .board .in_board .list ul li { padding: 0; margin: 0; list-style: none; } #container.main .board .in_board .list ul li.c5 { display: none; } #container.main .board .in_board .list ul li.empty { display: block; } #container.main .board .in_board .list ul li a { position: relative; display: block; padding-left: 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #container.main .board .in_board .list ul li a:before { position: absolute; left: 0; top: 50%; width: 3px; height: 3px; margin-top: -2px; border-radius: 100%; background-color: #333; content: ""; } #container.main .board .in_board .list ul li a .title { font-weight: normal; } #container.main .board .in_board .list ul li a .content, #container.main .board .in_board .list ul li a .date, #container.main .board .in_board .list ul li a .br { display: none; } #container.main .board .in_board_1 { float: left; width: 740px; height: 405px; } #container.main .board .in_board_2 { float: right; width: 430px; height: 190px; margin-bottom: 25px; } #container.main .board .in_board_3 { float: right; clear: right; width: 430px; height: 190px; } #container.main .board .in_board_1 .list { line-height: 54px; } #container.main .board .in_board_1 .list ul li { border-bottom: 1px solid #ebebeb; } #container.main .board .in_board_1 .list ul li:first-child { margin-bottom: 24px; } #container.main .board .in_board_1 .list ul li:last-child { display: block; border-bottom: 0 none; } #container.main .board .in_board_1 .list ul li a { line-height: 54px; padding-right: 6em; } #container.main .board .in_board_1 .list ul li a .date { display: block; position: absolute; right: 0; top: 0; font-style: normal; } #container.main .board .in_board_1 .list ul li:first-child a { line-height: 24px; padding: 26px 0 12px 120px; background: url(../image/main_board_notice2.png) no-repeat 33px 38px; white-space: normal; overflow: visible; text-overflow: clip; } #container.main .board .in_board_1 .list ul li:first-child a:before { content: none; } #container.main .board .in_board_1 .list ul li:first-child a .title { display: block; line-height: 38px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #container.main .board .in_board_1 .list ul li:first-child a .content { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #container.main .board .in_board_1 .list ul li:first-child a .date { position: static; display: block; } #container.main .board2 {} #container.main .board2:after { display: block; clear: both; content: ""; } #container.main .board2 h2 { position: absolute; width: 0; height: 0; overflow: hidden; } #container.main .board2 .in_board { float: left; width: calc((100% - 30px * 2) / 3); height: 190px; padding: 13px 27px 0 27px; margin: 0; border: 1px solid #e8e8e8; box-sizing: border-box; } #container.main .board2 .in_board + .in_board { margin-left: 30px; } #container.main .board2 .in_board h3 { margin: 0; } #container.main .board2 .in_board h3 a { position: relative; display: block; line-height: 63px; font-size: 25px; font-weight: 500; color: #000; } #container.main .board2 .in_board h3 a:after { position: absolute; right: 0; top: 0; font-size: 15px; font-weight: normal; content: "더보기 +"; } #container.main .board2 .in_board .list {} #container.main .board2 .in_board .list ul { padding: 0; margin: 0; list-style: none; } #container.main .board2 .in_board .list ul li { padding: 0; margin: 0; list-style: none; } #container.main .board2 .in_board .list ul li + li { border-top: 1px solid #ebebeb; } #container.main .board2 .in_board .list ul li a { position: relative; display: block; line-height: 48px; padding: 0 0 0 11px; } #container.main .board2 .in_board .list ul li a:before { position: absolute; left: 0; top: 50%; width: 3px; height: 3px; margin-top: -2px; border-radius: 100%; background-color: #333; content: ""; } #container.main .board2 .in_board .list ul li a .title { display: block; font-weight: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #container.main .board2 .in_board .list ul li a .br, #container.main .board2 .in_board .list ul li a .date { display: none; } #container.main .section_3 { clear: both; border-width: 1px 0; border-style: solid; border-color: #d7d7d7; background: #283b72 url(../image/main_donation.png) no-repeat center center; } #container.main .align_3 { max-width: 1200px; margin: 0 auto; } #container.main .align_3:after { display: block; clear: both; content: ""; } #container.main .donation {} #container.main .donation:after {} #container.main .donation h2 { float: left; width: 157px; margin: 0; } #container.main .donation h2 span { display: block; line-height: 90px; background: url(../image/main_donation_title.png) no-repeat 1px 10px; text-align: center; font-size: 24px; font-weight: 600; color: #fff; } #container.main .donation .list { position: relative; float: left; width: calc(100% - 157px); height: 92px; line-height: 90px; margin: 14px 0; border: 1px solid #7b797b; box-sizing: border-box; background-color: #fff; } #container.main .donation .list ul, #container.main .donation .list li { display: block; padding: 0; margin: 0; list-style: none; } #container.main .donation .list .empty { text-align: center; } #container.main .donation .list a { position: relative; display: block; padding: 0 24px; color: #535353; } #container.main .donation .list a:focus, #container.main .donation .list a:hover, #container.main .donation .list a:active { background-color: #666; color: #fff; } #container.main .donation .list a:after { position: absolute; right: 0; top: 50%; width: 1px; height: 20px; margin-top: -10px; background-color: #cfcfcf; content: ""; } #container.main .donation .list a .title { display: inline-block; padding-left: 27px; background: url(../image/main_donation_hart.png) no-repeat 0 center; font-weight: normal; } #container.main .donation .list a .content { font-style: normal; } #container.main .donation .list a .content:before { content: "("; } #container.main .donation .list a .content:after { content: ")"; } #container.main .donation .list a .br { display: none; } #container.main .donation .list .slick-prev { position: absolute; left: -128px; bottom: 5px; width: 31px; height: 31px; line-height: 25px; padding: 0; margin: 0; border: 3px solid #fff; border-radius: 31px 0 0 31px; background-color: #fff; text-align: left; text-indent: -9999px; overflow: hidden; font-family: serif; font-size: 15px; font-weight: lighter; color: #313131; } #container.main .donation .list .slick-prev:after { position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-radius: 100%; background-color: #d2d2d2; text-align: center; text-indent: 0; content: "<"; } #container.main .donation .list .slick-prev:focus:after, #container.main .donation .list .slick-prev:hover:after, #container.main .donation .list .slick-prev:active:after { background-color: #333; color: #fff; } #container.main .donation .list .slick-next { position: absolute; left: -62px; bottom: 5px; width: 31px; height: 31px; line-height: 25px; padding: 0; margin: 0; border: 3px solid #fff; border-radius: 0 31px 31px 0; background-color: #fff; text-align: left; text-indent: -9999px; overflow: hidden; font-family: serif; font-size: 15px; font-weight: lighter; color: #313131; } #container.main .donation .list .slick-next:after { position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-radius: 100%; background-color: #d2d2d2; text-align: center; text-indent: 0; content: ">"; } #container.main .donation .list .slick-next:focus:after, #container.main .donation .list .slick-next:hover:after, #container.main .donation .list .slick-next:active:after { background-color: #333; color: #fff; } #container.main .donation .list .play_stop { position: absolute; left: -97px; bottom: 5px; width: 35px; height: 31px; padding: 0; margin: 0; border: 0 none; background-color: #fff; text-align: center; font-family: serif; font-size: 15px; font-weight: lighter; color: #313131; } #container.main .donation .list .play_stop:focus, #container.main .donation .list .play_stop:hover, #container.main .donation .list .play_stop:active { background-color: #333; color: #fff; } #container.main .donation2 { padding-bottom: 88px; } #container.main .donation2 h2 { line-height: 78px; padding: 20px 0 0 32px; margin: 0; background: url(../image/main_donation2_title.png) no-repeat 5px 23px; font-size: 27px; font-weight: 600; color: #fff; } #container.main .donation2 .list { border: 1px solid #7e7b7b; background-color: #fff; } #container.main .donation2 .list:after { display: block; clear: both; content: ""; } #container.main .donation2 .list dl { float: left; width: 33.333%; padding: 0; margin: 0; list-style: none; } #container.main .donation2 .list dl dt { padding: 0; margin: 0; list-style: none; } #container.main .donation2 .list dl dt a { display: block; line-height: 63px; text-align: center; font-size: 20px; color: #867501; } #container.main .donation2 .list dl dd { position: relative; padding: 0 13px; margin: 0; list-style: none; } #container.main .donation2 .list dl dd ul { padding: 0 13px; margin: 0; list-style: none; } #container.main .donation2 .list dl dd ul li { padding: 0 13px; margin: 0; list-style: none; box-sizing: border-box; } #container.main .donation2 .list dl dd ul li a { display: block; } #container.main .donation2 .list dl dd ul li a .image { display: block; height: 115px; } #container.main .donation2 .list dl dd ul li a .image img { display: block; width: 100%; height: 100%; padding: 0; margin: 0 auto; border: 1px solid #b4b4b4; } #container.main .donation2 .list dl dd ul li a br { display: none; } #container.main .donation2 .list dl dd ul li a .title { display: block; line-height: 50px; text-align: left; font-weight: normal; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #container.main .donation2 .list dl dd ul .slick-prev { position: absolute; left: 50%; bottom: -58px; z-index: 2; width: 32px; height: 32px; padding: 0; margin: 0 0 0 -47px; border: 3px solid #fff; border-radius: 100%; box-sizing: border-box; background-color: #d2d2d2; text-align: left; text-indent: -9999px; overflow: hidden; } #container.main .donation2 .list dl dd ul .slick-prev:before { position: absolute; left: 0; top: 0; width: 100%; height: 100%; line-height: 26px; text-align: center; text-indent: 0; font-family: serif; font-weight: normal; color: #313131; font-size: 16px; content: "<"; } #container.main .donation2 .list dl dd ul .slick-next { position: absolute; left: 50%; bottom: -58px; z-index: 2; width: 32px; height: 32px; padding: 0; margin: 0 0 0 15px; border: 3px solid #fff; border-radius: 100%; box-sizing: border-box; background-color: #d2d2d2; text-align: left; text-indent: -9999px; overflow: hidden; } #container.main .donation2 .list dl dd ul .slick-next:before { position: absolute; left: 0; top: 0; width: 100%; height: 100%; line-height: 26px; text-align: center; text-indent: 0; font-family: serif; font-weight: normal; color: #313131; font-size: 16px; content: ">"; } #container.main .donation2 .list dl dd ul .play_stop { position: absolute; left: 50%; bottom: -58px; z-index: 1; width: 62px; height: 32px; line-height: 32px; padding: 0; margin: 0 0 0 -31px; border: 0 none; background-color: #fff; font-weight: normal; color: #313131; font-family: serif; font-size: 16px; color: #313131; } #container.main .section_4 { clear: both; padding: 60px 0; background-color: #d2e2f0; } #container.main .align_4 { max-width: 1200px; margin: 0 auto; background-color: #fff; } #container.main .introduce { padding: 0 0 1px 0; } #container.main .introduce:after { display: block; clear: both; content: ""; } #container.main .introduce h2 { position: relative; height: 106px; line-height: 100px; margin: 0 0 41px 0; text-align: center; font-size: 46px; color: #111; font-weight: normal; } #container.main .introduce h2 span { font-weight: 600; } #container.main .introduce h2:after { position: absolute; left: 50%; bottom: 0; width: 62px; height: 4px; margin-left: -31px; background-color: #7d7d7d; content: ""; } #container.main .introduce dl { position: relative; padding: 0 0 333px 0; margin: 0 90px 90px 90px; text-align: center; } #container.main .introduce dl:after { display: block; clear: both; content: ""; } #container.main .introduce dl dt { display: inline-block; width: 165px; height: 40px; line-height: 36px; border: 1px solid #2f509b; border-radius: 40px; box-sizing: border-box; background-color: #fff; text-align: center; color: #313131; cursor: pointer; } #container.main .introduce dl dt:focus, #container.main .introduce dl dt:hover, #container.main .introduce dl dt:active { background-color: #666; color: #fff; } #container.main .introduce dl dt.active { border-color: #2f509b; background-color: #2f509b; color: #fff; } #container.main .introduce dl dd { display: none; position: absolute; left: 0; top: 71px; width: 100%; height: calc(100% - 71px); padding: 0; margin: 0; list-style: none; background-color: #fff; } #container.main .introduce dl dd.active { display: block; } #container.main .introduce dl dd a { position: relative; display: block; width: 100%; height: 100%; padding-left: 50%; box-sizing: border-box; background: #666 no-repeat 0 0; text-align: left; color: #fff; } #container.main .introduce dl dd a:focus, #container.main .introduce dl dd a:hover, #container.main .introduce dl dd a:active { background-color: #333; color: #fff; } #container.main .introduce dl dd a:before { position: absolute; left: 65%; bottom: 42px; width: 82px; height: 31px; line-height: 27px; border: 1px solid #fff; border-radius: 31px; text-align: center; font-size: 15px; content: "더보기 +"; } #container.main .introduce dl dd a:after { display: block; clear: both; content: ""; } #container.main .introduce dl dd:nth-child(2) a { background-color: #1f417a; background-image: url(../image/main_introduce_image_1.jpg); } #container.main .introduce dl dd:nth-child(4) a { background-color: #5c304a; background-image: url(../image/main_introduce_image_2.jpg); } #container.main .introduce dl dd:nth-child(6) a { background-color: #604028; background-image: url(../image/main_introduce_image_3.jpg); } #container.main .introduce dl dd:nth-child(8) a { background-color: #502b64; background-image: url(../image/main_introduce_image_4.jpg); } #container.main .introduce dl dd:nth-child(10) a { background-color: #282e56; background-image: url(../image/main_introduce_image_5.jpg); } #container.main .introduce dl dd:nth-child(12) a { background-color: #44782f; background-image: url(../image/main_introduce_image_6.jpg); } #container.main .introduce dl dd a br { display: none; } #container.main .introduce dl dd a em { position: relative; float: left; width: 30%; height: 100%; line-height: 141px; background: url(../image/main_introduce_line.png) no-repeat 0 bottom; text-align: center; font-size: 43px; font-weight: 600; font-style: normal; } #container.main .introduce dl dd a strong { float: left; display: block; width: 70%; line-height: 91px; padding: 21px 0 0 0; margin: 0 0 32px 0; background: url(../image/main_introduce_line2.png) no-repeat right bottom; font-size: 28px; } #container.main .introduce dl dd a strong:after { display: block; width: 49px; height: 1px; background-color: #fff; content: ""; } #container.main .introduce dl dd a > span { float: left; display: block; width: 70%; line-height: 25px; font-size: 15px; } #container.main .introduce dl dd a > span span { display: block; } #container.main .section_5 { clear: both; padding: 60px 0; background: #f0f0fc url(../image/main_gallery_bg.png) no-repeat center center; } #container.main .align_5 { max-width: 1200px; margin: 0 auto; } #container.main .align_5:after { display: block; clear: both; content: ""; } #container.main .gallery { float: left; width: 75%; } #container.main .gallery h2 { position: relative; width: 133.333%; height: 106px; line-height: 100px; margin: 0 0 41px 0; text-align: center; font-size: 46px; color: #111; font-weight: normal; } #container.main .gallery h2 a { color: #111; } #container.main .gallery h2 a span { font-weight: 600; } #container.main .gallery h2 a:after { position: absolute; left: 50%; bottom: 0; width: 62px; height: 4px; margin-left: -31px; background-color: #7d7d7d; content: ""; } #container.main .gallery .list {} #container.main .gallery .list ul { padding: 0; margin: 0; list-style: none; } #container.main .gallery .list ul:after { display: block; clear: both; content: ""; } #container.main .gallery .list ul li { float: left; width: 33.33%; padding: 0 13px 0 14px; margin: 0; list-style: none; box-sizing: border-box; } #container.main .gallery .list ul li:first-child { padding-left: 13px; } #container.main .gallery .list ul li a { display: block; height: 350px; padding: 32px 29px 0 29px; border: 1px solid #e8e8e8; box-sizing: border-box; background-color: #fff; color: #171717; } #container.main .gallery .list ul li a:focus, #container.main .gallery .list ul li a:hover, #container.main .gallery .list ul li a:active { background-color: #666; color: #fff; } #container.main .gallery .list ul li a .image { display: block; margin-bottom: 13px; } #container.main .gallery .list ul li a .image img { display: block; width: 100%; height: 158px; border: 0 none; } #container.main .gallery .list ul li a .br { display: none; } #container.main .gallery .list ul li a .title { display: block; line-height: 37px; font-weight: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #container.main .gallery .list ul li a .content { display: block; height: 48px; line-height: 24px; margin-bottom: 18px; overflow: hidden; text-overflow: ellipsis; opacity: 0.7; } #container.main .gallery .list ul li a .content { display: -webkit-box; -webkit-line-clamp : 2; -webkit-box-orient : vertical; } #container.main .gallery .list ul li a .date { display: block; line-height: 24px; font-style: normal; opacity: 0.7; } #container.main .youtube { float: right; width: calc(25% - 13px); height: 350px; margin-top: 147px; border: 1px solid #dcdcdc; box-sizing: border-box; box-sizing: border-box; background-color: #f2f2f2; } #container.main .youtube h2 { padding: 36px 29px 34px 29px; margin: 0; } #container.main .youtube h2 a { display: block; line-height: 18px; padding: 7px 0 3px 56px; margin: 0; background: url(../image/main_youtube.png) no-repeat 0 center; color: #171717; font-size: 18px; font-weight: bold; } #container.main .youtube h2 a span { display: block; font-size: 16px; font-weight: normal; } #container.main .youtube .list { padding: 0 29px; } #container.main .youtube .list ul { padding: 0; margin: 0; list-style: none; } #container.main .youtube .list ul li { display: none; padding: 0; margin: 0; list-style: none; } #container.main .youtube .list ul li:first-child { display: block; } #container.main .youtube .list ul li a { display: block; font-size: 18px; color: #171717; } #container.main .youtube .list ul li a:focus, #container.main .youtube .list ul li a:hover, #container.main .youtube .list ul li a:active { color: #d63333; } #container.main .youtube .list ul li a .image { display: block; position: relative; height: 158px; margin-bottom: 20px; } #container.main .youtube .list ul li a .image:after { position: absolute; left: 0; top: 0; z-index: 2; width: 100%; height: 100%; background: url(../image/main_youtube_play.png) no-repeat center center; content: ""; } #container.main .youtube .list ul li a .image img { position: absolute; left: 0; top: 0; z-index: 1; width: 100%; height: 100%; border: 0 none; } #container.main .youtube .list ul li a .br { display: none; } #container.main .youtube .list ul li a .title { display: block; line-height: 25px; font-weight: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #container.main .youtube .list ul li a .content { display: none; } #container.main .section_6 { clear: both; padding: 60px 0; background: #fafafa url(../image/main_join_bg.png) no-repeat center center; } #container.main .align_6 { max-width: 1200px; margin: 0 auto; } #container.main .join {} /* #container.main .join h2 { position: relative; height: 106px; line-height: 100px; margin: 0 0 41px 0; text-align: center; font-size: 46px; color: #111; font-weight: normal; } #container.main .join h2 span { font-weight: 600; } #container.main .join h2:after { position: absolute; left: 50%; bottom: 0; width: 62px; height: 4px; margin-left: -31px; background-color: #7d7d7d; content: ""; } */ #container.main .join h2 { position: absolute; width: 0; height: 0; font-size: 0; overflow: hidden; } #container.main .join ul { padding: 0; margin: 0; list-style: none; } #container.main .join ul:after { display: block; clear: both; content: ""; } #container.main .join ul li { float: left; width: 33.333%; padding: 0; margin: 0; list-style: none; } #container.main .join ul li a { position: relative; display: block; width: 300px; height: 300px; line-height: 17px; padding: 139px 0 0 0; margin: 0 auto; border-radius: 100%; box-sizing: border-box; background-color: #666; text-align: center; color: #000; font-size: 15px; } #container.main .join ul li a:before { position: absolute; left: 0; top: 0; width: 100%; height: 175px; background: no-repeat center center; content: ""; } #container.main .join ul li a strong { display: block; line-height: 43px; font-size: 26px; font-weight: 600; color: #fff; } #container.main .join ul li a br { display: none; } #container.main .join ul li a > span { display: block; opacity: 0.8; } #container.main .join ul li a > span span { display: block; } #container.main .join ul li a:after { display: block; width: 85px; height: 28px; line-height: 26px; margin: 20px auto 0 auto; border-radius: 28px; background-color: #434343; text-align: center; color: #fff; font-size: 15px; content: "바로가기"; } #container.main .join ul li:nth-child(1) a { background-color: #2079a2; } #container.main .join ul li:nth-child(2) a { background-color: #f9b101; } #container.main .join ul li:nth-child(3) a { background-color: #7caa00; } #container.main .join ul li:nth-child(1) a:before { background-image: url(../image/main_join_1.png); } #container.main .join ul li:nth-child(2) a:before { background-image: url(../image/main_join_2.png); } #container.main .join ul li:nth-child(3) a:before { background-image: url(../image/main_join_3.png); } #container.main .join ul li a:focus, #container.main .join ul li a:hover, #container.main .join ul li a:active { background-color: #333; color: #fff; box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); } #container.main .section_7 { position: fixed; left: 0; top: 145px; z-index: 99; width: 100%; } #container.main .align_7 { position: relative; max-width: 1200px; margin: 0 auto; } #container.main .sns { position: absolute; left: -160px; } #container.main .sns h2 { position: absolute; width: 0; height: 0; font-size: 0; overflow: hidden; } #container.main .sns ul { padding: 0; margin: 0; list-style: none; } #container.main .sns ul li { padding: 0; margin: 0; list-style: none; } #container.main .sns ul li + li { margin-top: 11px; } #container.main .sns ul li a { display: block; width: 88px; height: 88px; border-radius: 100%; background: no-repeat center center; text-align: left; text-indent: -999px; overflow: hidden; } #container.main .sns ul li:nth-child(1) a { background-image: url(../image/main_sns_01.png); } #container.main .sns ul li:nth-child(2) a { background-image: url(../image/main_sns_02.png); } #container.main .sns ul li:nth-child(3) a { background-image: url(../image/main_sns_03.png); } #container.main .sns ul li:nth-child(4) a { background-image: url(../image/main_sns_04.png); } @media all and (max-width: 1200px) { #container.main .popupzone1 .list { height: 0; padding-top: 41.6666666666%; } #container.main .popupzone1 .list .slick-list { padding: 0 !important; } #container.main .popupzone1 .list .slick-prev { left: 0; } #container.main .popupzone1 .list .slick-next { right: 0; } #container.main .popupzone1 .list .slick-dots, #container.main .popupzone1 .list .play_stop { top: -40px; } #container.main .align_2 { padding: 30px 10px 50px 10px; } #container.main .board .in_board_1 { float: none; width: auto; height: auto; margin-bottom: 20px; } #container.main .board .in_board_2 { float: left; width: calc(50% - 10px); margin-bottom: 0; } #container.main .board .in_board_3 { float: right; width: calc(50% - 10px); } #container.main .align_3 { padding: 0 10px; } #container.main .section_4 { padding: 10px; } #container.main .introduce h2 { margin-bottom: 30px; } #container.main .introduce dl { max-width: 1020px; margin-left: auto; margin-right: auto; } #container.main .introduce dl { display: flex; justify-content: space-around; } #container.main .introduce dl dt { display: flex; justify-content: center; align-items: center; line-height: 17px; padding: 0 10px; margin: 0 5px; } #container.main .introduce dl dd a { padding-left: calc(100% - 510px); background-position-x: calc(100% - 510px); } #container.main .introduce dl dd a:before { left: calc(100% - 510px + 15%);} #container.main .join ul li { padding: 0 10px; box-sizing: border-box; } #container.main .join ul li a { width: auto; max-width: 300px; } #container.main .section_5 { padding: 30px 0; } #container.main .section_6 { padding: 30px 0; } #container.main .section_7, #container.main .section_7 * { display: none !important; } } @media all and (max-width: 768px) { #container.main .popupzone1 .list .slick-prev, #container.main .popupzone1 .list .slick-next { width: 30px; height: 30px; line-height: 28px; margin-top: -15px; font-size: 20px; } #container.main .popupzone1 .list .slick-dots li { margin: 0 2px; } #container.main .popupzone1 .list .play_stop { margin: 0 2px; } #container.main .align_2 { padding: 10px; } #container.main .board h2 { margin-bottom: 10px; } #container.main .board .in_board { height: auto !important; padding: 0 10px 10px 10px !important; } #container.main .board .in_board .list ul li a { position: relative; padding-right: 6em; } #container.main .board .in_board .list ul li a .date { display: block; position: absolute; right: 0; top: 0; font-style: normal; } #container.main .board .in_board_1 { margin-bottom: 10px; } #container.main .board .in_board_1 .list ul li { line-height: 30px; border-bottom: none; } #container.main .board .in_board_1 .list ul li a { line-height: 30px; } #container.main .board .in_board_1 .list ul li:first-child { margin: 0; } #container.main .board .in_board_1 .list ul li:first-child a { line-height: 30px; padding: 0 6em 0 9px; background: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #container.main .board .in_board_1 .list ul li:first-child a:before { content: ""; } #container.main .board .in_board_1 .list ul li:first-child a .title { display: inline; line-height: 30px; font-weight: normal; } #container.main .board .in_board_1 .list ul li:first-child a .content { display: none; } #container.main .board .in_board_1 .list ul li:first-child a .date { position: absolute; } #container.main .board .in_board_2 { float: none; width: auto; margin-bottom: 10px; } #container.main .board .in_board_3 { float: none; width: auto; } #container.main .board2 .in_board { float: none; width: auto; height: 150px; padding: 3px 7px 0 7px; margin: 0; } #container.main .board2 .in_board + .in_board { margin: 10px 0 0 0; } #container.main .board2 .in_board h3 a { line-height: 40px; font-size: 20px; } #container.main .donation h2 span { line-height: 50px; padding-top: 20px; } #container.main .donation .list { float: none; clear: both; width: auto; } #container.main .donation .list .slick-prev { left: auto; bottom: auto; right: 66px; top: -40px; } #container.main .donation .list .slick-next { left: auto; bottom: auto; right: 0; top: -40px; } #container.main .donation .list .play_stop { left: auto; bottom: auto; right: 31px; top: -40px; } #container.main .donation2 .list dl dt a { font-size: 16px; } #container.main .join ul li a { height: 0; padding-top: 100%; } #container.main .join ul li a:before { height: 50%; background-size: auto 60%; } #container.main .join ul li a strong { position: absolute; left: 0; top: 50%; width: 100%; height: 40%; line-height: 25px; padding: 0 15%; box-sizing: border-box; font-size: 20px; } #container.main .join ul li a strong { display: flex; justify-content: center; align-items: center; flex-direction: column; } #container.main .join ul li a > span {display: none; } #container.main .join ul li a:after { content: none; } #container.main .gallery { float: none; width: auto; } #container.main .gallery h2 { width: auto; margin-bottom: 20px; } #container.main .gallery .list ul { padding: 5px; } #container.main .gallery .list ul li { width: 50%; padding: 5px !important; } #container.main .youtube { width: calc(50% - 15px); margin-top: -360px; margin-right: 10px; } #footer aside .banner { display: none; } } @media all and (max-width: 550px) { #container.main .introduce { padding: 10px; } #container.main .introduce h2 { margin-bottom: 10px; } #container.main .introduce dl { max-height: 540px; min-height: 470px; padding-bottom: 130.5882352941176%; margin-bottom: 0; box-sizing: border-box; } #container.main .introduce dl { display: flex; gap: 3px; min-height: 490px; } #container.main .introduce dl dt { flex: 1; float: none; width: auto; margin: 0; word-break: keep-all; } #container.main .introduce dl dd { top: 91px; height: calc(100% - 91px); } #container.main .introduce dl dd a { /*max-height: 470px;*/ min-height: 400px; padding-top: 59%; padding-left: 0; background-position: center 0; background-size: contain; } #container.main .introduce dl dd a:before { left: auto; right: 10px; bottom: 10px; } #container.main .introduce dl dd a em { width: 25%; line-height: 80px; } #container.main .introduce dl dd a strong { width: 75%; line-height: 80px; padding: 0; margin: 0 0 10px 0; } #container.main .introduce dl dd a > span { width: 75%; padding-right: 10px; box-sizing: border-box; } #container.main .introduce dl dd a > span span { display: inline; } } @media all and (max-width: 425px) { #container.main .introduce dl dt { /*height: 60px;*/ } #container.main .join ul li a strong { line-height: 20px; font-size: 16px; font-weight: normal; } #container.main .gallery .list ul li { float: none; width: auto; } #container.main .youtube { float: none; width: auto; margin: 0 10px; } #container.main .donation2 .list dl { float: none; width: auto; padding: 0 0 50px 0; } #container.main .donation2 .list dl dd { padding: 0; } #container.main .donation2 .list dl dd ul { padding: 0 5px; } #container.main .donation2 .list dl dd ul li { padding: 0 5px; } #container.main .donation2 .list dl dd ul li a .image img { width: auto; height: 100%; } #container.main .donation2 .list dl dd ul li a .title { text-align: center; } #container.main .donation2 .list dl dd ul .slick-prev, #container.main .donation2 .list dl dd ul .slick-next, #container.main .donation2 .list dl dd ul .play_stop { bottom: -30px; } } @media all and (max-width: 375px) { #container.main .introduce dl dt { padding: 0; border-radius: 10px; font-size: 12px; } #container.main .join ul li a strong { line-height: 16px; font-size: 14px; word-break: keep-all; } } /** SUB **/ #container.sub { position: relative; } #container.sub:before { display: block; line-height: 165px; margin-bottom: 65px; background: #204791 url(../image/sub_visual.jpg) no-repeat center center; text-align: center; font-size: 45px; font-weight: normal; color: #fff; content: attr(data-menuname); } #container.sub.menu_no_2:before { background-color: #fff; background-image: url(../image/sub_visual_01.jpg); color: #000; } #container.sub.menu_no_3:before { background-color: #fff; background-image: url(../image/sub_visual_02.jpg); color: #000; } #container.sub.menu_no_4:before { background-color: #fff; background-image: url(../image/sub_visual_03.jpg); color: #000; } #container.sub.menu_no_5:before { background-color: #fff; background-image: url(../image/sub_visual_04.jpg); color: #000; } #container.sub #SUB-GNB { display: none; } #container.sub #section { max-width: 1200px; margin: 0 auto; } #container.sub #section section {} #container.sub #section section header {} #container.sub #section section header .menu_path_box { position: absolute; left: 0; top: 165px; width: 100%; height: 63px; line-height: 63px; background-color: #000; background-color: rgba(0, 0, 0, 0.8); } #container.sub #section section header .menu_path { max-width: 1200px; margin: 0 auto; } #container.sub #section section header .menu_path:after { display: block; clear: both; content: ""; } #container.sub #section section header .menu_path .home { float: left; width: 60px; height: 63px; margin: -1px 0; border-left: 1px solid rgba(255, 255, 255, 0.5); background: url(../image/sub_menupath_home.png) no-repeat center center; text-indent: -999px; overflow: hidden; } #container.sub #section section header .menu_path .home:focus, #container.sub #section section header .menu_path .home:hover, #container.sub #section section header .menu_path .home:active { background-color: #000; } #container.sub #section section header .menu_path ul { position: relative; z-index: 9; float: left; min-width: 270px; height: 63px; padding: 0; margin: 0 0 0 -1px; list-style: none; box-sizing: border-box; border-left: 1px solid rgba(255, 255, 255, 0.5); border-right: 1px solid rgba(255, 255, 255, 0.5); overflow: hidden; } #container.sub #section section header .menu_path ul.show { overflow: visible; } #container.sub #section section header .menu_path ul li { padding: 0; margin: 0; list-style: none; } #container.sub #section section header .menu_path ul li a { display: block; padding-left: 20px; padding-right: 20px; border-bottom: 1px solid rgba(255, 255, 255, 0.5); font-size: 20px; color: #fff; background-color: #313131; } #container.sub #section section header .menu_path ul li.fix_menu a { border-bottom: 0 none; } #container.sub #section section header .menu_path ul li a:focus, #container.sub #section section header .menu_path ul li a:hover, #container.sub #section section header .menu_path ul li a:active { background-color: #00549d; color: #fff; } #container.sub #section section header .menu_path ul li.fix_menu a { position: relative; padding-right: 40px; color: #fff !important; background-color: transparent !important; } #container.sub #section section header .menu_path ul.show li.fix_menu a { color: #fff !important; font-weight: 600 !important; } #container.sub #section section header .menu_path ul li.fix_menu a:after { position: absolute; right: 19px; top: 50%; width: 17px; height: 9px; margin-top: -5px; background: url(../image/sub_lnb_arrow_down.png) no-repeat center center; content: ""; } #container.sub #section section header .menu_path ul.show li.fix_menu a:after { background-image: url(../image/sub_lnb_arrow_up.png); } #container.sub #section section header .menu_path ul.show li.fix_menu a:before { position: absolute; left: 0; bottom: -1px; width: 100%; height: 2px; background-color: #3a5ba2; content: ""; } #container.sub #section section header .sub_utility { position: relative; max-width: 1200px; margin: 0 auto; } #container.sub #section section header .sub_utility ul { position: absolute; right: 60px; top: -63px; padding: 0; margin: 0; list-style: none; } #container.sub #section section header .sub_utility ul:after { display: block; clear: both; content: ""; } #container.sub #section section header .sub_utility ul li { float: left; padding: 0; margin: 0; list-style: none; } #container.sub #section section header .sub_utility ul li a { display: block; width: 59px; border-width: 0 1px; border-style: solid; border-color: #e5e7ea; background: no-repeat center center; text-indent: -999px; overflow: hidden; } #container.sub #section section header .sub_utility ul li a:focus, #container.sub #section section header .sub_utility ul li a:hover, #container.sub #section section header .sub_utility ul li a:active { background-color: rgba(0, 0, 0, 0.5); } #container.sub #section section header .sub_utility ul li a.print { background-image: url(../image/sub_utility_print.png); } #container.sub #section section header .sub_utility ul.dropdown { right: 0; z-index: 2; height: 63px; overflow: hidden; } #container.sub #section section header .sub_utility ul.dropdown:before { display: block; height: 63px; border-width: 0 1px; border-style: solid; border-color: #e5e7ea; background: url(../image/sub_utility_dropdown.png) no-repeat center center; content: ""; } #container.sub #section section header .sub_utility ul.dropdown.show { overflow: visible; } #container.sub #section section header .sub_utility ul.dropdown li { float: none; border-bottom: 1px solid #e5e7ea; } #container.sub #section section header .sub_utility ul li a.facebook { background-color: #a8a8a8; background-image: url(../image/sub_utility_facebook.png); } #container.sub #section section header .sub_utility ul li a.twitter { background-color: #a8a8a8; background-image: url(../image/sub_utility_twitter.png); } #container.sub #section section header .sub_utility ul li a.naver { background-color: #a8a8a8; background-image: url(../image/sub_utility_naver.png); } #container.sub #section section header .sub_utility ul li a.kakaostory { background-color: #a8a8a8; background-image: url(../image/sub_utility_kakao.png); } #container.sub #section section header .sub_utility ul.dropdown:focus:before, #container.sub #section section header .sub_utility ul.dropdown:hover:before, #container.sub #section section header .sub_utility ul.dropdown:active:before { background-color: rgba(0, 0, 0, 0.5); } #container.sub #section section header .sub_utility ul.dropdown li a:focus, #container.sub #section section header .sub_utility ul.dropdown li a:hover, #container.sub #section section header .sub_utility ul.dropdown li a:active { background-color: #666; } #container.sub #section section header .tabmenu { max-width: 1200px; margin: 120px 0px 40px 0px; } #container.sub #section section header .tabmenu ul { display: table; width: 100%; padding: 0; margin: 0; list-style: none; border: 1px solid #e5e7ea; box-sizing: border-box; } #container.sub #section section header .tabmenu ul li { display: table-cell; width: 5%; padding: 0; margin: 0; list-style: none; border-left: 1px solid #e5e7ea; vertical-align: middle; background: none; } #container.sub #section section header .tabmenu ul li:first-child { border-left: 0 none; } .tabwidthauto #container.sub #section section header .tabmenu ul li { width: auto; } #container.sub #section section header .tabmenu ul li a { display: table; width: 100%; height: 100%; font-size: 18px; } #container.sub #section section header .tabmenu ul li a:focus, #container.sub #section section header .tabmenu ul li a:hover, #container.sub #section section header .tabmenu ul li a:active { background-color: #f0f0f0; color: #000; } #container.sub #section section header .tabmenu ul li a.open { background-color: #666; color: #fff; font-weight: 500; } #container.sub #section section header .tabmenu ul li a span { display: table-cell; height: 66px; line-height: 22px; vertical-align: middle; text-align: center; } #container.sub #section section header .tabmenu ul + ul { margin-top: 30px; } /* #container.sub #section section header .tabmenu ul + ul { display: block; padding: 0 0 0 30px; margin-top: 30px; } #container.sub #section section header .tabmenu ul + ul li { display: inline-block; width: auto; border: 0 none; } #container.sub #section section header .tabmenu ul + ul li a { display: inline-block; width: auto; height: auto; margin-right: 30px; } #container.sub #section section header .tabmenu ul + ul li a:focus, #container.sub #section section header .tabmenu ul + ul li a:hover, #container.sub #section section header .tabmenu ul + ul li a:active { background-color: transparent; color: #2657a7; } #container.sub #section section header .tabmenu ul + ul li a.open { background-color: transparent; color: #2657a7; font-weight: 500; } #container.sub #section section header .tabmenu ul + ul li a span:before { display: inline-block; width: 10px; font-weight: bold; content: "·"; } */ #container.sub #section section #contents.contents { clear: both; width: 100%; height: 100%; padding: 40px 0; box-sizing: border-box; } #container.sub #section section #contents.contents:after { display: block; clear: both; content: ""; } @media all and (max-width: 1220px) { #container.sub #section section #contents.contents { padding: 30px 10px; box-sizing: border-box; } } @media all and (max-width: 1024px) { #container.sub #section section header .menu_path ul { width: calc((100% - 177px) / 3); min-width: 0; } #container.sub #section section header .menu_path ul li a span { display: flex; width: 100%; height: 63px; line-height: 20px; align-items: center; } } @media all and (max-width: 768px) { #container.sub:before { line-height: 100px; margin-bottom: 0; background-size: cover; font-size: 30px; } #container.sub #section section header .menu_path_box { position: static; height: 50px; line-height: 50px; } #container.sub #section section header .menu_path .home { width: 50px; height: 50px; } #container.sub #section section header .menu_path ul { width: calc((100% - 96px) / 3); height: 50px; } #container.sub #section section header .menu_path.child_count_1 ul { width: calc((100% - 96px) / 1); } #container.sub #section section header .menu_path.child_count_2 ul { width: calc((100% - 96px) / 2); } #container.sub #section section header .menu_path.child_count_3 ul { width: calc((100% - 96px) / 3); } #container.sub #section section header .menu_path.child_count_4 ul { width: calc((100% - 96px) / 4); } #container.sub #section section header .menu_path ul li a { height: 50px; padding-left: 10px; font-size: 14px; } #container.sub #section section header .menu_path ul li.fix_menu a { padding-right: 20px; } #container.sub #section section header .menu_path ul li.fix_menu a:after { right: 5px; width: 10px; background-size: contain; } #container.sub #section section header .menu_path ul li a span { height: 50px; line-height: 15px; } #container.sub #section section header .sub_utility ul:nth-child(1) { display: none; } #container.sub #section section header .sub_utility ul.dropdown { top: -50px; width: 50px; height: 50px; } #container.sub #section section header .sub_utility ul.dropdown:before { height: 50px; border-width: 0; } #container.sub #section section header .sub_utility ul li a { width: 50px; } #container.sub #section section header .tabmenu ul li a span { height: 3.5em; line-height: 1.1em; font-size: 14px; } } /* 내용 */ .contents .pagemaker a.button { line-height: 2em; padding-left: 1em; padding-right: 1em; font-size: inherit; } .contents .pagemaker a.button.link { padding-left: 2.5em; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAA+ElEQVQ4T6XTPUpDQRTF8V8ESSt2UVKJgr2QRkGj2xAbF6DYiHtQCAQs7Oy0cQOiwSptRK3cgFbpBBWUCyM8H3kfkGkezDv3P+fMvdNQf11iNycfNzCHM6xjpoC3iSbu0c5qAnCDeZziswBwl/5t4CEP+MIaRhVpFpOD5TzgB7H5WgJYwCDpXrCPq4gTEaoA+eIu3rCE4ypAFMfFreAZUfxeN0Ir2S4sDlCZg1ts4yl94+QevnH056IMsJrmYy9ju58AB3UAk5oyEfCBLQxrTPV1avdJ1sE5dnBRMomhj7ZF/zt4zAJmcVjxFkI/RkT45zQucao1NeAXNjI8l8UNXKwAAAAASUVORK5CYII=); background-repeat: no-repeat; background-position: 1em center; } .contents .pagemaker a.button.hwp { padding-left: 2.5em; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABaElEQVQ4T5WTz4qCUBTGNQzCN5gapnmgNiG5dFUbXRhuo1JELLV/u6KNIi0Dn6UXmGK6PkIL0xyOzM0u1eQcuNxzj9wf3/3OkaZ+w7btgGXZFI5JkmTrcrlcd5ynaZrVwjDcrdfrIX0DCNvt9lupVMKlpzvAptNpoOt68wpwXffA8/wHy7JPL0ZRlH2L45gyTZMELJfLb0EQ3hmGeakAAOPxONA0LVfgOA4SRbH6lwJMPp1OlGVZgaqqOWC73X41Go3Poh6AgsFgQCrodrvVR08A024DzuBBv9/PAYvF4tjpdGpFPZhMJiTA87xDq9Uq3IXZbBb0er1cgWVZSFGUKgzKq6BpOusCAdhsNnue5+vlcvnVfep8PlOj0Yh8wnw+P4qiWPuPAsJE27aRJEkP5wBPIJYGg+Q4DtlG3/f3HMfVi3bhDmCaJpJlubCJdwDDMIJKpZKCB3hwIMeeQA3n8DsjhHar1Wr4A4QO6BFJ42KkAAAAAElFTkSuQmCC); background-repeat: no-repeat; background-position: 1em center; } .contents .pagemaker a.button.excel { padding-left: 2.5em; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABjElEQVQ4T6WSPWsUURSGn/fOZnfWaErBYKM/IIUhhB2TFMHGMpBCsDeNVjvrV5VyJeMHWBnyB2z9ARLJrB9FIFpaiI2NhayC7I7ZuUdmiJAFN8vqrc7lnvPw3oejML5s/MdRAfD4dw7tTsbRKrBQAsAe9JPXdycB1FpRIlNzGLCJC38uL2Mmj779SvY+FNBTzWjBy00jy/tbnRSwvwOAMI7aoDvgM/PBnAKdw3z5PUn3eltpu6hHArgxP1Wdqe453KJhqWSzmLso8aI33VljE38yoEyxcgHyA2Cm9CL/KTyszXef7Hb/eBqd4KijHjeeGu5meTVt9B+m28clnwgIm9EKspfggmIoh6+V3F/qPX7zZWyC+u3F8wNf2Q/gLPDMG3NONAof2Y9sle39w9EObl2tVWvdV6VA4yA7M9UIvw9mCfL34E4bJFnSaY0E1OOlNY9dL2N63c8epR+Lst6M1r10DWSqDFr99tvPYyWO28phgPEcaWfc0PF3gw1h60erPMnocK/CeOnKv4/Db3fr4Lcf/gKEAAAAAElFTkSuQmCC); background-repeat: no-repeat; background-position: 1em center; } .contents .pagemaker a.button.pdf { padding-left: 2.5em; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABXElEQVQ4T6XTvUsCcRwG8Of309NDw6tO+geEXsjKpIgKKSR6I1obClxsaGlrbLghxKGCbCmirQaHhoZAoheyxaXBQHAQImi5CPKNzjvPi4IE84XOvvvz+cIDDxEXxjT840gjwMB3QH0TG/J1AWrjYPWtofjyjI+z07pIXYAZGILJNQwUFeRPjvQDRkcXrCurKNxfQ7q60A98JdoPw8gEN1FMJZsDuK0QpPMwCrGofoD1zgGEgOl3I3+8j1L6vSZSu0RKwQk7yIWCMDo6YVnyQbqJQMtloaSSUJ9SZawKoC02WP3rMNjtUF9FKIk4UFJh9kxBuo2A6XaicHcJJfH4jVQATE8f2JlF0DYemW0BWiZd/kS5VliW/VDiDzC5R5DdC1QCjHMQ7OQ0KG9HWtioXRo1wjw+ATkWhSbLv4BeF8weL3IHu4D293lUdkCIrnBVB82Mkojzo7PNBH8yn3vqiEcSFZ4EAAAAAElFTkSuQmCC); background-repeat: no-repeat; background-position: 1em center; } .contents .pagemaker a.button.zip { padding-left: 2.5em; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAADbklEQVQ4T03TbWxTVRgH8P+9d7e3xe42Y5uG4Na1WzO2CUOjBgFJICOIGYl+YDEDJkGcQcwWDURNjPGLZiaiIQoxiDURPzCDIjoMQbI3B4R0ZemA7HYra9fNsXXD9a7tPW3vyzG9lyWe5JycL//fOU/yPAwere5fepqWknJr7+AN5+G2Fue2zc85ksllZLMEhBAQRYFCsrgZDI2SrO7/+IOOUCHKFI5vz/zYW1JWun0+sYDT3/2Ezz56F3uadyIxn0AmkwJRCEiWQNc0XPj9KjjeYSiE/HD6q08Pm0DnsQ/JU+s32imlGB4ehqu4GILAI69q0FQVqqpC1w1wLIN4fBprq7yIRyOTPRfPV5vA0c7jcn3DBhEMg3w+D5LLQSE5GJoGw6AwqAFKDbAcj8W5GRTZ7JiajEhXei7UmUD70ffkdQ3rRZ7jkCkEDQO6rkHXdGiaAQMUBgCOZTE7HQMDDrHYhNR75ZIFHHqrQ17X0Cgm5v7BeHjcfJEvEqAQBaqugxMEsCWrwbAcBGUZ4mMuxGMRaeCvPyyg7Y235dq6DeKNwWt4/3gHvFUe9PX1YcvWF8HxRbjcP4D5A/tRCuDcjt2o9tVjJjwmDfX/aQGtbe2y11cv3g0FcM7/DS7+dgnR6BTsDjv2HTwIhbK4+0Q5KgC8ueNleNw+zE6MSbeGrlrA3tZDsru6VhwbDeLE55+gu/tnLCwsIhqL4bXXD6D26ech1XhQCeDI1iZ43T7MTYal4M1eC3ilpU2ucNeId0IBnD11Av8uLZkt4vf78cXJkxgKjiC8eRNqALyz8QWzhIVYRAoFBiyg+dV98lq3V7wduI4zp75EWVk5MoqCVCoFpyhiUV4GOz6OTDqF9q/PorLCg4cPpqV7I9ctYFdzi7zmSY8o3RvBr+e/B8uw0AwDDMOafVFZVYVYYg6R+1F0HjmG4tWPY3nxgRS+c8sCtmzfLZeUrRGnJiWMBgYBhlsZEQB0peMxMxPHpm0vwekqRzaTlKYmRi3AV9eY5W0OIZ2S8ewzjbALNhjUioJSc2I4ljPL6uv/G0W8HXktdz/9cLbGBFyu0qamXTs9Xo+nhOd5p822ysHz3CqWZW0MSzmqg+Z1Tc3lcnmGUjmdlpMOQQh2dXX1m8D/F6XUBsDxaBfuhXoKn1EBZAEQhmGUlcx/wuiPIFcN3gAAAAAASUVORK5CYII=); background-repeat: no-repeat; background-position: 1em center; } .contents .pagemaker a.button.txt { padding-left: 2.5em; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABaElEQVQ4T5WTz4qCUBTGNQzCN5gapnmgNiG5dFUbXRhuo1JELLV/u6KNIi0Dn6UXmGK6PkIL0xyOzM0u1eQcuNxzj9wf3/3OkaZ+w7btgGXZFI5JkmTrcrlcd5ynaZrVwjDcrdfrIX0DCNvt9lupVMKlpzvAptNpoOt68wpwXffA8/wHy7JPL0ZRlH2L45gyTZMELJfLb0EQ3hmGeakAAOPxONA0LVfgOA4SRbH6lwJMPp1OlGVZgaqqOWC73X41Go3Poh6AgsFgQCrodrvVR08A024DzuBBv9/PAYvF4tjpdGpFPZhMJiTA87xDq9Uq3IXZbBb0er1cgWVZSFGUKgzKq6BpOusCAdhsNnue5+vlcvnVfep8PlOj0Yh8wnw+P4qiWPuPAsJE27aRJEkP5wBPIJYGg+Q4DtlG3/f3HMfVi3bhDmCaJpJlubCJdwDDMIJKpZKCB3hwIMeeQA3n8DsjhHar1Wr4A4QO6BFJ42KkAAAAAElFTkSuQmCC); background-repeat: no-repeat; background-position: 1em center; } .contents .pagemaker a.button.mp3 { padding-left: 2.5em; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAA8UlEQVQ4T7XTsSuFYRTH8c/NYr2zKCu7RcoiRgOFTQaLUXR3ScI/YDRQzHRXDP4BNiuT8gdQOrfz1tvb+7pxOeNzzvP9/c7v6WkZsFoD3lcHaGMXU/hMgSE84BDvZdEqYBSn2Mdtxd0sOljHS9GrAs6wg9eG1Uawl5DeSBkwhq0EfBfNEY4LkTJgEcO46BPsWuZwXXWwgg9c9QEsZb83V3bwa0Akf4BxnCCeMV6irjbxljk9YzschPJ5Ti8jLMZZXYXtyOiymP8TwAJukjiHDaw2OAjlWK+b/fkixOkM9B4TeGoATOIRM9m/+5fP9KMP+gXB5i0aqbxrlgAAAABJRU5ErkJggg==); background-repeat: no-repeat; background-position: 1em center; } .contents .pagemaker a.button.mp4 { padding-left: 2.5em; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAl0lEQVQ4T+XSPQ5BYRCF4ecmfgodlaioxBZQqlUSi2ANFJRsQ3I1NsES2A3yJZ9EIVzu7Uw9886ZOSeRs5Kc8woBVLFC+4OaCxa4xr4W6kHBGIeMpwxwxBB7zAJgil1GwAhdbFHG5BdAUFuLC/8V0MMGpccTv7Gxj1O0McU8uFDBEp03Vt5wxvopSE00Colyxgy9bsut4A5IEhwK9UkRpwAAAABJRU5ErkJggg==); background-repeat: no-repeat; background-position: 1em center; } .contents .pagemaker a.button.mv { padding-left: 2.5em; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABYklEQVQ4T6WTv0tCURzFz/e+DGzJbAtNqEHFZxBGEEVr7RXtDdEWuNsSBO1lDf0BESjREIg4RKCLNiRBP7BoS4Ksl9rj5bvfUBezdPDd9Z7vh/M991yCxUMW52EdkA2FbEN6eRuEBWZyMEu7EMIuGTZBUqk7lBBSAAYkdAAVUvAuJcfHb+52qKB6NwA66GkVxjIVVP8JwCvtALb1V+nbGOgGZpZ7dK/6LxXwXLtwJHaahvZZewmHA7L0OvwfSAIxegz6rpgx2S5wnZ1nbB7PjDTNylcykS1GItNk6PZWHQMJegj4rgUh2AnQCNE0NS0azZeODmd/6ZhTXR0obveUnstliuHNCWgfjj851R0UVN8FgPn2y8G19XQ5lRw1n59cnYJsZqB6jxm02tMzEvat9QBYonoTnUZ1i2u8SASnFNIugH5m0ddwRc26S8gaAENAqZjgN4UQH8vf7lr/Cz3t3jL0A+Yhkg8nxyDyAAAAAElFTkSuQmCC); background-repeat: no-repeat; background-position: 1em center; } body .contents .pc_content, body .contents .pc_contents { display: block; } body .contents table.pc_content, body .contents table.pc_contents { display: table; } body .contents .mobile_content, body .contents .mobile_contents, body .contents table.mobile_content, body .contents table.mobile_contents { display: none; } .contents .indent1 { margin-left: 20px !important; } .contents .indent2 { margin-left: 40px !important; } .contents .indent3 { margin-left: 60px !important; } .contents .indent4 { margin-left: 80px !important; } .contents .indent5 { margin-left: 100px !important; } .contents table.indent1 { width: calc(100% - 20px) !important; } .contents table.indent2 { width: calc(100% - 40px) !important; } .contents table.indent3 { width: calc(100% - 60px) !important; } .contents table.indent4 { width: calc(100% - 80px) !important; } .contents table.indent5 { width: calc(100% - 100px) !important; } .contents h3 { clear: both; line-height: 2em; padding: 0 0 0 36px; margin: 50px 0 20px 0; background: url(../image/title_01.png) no-repeat left center; font-size: 1.3em; color: #1b1b1b; font-weight: bold; } .contents h4 { clear: both; line-height: 2em; padding: 0 0 0 25px; margin: 35px 0 20px 29px; background: url(../image/title_02.png) no-repeat left center; font-size: 1.2em; font-weight: 500; color: #1b1b1b; } .contents h5 { position: relative; clear: both; line-height: 2em; padding: 0 0 0 17px; margin: 20px 0 20px 40px; background: url(../image/title_03.png) no-repeat left center; font-size: 1.1em; font-weight: 500; color: #1b1b1b; } .contents h5:before { content: none; } .contents h3 + h4 { margin-top: 0; } .contents h4 + h5 { margin-top: 0; } .contents .icon_address { background-image: url(../image/icon_address.png); } .contents .icon_subway { background-image: url(../image/icon_subway.png); } .contents .icon_bus { background-image: url(../image/icon_bus.png); } .contents .icon_tel { background-image: url(../image/icon_tel.png); } .contents .icon_fax { background-image: url(../image/icon_fax.png); } .contents .icon_car2 { background-image: url(../image/icon_car2.png); } .contents .icon_park2 { background-image: url(../image/icon_park2.png); } .contents .traffic_info, .contents .traffic_info * { font-size: 18px !important; } .contents .traffic_info strong { font-weight: 600; color: #000; } .contents .traffic_info em { font-weight: normal; font-style: normal; color: #347cc1; } .contents .proc_kakao_map_print { font-size: 13px; font-style: normal; color: #000; } .contents table { border-width: 1px 0 0 0; border-color: #242424 transparent transparent transparent; font-size: inherit; } .contents table thead tr { border-bottom: 1px solid #dddee0; } .contents table thead tr th, .contents table thead tr td { height: 49px; line-height: 1.5em; padding: 5px; border-width: 0; border-style: solid; border-color: #e1e1e1; color: #4e4e4e; font-size: inherit; } .contents table thead tr th { background-color: #fafafa; font-weight: 500; text-align: center; } .contents table thead tr th + th, .contents table thead tr th + td, .contents table thead tr td + th { border-width: 0 0 0 1px; } .contents table thead tr > *:last-child { border-right-width: 1px; } .contents table thead tr:nth-child(2) th, .contents table thead tr:nth-child(2) td { background-color: #fafafa; } .contents table tbody tr { border-bottom: 1px solid #dddee0; } .contents table tbody tr th, .contents table tbody tr td { height: 49px; line-height: 1.5em; padding: 5px; border-width: 0; border-style: solid; border-color: #e1e1e1; color: #4e4e4e; font-size: inherit; } .contents table tbody tr th { background-color: #fafafa; text-align: center; font-weight: 500; } .contents table tbody tr th + th, .contents table tbody tr th + td, .contents table tbody tr td + th, .contents table tbody tr td + td { border-width: 0 0 0 1px; } .contents table tbody tr { border-bottom: 1px solid #dddee0; } .contents table tfoot tr th, .contents table tfoot tr td { height: 49px; line-height: 1.5em; padding: 5px; border-width: 0; border-style: solid; border-color: #e1e1e1; background-color: #fafafa; color: #4e4e4e; font-size: inherit; } .contents table tfoot tr th { text-align: center; font-weight: 500; } .contents table tfoot tr th + th, .contents table tfoot tr th + td, .contents table tfoot tr td + th, .contents table tfoot tr td + td { border-width: 0 0 0 1px; } .contents .vr_button { display: inline-block; width: 200px; line-height: 40px; background-color: #2657a7; border-radius: 5px; text-align: center; color: #fff; font-size: 18px; font-weight: bold; } .contents .auto_image_gallery_title { position: relative; float: left; width: 50%; height: 380px; padding: 0 40px; margin: 0 0 50px 0 !important; box-sizing: border-box; background-color: #f6f6f6; color: #000; overflow-y: auto } .contents .auto_image_gallery_title:after { content: none; } .contents .auto_image_gallery_title strong { display: block; width: 100%; line-height: 40px; padding-top: 70px; box-sizing: border-box; font-size: 28px; color: #000; vertical-align: middle; } .contents .auto_image_gallery_title span { display: block; width: 100%; line-height: 25px; padding-top: 20px; font-size: 18px; vertical-align: middle; } .contents .auto_image_gallery_title > br { display: none; } .contents .auto_image_gallery_title em { display: block; width: 100%; line-height: 25px; padding-top: 30px; font-size: 18px; font-style: normal; color: #000; vertical-align: middle; } .contents .auto_image_gallery { position: relative; float: left; width: 50%; height: 380px; margin: 0 0 50px 0 !important; } .contents .auto_image_gallery img { position: absolute; left: 0; top: 0; z-index: 1; width: 100%; height: 100%; border: 0 none; } .contents .auto_image_gallery .in_title { position: absolute; left: 0; bottom: 0; z-index: 2; width: 100%; height: 60px; line-height: 60px; padding: 0 0 0 20px; box-sizing: border-box; background-color: #353535; color: #fff; font-size: 16px; } .contents .auto_image_gallery .in_left { position: absolute; right: 0; bottom: 0; z-index: 2; width: 45px; height: 60px; line-height: 60px; margin-right: 135px; text-align: center; color: #fff; font-size: 17px; font-weight: bold; } .contents .auto_image_gallery .in_right { position: absolute; right: 0; bottom: 0; z-index: 2; width: 45px; height: 60px; line-height: 60px; text-align: center; color: #fff; font-size: 17px; font-weight: bold; } .contents .auto_image_gallery .in_statee { position: absolute; right: 0; bottom: 0; z-index: 2; width: 90px; height: 60px; line-height: 60px; margin-right: 45px; text-align: center; color: #fff; font-size: 18px; font-weight: bold; } .contents .auto_image_gallery .in_statee strong { color: #fff; } .contents .auto_image_gallery .in_statee em { color: #fff; font-weight: normal; font-size: 16px; } .contents .auto_image_gallery .in_statee span { display: inline-block; padding: 0 10px; } @media all and (max-width: 1024px) { .contents table tbody tr td input, .contents table tbody tr td select, .contents table tbody tr td textarea { max-width: 100%; } } @media all and (max-width:1200px) { .contents .auto_image_gallery { position: relative; float: none !important; width: auto; width: auto; max-width: 600px; height: 0; padding-top: 61.666%; margin: 0 auto !important; } .contents .auto_image_gallery_title { float: none !important; width: auto; height: auto; padding: 20px !important; margin: 0 !important; } .contents .auto_image_gallery_title strong { height: auto; line-height: 33px; padding: 17px 0; font-size: 24px; } .contents .auto_image_gallery_title span { width: auto; height: auto; line-height: 20px; padding: 0 0 20px 0; font-size: 13px; } .contents .auto_image_gallery_title em { font-size: 13px; } .contents .auto_image_gallery .in_title { padding-right: 70px; padding-left: 10px; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .contents .auto_image_gallery .in_left { width: 30px; height: 30px; line-height: 30px; margin-right: 30px; } .contents .auto_image_gallery .in_right { width: 30px; height: 30px; line-height: 30px; } .contents .auto_image_gallery .in_statee { bottom: 30px; width: 60px; height: 30px; line-height: 30px; margin-right: 0; font-size: 12px; } .contents .auto_image_gallery .in_statee span { padding: 0 5px; } .contents .auto_image_gallery .in_statee em { font-size: 13px; } } .contents a.download { position: relative; display: inline-block; line-height: 40px; padding: 0 20px 0 61px; margin-left: 30px; background: #347cc1 url(../image/icon_download.png) no-repeat 12px center; color: #fff; font-size: 18px; white-space: nowrap; } .contents a.download:before { position: absolute; left: 39px; top: 0; width: 1px; height: 100%; background-color: rgba(255, 255, 255, 0.5); content: ""; } .contents a.download:focus, .contents a.download:hover, .contents a.download:active { background-color: #666; } @media all and (max-width:1200px) { .contents a.download { line-height: 26px; padding-top: 7px; padding-bottom: 7px; margin: 0 auto; white-space: normal; text-align: left; } } .contents p.msgbox { padding: 20px 30px 30px 30px; border: 1px solid #e7e7e7; background-color: #fafafa; color: @666; } .contents p.msgbox strong { display: inline-block; line-height: 44px; font-size: 1.1em; color: #000 !important; } /* 라운드 제목 내용 */ .contents .in_round_title { position: relative; min-height: 40px; line-height: 25px; padding-left: 120px; padding-top: 6px; box-sizing: border-box; } .contents .in_round_title .round_title { position: absolute; left: 0; top: 0; min-width: 95px; line-height: 40px; border-radius: 18px; box-sizing: border-box; text-align: center; background-color: #2657a7; color: #fff; font-weight: 500; } .contents .in_round_title strong { color: inherit; box-sizing: border-box; } .contents .in_round_title.size100 { height: 100px; min-height: 100px; padding-left: 120px; } .contents .in_round_title.size100.oneline { padding-top: 20px; } .contents .in_round_title.size100 .round_title { width: 100px; height: 100px; line-height: 100px; border-radius: 100px; } .contents .in_round_title.size200 { padding-left: 230px; min-height: 60px; } .contents .in_round_title.size200.oneline { padding-top: 20px; } .contents .in_round_title.size200 .round_title { min-width: 200px; line-height: 70px; border-radius: 33px; } .contents .in_round_title.table { display: table; width: 100%; } .contents .in_round_title.table > span { display: table-cell; width: 100%; height: 100%; vertical-align: middle; } @media all and (max-width: 500px) { .contents .in_round_title { padding-left: 0 !important; } .contents .in_round_title .round_title { position: static; display: block; margin-bottom: 15px; } } @media all and (max-width:1200px) { .kntool_popup_layerpopup { left: 0 !important; max-width: 100% !important; height: auto !important; } body { min-width: 320px; } body .contents .pc_content, body .contents .pc_contents, body .contents table.pc_content, body .contents table.pc_contents { display: none !important; } body .contents .mobile_content, body .contents .mobile_contents { display: block !important; } body .contents table.mobile_content, body .contents table.mobile_contents { display: table !important; } * { -webkit-text-size-adjust: none; } body { font-size: 14px; } #body { min-width: 100%; } .contents .indent1 { margin-left: 0 !important; } .contents .indent2 { margin-left: 0 !important; } .contents .indent3 { margin-left: 0 !important; } .contents .indent4 { margin-left: 0 !important; } .contents .indent5 { margin-left: 0 !important; } .contents table.indent1 { width: 100% !important; } .contents table.indent2 { width: 100% !important; } .contents table.indent3 { width: 100% !important; } .contents table.indent4 { width: 100% !important; } .contents table.indent5 { width: 100% !important; } .contents h3, .contents h4, .contents h5, .contents h6 { margin-left: 0; } } /* 정보제공부서 */ #contents .manager_info { padding: 11px 12px; margin-top: 50px; border: 1px solid #ececec; background-color: #fafafa; } #contents .manager_info:after { display: block; clear: both; content: ""; } #contents .manager_info h3 { position: relative; float: left; height: 28px; line-height: 28px; padding: 0 16px 0 9px; margin: 0 25px 0 0; background: #677276; font-size: 16px; color: #fff; font-weight: normal; } #contents .manager_info h3:before { position: absolute; right: -20px; border-width: 14px 0 14px 20px; border-style: solid; border-color: transparent transparent transparent #677276; content: ""; } #contents .manager_info h3:after { position: absolute; right: -4px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 8px; background-color: #fff; content: ""; } #contents .manager_info dl { float: left; line-height: 28px; padding: 0; margin: 0; list-style: none; } #contents .manager_info dl dt { position: absolute; width: 0; height: 0; padding: 0; margin: 0; list-style: none; font-size: 0; overflow: hidden; } #contents .manager_info dl dd { float: left; padding: 0 0 0 10px; margin: 0; list-style: none; } #contents .manager_info dl dd:last-child:before { display: inline; content: "( TEL : "; } #contents .manager_info dl dd:last-child:after { display: inline; content: " )"; } @media all and (max-width:600px) { #contents .manager_info h3 { margin-top: 14px; } #contents .manager_info dl { float: right; } #contents .manager_info dl dd { float: none; clear: both; text-align: right; white-space: nowrap; } } a.file img { overflow: hidden; } @media all and ( max-width: 767px ) { .contents div.table_box { clear: both; width: 100%; overflow: hidden; overflow-x: auto; } .contents div.table_box:before { display: block; line-height: 30px; content: "* 좌우로 이동하여 표 내용을 보실 수 있습니다."; color: #3f97d0; } .contents div.table_box table { min-width: 840px; margin-top: 10px; margin-bottom: 20px; } } @media all and (max-width: 768px) { .modules_board .proc_list .search .tabmenu ul { display: flex; gap: 5px; } .modules_board .proc_list .search .tabmenu ul:after { content: none; } .modules_board .proc_list .search .tabmenu ul li { flex: 1 1 20%; width: auto !important; padding: 0; } } @media all and (max-width: 425px) { .modules_board .proc_list .search form fieldset { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 5px; padding: 5px; } .modules_board .proc_list .search form fieldset:after { content: none; } .modules_board .proc_list .search form fieldset p.category, .modules_board .proc_list .search form fieldset p.page_size, .modules_board .proc_list .search form fieldset p.search_field, .modules_board .proc_list .search form fieldset p.category { flex: 1 1 30%; } .modules_board .proc_list .search form fieldset p.search_word { flex: 1 1 calc(70% - 5px); } .modules_board .proc_list .search form fieldset p.search_button { flex: 1 1 30%; } .modules_board .proc_list .search form fieldset p input[type="text"], .modules_board .proc_list .search form fieldset p select, .modules_board .proc_list .search form fieldset p .button, .modules_board .proc_list .search form fieldset p > * { width: 100% !important; margin: 0 !important; box-sizing: border-box; } .modules_board .proc_list .search form fieldset p:after { content: none; } }