@charset "UTF-8";

/*=================================================================================
* common
=================================================================================*/
:root {
	--color-100: #FFFFFF;
	--color-200: #E1E6F0;
	--color-300: #C7CFDD;
	--color-400: #A3AAB7;
	--color-500: #787E89;
	--color-600: #484C53;
	--color-700: #202226;
	--color-point-100: #79B1FF;
	--color-point-200: #4191FF;
	--color-point-300: #0D54B7;
	--font-size-h1: 84px;
	--font-size-h2: 52px;
	--font-size-h3: 32px;
	--font-size-h4: 24px;
	--font-size-h5: 21px;
	--font-size-text1: 20px;
	--font-size-text2: 15px;
	--font-size-text3: 13px;
	--round-box: 5px;
}
h1, .h1 { font-size: var(--font-size-h1); }
h2, .h2 { font-size: var(--font-size-h2); }
h3, .h3 { font-size: var(--font-size-h3); }
h4, .h4 { font-size: var(--font-size-h4); }
h5, .h5 { font-size: var(--font-size-h5); }
.text1 { font-size: var(--font-size-text1); }
.text2 { font-size: var(--font-size-text2); }
.text3 { font-size: var(--font-size-text3); }

.wrap { width: 100%; min-height: 100%; scroll-behavior: smooth; }
.content { padding: 60px 0; }
.wr { max-width: 1280px; margin: 0 auto; }

/* margin */
.mb-0 { margin-bottom: 0; }
.mt-10 { margin-top: 10px; }
.mt-20 { margin-top: 20px; }
.mt-30 { margin-top: 30px; }
.mt-40 { margin-top: 40px; }
.mt-50 { margin-top: 50px; }

.mr-10 { margin-right: 10px; }
.mr-20 { margin-right: 20px; }
.mr-30 { margin-right: 30px; }
.mr-40 { margin-right: 40px; }
.mr-50 { margin-right: 50px; }

.mb-10 { margin-bottom: 10px; }
.mb-20 { margin-bottom: 20px; }
.mb-30 { margin-bottom: 30px; }
.mb-40 { margin-bottom: 40px; }
.mb-50 { margin-bottom: 50px; }

/* align */
.text-center { text-align: center; }

/* padding */

/* flex */
.flex { display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; align-items: center; flex-wrap: wrap; }
.flex-wrap { flex-wrap: wrap; }
.flex-column { flex-direction: column; }
.justify-center { justify-content: center; }
.justify-flex-start { justify-content: flex-start; }
.justify-flex-end { justify-content: flex-end; }
.space-between { justify-content: space-between; }
.align-start { align-items: flex-start; }
.align-center { align-items: center; }
.align-end { align-items: flex-end; }
.flex-column { flex-direction: column; }

/* button */
.btn { background-color: var(--color-700); color: var(--color-100); padding: 7px 20px; border-radius: var(--round-box); }
.btn.bg-gary { background-color: var(--color-300); }
.btn-kakao { width: 230px; height: 64px; line-height: 64px; display: flex; align-items: center; justify-content: center;  background-color: #FAE100; border-radius: 32px; font-weight: 700; font-size: var(--font-size-text1); }
.btn-more { position: absolute; top: 50px; right: 0; color: var(--color-400); display: flex; align-items: center; }

/* icon */
.btn-more i { background: url("../img/icon-arrow-s.svg") center right no-repeat; width: 13px; height: 14px; margin-left: 5px; }
.icon-talk { width: 48px; height: 48px; display: block; background: url("../img/icon-kakao.svg") no-repeat; }

/* pagenation */
.page_area { text-align: center;  /*border:1px solid #d3d3d3;*/ padding: 21px 0; clear: both; }
.page_area a { display: inline-block; width: 38px; height: 38px; line-height: 38px; text-align: center; border: 1px solid var(--color-300); text-decoration: none; margin: 0 5px; color: var(--color-500); border-radius: 5px; }
.page_area span.now_page { display: inline-block; width: 38px; height: 38px; line-height: 38px; text-align: center; border: 1px var(--color-300); text-decoration: none; margin: 0 5px; color: #fff; background-color: var(--color-700); border-radius: 5px; }
.page_area a img{ vertical-align: top; }
.page_area a.btn { width: 38px; }
.page_area a.on, .page_area a:hover { background-color: var(--color-700); color: #fff; border:1px solid var(--color-300); }


/*=================================================================================
* header
=================================================================================*/
.header-wrap { width: 100%; position: relative; display: flex; align-items: center; justify-content: center; height: 100px; background-color: var(--color-700); }
.header-wrap .logo a { width: 70px; height: 30px; overflow: hidden; text-indent: -500em; background: url("../img/logo.svg") no-repeat; position: absolute; left: 140px; top: 35px; }
.header-wrap .nav-menu { display: flex; align-items: center; gap: 60px;}
.header-wrap .nav-menu a { color: var(--color-100); padding: 0 30px; font-size: var(--font-size-h4); font-weight: 700; position: relative; display: block; text-align: center; }
.header-wrap .nav-menu a:hover, .header-wrap .nav-menu a.active { color: var(--color-point-100); }
.header-wrap .nav-menu a em { display: block; margin-top: -2px; font-size: var(--font-size-text3); font-weight: normal; }
.header-wrap .qna { position: absolute; right: 160px; }
.header-wrap .qna .qna-btn { color: #fff; background-color: #0D54B7; padding: 10px 20px; border-radius: 30px; }

/*=================================================================================
* Mobile Header
=================================================================================*/
.button-container { display: block; position: absolute; top: 50%; right: 6rem; width: 30px; height: 19px; margin-top: -12px; cursor: pointer; z-index: 120; transition: opacity 0.25s ease; }
.button-container.active .top { -webkit-transform: translateY(5px) translateX(0) rotate(45deg); transform: translateY(5px) translateX(0) rotate(45deg); background: var(--color-200); }
.button-container.active .middle { opacity: 0; background: var(--color-200); }
.button-container.active .bottom { -webkit-transform: translateY(-13px) translateX(0) rotate(-45deg); transform: translateY(-13px) translateX(0) rotate(-45deg); background: var(--color-200); }
.button-container span { background: var(--color-200); border: none; height: 2px; width: 100%; position: absolute; left: 0; transition: all 0.35s ease; cursor: pointer; border-radius: 4px; }
.button-container span:nth-of-type(2) { top: 50%; margin-top: -1px; }
.button-container span:nth-of-type(3) { bottom: 0; }
.overlay { position: fixed; background: var(--color-white); top: 0; right: 0; width: 100%; max-width: 470px; height: 100vh; opacity: 0; visibility: hidden; transition: opacity 0.35s, visibility 0.35s, height 0.35s; overflow-y: auto; z-index: 100; box-shadow: -20px 0 40px rgba(0, 0, 0, 0.16); }
.overlay .side-menu-wrap { position: relative; width: 100%; height: 100%; background: #222; }
.overlay.open { opacity: 1; visibility: visible; }
.overlay .side-header { width: 100%; height: 85px; padding: 0 0 0 20px; border-bottom: 1px solid #454545; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; align-items: center; box-sizing: border-box; }
.overlay .side-header .util ul { display: flex; align-items: center; }
.overlay .side-header .util ul li { margin: 0 20px 0 0; }
.overlay .side-header .util ul li.link::after { top: 5px!important; right: -10px!important; }
.overlay-menu .main-cate { padding: 19px 0; }
.overlay .login-area { width: 100%; display: flex; align-items: center; }
.overlay .login-area li a { font-size: 12px; }
.overlay .gnb_1depth { position: relative; width: 100%; height: 100%; margin: 0 auto; text-align: left; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start; }
.overlay .gnb_1depth .item_1depth { width: 100%; position: relative; display: block; text-align: left; line-height: 1.2;  cursor: pointer; margin: 0; }
.overlay .gnb_1depth .item_1depth:before, .overlay .gnb_1depth .item_1depth:after { position: absolute; right: 1.6rem; display: block; clear: both; content: ''; width: 10px; height: 2px; background: #949494; transition: all ease 0.1s; }
.overlay .gnb_1depth .item_1depth:before { transform: rotate(45deg); top: 24px; }
.overlay .gnb_1depth .item_1depth:after { transform: rotate(-45deg); top: 30px; }
.overlay .gnb_1depth .item_1depth > a { display: block; position: relative; text-decoration: none; overflow: hidden; line-height: 1.2; border-bottom: 1px solid #454545; text-align: left; padding: 1.6rem; font-weight: 900; color: var(--color-100); }
.overlay .gnb_1depth .item_1depth .gnb_2depth { display: none; }
.overlay .gnb_1depth .item_1depth .gnb_2depth a { padding: 1.6rem; display: block; background: #f1f1f1; border-bottom: solid 1px #e1e1e1; }
.gnb_2depth .cf li { margin: 0; }

/* sitemap */
.btn-category { position: absolute; top: 30px; right: 140px; width: 40px; height: 24px; cursor: pointer; }
.btn-category .bar { position: absolute; left: 0; width: 100%; height: 3px; border: 0; background: var(--color-100); transition: opacity 0.3s, top 0.3s, transform 0.5s; transition-delay: 0.3s, 0.3s, 0s; border-radius: 0 0 0 10px; }
.on .btn-category .bar { background: var(--color-700); }
.btn-category .bar:nth-child(1) { top: 0; transform: rotate(0); }
.btn-category .bar:nth-child(2) { top: 11px; opacity: 1; }
.btn-category .bar:nth-child(3) { top: 22px; transform: rotate(0); }
.btn-category.map { right: 67px; }
.btn-category.map .bar { background: var(--color-bg-700); transition: background 1s, opacity 0.3s, top 0.3s, transform 0.5s; transition-delay: 0s, 0s, 0s, 0.3s; }
.btn-category.map .bar:nth-child(1) { top: 11px; background: var(--color-700); transform: rotate(-45deg); }
.btn-category.map .bar:nth-child(2) { opacity: 0; }
.btn-category.map .bar:nth-child(3) { top: 11px; background: var(--color-700); transform: rotate(45deg); }
#sitemap { position: fixed;	top: 100px;	right: -100%; width: 100%; height: calc(100% - 100px); background: #fff; padding: 50px 20px; z-index: 10; transition: all ease .5s; -webkit-transition: all ease .5s; -o-transition: all ease .5s; -moz-transition: all ease .5s;
	-ms-transition: all ease .5s; overflow: hidden;	overflow-y: auto; }
#sitemap > ul {	max-width: 1024px; overflow: hidden; margin: 0 auto; display: flex;	justify-content: space-around; }
#sitemap > ul > li { padding: 0 10px; }
#sitemap > ul > li a { font-size: 21px;	color: var(--color-700); font-weight: 700; }
#sitemap.open {	right: 0; }

/* swiper */
.swiper { width: 100%; height: 100%; }
.swiper-slide { text-align: center; font-size: 18px; background: #fff; display: flex; justify-content: center; align-items: center; position: relative; }
.swiper-slide img { display: block; width: 100%; height: 100%; object-fit: cover; }
.swiper-slide .text { position: absolute; width: 1180px; margin: 0 auto; transform: translate(-50%, -50%); left: 50%; top: 50%; text-align: center; color: var(--color-100); }
.swiper-pagination { bottom: 50px!important; }
.swiper-pagination-bullet { width: 10px!important; height: 10px!important; }
.swiper-pagination-bullet-active { background: var(--color-700)!important; }
.swiper-button-next, .swiper-button-prev { width: 46px!important; height: 46px!important; }
.swiper-button-next:after, .swiper-button-prev:after { width: 46px!important; height: 46px!important; overflow: hidden; text-indent: -500em; display: block; background: url("../img/icon-arrow.svg") no-repeat; }
.swiper-button-next { margin-right: 140px; }
.swiper-button-prev { margin-left: 140px; }
.swiper-button-prev:after { transform: rotate(180deg)!important; }

/*=================================================================================
* footer
=================================================================================*/
footer { background-color: var(--color-600); padding: 40px 0; }
footer .add-text p, footer .add-text em { display: block; color: var(--color-300); }
footer .add-text p { font-size: var(--font-size-text2); }
footer .add-text p span { color: var(--color-500); margin: 0 12px; }
footer .add-text em { font-size: var(--font-size-text3); margin-top: 50px; }

/*=================================================================================
* container
=================================================================================*/
.main-section { position: relative; margin-bottom: 60px; }
.visual-01, .visual-02, .visual-03, .visual-04, .visual-05 { width: 100%; height: 600px; }
.visual-01 { background: url("../img/visual-01.jpg") center center no-repeat; }
.visual-02 { background: url("../img/visual-02.jpg") center center no-repeat; }
.visual-03 { background: url("../img/visual-03.jpg") center center no-repeat; }
.visual-04 { background: url("../img/visual-04.jpg") center center no-repeat; }
.visual-05 { background: url("../img/visual-05.jpg") center center no-repeat; }

.sub-visual { width: 100%; height: 450px; position: relative; }
.sub-visual-01 { background: url("../img/sub-visual-01.jpg") center center no-repeat; }
.sub-visual-02 { background: url("../img/sub-visual-02.jpg") center center no-repeat; }
.sub-visual-03 { background: url("../img/sub-visual-03.jpg") center center no-repeat; }
.sub-visual-04 { background: url("../img/sub-visual-04.jpg") center center no-repeat; }
.sub-title { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; color: var(--color-100); width: 90%; }
.sub-title h5 { font-size: var(--font-size-h2); }
.sub-title span { font-size: var(--font-size-h5); }

.thumb-list { margin-top: 20px; }
.thumb-list li div { border: solid 1px var(--color-200); margin-bottom: 10px; border-radius: 10px; overflow: hidden; }
.thumb-list li span { display: block; text-align: center; }
.thumb-list li span.align-left { text-align: left; }
.thumb-list li strong { display: block; }
.thumb-list dl { margin-left: 15px; }
.thumb-list dl dd { position: relative; }
.thumb-list dl dd::before { content: "-"; position: absolute; left: -15px; top: 0; }
.thumb-list .no-line { border: 0; }

.thumb-list.col-3 li { width: 32%; margin-right: 2%; margin-bottom: 2%; }
.thumb-list.col-3 li:nth-of-type(3n) { margin-right: 0; }

.thumb-list.col-4 li { width: 23.5%; margin-right: 2%; margin-bottom: 2%; }
.thumb-list.col-4 li:nth-of-type(4n) { margin-right: 0; }

.thumb-list.col-8 li { width: 10.75%; margin-right: 2%; margin-bottom: 2%; }
.thumb-list.col-8 li:nth-of-type(8n) { margin-right: 0; }

.main-map { width: 60%; margin-top: 20px; border: solid 1px var(--color-200); border-radius: 10px; overflow: hidden; }
.map-text { width: 40%; }
.map-text .qna-write dl dd:nth-child(2) .field { width: 100%; }
.map-text .qna-write dl dd:nth-child(2) .field textarea { min-height: 180px; }

.sub-section h3 { margin-bottom: 20px; }
.sub-section h4 { margin: 70px 0 20px 0; }
.sub-section h5 { margin: 20px 0; }

.cate-btn { }
.cate-btn ul li { margin: 0 10px 10px 0; }
.cate-btn ul li a { display: block; padding: 10px 25px; border: solid 1px var(--color-300); border-radius: var(--round-box); }
.cate-btn ul li a:hover, .cate-btn ul li a.active { background-color: var(--color-700); border: solid 1px var(--color-700); color: var(--color-100); }

.mo-cate { display: none; }
.mo-cate select { width: 100%; height: 42px; line-height: 41px; padding: 0 10px; text-indent: 0; border-radius: 5px; background: url(../img/ico_selectarrow.svg) no-repeat center right 10px / 14px auto; text-overflow: ellipsis; white-space: nowrap; appearance: none; cursor: pointer; font-size: 16px; border: solid 1px #e1e1e1; }

/* board */
.table-01 { }
.table-01 dt, .table-01 dd { display: flex; justify-content: space-between; padding: 15px 0; margin-bottom: 0; }
.table-01 dt { border-top: solid 1px var(--color-300); border-bottom: solid 2px var(--color-600); font-weight: 600; }
.table-01 dd { border-bottom: solid 1px var(--color-300); }
.table-01 dd div.text-left { text-align: left!important; }
.table-01 dt div, .table-01 dd div { text-align: center; display: inline-block; }
.table-01 dt div:nth-child(1), .table-01 dd div:nth-child(1) { width: 15%; }
.table-01 dt div:nth-child(2), .table-01 dd div:nth-child(2) { width: 40%; }
.table-01 dt div:nth-child(3), .table-01 dd div:nth-child(3) { width: 15%; }
.table-01 dt div:nth-child(4), .table-01 dd div:nth-child(4) { width: 15%; }
.table-01 dt div:nth-child(5), .table-01 dd div:nth-child(5) { width: 15%; }

.board-view .title { font-size: 21px; font-weight: 700; margin-bottom: 10px; }
.board-view .meta { display: flex; }
.board-view .meta .date { color: var(--color-500); margin-right: 10px; }
.board-view .meta .date::after, .board-view .meta .name::after { content: "ㅣ"; padding-left: 10px; color: var(--color-200); }
.board-view .meta .name { color: var(--color-500); margin-right: 10px; }
.board-view .meta .hit { color: var(--color-500); }
.board-view .content { padding: 20px 0; border-top: solid 2px var(--color-500); margin-top: 20px; }
.board-view .content p { margin-bottom: 6px; }
.board-view .content p:last-child { margin-bottom: 0; }
.board-view .prenext { margin: 20px 0; border-top: solid 1px var(--color-200); border-bottom: solid 1px var(--color-200); padding: 20px 0; }
.board-view .prenext .nexttext { margin-right: 30px; color: var(--color-500); }

/* sub menu */
.sub-navi { padding-top: 30px; }
.sub-navi a { width: 32%; display: block; font-size: var(--font-size-text1); font-weight: 700; text-align: center; border: solid 1px var(--color-200); padding: 15px 0; border-radius: var(--round-box); }
.sub-navi a:hover, .sub-navi a.active { background-color: var(--color-700); border: solid 1px var(--color-700); color: var(--color-100); }


/* form */
.qna-write { border-top: 1px solid var(--color-200); }
.qna-write dl dd { display: flex; border-bottom: 1px solid var(--color-200); padding: 15px 0; }
.qna-write input[type="text"], .qna-write textarea { width: 100%; }
.qna-write input[type="text"] { padding: 0 10px; border: 1px solid var(--color-200); color: var(--color-700); -webkit-appearance: none; box-sizing: border-box; border-radius: var(--round-box); height: 34px; line-height: 34px; }
.qna-write textarea { padding: 10px; border: 1px solid var(--color-200); color: var(--color-700); -webkit-appearance: none; box-sizing: border-box; border-radius: var(--round-box); min-height: 340px; }
.qna-write dl dd .title { text-align: center; }
.qna-write dl dd:nth-child(1) .title { width: 15%; }
.qna-write dl dd:nth-child(1) .field { width: 35%; }
.qna-write dl dd:nth-child(2) .title { width: 15%; }
.qna-write dl dd:nth-child(2) .field { width: 85%; }

.cate-navi { width: 100%; height: 64px; border-bottom: 1px solid #e1e1e1; background-color: #f7f7f7; }
.cate-navi ul { width: 100%; margin: 0 auto; display: flex; border-right: solid 1px #e1e1e1; }
.cate-navi ul li { border-left: solid 1px #e1e1e1; width: 100%; }
.cate-navi ul li:first-child { width: 85px; }
.cate-navi ul li:first-child a span { display: block; width: 24px; height: 24px; overflow: hidden; text-indent: -500em; background: url(../img/icon_home.svg) no-repeat; margin-top: 20px; }
.cate-navi ul li a { display: block; line-height: 64px; padding: 0 30px; width: 100%; height: 100%; color: #ccc; font-weight: 700; text-align: center; }
.cate-navi ul li a.active { background-color: #121212; color: #fff; }