@charset "utf-8";
/* 폰트적용 */
@import "font.css";
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800'); /* Open Sans */
@import url('https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900'); /* Roboto */
/**
* File Name : default.css
* Description : 기본 스타일시트
*/

/* 기본설정 */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td { padding:0; margin:0; line-height:1.6em; -webkit-text-size-adjust:none;}
ol, ul, li { list-style:none; }
h1, h2, h3, h4, h5, h6 { font-weight:normal; font-size:100%; }
form, fieldset { border:0; }
address, caption, em { font-weight:normal; font-style:normal; }
img { border:0; margin:0; padding:0; }

/* 글자 속성 */
/* a:link, a:visited, a:hover, a:active순서로 작성 */
a, a:link {color:#555;text-decoration:none;}
a:visited, a.visited, a.visited:visited {color:inherit;text-decoration:none;}
a:hover, a.visited:hover, a:active {color:inherit;text-decoration:none;}
a:focus {text-decoration:none;}

#container a { 
 -webkit-transition: all .3s ease; 
 -moz-transition: all .3s ease; 
 -o-transition: all .3s ease; 
 transition: all .3s ease;
 }
#container :hover { 
 -webkit-transition: all .3s ease; 
 -moz-transition: all .3s ease; 
 -o-transition: all .3s ease; 
 transition: all .3s ease;
 }

/* 숨김영역 */
#accessibility, #accessibility_footer, hr, legend { position:absolute; width:0; height:0; font-size:0; line-height:0; overflow:hidden; visibility:hidden; }
caption { display:none; }
.hidden {display:none;}
.blind {width:1px;height:1px;overflow:hidden;position:absolute;top:-9999em;left:-9999em;display:block;text-indent:-9999em;font-size:0px;line-height:0;}
.wblind {width:1px;height:1px;overflow:hidden;font-size:0;line-height:0;text-indent:-9999em;}/* 크롬에서 col width 값 안먹는 문제 대응 */

/* float 속성 초기화 */
.clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */

/* 이미지 인풋등 세로중앙정렬 */
input, textarea, select, img { vertical-align: middle; }
input, textarea, select { font-family:inherit; }

/* 드래그시 배경컬러 */
::-moz-selection {background:#454545; color:#fff;}
::selection {background:#454545; color:#fff;}

/* form css */
.input_form { height:13px; line-height:13px; padding:4px 0 1px 3px; border:1px solid; border-color:#d1d1d1 #e7e7e7 #e7e7e7 #d1d1d1; color:#565656; background:#f5f5f5; font-size:1em; }
.select_form { padding:0 0 0 3px; height:20px; border:1px solid; border-color:#d1d1d1 #e7e7e7 #e7e7e7 #d1d1d1; color:#565656; background:#f5f5f5; font-size:1em; }
.input_file { height:20px; border:1px solid; border-color:#d1d1d1 #e7e7e7 #e7e7e7 #d1d1d1; color:#565656; background:#f5f5f5; font-size:1em; }
.textarea_form { border:1px solid #dbe1e7; padding:3px 0 0 3px; color:#767676; margin:8px 0 9px 0; }

/* 공통 */
.s_font { font-size:0.8em; color:#777;}
.b_font {font-size:1.5em;}
.font_star { font-weight:600; color:#f04159; font-family:'verdana';}
.font_em { color:#f04159 !important;}
.font_em2 { color:#f04159 !important; font-weight:600;}
.font_bold { font-weight:600;}
.black_bold { font-weight:600; color:#333;}
.font_cb {color:#4482e8;}
.font_s_big {text-align:left;}

.width10 {width:10%;}
.width20 {width:20%;}
.width25 {width:25%;}
.width30 {width:30%;}
.width35 {width:35%;}

.mg20 { margin:20px !important;}
.mg40 { margin:40px !important;}
.mgT10 { margin-top:10px !important;}
.mgT20 { margin-top:20px !important;}
.mgT30 { margin-top:30px !important;}
.mgT40 { margin-top:40px !important;}
.mgT50 { margin-top:50px !important;}
.mgT60 { margin-top:60px !important;}
.mgL10 { margin-left:10px !important;}
.mgL20 { margin-left:20px !important;}
.mgL25 { margin-left:25px !important;}
.mgL30 { margin-left:30px !important;}
.mgL35 { margin-left:35px !important;}
.mgL40 { margin-left:40px !important;}
.mgL60 { margin-left:60px !important;}
.mgR20 { margin-right:20px !important;}
.mgR30 { margin-right:30px !important;}
.mgB10 { margin-bottom:10px !important;}
.mgB20 { margin-bottom:20px !important;}
.mgB30 { margin-bottom:30px !important;}
.mgB40 { margin-bottom:40px !important;}
.txL { text-align:left !important;}
.txC { text-align:center !important;}
.txR { text-align:right !important;}
.poR { position:relative !important;}
.bdT1 { border-top:1px solid #efefef;}
.pdT10 { padding-top:10px !important;}

.bgc_f {background-color:#ffffff;}
.bgc_e {background-color:#eeeeee;}
.bgc_d5 {background-color:#d5d5d5;}
.bgc_o {background-color:#ff8328;}
.bgc_b {background-color:#4482e8;}
.bgc_gr {background-color:#1ab01e;}


/* text-align */
.T_left {text-align:left;}
.T_right {text-align:right;}
.T_right {text-align:right;}
.T_center {text-align:center;}

/* Image */
.image {border-radius: 0.375em; border: 0; display: inline-block; position: relative; }
.image img {border-radius: 0.375em;display: block; }
.image.left, .image.right {max-width: 40%; }
.image.left img, .image.right img {width: 100%; }
.image.left {float: left;padding: 0 1.5em 1em 0;top: 0.25em; }
.image.right {float: right;padding: 0 0 1em 1.5em;top: 0.25em; }
.image.fit {display: block;margin: 0 0 2em 0;width: 100%; }
.image.fit img {width: 100%; }


.block {display: block}
/* 버튼 */
.btn-box {display:block;padding-top:20px;text-align:center;margin-top:20px; background:url('../images/sub/text_bt_dotted.png') repeat-x left top;}

.bw-btn, .bg-btn, .bp-btn, .bdp-btn {display:inline-block;font-size:0.938em;vertical-align:middle;transition:all .25s ease;border-radius: 0.375em;}
.bw-btn, a.bw-btn {background:#fff;border:1px solid #aaa;color:#444;}
.bw-btn:hover, .bw-btn:focus {background:#14a922;border:1px solid #14a922;color:#fff;}
.bw-btn:hover span, .bw-btn:focus span, .bw-btn:active span {color:#fff;}
.bg-btn, a.bg-btn {background:#383844;color:#fff;border:0}
.bg-btn:hover, .bg-btn:focus {background:#23232f;}
.bp-btn, a.bp-btn {background:#2820c7;color:#fff;border:0}
.bp-btn:hover, .bp-btn:focus {background:#1911b7;}
.bdp-btn, a.bdp-btn {background:#1f9e50;color:#fff;border:0}
.bdp-btn:hover, .bdp-btn:focus {background:#00703a;}
a.bw-btn span {display:block;padding:15px 20px;line-height:1;color:#444;}
a.bg-btn span, a.bp-btn span, a.bdp-btn span {display:block;padding:15px 20px;line-height:1;}
input.bw-btn, input.bg-btn, input.bp-btn, input.bdp-btn, button.bw-btn, button.bg-btn, button.bp-btn, button.bdp-btn {padding:0 20px;height:50px;cursor:pointer;}
/* 다운로드 */
.btn_download {display:inline-block;padding:10px 32px; background-repeat:no-repeat; background-position:right center; font-size:16px; line-height:20px; vertical-align:middle; text-align:left; transition-property:border-top-color, border-right-color, border-bottom-color, border-left-color, background-color, color; transition-duration:0.5s; transition-timing-function:ease-in-out;}
.btn_download {padding-right:21px;color:#fff; background-color:#23406f;}
.btn_download:hover {background-color:#1d3762;}
.btn_download > span {padding-right:32px;color:#fff;background-image:url('../images/sub/download_icon.png');background-repeat:no-repeat;background-position:right 2px;}

/* Layout */
html, body { height:100%;}

#wrap { width:100%; min-width:1200px; overflow-x:hidden;}
.wrap_box {position:relative;max-width:1200px; margin:0 auto;}

/* footer */
#footer {background-color:#282831;}
#footer .wrap_box {position:relative;padding:0 0 50px 0; color:#8d8d8d;}
#footer .data-wrap {width:100%; min-width:1200px; overflow-x:hidden;background-color:#383844;}
#footer .data-info {max-width:1200px; margin:0 auto; position:relative;font-size:1.05em; font-weight:600; padding:15px;}
#footer .data {display: inline-block;position: relative;padding:0 30px;margin-left:-1px;font-size:0.9em;line-height:1.3em;letter-spacing:-0.05em;color:#ffffff;}
#footer .data:after {content:'';position: absolute;left: 0;top:50%;margin-top:-6px;width:1px;height:12px;background:#ddd;}
#footer .data:first-child {margin-left:0;}
#footer .data:first-child:after {background:none;}

#footer address {padding:40px 240px 0 30px;font-size:0.85em;line-height:1.25em;}
#footer .tel {position:absolute;right:10px;top:40px;line-height:1.8em;}
#footer .tel .tit {color:#646476;font-size:1.2em;font-weight:600;}
#footer .tel .num {color:#ffffff;font-size:1.5em;font-weight:600;margin-right:20px;}


/* The animation code */
@keyframes quick {
    0% {color:#fff;}
    50% {color:#faf71c;}
    100% {color:#fff;}
}