@charset "utf-8";
/* font */
@import url("font.css");
/*base*/
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
body{ width:100%; height:100%; text-align:left; font-size:16px; font-weight:400; font-family:"SpocaNeo","Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif; color:#4B5053; line-height:1.625; letter-spacing:-0.75px; -webkit-overflow-scrolling:touch; }
*:focus { box-shadow:none; -webkit-box-shadow:none;}
*:focus:not(:focus-visible) { outline: 0; }
body,p,h1,h2,h3,h4,h5,h6,table,caption,form,fieldset,legend,span,div,th,td,address{margin:0; padding:0; }
ul,ol,li,dl,dt,dd{list-style:none; margin:0; padding:0px}
img{ border:0 none; line-height:0; font-size:0; vertical-align:top; }
main,header,section,nav,footer,aside,article,figure{ display:block; }
table{border-collapse:collapse; border-spacing:0; width:100%}
fieldset{border:0}
legend, caption{width:0; height:0; text-indent:-10000px; font-size:0px; line-height:0; position:absolute; left:-99999px; }
textarea{border:2px solid #dbdbdc; padding:8px 10px !important; line-height:18px; resize:none; }
input, textarea { vertical-align:middle; font-size:14px; color:#4B5053; font-family:"SpocaNeo","Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;  padding:0; margin:0; }
input[type="checkbox"] { width:12px; height:12px; margin-right:7px;}
input[type="radio"] { width:13px; height:13px; border:none; }
input[type="file"]{height:22px; color:#666; border:1px solid #d4d4d4; line-height:22px; vertical-align:middle; background:#fff}
input.text{height:18px; padding:8px 10px; border:2px solid #dbdbdc; }
input.date{margin:0 3px 0 0; width:110px}
em { font-style:normal; }
iframe { border:none; }
strong { font-weight:bold; }
a { color:#444444; text-decoration:none; }
hr { border:0; background:#D5D5D5; margin:0; height:1px; }
button { padding:0; border:none; cursor:pointer; font-family:inherit; background:none; border-radius:0; }
/* common */
.hide { display:none; }
.of-hi { overflow:hidden !important; }
.fl-l { float:left !important; }
.fl-r { float:right !important; }
.cl-b { width:0; height:0; font-size:0; line-height:0; clear:both;}
.va-m { vertical-align:middle !important;}
.va-t { vertical-align: top !important;}
.max { width:100% !important; }
.ta-c { text-align:center !important; }
.ta-l { text-align:left !important; }
.ta-r { text-align:right !important; }
.clear { display:block; overflow:visible; width:auto; clear:both; *zoom:1;}
.clear:after { display:block; visibility:hidden; height:0; font-size:0; clear:both; content:'';}
.w100 { width:100% !important; }
.ellipse { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.ellipse.lh2 { white-space: normal; line-height: 1.2; height: 2.4em; text-align: left; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ellipse.lh3 { white-space: normal; line-height: 1.2; height: 3.6em; text-align: left; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.ellipse.lh4 { white-space: normal; line-height: 1.2; height: 4.8em; text-align: left; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; }
.uppercase { text-transform: uppercase; }

.mt0 { margin-top: 0 !important;}
.mt4 { margin-top: 4px !important; }
.mt8 { margin-top: 8px !important; }
.mt16 { margin-top: 16px !important; }
.mt24 { margin-top: 24px !important; }
.mt32 { margin-top: 32px !important; }
.mt40 { margin-top: 40px !important; }
.mt48 { margin-top: 48px !important; }
.mt64 { margin-top: 64px !important; }
.mt96 { margin-top: 96px !important; }
.mt120 { margin-top: 120px !important; }
.mt200 { margin-top: 200px !important; }

.mb0 { margin-bottom: 0 !important;}
.mb4 { margin-bottom: 4px !important; }
.mb8 { margin-bottom: 8px !important; }
.mb16 { margin-bottom: 16px !important; }
.mb24 { margin-bottom: 24px !important; }
.mb32 { margin-bottom: 32px !important; }
.mb40 { margin-bottom: 40px !important; }
.mb48 { margin-bottom: 48px !important; }
.mb64 { margin-bottom: 64px !important; }
.mb96 { margin-bottom: 96px !important; }
.mb120 { margin-bottom: 120px !important; }
.mb200 { margin-bottom: 200px !important; }

.mr0 { margin-right:0px !important; }
.mr4 { margin-right:4px !important; }
.mr8 { margin-right:8px !important; }
.mr16 { margin-right:16px !important; }
.mr32 { margin-right:32px !important; }
.ml0 { margin-left:0px !important; }
.ml4 { margin-left:4px !important; }
.ml8 { margin-left:8px !important; }
.ml16 { margin-left:16px !important; }
.ml32 { margin-left:32px !important; }

.pt0 { padding-top: 0 !important;}
.pt4 { padding-top: 4px !important; }
.pt8 { padding-top: 8px !important; }
.pt16 { padding-top: 16px !important; }
.pt24 { padding-top: 24px !important; }
.pt32 { padding-top: 32px !important; }
.pt48 { padding-top: 48px !important; }
.pt64 { padding-top: 64px !important; }
.pt96 { padding-top: 96px !important; }
.pt120 { padding-top: 120px !important; }
.pt200 { padding-top: 200px !important; }

.pl0 { padding-left: 0 !important;}
.pl8 { padding-left: 8px !important;}

.pb0 { padding-bottom: 0 !important;}
.pb4 { padding-bottom: 4px !important; }
.pb8 { padding-bottom: 8px !important; }
.pb16 { padding-bottom: 16px !important; }
.pb24 { padding-bottom: 24px !important; }
.pb32 { padding-bottom: 32px !important; }
.pb48 { padding-bottom: 48px !important; }
.pb64 { padding-bottom: 64px !important; }
.pb96 { padding-bottom: 96px !important; }
.pb120 { padding-bottom: 120px !important; }
.pb200 { padding-bottom: 200px !important; }

.pr0 { padding-right: 0 !important; }
.pr16 { padding-right: 16px !important; }

/******** UI ********/
[class*="btn"]:not(.btn-wrap) { position:relative; display:inline-block; letter-spacing: -0.75px; }
/*radio, checkbox custom style*/
/*checkbox*/
.checkbox-item { line-height: 24px; padding: 0 32px 0 0;}
.checkbox-item input[type="checkbox"] { position:absolute; opacity:0; cursor: default; width: 24px; height: 24px; cursor: pointer; }
.checkbox-item input[type="checkbox"] + label { position: relative; font-size: 16px; display:inline-block; cursor: pointer; padding-left: 32px; }
.checkbox-item input[type="checkbox"] + label::before,
.checkbox-item input[type="checkbox"]:not(:checked)+label:before { content: ""; width: 24px; height: 24px; display: inline-block; position: absolute; left: 0; top: 50%; transform: translateY(-50%); border-radius: 0px; background: url('../../images/common/icon_check.svg')no-repeat center; transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); }
.checkbox-item input[type="checkbox"]:checked + label:before { background: url('../../images/common/icon_check_active.svg')no-repeat center; }

.checkbox-item.type02 { padding-left: 32px;} 
.checkbox-item.type02 input[type="checkbox"] + label { padding-left: 0;}
.checkbox-item.type02 input[type="checkbox"] + label::before,
.checkbox-item.type02 input[type="checkbox"]:not(:checked)+label:before { content: ""; width: 24px; height: 24px; display: inline-block; position: absolute; left: -32px; top: 50%; transform: translateY(-50%); border-radius: 0px; background: url('../../images/common/icon_check_b.svg')no-repeat center; transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); }
.checkbox-item.type02 input[type="checkbox"]:checked + label:before { background: url('../../images/common/icon_check_b_active.svg')no-repeat center; }

/*radio*/
.radio-item { line-height: 24px; }
.radio-item input[type="radio"] { position:absolute; opacity:0; cursor: default; width: 24px; height: 24px; cursor: pointer; }
.radio-item input[type="radio"] + label { position: relative; min-height:24px; display:inline-block; cursor: pointer; padding-left: 32px; font-weight: 600; font-size: 18px; line-height: 24px;}
.radio-item input[type="radio"] + label::before,
.radio-item input[type="radio"]:not(:checked)+label:before { content: ""; width: 24px; height: 24px; display: inline-block; border: 2px solid #D5DADC; background-color: #D5DADC; position: absolute; left: 0; top: 0; border-radius: 50%; box-sizing: border-box; box-shadow: 0 1px 4px 0 rgba(0,0,0,0.30);}
.radio-item input[type="radio"] + label:after { content:''; position:absolute; left:6px; top:6px; width:12px; height:12px; border-radius:50%; transition: all .3s; background: #D5DADC; }
.radio-item input[type="radio"]:checked + label:before { border: 1px solid #D7AA68; background-color: #D7AA68; }
.radio-item input[type="radio"]:checked + label:after { background-color: #fff; }
.radio-item.focus {outline: 1px dotted #000;}

/* selectbox */
select { width:100%; padding:0px 12px; line-height:1.57; letter-spacing:-0.5px; font-size:16px; color:#ffffff; border:none;}
select::-ms-expand { display: none; }
.select-item { overflow:hidden; position:relative; display:inline-block; width:100%; z-index:1; line-height:1; vertical-align:middle; }
.select-item select { position:relative; z-index:2; width:100%; background-color: #ffffff; background-image: url(../../images/common/icon_select_g.svg); background-repeat: no-repeat; background-position: right center; letter-spacing:0; height: 48px; line-height: 48px; color: #222222; border: 1px solid #cccccc;}
html:first-child select{} /* Opera 9 & Below Fix */

/* selectbox 디자인만 */
select:not(.no-style) {
  font-family:inherit;  /* 폰트 상속 */
  border-radius:0px; /* iOS 둥근모서리 제거 */
  -webkit-appearance:none; /* 네이티브 외형 감추기 */
  -moz-appearance:none;
  appearance:none;
}
/*file custom*/
.file-item { position:relative;}
.file-item .btn.file { display:inline-block; padding:5px 17px; margin-left:6px; margin-top:8px; border:1px solid #545454; border-radius:0; text-align:center; color:#252525; font-size:1.2rem; font-weight:500; background:#fff; }
.file-item .input-file-hidden { position:absolute; left:0; top:0; width:100%; height:100%; opacity:0; cursor:pointer; }

/* IE 10, 11의 네이티브 화살표 숨기기 */
select::-ms-expand {
  display:none;
}
.input-box { position:relative; }
.input-box label {
  position:absolute;
  top:1px;  /* input 요소의 border-top 설정값 만큼 */
  left:1px;  /* input 요소의 border-left 설정값 만큼 */
  padding:7px 11px;  /* input 요소의 padding 값 만큼 */
  color:#999;
  cursor:text;
}
/*input*/
input[type="text"],
input[type="password"],
input[type="tel"] {
  height:auto;
  line-height:normal;
  padding:0px 11px;
  box-sizing:border-box;
  width:auto;
  background:transparent;
  border:1px solid #E9E9E9;
  font-size:1.4rem;
  font-family:inherit;
  border-radius:0;
  color:#fff;
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;  
}

input[type="number"], input[type="email"] {
  height:44px;
  line-height:normal;
  padding:0px 11px;
  box-sizing:border-box;
  background:transparent;
  border:1px solid #D7D7D7;
  font-size:1.4rem;
  font-family:inherit;
  border-radius:0;
  color:#fff;
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;  
}
input[type="text"]:focus,input[type="password"]:focus,input[type="tel"]:focus,input[type="number"]:focus, input[type="email"]:focus, textarea:focus { border: 1px solid #D7D7D7; background-color: #fff; outline: 0px; }

/* input[type="text"]:focus, input[type="password"]:focus, input[type="tel"]:focus, input[type="number"]:focus { border:1px solid #DC0082; } */
::-webkit-input-placeholder {
   color:#888888;
}
:-moz-placeholder { /* Firefox 18- */
   color:#888888;
}
::-moz-placeholder {  /* Firefox 19+ */
   color:#888888;
}
:-ms-input-placeholder {
   color:#888888;
}
input:focus::-webkit-input-placeholder, textarea:focus::-webkit-input-placeholder { /* WebKit browsers */ color:transparent;  }
input:focus:-moz-placeholder, textarea:focus:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color:transparent; }
input:focus::-moz-placeholder, textarea:focus::-moz-placeholder { /* Mozilla Firefox 19+ */ color:transparent; }
input:focus:-ms-input-placeholder, textarea:focus:-ms-input-placeholder { /* Internet Explorer 10+ */ color:transparent; }
/*textarea*/
textarea { width:100%; border:1px solid #dfdfdf; border-radius:0; }

/* ir */
table.ir{ text-indent:-10000px; }
.ir { 
  position: absolute; /* position: absolute/fixed 에서만 clip 속성 작동 */
  margin: -1px; /* 부트스트랩에선 안씀 */
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  white-space: nowrap;
  overflow: hidden; /* overflow: visible 이면 clip 속성 작동 안됨 */
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%); /* H5BP에선 안씀 */
 }

/*animation*/
.ani-all {
    transition:all .5s;
    -webkit-transition:all .5s;
    -moz-transition:all .5s;
    -o-transition:all .5s;
}

/* ScrollMagic  */
[class *= 'effect-'] .obj {
    position:relative;  opacity:0;
    transition: all 1s;
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -o-transition: all 1s;
 }
[class *= 'effect-'].on .obj { opacity:1; }
[class *= 'effect-'].on .obj-left { left:0; }
[class *= 'effect-'].on .obj-right { right:0; }
[class *= 'effect-'].on .obj-top { top:0; }
[class *= 'effect-'].on .obj-m-left { margin-left:0 }
.obj-left { left:-20%; }
.obj-right { right:-20%; }
.obj-top { top:20%; }
/* .obj-middle { top:35%; }
.obj-bottom { top:60%; } */

/*flex*/
.flex-con { display:flex !important; display:-webkit-flex !important; -webkit-align-items: center; align-items: center; -webkit-justify-content: space-between; justify-content: space-between; }
/*방향*/
.flex-con.col { flex-direction:column; }
.flex-con.row { flex-direction:row; }
.flex-con.row-reverse { flex-direction:row-reverse; }
.flex-con.col-reverse { flex-direction:column-reverse; }
/*줄넘김*/
.flex-con.nowrap { flex-wrap:nowrap; }
.flex-con.wrap { flex-wrap:wrap; }
.flex-con.wrap-reverse { flex-wrap:wrap-reverse; }
/*빈공간처리*/
.flex-con.left { justify-content:flex-start; }
.flex-con.right { justify-content:flex-end; }
.flex-con.center { justify-content:center; }
.flex-con.sb { justify-content:space-between; }
.flex-con.sa { justify-content:space-around; }
.flex-con .col1 { flex-grow:1; flex: 1; }
.flex-con .col2 { flex-grow:2; flex: 2; }
.flex-con .col3 { flex-grow:3; flex: 3; }
.flex-con .col4 { flex-grow:4; flex: 4; }
.flex-con .col5 { flex-grow:5; flex: 5; }
.flex-con .col6 { flex-grow:6; flex: 6; }
.flex-con .col7 { flex-grow:7; flex: 7; }
.flex-con .col8 { flex-grow:8; flex: 8; }
.flex-con .col9 { flex-grow:9; flex: 9; }
.flex-con .col10 { flex-grow:10; flex: 10; }

/* col-wrap */
.col-wrap {margin: 0 -8px; overflow: hidden;}
.col-sm-1, .col-md-1, .col-lg-1, 
.col-sm-2, .col-md-2, .col-lg-2,
.col-sm-3, .col-md-3, .col-lg-3,
.col-sm-4, .col-md-4, .col-lg-4,
.col-sm-5, .col-md-5, .col-lg-5,
.col-sm-6, .col-md-6, .col-lg-6,
.col-sm-7, .col-md-7, .col-lg-7,
.col-sm-8, .col-md-8, .col-lg-8,
.col-sm-9, .col-md-9, .col-lg-9,
.col-sm-10, .col-md-10, .col-lg-10,
.col-sm-11, .col-md-11, .col-lg-11,
.col-sm-12, .col-md-12, .col-lg-12 {float: left; position: relative; min-height: 1px; padding-right: 8px; padding-left: 8px; box-sizing: border-box;}

@media (min-width: 1193px) {
	.col-lg-12 { width: 100%; }
	.col-lg-11 { width: 91.66666667%; }
	.col-lg-10 { width: 83.33333333%; }
	.col-lg-9 { width: 75%;}
	.col-lg-8 { width: 66.66666667%; }
	.col-lg-7 { width: 58.33333333%; }
	.col-lg-6 { width: 50%;}
	.col-lg-5 { width: 41.66666667%; }
	.col-lg-4 { width: 33.33333333%; }
	.col-lg-3 { width: 25%; }
	.col-lg-2 { width: 16.66666667%; }
	.col-lg-1 { width: 8.33333333%; }
}
@media (max-width: 1192px) {
	.col-md-12 { width: 100%; }
	.col-md-11 { width: 91.66666667%; }
	.col-md-10 { width: 83.33333333%; }
	.col-md-9 { width: 75%;}
	.col-md-8 { width: 66.66666667%; }
	.col-md-7 { width: 58.33333333%; }
	.col-md-6 { width: 50%;}
	.col-md-5 { width: 41.66666667%; }
	.col-md-4 { width: 33.33333333%; }
	.col-md-3 { width: 25%; }
	.col-md-2 { width: 16.66666667%; }
	.col-md-1 { width: 8.33333333%; }
}
@media (max-width: 768px) {
	.col-sm-12 { width: 100%; }
	.col-sm-11 { width: 91.66666667%; }
	.col-sm-10 { width: 83.33333333%; }
	.col-sm-9 { width: 75%; }
	.col-sm-8 { width: 66.66666667%; }
	.col-sm-7 { width: 58.33333333%; }
	.col-sm-6 { width: 50%; }
	.col-sm-5 { width: 41.66666667%; }
	.col-sm-4 { width: 33.33333333%; }
	.col-sm-3 { width: 25%; }
	.col-sm-2 { width: 16.66666667%; }
	.col-sm-1 { width: 8.33333333%;}
}


@media all and (max-width:768px) {
  /*html { font-size:15px; }*/
  * { outline:0 !important; }
  html{ -webkit-touch-callout:none; -webkit-user-select:none; -webkit-tap-highlight-color:rgba(0, 0, 0, 0); }
  .mt0 { margin-top: 0 !important;}
  .mt4 { margin-top: 4px !important; }
  .mt8 { margin-top: 8px !important; }
  .mt16 { margin-top: 16px !important; }
  .mt24 { margin-top: 24px !important; }
  .mt32 { margin-top: 32px !important; }
  .mt48 { margin-top: 48px !important; }
  .mt64 { margin-top: 32px !important; }
  .mt96 { margin-top: 48px !important; }
  .mt120 { margin-top: 80px !important; }
  .mt200 { margin-top: 120px !important; }

  .mb0 { margin-bottom: 0 !important;}
  .mb4 { margin-bottom: 4px !important; }
  .mb8 { margin-bottom: 8px !important; }
  .mb16 { margin-bottom: 16px !important; }
  .mb24 { margin-bottom: 24px !important; }
  .mb32 { margin-bottom: 32px !important; }
  .mb48 { margin-bottom: 48px !important; }
  .mb64 { margin-bottom: 32px !important; }
  .mb96 { margin-bottom: 48px !important; }
  .mb120 { margin-bottom: 80px !important; }
  .mb200 { margin-bottom: 120px !important; }

  .mr8 { margin-right:8px !important; }
  .mr16 { margin-right:16px !important; }
  .mr32 { margin-right:32px !important; }
  .mo-pr0 { padding-right: 0px !important; }
  .mo-pl0 { padding-left: 0px !important; }

  .pt0 { padding-top: 0 !important;}
  .pt4 { padding-top: 4px !important; }
  .pt8 { padding-top: 8px !important; }
  .pt16 { padding-top: 16px !important; }
  .pt24 { padding-top: 24px !important; }
  .pt32 { padding-top: 32px !important; }
  .pt48 { padding-top: 48px !important; }
  .pt64 { padding-top: 32px !important; }
  .pt96 { padding-top: 48px !important; }
  .pt120 { padding-top: 80px !important; }
  .pt200 { padding-top: 120px !important; }
  
  .pb0 { padding-bottom: 0 !important;}
  .pb4 { padding-bottom: 4px !important; }
  .pb8 { padding-bottom: 8px !important; }
  .pb16 { padding-bottom: 16px !important; }
  .pb24 { padding-bottom: 24px !important; }
  .pb32 { padding-bottom: 32px !important; }
  .pb48 { padding-bottom: 48px !important; }
  .pb64 { padding-bottom: 32px !important; }
  .pb96 { padding-bottom: 48px !important; }
  .pb120 { padding-bottom: 80px !important; }
  .pb200 { padding-bottom: 120px !important; }
}
@media all and (max-width:640px) {

}


.toggleSwitch {
  width: 55px;
  height: 30px;
  display: block;
  position: relative;
  border-radius: 15px;
  background-color: #fff;
  box-shadow: 0 0 16px 3px rgba(0 0 0 / 15%);
  cursor: pointer;
  margin: 10px;
}

.toggleSwitch .toggleButton {
  width: 23px;
  height: 23px;
  position: absolute;
  top: 50%;
  left: 4px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: #5aaecc;
}

#toggle:checked ~ .toggleSwitch {
  background: #5aaecc;
}

#toggle:checked ~ .toggleSwitch .toggleButton {
  left: calc(100% - 28px);
  background: #fff;
}