@charset "utf-8";
@import url('font.css');

/*Normalize*/
html{overflow-y:auto; 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, address {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:bold}
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: 14px; line-height:1; color:#222; font-weight:400; letter-spacing: -0.25px; font-family:'Noto Sans KR', 'Malgun Gothic', '맑은고딕' , 'Noto Sans KR', '돋움','dotum', 'Helvetica', 'AppleSDGothicNeo', sans-serif;}
h1, h2, h3, h4, h5, h6, input, textarea, select, button{color:inherit; font-weight:inherit; letter-spacing:inherit; font-size:inherit; font-family: inherit;}
input, textarea, select{letter-spacing:normal; outline: none;}
img{vertical-align:top}
br{letter-spacing:normal}
input, select, label, button{vertical-align:middle}
input[type="text"], input[type="password"]{-webkit-appearance:none}
input[type="radio"]{-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; appearance: none}
a{text-decoration:none; color:inherit; cursor:pointer}
a[href^="tel"]{ font-style:normal}
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder{color:rgba(51,51,51,.4)}  /*placeholer*/
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {color: transparent; background: none; z-index: 1;}

/* 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*/
.hm_dpn{display:none !important}
.temp_space{width:100%; height:150px; margin:50px 0; background-color:#eee}
.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}  /*말줄임*/
.ellips1{display: -webkit-box; text-overflow: ellipsis; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: 1;}
.ellips2{display: -webkit-box; text-overflow: ellipsis; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: 2;}
.ellips3{display: -webkit-box; text-overflow: ellipsis; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: 3;}
.ellips4{display: -webkit-box; text-overflow: ellipsis; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: 4;}
.pre_box{white-space:pre-wrap; word-break:break-all}  /*textarea효과, 줄바꿈 등*/
/* _position:absolute는 ie6에서도 동일한 효과(position:fix)를 주기 위한 css핵 */  
.fit_img{width:100%; height:100%; object-fit:cover}
.fit_wimg{width:100%}
.hm_clearfix:before,
.hm_clearfix:after {content:" "; display: table;}
.hm_clearfix:after {clear: both;}
.layer_center{position:absolute; left:0; top:0; right:0; bottom:0; margin:auto} /*width, height 넣을 것*/
.dp_tb{display:table; width:100%}
.dp_tr{display:table-row;}
.dp_tc{display:table-cell; vertical-align:middle}
.dsp, .t_dsp, .m_dsp{display:none}
.vertical-text{transform: rotate(90deg)}

/*이미지 크게보기*/
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}

/*유튜브 반응형*/
.video-responsive{
    overflow:hidden;
    padding-bottom:56.25%;
    position:relative;
    height:0;
}
.video-responsive iframe{
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
}

  @keyframes fadeEffect
{  
	from {opacity: 0;}  to {opacity: 1;}
}

.scroll_box{overflow-y: auto; overflow-y: overlay}
.scroll_box::-webkit-scrollbar{width:6px; height: 6px;}
.scroll_box::-webkit-scrollbar-track{background: transparent; border-radius:3px;}
.scroll_box::-webkit-scrollbar-thumb{background: transparent; border-radius:3px;}
.scroll_box:hover::-webkit-scrollbar-thumb{background: #d3d2cb;}

/* ==========================================================================
   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: #111; /* 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: 0;
top: -9999px;
bottom: -9999px;
margin: auto;
padding-bottom: 56.25%; /* 16:9 ratio */
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;
}