@charset "UTF-8";
@import url("/font/remixicon_v4.0.1/remixicon.css");
@import url("/font/webfonts_suit.css");
@import url(/css/animation.css);
@import url(/css/basic.css);

/*-------------------------------------------------
title       :초기화
Create date :2024-03
-------------------------------------------------*/
*, *::before, *::after {-webkit-text-size-adjust:none; -webkit-box-sizing:inherit; box-sizing:inherit; padding:0; margin:0;}
html {overflow:hidden; overflow-y:auto; -webkit-box-sizing:border-box; box-sizing:border-box; font-size:10px; min-width:320px;}
body {color:#151515; overflow:hidden; margin:0; padding:0; font-size:1.8rem; line-height:1.25; font-family:'SUIT', 'Malgun Gothic', 'sans-serif'; font-weight:500;}
header, footer, main, section, article, nav, aside ,figcaption,figure,hgroup{display:block}
ul, ol, li, dl, dt, dd {margin:0; padding:0; list-style:none}
h1, h2, h3, h4, h5, h6, p, form, figure, figcaption {margin:0; padding:0}
fieldset, hr {display:block; margin:0; padding:0; border:0 none}
input, select {max-width:100%; vertical-align:0}
input, select, button, textarea, optgroup {margin:0; font-family:inherit; font-size:inherit; color:inherit}
select {-webkit-appearance:none; -moz-appearance:none; appearance:none}
select::-ms-expand {display:none}
address, em, i {font-style:normal}
strong {font-weight:600}
a {color:inherit; text-decoration:none}
button {padding:0; border:0 none; background:none; cursor:pointer}
input[type='submit'] {-webkit-appearance:none; -moz-appearance:none; appearance:none}
img {max-width:100%; border:0 none; font-size:0; vertical-align:middle}
table {width:100%; border:0; border-collapse:collapse; border-spacing:0}
table + * { border-collapse:collapse; }
caption {overflow:hidden; width:0; height:0; padding:0; border:0 none; text-indent:-9999px}
legend, .sr_only, .hidden, .blind, .IR {overflow:hidden; position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0 none; clip:rect(0, 0, 0, 0)}
input,select,textarea{color:#151515;}
input::placeholder{font-size: 100%;}
input::-moz-placeholder { color: #767676; opacity: 1; font-size: 100%;}
input:-ms-input-placeholder{color:#767676; font-size: 100%;}
input::-webkit-input-placeholder { color: #767676; font-size: 100%;}
input[type=password],
input[type=text],
select{border-radius: 0; padding:.6rem 1.2rem;min-height:4.6rem;line-height:1.42857143;color:#555;background-color:#fff;background-image:none;border:1px solid #CED6DC;transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s}
input[type=password]:focus,
input[type=text]:focus,
select:focus,
textarea:focus {border-color: #CED6DC;}
input[disabled],
input[readonly] {background-color: #eee;  color:#999; opacity: 1;}
input[disabled] {cursor: not-allowed;}
hr{margin:0;border:none;padding:0;display:block}
figcaption,figure,form{padding:0;margin:0}
fieldset{border:none;padding:0;margin:0}
button,input,optgroup,pre,select,textarea{color:inherit;font-family:inherit;font-size:inherit;font-weight:inherit;margin:0}
iframe{border:0}
input{outline: none;}
html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, button, p, blockquote, th, td,nav{-webkit-tap-highlight-color: transparent;}

/*크롬 자동 완성 선택 시 배경색 변하는 거 막음*/
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active  { -webkit-box-shadow: 0 0 0 30px white inset !important;}
@media (max-width:767px) {
	
	input:-webkit-autofill,
	input:-webkit-autofill:hover,
	input:-webkit-autofill:focus,
	input:-webkit-autofill:active  { -webkit-box-shadow: 0 0 0 30px #eee inset !important;}
		
}

//드래그 시, 색상
*::selection {background-color:#09b8b2; color:#fff}


/*탭 포커스 스타일
a:focus{position:relative}
a:focus:before{content:''; width:100%; height:100%; border:1px dotted #000 !important; color:#09b8b2; position:absolute; left:0; top:0; z-index:100}
*/

/*게시글 new icon*/
.xi-new {color:#3175d2}

/*새창 아이콘*/
.linkWindow, .blankW {position:relative}
.linkWindow:after, 
.linkWindow2:after, 
.blankW:after {content:'' !important; font-family:'xeicon'; font-weight:normal; display:inline; margin-left:0.3rem; vertical-align:-0.1rem}
.blankW {color:rgb(33, 150, 243); text-decoration: underline}
.linkWindow2 {color:#0077D4; position:relative; text-decoration:underline}


/*컨트롤 공통*/
.controller {display:inline-flex; align-items:center}
.controller button {color:transparent; font-size:0; display:inline-block; width:3rem; height:3rem; line-height:3rem; vertical-align:middle}
.controller button:before {color:#888; display:block; font-family:'remixicon'; font-size:1.8rem; width:100%; height:100%}
.prev:before {content:"\ea64"}
.next:before {content:"\ea6e"}
.play:before {content:"\f00a";}
.stop:before {content:"\efd8"; font-weight:bold;}
/*페이징*/
.paging {color:transparent; font-size:0; font-family:'Montserrat'; font-weight:700; display:inline-block; height:2rem; vertical-align:middle; line-height:1; margin-right:2rem}
.paging span {color:#888; font-size:1.6rem}
.paging .this {font-weight:700}
.paging .this:after {content:''; transform:rotate(30deg); opacity:0.6; width:1px; height:1.4rem}
/*효과*/
.controller button:hover:before {color:#151515}
/*dots*/
.slick-dots li {display:inline-block; margin:0 .3rem; height:3rem}
.slick-dots li button {border:1px solid #368aff; border-radius:100rem; color:transparent; display:block; width:1rem; height:1rem}
.slick-dots li.slick-active  button {background-color:#368aff}

#skip_nav { position: absolute; left: 0; top: -1000px; width: 100%; height: 0px; z-index: 1000; line-height: 0px; font-size: 0px; }
#skip_nav a { display: block; text-align: center; width: 100%; line-height: 0px; font-size: 0px; }
#skip_nav a:focus, #skip_nav a:hover, #skip_nav a:active { position: absolute; left: 0px; top: 1000px; padding: 8px 0; display: block; height: 30px; background: #20262c; font-size: 12px; font-weight: bold; line-height: 18px; color: #fff; }

/*개인정보수집 및 이용 동의*/
// .agree {margin-bottom:5rem; position:relative}
// .agree .title { margin-top: 2rem; font-size: 2.5rem; font-weight: 500; color: #333; }
// .agree .form { text-align: right; }
// .agree .item { overflow: hidden; overflow-y: auto; max-height: 31.5rem; margin: 1rem 0; padding: 3rem 3rem 0; border: 1px solid #ddd; }
// .agree .item::after { display: block; width: 100%; height: 3rem; content: ''; }
// .agree .item p strong { display: block; margin: 3rem 0 2rem; font-size: 1.8rem; font-weight: 500; color: #000; }
// .agree:first-child .title { margin-top: 0; }
// .agree .more {display:none}

// @media (max-width:767px) { 
// 	.agree .charter {height:33rem; overflow:hidden}
// 	.agree .more {color:#999; font-size:1.6rem; display:block; text-align:center; position:absolute; bottom:0; width:100%; text-align:center; padding:1rem 0}
// 	.agree .more:before {content:''; background:linear-gradient(-180deg, transparent, #c3c3c3); height:3rem; width:100%; position:absolute; left:0; bottom:0; z-index:-1}
// 	.agree .more .btn {background-color:#fff; border:1px solid #ccc; border-radius:50rem; padding:.5rem 1rem}
	
// 	.agree.active .charter {height:auto}
// 	.agree.active .more {display:none}
// }


/*개인정보 수집 동의*/
.privacyTit{display: block; margin-bottom: 2rem;@include font(2.4rem,700);}
.privacy_agree .agree-box {border:1px solid #ddd; border-radius:0.5rem; font-size:1.4rem; margin-bottom:2rem; padding:2rem}
.agree-box > strong {color:#333; display:block;  @include font(1.6rem,500); margin-top:2rem; margin-bottom:0.5rem}
.agree-box > strong:first-child {margin-top:0}
.agree-box > p {margin-bottom:0.5rem;  @include font(1.6rem,500);}
.agree-box > .dep04 li {position:relative; color:#666;  @include font(1.6rem,500);}
.agree-box .p-box {margin-top:2rem}
.agree-box .p-box small {display:block; line-height:1.4; margin:0.5rem 0}
.privacy_agree .form {clear:both; overflow:hidden; text-align:left; margin-bottom:4rem; min-height:2.5rem; line-height: 1.25;}
.privacy_agree .form a {color:#666; font-size:1.4rem; float:left}
.privacy_agree .form .form_check {float:right}
@media (max-width:768px) { 
	.privacyForm{ text-align: center;
		.i-refer{display: block; text-align: center;}
	}
	.privacy_agree{
		.form{@include flex; flex-wrap: wrap;}
		.form_radio + .form_radio {margin-left: 1rem;}
	}
}
@media (max-width:480px) { 
	.privacy_agree .form a {display:block; float:none; margin-bottom:0.5rem}
	.privacy_agree .form .form_check {float:none}
}

/* .privacy_agree .title_depth01 {color:#333; font-size:18px; font-weight:500; margin:20px 0 10px}
.privacy_agree .group {border:1px solid #ddd; border-top:1px solid #666; margin-bottom:15px; padding:20px 25px}
.privacy_agree .group .title_depth02 {color:#333; font-size:15px; font-weight:500}
.privacy_agree .group .bul_dot strong,
.privacy_agree .group .bul_dot div {font-size:14px; margin-bottom:10px; padding-left:8px; position:relative}
.privacy_agree .group .bul_dot strong:before {content:''; position:absolute; top:9px; left:0; width:3px; height:3px; border-radius:100px; background:#666}
 */
//* input, select, txtarea 스타일*/
.form_textbox {width: 100%; height: 4.6rem; max-height: 100%; padding: 0 1.5rem; border: 1px solid #CED6DC; border-radius:0.4rem; text-align: left; vertical-align: top; -webkit-transition: all 0.2s; transition: all 0.2s; border-radius: 0; }
.form_textbox:focus { border-color: #000; }
.form_textbox.hasDatepicker { width: 15rem; padding-right: 5rem; }
.form_textbox.hasDatepicker + .ui-datepicker-trigger { position: absolute; left: auto; top: auto; width: 3rem; margin: 0.6rem 0 0 -4rem; }
.form_textbox.number { width: 10rem; vertical-align:middle}
.form_textbox:focus {border-color:#000}
.form_textbox::placeholder {color:#666}
.form_textbox:-ms-input-placeholder {color:#666}
textarea.form_textbox {width:100%; height:auto; min-height:10rem; padding: 2rem;}
.form_mail {display:flex; flex-wrap:wrap; gap:0.5rem; line-height:4rem}
.form_mail .form_textbox {width:18rem; vertical-align:middle}
.form_mail .form_select {vertical-align:middle}
.form_tel{display:flex; flex-wrap:wrap; gap:0.5rem; align-items: center;}
.form_tel .form_textbox {width:10rem ; vertical-align:middle}
.form_addr {display:flex; flex-wrap:wrap; gap:0.5rem}
.form_date .form_textbox {vertical-align:middle}
.form_textarea{border: 1px solid #CED6DC; padding: 2rem;}

@media (max-width:640px) {
  .form_mail .form_textbox {flex:1 1; width:50%}
  .form_mail .form_select {width:100%}
  .form_tel .form_select {width:8.5rem }
  .form_tel .form_textbox {width:8rem }
  .form_addr .form_textbox.postcode,
  .form_addr .form_textbox#postcode {width:15rem}
  .form_date .form_textbox {width:calc(50% - 1rem) !important}
}

.form_select { display: inline-block; font-size:1.6rem; position: relative; height: 4.6rem; color: #333; vertical-align:top; z-index:1}
.form_select::after {content: ''; color:#767676; font-size:2rem; font-family: "xeicon"; position: absolute; top: 50%; right: 1rem; -webkit-transform: translateY(-50%); transform: translateY(-50%); z-index:-1}
.form_select::before {content:''; background-color:#fff; position:absolute; left:0; top:0; width:100%; height:100%; z-index:-1}
.form_select select {background-color:transparent; border: 1px solid #CED6DC;  width: 100%; height: 4rem; padding: 0 3.5rem 0 1.5rem; vertical-align: top;/*  -webkit-transition: all 0.2s; transition: all 0.2s; */ }

.form_check {display: inline-block; position: relative; z-index: 0; margin-right:3rem; /*vertical-align: top;*/ }
.form_check label { cursor: pointer; padding-left: 2.5rem}
.form_check label::before { position: absolute; left: 0; top: 0.3rem; z-index: -2; width: 1.6rem; height: 1.6rem; border: 2px solid #CFD1D3; background-color: #fff; content: ''; }
.form_check label::after { position: absolute; left: 0; top: 0.3rem; z-index: -1; width: 1.6rem; height: 1.6rem; font-family: "xeicon"; font-size:1.6rem; color: #ddd; text-align: center; line-height: 1.5rem; -webkit-transition: all 0.2s; transition: all 0.2s; }
.form_check input { position: absolute; left: 0; top: 0; opacity: 0; }
.form_check input:focus + label::before { outline: 1px dotted #000; }
.form_check input:checked + label::before {background-color:#185FDB; border-color:#185FDB}
.form_check input:checked + label::after {content: ''; color:#fff}
.form_check:last-child { margin-right: 0; }

.form_radio {display:inline-block; position:relative; z-index:0; margin-right:3rem; line-height: 3rem; }
.form_radio label {cursor:pointer; color:#555; padding-left:2.5rem}
.form_radio label::before {position:absolute; left:0; top:0.1rem; z-index:-2; width:2rem; height:2rem; border-radius:100%; border:2px solid #C6CFD4; background-color:#fff; content:''}
.form_radio label::after {position:absolute; left:0.7rem; top:0.8rem; z-index:-1; width:0.6rem; height:0.6rem; border-radius:100%; content:''}
.form_radio input {position:absolute; left:0; top:0; opacity:0}
.form_radio input:focus + label::before {outline: 1px dotted #000}
.form_radio input:checked + label::before {border:2px solid #185FDB}
.form_radio input:checked + label::after {background-color:#185FDB}
.form_radio:last-child {margin-right:0}

.form-radio-group{
	.form_radio label::before{top:0.5rem;}
	.form_radio label::after{top:1.2rem;}
}

@media (max-width:840px) 
{ 
	.form_radio {margin-right:2rem}
    .form_radio label {display:block}
    .form_radio label::before {top:0.1rem}
    .form_radio label::after {top:0.8rem}
}

/*체크박스*/
.board_info.multi {align-items:inherit}
.check-box {background-color:#F8F8F8; border-radius:2rem; margin-bottom:2rem; padding:1rem 4rem}
.check-box .article {border-top:1px solid #EBEDF0; display:flex; flex-wrap:wrap; width:100%; padding:1rem 0}
.check-box .article .label {color:#333; font-size:1.6rem; font-weight:700; width:9rem; line-height:1.4; padding-right:2rem; padding-top:0.5rem}
.check-box .search-group {border-top:0; align-items:center}
.check-box .search-group .group {width:calc(100% - 9rem); display:flex; gap:0.5rem}
.check-box .search-group .group .input {flex-grow:1}
.check-box .search-group .group button {height:4rem; min-height:auto}
.check-box .search-group .group button i {margin-left:0; margin-right:0.5rem}
.check-box .search-group .group .detail button i {margin-left:0.5rem; margin-right:0}

.check-box .article .check-list {width:calc(100% - 9rem); display:flex; flex-wrap:wrap; gap:0.5rem}
.check-box .article .check-list .group {border-bottom:1px dashed #ddd; position:relative; padding-left:8rem}
.check-box .article .check-list .group:last-child {border-bottom:0}
.check-box .article .check-list .group .label {font-size:1.4rem; display:inline-block; position:absolute; left:0;}

.check-box .check input {position:absolute; left:0; top:0; opacity:0}
.check-box .check label {background-color:#fff; border:1px solid #ddd; border-radius:100rem; color:#666; cursor:pointer; display:flex; font-size:1.4rem; font-weight:normal; min-width:7rem; text-decoration:none !important; transition:all .3s; line-height:2; padding:0 1rem; position:relative; justify-content:center}
.check-box .check label::before {display:inline-block; font-family:'xeicon'; width:1.4rem; height:1.4rem; margin-right:0.5rem}
.check-box .check input:checked + label::before {content:""; color:#fff; font-family:'xeicon'}
.check-box .check input:checked + label {background-color:#0077D4; border-color:#0077D4; color:#fff}
.check-box .check input:focus + label {outline:1px dotted #000}
.check-box .check label:hover{border-color:#0077D4}
.check-box .form_multi .form {background:none; border:none; padding:0}
.check-box .form_multi .label {padding:0}

@media (max-width:1024px) 
{ 
	.check-box .search-group .label {display:none}
	.check-box .search-group .group {width:100%}
	.check-box .search-group .group button {width:4rem; padding:0; text-align:center; line-height:4rem; flex-wrap:wrap; overflow:hidden}
	.check-box .search-group .group button i {display:block; width:100%; height:100%; margin:0; line-height:inherit}
	.check-box .search-group .group .detail button {width:auto; padding:0 1.2rem}
	.check-box .search-group .group .detail button i {display:inline; width:auto}
}

@media (max-width:840px) 
{ 
	.check-box {padding:1.5rem 2rem}
    .check-box .article {padding:1.5rem 0}
    .check-box .article .label {width:100%; line-height:1; margin-bottom:1rem; font-size:1.4rem; padding-top:0}
    .check-box .article .check-list {width:100%; gap:0.3rem}
    /*.check-box .article .check-list .check {width:100%; height:0; opacity:0; visibility:hidden; margin-bottom:-1px}
    .check-box .article.active .check-list .check {height:auto; opacity:1; visibility:visible}*/

	.check-box .search-group .group {position:relative; padding-bottom:4.5rem}
	.check-box .search-group .select {flex-shrink:0}
	.check-box .search-group .select .form_select {min-width:10rem}
	.check-box .search-group .btnbox {width:4rem}
	.check-box .search-group .detail {position:absolute; bottom:0; left:0; width:calc(50% - 0.1rem)}
	.check-box .search-group .group .detail button {width:100%; justify-content:center}
	.check-box .search-group .reset {position:absolute; bottom:0; right:0; width:calc(50% - 0.1rem)}
	.check-box .search-group .group .reset button {width:100%; padding:0 1.2rem; justify-content:center}
	.check-box .search-group .group .reset button i {display:inline; width:auto; margin-right:0.5rem}
}

.form_file { display: block; overflow: hidden; position: relative; z-index: 0; width: 100%; max-height: 100%; text-align: left}
.form_file input { width: 8rem; height: 3.5rem; border: 0 none; opacity: 0; cursor: pointer; }
.form_file input:hover + .txt::before,
.form_file input:focus + .txt::before { background-color: #999; color: #fff; }
.form_file .txt::before { position: absolute; left: 0; top: 0; z-index: -1; width: 8rem; height: 3.5rem; line-height: 3.5rem; border: 1px solid #999; font-size: 1.5rem; color: #333; content: '첨부파일'; text-align: center; cursor: pointer; transition: all 0.2s; }
.form_file .txt {color:#888; font-size:1.3rem; overflow: hidden; float: right; width: calc(100% - 9rem); padding-top:0.5rem}