@media only screen and (min-width: 768px) and (max-width: 1023px) {
     /* common */
.c1-wrap .content-group {position: relative; color: #000;}
.c1-wrap .content-group::before {content: ''; display: block; width: 100%; height: 100%; background: #9ba174; margin: 0 0 20px;}
.c1-wrap .content-group .title {font-size: 40px; font-weight: 700; text-transform: uppercase;}
.c1-wrap .content-group .description {font-size: 16px; font-weight: 300; line-height: 33px; letter-spacing: -0.4px;}
.c1-wrap .content-group .view-btn {display: block; position: relative; width: 170px; padding: 14px 0; text-align: center; border: 1px solid #ccc; background: #fff; font-family: 'Montserrat'; font-size: 12px; font-weight: 400; color: #000; transition: color .3s, border-color .4s; z-index: 1;}
.c1-wrap .content-group .view-btn:hover {color: #fff; border-color: #000;}
.c1-wrap .content-group .view-btn::before {content: ''; position: absolute; right: 0; top: 0; width: 0; height: 100%; background: #000; transition: .4s; z-index: -1;}
.c1-wrap .content-group .view-btn:hover::before {left: 0; width: 100%;}

/* c1-wrap */
.c1-wrap {background: #fff; overflow: hidden;}
.c1-wrap .inner {display: block; align-items: center; justify-content: center; border-style: solid; border-color: #ccc; border-width: 0 1px;}
.c1-wrap .content-group, .c1-list {width: 100%;}
.c1-wrap .content-group {padding-left: 50px;padding-right: 50px; margin-bottom: 50px;}
.c1-wrap .content-group .title {margin-bottom: 30px;}
.c1-wrap .content-group .description {margin-bottom: 50px;}
.c1-list {display: flex; flex-wrap: wrap;}
.c1-list li {flex-basis: 50%; border-style: solid; border-color: #ccc; border-width: 0 0 1px 1px; padding: 40px 32px 51px;}
.c1-list li:nth-child(n+3) {border-bottom: none;}
.c1-list .top {margin-bottom: 30px; display: flex; justify-content: space-between; align-items: center;}
.c1-list .num {font-family: 'Montserrat'; font-size: 22px; font-weight: 700; color: #9ba174;}
.c1-list .text-group em {margin-bottom: 12px; font-size: 22px; font-weight: 700; color: #000;}
.c1-list .text-group p {font-size: 15px; font-weight: 300; line-height: 24px; color: #616161; letter-spacing: -0.38px;}

/* common */
.c2-wrap .content-group {position: relative;}
.c2-wrap .content-group.white {color: #fff;}
.c2-wrap .content-group::before {content: ''; display: block; width: 68px; height: 4px; background: #9ba174; margin: 0 0 20px;}
.c2-wrap .content-group .title {font-size: 40px; font-weight: 700; text-transform: uppercase;}
.c2-wrap .content-group .description {font-size: 16px; font-weight: 300; line-height: 33px; letter-spacing: -0.4px;}
.c2-wrap .content-group.white .view-btn {display: block; position: relative; width: 170px; padding: 14px 0; text-align: center; border: 1px solid #fff; background: transparent; font-family: 'Montserrat'; font-size: 12px; font-weight: 400; color: #fff; transition: color .3s, border-color .4s; z-index: 1;}
.c2-wrap .content-group.white .view-btn:hover {color: #000; border-color: #fff;}
.c2-wrap .content-group.white .view-btn::before {content: ''; position: absolute; right: 0; top: 0; width: 0; height: 100%; background: #fff; transition: .4s; z-index: -1;}
.c2-wrap .content-group.white .view-btn:hover::before {left: 0; width: 100%;}

/* c2-wrap */
.c2-wrap {position: relative; overflow: hidden; z-index: 1;}
.c2-wrap::before {content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: url("../img/c2_bg.jpg") no-repeat center/cover; transition: .5s; z-index: -1;}
.c2-wrap:hover::before {transform: scale(1.1);}
.c2-wrap .inner {border-left: 1px solid rgba(255, 255, 255, .3); min-height: 500px; padding: 80px 40px 0 40px;}
.c2-wrap .content-group {display: flex; justify-content: center; align-items: center; align-content: center; flex-direction: column;}
.c2-wrap .content-group::before {position: absolute; left: 0; top: -33px;}
.c2-wrap .content-group .title {position: relative; bottom: 7px; font-size: 24px;}
.c2-wrap .content-group .description {text-align: center; width: 100%; margin-bottom: 20px;}

/* c3-wrap */
.c3-wrap {padding-bottom: 102px;}
.c3-wrap .inner {margin-top: -230px; box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.15); overflow: hidden; z-index: 2;}
.c3-wrap .inner > div {width: 100%;}
.c3-map .root_daum_roughmap .wrap_map {height: inherit;}
.c3-board {background: #fff; padding: 50px 30px;}
.c3-board a {display: block;}
.c3-board__title {display: flex; justify-content: space-between; align-items: flex-end; padding-bottom: 27px;}
.c3-board__title .icon {margin-left: 15px;}
.c3-board__title strong {display: inline-block; width: 100%; font-size: 18px; font-weight: 700; color: #000; margin-left: 10px; margin-bottom: 10px;}
.c3-board__title .btn {width: 50px; height: 50px; display: flex; justify-content: center; align-items: center; background: #9ba174;}
.c3-board__title .btn img {transition: .3s;}
.c3-board__title .btn:hover img {transform: rotate(90deg);}
.c3-board-list li {border-bottom: 1px solid #ddd;}
.c3-board-list li:first-child {border-top: 1px solid #ddd;}
.c3-board-list li a {display: flex; justify-content: space-between; padding: 20px 0;}
.c3-board-list .title {position: relative; font-size: 14px; font-weight: 400; color: #000; padding-left: 13px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; min-height: 20px; width: calc(100% - 150px); transition: color .2s;}
.c3-board-list .title::before {content: ''; position: absolute; left: 0; top: 8px; width: 4px; height: 4px; background: #9ba174; border-radius: 50%;}
.c3-board-list .date {font-size: 14px; font-weight: 300; color: #b2b2b2; min-height: 20px; width: 70px; transition: color .2s;}
.c3-board-list li:hover .title, .c3-board-list li:hover .date {color: #9ba174;}

/* header */
#header {position: absolute; left: 0; top: 0; width:100%; z-index:57; transition: .3s;}
#header:hover {background: #fff;}
#header .header-inner {max-width: 1300px; height: 123px; margin:0 auto; display: flex; justify-content: space-between; position: relative; z-index: 10; border-bottom: 1px solid rgba(255, 255, 255, .2);}
#header h1 {padding-top: 20px;}
#header h1 a {position: relative; display: block; width: 127px; height: 70px;}
#header h1 a img {position: absolute; left: 0; top: 0; transition: .3s;}
#header h1 a img:nth-child(1) {opacity: 1; margin-left: 20px;}
#header h1 a img:nth-child(2) {opacity: 0; margin-left: 20px;}
#header:hover h1 a img:nth-child(1) {opacity: 0;}
#header:hover h1 a img:nth-child(2) {opacity: 1;}

#nav {position: relative; display: flex; align-items: center; height: 100%; padding-top: 40px; margin-right: 20px;}
#nav .gnb {display: none; height: 100%;}
#nav .gnb > li {position: relative; text-align: center;}
#nav .gnb > li + li {margin-left: 93px;}
#nav .gnb > li > a {font-family: 'NanumSquareBold'; font-size: 18px; color: #fff; height: 100%; display: flex; align-items: center; transition: color .3s;}
#header:hover #nav .gnb > li > a {color: #000;}
#nav .gnb > li > a::after {content: ''; position: absolute; bottom: -1px; left: 50%; transform: translateX(-50%); width: 0; height: 2px; background-color: #9ba174; transition: .3s;}
#nav .gnb > li > a:hover::after, #nav .gnb > li.active > a::after  {width: 120px;}
/* #nav .gnb > li > a.active::after {width: 120px; background-color: #9ba174;} */

/*child_menu*/
#nav .gnb .lnb {position: absolute; left: 0; top: 100%; width: 100%; justify-content: center; display: none;}
#nav .gnb .lnb li a {display: flex; align-items: center; text-align: left; font-weight: 300;  white-space: nowrap; font-size: 14px; height: 76px; color: #000; transition: .3s;}
#nav .gnb .lnb li + li a {padding-left: 55px;}
#nav .gnb .lnb li:hover a {color:#9ba174;}
#nav .gnb .lnb li a.active {color:#9ba174;}

.lnb-bg {position: absolute; left: 0; top: 100%; width:100%; height: 76px; background: #fff; border-top: 1px solid #ddd; z-index: -1; display: none;}

/* hidden-nav */
.toggle-btn {display: block; cursor: pointer; position: relative; margin-left: 93px; margin-bottom: 20px;}
.toggle-btn span {display: block; background: #fff; width: 23px; height: 2px; transition: 250ms;}
.toggle-btn span:nth-child(2) {margin: 5px 0;}
#header:hover .toggle-btn span {background: #000;}
.close-btn {position: absolute; right: 50px; top: 60px; cursor: pointer;}
.close-btn span {display: block; background: #33a685; width: 32px; height: 2px; border-radius: 3px; transition: 250ms;}
.close-btn span:nth-child(1) {margin-top: 0; margin-bottom: -0; transform: rotate(45deg);}
.close-btn span:nth-child(2) {transform: rotate(45deg); display: none;}
.close-btn span:nth-child(3) {margin-top: -2px; transform: rotate(135deg);}

.hidden-nav-box {position: fixed; left: 0; top: 0; width :100%; height: 100%; background: rgba(0, 0, 0, .7); z-index: 9999; display: none;}
.hidden-nav {position: fixed; right: -640px; top: 0; width: 100%; height: 100%; background: #fbfbfb; text-align: left; padding: 160px 70px 70px 40px; z-index: 10000;}
.hidden-nav .hidden_gnb {width: 100%;}
.hidden-gnb > li {position: relative; margin-bottom:50px;}
.hidden-gnb > li > a {position: relative; display: block; max-width:240px; font-family: 'NanumSquareBold'; font-size: 26px; color: rgba(0, 0, 0, .5) !important; transition: .3s;}
.hidden-gnb > li > a:hover, .hidden-gnb > li > a.active {color: rgba(0, 0, 0, 1) !important;}
.h-lnb {position: absolute; left: 120px; top: 0px; z-index: 2; display: none;}
.h-lnb li {margin-bottom: 25px;}
.h-lnb li a {font-family: 'NanumSquare',sans-serif; font-size: 18px; font-weight: 400; color: #707070; border-bottom: 2px solid transparent; padding: 2px 0; white-space: nowrap; transition: .3s;}
.h-lnb li a:hover {padding: 2px 15px; color:#33a685; border-bottom: 2px solid #33a685;}

/* main-visual */
.main-visual {position: relative; overflow: hidden;}
.main-visual .slide-area .slide {width: 100%; height: 780px; overflow: hidden; background-repeat: no-repeat; background-position: center; background-size: cover;}
.main-visual .slide-area .slide01 {background-image:url("../img/main1.jpg");}
.main-visual .slide-area .slide02 {background-image:url("../img/main2.jpg");}
.main-visual .slide-area .slide03 {background-image:url("../img/main3.jpg");}

/*nav*/
.main-visual .owl-nav {position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; display: flex; width: 100%; align-items: center; justify-content: space-between; padding: 0 110px;}
.main-visual .owl-nav button {display: none; font-size: 0; width: 30px; height: 57px; background-repeat: no-repeat; background-position: center;}
.main-visual .owl-nav .owl-prev {background-image: url("../img/prev.png");}
.main-visual .owl-nav .owl-next {background-image: url("../img/next.png");}

/* dots */
.main-visual .owl-dots {display: flex; position: absolute; top: 270px; left: 50%; transform: translateX(-50%);}
.main-visual .owl-dots button {width: 12px; height: 12px; border-radius: 50%; background: #fff; position: relative;}
.main-visual .owl-dots button + button {margin-left: 25px;}
.main-visual .owl-dots button.active {background: #9ba174;}
.main-visual .owl-dots button::before {content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 27px; height: 27px; border-radius: 50%; background: rgba(1, 161, 63, .23); transition: .3s; opacity: 0;}
.main-visual .owl-dots button.active::before {opacity: 1;}

/* number */
.main-visual .number-wrap {margin-bottom: 25px; position: relative;}
.main-visual .number-wrap span {font-family: 'Montserrat'; font-size: 17px; font-weight: 300; color: #fff;}
.main-visual .number-wrap span:not(:last-child)::after {content: '/'; display: inline-block; margin: 0 12px;}
.main-visual .number-wrap span::before {content: '0';}

/* main-typo */
.main-typo {position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: 100%; height: 100%; text-align: center; z-index: 3; display: flex; align-items: center; justify-content: center; flex-direction: column; color: #fff;}
.main-typo h3 {font-family: 'Montserrat'; font-size: 24px; font-weight: 600; margin-bottom: 23px;}
.main-typo p {font-size: 20px; font-weight: 400;}

/* m-controller*/
.m-controller {display: flex; flex-direction: column; align-items: center; width: 100%; position: absolute; bottom: 90px;}

/*progress*/
.slide-progress {position: relative; width: 300px; height: 1px; background: rgba(255, 255, 255, .3);}
.slide-progress > div {position: absolute; left: 0; top: 0; height: 1px; max-width: 300px; width: 0; background: #fff;}

/* scroll-down */
#scroll-down {position: absolute; right: 50px; bottom: 90px; transform: translateX(-50%); z-index: 2; animation: scroll 1.2s linear infinite;}
#scroll-down a {display: flex; flex-direction: column; align-items: center; justify-content: center;}

@keyframes scroll {
    0%{bottom: 90px;}
    50%{bottom: 100px;}
    100% {bottom: 90px;}
}


/* footer */
#footer {padding: 40px 20px 40px 20px; background: #fff;border-top: 1px solid #ddd;}
.footer-info {display: flex; flex-wrap: wrap;}
.footer-info p {position: relative; font-size: 14px; font-weight: 300; line-height: 28px; color: #000;}
#footer .top {display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #ddd; padding-bottom: 28px; margin-bottom: 25px;}
#footer .top strong {font-family: 'Montserrat'; font-size: 18px; font-weight: 700; color: #000;}
#footer .top .footer-info {width: 65%;}
#footer .top .footer-info p + p {margin-left: 30px; padding-left: 30px;}
#footer .top .footer-info p + p::before {content: ''; position: absolute; left: 0; top: 0; bottom: 0; margin: auto 0; width: 1px; height: 10px; background: #ddd;}
#footer .copyright {font-size: 14px; font-weight: 300; color: rgba(0, 0, 0, .5);margin-top: 13px;}
.ft-btn {width: 140px; padding: 8px 0; background: #000; display: flex; justify-content: center; align-items: center; font-size: 10px; font-weight: 300; color: #fff !important; transition: .3s;}
.ft-btn:hover {background: #9ba174;}
#top-btn {position: fixed; right: 20px; bottom: 20px; width: 50px; height: 50px; display: flex; justify-content: center; align-items: center; border: 1px solid #333; color:#333; font-size:15px; background:rgba(255,255,255,0.5); z-index: 9; transition: .3s; pointer-events: none; opacity: 0;}
#top-btn:hover {border-color: #9ba174; background: #9ba174; color:#fff;}
.scrolled #top-btn {opacity: 1; pointer-events: auto;}


/* 새글 스킨 (latest) */
.lat {position:relative;margin-bottom:20px;background:#fff}
.lat .lat_title {display:block;line-height:45px;font-size:1.2em;color:#253dbe}
.lat .lat_title a {position:relative;color:#000;display:inline-block}

.lat ul {padding:10px 0}
.lat li {position:relative;line-height:18px;border-bottom:1px solid #e5ecee;margin-bottom:10px}
.lat li a {line-height:24px;font-weight:bold;font-size:1.2em;line-height:20px;vertical-align:middle}
.lat li a:hover {color:#3a8afd}
.lat li .fa-heart {color:#ff0000}
.lat li .fa-lock {display:inline-block;line-height:14px;width:16px;font-size:0.833em;color:#4f818c;background:#cbe3e8;text-align:center;border-radius:2px;font-size:12px;border:1px solid #cbe3e8;vertical-align:middle}
.lat li .new_icon {display:inline-block;width:16px;line-height:16px;font-size:0.833em;color:#23db79;background:#b9ffda;text-align:center;border-radius:2px;margin-left:2px;font-weight:bold;vertical-align:middle}
.lat li .hot_icon {display:inline-block;width:16px;line-height:16px;font-size:0.833em;color:#ff0000;background:#ffb9b9;text-align:center;border-radius:2px;vertical-align:middle}
.lat li .fa-caret-right {color:#bbb}
.lat li .fa-download {display:inline-block;width:16px;line-height:16px;font-size:0.833em;color:#daae37;background:#ffefb9;text-align:center;border-radius:2px;vertical-align:middle}
.lat li .fa-link {display:inline-block;width:16px;line-height:16px;font-size:0.833em;color:#b451fd;background:#edd3fd;text-align:center;border-radius:2px;vertical-align:middle}

.lat .profile_img img{border-radius:50%}

.lt_info {padding:10px 0}
.lt_info .lt_nick {}
.lt_info .lt_date {color:#888}

.lat .empty_li {line-height:145px;color:#666;text-align:center;padding:0}
.lat .empty_li:before {background:none;padding:0}

.lat .lt_cmt {background:#e9eff5;color:#3a8afd;font-size:11px;height:16px;line-height:16px;padding:0 5px;border-radius:3px;vertical-align:middle}
.lat .lt_more {position:absolute;top:11px;right:0;display:block;width:40px;line-height:25px;color:#3a8afd;border-radius:3px;text-align:center}
.lat .lt_more:hover {color:#777}
}