@charset "utf-8";
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');

/* LAYOUT */
body { -webkit-text-size-adjust: 100%; background-color:#fafafc; }
#wrap { overflow: hidden; width: 768px; margin: 0 auto; -webkit-overflow-scrolling : touch; }
#header { z-index: 10; height: 10.6rem; 
	background: #4a86eb; /* Old browsers */
	background: -moz-linear-gradient(right,  #4a86eb 0%, #32cca9 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, right, left, color-stop(0%,#4a86eb), color-stop(100%,#32cca9)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(right,  #4a86eb 0%,#32cca9 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(right,  #4a86eb 0%,#32cca9 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(right,  #4a86eb 0%,#32cca9 100%); /* IE10+ */
	background: linear-gradient(to right,  #4a86eb 0%,#32cca9 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4a86eb', endColorstr='#32cca9',GradientType=0 ); /* IE6-9 */ 
}
#header.sub { position: fixed; left: 0; right: 0; height: 5.125rem; box-shadow:0 2px 6px rgba(0, 0, 0, 0.1); }

#container { padding-bottom:9rem; }
#footer { position: fixed; width: 100%; height: 4.8750rem; left: 0; bottom: 0; background:url('../images/inc/footer_bg.png') repeat-x; background-size:contain; }
#footer:after { content: ""; position: absolute; width: 100%; height: 4.8750rem; left: 0; bottom: 0; background:url('../images/inc/footer_bg_center.png') no-repeat center; background-size:contain; }



/* HEADER */
#header > .outer { display:flex; justify-content:space-between; align-items: center; margin:0 5.5555%; padding:2.2rem 0 0; }
#header > .outer h1 { margin: 0; padding: 0; line-height: 0; font-weight:600; font-size:1.2rem; color:#fff; line-height:1.2rem; }
#header > .outer .lnb { display:flex; gap:0.8125rem; }
#header > .outer .lnb .icon { position: relative; line-height:0; }
#header > .outer .lnb .icon img { width:1.62rem; }
#header > .outer .lnb .icon .new { position:absolute; width:8px; height:8px; right: 0.25rem; top: 0.125rem; border-radius:20px; background-color:#f90d7c; border:2px solid #fff; }

#header.sub > .outer { padding:1.8rem 0 0; margin:0 5% 0 4%; }
#header > .outer .side { display:flex; align-items: center; gap: 0.6rem; }
#header > .outer .side .icon_back { width:1.3750rem; line-height:0; }
#header > .outer .side .icon_back img { width:100%; }
#header > .outer .side .subject { font-weight:600; font-size:1.2rem; color:#fff; line-height:1.2rem; }
#header > .outer .side .subject span { font-weight:300; font-size:0.8337rem; }


/* HEADER - 문의 */
#header > .inquiry { display: flex; gap: 20px; position: absolute; right: 600px; top: 30px; }
#header > .inquiry .inquiry_item { cursor: pointer; display: flex; gap: 13px; align-items: center; padding: 0 30px; font-family: 'Pretendard'; font-style: normal; font-weight: 400; font-size: 16px; line-height: 16px; color: #ffffff; letter-spacing: -0.5px; text-align: left; background-color: #1c3ca7; -moz-box-shadow:4px 4px 3px rgba(0, 0, 0, 0.11); box-shadow:4px 4px 3px rgba(0, 0, 0, 0.11); -webkit-border-radius:80px; -moz-border-radius:80px; border-radius:80px; }
#header > .inquiry .inquiry_item.kakao { font-weight: 500; color: #212222; background-color: #ffd400; }


/* 모바일 메뉴영역 */
.gnb_m_bg { position:fixed; overflow-y:auto; width:100%; height:100vh; left:0; top:0; background-color:rgba(0,0,0,0.6); -webkit-overflow-scrolling:touch; z-index:99999999; display:none; }
.gnb_m { position:fixed; overflow-y:auto; width:85%; height:100vh; left:-100%; top:0; margin-right:15%; opacity:0; -webkit-overflow-scrolling:touch; z-index:99999999; -webkit-transition: none; -moz-transition: none; -o-transition: none; transition:none; 
	background: #4a86eb; /* Old browsers */
	background: -moz-linear-gradient(right,  #4a86eb 0%, #32cca9 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, right, left, color-stop(0%,#4a86eb), color-stop(100%,#32cca9)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(right,  #4a86eb 0%,#32cca9 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(right,  #4a86eb 0%,#32cca9 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(right,  #4a86eb 0%,#32cca9 100%); /* IE10+ */
	background: linear-gradient(to right,  #4a86eb 0%,#32cca9 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4a86eb', endColorstr='#32cca9',GradientType=0 ); /* IE6-9 */ 
}
.gnb_m .head { height:55px; background-color:#fff; }

.gnb_m .head .gnb_btn_close { position:absolute; right:20px; top:16px; width:20px; cursor:pointer; }
.gnb_m .head .gnb_btn_close img { width:100%; }

.gnb_m .list { position:relative; margin-bottom:100px; -webkit-overflow-scrolling:touch; z-index:99999999; }
.gnb_m .list ul { margin:0; padding:0; }
.gnb_m .list li { position:relative; list-style:none; min-height:42px; border-bottom:1px solid rgba(255, 255, 255, 0.4); cursor:pointer; -webkit-transition:all 0.5s ease; -moz-transition:all 0.5s ease; -o-transition: all 0.5s ease; transition:all 0.5s ease; }
.gnb_m .list .list_title { margin:0 0 0 30px; color:#ffffff; font-weight: 500; font-size:0.9rem; line-height:60px; letter-spacing:1px; }

.gnb_m .list li.select {
	background: #32cca9; /* Old browsers */
	background: -moz-linear-gradient(right,  #32cca9 0%, #4a86eb 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, right, left, color-stop(0%,#32cca9), color-stop(100%,#4a86eb)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(right,  #32cca9 0%,#4a86eb 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(right,  #32cca9 0%,#4a86eb 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(right,  #32cca9 0%,#4a86eb 100%); /* IE10+ */
	background: linear-gradient(to right,  #32cca9 0%,#4a86eb 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#32cca9', endColorstr='#4a86eb',GradientType=0 ); /* IE6-9 */ 
}
.gnb_m .list li.select .list_title { color:#fff; }

.gnb_m .list .sub_list { background-color:#fff; display:none; -webkit-transition: none; -moz-transition: none; -o-transition: none; transition:none; }
.gnb_m .list .sub_list ul { margin:0; padding:0; }
.gnb_m .list .sub_list li { padding:0 0 0 30px; list-style:none; border-top:1px solid #dcdcdc; border-bottom:none; font-weight: 500; font-size:0.8rem; line-height:50px; color:#666666; letter-spacing:0; }
.gnb_m .list .sub_list a,
.gnb_m .list .sub_list a:hover { display: block; }
.gnb_m .list:after { content:""; clear:both; display:block; }



/* CONTAINER */
#container .card_ani_outer { opacity:0; }
#container .card { position: relative; margin: -5.625rem 0.875rem 0; background-color:#fff; border-radius:0.7rem; box-shadow:0 0 10px rgba(0, 0, 0, 0.1); }
#container .card .card_head { display: flex; justify-content: space-between; align-items: center; padding: 2.3750rem 1.3750rem 1.1250rem 1.8rem; border-bottom:1px solid #d7d7d7; }
#container .card .card_head .info { font-weight: 600; font-size:0.8750rem; line-height:1.25rem; color:#444444; }
#container .card .card_head .info strong { display: block; margin-bottom: 1rem; font-weight: 700; font-size:1.3750rem; color:#1050bd; }
#container .card .card_head .photo { width:8rem; height:8rem; }
#container .card .card_head .photo img { width:100%; border-radius:50%; border:2px solid #d1d1d1; }

#container .card .address { padding: 1.2500rem 1.3750rem 1.875rem 1.8rem; font-weight: 500; font-size:0.9rem; line-height:1rem; color:#444444; }

#container .card .tel { display: flex; justify-content: center; align-items: center; position: absolute; width:3.5625rem; height:3.5625rem; right:-0.7rem; bottom:-1.2rem; background-color:#f44300; border-radius:50%; border:2px solid #fff; box-shadow:0 0 8px rgba(0, 0, 0, 0.1); line-height:0; }
#container .card .tel img { width:2rem; }


.card_ani {
	animation-name: card_fade; /* 이름 */ /* 키프레임을 두개지정하고 두개선언할 수 있다. */
	animation-duration: 0.8s; /* 속도 */
	animation-delay: 0.1s; /* 대기시간 */
	animation-iteration-count: 1; /* 반복 횟수 (숫자) 또는 infinite(계속) */
	animation-fill-mode: forwards; /* 애니메이션이 끝난 후의 상태를 설정. forwards(애니메이션 마지막 상태 유지), backwards(애니메이션 첫 상태 유지), both(애니메이션 첫 상태와 마지막 상태 모두 유지) */
	animation-timing-function: linear; /* 모션방법 linear , ease , ease-in , ease-out , ease-in-out */
	animation-direction: alternate; /* 애니메이션 루프 방향은 alternate 번갈아가며 변경되며 시작에서 끝 그리고 끝에서 시작 형태로 반복됩니다.*/
}

@keyframes card_fade {
	0% { opacity: 0; padding-top:60px; } /* 0% 대신 from 으로 대체가능 */
	100% { opacity: 1; padding-top:0; } /* 100% 대신 to 로 대체가능 */
}


#container .notice_ani_outer { opacity:0; }
#container .notice { cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 0.9rem; margin: 1.6875rem 0.875rem 0; padding: 1.2500rem 1.6rem; background-color:#00b1f4; border-radius:0.7rem; }
#container .notice .icon { flex-shrink: 0; width:1.1rem; line-height:0; }
#container .notice .icon img { width:100%; }
#container .notice .subject { flex-grow: 1; font-weight: 500; font-size:0.9rem; line-height:1rem; color:#ffffff; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; }


#container .banner_ani_outer { opacity:0; }
#container .banner { display: flex; justify-content: space-between; align-items: center; gap: 3%; margin: 0.7500rem 0.875rem 0; }
#container .banner .item { cursor: pointer; display: flex; justify-content: space-between; align-items: center; width: 48.5%; padding: 1.7500rem 1.3rem; background-color: #3279ed; border-radius:0.7rem; }
#container .banner .item .subject { font-weight: 600; font-size:1rem; line-height:1rem; color:#ffffff; }
#container .banner .item .icon { width:1.5rem; line-height:0; }
#container .banner .item .icon img { width:100%; }


#container .article_ani_outer { opacity:0; }
#container .article { margin: 2.8rem 0.875rem 0; }
#container .article .head { display:flex; justify-content: space-between; align-items: center; margin:0 0.5rem 0 0.25rem; }
#container .article .head h2 { margin: 0; padding:0; font-weight: 700; font-size:1.3rem; line-height:1.5rem; color:#000000; }
#container .article .head .more { width:0.6250rem; line-height:0; }
#container .article .head .more img { width:100%; }

#container .article .list { display: flex; flex-direction: column; gap: 0.8750rem; margin:0.8750rem 0 0; }
#container .article .list .item { background-color: #fff; border-radius:0.7rem; box-shadow:0 0 8px rgba(0, 0, 0, 0.1); }
#container .article .list .item a,
#container .article .list .item a:hover { display:block; padding:1.25rem 1.375rem; font-weight: 500; font-size:0.9rem; line-height:1rem; color:#444444; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; }


/* FOOTER */
#footer .fixed_gnb { z-index: 2; position: relative; display:flex; justify-content:space-between; padding:1.1250rem 0 0; }
#footer .fixed_gnb .item { cursor: pointer; position: relative; width:18.5%; }
#footer .fixed_gnb .item.v1 { width:26%; }
#footer .fixed_gnb .item .icon { height:1.3750rem; text-align:center; line-height:0; }
#footer .fixed_gnb .item .icon img { height:1.3750rem; }
#footer .fixed_gnb .item .title { margin:0.3125rem 0 0; font-weight: 400; font-size:0.75rem; color:#222222; text-align:center; }
#footer .fixed_gnb .item.v1 .title { margin:0.7500rem 0 0; }

#footer .fixed_gnb .item .proof { display: flex; justify-content: center; align-items: center; position: absolute; width: 4rem; height: 4rem; margin:0 auto; left:50%; bottom:1.7rem; margin-left:-2rem; background-color: #00b1f4; border-radius:50%; border:3px solid #fff; }
#footer .fixed_gnb .item .proof .more { width:1.2500rem; height:1.2500rem; background-color:#fff; border-radius:50%; }


/* SUB CONTAINER */
#sub_container { padding:7.375rem 1rem 9rem; opacity:0; }

#sub_container {
	animation-name: sub_fade; /* 이름 */ /* 키프레임을 두개지정하고 두개선언할 수 있다. */
	animation-duration: 0.8s; /* 속도 */
	animation-delay: 0.1s; /* 대기시간 */
	animation-iteration-count: 1; /* 반복 횟수 (숫자) 또는 infinite(계속) */
	animation-fill-mode: forwards; /* 애니메이션이 끝난 후의 상태를 설정. forwards(애니메이션 마지막 상태 유지), backwards(애니메이션 첫 상태 유지), both(애니메이션 첫 상태와 마지막 상태 모두 유지) */
	animation-timing-function: linear; /* 모션방법 linear , ease , ease-in , ease-out , ease-in-out */
	animation-direction: alternate; /* 애니메이션 루프 방향은 alternate 번갈아가며 변경되며 시작에서 끝 그리고 끝에서 시작 형태로 반복됩니다.*/
}

@keyframes sub_fade {
	0% { opacity: 0; margin-top:60px; } /* 0% 대신 from 으로 대체가능 */
	100% { opacity: 1; margin-top:0; } /* 100% 대신 to 로 대체가능 */
}



/* BOARD */
#board { padding-bottom:2rem; }
#board .search { display: flex; justify-content: space-between; padding: 1rem 1.3750rem; background-color:#fff; border-radius:0.7rem; box-shadow:0 0 10px rgba(0, 0, 0, 0.1); }
#board .search .field { flex-grow:1; }
#board .search .field .input { width:100%; height:1.7500rem; font-weight: 500; font-size:0.9rem; color:#888888; border:none; }
#board .search .field .input::-webkit-input-placeholder { font-weight: 500; font-size:0.9rem; color:#888888; }
#board .search .field .input:moz-placeholder { font-weight: 500; font-size:0.9rem; color:#888888; }
#board .search .field .input::-moz-placeholder { font-weight: 500; font-size:0.9rem; color:#888888; }
#board .search .field .input:-ms-input-placeholder { font-weight: 500; font-size:0.9rem; color:#888888; }
#board .search .btn_search { width:1.7500rem; line-height:0; }
#board .search .btn_search img { width:100%; }

#board .notice { cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 0.9rem; position: relative; margin: 1.1250rem 0 0; padding: 1.2500rem 1.6rem; background-color:#00b1f4; border-radius:0.7rem; }
#board .notice.v1 { margin: 1.1250rem 0; }
#board .notice .icon { flex-shrink: 0; width:1.1rem; line-height:0; }
#board .notice .icon img { width:100%; }
#board .notice .subject { flex-grow: 1; font-weight: 500; font-size:0.9rem; line-height:1rem; color:#ffffff; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; }

#board .notice .more { position:absolute; width:23px; right: 1.3750rem; top:50%; margin-top:-11px; }
#board .notice .more:after { content: ""; position:absolute; width:22px; height: 4px; left: 0; top: 9px; background-color:#fff; border-radius:20px; }
#board .notice .more:before { content: ""; position:absolute; width:4px; height: 22px; left: 9px; top: 0; background-color:#fff; border-radius:20px; -webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg);-webkit-transition:.3s ease-in-out;-moz-transition:.3s ease-in-out;-o-transition:.3s ease-in-out;transition:.3s ease-in-out; }

#board .notice.open .more:before { -webkit-transform:rotate(90deg); -moz-transform:rotate(90deg); -o-transform:rotate(90deg); transform:rotate(90deg); }

#board .list_default { display: flex; flex-direction: column; gap: 0.8750rem; margin:1.5625rem 0 0; }
#board .list_default .list_item { cursor: pointer; padding: 1rem 1.3750rem; background-color: #fff; border-radius:0.7rem; box-shadow:0 0 8px rgba(0, 0, 0, 0.1); }
#board .list_default .list_item .subject { font-weight: 500; font-size:0.9rem; line-height:1rem; color:#222222; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; }
#board .list_default .list_item .option { margin: 0.4rem 0 0; font-weight: 400; font-size:0.7406rem; line-height:1rem; color:#888888; }

#board .list_press { display: flex; flex-direction: column; gap: 0.8750rem; margin:1.5625rem 0 0; }
#board .list_press .list_item { cursor: pointer; display: flex; align-items: center; gap: 0.8750rem; padding: 0.7rem; background-color: #fff; border-radius:0.7rem; box-shadow:0 0 8px rgba(0, 0, 0, 0.1); }
#board .list_press .list_item .thum { width: 5rem; height: 3.2500rem; border-radius:0.5rem; background-color: #c7c7c7; }
#board .list_press .list_item .info { flex-grow:1; }
#board .list_press .list_item .info .subject { font-weight: 500; font-size:0.9rem; line-height:1rem; color:#222222; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; }
#board .list_press .list_item .info .option { margin: 0.4rem 0 0; font-weight: 400; font-size:0.8rem; line-height:1rem; color:#888888; }

#board .list_icon { display: flex; flex-direction: column; gap: 1.1250rem; margin:0; }
#board .list_icon .list_item { cursor: pointer; display: flex; justify-content: space-between; align-items: center; padding: 1.5000rem 1.7500rem; background-color: #fff; border-radius:0.7rem; box-shadow:0 0 8px rgba(0, 0, 0, 0.1); }
#board .list_icon .list_item .subject { font-weight: 600; font-size:1rem; line-height:1rem; color:#222222; }
#board .list_icon .list_item .thum { width:1.5000rem; line-height:0; }
#board .list_icon .list_item .thum img { width:100%; }

#board .view { background-color: #fff; border-radius:0.7rem; box-shadow:0 0 8px rgba(0, 0, 0, 0.1); }
#board .view .view_title { padding: 1.3000rem 1.8rem; font-weight: 500; font-size:1.0625rem; line-height:1.4rem; color:#fff; background-color: #00b1f4; border-top-left-radius:0.7rem; border-top-right-radius:0.7rem; word-break: keep-all; }
#board .view .view_option { padding: 0.6250rem 1.8rem; font-weight: 300; font-size:0.8337rem; line-height:1rem; color:#666666; border-bottom:1px solid #d2d2d2; }
#board .view .view_content { padding: 1.5000rem 1.8rem 2.2rem; font-weight: 500; font-size:0.9250rem; line-height:1.6669rem; color:#222222; }

.btn_area { display: flex; justify-content: center; align-items: center; gap: 1rem; margin:2.9375rem 0 0; }
.btn_area.v1 { margin:1.3750rem 0 0; }
.btn_area .btn { width:6.7500rem; height:3rem; border-radius:0.7rem; }
.btn_area .btn.blue { background-color:#3279ed; }
.btn_area .btn.gray { background-color:#8f8f8f; }
.btn_area .btn a,
.btn_area .btn a:hover { display:block; font-weight: 400; font-size:0.9263rem; line-height:3rem; color:#fff; text-align:center; }


#board .write { padding: 1.6250rem 1.3750rem; background-color: #fff; border-radius:0.7rem; box-shadow:0 0 8px rgba(0, 0, 0, 0.1); }
#board .write .list { display:flex; flex-direction:column; gap:1.8750rem; }
#board .write .list .list_item { }
#board .write .list .list_item .title { position:relative; padding:0 0 0 1.3750rem; font-weight: 600; font-size:1rem; color:#222222; background:url('../images/board/dot.png') no-repeat left 5px; background-size: 0.76rem; }
#board .write .list .list_item .title .info { position:absolute; width:1.5000rem; right: 0; top: -0.1875rem; line-height:0; }
#board .write .list .list_item .title .info img { width:100%; }

#board .write .list .list_item .field { display:flex; flex-direction: column; gap: 0.8750rem; margin:0.9375rem 0 0; }
#board .write .list .list_item .field .input { width:100%; height:3.5000rem; padding: 0 1rem; font-weight: 500; font-size:0.9250rem; color:#888888; border:1px solid #c4c4c4; border-radius:0.7rem; background-color:#fafafc; }
#board .write .list .list_item .field .input::-webkit-input-placeholder { font-weight: 500; font-size:0.9250rem; color:#888888; }
#board .write .list .list_item .field .input:moz-placeholder { font-weight: 500; font-size:0.9250rem; color:#888888; }
#board .write .list .list_item .field .input::-moz-placeholder { font-weight: 500; font-size:0.9250rem; color:#888888; }
#board .write .list .list_item .field .input:-ms-input-placeholder { font-weight: 500; font-size:0.9250rem; color:#888888; }


/* 팝업 */
#popup_bg { position:fixed; width:100%; height:100vh; left:0; top:0; background-color:rgba(0,0,0,0.6); z-index:999999; display:none; }
#popup { position:fixed; width:100%; height:100vh; left:0; top:0; -webkit-overflow-scrolling:touch; z-index:999999; display:table; display:none; }
#popup .outer { display:table-cell; vertical-align:middle; }
#popup .outer .inner { position:relative; width:auto; height:50vh; margin:20px; background-color:#fff; -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; }
#popup .outer .inner .inner_box { overflow-y:auto; position:relative; height:50vh; padding:30px; font-weight: 400; font-size: 1rem; line-height: 1.5rem; word-break: keep-all; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; -moz-box-shadow:0 0 20px #555; -webkit-box-show:0 0 20px #555; box-shadow:0 0 20px #555; }
#popup .outer .inner .btn_close { position:absolute; width:100%; height:40px; left:0; right:0; top:50vh; margin-top:0; background-color:#999; text-align:center; cursor:pointer; }
#popup .outer .inner .btn_close img { width:16px; margin-top:10px; }



@media screen and (max-width:768px) {
	#wrap { width: auto; }
}