@charset "utf-8";

/*Normalize*/
html{overflow-y:scroll; overflow-x:hidden}
html, body{width:100%;}
article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary {display:block;}
audio,canvas,progress,video {display: inline-block;}
html, body, div,  p, h1, h2, h3, h4, h5, h6, dl, dt, dd, ol, ul, li, blockquote, pre, button, fieldset, form, legend,
table, caption, tbody, tfoot, thead, tr, th, td, iframe, article, aside, canvas, details, embed,
figure, figcaption, header, footer, menu, nav, section, summary, audio, video {margin: 0; padding: 0; border: 0;  font-size: inherit; font-family: inherit; vertical-align:middle;}
img, fieldset{border:none;}
figure, figcaption{margin:0;padding:0}
em, dfn, cite, address,i{font-style: normal;}
mark {background-color: #eee; color: #000;}
small {font-size: 90%;}
sup,sub{position: relative;font-size: 0.9em;line-height: 0;vertical-align: baseline;}
sub {bottom: -0.25em;}
sup {top: -0.5em;}
del{ text-decoration: line-through; }
label{cursor:pointer}
b, strong{ font-weight: 600; }
em{font-style: normal;}
ol, ul, li { list-style:none;}
table {border-collapse:collapse; border-spacing:0;}
legend {overflow:hidden; position:absolute; width:0; height:0; font-size:0;}
caption {overflow:hidden; position:absolute; width:0; height:0; font-size:0;}
hr {overflow:hidden; position:absolute; height:0; width:0; font-size:0; border:none}
body{position:relative;font-size:15px; line-height:1;color:#555; font-family:'Noto Sans KR', sans-serif, 'Malgun Gothic', '맑은고딕' ,'돋움','dotum', 'Helvetica', 'AppleSDGothicNeo', sans-serif;}
h1, h2, h3, h4, h5, h6, input, textarea, select, button{color:#555;font-size:15px;font-family:'Noto Sans KR', sans-serif, 'Malgun Gothic', '맑은고딕', '돋움','dotum', 'Helvetica', 'AppleSDGothicNeo',sans-serif;}
input, textarea, select{letter-spacing:normal}
img{vertical-align:top}
br{letter-spacing:normal}
p{letter-spacing:normal}
input, select, label, button{vertical-align:middle}
input[type="text"], input[type="password"]{-webkit-appearance:none}
/*input[type="checkbox"]{-webkit-appearance:none;-webkit-border-radius:0}
input:checked[type="checkbox"]{-webkit-appearance:checkbox}*/
input[type="radio"]{border:none;-webkit-appearance:none}
button,input[type="button"],input[type="submit"],input[type="reset"],input[type="file"]{-webkit-appearance:button;border-radius:0}
textarea{-webkit-appearance:none}
select{-webkit-appearance:menulist-text}
a{text-decoration:none; color:inherit}
a[href^="tel"]{ font-style:normal}

/* accessibility */
#accessibility{overflow:hidden;position:relative;width:100%;z-index:1000}
#accessibility a{display:block;overflow:hidden;height:1px;width:1px;margin:0 -1px -1px 0;font-size:0;line-height:0;text-align:center}
#accessibility a:focus, #accessibility a:hover, #accessibility a:active {width:auto;height:20px;margin:0;padding:8px 0 0 15px;background:#20262c;font-size:12px;font-weight:700;line-height:1;color:#fff;}

/*ETC*/
.m_dsp{display:none}
.hm_dpn{display:none !important}
.temp_space{width:100%; height:150px; margin:50px 0; background-color:#eee}
.dp_block{display:block}
.blind{visibility:hidden;overflow:hidden;position:absolute;top:0;left:0;width:1px;height:1px;font-size:0;line-height:0}
.ellips{text-overflow:ellipsis; white-space:nowrap; overflow:hidden;text-align:left}  /*말줄임*/
.pre_box{white-space:pre-wrap; word-break:break-all}  /*textarea효과, 줄바꿈 등*/
.blue_overlay{cursor:default;display:block;position:fixed;top:0%;left:0%;width:100%;height:100%;background-color:black; -moz-opacity:0.8;opacity:.80;filter: alpha(opacity=80);}/*display: none; */
/* _position:absolute는 ie6에서도 동일한 효과(position:fix)를 주기 위한 css핵 */  
.fix{position:fixed;_position:absolute;width:100%;top:0;z-index:100;}
.p_rel{position:relative}
.fit_img{width:100%}
.clearfix:before,
.clearfix:after {content:" "; display: table;}
.clearfix:after {clear: both;}
.f_left{float:left;}
.f_right{float:right;}
.bold{font-weight:bold}
.layer_center{position:absolute; left:0; top:0; right:0; bottom:0; margin:auto} /*width, height 넣을 것*/
.layout.dv2 > div{width:50%}
.vertical-text{transform:rotate(90deg); transform-origin: left top 0;}

/*팝업 공통*/
.pop-layer {display:none; position:absolute; top:50%; left:50%; height:auto; z-index: 300; overflow:hidden}
.layer1, .layer2, .layer3{display:none; position:fixed; _position:absolute; top:0; left:0; width:100%; height:100%; z-index:300;}
.layer1 .bg, .layer2 .bg, .layer3 .bg{position:absolute; top:0; left:0; width:100%; height:100%; background:#000; opacity:.6; filter:alpha(opacity=70);}
.layer1 .pop-layer, .layer2 .pop-layer, .layer3 .pop-layer {display:block;}

/*이미지 크게보기*/
body.blank_img{background:#000}
body.blank_img .btn_back_blank{width:100%; height:100%;}
body.blank_img img{position:absolute; width:100%; top:0; bottom:0; left:0; right:0; margin:auto}

/*TEXT*/
.f_bold{font-weight:bold}
.f_normal{font-weight:normal}
.t_left{text-align:left}
.t_center{text-align:center}
.t_right{text-align:right}
.t_justy{text-align:justify}

/*MARGIN,PADDING,BORDER,BACKGROUND*/
.mt5{margin-top:5px}

/* FORM */
input, select, label{font-family: 'Karla', sans-serif; box-sizing: border-box}
select{-webkit-appearance: none; -moz-appearance: none; appearance: none}
select::-ms-expand{display: none}/* IE 10, 11의 네이티브 화살표 숨기기 */
input{padding:0px; height:auto; outline:none; border-radius:0px 0px}
input[type="text"], input[type="password"]{height:39px; border:1px solid #f0efef; padding-left:9px; background:#fbfbfb}
input[type="text"]:focus, input[type="password"]:focus{background:#fff;} /* : FILTER : IE 6 에서 속성 선택자 지원 안함 */
input[type="radio"], input[type="checkbox"]{margin:0}
select{display:inline-block; margin:0; border:1px solid #eee; font-size:13px; color:#333; border-radius:0px 0px}
textarea{width:100%; border:1px solid #eee; padding:10px 7px; margin:0; line-height:22px; font-size:15px; color:#333; background:#fff; resize: none; box-sizing:border-box; border-radius:0px 0px; overflow-y:hidden}
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder,
/* select:required:invalid{font-weight:300; color:#999} */  /*placeholer*/
textarea:focus, input:focus, select:focus{outline: none;}  /*인풋 포커스 아웃라인 빼기*/

input.type1{height:50px; border:none; padding-left: 14px; font-size:14px; color:#333; background:#f3f3f3}  /*온라인 문의폼*/
select.type1{height:50px; border:none; padding-left: 14px; font-size:14px; color:#333; background: #f3f3f3 url('../img/common/form_arw1.png') no-repeat calc(100% - 18px) center; background-size: 12px auto;}
select.type1 option{font-weight: bold; color: #fff; background-color: #222;} 
textarea.type1{line-height:22px; border:none; padding: 12px 14px; font-family: 'Karla', sans-serif; font-size:14px; color:#333; background:#f3f3f3}

/*체크박스 커스텀*/
input.hm-checkbox{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0} /*체크박스 없애기*/
input.hm-checkbox + label{display:inline-block; height:18px; padding-left:24px; font-family: 'Karla', sans-serif;  background:url('../img/common/cb1.png') no-repeat 0 0; background-size:18px 36px; box-sizing:border-box; cursor:pointer; user-select: none}  /*체크 전*/
input.hm-checkbox + label span{display:inline-block; font-size:14px; color:#333; line-height:18px;}  /*체크박스 텍스트 STYLE*/
input.hm-checkbox:checked + label{background-position:0 -18px}  /*체크 후, background-position만*/

/*라디오 버튼*/
input.hm-radio{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0;} /*라디오버튼 없애기*/
input.hm-radio + label{display:inline-block; height:40px; line-height:38px; padding:0 17px; border:1px solid #e3e3e3; text-align:center; background-color:transparent; box-sizing:border-box; cursor:pointer; user-select: none}  /*선택전*/
input.hm-radio + label span{display:inline-block; font-family: 'Karla', sans-serif; font-size:13px; color:#555}  /*라디오 버튼 STYLE*/
input.hm-radio:checked + label{border-color: #222; background:#222}  /*선택 후*/
input.hm-radio:checked + label span{color:#fff}

input.hm-radio01{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0;} /*라디오버튼 없애기*/
input.hm-radio01 + label{display:inline-block; height: 54px; line-height: 52px; padding:0 17px; border:1px solid #e3e3e3; text-align:center; background-color:transparent; box-sizing:border-box; cursor:pointer; user-select: none}  /*선택전*/
input.hm-radio01 + label span{display:inline-block; font-family: 'Karla', sans-serif; font-size: 15px; color:#555}  /*라디오 버튼 STYLE*/
input.hm-radio01:checked + label{border-color: #222; background:#222}  /*선택 후*/
input.hm-radio01:checked + label span{color:#fff}



/*파일첨부 : 기본*/
.file_input{
    position: relative;
    & label{position: relative; display:flex; justify-content: flex-end; position: absolute; top: 0; width: 100%;  border:none; text-align:center; line-height:50px; vertical-align:middle; overflow:hidden; box-sizing:border-box}
    & label span{display: block; width: 90px; height:50px; font-size:13px; color:#ccc; background-color: #222}
    & label input {position:absolute; width:0; height:0; overflow:hidden;}
    & input[type=text]{width: 100%; height:50px; border:none; padding-left:19px; font-family: 'Karla', sans-serif; font-size:14px; color:#333; background:#f3f3f3; box-sizing:border-box}
}


/*BUTTON*/
.button1{display: inline-flex; justify-content: center; align-items: center; width: 260px; height: 62px; text-align:center; padding: 0 28px; border:1px solid #222; background: transparent; box-sizing:border-box; transition: .3s ease-in-out}
.button1 span{display:inline-block; font-size:16px; color:#222; line-height: 20px; padding-left: 28px; background: url('../img/common/ico_send01.png') no-repeat 0 center / 20px auto; transition: .3s ease-in-out}
.button1:hover{background-color: #222;}
.button1:hover span{color: #fff; background-image: url('../img/common/ico_send0101.png')}

/* ==========================================================================
   VIMEO VIDEO BACKGROUND COVER
   ========================================================================== */
/* Video background */
.videobg {position: relative;
    width: 100%; /* Set video container element width here */
    height: 100%; /* Set video container element height here */
    overflow: hidden;
    background: #fff; /* bg color, if video is not high enough */
}

/* horizontally center the video */
.videobg-width {
    position: absolute;
    width: 100%; /* Change width value to cover more area*/
    height: 100%;
    left: -9999px;
    right: -9999px;
    margin: auto;
}

/* set video aspect ratio and vertically center */
.videobg-aspect {
    position: absolute;
    width: 100%;
    height: 100%; /* 기존 height: 0 + padding-bottom 제거 */
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: 0;
    overflow: hidden;
}

.videobg-make-height {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
}

.videobg-hide-controls {
    box-sizing: content-box;
    position: relative;
    height: 100%;
    width: 100%;
    /* Vimeo timeline and play button are ~55px high */
    padding: 55px 97.7777px; /* 16:9 ratio */
    top: -55px;
    left: -97.7777px; /* 16:9 ratio */
}

.videobg iframe {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border: 0 none;
}

/* ==========================================================================
  COMMON RESPONSIVE
   ========================================================================== */
.dsp, .p-dsp, .tl-dsp, .tp-dsp, .m-dsp, .m-dspi{display: none}
.show-mobile{display: none;}

@media only screen and (max-width: 1200px) {
    .p-dsp{display: block}
    .p-dspn{display: none;}
}

@media (width <= 1024px) {
    .tl-dsp{display: block}
    .tl-dspn{display: none;}
}

@media (width <= 860px) {
    .tp-dsp{display: block}
    .tp-dspn{display: none;}
}

@media (width <= 600px) {
    .m-dsp{display: block}
    .m-dspn{display: none;}
    .show-mobile{display: block;}
}