@charset "utf-8";
/* font */
@import url("font.css");
/*base*/
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
html {overflow-y:scroll; margin:0; padding:0;}
body {overflow:hidden; margin:0; padding:0; font-family: 'mark', sans-serif; font-size:16px; color:#555;}
::-webkit-scrollbar {width:12px;}::-webkit-scrollbar-track {background-color:#000000;}::-webkit-scrollbar-thumb {background-color:#222425; border-radius: 6px;}
ul, ol, li {margin:0; padding:0; list-style:none;}
.desc-wrap ol li {padding:inherit;list-style: decimal !important; margin-left: 25px;}
.desc-wrap ul li {padding:inherit;list-style: disc; margin-left: 25px;} 
dl, dt, dd, p, 
h1, h2, h3, h4, h5, h6 {margin:0; padding:0;}
img {border:0 none;}
a {color:#777; text-decoration:none; cursor: pointer; }
a.org {color:#454857; text-decoration:none;}
a:hover,
a:active {
  color: #ab8c6b;
  text-decoration: none;
}
*:focus { box-shadow:none; -webkit-box-shadow:none; outline: 1px dotted #000; }
*:focus:not(:focus-visible) { outline: 0; }
table {width:100%; border-collapse:collapse; border:0 none;}
form {display:inline; margin:0; padding:0;}
fieldset, 
iframe {margin:0; padding:0; border:0 none;}
input,
select,
textarea,
button {margin:0; padding:0; font-family: 'mark', sans-serif; font-size:0.857em; cursor: pointer; }
button {border:0 none; background:none;}
hr,
legend,
caption,
.hidden {overflow:hidden; width:0; height:0; margin:0; padding:0; font-size:0; text-indent: -9999px; line-height: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%; }
.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; }

.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; }
.mt56 { margin-top: 56px !important; }
.mt64 { margin-top: 64px !important; }
.mt72 { margin-top: 72px !important; }
.mt80 { margin-top: 80px !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; }
.mb56 { margin-bottom: 56px !important; }
.mb64 { margin-bottom: 64px !important; }
.mb72 { margin-bottom: 72px !important; }
.mb80 { margin-bottom: 80px !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;}
.pt8 { padding-top: 8px !important; }
.pt16 { padding-top: 16px !important; }
.pt24 { padding-top: 24px !important; }
.pt32 { padding-top: 32px !important; }
.pt40 { padding-top: 40px !important; }
.pt48 { padding-top: 48px !important; }
.pt56 { padding-top: 56px !important; }
.pt64 { padding-top: 64px !important; }
.pt72 { padding-top: 72px !important; }
.pt80 { padding-top: 80px !important; }
.pt120 { padding-top: 120px !important; }
.pt200 { padding-top: 200px !important; }
.pt280 { padding-top: 280px !important; }

.pb0 { padding-bottom: 0 !important;}
.pb8 { padding-bottom: 8px !important; }
.pb16 { padding-bottom: 16px !important; }
.pb24 { padding-bottom: 24px !important; }
.pb32 { padding-bottom: 32px !important; }
.pb40 { padding-bottom: 40px !important; }
.pb48 { padding-bottom: 48px !important; }
.pb56 { padding-bottom: 56px !important; }
.pb64 { padding-bottom: 64px !important; }
.pb72 { padding-bottom: 72px !important; }
.pb80 { padding-bottom: 80px !important; }
.pb120 { padding-bottom: 120px !important; }
.pb200 { padding-bottom: 200px !important; }
.pb280 { padding-bottom: 280px !important; }

/******** UI ********/
[class*="btn"]:not(.btn-wrap) { position:relative; display:inline-block; letter-spacing:-0.5px; }
/*radio, checkbox custom style*/
/*checkbox*/
.checkbox-item { line-height: 24px; }
.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; min-height:24px; 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: 23px; height: 23px; display: inline-block; border: 1px solid #D5DADC; background-color: #D5DADC; position: absolute; left: 0; top: 0; border-radius: 0px; box-sizing: border-box; }
.checkbox-item input[type="checkbox"] + label:after { content:''; position:absolute; left:8px; top:4px; width:5px; height:8px; border-style: solid; border-color: #fff; border-width: 4px 0px 0px 4px; border-radius:2px; transform: rotate(-135deg) scale(0); transition: all .3s; }
.checkbox-item input[type="checkbox"]:checked + label:before { border: 1px solid #118F99; background-color: #118F99; }
.checkbox-item input[type="checkbox"]:checked + label:after { transform: rotate(-135deg) scale(1); }
/*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; }
.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 #118F99; background-color: #118F99; }
.radio-item input[type="radio"]:checked + label:after { background-color: #fff; }

/* selectbox */
select { font-weight: 600;  font-size: 16px; letter-spacing: 0; text-transform: uppercase; color: #FFFFFF; padding-left: 20px; padding-right: 20px; height: 52px; line-height: 52px; display: block; position: relative; border-bottom: 1px solid #252628; cursor: pointer; z-index:2; border-top: 1px solid #252628;  border-left: 1px solid #252628; border-right: 1px solid #252628; background: #000000 url(../../../resources/images/common/icon_select_xs_w.svg) no-repeat right 20px center;}
select::-ms-expand { display: none; }
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"] {
  padding-left: 20px;
  padding-right: 20px;
  height: 52px;
  line-height:normal;
  box-sizing:border-box;
  width:auto;
  background:#000000;
  border: 1px solid #252628;
  font-size:15px;
  font-weight: 600; 
  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 #252628; background-color: #000000; outline: 0px; color:#ffffff;}

/* input[type="text"]:focus, input[type="password"]:focus, input[type="tel"]:focus, input[type="number"]:focus { border:1px solid #DC0082; } */
::-webkit-input-placeholder {
   color:#303030;
}
:-moz-placeholder { /* Firefox 18- */
   color:#303030;
}
::-moz-placeholder {  /* Firefox 19+ */
   color:#303030;
}
:-ms-input-placeholder {
   color:#303030;
}
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%; } */

.ellipse { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
/*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 -5px; overflow: hidden;}
.col-sm-1, .col-md-1, 
.col-sm-2, .col-md-2, 
.col-sm-3, .col-md-3, 
.col-sm-4, .col-md-4, 
.col-sm-5, .col-md-5,
.col-sm-6, .col-md-6, 
.col-sm-7, .col-md-7, 
.col-sm-8, .col-md-8, 
.col-sm-9, .col-md-9, 
.col-sm-10, .col-md-10,
.col-sm-11, .col-md-11,
.col-sm-12, .col-md-12{float: left; position: relative; min-height: 1px; padding-right: 5px; padding-left: 5px; box-sizing: border-box;}

@media (min-width: 769px) {
	.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; }
  .mt40 { margin-top: 32px !important; }
  .mt56 { margin-top: 40px !important; }
  .mt80 { margin-top: 64px !important; }
  .mt120 { margin-top: 100px !important; }
  .mt200 { margin-top: 160px !important; }
  .mt240 { 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; }
  .mb40 { margin-bottom: 32px !important; }  
  .mb56 { margin-bottom: 40px !important; }
  .mb80 { margin-bottom: 64px !important; }
  .mb120 { margin-bottom: 100px !important; }
  .mb200 { margin-bottom: 160px !important; }
  .mb240 { 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;}
  .pt8 { padding-top: 8px !important; }
  .pt16 { padding-top: 16px !important; }
  .pt24 { padding-top: 24px !important; }
  .pt32 { padding-top: 32px !important; }
  .pt40 { padding-top: 32px !important; }
  .pt56 { padding-top: 40px !important; }
  .pt80 { padding-top: 64px !important; }
  .pt120 { padding-top: 100px !important; }
  .pt200 { padding-top: 160px !important; }
  .pt240 { padding-top: 120px !important; }
  .pt280 { padding-top: 160px !important; }

  .pb0 { padding-bottom: 0 !important;}
  .pb8 { padding-bottom: 8px !important; }
  .pb16 { padding-bottom: 16px !important; }
  .pb24 { padding-bottom: 24px !important; }
  .pb32 { padding-bottom: 32px !important; }
  .pb40 { padding-bottom: 32px !important; }
  .pb56 { padding-bottom: 40px !important; }
  .pb80 { padding-bottom: 64px !important; }
  .pb120 { padding-bottom: 100px !important; }
  .pb200 { padding-bottom: 160px !important; }
  .pb240 { padding-bottom: 120px !important; }
  .pb280 { padding-bottom: 160px !important; }
}
@media all and (max-width:640px) {

}