/*ALL CSS-----------------------------------------------------*/ /* c o m m o n */ .n_con {width:100%; max-width:1400px; margin:0 auto;} #mb_login .n_con {max-width:650px;} .hd_admin {position:fixed; bottom:30px; left:30px;} .hd_admin a {display:inline-block; padding:12px 26px; background:#004f95; color:#fff; font-weight:500;} .n_titleTxt{text-align: center; margin-bottom:80px;} .n_titleTxt h3{font-size: 2.5rem; font-weight: 600; font-family: Arial, Helvetica, sans-serif;} .n_titleTxt h3 i{font-family:'Noto Sans KR'} /* header */ #k_header {width:100%; height:85px; background:#fff; position: fixed; top:0; border-bottom:1px solid #ececec; z-index: 99999;} #k_header .n_logo {float:left; margin-top:26px;} #k_header .n_d_menu {float:right;} #k_header .n_d_menu > ul {float:right; margin-right:100px; position: relative; z-index: 9999;} @media screen and (max-width: 1360px){ #k_header .n_d_menu > ul {margin-right:50px;} } #k_header .n_d_menu > ul > li {float:left; font-weight:500; margin-right:34px; text-align: center;} #k_header .n_d_menu > ul > li:last-child {margin-right:0;} #k_header .n_d_menu > ul > li > a {padding:30px 12px; font-size: 1.125rem; transition:all 0.25s ease-in; line-height: 85px;} #k_header .n_d_menu > ul > li a:hover {color:#004f95} /* #k_header .n_d_menu .k_menu_4 > a {padding:30px;} */ #k_header .n_d_menu .n_depth {display: none;} #k_header .n_d_menu .n_depth > li > a {font-size: 1rem; font-weight: 300; display: block; line-height: 60px;} #k_header .n_d_menu .n_depth > li:first-child > a {margin-top:10px;} #k_header .n_d_menu .n_menuBtn {float:right; margin-top:24px; width:40px; height:40px; position: relative;} #k_header .n_d_menu .n_menuBtn span {display: block; width:7px; height:7px; background:#004f95; position: absolute; transition:0.2s;} #k_header .n_d_menu .n_d_menu_bg {display: none; width:100%; height:210px; background:#fff; position: absolute; top:85px; left:0; z-index: 9998; border-bottom:1px solid #ececec;} /* ------------------------------- 메뉴 버튼 호버 ------------------------------- */ #k_header .n_d_menu .n_menuBtn span:nth-child(1) {top:5px; left:6px} #k_header .n_d_menu .n_menuBtn span:nth-child(2) {top:5px; left:17px} #k_header .n_d_menu .n_menuBtn span:nth-child(3) {top:5px; left:28px;} #k_header .n_d_menu .n_menuBtn span:nth-child(4) {top:16px; left:6px;} #k_header .n_d_menu .n_menuBtn span:nth-child(5) {top:16px; left:17px;} #k_header .n_d_menu .n_menuBtn span:nth-child(6) {top:16px; left:28px;} #k_header .n_d_menu .n_menuBtn span:nth-child(7) {top:27px; left:6px} #k_header .n_d_menu .n_menuBtn span:nth-child(8) {top:27px; left:17px;} #k_header .n_d_menu .n_menuBtn span:nth-child(9) {top:27px; left:28px;} #k_header .n_d_menu .n_menuBtn:hover span:nth-child(1) {top:2px; left:3px} #k_header .n_d_menu .n_menuBtn:hover span:nth-child(2) {top:2px; left:17px} #k_header .n_d_menu .n_menuBtn:hover span:nth-child(3) {top:2px; left:32px;} #k_header .n_d_menu .n_menuBtn:hover span:nth-child(4) {top:16px; left:3px;} #k_header .n_d_menu .n_menuBtn:hover span:nth-child(5) {top:16px; left:17px;} #k_header .n_d_menu .n_menuBtn:hover span:nth-child(6) {top:16px; left:32px;} #k_header .n_d_menu .n_menuBtn:hover span:nth-child(7) {top:31px; left:3px} #k_header .n_d_menu .n_menuBtn:hover span:nth-child(8) {top:31px; left:17px;} #k_header .n_d_menu .n_menuBtn:hover span:nth-child(9) {top:31px; left:32px;} /* -------------------------------------------------------------------------- */ #k_header .n_d_menu .n_menuBtn a {display: inline-block; padding:30px 0 30px 18px;} #k_header .n_d_menu .n_menuBtn img {transition:all 0.3s;} #k_header .n_m_menu {display: block; visibility: hidden; width:100%; height: 100%; position: fixed; top:0; left:0; z-index: 999999; background:rgba(0,0,0,0.6); opacity: 0; transition:all 0.3s ease;} #k_header .n_m_menu.on {visibility: visible; opacity: 1;} #k_header .n_m_menu .n_m_inner {width:70%; height:100%; max-width:350px; background:#fff; position: absolute; right:-1000px; transition:all 0.25s ease-in-out;} #k_header .n_m_menu.on .n_m_inner {right:0;} #k_header .n_m_menu .n_m_inner .n_btn_close {width:50px; height:50px; position: absolute; top:10px; right:10px;} #k_header .n_m_menu .n_m_inner .n_btn_close span {display: inline-block; width:45px; height:3px; background:#004f95; position: absolute; left:3px; top:23px; transition:all 0.3s;} #k_header .n_m_menu .n_m_inner .n_btn_close span:nth-child(1) {transform:rotate(45deg);} #k_header .n_m_menu .n_m_inner .n_btn_close span:nth-child(2) {transform:rotate(-45deg)} #k_header .n_m_menu .n_m_inner .n_btn_close:hover span {transform:unset;} #k_header .n_m_menu .n_m_inner > a img {margin-top:20px; margin-left:14px;} #k_header .n_m_menu .n_m_inner > ul {margin-top:50px; text-align:center;} #k_header .n_m_menu .n_m_inner > ul > li > a {display: inline-block; border-bottom:1px solid #ececec; width: 100%; padding:15px 0; font-size: 1.125rem; font-weight: 500;} #k_header .n_m_menu .n_m_inner > ul > li a:hover {color:#004f95;} #k_header .n_m_menu .n_m_inner .n_depth {padding:6px 0; background:#ececec; display: none;} #k_header .n_m_menu .n_m_inner .n_depth > li > a {padding:10px 0; display: block;} #k_header .n_m_menu .n_m_inner .n_m_menu_txt {text-align:center; margin-top:20px;} #k_header .n_m_menu .n_m_inner .n_m_menu_txt p {margin-bottom:8px;} #k_header .n_m_menu .n_m_inner .n_m_menu_txt p b {font-weight: 500;} #k_header .n_m_menu .n_m_inner .n_m_quick_menu {text-align:center;} #k_header .n_m_menu .n_m_inner .n_m_quick_menu> div {display:inline-block; margin-right:8px;} #k_header .n_m_menu .n_m_inner .n_m_quick_menu> div:last-child {margin-right:0;} #k_header .n_m_quick_menu {margin-top:20px;} #k_header .n_m_quick_menu a {display:inline-block; width:45px; height:45px; background:#01549e; position:relative; border-radius: 10px;} #k_header .n_m_quick_menu div:last-child a {background:#fee800;} #k_header .n_m_quick_menu img {width:28px; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);} #k_header .n_quick_menu {position:fixed; bottom:30px; right:30px; z-index:2;} #k_header .n_quick_menu div {margin-bottom: 4px} #k_header .n_quick_menu div:last-child {margin-bottom: 0} #k_header .n_quick_menu a {display:inline-block; width:55px; height:55px; background:#01549e; position:relative; border-radius: 10px;} #k_header .n_quick_menu div:last-child a {background:#fee800;} #k_header .n_quick_menu img {position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);} /* mainVisual */ #n_mainVisual {margin-top:85px; overflow: hidden; height: 760px;} #n_mainVisual .n_visual {width:100%; height:760px; background:url("/img/main_visual/visual01.jpg") no-repeat center 75%; background-size:cover; position: relative; cursor: grab;} #n_mainVisual .n_visual02 {background:url("/img/main_visual/visual02.jpg") no-repeat center 75%; background-size:cover;} #n_mainVisual .n_visual03 {background:url("/img/main_visual/visual03.jpg") no-repeat center 75%; background-size:cover;} #n_mainVisual .n_mv_txtBox {width:100%; position: absolute; top:50%; left:50%; transform:translate(-50%,-50%); text-align: center; color:#fff;} #n_mainVisual .n_mv_txtBox h3 {font-size: 2.5rem; font-weight: 300;} #n_mainVisual .n_mv_txtBox h3 b {font-weight: 500;} #n_mainVisual .n_mv_txtBox h3 i {font-weight: 200;} #n_mainVisual .n_mv_txtBox p {margin-top:20px; line-height: 20px;} #n_mainVisual .n_mv_txtBox a {display: inline-block; border:1px solid #fff; padding:10px 30px; margin-top:100px; transition:all 0.3s ease; color:#fff;} #n_mainVisual .n_mv_txtBox a:hover {border:1px solid #004f95; background:#004f95;} /* ------------------------- 슬라이드 버튼 css -------------------------------------------------------------------------------------------------------------------------- */ .slick-dots {position: absolute; left:50%; bottom: 50px; transform:translateX(-50%);} .slick-dots > li {display: inline-block; margin-right: 20px; font-size: 0; width: 13px; height: 13px; background: #fff; border-radius: 100%; cursor: pointer;} .slick-dots > li:last-child {margin-right:0;} .slick-dots > li.slick-active {background:#004f95;} /* ---------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* section1 */ #n_section1 {padding:100px 0; overflow:hidden;} #n_section1 .n_sc1_list > div {float:left; width:47.5%; margin-right:2.5%; height: 100%; position: relative; height: 400px;} #n_section1 .n_sc1_list > div:last-child {margin-right:0; margin-left:2.5%;} #n_section1 .n_sc1_list .n_sc1_box1 {background:url("/img/section1/sc1_bg1.jpg")no-repeat right; background-size:cover;} #n_section1 .n_sc1_list .n_sc1_box2 {background:url("/img/section1/sc1_bg2.jpg")no-repeat right; background-size:cover;} #n_section1 .n_sc1_list .n_sc1_box_txtBox {width:50%; position: absolute; left:0; bottom:0; background:#fff; padding:24px; word-break: keep-all; z-index: 3;} #n_section1 .n_sc1_list .n_sc1_box_txtBox h3 {font-size: 1.25rem; font-weight: 600;} #n_section1 .n_sc1_list .n_sc1_box_txtBox p {color:#999; margin-top: 20px; font-weight: 300;} #n_section1 .n_sc1_list .n_sc1_box_link {position: absolute; right:50px; bottom:22px; z-index: 3;} #n_section1 .n_sc1_list .n_sc1_box_link a {display: inline-block; padding:8px 50px; border:1px solid #fff; background:rgba(38,46,67,0.75); color:#fff; font-weight: 400; transition:all 0.3s ease;} #n_section1 .n_sc1_list .n_sc1_box_link a:hover {border:1px solid #004f95; background:#004f95;} /* section2 */ #n_section2 {width:100%; background:url("/img/section2/sc2_bg.jpg") no-repeat; background-size:cover; padding:100px 0;} #n_section2 .n_titleTxt {color:#fff;} #n_section2 .n_sc2_con {width:95%; margin:0 auto;} #n_section2 .n_sc2_list > div {float:left; width:19%; margin-right:1%;} #n_section2 .n_sc2_list > div:first-child {margin-left:0.5%;} #n_section2 .n_sc2_list > div:last-child {margin-right:0;} #n_section2 .n_sc2_imgBox img {vertical-align: top; width: 100%;} #n_section2 .n_sc2_txtBox {background:#fff; text-align:center; padding:30px 0; word-break: keep-all;} #n_section2 .n_sc2_txtBox h3 {font-size: 1.25rem; font-weight: 400; margin-bottom:10px;} #n_section2 .n_sc2_txtBox p {font-size: 0.875rem; color:#999;} #n_sc2_banner {width:100%; height:250px; background:url("/img/section2/sc2_banner.jpg")no-repeat center 65%; background-size:cover; background-attachment:fixed; position:relative;} #n_sc2_banner .n_sc2_b_txt {width:100%; text-align:center;position:absolute;top:50%; left:50%; transform:translate(-50%,-50%); color:#fff; font-weight:300} #n_sc2_banner .n_sc2_b_txt h3 {font-size:2.25rem; margin-bottom:6px; display:inline-block;} #n_sc2_banner .n_sc2_b_txt h3:first-child:after {content:"/"; display:inline-block; margin:0 14px;} #n_sc2_banner .n_sc2_b_txt h3 b {font-weight:600;} /* section3 */ #n_section3 {padding:100px 0; background:#fafafa;} /* box1 */ #n_section3 .n_sc3_list > div {float:left; width:47.5%; margin-right:2.5%;} #n_section3 .n_sc3_list > div:last-child {margin-right:0; margin-left:2.5%;} #n_section3 .n_sc3_notice a > div {float:left;} #n_section3 .n_sc3_notice a {padding:15px 26px; display: block;} #n_section3 .n_sc3_notice a > div:last-child {float:right; position: absolute; top:50%; right:20px; transform:translateY(-50%); font-size: 2rem;} #n_section3 .n_sc3_notice .n_noticeList {position: relative; margin-bottom:18px; border:1px solid #ececec; transition:all 0.3s ease;} #n_section3 .n_sc3_notice .n_noticeList:last-child {margin-bottom:0;} #n_section3 .n_sc3_notice .n_noticeList:hover {border-color:#004f95;} #n_section3 .n_sc3_notice .n_notice_day {text-align: center;} #n_section3 .n_sc3_notice .n_notice_day h3{font-size: 2.875rem; font-weight: 500; color:#004f95} #n_section3 .n_sc3_notice .n_notice_day h4{font-weight: 500; color:#004f95} #n_section3 .n_sc3_notice .n_notice_txt {width:100%; position: absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-size: 1.25rem; font-weight: 500; text-align: center;} #n_section3 .n_sc3_notice .n_notice_arrow i {font-weight: 600; color:#004f95;} /* box2 */ #n_section3 .n_sc3_give {height: 550px;} #n_section3 .n_sc3_give .n_sc3_giveList:nth-child(1) {height:48%; background:url("/img/section3/sc3_give1.jpg")no-repeat; background-size: cover; position: relative;} #n_section3 .n_sc3_give .n_sc3_giveList:nth-child(2) {height:48%; margin-top:3%; background:url("/img/section3/sc3_give2.jpg")no-repeat; background-size: cover; position: relative;} #n_section3 .n_sc3_give .n_sc3_giveList_txt {width:100%;; position: absolute; top:50%; left:50%; transform:translate(-50%,-50%); color:#fff; text-align: center;} #n_section3 .n_sc3_give .n_sc3_giveList_txt h3 {font-size: 2rem; font-weight: 600; margin-bottom:14px;} #n_section3 .n_sc3_give .n_sc3_giveList_txt a {display: inline-block; border:1px solid #fff; padding:10px 36px; margin-top:20px; transition:all 0.3s ease; color:#fff;} #n_section3 .n_sc3_give .n_sc3_giveList_txt a:hover {background:#004f95; border-color:#004f95;} /* section4 */ #n_section4 {width:100%; height: 390px; background:url("/img/section4/s4_bg.jpg")no-repeat; background-size:cover;} #n_section4 .n_sc4_txtBg{width:50%; height: 100%; background:rgba(0,0,0,0.5); position: relative;} #n_section4 .n_sc4_txtBg .n_sc4_txtBox {position: absolute; top:50%; left:50%; transform:translate(-50%,-50%); color:#fff;} #n_section4 .n_sc4_txtBg .n_sc4_txtBox h3{font-size: 2.75rem; font-weight: 600; margin-bottom:20px;} #n_section4 .n_sc4_txtBg .n_sc4_txtBox span:nth-of-type(1){margin-right: 20px;} #n_section4 .n_sc4_txtBg .n_sc4_txtBox p{margin:30px 0;} #n_section4 .n_sc4_txtBg .n_sc4_txtBox a{display: inline-block; padding:10px 60px; border:1px solid #fff; transition:all 0.3s ease; color:#fff;} #n_section4 .n_sc4_txtBg .n_sc4_txtBox a:hover{border:1px solid #004f95; background:#004f95;} /* footer */ .k_footer {padding:60px 0; background:#232e45; color:#fff;} .k_footer .n_f_box > div {float:left;} .k_footer .n_f_box > div:last-child {float:right;} .k_footer .n_flogoBox {margin-top:25px; margin-right:120px;} .k_footer .n_f_txtBox > p {margin-bottom:8px;} .k_footer .n_f_txtBox > p:last-child {margin-bottom:0; color:#ccc;} .k_footer .n_f_snsBox > a {margin-left:10px;} .k_footer .n_f_snsBox > a:first-child {margin-left:0;} @media screen and (min-width: 1281px){ } @media screen and (min-width: 761px) and (max-width: 1280px){ .n_con {width:90%;} #k_header .n_d_menu > ul {display: none;} #n_mainVisual .n_visual {background-position:24% 0;} #n_section1 .n_sc1_list > div {float:none; width:100%; margin-right:0; margin-bottom:30px;} #n_section1 .n_sc1_list > div:last-child {margin-left:0; margin-bottom:0;} #n_section1 .n_sc1_list .n_sc1_box_txtBox {padding:45px;} #n_section1 .n_sc1_list .n_sc1_box_link a {padding:15px 50px;} #n_section2 .n_sc2_list > div {width:32%; margin-right:2%;} #n_section2 .n_sc2_list > div:first-child {margin-left:0;} #n_section2 .n_sc2_list > div:nth-child(3) {margin-right:0;} #n_section2 .n_sc2_list > div:nth-child(4) {clear:left; margin-left:15%; margin-top:18px;} #n_section2 .n_sc2_list > div:nth-child(5) {margin-top:18px;} #n_section3 .n_sc3_list > div {float:none; width:100%; margin:0;} #n_section3 .n_sc3_list > div:last-child {margin-left:0; margin-top:80px;} #n_section4 {height: 220px;} #n_section4 .n_sc4_txtBg .n_sc4_txtBox {width:100%; margin-left:15%;} #n_section4 .n_sc4_txtBg .n_sc4_txtBox h3 {font-size: 2rem; margin-bottom:10px;} #n_section4 .n_sc4_txtBg .n_sc4_txtBox p {margin:12px 0;} .k_footer {padding:40px 0;} .k_footer .n_f_box > div {float:none;} .k_footer .n_f_box > div:last-child {float:none;} .n_f_box {text-align:center;} .k_footer .n_flogoBox {margin-right:0;} .k_footer .n_f_txtBox {margin:25px 0;} } @media screen and (max-width: 760px){ .n_con {width:90%;} #k_header .n_logo {margin-top:30px;} #k_header .n_logo img {width:140px;} #k_header .n_d_menu > ul {display: none;} #k_header .n_m_menu .n_m_inner > a img {margin-top:22px; width:130px;} #k_header .n_m_menu .n_m_inner > ul {margin-top:35px;} #k_header .n_quick_menu {right:18px; bottom:18px;} #k_header .n_quick_menu a {width:43px; height:43px;} #k_header .n_quick_menu img {height:27px;} #n_mainVisual {height:560px;} #n_mainVisual .n_visual {height:560px; background-position:30% 0;} #n_section1 .n_sc1_list > div {float:none; width:100%; margin-right:0; margin-bottom:30px;} #n_section1 .n_sc1_list > div:last-child {margin-left:0; margin-bottom:0;} #n_section1 .n_sc1_list .n_sc1_box_txtBox {width:95%; padding:15px; left:50%; top:45%; transform:translateX(-50%); background:rgba(255,255,255,0.85); text-align: center;} #n_section1 .n_sc1_list .n_sc1_box_link {right:unset; bottom:unset; top:85%; left:50%; transform:translateX(-50%)} #n_section1 .n_sc1_list .n_sc1_box_link a {padding:15px 30px;} #n_section2 {height: unset;} #n_section2 .n_sc2_con {width:90%;} #n_section2 .n_sc2_list > div {width:100%; float:none; margin-right:0; margin-bottom:30px;} #n_sc2_banner .n_sc2_b_txt h3 {font-size:2rem} #n_sc2_banner .n_sc2_b_txt h3:first-child:after {display:none;} #n_section3 .n_sc3_list > div {float:none; width:100%; margin:0;} #n_section3 .n_sc3_list > div:last-child {margin-left:0; margin-top:80px;} #n_section3 .n_sc3_notice a {padding:10px;} #n_section3 .n_sc3_notice .n_notice_txt {font-size: 0.9375rem; margin-left:10px;} #n_section3 .n_sc3_notice a > div:last-child {right:3px;} #n_section4 {height: 220px; background-position:center;} #n_section4 .n_sc4_txtBg {width:100%; text-align:center;} #n_section4 .n_sc4_txtBg .n_sc4_txtBox {width:100%;} #n_section4 .n_sc4_txtBg .n_sc4_txtBox h3 {font-size: 2rem; margin-bottom:10px;} #n_section4 .n_sc4_txtBg .n_sc4_txtBox p {margin:12px 0;} .k_footer {padding:40px 0;} .k_footer .n_f_box > div {float:none; font-size: 0.9375rem;} .k_footer .n_f_box > div:last-child {float:none;} .n_f_box {text-align:center;} .k_footer .n_flogoBox {margin-right:0;} .k_footer .n_f_txtBox {margin:25px 0;} }