@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 {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:15px; line-height:1;color:#222; font-weight:300; letter-spacing:-0.5px; font-family:'Noto Sans KR','Malgun Gothic', '맑은고딕', '돋움','dotum', 'Helvetica', 'AppleSDGothicNeo', sans-serif;}
h1, h2, h3, h4, h5, h6, input, textarea, select, button{color:#222;font-size:15px; font-weight:300; letter-spacing:-0.5px; 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;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핵 */  
.p_rel{position:relative}
.fit_img{width:100%}
.fit_img1{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: 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}
.red{color:#cc0909 !important}

/*MARGIN, PADDING*/
.mt10{margin-top:10px}
.mt15{margin-top:15px}
.mt20{margin-top:20px}
.mt30{margin-top:30px}
.mt40{margin-top:40px}
.mt50{margin-top:50px}
.mb20{margin-bottom:20px}
.pt10{padding-top:10px}
.pt20{padding-top:20px}
.pt30{padding-top:30px}
.pt40{padding-top:40px}
.pt50{padding-top:50px}
.pb20{padding-bottom:20px}
.pb40{padding-bottom:40px}

/*FORM*/
input, select, label, textarea{box-sizing: border-box}
select{-webkit-appearance: none; -moz-appearance: none; appearance: none}
select::-ms-expand{display: none}/* IE 10, 11의 네이티브 화살표 숨기기 */

/*Button*/
.button1{display:inline-block; line-height:50px; font-size:15px; font-weight:bold; color:#fbf7ed; text-align:center; letter-spacing:0; padding:0 35px; border:1px solid #115128; border-radius:26px; background-color:#115128; box-sizing:border-box; transition:.3s ease-in-out} /*msc1*/
.button2{display:inline-block; line-height:50px; text-align:center; padding:0 23px; border:1px solid #93a592; border-radius:26px; box-sizing:border-box; transition:.3s ease-in-out} /*msc2, about사업영역*/
.button2 span{font-size:15px; font-weight:bold; color:#115128; letter-spacing:0; padding-right:52px; background:url('../images/common/arw3_1.png') no-repeat right 5px center; background-size:15px auto; transition:.3s ease-in-out}
.button2:hover{border-color:#115128; background-color:#115128;}
.button2:hover span{color:#fff; background-image:url('../images/common/arw3_2.png'); background-position:right center}
.button3{display:inline-block; position:relative; line-height:40px; padding-right:57px; border-bottom:1px solid #0b381b; box-sizing:border-box; transition:.3s ease-in-out} /*msc3*/
.button3 span{display:inline-block; font-size:15px; font-weight:bold; color:#0b381b; letter-spacing:-0.5px}
.button3:after{content:""; display:block; position:absolute; right:0; bottom:13px;  width:13px; height:13px; background:url('../images/common/ico_plus2.png') no-repeat 0 0; background-size:13px auto; opacity:.8; transition:.3s ease-in-out}
.button3:hover:after{transform: rotate(180deg); right:3px; opacity:1}
.button4{display:inline-block; position:relative; line-height:40px; padding-right:57px; border-bottom:1px solid rgba(255,255,255,.3); box-sizing:border-box; transition:.3s ease-in-out} /*msc4*/
.button4 span{display:inline-block; font-size:15px; font-weight:bold; color:rgba(255,255,255,.8); letter-spacing:-0.5px; transition:.3s ease-in-out}
.button4:after{content:""; display:block; position:absolute; right:3px; bottom:13px;  width:15px; height:10px; background:url('../images/common/arw3_2.png') no-repeat 0 0; background-size:15px auto; opacity:.8; transition:.2s ease-in-out}
.button4:hover{border-color:rgba(255,255,255,1)}
.button4:hover span{color:rgba(255,255,255,1)}
.button4:hover:after{opacity:1; right:0}
.button4.fill{line-height:40px; padding-right:114px; border-bottom:1px solid rgba(11,56,27,.3)} /*사업영역 sc5*/
.button4.fill span{color:rgba(11,56,27,1)}
.button4.fill:after{background:url('../images/common/arw3_1.png') no-repeat 0 0; background-size:15px auto}
.button4.fill:hover{border-color:rgba(11,56,27,1)}

/*전체 수정시 버튼*/
/*메인 비주얼*/
.btn-r01{display: inline-flex; justify-content: center; align-items: center; width: 165px; height: 50px; font-size: 16px; font-weight: bold; color: #fff; letter-spacing: -0.5px; padding: 0 23px; border: 1px solid #fff; border-radius:26px; box-sizing:border-box; transition:.3s ease-in-out}
.btn-r01:hover{border-color:#115128; background-color:#115128;}
.btn-r02{display: inline-flex; justify-content: center; align-items: center; width: 165px; height: 50px; font-size: 16px; font-weight: bold; color: #fff; letter-spacing: -0.5px; padding: 0 23px; border: 1px solid #115128; background-color: #115128; box-sizing:border-box; cursor: pointer; transition:.3s ease-in-out}


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

/*Thicker*/
.ticker-wrap{position:relative; overflow:hidden;}

.ticker {
    display: inline-block;
    white-space: nowrap;
    box-sizing: content-box;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-name: ticker;
    animation-name: ticker;
    -webkit-animation-duration: 70s;
    animation-duration: 70s;
    animation-delay: .5s;
}
.ticker_item{display: inline-block;}
@-webkit-keyframes ticker {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }
  100% {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}
@keyframes ticker {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }
  100% {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}

/*도형*/
.left-arrow { border-color: transparent black; border-style: solid; border-width: 20px 20px 20px 0px; height: 0px; width: 0px; } 
.right-arrow { border-color: transparent black; border-style: solid; border-width: 20px 0px 20px 20px; height: 0px; width: 0px; } 
.down-arrow { border-color: black transparent; border-style: solid; border-width: 20px 20px 0px 20px; height: 0px; width: 0px; } 
.up-arrow { border-color: black transparent; border-style: solid; border-width: 0px 20px 20px 20px; height: 0px; width: 0px; } 

:root {
    --form-border: #f6f7f9;
    --form-gray: #f6f7f9;
    --form-focus: #0b381b;    
    --form-basic: #0b381b;
    --form-chk: #0b381b;
    --form-fontsize : 16px;
    --form-lineheight : 22px;
    --form-fontcolor : #222;;
    --form-placeholder : #bbb;
    --form-padding : 18px;
    --form-padding1 : 14px 18px;
    --input-height: 56px;
    --input-gap: 17px;
    --textarea-height: 260px;
}
/* ==========================================================================
    FORM
    ========================================================================== */
.form-ip{display: block; width: 100%; height: var(--input-height); border: 1px solid var(--form-border); padding: 0 var(--form-padding); font-size: var(--form-fontsize); font-weight: bold; color: var(--form-fontcolor); line-height: var(--form-lineheight);}
.form-ip:focus{border-color: var(--form-focus); outline: none;}
select.form-ip{background-image: url('../images/common/arr_select01.png'); background-repeat: no-repeat; background-position: calc(100% - 15px) center; background-size: 11px auto;}
select.form-ip option{font-weight: bold; color: #fff; background-color: var(--form-basic);} 
.form-ip::-webkit-input-placeholder,
.form-ip:required:invalid{color: var(--form-placeholder);}/*placeholer*/
textarea.form-ip{height: var(--textarea-height); padding: var(--form-padding1);}
textarea.term-box{height: 144px; font-size: 12px; font-weight: 300; color: #777; line-height: 20px;}
.form-gray{border: 1px solid var(--form-gray); background-color: var(--form-gray)}

/*Slect group - Checkbox, Radio*/
.form-chk01{display: flex; align-items: center;}
.form-chk01 .form-check-input{width: 22px; height: 22px; border-color: var(--form-focus); border-radius: 0; background-color: var(--bg-color); margin-top: 0;}
.form-chk01 .form-check-input:focus{box-shadow: none}
.form-chk01 .form-check-input:checked{background-color: var(--form-focus);}
.form-chk01 .form-check-label{padding-left: 8px; font-size: 16px; color: #222; line-height: 22px; user-select: none}
.form-chk01 .btn-term{font-weight: bold; color: var(--form-basic); text-decoration: underline; margin-left: 7px;}

.form-chk02{display: flex; align-items: center;}
.form-chk02 input[type="checkbox"]{appearance: none; width: 18px; height: 18px; border: 1px solid #dadada; background-color: #fff; border-radius: 4px;}
.form-chk02 input[type="checkbox"]:checked{border-color: var(--form-chk); background: var(--form-chk) url('../images/common/ico_checked02.png') no-repeat center; background-size: 11px auto;}
.form-chk02 label{padding-left: 6px; font-size: 14px; color: #333; user-select: none}

.select-group01{display: flex; flex-wrap: wrap; align-items: center; width: 100%;}
.select-group01 > div{display: flex; align-items: center; margin-right: 22px; margin-bottom: 10px;}
.select-group01 > div:last-child{margin-right: 0}
.select-group01 .form-check-input{width: 16px; height: 16px; border-color: #bfbeb5; margin-top: 0; border: 1px solid #ddd;}
.select-group01 .form-check-input:checked{border-color: var(--form-check); background-color: var(--form-check);}
.select-group01 .form-check-label{font-size: 12px; padding-left: 4px;}
.select-group01 .form-ip{max-width: 150px; height: 36px; padding: 0 12px; margin-left: 15px;}
.select-group01 input[type="text"]:focus{border-color: var(--form-check);}
.select-group02{display: flex; flex-wrap: wrap; align-items: center; width: 100%;}
.select-group02 > div{display: flex; margin-right: 6px; margin-bottom: 10px;}
.select-group02 > div:last-child{margin-right: 0}
.select-group02 .form-check-input{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0;}
.select-group02 .form-check-label{height:40px; line-height:38px; padding:0 17px; border:1px solid var(--form-check); font-size: 12px; color: #222; text-align:center; background-color:#fff; box-sizing:border-box; cursor:pointer; user-select: none}
.select-group02 .form-ip{max-width: 150px; height: 40px; padding: 0 12px; margin-left: 15px;}
.select-group02 .form-check-input:checked + .form-check-label{color:#fff; background:var(--form-check)}

.anti-spam{display: flex;}
.anti-spam > img{width: 114px; height: var(--input-height)}
.anti-spam > .form-ip{flex: 1;}
.attachment{display: flex;}
.attachment > label{position: relative; width: var(--input-height); height: var(--input-height); background: var(--form-basic) url('../images/common/ico_file1.png') no-repeat center; background-size: 16px auto;}
.attachment > label > input{position: absolute; width: 0; height: 0; overflow: hidden;}
.attachment > .form-ip{width: calc(100% - 50px);}

.searchbar01{display: flex; height: 56px; box-shadow: 3px 3px 6px 2px rgba(0,0,0,.09);}
.searchbar01 input[type="text"]{display: block; flex: 1; border: 1px solid var(--point-color01); padding: 0 50px; font-size: 18px; font-weight: bold; color: #fff; background: var(--point-color01) url('../images/common/ico_glass01.png') no-repeat 23px center; background-size: 16px auto;;}
.searchbar01 .form-ip:focus{border-color: var(--form-focus);}
.searchbar01 button{display: flex; justify-content: center; align-items: center; border: 1px solid var(--point-color01); width: 120px; font-weight: bold; border-color: #e0e0e0; color: var(--point-color01); padding: 0 20px;}
.searchbar01::-webkit-input-placeholder,
.searchbar01:required:invalid{color: #999;}/*placeholer*/
/* ==========================================================================
    REQUEST
    ========================================================================== */
.request{position: relative; margin-left: calc(var(--input-gap) * -1); margin-right: calc(var(--input-gap) * -1);}
.request::before{content: ""; display: block; position: absolute; top: 0; left: var(--input-gap); width: calc(100% - calc(var(--input-gap) * 2)); height: 1px; background-color: var(--point-color01);}
.request .dot{display: inline-block; width: 7px; height: 7px; background-color: #0b381b; border-radius: 50%; vertical-align: text-top; margin-left: 6px;}
.request .wrap-form{padding: 23px 0 10px;}
.request .wrap-form > li{display: flex; flex-wrap: wrap;}
.request .wrap-form > li > div{flex: 1; padding: 15px var(--input-gap);}
.request .wrap-form .form-item{font-size: 15px; font-weight: bold; margin-bottom: 15px;}
.request .wrap-form .form-vl.dv-ip{display: flex;}
.request .wrap-form .form-vl.dv-tel{align-items: center;}
.request .wrap-form .form-vl.dv-tel > div{width: calc(33.333333333% - 20px);}
.request .wrap-form .form-vl.dv-tel > div.sep{width: 30px; font-size: 17px; font-weight: bold; text-align: center;}
.request .wrap-form .form-vl.dv-type01 .ip-long{flex: 1;}
.request .wrap-form .form-vl.dv-type01 .ip-short{width: 130px; margin-left: var(--input-gap);}

.request textarea.form-ip{font-size: 15px; font-weight: 400; line-height: 24px;}
.request .refer1{margin-top: 10px; font-size:12px; color: #999;}
.request .terms{margin-left: var(--input-gap); margin-right: var(--input-gap);}
.request .terms .form-chk02{margin-top: 15px}
.request .btngroup{display: flex; justify-content: center; margin-top: 30px}

@media only screen and (max-width: 1023px) {
    .request .wrap-form > li > div{padding: 12px var(--input-gap);}
    .request .wrap-form .form-item{font-size: 15px;}
    .request .wrap-form .form-vl.dv-type01 .ip-short{width: 110px;}



}

@media only screen and (max-width: 767px) {
    :root {
        --form-fontsize : 15px;
        --form-padding : 14px;
        --form-padding1 : 14px 14px;
        --input-height: 50px;
        --textarea-height: 180px;
    }

    .request .wrap-form{padding-top: 15px;}
    .request .wrap-form > li > div{flex: 1 1 100%;}
    .request .wrap-form .form-vl.dv-type01 .ip-short{width: 100px;}
}