@import url("font-awesome.min.css");
@import url("axicon.css");

@font-face {
  font-family: 'Noto Sans KR';
  font-style: normal;
  font-weight: 300;
  src: url(../fonts/NotoSansKR-Light.otf) format('opentype');
}
@font-face {
   font-family: 'Noto Sans KR';
   font-style: normal;
   font-weight: 400;
   src: url(../fonts/NotoSansKR-Regular.otf) format('opentype');
 }
@font-face {
   font-family: 'Noto Sans KR';
   font-style: normal;
   font-weight: 500;
   src: url(../fonts/NotoSansKR-Medium.otf) format('opentype');
 }
@font-face {
   font-family: 'Noto Sans KR';
   font-style: normal;
   font-weight: 700;
   src: url(../fonts/NotoSansKR-Bold.otf) format('opentype');
 }
@font-face {
   font-family: 'Noto Sans KR';
   font-style: normal;
   font-weight: 900;
   src: url(../fonts/NotoSansKR-Black.otf) format('opentype');
 }

/* reset */
* { padding:0; margin:0 }
html { height:100% }
body { height:100%; }
body, input, select, textarea, button { font-size:14.5px; font-family:'Noto Sans KR',sans-serif, dotum; font-weight:300; color:#222; letter-spacing:0 }
ul, ol { list-style:none }
html, h1, h2, h3, h4, h5, h6, form, fieldset, img { border:0 }
h1, h2, h3, h4, h5, h6 { font-weight:400; font-size:1em; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display:block }
label, input, button, select, img { vertical-align:middle }
input[type=text], input[type=password], input[type=date] { padding:0 9px; border:1px solid #ddd; color:#222; line-height:26px; height:26px; }
input[type=text]::-webkit-input-placeholder, input[type=password]::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color:#999 !important ; font-size:0.9em; font-weight:400 !important }
input[type=text]:-ms-input-placeholder, input[type=password]:-ms-input-placeholder, textarea:-ms-input-placeholder { color:#999 !important; font-size:0.9em !important }
input[type=text]:-moz-placeholder, input[type=password]:-moz-placeholder, textarea:-moz-placeholder { color:#999 !important; font-size:0.9em !important }
input[type=text], input[type=password], input[type=submit], input[type=image], input[type=date], button {border-radius:3px;font-size:1em;-webkit-appearance:none}
input[type=text]:disabled { border-radius:3px; background:#f4f4f4; border-color:#eee }
input[type=checkbox].styled, input[type=radio].styled { width:17px; height:17px; border:none; opacity:0; cursor:pointer; position:relative; z-index:1  }
input[type=checkbox].styled + i, input[type=radio].styled + i {width:17px; height:17px; display:inline-block; vertical-align:middle !important; background:url(../images/common/icon_input.png) no-repeat -27px 0; margin:0 0 0 -17px;  }
input[type=checkbox].styled:checked + i { background-position:-54px 0 }
input[type=checkbox].styled:disabled + i { background-position:0 0 }
input[type=radio] + i { background-position:-27px -27px }
input[type=radio]:checked + i { background-position:-54px -27px }
input[type=radio]:disabled + i { background-position:0 -27px }
input[type=text]::-ms-clear, input[type=password]::-ms-clear, input[type=date]::-ms-clear { display:none }
button { cursor:pointer }
select { border:1px solid #e4e4e4; height:28px; /*padding:0 9px;*/ cursor:pointer; border-radius:3px; color:#222 }
.styled_select { height:26px; overflow:hidden; background:#fff url(../images/common/select_bg.png) no-repeat right; border:1px solid #e4e4e4; display:inline-block; border-radius:3px; vertical-align:middle; }
.styled_select:hover { background-image:url(../images/common/select_bg_on.png) }
.styled_select select { background:transparent; height:26px; line-height:26px; border:0; -webkit-appearance: none; outline:none; padding-right:30px; width:100%; vertical-align:top }
.styled_select select:disabled { background:#f4f4f4; cursor:default }
.styled_select select::-ms-expand { display:none }
label { display:inline-block; vertical-align:middle; margin:0 8px 0 0 }
hr { display:none; background:#ddd; border:none; height:1px }
a, a:link, a:visited { text-decoration:none; color:#222 }
strong, b, th { font-weight:400; }
table { width:100%; border-collapse:collapse;}
caption { display:none; font-size:0; line-height:0 }
textarea {color:#222; border:1px solid #ddd; padding:9px; width:calc(100% - 20px) }
address { font-style:normal }

input.long { width:calc(100% - 30px) !important }
input.half { width:calc(50% - 30px) !important }
input.short { width:50px !important; text-align:center }
.styled_file { position: relative; overflow: hidden; } 
.styled_file .btn { width:85px; padding-left:0; padding-right:0; cursor:default }
.styled_file .btn i { vertical-align:-1px }
.styled_file input[type=file] { position:absolute; left:0; top:0; width:80px; height:28px; line-height:28px; opacity:0; cursor:default }
.styled_file input[type=text] { position:absolute; left:90px; border:none; width:80% }

.input_date { border-radius:3px 0 0 3px !important; width:80px !important; text-align:center; }
.input_date + i { border-radius:0 3px 3px 0; border:1px solid #ddd; margin-left:-1px; height:26px; line-height:26px; vertical-align:middle; width:30px; text-align:center; cursor:pointer; transition:all .2s; background:#fff }
.input_date + i:hover { background:#f4f4f4 }

/* global */
.txt_black { color:#222 !important }
.txt_white { color:#fff !important }
.txt_gray { color:#aaa !important }
.txt_red { color:#e11414 !important }
.txt_blue { color:#069be8 !important }
.txt_orange { color:#ffaa00 !important }
.txt_green { color:#8ecd09 !important }
.txt_brown { color:#9f5e15 !important }
small { font-size:13px }

.txt_passed, .txt_resolved { color:#82d400 !important }
.txt_failed, .txt_new { color:#de2929 !important }
.txt_incomplete { color:#ef660c !important }
.txt_blocked, txt_reopened { color:#f5ad12 !important }
.txt_unexecuted { color:#666 !important }
.txt_assigned { color:#2998e3 !important }

.txt_sm { font-size:12px !important }
.txt_lg { font-weight:600; font-size:14px; vertical-align:-1px }

.overflow_y { overflow-y:auto; overflow-x:hidden }
.clear:after { content:""; display:block; clear:both }
.center { text-align:center !important }
.left { text-align:left !important }
.right { text-align:right !important }
.f_left { float:left !important } 
.f_right { float:right !important } 
.skip { font-size:0; text-indent:-9000px; line-height:0; display:none }
.ellipsis { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:inline-block }
input.long { width:calc(100% - 20px) }
ul:after { clear:both; content:""; display:block }
.inblock { display:inline-block; vertical-align:middle }

.succession { margin-top:15px !important }
.paragraph { margin-bottom:50px !important }
span.space { display:inline-block; width:20px }
span.parti { display:inline-block; vertical-align:middle; width:1px; background:#ddd; margin:0 5px; height:10px }
.br { display:block }
.prepare { width:500px; margin:50px auto; padding:50px; border:1px solid #eaeaea}
.prepare h2 { font-size:24px; text-align:center; margin:0 0 20px }
.prepare h2 i { font-size:50px; margin:0 0 20px; display:block; color:#ddd }
.prepare p { text-align:center; font-size:13px }

.wrap:after { clear:both; content:""; display:block }
.btn { display:inline-block; border-radius:3px; vertical-align:middle; font-weight:400; padding:6px 10px 6px 8px; line-height:14px; transition:all .2s ease; border:1px solid #e0e0e0; background:#fff; box-sizing:border-box }
.btn i { font-size:14px }
.btn:hover { background-image:linear-gradient(to bottom, #fff , #f0f0f0); border-color:#e0e0e0 }
.btn-primary { background:#004f99; border:1px solid #014482; color:#fff !important }
.btn-primary:hover { background:#014482; border-color:#003668 }
.btn-info { background:#689cc0; border:1px solid #5b8fb3; color:#fff !important }
.btn-info:hover { background:#5085aa; border-color:#43779b }
.btn-submit { background:#3e59ae; border-color:#344fa1; color:#fff !important  }
.btn-submit:hover { background:#344fa1; border-color:#2d4798 }
.btn-warning { background:#d94422; border-color:#ce3a18; color:#fff !important  }
.btn-warning:hover { background:#ce3a18; border-color:#c12f0e }
.btn-lg { padding:10px 20px }
.btn-sm { font-size:12px }
.btn-sm-icon { padding:4px 0; width:26px; border-radius:2px; line-height:1; text-align:center }
.btn-xs { border:none; padding:0; font-size:13px; line-height:1; color:#3086c2 !important }
.btn-xs:hover { background:none }

/*::-webkit-scrollbar {width:10px; height:10px; }
::-webkit-scrollbar-track { background:rgba(0,0,0,0.05) }
::-webkit-scrollbar-thumb { background:rgba(0,0,0,0.1); border-radius:6px }*/

.btn_guide a { display:inline-block; background:red; color:#fff; font-weight:500; padding:10px; }

.wrap { width:1000px; position:relative; margin:0 auto }

/* pop layer */
#popLayerBg { position:fixed; z-index:99; width:100%; height:100%; background:#000; opacity:0.8; filter:alpha(opacity=80); display:none }
.pop_layer { z-index:100; display:none; position:fixed; left:50%; top:50%; transform:translate(-50%, -50%); background:#fff; border:2px solid #0e73c1; border-radius:5px; box-shadow:0 0 5px rgba(0,0,0,0.6); }
.pop_layer header { background:#0e73c1; height:40px; border-radius:3px 3px 0 0 }
.pop_layer header h2 { text-align:center; font-weight:500; font-size:15px; color:#fff; line-height:34px }
.pop_layer .btn_close { position:absolute; top:8px; right:12px; display:block; font-size:20px; text-align:center; width:20px; height:20px; line-height:20px; color:#fff; }
.pop_layer .con { padding:40px 30px }
.pop_layer .btn_area { text-align:center; margin:30px 0 0 0  }

/* intro */
#intro { height:100%; min-height:900px; background:url(../images/new/common/intro_bg.jpg); background-position:center; background-size:cover; text-align:center; position:relative }
#intro .logo { padding:130px 0 20px }
#intro h1 { color:#fff; font-weight:500; font-size:54px; letter-spacing:-1px }
#intro h3 { margin:5px 0 0 0; font-weight:400; font-size:24px; color:#fff; display:none }
#intro .btn_area { position:absolute; top:750px; width:100%; text-align:center; }
#intro .btn_area a { display:inline-block; width:261px; height:74px; position:relative }
#intro .btn_area a img { position:absolute; top:0; left:0 }
#intro .btn_area a .on { opacity:0; transition:opacity .2s;  }
#intro .btn_area a .off { opacity:1; transition:opacity .2s;  }
#intro .btn_area a:hover .on { opacity:1 }
#intro .btn_area a:hover .off { opacity:0 }

/* header */
#header { border-top:4px solid #002a69; border-bottom:1px solid #e0e0e0; background:#e6edf5 }
#header .top_member { border-bottom:1px solid #d7d9dc; padding:8px 0 7px 0; line-height:1; font-size:11px; font-family:dotum; letter-spacing:-1px; text-align:right }
#header .top_member span { display:inline-block; vertical-align:middle; margin:0 0 0 18px }
#header .top_member a { color:#999 }
#header .top_member a:hover { color:#444 }
#header .top_member i { margin:0 3px 0 0 }
#header .logo { padding:25px 0; float:left }
#header .gnb { float:right; margin:30px 0 0 0 }
#header .gnb li { float:left; margin:0 0 0 80px }
#header .gnb li a { display:inline-block; font-size:18px; font-weight:500; color:#444; line-height:30px; padding:0 5px; text-decoration:none !important }
#header .gnb li a:hover { color:#225396 }
#header .gnb li a.on { color:#225396 }

/* footer */
#footer { border-top:1px solid #e0e0e0; padding:30px 0 }
#footer .logo { float:left }
#footer .copyright, #footer address { margin-left:230px; font-size:12px; color:#999 }
#footer .copyright { margin-bottom:0; padding-top:3px }
#footer address span { display:inline-block; vertical-align:middle; margin:0 10px 0 0 }

/* contents */ 
#contents { margin:40px 0; min-height:350px }
#contents h2.title { font-weight:700; font-size:24px; letter-spacing:-1px; margin:0 0 20px }

/* main */
#contents.main { margin:60px 0 }
#contents.main .f_right { width:440px }
#contents.main .f_left { width:500px; overflow:hidden }
#contents.main .info h2 { font-size:34px; font-weight:700; left:-1px; line-height:1.4 }
#contents.main .info h3 { margin:0 0 12px; font-size:16px }
#contents.main .info p { font-weight:400; font-size:20px; line-height:1.3; letter-spacing:-.5px; color:#999; margin:0 0 45px }
#contents.main .banner { margin-bottom:60px }
#contents.main .banner li { float:left; font-weight:500; width:95px; text-align:center; margin:0 0 0 18px }
#contents.main .banner li:first-child { margin:0 }
#contents.main .banner .img { display:inline-block; width:84px; height:84px; background-position:center; background-repeat:no-repeat; margin-bottom:7px }
#contents.main .banner .img img { transition:opacity .2s; opacity:0 }
#contents.main .banner li:hover .img img { opacity:2 }
#contents.main .box { border:1px solid #e0e0e0; margin:-1px 0 0 0; padding:25px; position:relative }
#contents.main .box h3 { font-weight:500; font-size:18px; letter-spacing:-1px; margin:0 0 20px; line-height:1  }
#contents.main .box .more { display:block; position:absolute; right:-1px; top:-1px; }
#contents.main .box li { margin:15px 0 0 0; line-height:1 }
#contents.main .box li:first-child { margin:0 }
#contents.main .bbs01 li { background:url(../images/new/common/dot01.png) 0 8px no-repeat; padding-left:10px; position:relative; margin:10px 0 0 0; line-height:1 }
#contents.main .bbs01 .ellipsis { width:280px }
#contents.main .bbs01 .date { position:absolute; right:0; top:2px; font-size:13px }
#contents.main .c_center span { display:inline-block; vertical-align:middle; margin:0 20px 0 0 }
#contents.main .c_center .name { font-weight:400 }
#contents.main .c_center ul { margin:0 -15px }
#contents.main .c_center li { float:left; text-align:center; width:calc(100%/3); margin:0 }
#contents.main .c_center li span { display:block; text-align:center; margin:8px 0 0 0 }
#contents.main .c_center li span.tel { margin-top:15px; margin-bottom:3px }
#contents.main .c_center i { margin:0 3px 0 0 }

#touchSlider2 { width:500px; height:710px; position:relative; overflow:hidden; }
#touchSlider2 ul { width:99999px; height:710px; position:absolute; top:0; left:0; overflow:hidden; }
#touchSlider2 ul li { float:left; width:500px; height:710px; }

/* sub */ 
#sub_visual { background-position:center; background-repeat:no-repeat; height:243px; background-size:cover; text-align:center; color:#fff }
#sub_visual.sub01 { background-image:url(../images/new/common/sub_bg01.jpg) }
#sub_visual.sub02 { background-image:url(../images/new/common/sub_bg02.jpg) }
#sub_visual.sub03 { background-image:url(../images/new/common/sub_bg03.jpg) }
#sub_visual h2 { font-size:33px; font-weight:700; line-height:1; margin:0 0 12px; padding:83px 0 0 0; letter-spacing:-1px; display:none }
#sub_visual p { font-size:19px; font-weight:400; line-height:1.4; letter-spacing:-1px; display:none }

.table01 th, .table01 td { border:1px solid #e0e0e0; padding:3px }

#login { width:500px; margin:0 auto }
#login h2 { font-weight:700; font-size:24px; letter-spacing:-1px; margin:0 0 25px; text-align:center }
#login fieldset { border-top:2px solid #666; padding:30px 10px; border-bottom:1px solid #666; position:relative }
#login fieldset p { margin:0 0 7px }
#login input[type=text], #login input[type=password] { height:30px; line-height:30px; font-weight:500; width:275px }
#login input[type=submit] { position:absolute; right:10px; top:30px; width:100px; height:70px; line-height:68px; padding:0; font-weight:500 }
#login label { display:inline-block; width:60px; font-weight:400; vertical-align:middle }
#login .link_area { border-top:1px dashed #e0e0e0; margin:30px -10px 0 -10px; padding:20px 0 0 0; text-align:center; font-size:13px; }
#login .link_area a { color:#999; display:inline-block; vertical-align:middle; margin:0 20px; font-weight:400 }
#login .link_area a:hover { color:#444 }