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

/*Normalize*/
html{overflow-y:auto; overflow-x:hidden}
html, body{width:100%; height:100%}
body{background:#fff}
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, samp {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:#181818; font-weight:400; letter-spacing:-0.25px; font-family:'Noto Sans KR', 'Malgun Gothic', '맑은고딕' , '돋움','dotum', 'Helvetica', 'AppleSDGothicNeo', sans-serif;}
h1, h2, h3, h4, h5, h6, input, textarea, select, button{color:#181818; font-size:14px; font-weight:400; letter-spacing:-0.25px; font-family:'Noto Sans KR', '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*/
.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;}
.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핵 */
.p_rel{position:relative}
.fit_img{width:100%; height:100%; object-fit:cover}
.clearfix:before,
.clearfix:after {content:" "; display: table;}
.clearfix:after {clear: both;}
.sc_left{float:left}
.sc_right{float:right}
.layer_center{position:absolute; left:0; top:0; right:0; bottom:0; margin:auto} /*width, height 넣을 것*/
.dp_tb{display:table; width:100%; height:100%}
.dp_tr{display:table-row;}
.dp_tc{display:table-cell; vertical-align:middle}
.dsp, .t_dsp, .m_dsp{display:none}

/*팝업 공통*/
.pop-layer {display:none; position:absolute; top:50%; left:50%; height:auto; z-index:1000; overflow:hidden}
.layer1, .layer2, .layer3, .layer4, .layer4_1, .layer5, .layer6, .layer7, .layer8, .layer9, .layer10{display:none; position:fixed; _position:absolute; top:0; left:0; width:100%; height:100%; z-index:1000;}
.layer1 .bg, .layer2 .bg, .layer3 .bg, .layer4 .bg, .layer4_1 .bg, .layer5 .bg, .layer6 .bg, .layer7 .bg, .layer8 .bg, .layer9 .bg, .layer10 .bg{position:absolute; top:0; left:0; width:100%; height:100%; background:#000; opacity:.7; filter:alpha(opacity=70);}
.layer1 .pop-layer, .layer2 .pop-layer, .layer3 .pop-layer, .layer4 .pop-layer, .layer4_1 .pop-layer, .layer5 .pop-layer, .layer6 .pop-layer, .layer7 .pop-layer, .layer8 .pop-layer, .layer9 .pop-layer, .layer10 .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}

/* 시작 2020-02-20 수정 */
/*MARGIN, PADDING*/
.mt5{margin-top:5px}
.mt10{margin-top:10px}
.mt15{margin-top:15px}
.mt17{margin-top:17px}
.mt20{margin-top:20px}
.mt25{margin-top:25px}
.mt30{margin-top:30px}
.mt35{margin-top:35px}
.mt40{margin-top:40px}
.mt50{margin-top:50px}
.mb20{margin-bottom:20px}
.mb30{margin-bottom:30px}
.pt10{padding-top:10px}
.pt15{padding-top:15px}
.pt20{padding-top:20px}
.pt30{padding-top:30px}
.pt35{padding-top:35px}
.pt40{padding-top:40px}
.pt50{padding-top:50px}
.pb20{padding-bottom:20px}
.bd0{border:0 !important}
/* 끝 2020-02-20 수정 */

/*FORM*/
input, select, label{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"]{}
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder{font-weight:bold; color:#bbb}  /*placeholer*/
input.type1{display:block; width:100%; height:52px; font-size:14px; font-weight:500; color:#333; padding-left:22px; border-color:#e0e0e0; background:#fff}
input.type1::-webkit-input-placeholder{color:#aaa}  /*placeholer*/
input.type2{display:block; width:100%; height:42px; font-size:14px; font-weight:bold; color:#333; padding-left:9px; border-color:#ddd; background:#fff; border-radius:4px}
input.type2::-webkit-input-placeholder{font-weight:bold; color:#bbb}  /*placeholer*/
input[type="text"].ib{display:inline-block; }
select{display:inline-block; margin:0; border:1px solid #e4e4e4; font-size:13px; color:#333; border-radius:0px 0px; outline:none}
select.type1{width:100%; height:42px; padding-left:9px; font-size:14px; font-weight:bold; color:#333; border:1px solid #ddd; border-radius:4px; background:#fff url('/appimg/common/arw4.png') no-repeat right 14px center; background-size:11px auto; zoom:1;*background:none}
/*select.type2{width:100%; height:50px; line-height:50px; border:none; padding-left:19px; font-size:14px; color:#333; background:#f1f1f1 url('/appimg/common/arw_form2.png') no-repeat right 11px center; zoom:1;*background:none}*/
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:auto; outline:none}
textarea.type1{height:80px;  font-size:14px; font-weight:bold; color:#333; line-height:20px; padding:9px 9px; border-color:#ddd; background-color:#f5f5f5; border-radius:4px}
textarea.type2{height:150px;  font-size:14px; font-weight:bold; color:#333; line-height:20px; padding:9px 9px; border-color:#ddd; background-color:#fff; border-radius:4px}

/*CHECKBOX, RADIO BUTTON*/
input[type="checkbox"].hm-cb1{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0;} /*기본버튼 없애기*/
input[type="checkbox"].hm-cb1 + label{display:inline-block; margin:0 0 0 0; font-size:13px; font-weight:300; color:#555; letter-spacing:-0.25px; line-height:16px; padding-left:19px; background:url('/appimg/common/cb1_1.png') no-repeat 0 0; background-size: 16px 16px; box-sizing:border-box; user-select: none;}  /*라디오 버튼 STYLE*/
input[type="checkbox"].hm-cb1:checked + label{background:url('/appimg/common/cb1_2.png') no-repeat 0 0; background-size: 16px 16px}  /*선택 후*/
input[type="checkbox"].hm-cb2{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0;} /*기본버튼 없애기*/
input[type="checkbox"].hm-cb2 + label{display:inline-block; margin:0 0 0 0; font-size:14px; font-weight:300; color:#333; letter-spacing:-0.25px; line-height:16px; padding-left:23px; background:url('/appimg/common/cb2_1.png') no-repeat 0 0; background-size: 16px 16px; box-sizing:border-box; user-select: none;}  /*라디오 버튼 STYLE*/
input[type="checkbox"].hm-cb2:checked + label{background:url('/appimg/common/cb2_2.png') no-repeat 0 0; background-size: 16px 16px}  /*선택 후*/

input[type="radio"].hm-radio1{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0;} /*기본버튼 없애기*/
input[type="radio"].hm-radio1 + label{display:inline-block; margin:0 19px 0 0; font-size:13px; font-weight:300; color:#222; line-height:22px; padding-left:29px; background:url('/appimg/common/cb3_1.png') no-repeat 0 0; background-size: 22px 22px; box-sizing:border-box; user-select: none;}  /*라디오 버튼 STYLE*/
input[type="radio"].hm-radio1:checked + label{background:url('/appimg/common/cb3_2.png') no-repeat 0 0; background-size: 22px 22px}  /*선택 후*/

input[type="radio"].hm-radio2{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0;} /*기본버튼 없애기*/
input[type="radio"].hm-radio2 + label{display:block; margin:0 0 11px 0; font-size:16px; font-weight:bold; color:#222; line-height:23px; padding-left:29px; background:url('/appimg/common/cb4_1.png') no-repeat 0 0; background-size: 23px 23px; box-sizing:border-box; user-select: none;}  /*라디오 버튼 STYLE*/
input[type="radio"].hm-radio2 + label span{font-size:14px; font-weight:400}
input[type="radio"].hm-radio2:checked + label{color:#d71023; background:url('/appimg/common/cb4_2.png') no-repeat 0 0; background-size: 23px 23px}  /*선택 후*/


/*파일첨부 : 기본*/
.file_input label {display:inline-block; position:relative; width:50px; height:50px; border:none; background:#444 url('/appimg/common/ico_file1.png') no-repeat center; background-size:16px 16px; text-align:center; line-height:50px; vertical-align:middle; overflow:hidden; box-sizing:border-box}
.file_input label input {position:absolute; width:0; height:0; overflow:hidden;}
.file_input input[type=text]{width:calc(100% - 50px); height:50px; line-height:50px; border:none; padding-left:19px; font-size:14px; color:#333; background:#f4f3ef; box-sizing:border-box}

.file_input1{position:relative;}
.file_input1 label{display:block; position:absolute; top:5px; right:5px; width:47px; border:none; font-size:13px; font-weight:bold; color:#fff; letter-spacing:-0.25px; text-align:center; line-height:32px; background-color:#666; overflow:hidden; border-radius:4px; box-sizing:border-box}
.file_input1 label input {position:absolute; width:0; height:0; overflow:hidden;}

/*Button*/
.button1{display:inline-block; line-height:40px; font-size:14px; font-weight:bold; color:#222; text-align:center; padding:0 31px; border:1px solid #d3d3d3; background-color:#fff; border-radius:4px}
.button1.on{color:#fff; border-color:#d71023; background-color:#d71023}
.button1 span{display:inline-block;}
.button1 .ico1{padding-left:19px; background:url('/appimg/common/ico_mobile1_1.png') no-repeat 0 center; background-size:11px auto}
.button2{display:inline-block; line-height:52px; font-size:18px; font-weight:bold; color:#fff; text-align:center; letter-spacing:-0.25px; padding:0 32px; background:#9800ef; border-radius:8px}
input.button3, .button3{display:block; width:100%; line-height:54px; font-size:15px; font-weight:bold; color:#fff; letter-spacing:-0.25px; border:0; background-color:#d71124; text-align:center; border-radius:5px; overflow:hidden; cursor:pointer}
input.button4, .button4{display:block; width:100%; line-height:52px; font-size:14px; font-weight:500; color:#fff; letter-spacing:-0.25px; border:0; background-color:#555555; text-align:center; border-radius:5px; overflow:hidden; cursor:pointer}
input.button5, .button5{display:block; width:100%; line-height:42px; font-size:14px; font-weight:bold; color:#999; border:1px solid #e8e8e8; background-color:#e8e8e8; text-align:center; border-radius:5px; overflow:hidden; cursor:pointer; box-sizing:border-box;}
input.button5.fill, .button5.fill{color:#fff; border-color:#d71124; background-color:#d71124}
input.button5.tsp, .button5.tsp{border-color:#d71023; color:#d71023; background-color:#fff}
input.button6, .button6{display:block; width:100%; line-height:52px; font-size:16px; font-weight:bold; color:#fff; letter-spacing:-0.25px; border:0; background-color:#d71023; text-align:center; border-radius:5px; overflow:hidden; cursor:pointer}

/*유튜브 반응형*/
.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;}
}

/* 시작 2021-02-18 추가 */
/* PAGING */
.paging {height:34px; font-size:12px; text-align:center;}
.paging a{display:inline-block;min-width:34px;height:34px;padding:0 6px; margin:0 1px; line-height:33px;color:#999;border:1px solid #dbdbdb;vertical-align:middle;cursor:pointer;box-sizing: border-box;}
.paging a:hover, .paging a:focus, .paging a.selected{color:#fff; border:1px solid #d71023;text-decoration:none; background-color:#d71023}
.paging .first, .paging .prev, .paging .next, .paging .last{width:34px; height:34px; padding:0; font-size:0;}
.paging .first{background:#fff url('/appimg/common/arw2-1.png') center no-repeat}
.paging .first:hover{background:#d71023 url('/appimg/common/arw2-1-1.png') center no-repeat}
.paging .prev{margin-right:6px; background:#fff url('/appimg/common/arw2-2.png') center no-repeat}
.paging .prev:hover{background:#d71023 url('/appimg/common/arw2-2-1.png') center no-repeat}
.paging .next{margin-left:6px; background:#fff url('/appimg/common/arw2-3.png') center no-repeat}
.paging .next:hover{background:#d71023 url('/appimg/common/arw2-3-1.png') center no-repeat}
.paging .last{background:#fff url('/appimg/common/arw2-4.png') center no-repeat}
.paging .last:hover{background:#d71023 url('/appimg/common/arw2-4-1.png') center no-repeat}
/* 끝 2021-02-18 추가 */