/* 애플 사용자를 위한 임시 맑은 고딕 부여 */ @font-face { font-family: '맑은고딕'; src: url('/fonts/malgun_gothic/mg_temp.eot'); src: local('☺'), url('/fonts/malgun_gothic/mg_temp.eot?#iefix') format('embedded-opentype'), url('/fonts/malgun_gothic/mg_temp.woff') format('woff'), url('/fonts/malgun_gothic/mg_temp.ttf') format('truetype'); font-weight: 400; } @font-face { font-family: '맑은고딕'; src: url('/fonts/malgun_gothic/mg_temp_bold.eot'); src: local('☺'), url('/fonts/malgun_gothic/mg_temp_bold.eot?#iefix') format('embedded-opentype'), url('/fonts/malgun_gothic/mg_temp_bold.woff') format('woff'), url('/fonts/malgun_gothic/mg_temp_bold.ttf') format('truetype'); font-weight: 600; } @charset "utf-8"; /* 임시 초기화 */ a, a:hover, a:focus {color: inherit; text-decoration: none;} #body_layout {overflow: hidden; padding-bottom: 66px;} /* 공통그룹 - 그룹1 */ .cont_group.group1 {position: relative; width: 1200px; height: 515px; margin: 0 auto 65px;} /* 메인 비쥬얼 슬라이더 */ #mvis_wrap {position: relative; height: 515px;} #mvis_wrap .mvis_tit {position: absolute; margin: 0; top: 112px; left: 0; z-index: 1001;} #mvis_wrap .mvis_tit img {display: block;} #mvis_wrap .mvis_list {position: relative; width: 1289px; height: 100%; left: -360px; margin: 0; overflow: hidden; white-space: nowrap; font-size: 0;} #mvis_wrap .mvis_list .item {display: inline-block; vertical-align: top; _position: absolute; width: 100%; height: 100%; _top: 0; _left: 0;} #mvis_wrap .mvis_list .item1 {background-image: url('/images/grad/main/mvis_1.jpg'); background-position: center -170px;} #mvis_wrap .mvis_list .item2 {background-image: url('/images/grad/main/mvis_2.jpg'); background-position: center -164px;} #mvis_wrap .mvis_list .item3 {background-image: url('/images/grad/main/mvis_3.jpg'); background-position: center; background-size: cover;} #mvis_wrap .slick-list, #mvis_wrap .slick-track {height: 100%;} #mvis_wrap .btn_group {position: absolute; z-index: 1001; top: 247px;} #mvis_wrap .btn_group .pager, #mvis_wrap .btn_group .control {display: inline-block; vertical-align: middle; font-size: 0;} #mvis_wrap .btn_group .control {margin-left: 12px;} #mvis_wrap .btn_group .control a {display: inline-block; width: 25px; height: 25px; border-radius: 50%; background-color: #3e4950; background-repeat: no-repeat; background-position: center;} #mvis_wrap .btn_group .control a.prev {background-image: url('/images/grad/main/icn_prev.png');} #mvis_wrap .btn_group .control a.next {background-image: url('/images/grad/main/icn_next.png');} #mvis_wrap .btn_group .control a.play {background-image: url('/images/grad/main/icn_play.png');} #mvis_wrap .btn_group .control a.pause {background-image: url('/images/grad/main/icn_pause.png');} #mvis_wrap .btn_group .control a.act {display: none;} #mvis_wrap .btn_group .control a.act.now {display: inline-block;} #mvis_wrap .btn_group .control a:not(:last-of-type) {margin-right: 3px;} #mvis_wrap .btn_group .pager {margin: 0;} #mvis_wrap .btn_group .pager ul {margin: 0;} #mvis_wrap .btn_group .pager ul li {display: inline-block; vertical-align: middle; width: 5px; height: 4px;} #mvis_wrap .btn_group .pager ul li:not(:last-of-type) {margin-right: 7px;} #mvis_wrap .btn_group .pager ul li button {display: block; width: 100%; height: 100%; border-radius: 50%; background: #fff;} #mvis_wrap .btn_group .pager ul li.slick-active {width: 17px; height: 18px;} #mvis_wrap .btn_group .pager ul li.slick-active button {position: relative; top: -3px; border-radius: 0; background: transparent url('/images/grad/main/icn_actpg.png');} /* 공지사항 인클루드 영역 */ #bd_wrap {position: absolute; width: 100%; height: 100%; top: 0; right: -830px; padding-top: 32px; padding-left: 38px; box-sizing: border-box; background-color: #1a4794; background-repeat: no-repeat; background-image: url('/images/grad/main/bg_board.png'); background-position: 392px -15px; z-index: 1001} #bd_wrap .bd_box {position: relative; width: 332px;} #bd_wrap .bd_box .more {position: absolute; display: block; top: 12px; right: 0; width: 35px; height: 35px; border: 1px solid rgba(255,255,255,.2); box-sizing: border-box; font-size: 0; background-repeat: no-repeat; background-image: url('/images/grad/main/icn_plus.png'); background-position: center;} #bd_wrap .bd_tit {padding: 18px 0 21px; margin: 0;} #bd_wrap .bd_tit img {display: block;} #bd_wrap ul {border-top: 1px solid rgba(255,255,255,.6); margin: 0;} #bd_wrap ul li {position: relative; display: block; padding: 9px 4px 9px 12px; text-align: left; border-bottom: 1px solid rgba(255,255,255,.2);} #bd_wrap ul li a, #bd_wrap ul li .date {color: #fff; font-size: 14.02px;} #bd_wrap ul li .tit {display: inline-block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} #bd_wrap ul li .txt {display: block; max-height: 42px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; white-space: normal;} #bd_wrap ul li:first-of-type {padding: 34px 4px 30px 92px; _border-top: 1px solid rgba(255,255,255,.6);} #bd_wrap ul li:first-of-type .tit {display: block; margin-bottom: 5px; font-size: 18px; font-weight: 600;} #bd_wrap ul li:first-of-type .date {position: absolute; width: 65px; height: 72px; top: 36px; left: 7px;} #bd_wrap ul li:first-of-type .date b em {display: none;} #bd_wrap ul li:first-of-type .date b span {position: absolute; display: block; width: 39px; height: 39px; top: 0; right: 0; line-height: 39px; border-radius: 50%; text-align: center; background-color: #51c24b;} #bd_wrap ul li:first-of-type .date .year {font-size: 0;} #bd_wrap ul li:first-of-type .date .month {position: absolute; bottom: 0; left: 9px; letter-spacing: 0;} #bd_wrap ul li:first-of-type .date .day {position: absolute; top: 17px; left: 0; line-height: 1; font-size: 35px; font-weight: 600; white-space: nowrap;} #bd_wrap ul li:not(:first-of-type)::before {position: absolute; display: block; content: ""; width: 3px; height: 3px; top: 19px; left: 2px; background-color: #21cdff;} #bd_wrap ul li:not(:first-of-type) b, #bd_wrap ul li:not(:first-of-type) .txt {display: none;} #bd_wrap ul li:not(:first-of-type) .date {float: right;} .main_ir{background: url(/template/template_h1/images/main/main_ir.png)no-repeat;} #bd_wrap .bd_box .bbs_more {position:absolute; top:20px; right:0;} #bd_wrap .bd_box .bbs_more a {display:block;width:20px;height:18px;background-position: -185px -1px;font-size:0;} #bd_wrap .btn_group {margin-top: 39px; font-size: 0;} #bd_wrap .btn_group a {display: inline-block; vertical-align: top; width: 156px; height: 61px; line-height: 61px; letter-spacing: -2px; text-indent: 25px; color: #fff; font-size: 15.03px; font-weight: 600; background-repeat: no-repeat;} #bd_wrap .btn_group a:not(:last-of-type) {margin-right: 20px;} #bd_wrap .btn_group .btn1 {background-color: #1054cb; background-image: url('/images/grad/main/icn_sch.png'); background-position: 24px center;} #bd_wrap .btn_group .btn2 {background-color: #1092ae; background-image: url('/images/grad/main/icn_reg.png'); background-position: 22px center;} /* 아이콘 그룹 */ #mc_link_group {border: 1px solid #ddd; margin-bottom: 65px; font-size: 0;} #mc_link_group .list {display: inline-block; vertical-align: top; position: relative; width: 25%; height: 188px; box-sizing: border-box;} #mc_link_group .list a {position: relative; display: block; width: 100%; height: 100%; padding: 29px 40px 10px 27px; background-repeat: no-repeat;} #mc_link_group .list a::before, #mc_link_group .list a::after {position: absolute; display: block; content: ""; width: 100%; height: 100%; top: 0; left: 0; background-repeat: no-repeat; z-index: 1;} #mc_link_group .list a::before {opacity: 0; background-size: cover; transform: scale(1); box-shadow: 0px 0px 0px rgba(0,0,0,0); transition: transform .4s ease, box-shadow .4s ease, opacity .2s ease;} #mc_link_group .list span {position: relative; display: block; max-width: 235px; text-align: left; z-index: 2;} #mc_link_group .list .title {color: #000; font-size: 20px; font-weight: 600; transition: color .2s ease;} #mc_link_group .list .desc {color: #666; font-size: 14px; transition: color .2s ease;} #mc_link_group .list .goto {position: absolute; width: 46px; height: 9px; bottom: 35px; left: 30px; font-size: 0; background-image: url('/images/grad/main/icn_more.png');} #mc_link_group .list a:hover::before, #mc_link_group .list a:focus::before {opacity: 1; transform: scale(1.055); box-shadow: 10px 10px 10px rgba(0,0,0,.15);} #mc_link_group .list a:hover .goto, #mc_link_group .list a:focus .goto {background-image: url('/images/grad/main/icn_more2.png');} #mc_link_group .list a:hover span, #mc_link_group .list a:focus span {color: #fff;} #mc_link_group .list1::before {background-image: url('/images/grad/main/bg_link_group1_ov.jpg');} #mc_link_group .list2::before {background-image: url('/images/grad/main/bg_link_group2_ov.jpg');} #mc_link_group .list3::before {background-image: url('/images/grad/main/bg_link_group3_ov.jpg');} #mc_link_group .list4::before {background-image: url('/images/grad/main/bg_link_group4_ov.jpg');} #mc_link_group .list5::before {background-image: url('/images/grad/main/bg_link_group5_ov.jpg');} #mc_link_group .list6::before {background-image: url('/images/grad/main/bg_link_group6_ov.jpg');} #mc_link_group .list7::before {background-image: url('/images/grad/main/bg_link_group7_ov.jpg');} #mc_link_group .list8::before {background-image: url('/images/grad/main/bg_link_group8_ov.jpg');} #mc_link_group .list1::after {background-image: url('/images/grad/main/bg_link_group1.png'); background-position: right 26px bottom 22px;} #mc_link_group .list2::after {background-image: url('/images/grad/main/bg_link_group2.png'); background-position: right 23px bottom 19px;} #mc_link_group .list3::after {background-image: url('/images/grad/main/bg_link_group3.png'); background-position: right 25px bottom 20px;} #mc_link_group .list4::after {background-image: url('/images/grad/main/bg_link_group4.png'); background-position: right 26px bottom 19px;} #mc_link_group .list5::after {background-image: url('/images/grad/main/bg_link_group5.png'); background-position: right 23px bottom 25px;} #mc_link_group .list6::after {background-image: url('/images/grad/main/bg_link_group6.png'); background-position: right 27px bottom 25px;} #mc_link_group .list7::after {background-image: url('/images/grad/main/bg_link_group7.png'); background-position: right 23px bottom 26px;} #mc_link_group .list8::after {background-image: url('/images/grad/main/bg_link_group8.png'); background-position: right 23px bottom 23px;} #mc_link_group .list1:hover::after, #mc_link_group .list1:focus::after {background-image: url('/images/grad/main/bg_link_group1a.png');} #mc_link_group .list2:hover::after, #mc_link_group .list2:focus::after {background-image: url('/images/grad/main/bg_link_group2a.png');} #mc_link_group .list3:hover::after, #mc_link_group .list3:focus::after {background-image: url('/images/grad/main/bg_link_group3a.png');} #mc_link_group .list4:hover::after, #mc_link_group .list4:focus::after {background-image: url('/images/grad/main/bg_link_group4a.png');} #mc_link_group .list5:hover::after, #mc_link_group .list5:focus::after {background-image: url('/images/grad/main/bg_link_group5a.png');} #mc_link_group .list6:hover::after, #mc_link_group .list6:focus::after {background-image: url('/images/grad/main/bg_link_group6a.png');} #mc_link_group .list7:hover::after, #mc_link_group .list7:focus::after {background-image: url('/images/grad/main/bg_link_group7a.png');} #mc_link_group .list8:hover::after, #mc_link_group .list8:focus::after {background-image: url('/images/grad/main/bg_link_group8a.png');} @keyframes popscale { 0% {} 100% {} } /* 상속 반응형 */ @media only screen and (max-width: 1280px) { .cont_group.group1 {width: 100%; height: auto;} #mvis_wrap .mvis_list {width: 100%; left: auto;} #mvis_wrap .mvis_tit {top: 112px; left: 110px;} #mvis_wrap .btn_group {left: 110px;} #bd_wrap {position: relative; right: auto; padding-left: 50px; padding-right: 50px; padding-bottom: 45px; background-position: 724px -3px;} #bd_wrap .bd_box {width: 100%;} #bd_wrap ul li:not(:first-of-type) .tit {max-width: calc(100% - 80px);} #body_layout .body_wrap {width: 100%; max-width: 1200px; margin: 0 auto;} } @media only screen and (max-width: 1024px) { .cont_group.group1 {margin: 0 auto 45px;} #mvis_wrap .mvis_tit, #mvis_wrap .btn_group {left: 74px;} #mvis_wrap .mvis_list .item1 {background-position: -166px -170px;} #mvis_wrap .mvis_list .item2 {background-position: -166px -164px;} #mvis_wrap .mvis_list .item3 {background-position: center;} #bd_wrap {padding-top: 12px; padding-right: 32px; padding-bottom: 29px; padding-left: 32px;} #bd_wrap .btn_group {margin-top: 27px;} #bd_wrap .btn_group a {width: 156px;} #bd_wrap .btn_group a:not(:last-of-type) {margin-right: 18px;} #body_layout .body_wrap {padding: 0 32px;} #mc_link_group .list {width: 50%;} } @media only screen and (max-width: 767px) { #mvis_wrap {height: 390px;} #mvis_wrap .mvis_tit {width: 100%; top: 67px; left: auto;} #mvis_wrap .mvis_tit img {height: 59px; margin: 0 auto;} #mvis_wrap .btn_group {display: block; width: 100%; top: auto; bottom: 13px; left: auto;} #mvis_wrap .mvis_list .item {background-size: 189.6875vw; background-position: center;} #mvis_wrap .mvis_list .item1 {background-size: 189.6875vw; background-position: center;} #mvis_wrap .mvis_list .item2 {background-size: 189.6875vw; background-position: center;} #mvis_wrap .mvis_list .item3 {background-size: cover; background-position: center;} #bd_wrap ul li {padding: 9px 20px 9px 30px;} #bd_wrap ul li:first-of-type {padding: 31px 20px 33px 108px;} #bd_wrap ul li:first-of-type .date {left: 25px;} #bd_wrap ul li:not(:first-of-type)::before {left: 20px;} #bd_wrap ul li:not(:first-of-type) .tit {width: calc(100% - 75px);} #bd_wrap .bd_box .bbs_more {right:20px;} #body_layout {padding-bottom: 49px;} #body_layout .body_wrap {padding: 0 20px;} #mc_link_group .list {width: 100%;} #mc_link_group .list:not(:first-of-type) {border-top: 1px solid #ddd;} #bd_wrap {padding-left: 0; padding-right: 0;} #bd_wrap .bd_tit {top: 70px; padding-left: 20px;} #bd_wrap .btn_group a {width: 130px;} #bd_wrap .btn_group .btn1 {background-position: 17px center;} #bd_wrap .btn_group .btn2 {text-indent: 30px; background-position: 19px center;} #bd_wrap .bd_box .more {right: 20px;} #mc_link_group {margin-bottom: 40px;} } /* 비상속 반응형 */ @media only screen and (min-width: 1281px) { #bd_wrap ul li:not(:first-of-type) .tit {max-width: 235px;} } @media only screen and (min-width: 1025px) and (max-width: 1280px) { #bd_wrap ul {height: 156px; margin-bottom: 30px; border-bottom: 1px solid rgba(255,255,255,.2);} #bd_wrap ul li {width: 50%; padding-left: 30px; float: right;} #bd_wrap ul li:first-of-type {padding: 34px 45px 45px 110px; border-bottom-width: 0; float: left;} #bd_wrap ul li:first-of-type + li {margin-top: 5px;} #bd_wrap ul li:first-of-type .date {left: 25px;} #bd_wrap ul li:not(:first-of-type)::before {left: 20px;} #bd_wrap ul li:last-of-type {padding-bottom: 21px; border-bottom-width: 0;} #bd_wrap .btn_group {margin-top: 0; clear: both;} #bd_wrap .btn_group a {width: 260px;} #bd_wrap .btn_group a:not(:last-of-type) {margin-right: 10px;} #bd_wrap .btn_group .btn1 {background-position: 78px center;} #bd_wrap .btn_group .btn2 {background-position: 72px center;} } @media only screen and (min-width: 1025px) { #bd_wrap {min-width: 730px;} #mc_link_group .list:not(:nth-of-type(-n+4)) {border-top: 1px solid #ddd;} #mc_link_group .list:not(:nth-of-type(4n)) {border-right: 1px solid #ddd;} } @media only screen and (min-width: 768px) and (max-width: 1024px) { #mc_link_group .list:not(:nth-of-type(-n+2)) {border-top: 1px solid #ddd;} #mc_link_group .list:not(:nth-of-type(2n)) {border-right: 1px solid #ddd;} }